CNN 101: Interactive Visual Learning for Convolutional Neural Networks

crown jewel figure
The Overview (A) visualizes activation maps of all neurons as heatmaps connected with edges. When user clicks a convolutional neuron in (A), the view transitions to the Convolutional Intermediate View (A=>B).The Flatten Intermediate View appears when an output neuron is selected instead (A=>C). (B) demonstrates the relationship between selected convolutional neuron and its previous layer. (B) transitions to the Detail View which illustrates the convolution operation on selected input neuron (B=>D). (C) explains the flatten layer between the second last layer and output layer.
Demo Video
The success of deep learning solving previously-thought hard problems has inspired many non-experts to learn and understand this exciting technology. However, it is often challenging for learners to take the first steps due to the complexity of deep learning models. We present our ongoing work, CNN 101, an interactive visualization system for explaining and teaching convolutional neural networks. Through tightly integrated interactive views, CNN 101 offers both overview and detailed descriptions of how a model works. Built using modern web technologies, CNN 101 runs locally in users' web browsers without requiring specialized hardware, broadening the public's education access to modern deep learning techniques.
CNN 101: Interactive Visual Learning for Convolutional Neural Networks
  title = {{{CNN}} 101: {{Interactive}} Visual Learning for Convolutional Neural Networks},
  booktitle = {Extended Abstracts of the 2020 {{CHI}} Conference on Human Factors in Computing Systems},
  author = {Wang, Zijie J. and Turko, Robert and Shaikh, Omar and Park, Haekyu and Das, Nilaksh and Hohman, Fred and Kahng, Minsuk and Chau, Duen Horng},
  year = {2020},
  publisher = {{ACM}},
  place = {{Honolulu, HI, USA}}