MNIST Digit Recognizer Demo

Draw a digit on the canvas and get a live prediction from a CNN trained with PyTorch.

Structure

• backend/ — FastAPI app. Serves /api/predict and the static frontend/.
  • backend/model/mnist_cnn.pt — pretrained weights (included, 99.27% test accuracy)
• frontend/ — Canvas drawing UI (plain HTML/CSS/JS, no build step)

Quickstart

python3 -m venv .venv
.venv/bin/pip install -r backend/requirements.txt
.venv/bin/uvicorn app.main:app --app-dir backend --reload

Open http://127.0.0.1:8000, draw a digit on the canvas, and click "Predict". The pretrained model is included, so these three commands are all you need.

On Linux, a plain pip install may pull the CUDA build of torch (several GB). If CPU-only is enough, use this instead:

.venv/bin/pip install -r backend/requirements.txt --index-url https://download.pytorch.org/whl/cpu

Retraining the model

cd backend/app
../../.venv/bin/python train.py

This downloads the MNIST dataset, trains the model, and overwrites backend/model/mnist_cnn.pt.

Training and inference automatically pick the best available device — CUDA, then Apple Silicon (MPS), falling back to CPU. No configuration or specific hardware is required.