MNIST Playground

Draw digits and see neural network recognition in real-time

Draw a Digit (0-9)

Draw a digit here
Use mouse or touch

Drawing Tips

  • Draw digits centered in the canvas
  • Use thick strokes for better recognition
  • Fill most of the canvas space
  • Clear handwriting works best
  • Use erase to fix mistakes locally
  • Predictions update automatically

Neural Network Prediction

?
Draw a digit to see prediction
Waiting for input

Confidence for Each Digit

Model Performance

Architecture: MNISTNet CNN

Parameters: 455,754 trainable

Input: 28×28 grayscale

Test Accuracy: 99.66% on validation set

Training Time: 340 seconds (15 epochs)

Dataset: MNIST digits (60K train, 10K test)

Network Architecture Flow

CNN Architecture Diagram

Model Summary

MNISTNet Model Summary

Training Details

Training Configuration

  • Dataset: 60,000 training images
  • Validation: 10,000 test images
  • Batch Size: 128 samples
  • Epochs: 15 (early convergence)
  • Optimizer: Adam (β₁=0.9, β₂=0.999)
  • Weight Decay: 1e-4 (L2 regularization)
  • Total Training Time: 5 min 40 s

Data Augmentation

  • Random Rotation: ±10 degrees
  • Random Translation: ±10% in x,y directions
  • Normalization: μ=0.1307, σ=0.3081
  • Training Only: No augmentation during inference
  • Purpose: Improve generalization to variations
  • Effect: Reduces overfitting significantly

Final Performance

  • Best Validation Accuracy: 99.66%
  • Final Training Accuracy: 99.37%
  • Model Size: 1.74 MB parameters
  • Inference Speed: ~3-5ms on CPU
  • Framework: PyTorch 2.0+
  • Convergence: Epoch 11 (best validation)

Training Achievements

99.66%
Best Validation Accuracy
340s
Total Training Time
455K
Trainable Parameters

Input Processing Pipeline

280×280
RGB Canvas
User Drawing
→
280×280
Grayscale
Color Convert
→
28×28
Resized
Downsample
→
Normalized
Tensor
Ready for CNN

Want to see how this model was trained?

View Training Notebook