Draw a digit directly in your browser.
Test the model with an existing image.
This application utilizes a custom Convolutional Neural Network built with TensorFlow. The architecture is specifically optimized for edge-inference and low latency.
The input matrix passes through multiple Conv2D and MaxPooling2D layers
to extract spatial hierarchies—edges, curves, and loops—before being flattened and classified
into one of the 10 digit classes.
Visual representation of tensor transformations
The original dataset consists of white digits centered on a black background, strictly bounded to a 28x28 pixel grid. Because users draw black ink on a white HTML canvas of variable size, the client-side code must aggressively preprocess the input to prevent model hallucination.
Converts the RGB canvas data to a single-channel grayscale array, and inverts the colors to match the dataset (white stroke, black background).
Crops empty whitespace around the user's drawing so the digit occupies the maximum relative area.
Resizes the cropped image strictly to a 28x28 matrix and normalizes pixel intensities to float values between 0.0 and 1.0.
While the model achieves exceptional accuracy, analyzing the confusion matrix reveals distinct edge cases. The highest rate of false positives occurs between visually similar digits.
For instance, heavily slanted 1s are occasionally misclassified as 7s, and loosely drawn 3s can be confused with 5s. Dropout regularization was implemented to reduce overfitting on the distinct handwriting styles present in the dataset.
Confusion matrix heatmap on test validation