Draw Like a Machine

A browser digit classifier with a twist: the model was trained on computerized, digital-display digits — not handwriting. So instead of asking "can the machine read your handwriting?", it asks the opposite:

How close can you draw to a digit the way a screen renders it?

Draw 0–9 on the canvas and the network reads you back in real time. A high match means your stroke landed in the shape the machine was taught to expect. Loose, cursive handwriting scores low — that's the game, not a bug.

Tip for a high score: straight strokes, square corners, even thickness. Think seven-segment display.

Running it

Serve the folder over HTTP (the model files are fetched with fetch, so opening index.html from the filesystem won't work):

python3 -m http.server 8000
# then open http://localhost:8000

How it works

• p5.js provides the 400×400 drawing canvas, downsampled to 28×28 before each classification.
• ml5.js (neuralNetwork, imageClassification) runs the trained model from model/, classifying continuously as you draw.
• create_data.js captures 28×28 training samples from a drawing canvas; trainModel.js loads 140 images per digit from data/ (gitignored — grab it from the Kaggle link below) and trains for 200 epochs, then saves to model/. Both are commented out in index.html; swap the active <script> tag to run one.

Press C or hit Clear to reset the canvas.

Dataset

Trained on computerized digit images: https://www.kaggle.com/shreyasshrawage/digits