ConvNet

Tap it to read the digit. Draw your own digit in the Splash tab.

A convolutional network, or CNN, is a neural network built for pictures. It slides small filters across the picture: each filter is a little grid of weights that lights up where it finds its pattern, such as a slanted stroke, and makes a feature map. Pooling shrinks the map, keeping the strongest signal in each patch, and later layers combine the features to recognize the whole shape.

Tap it: a glowing 3-by-3 filter slides over a handwritten 7, stamping a feature map tile by tile; the tiles pool into a smaller map, and the scores for the digits 0 to 9 rise with 7 on top. In the Splash tab, pick a 3D view, or draw a digit and a small trained network reads it. Each square on the drawing pad is one pixel of the small 8-by-8 picture the network reads: the lighter its gray, the more ink it holds, and the pad starts with the sample 7.

The drawing pad runs a real small convolutional network with stored trained weights. Its test-set result reproduces the displayed 97.0%. The separate 7 diagram uses real filtering and pooling but prepared final digit scores.

1. Correct

   The drawing pad runs convolution, ReLU, pooling, dense scoring, and softmax.¹²

   An independent tensor implementation matches every layer on ten samples and 64 random drawings to absolute error below 1e-10.

2. Correct

   The network reads 8-by-8 images from a named digit dataset.³

   The asset identifies UCI Optical Recognition of Handwritten Digits; pixel values are scaled from 0–16. All ten stored samples classify correctly.

3. Close

   The displayed test accuracy is 97.0%.³

   The exported network correctly classifies 1,743 of 1,797 original UCI test rows: 96.99499%, which rounds to 97.0%.

4. Correct

   The introductory filter and pooling calculate feature values.¹²

   The 3-by-3 cross-correlation and ReLU produce a 5-by-5 map. Max pooling includes smaller windows at the edges.

5. Simplified

   The introductory digit scores are an illustration.¹

   The score array is stored separately from the filter and pooled values; its winning 7 is not inferred from that map.

1. Convolutions for images, Dive into Deep Learning authors
2. Pooling, Dive into Deep Learning authors
3. Optical Recognition of Handwritten Digits, UCI Machine Learning Repository; Alpaydin and Kaynak

Simplified

The introductory diagram uses one fixed filter on a 7-by-7 sample, a normalized feature map, partial edge pooling windows, and stored digit scores. The drawing network reads 8-by-8 grayscale pixels and does not retrain while drawing.

This link opens it in the Playground. To put it on your own page, add the element and one script tag. Every option.

https://splashery.app/play/?toy=cnn

<script type="module" src="https://splashery.app/play/src/element.js"></script>
<splashery-toy toy="cnn"></splashery-toy>