MnistWebApp

Web application for clasifying handwritten digits.

How does it work?

1. Obtaining the image

First I needed a way for user to somehow draw the image for that I used a html5 canvas and modified the code from here.

Then the canvas DataUrl string is sent to the server using Ajax.

2. Preprocessing the image

Then the image needs to be preprocessed so it matches preprocessing done to the Mnist database of handwritten digits. That is done server-side using .Net Bitmap library.

3. Feeding the image to the neural network

Then the image is converted to 28x28 float matrix with each element corresponding to grayscale value of one pixel and fed to the NN.

How the neural network works

The network has an input layer containg 784 neurons, each corresponding to grayscale value of one pixel, 2 hidden layers with 100 neurons each and 10 output neurons, each corresponding to one digit.

The code for the NN is taken from the book Michael A. Nielsen, "Neural Networks and Deep Learning", Determination Press, 2015 and has an accuracy of over 98% on the Mnist dataset.