MNIST Playground

Real-Time Digit Recognition

A neural network trained from scratch in Java to classify digits 0-9. Draw on the canvass, follow the preprocessing pipeline, and see how the model responds instantly in your browser.

Usage at a glance

Sketch a digit directly in the 400×400 canvas (mouse or touch), then press “Run inference” to route it through the same preprocessing steps used during training. Watch the prediction, confidence and top-5 classes update instantly; hit “Clear” whenever you want to iterate and test new strokes.

Interactive Canvas

Draw with mouse or touch. The canvas is centered and scaled to 28×28 before inference.

Draw here

Prediction

Confidence derived from the Softmax output.

28×28 Preview

Exact representation used during training (centered + normalized).

Pipeline overview

  1. Sketch a digit on the 400×400 canvas (mouse or touch).
  2. The UI trims the bounding box, scales to 28×28, inverts and standardizes the pixels.
  3. Weights from training session of this model are loaded into the JS mirror of the network.
  4. The dashboard displays prediction, confidence, top-5 classes, and the exact 28×28 preview.

Network & training

  • Dense layers: 784 → 256 → 128 → 10 with ReLU + Softmax.
  • Mini-batch SGD (batch 64), learning rate 0.1.
  • Cross-Entropy loss; early stop threshold 0.0001 or rising loss over 10 epochs.
  • Training converged at epoch 59 with final loss 0.00098.
  • Standardization: (pixel / 255 − 0.1307) / 0.3081.
  • Weights are exported to a csv file (the one that defines the model).

What to watch

  • The 28×28 preview mirrors exactly what the model ingests.
  • Confidence bar = Softmax probability of the predicted digit.
  • Top-5 list reveals how similar digits are ranked (e.g., 3 vs 8).
  • Loss/accuracy metrics were recorded during training and summarized above.