MNIST Digit Classifier

An MNIST digit classifier is a neural network trained on the MNIST dataset of handwritten digits: given a 28×28 grayscale image, it returns a probability for each digit 0–9 and predicts the most likely one. The one on this page is a real trained 784 → 25 → 25 → 10 network, classifying whatever you draw, live in your browser.

Reading handwritten zip codes on envelopes is one application of digit recognition. That's the spirit to bring here: you are the person with the questionable handwriting, the network is the sorting machine, and the only thing between your scrawl and a routing decision is one pass of arithmetic. Draw a digit on the grid and watch the machine make its call — often right, sometimes wrong, always exact about how confident it is.

How the MNIST Digit Classifier Works

The classification itself is one forward pass. Your drawing becomes 784 numbers (one per pixel). The first hidden layer computes 25 weighted sums z = x·W + b, clamps the negatives with ReLU, and the second hidden layer does the same again. A final layer produces ten raw scores, and softmax converts them into probabilities that sum to 1. The whole trip is 20,475 connection multiply-adds (784·25 + 25·25 + 25·10), excluding biases, activations, and softmax overhead — cheap enough to rerun on every stroke of your pointer, which is why the network reacts while you're still drawing.

The subtle part is what happens before the forward pass. MNIST images aren't arbitrary 28×28 pictures: each digit was scaled to fit a 20×20 box and then centered in the frame by its center of mass. The network has only ever seen digits framed that way, so your drawing is pushed through the same pipeline — find the ink's bounding box, scale it into the 20-pixel box, recenter by mass — before the network reads it. The big grid shows your strokes exactly as you drew them; the small "what the network sees" grid below it shows the normalized copy the forward pass actually consumes. When your mark sits in a corner of the big grid but appears pulled to the middle of the small one, you are watching the sorting machine straighten the envelope before reading it.

MNIST Digit Classifier Step by Step

The canvas starts blank — the lesson begins when you act. Here is the full path one stroke takes:

1. You draw. Your pointer paints soft-edged strokes into a high-resolution ink buffer (10× finer than the 28-pixel grid), so curves stay smooth instead of blocky.
2. Two downsamples happen. The display grid gets a straight box-averaged 28×28 copy, exactly as drawn. The network gets the MNIST-normalized copy: ink bounding box → scaled into a 20×20 box → recentered by center of mass → 784 input values.
3. The forward pass runs. Each of the 25 first-layer neurons computes its weighted sum over all 784 pixels; ReLU zeroes the negative sums; the second layer of 25 repeats the step on those activations.
4. Softmax votes. Ten raw output scores become ten probabilities. The largest is the prediction, shown in the header with its percentage; the runner-up's share is always labeled too, so the leftover mass is never a mystery.
5. You judge the machine. Redraw, distort, or press one of the ten sample buttons in the panel to load a real MNIST test image this network classifies correctly — a calibration point for comparing against your own handwriting.

The visual signal tracks the signal itself: hidden neurons fill dark when their weighted sum is positive and blue when negative, the connecting wires brighten in proportion to the activation they carry (idle wires recede), the ten output circles fill by probability, and the winner takes a green ring. A clean bold 3 lights a confident column of wires; an ambiguous 7-that-might-be-a-1 splits the output between two circles, and that split is the network's uncertainty made visible.

What the Network Actually Learns

Not templates. There is no stored picture of a "7" anywhere in these weights — only 20,000-odd numbers that, multiplied against your pixels in the right order, push the correct output score up more often than not. Individual hidden neurons rarely mean anything you could name; ask what neuron 14 detects and the honest answer is "a weighted smear of pixel patterns that helped during training." The output classes have explicit meanings; hidden features can be investigated but rarely admit simple names.

One reading rule matters more than the rest: softmax reports confidence, not correctness, and not calibration. The ten probabilities always sum to 1, which means the network has no way to say "this isn't a digit" — feed it a scribble or a letter and it will still produce a sharp-looking distribution, because producing distributions is all it can do. On inputs that resemble MNIST, high confidence correlates with being right. Far from MNIST, a 95% means nothing of the sort. The companion Forward Propagation lesson ships real test images this very network gets wrong at over 90% confidence — its Misclassified variant is the proof.

Edge Cases

• Off-center or tiny drawings. Without the recentering step these can be misread for a boring reason: their framing doesn't match the training data. Normalization reduces this framing mismatch without guaranteeing a correct read; sampling, stroke width, and handwriting style can still differ from training data.
• A blank canvas. No ink means nothing to classify; whatever the outputs show is the network's fixed response to an all-zero input, not a prediction.
• Very faint strokes. Preprocessing keys off the ink's bounding box — a mark too faint to register leaves the network reading near-nothing.
• Confident mistakes. The network can be very sure and wrong at once, especially on digits drawn in styles MNIST's writers never used. Compare the two grids first: if "what the network sees" looks ambiguous to you, the miss is reasonable.

Common Mistakes

• Expecting production accuracy. This is a deliberately small two-hidden-layer MLP with no convolutions — no built-in sense of shape or translation beyond what its weights absorbed. Production digit readers may use CNNs or other architectures and different training data; greater size is not a requirement in every deployment.
• Blaming the drawing tool for every miss. Some inputs are genuinely ambiguous — a human glancing at your leaning 1 might hesitate too. Split probabilities are often the correct answer.
• Reading hidden neurons literally. A single unit lighting up is not "the loop detector." Meaning lives in the population, and legibly only at the output.
• Treating the percentage as a guarantee. 95% is how decisively the scores separated, not a promise that 95 of 100 such inputs would be classified correctly.