How to use: Draw a digit (0-9) on the black canvas above using your mouse or finger. Make it large and centered for best results.
Predicted Digit
Draw a digit to begin
Confidence Distribution
README.md
Interactive handwritten digit recognition using a neural network trained on the MNIST dataset. Draw a digit on the canvas and the model predicts it in real-time with per-class confidence scores.
How It Works
All inference runs client-side via TensorFlow.js -- no server calls required. A pre-trained Keras model is converted to TensorFlow.js format and loaded directly in the browser.
When you click Predict, the canvas drawing is scaled down to 28×28 grayscale pixels, normalized to [0, 1], and fed through the network. The output is a probability distribution over digits 0–9, displayed as confidence bars.
Model Architecture
| Layer | Output Shape | Details |
|---|---|---|
| Input | 28 × 28 | Grayscale pixel values |
| Flatten | 784 | Reshape to 1D vector |
| Dense | 128 | ReLU activation |
| Dense | 64 | ReLU activation |
| Dense | 10 | Softmax activation (one per digit) |
Tech Stack
- TensorFlow.js -- client-side neural network inference
- Canvas API -- drawing input and image preprocessing
- Flask -- serves the page (no backend inference)