From applying filters to the world's simplest CNN

A self-contained TensorFlow.js demo for teaching convolution as learned filtering. Generate simple images, try classic filters, and train a single convolution filter to respond to plus-sign regions.
Controls
Set up image
0.08
Given kernels
Learn kernel
0.05
300
Training log
Ready.

What this demonstrates

The output at each location is a dot product between a local image patch and a filter. With hand-crafted filters you can see classical image operations. With learning, gradient descent updates the filter so that plus-sign regions become bright.

Images

Input image. Size:
Target map. Size:
Filter response. Size:
Thresholded output.
Threshold output
0.75
Shared grayscale colour bar for all image panels. Range: 0 to 1

Kernel and loss

Current 5×5 kernel with values shown in each cell.
Training loss history.
Current loss
-
Peak response
-
Kernel L2 norm
-
Mode
Manual