Neural Networks Reading Digits · NeuroLab

Neural networks reading handwritten digits: write a digit on the pad and watch the signal light up a 3D neural network layer by layer until it gives an answer; paint the weights of a single neuron yourself, train a network live in the browser from random weights, watch convolution kernels sweep the picture, and see how AI gets things wrong when digits are rotated, shifted or noisy.

Subject: Information Technology · Level: Middle school, High school · Topics: Digitising images, Neurons and weights, Training and gradient descent, Convolutional Network

Chapters

Pictures Are Numbers

Write a digit on the pad on the right. It is shrunk to 28 × 28 little squares; each square is a pixel, a number between 0 (black) and 1 (white) saying how bright it is. The taller and brighter the block, the bigger that pixel's number.

So to the computer the picture is just 784 numbers. Everything called “recognition” from here on is adding, subtracting, multiplying and dividing these 784 numbers.

Before that comes a preprocessing step: box the strokes, scale them to fit inside 20 × 20, then place them so their “centre of mass” sits in the middle. The MNIST dataset used for training (70,000 real handwritten digits) was prepared the same way, so it doesn't matter how big or where you write.

One Neuron

A neuron does just one thing: it multiplies each of the 784 pixels by a weight, adds them all up, adds a bias b to get z, and passes z through an activation function to get its output a.

The blocks on the floor: height is the pixel, colour is the weight — blue is a positive weight (a stroke here earns points), orange is a negative weight (a stroke here loses points). The brighter a line into the big sphere, the more that pixel contributes.

Pick a brush on the right and drag across the blocks on the floor to “paint weights”. Try designing a neuron that only recognises “1”: paint a vertical stripe down the middle blue and the two sides orange, then test it with “Try a 1” and “Try a 0”.

Multilayer Network

Arrange many neurons in layers: in the first layer 32 neurons each look at the whole picture, the second layer's 16 look at the first layer's results, and the final 10 output neurons stand for 0 to 9. Softmax turns the outputs into probabilities; the highest one is the answer.

Write a digit and watch the signal flow from left to right, layer by layer. Only the strongest connections are drawn: blue lines “vote for”, orange lines “vote against”.

Click any block in the first layer and a picture of its 784 weights floats above it — that is the stroke shape it is looking for. Nobody designed these weights; the network learned them by itself from 60,000 handwritten digits.

Training Live

This time every weight in the network is a random number; it knows nothing. Press “Start training” and it looks at 3,000 labelled handwritten digits one by one: it guesses, measures how wrong the guess was with the loss, then nudges every weight a small step in the direction that makes the loss smaller — that is gradient descent.

Watch the 32 weight pictures above the first layer: they start as snow-like noise and slowly grow stroke shapes as training goes on. In the curves on the right, the loss falls and the accuracy rises.

How far each step goes is set by the learning rate: too small and it learns slowly; too large and it jumps back and forth across the valley, or even gets worse. Once it is trained, pause and test it with the pad.

Convolutional Network

Every neuron in the multilayer network stares at the whole picture, so moving the digit a little confuses it. A convolutional network thinks differently: a small 5 × 5 window (a kernel) slides across the picture square by square, asking everywhere “is the stroke I'm looking for here?”, and the answers form a feature map.

The first layer has 6 kernels that look for simple strokes — horizontal, vertical, diagonal. Pooling keeps the largest value in every 2 × 2, so the map shrinks but the feature is kept. The second layer's 12 kernels combine simple strokes into corners and curves, and only then is the digit decided.

Watch the “Scan animation”, then click any feature map to see its kernel. This network has far fewer parameters than the multilayer one, yet it is more accurate.

AI Makes Mistakes Too

Rotate the digit, move it to a corner, add noise, and watch the confidence on the right crumble. It never saw pictures like these during training, so it is easily fooled; the multilayer network is especially sensitive to position, the convolutional one is steadier, but it can be wrong too.

Press “Show its mistakes” to browse test digits it really got wrong — some would make a person hesitate too. Then draw a smiley face or a letter on the pad: it only knows 0 to 9 and has no “I don't know” option, so it will still confidently name a digit.

So an AI's judgement depends on how complete its training data is, and important decisions still need a human to check.

More labs

Back to home