16.8 ConvnetJS: Browser-Based Deep-Learning Training and Visualization

In this section, we’ll overview Andrej Karpathy’s JavaScript-based ConvnetJS tool for training and visualizing convolutional neural networks in your web browser:70

https://cs.stanford.edu/people/karpathy/convnetjs/

You can run the ConvnetJS sample convolutional neural networks or create your own. We’ve used the tool on several desktop, tablet and phone browsers.

The ConvnetJS MNIST demo—which you’ll run and explore in the exercises—trains a convolutional neural network using the MNIST dataset we presented in Section 16.6. The demo presents a scrollable dashboard that updates dynamically as the model trains and contains several sections:

Training Stats

This section contains a Pause button that enables you to stop the learning and “freeze” the current dashboard visualizations. Once you pause the demo, the button text changes to resume. Clicking the button again continues training. This section also presents training statistics, including the training and validation accuracy and a graph of the training loss.

Instantiate a Network and Trainer

In this section, you’ll find the JavaScript code that creates the convolutional neural network. The default network has similar layers to the convnet in Section 16.6. The ConvnetJS documentation71 shows the supported layer types and how to configure them. You can experiment with different layer configurations in the provided textbox and begin training an updated network by clicking the change network button.

Network Visualization

This key section shows one training image at a time and how the network processes that image through each layer. Click the Pause button to inspect all the layers’ outputs for a given digit to get a sense of what the network “sees” as it learns. The network’s last layer produces the probabilistic classifications. It shows 10 squares—9 black and one white, indicating the predicted class of the current digit image.

Example predictions on Test set

The final section shows a random selection of the test set images and the top three possible classes for each digit. The one with the highest probability is shown on a green bar and the other two are displayed on red bars. The length of each bar is a visual indication of that class’s probability.

Exercises

In the exercises, experiment with the MNIST and CIFAR10 dataset demos, which classifies 32-by-32 color images in the 10 categories airplane, automobile, bird, cat, deer, dog, frog, horse, ship and truck.