Digit Recognizer

A simple handwritten digit recognizer consisting of:

• Flask backend serving a Keras/TensorFlow MNIST model and a /predict endpoint.
• Next.js frontend with a drawing canvas that posts the image to the backend.

Structure

• backend/: Flask app, model I/O, training script, simple HTML demo
• frontend/: Next.js UI (Tailwind-based) calling the Flask API

Prerequisites

• Python 3.9+ (tested with 3.10)
• Node.js 18+ and npm

Backend: setup and run

cd backend
python3 -m venv ../venv
source ../venv/bin/activate
pip install -r requirements.txt
python app.py  # http://127.0.0.1:5000

Notes:

• CORS is enabled in backend/app.py to allow the frontend at localhost:3000.
• Model file expected at backend/model/digit_model.h5 (present in repo or retrain below).

Health check:

curl http://127.0.0.1:5000/health

Frontend: setup and run

cd frontend
npm install
# Optional: set the backend API base (defaults to http://127.0.0.1:5000)
export NEXT_PUBLIC_API_BASE_URL=http://127.0.0.1:5000
npm run dev  # http://localhost:3000

The frontend posts to ${NEXT_PUBLIC_API_BASE_URL}/predict.

Training or updating the model

cd backend
source ../venv/bin/activate
python train_model.py

This writes backend/model/digit_model.h5. The backend/model/ directory is ignored by Git (see .gitignore); add the file explicitly if you wish to commit it.

Troubleshooting

• Prediction errors: Ensure the model file exists and the backend console shows the POST request. Retrain if missing.
• CORS/blocking: Backend already enables CORS. If you change ports/origins, keep CORS(app).
• Canvas polarity: MNIST is typically white digit on black background. The frontend canvas is white with black strokes and the backend preprocessing inverts it (good). The simple Flask demo page uses a black canvas with white strokes; that may not require inversion. If predictions look wrong in that page, either make the canvas white or adjust preprocessing to skip auto-inversion.

Housekeeping

• A root .gitignore ignores virtualenvs, Node/Next artifacts, caches, and backend/model/.
• If artifacts are already tracked, untrack them once:

  git rm -r --cached frontend/.next venv backend/model
  git commit -m "chore: stop tracking build artifacts"

License

Internal/demo project. Add a license if distributing.