Introduction to TensorFlow.js by building a web app that is able to recognize hand drawn digits in a Canvas element.
In this introduction we will:
- Create a simple TensorFlow.js project.
- Load a subset of the MNIST digit dataset.
- Create a model that is able to predict the numeric value of a handwritten digit.
- Train the model.
- Allow users to draw digits using the Canvas.
- Use our model to recognize user drawn digits.
This project was created for the Fullstack meetup in NYC on June 14th, 2018. You can find the companion slides here.
The presentation given at the meetup is on YouTube here. Apologies in advance for the bad audio.
The following resources were used to create this project:
- TensorFlow.js MNIST Tutorial: Steps to build and train the DNN to recognize digits. NOTE that we were heavily inspired by this tutorial, but did not exactly follow it.
- MNIST Digits: Subset of the MNIST dataset for easy consumption within JavaScript.
- MNIST Digits data loader: To be used with the tool above for generating larger MNIST data subsets.
If you would like to experiment further, I challenge you to improve the performance of the model by modifying the hyperparameters (e.g. structure, learning rate, etc...) of the neural network or training the model over a larger MNIST subset.