Digit Recognition Network
A real neural network that recognizes handwritten digits. Draw digits to classify them, train the network from scratch and watch it learn, or step through how errors flow backward and adjust weights.
Digit Recognition Network
A neural network that recognizes handwritten digits. 784 → 16 → 16 → 10 neurons.
Pre-trained model
Trained on 60,000 examples before you arrived
Hover over a neuron in the diagram to see what it responds to. Click to pin.
Pedagogical Goals
- •Show students a complete, working neural network they can interact with
- •Demystify training by letting students watch weights change as the network learns
- •Make backpropagation tangible — students can see how errors flow backward and adjust connections
- •Connect the single-neuron concept to a full network with layers
- •Give students the experience of drawing a digit and watching a network classify it in real time
How It Works
The network has 784 input neurons (28×28 pixel grid), two hidden layers of 16 neurons each, and 10 output neurons (one per digit). Students can draw digits on a canvas, and the network classifies them in real time. The training tab lets students train from scratch on MNIST data, watching accuracy improve and connection weights change visually. The learning tab steps through individual training examples showing forward pass, error computation, and backpropagation.
How It Was Built
Implemented from scratch in TypeScript with no ML libraries. The neural network (forward pass, backpropagation, weight updates) runs entirely in the browser. MNIST training data is loaded as a compressed binary file. The network visualization uses HTML Canvas to draw neurons as circles and connections as colored lines (green for positive weights, red for negative, thickness for magnitude). Training runs in small batches using requestAnimationFrame to keep the UI responsive.