About TensorFlow Neural Network Playground
This TensorFlow neural network playground is free, needs no sign-up and runs in your browser, so training happens on your own device and nothing is uploaded. Pick one of four two-dimensional datasets, choose the activation function, learning rate, layers and neurons, press Train model, and watch a small network learn to separate the blue points from the orange ones.
While it trains you see the training loss and the test loss as two lines, updated after every epoch, while the decision boundary and a diagram of the network redraw every few epochs as it trains. When it finishes you get the training and test accuracy, and the background of the plot is painted with the network predictions, which is the decision boundary. Changing one setting at a time and training again is the quickest way to build a feel for what each one does.
The model is a real TensorFlow.js network: dense layers with your chosen activation, a sigmoid output, binary cross-entropy loss and the Adam optimiser. TensorFlow.js is part of the site and is loaded when you first press Train, so there is no download from anywhere else. It is an independent tool made by Ulkaa, not the original Google playground at playground.tensorflow.org, and it is simpler: it does not draw the individual neurons or weights.
How to use TensorFlow Neural Network Playground
- Choose a dataset: Circle, XOR, Two Gaussians or Spiral. The points are drawn on the plot straight away.
- Set the network: hidden layers (1 to 4), neurons per layer (1 to 16), the activation function (ReLU, Tanh, Sigmoid or Linear) and which input features it receives.
- Set the training: learning rate, L2 regularization, batch size, noise and the number of epochs (10 to 200).
- Press Train model. The status shows the epoch, the loss lines grow, and the boundary and the network diagram refresh as the network learns. Choose how often the boundary redraws, or leave it at every 2 epochs. Press Stop to end early.
- Read the result: the coloured background is the decision boundary, the diagram shows each link coloured by the sign of its weight and sized by its size, and the accuracy line gives training and test accuracy.
- Change one setting and train again to compare. Reset clears the plot and the curves.
Features
- Four datasets: circle, XOR, two Gaussians and spiral, 200 points each, with a noise slider.
- Seven selectable input features: X1, X2, X1 squared, X2 squared, X1 times X2, sin(πX1) and sin(πX2), where the sine features really are sin(π × X), so one full period spans the plot.
- One to four hidden layers of 1 to 16 neurons, with ReLU, Tanh, Sigmoid or Linear activation.
- Learning rate from 0.003 to 1, L2 regularization from none to 0.1, batch size 4 to 64 and 10 to 200 epochs.
- Live training loss and test loss curves, with the latest values in the heading.
- Training and test accuracy after the run, on a held-out fifth of the points.
- A decision boundary painted behind the data and redrawn every 1, 2, 5 or 10 epochs while the network trains, without freezing the page. With reduced motion switched on in your system, it updates once every 10 epochs instead.
- A network diagram: links are blue for positive weights and orange for negative ones, thicker for larger weights, and neurons are sized by their bias.
- A scatter plot that resizes with its container and has a text description for screen readers.
- Four starting points: the circle, XOR, spiral and two-Gaussians pages each open the tool with their own dataset, features and network.
- Stop and Reset buttons.
What the network computes
Each hidden layer applies a weighted sum followed by the activation function. The final layer is one neuron with a sigmoid, which gives the probability that a point is blue (label 1). Training minimises binary cross-entropy with Adam, and L2 regularization adds a penalty on the size of the weights.
hidden h = activation(W·x + b)
output p = sigmoid(w·h + b)
loss L = −[ y·log p + (1 − y)·log(1 − p) ]
L2 adds λ × Σ w² to the lossThe four datasets
| Dataset | Pattern | What it teaches |
|---|---|---|
| Circle | Blue points in the centre, orange in a ring around them | A straight line cannot separate it, but a curve or squared features can |
| XOR | Blue in two opposite corners, orange in the other two | Needs a hidden layer or the X1 times X2 feature |
| Two Gaussians | Two blobs, centred at (0.5, 0.5) and (-0.5, -0.5) | The easy case that a single straight boundary separates |
| Spiral | Two interleaved spiral arms | The hardest one: needs more capacity and more training |
Control ranges
| Setting | Options | Default |
|---|---|---|
| Hidden layers | 1 to 4 | 2 |
| Neurons per layer | 1 to 16 | 6 |
| Activation | ReLU, Tanh, Sigmoid, Linear | Tanh |
| Learning rate | 0.003, 0.01, 0.03, 0.1, 0.3, 1 | 0.03 |
| L2 regularization | None, 0.001, 0.003, 0.01, 0.03, 0.1 | None |
| Batch size | 4 to 64, step 4 | 16 |
| Epochs | 10 to 200, step 10 | 60 |
| Redraw the boundary | Every 1, 2, 5 or 10 epochs (every 10 under reduced motion) | Every 2 epochs |
| Noise | 0 to 1, step 0.1 | 0 |
Good to know
Experiments worth trying
Set the activation to Linear on the circle. Every layer is then a straight-line operation, so the whole network can only draw a straight boundary and accuracy stays near chance. Switch back to Tanh and it can bend.
Keep Linear but tick X1 squared and X2 squared, and untick X1 and X2. The circle becomes separable by a straight line in those features, because the distance from the centre is built from them. For XOR, the single feature X1 times X2 does the same job.
Raise Noise, give the network many layers and neurons, and run 200 epochs. If the training loss keeps falling while the test loss rises, the network is memorising the points. Try L2 regularization or fewer neurons to narrow the gap.
What to expect and what is missing
Training starts from random weights, so two runs with the same settings can end differently, while the dataset itself is the same every time. The spiral may not reach high accuracy within 200 epochs. That is part of what the playground shows about capacity and training time.
The diagram shows weights and biases but not each neuron output as an image like the original does. The page does not offer regression datasets or custom data, and trains for a fixed number of epochs rather than until you stop it, although you can press Stop at any time.
Privacy: how it works
- There is nothing to upload: the datasets are generated in the page, and the network is trained by TensorFlow.js running on your device. TensorFlow.js ships with this site and is loaded from it when you first press Train. Your settings are not sent anywhere or stored.
Tips
- Change one setting per run. If you change three, you will not know which one mattered.
- A learning rate of 1 can make the loss jump around, and 0.003 can be too slow for 60 epochs. The default of 0.03 is a reasonable start.
- Compare the two loss lines. Training loss well below test loss is the sign of overfitting.
- Tanh and Sigmoid give smooth boundaries, while ReLU gives boundaries made of straight pieces.
- For the spiral, add the sin features, use more layers and neurons, and raise the epochs.
Frequently asked questions
Is it really free?
Yes. There is no price, no trial and no credit card. Ulkaa Tool does the work with your own device, so there is no server bill to pass on to you.
Do I need an account?
No. There is no sign-up and no login. Open the page and use it. An Ulkaa account is not needed for anything on this tool.
Does it run in my browser?
Yes. Your settings are processed by code running in your browser tab, on your own device.
Is my data uploaded?
No. Your settings are never sent to Ulkaa or to anyone else. You can check this yourself by watching the Network tab in your browser developer tools while you use the tool.
What is TensorFlow Playground?
It is an interactive page for learning how neural networks work. You choose a small dataset and a network design, train it, and watch the loss and the decision boundary change. This page is an independent version built with TensorFlow.js.
Is this the official TensorFlow Playground?
No. It is a separate tool made by Ulkaa. It uses the TensorFlow.js library, but it is not the playground.tensorflow.org site and it has fewer visualisations.
Is it sin(X1) or sin(πX1)?
The feature is sin(π × X1), as its label says. Because X runs from -1 to 1, that is exactly one full sine period across the plot.
Why does the boundary update only every few epochs?
Reading the predictions for the whole plot costs time, so it is done every 1, 2, 5 or 10 epochs, as you choose, and the page stays responsive between redraws. If your system asks for reduced motion it redraws once per 10 epochs.
Does the training run on a server?
No. TensorFlow.js runs in your browser on your device. Training speed depends on your device.
What does the activation function do?
It adds the bend that lets a network draw curved boundaries. With Linear activation the network can only draw a straight line, however many layers you add. Tanh, Sigmoid and ReLU give curves in different shapes.
What is the learning rate?
It sets how large each weight update is. Too small and the loss falls slowly. Too large and it bounces or diverges. It is the first setting to change if training looks stuck.
Why does my network not learn the spiral?
The spiral needs a lot of capacity and training. Try the sin(X1) and sin(X2) features, three or four layers, more neurons, a lower learning rate and 200 epochs. It may still not reach high accuracy, because training starts from random weights.
What are training accuracy and test accuracy?
Every fifth point is held out as the test set. Training accuracy is measured on the other four fifths, which the network learns from, and test accuracy on the held-out points. A large gap suggests overfitting.
Popular TensorFlow Neural Network Playground pages
- Neural Network Playground OnlineSee what layers, neurons and activations do to a small network.
- TensorFlow Playground OnlineA TensorFlow.js playground that trains in your browser.
- Spiral Neural Network PlaygroundTrain a deeper network on the spiral and watch the boundary wind in.
- Two Gaussians Classifier PlaygroundThe easy case: one neuron, a straight boundary, two blobs.