The data
The source is MNIST, the classic benchmark of handwritten digits: 28 by 28 grayscale images, 60,000 for training and 10,000 held back for testing. Below are real examples, the kind of varied handwriting the network has to learn.
The network
A convolutional neural network is built for images: it learns small local patterns (edges, curves, loops) and reuses them everywhere. Two convolution-and-pooling blocks pull out features, then two dense layers make the decision. Kept deliberately small, under 27,000 weights, which is exactly what lets it run in a browser.
Training
The network trained for 8 passes over the data, holding out 10% to watch for overfitting. Training and validation curves rising together, and loss falling smoothly, mean the model is learning real structure rather than memorizing.
Accuracy per epoch
Loss per epoch
Evaluation
The honest test is the 10,000 images the model never saw. The confusion matrix shows where the few mistakes cluster: the diagonal dominates, and the faint off-diagonal cells are the classic confusions, a 4 that looks like a 9, a 7 like a 1.
The most useful images are the ones it gets wrong. Most are genuinely ambiguous scrawls a person might also misread, a good sign the model fails for sensible reasons. Each caption reads true then predicted.
Live: draw a digit
Here is the payoff. Draw a single digit (0 to 9) in the box. The model classifies it as you go, and the bars show how confident it is across all ten digits. Big, centered strokes work best, the sketch is squared, scaled, and centered to look like MNIST before the network sees it.
Built, trained, and deployed by Carlos Abel Vivanco / AbleV Labs · Read the full notebook → · Back to the case study →