MNIST Digit Predictor

This repository tackles the MNIST digit classification problem using modern technologies. Using React and MaterialUI, it pairs contemporary web development with machine learning by running a Convolutional Neural Network (CNN) in browser (TensorflowJS).

Demo

CNN Model Topology

The CNN is composed of 6 layers: two convolution layers, two down-sampling layers (via max pooling), a flattening layer, and a dense layer for digit classification. The entire model itself consists of 5994 trainable parameters. Further detail on model topology can be found in /mnist-model/mnist-model.json in the public directory.

The model was continuously re-parameterized after 16 training batches and a testing batch. Furthermore, the model was trained and tested on the MNIST Database of Handwritten Digits, with 55000 digits used as training and 10000 used as testing sets. The model was trained on a separate web service before having its topology and weights loaded into this application via the loadLayersModel API.

Build

To build, first:

• Clone and open this repository,
• Run npm install,
• Run npm start.

Issues

Certain issues have arised from converting the canvas (224x224) drawing into the 28x28 image that is fed to the model. Due to the normalization in size, some resolution is lost, which effects the performance of the model.