Machine Learning Demo

Digit Classifier

Draw a digit (0–9) below. The model runs client-side inference on synaptic weights and connects to a Cloudflare D1 edge database for crowdsourced corrections.

Draw Digit

Prediction Output

0
0.0%
1
0.0%
2
0.0%
3
0.0%
4
0.0%
5
0.0%
6
0.0%
7
0.0%
8
0.0%
9
0.0%

Synaptic Activations

Help Train the Network

If the predicted digit was incorrect, click the actual digit you drew to submit it as a correction and help build our edge dataset.

How the Neural Network Works

From pixel extraction and on-device inference to crowdsourced active learning and model quantization.

1. Inference Pipeline

MNIST Bounding & Centering

When you draw on the 280×280 canvas, the raw strokes cannot simply be squashed into a square. To match the official MNIST standard established by Yann LeCun:

  • Bounding Box Cropping: The drawn stroke is scanned to determine its tight rectangular perimeter.
  • Aspect-Ratio Preservation: The stroke is proportionally scaled down into a 20×20 box without distorting the handwriting.
  • Center of Mass (COM): We calculate the center of mass intensity moments and translate it to coordinate (14, 14) inside the 28×28 matrix (784 grayscale inputs).

A 2-layer Multi-Layer Perceptron (MLP) runs client-side feedforward inference: 784 inputs → 16 hidden neurons (ReLU) → 10 output classes (Softmax).

2. Active Learning

Human-in-the-Loop Reweighting

When the network encounters unusual or ambiguous handwriting, your correction powers a continuous retraining cycle:

  • The Data Flywheel: The 784 normalized pixel floats and verified ground-truth label are streamed to a serverless Cloudflare D1 SQL database.
  • Backpropagation: In retraining cycles, prediction error is measured using Cross-Entropy Loss. Through the calculus chain rule, the error is propagated backward through the layers to compute the gradient with respect to each synaptic weight (∂ℒ / ∂w).
  • Gradient Descent Reweighting: The optimizer nudges each weight in the opposite direction of the gradient (Δw = -η∇ℒ), penalizing firing pathways for incorrect digits and strengthening pathways for the true digit.
3. Zero-Dependency Engine

Model Quantization

Standard machine learning libraries export weights as 64-bit floating-point numbers with dozens of unneeded decimal digits (over 800 KB for tiny networks).

  • Post-Training Quantization: All synaptic weights and biases are quantized to 4 decimal places, trimming negligible near-zero perimeter noise.
  • 89.5% Size Reduction: Shrinks the weight payload from 822 KB down to ~86 KB, enabling instantaneous page loads on cellular connections.
  • Zero Accuracy Impact: Because input pixels are discrete 8-bit values and sub-decimal quantization noise cancels out across 784 summations, the model retains virtually 100% of baseline classification accuracy.