Handwritten Digit Recognition
A real-time deep learning web application combining an HTML5 drawing canvas, center-of-mass centroid normalization, and a PyTorch Convolutional Neural Network achieving 99.2% test accuracy.
- Role
- Deep Learning & Frontend Engineer
- When
- 2026 · Production Deployment
- Built with
- PyTorchPythonFlaskHTML5 Canvas APINumPySciPy (ndimage)Tailwind CSSRender Cloud
- Links
Handwritten Digit Recognition
A real-time deep learning web application combining an HTML5 drawing canvas, center-of-mass centroid normalization, and a PyTorch Convolutional Neural Network achieving 99.2% test accuracy.
Why it exists
While MNIST classification is a foundational machine learning benchmark, deploying an interactive live drawing interface reveals a major disconnect: hand-drawn browser strokes rarely match the tightly centered, normalized bounding boxes of academic datasets.
Naive implementations simply take a 400x400 canvas and resize it to 28x28, which shifts digit mass off-center, introduces interpolation blur, and drops real-world classification accuracy below 60%.
This project bridges the gap between deep learning models and browser interaction by implementing the complete MNIST preparation pipeline directly into the client preprocessing pipeline.
What it does
An intuitive web canvas where users draw digits with their mouse or finger, receiving instant CNN predictions with full softmax confidence bars.
- Responsive Drawing Canvas: Fluid HTML5 canvas supporting variable brush widths, touch events for mobile devices, and instant one-click reset controls.
- Centroid & Bounding Box Normalization: Extracts the bounding box of drawn strokes, computes the geometric center-of-mass using SciPy image moments, and centers the digit within a standard 20x20 box inside the 28x28 frame.
- Convolutional Neural Network Architecture: Trained with dual convolutional layers, max pooling, spatial dropout (p=0.25), and batch normalization to prevent overfitting on clean strokes.
- Top-3 Softmax Confidence Breakdown: Displays the model's confidence distribution across top predictions in real time, showing not just the winning digit but also secondary probabilities for ambiguous glyphs (e.g. distinguishing 4 from 9).
What it won’t do
The system enforces strict input validation to prevent arbitrary inference on meaningless canvas artifacts.
- No Blind Downsampling: Resizing a raw canvas without centroid translation produces severe spatial distortion. The pipeline refuses to evaluate an image until its center of mass is computed and aligned.
- Rejection of Blank or Single-Pixel Noise: If the canvas contains fewer than 15 active pixels or only stray clicks, the backend rejects the payload and prompts the user to draw a recognizable digit.
- Zero Drawing Retention: Canvas bitmaps are transformed ephemerally in RAM and discarded immediately after classification.
How it works
The project pairs custom browser-side image processing with a lightweight PyTorch inference backend.
Network Architecture: Conv2D(1, 32, kernel=3) -> BatchNorm -> ReLU -> Conv2D(32, 64, kernel=3) -> MaxPool2D(2) -> Dropout(0.25) -> Flatten -> Linear(9216, 128) -> Dropout(0.5) -> Linear(128, 10) -> Softmax.
Centroid Alignment Math: Using image moments M00, M10, and M01, the centroid (cx, cy) is calculated as cx = M10/M00 and cy = M01/M00. The image is shifted by (14 - cx, 14 - cy) using bicubic spline interpolation.
By the numbers
What’s next
- ONNX Web Runtime: Exporting the model to ONNX so inference runs 100% in the visitor's browser using WebAssembly/WebGL without needing any backend server calls.
- Multi-Digit Recognition: Adding contour segmentation to recognize multiple digits drawn in sequence across a wider canvas.
Biomedical signal processing and frequency band power spectral analysis