Digit Recognizer

Draw a digit and a small neural network reads it. Open it up, see every neuron and weight, and change them by hand.

Draw a digit here

What the network sees: 28 × 28 pixels

–Draw a digit

Real handwritten test digits – tap one to load it

Test digits read correctly: 20/20

Why this answer?

Draw a digit or tap an example, and this box explains which neurons decided the answer.

Inside the network

784 pixels → 32 neurons → 16 neurons → 10 digits. Tap any neuron to open it.

solid blue line = positive vote (+) dashed orange line = negative vote (−). Thicker = stronger. A darker neuron is more active; the number under it is its activation.

Answer: –Test digits: 20/20

Weights: what this neuron looks for

Your drawing × weights: where it matches

blue = positive weight (+): ink here pushes the neuron up. orange = negative weight (−): ink here pushes it down. White = 0.

Size 2 Strength 0.20

Point at the weight map to read a pixel. Pick a brush to paint weights by hand.

Bias

How to use it

Draw one digit from 0 to 9 in the big square. While you draw, the page turns your strokes into a 28 × 28 picture, feeds it to a small neural network and shows ten bars: how strongly the network believes in each digit. If no bar clearly wins, it says so. You can also tap one of the twenty real handwritten digits to load it.

Below, the whole network is laid out. Tap a neuron to open it, then change its weights by hand and see what breaks. The second tab teaches a fresh network your own symbols.

Controls

Mouse: drag to draw, click a neuron to select it, drag on a weight map with a brush to paint weights.
Touch: draw with a finger. The page does not scroll while you touch a drawing area or the weight map, so scroll beside them.
Keyboard: C clears, U (or Ctrl+Z) undoes a stroke, R loads a random example. The arrow keys move between neurons when the diagram is focused, and Space starts or pauses training in the teaching tab.
Editing: every weight to the next layer and every bias has a slider and a number field. Knock out silences a neuron, Scramble randomises a layer, Reset to trained weights undoes everything.

How it works

The picture becomes numbers. Your drawing is cropped to its bounding box, scaled to fit a 20 × 20 box without changing its proportions, and placed in a 28 × 28 grid with its centre of mass in the middle. Each of the 784 cells becomes a number from 0 (empty) to 1 (full ink). The training digits were prepared the same way, so centring matters: this network has no idea that a shape moved a few pixels sideways is still the same shape.

A neuron multiplies each input by its own weight, adds the results, adds a bias and replaces a negative total by zero (a step called ReLU):

a = max(0, w₁x₁ + w₂x₂ + … + w_nx_n + b)

Here x are the inputs, w the weights, b the bias and a the activation. The 32 neurons of the first layer each look at all 784 pixels, the 16 neurons of the second layer look at those 32 activations, and the 10 outputs look at the 16: in total 25,760 weights and 58 biases, all visible and editable.

Softmax turns the ten output scores z₀ … z₉ into probabilities that are positive and add up to 1:

p_k = e^z_k / (e^z₀ + e^z₁ + … + e^z₉)

Where the weights came from. The network started with random weights and was shown the 60,000 labelled digits of the public MNIST dataset many times. After each small batch, every weight was nudged slightly in the direction that made the answers less wrong; this is gradient descent. Along the way the images were randomly shifted, rotated, resized and thickened to prepare the network for screen drawing. The finished weights were rounded to 256 levels to keep the page small. On the 10,000 MNIST test digits the network gets 97.4% right.

Weight maps. A first-layer neuron has one weight per pixel, so its weights form a 28 × 28 picture: blue where ink pushes the neuron up, orange where it pushes it down. The second map multiplies your drawing by the weights. Do not expect tidy pen strokes: each neuron detects a blurry mixture of parts, and digits are recognised by combinations of neurons.

Honest limits. Modern recognisers use convolutional networks, which slide small filters over the image and cope much better with shifts and odd shapes. This tiny fully connected network is used because you can see all of it.

Things to try

Draw a 4 with an open top, then close the top and watch the bar for 9 grow.
Draw a 1 as a plain stick, then add a flag and a foot. When does it turn into a 7 or a 2?
Load an example, open the winning output and find the neuron with the biggest vote. Knock it out and watch the answer and the 20/20 meter.
Open an active neuron of hidden layer 1 and paint with the − brush over the blue matching cells. Its activation falls; can you flip the answer?
Scramble the output layer: the meter drops to about 2/20, the level of pure guessing. Reset, scramble layer 1 instead and compare.
Draw a star. The network still has to share 100% among ten digits; it cannot say “none of these”.
In the teaching tab, load the demo samples, train in slow motion and watch the loss fall. Then draw sloppy versions and see where it gives up.

Frequently asked questions

Why did it get my digit wrong?

The network learned from digits written with a pen on paper by other people. Shapes it rarely saw, such as a 7 with a crossbar, can fool it. On the MNIST test digits its most common mix-ups are 4 with 9, 2 with 7, 3 with 5 and 5 with 8. Try writing larger and more plainly.

Is my drawing sent anywhere?

No. The network runs entirely in your browser and the page makes no network requests. Drawings, edited weights and your symbols are stored only on this device.

Why is it so sure about a scribble?

Softmax always produces probabilities that add up to 1, so even nonsense gets a winner. A high percentage means “more like this digit than the other nine”, not “certainly a digit”.

I broke the network. How do I get it back?

Press Reset to trained weights. The original weights are part of the page and are restored exactly.

Why does my own-symbol network make mistakes?

Five samples are very little. Training on randomly shifted, rotated and thickened copies helps, but the network still mostly memorises what you drew. More samples, drawn in varied ways, help the most.