Since a few year now deep learing neural networks are very successful at various tasks in machine learning. One very popular application is the classification of image data. When testing a new framework or algorithm for image data classification, one very popular example dataset is the handwritten digits MNIST classification task. In this dataset 60000 images of digits can be used as training data and an additional 10000 images serve as the testing data.

When looking at convolutional neural network (CNN) implementations, therefore naturally testing a CNN on this dataset is very popular. Many framworks for implementing CNNs are available and one easy to use for Python is called Lasagne. In this code repository of course one example for classifying the MNIST data with a CNN is available LasagneMnist. This example is all nice if you are only interested in seeing if the network is able to learn and are satisfied with some accuracy numbers.

To play around with the trained network, some interactive example would be nice. I am sure that some interactive MNIST JavaScript examples do already exist, but there is nothing to learning like implementing it oneself. Therefore, I modified the Lasagne example to learn on the training data and output the learned weights to a JSON file.

This JSON file then gets loaded in the browser to a pure JavaScript CNN implementation, called ConvNetJS. With a little glue code and a simple drawing application for a canvas element the result can be seen in the demo below.

In order for this demo to work properly, you have to view this page in a browser, that supports HTML5.

As you can see, this simple example and network far from perfect yet, but it illustrates the purpose. For implementational details, I would like to refer to the (very choppy) implementation itself. Everything can be downloaded on Github DigitsGithub, including the Python code for training the network and all the JavaScript code running on this page.