NumDrawPredict.io

A web app that lets you draw a digit and predicts it in real time using a model trained on the MNIST dataset.

---

How it works

1. Draw a digit (0–9) on the 28×28 canvas
2. Click Predict
3. The canvas is read as a pixel array and sent to the Flask API
4. The model returns the predicted digit and confidence score

---

Tech Stack

Layer	Tech
Frontend	HTML, Tailwind CSS, Vanilla JS
Backend	Node.js, Express
ML API	Python, Flask
Model	XGBoost pipeline with /255 normalization
Dataset	MNIST (60,000 handwritten digits)
Deployment	Vercel (frontend) · Render (ML API)

---

Project Structure

├── backend/              # Express server + frontend
│   ├── frontend/
│   │   ├── index.html
│   │   ├── css/
│   │   └── js/
│   └── server.js
├── m_backend/            # Flask ML API
│   ├── app.py
│   ├── pipeline.pkl
│   └── requirements.txt
└── training/             # Model training notebook

---

Model

• Algorithm: XGBoost Classifier
• Preprocessing: FunctionTransformer (X / 255.0)
• Training data: Full MNIST (60,000 samples)
• Test accuracy: ~99%
• Input: Flat array of 784 pixel values (0–255)
• Output: Predicted digit + confidence scores for all 10 classes

---

Running locally

Frontend + Express

cd backend
npm install
node server.js
# runs at http://localhost:3000

Flask ML API

cd m_backend
pip install -r requirements.txt
python app.py
# runs at http://localhost:5000

Update API_URL in frontend/js/script.js to point to your Flask server.

---

Deployment

• Frontend deployed on Vercel — connects to the Flask API via fetch
• ML API deployed on Render — free tier, loads pipeline.pkl on startup
• CORS configured in Flask to allow requests from the Vercel domain only

---

Built by Shreshank · trained on MNIST · inference in under 5ms