Demo

Instructions

Try drawing a number between 0 and 9. To draw on the grid, just click on a square and drag your mouse around. If you'd like to erase the board, just click the "Clear Drawing" button. When your drawing is complete, click the "Read Number" button and a neural network written with tensorflow will try to read your number.

Your number is:

How it works

On the client side, there is an html grid. Javascript event listeners listen for the user clicking and moving their mouse on the grid to let the user draw. When the user clicks the "Guess Number" button a javascript function parses the grid to make a JSON object containing which squares are filled and which ones are not. This object is then sent to a function on the Django server through an ajax request. This function uses a tensorflow convolutional neural network model that was built and trained off the MNIST digit set. The model then tries to guess which number the user drew, and the result is returned to the client.