Training a neural network in the browser

You are now going to train a neural network directly in your browser, with no installation required. Open TensorFlow Playground.

What you see on the screen:

Part	What it is
Left: four patterns	The dataset — choose the type of data
Centre: circles in columns	The neurons, layer by layer
Lines between them	The weights; thickness = strength, colour = sign
Right: large square	The network’s classification of the surface
Top right	The error curve during training
▶ button	Start and stop training

Do this first: Select the simplest pattern (two separate groups), press ▶ and look at the large square. The colours separate and a boundary forms. The error curve in the top right drops.

This is the foundation of machine learning, visualised in real time.

Six experiments, in order. Note the error (test loss) after 200 epochs each time.

#	Setting	Note
1	Simple pattern, 1 layer, 4 neurons, lr = 0.03	Your reference value
2	Switch to the circle pattern	Can it handle it?
3	Switch to spiral	What happens?
4	Spiral + 2 layers of 8 neurons	Better?
5	Spiral + set learning rate = 3	What does the error curve do?
6	Spiral + noise 50 and little data	Compare training vs test

What you should notice:

Experiments 3–4: The spiral pattern requires depth. With one layer, the error gets stuck around 0.4 no matter how long you wait. With two layers and more neurons, the error drops. This is the same principle as in “Layer by layer”, but now you see it in practice.

Experiment 5: The error curve jumps instead of decreasing smoothly. With too high a learning rate, the algorithm takes steps that are too large and misses the minimum.

Experiment 6: The training error drops while the test error rises. This is overfitting — the model learns random variations in the training data instead of the underlying pattern. This is a central problem in machine learning, and here you see it happen quickly.

Look at the weights too. Hover your mouse over a line: thick line = strong connection. During training, some lines become thicker and others thinner. The network adjusts which relationships are relevant on its own.

Write down one sentence about what each experiment showed. These six sentences summarise the key mechanisms in neural networks.

What you saw, with the technical terms:

What you did	Term
Pressed ▶ and saw the error drop	Training with gradient descent
Saw the boundary form in the square	Decision boundary
Error curve	Loss function over time
Added layers for the spiral	Increased model capacity
Error jumped at high learning rate	Divergence
Test error increased	Overfitting
Thickness of lines	Magnitude of weights

Three things to take away:

1. More capacity helps — until it hurts. More layers solved the spiral pattern, but on the simple pattern they just make training slower and more unstable.
2. The learning rate is the most sensitive parameter. Too low: nothing happens. Too high: the process diverges. The difference can be a factor of ten.
3. Training error and test error are different measures. The training error dropping does not mean the model generalises better. That is why we always measure on data the model has not seen.

Next step is to do the same thing in Python with PyTorch. All components are there: dataset, layers, learning rate, error curve. The difference is that you write the code yourself, which allows you to apply it to your own datasets.