Machine Learning

Handwritten Digit Recognition

Overview

A convolutional neural network trained on the MNIST dataset to classify handwritten digits 0–9. The original project was built in Python with TensorFlow and OpenCV; this page runs the same model in the browser via TensorFlow.js.
  • Accuracy — 98.9% on the MNIST test set
  • Architecture — 2 conv layers, max pooling, dense classifier
  • Preprocessing — Bounding-box crop and centering to match MNIST format

Live Demo

Draw a digit with your mouse or finger. The model uses the same MNIST preprocessing pipeline as the Python version: crop, resize, and center the drawing in a 28×28 grid.

Draw here

Loading model…

–
Draw a digit, then predict
28×28 input
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%

How It Works

Training

Trained on 60,000 MNIST images with pixel values normalized to 0–1. The model learns spatial features through convolution and pooling layers before a dense classification head.

Drawing

The Python version uses OpenCV for a desktop drawing window. For the portfolio demo, the same preprocessing logic runs in JavaScript on an HTML canvas.

Deployment

The Keras model is exported to TensorFlow.js so visitors can draw digits and get predictions directly on GitHub Pages without a backend.

Tech Stack

Python

TensorFlow/Keras for training and evaluation, OpenCV for drawing and image preprocessing

Web Demo

TensorFlow.js, HTML Canvas, and vanilla JavaScript for in-browser inference

Model

Conv2D → MaxPool → Conv2D → MaxPool → Flatten → Dense(64) → Dense(10)