2. CNN EXPLAINER
CNN EXPLAINER is an interactive visualization
tool designed for beginners to understand
Convolutional Neural Networks (CNNs) in
deep learning. It offers three integrated views:
an overview of the CNN architecture, a
detailed examination of neuron activations
through sliding kernels, and a view for
inspecting the underlying mathematics of
convolution.
3. TABLE OF CONTENTS
01 INTRODUCTION
02 BACKGROUND
03 RELATED WORK
04 RESEARCH & DESIGN
05 DESIGN GOALS
06 USAGE SCENARIOS
07
DISCUSSION & FUTURE
WORK
08 CONCLUSION
5. Understanding CNN
◆ Deep learning's success raises interest but poses challenges for
beginners.
◆ CNNs, a fundamental model, present hurdles in grasping both
high-level structure and low-level operations.
◆ Beginners struggle to connect unfamiliar layer mechanisms
with complex CNN structures.
◆ Existing visualization tools focus on either high-level structure
or low-level operations, lacking an integrated approach.
6. FEATURES & IMPACT
Features:
◆ Overview + detail and animation techniques for high-level
structure and low-level operations.
◆ Fluid transitions between abstraction levels for comprehensive
understanding.
◆ Open-source, web-based implementation for accessibility
without advanced computational resources.
Impact:
◆ Broadening access to deep learning education with an open-
source, web-based implementation.
◆ A step towards democratizing and lowering barriers to
understanding and applying artificial intelligence technologies.
8. CNNs for Image Classification
Introduction:
◆ Objective of supervised image classification: map input image
(X) to output class (Y).
◆ CNNs demonstrate state-of-the-art performance by learning
representations of image data through multiple layers of
computation.
CNN Layers:
◆ Composition of various layers, including convolutional,
downsampling, and activation layers.
◆ Convolutional layers extract features for classification, with
early layers capturing low-level features (e.g., edges) and later
layers extracting more complex semantic features (e.g., car
headlights).
9. Operations and
Optimization
Activation Functions:
◆ Activation functions (e.g., ReLU) introduce non-linearity,
enabling the model to learn complex patterns.
◆ Softmax activation normalizes classification scores, yielding
output class probabilities.
Advantages of CNNs:
◆ Spatially-aware representations are created through stacked
layers, contrasting with over-parameterized classic image
classification models.
11. Visualization for DL Education
Overview:
◆ Various tools like Teachable Machine, Deep Visualization
Toolbox, ConvNetJS MNIST demo, TensorFlow Playground, and
GAN Lab allow users to interactively train and understand deep
neural networks.
◆ Current educational resources often focus on either high-level
model structures or low-level mathematics, leaving a gap in
connecting unfamiliar layer mechanisms with complex model
structures.
12. Visualization and
Engagement
Algorithm Visualization (AV):
◆ Preceding deep learning's popularity, AV tools were designed
to help learners understand dynamic algorithm behavior.
◆ AV's effectiveness in computer science education varies, with
student engagement identified as a key factor.
◆ CNN EXPLAINER's design draws inspiration from AV guidelines,
covering modern machine learning algorithms and advancing
the AV landscape..
13. Understanding with Visual
Analytics
Visual Analytics Tools:
◆ Tools like Summit, LSTMVis, and GANVis aid experts in
analyzing deep learning models and predictions.
◆ DGMTracker and DeepEyes assist developers in understanding
the training process of CNNs and GANs.
◆ Visual analytics tools also contribute to detecting and
interpreting vulnerabilities in deep learning models.
◆ CNN EXPLAINER focuses on non-experts, offering an accessible
way for learners to understand deep learning concepts through
interactive visualization.
15. Design Challenges in CNN
Learning
Intricate Model Structure:
◆ CNNs involve complex layer structures, often challenging for
beginners.
◆ Survey results emphasize the need for a visual tool to explain
the intricate model construction.
Complex Layer Operations:
◆ Different layers in CNNs serve distinct purposes, with complex
mathematical operations.
◆ Students find CNN layer computations challenging, requiring a
tool to simplify and explain these operations.
16. Design Challenges
and Solutions
Connection Between Model Structure and Layer Operation:
◆ The interplay between low-level mathematical operations and
high-level model structure is crucial.
◆ Understanding the translation of equations into a mental
model is challenging and requires focused attention.
Challenge in Deploying Interactive Learning Tools:
◆ Most neural networks are implemented in frameworks like
TensorFlow and PyTorch.
◆ The challenge is to make CNN understanding accessible
without requiring installation and coding skills.
18. Design Objectives and Benefits
Visual Summary of CNN Models and Data Flow:
◆ Objective: Provide an overview of CNN structure by visualizing
layer outputs and connections in a single view.
◆ Benefit: Helps users track the transformation of input data to
final predictions through layer operations.
Interactive Interface for Mathematical Formulas:
◆ Objective: Design an interactive interface for each
mathematical formula used in CNNs.
◆ Benefit: Enables users to examine and understand the intricate
mathematical operations behind each layer.
19. Design Objectives
and Benefits
Clear Communication and Engagement:
◆ Objective: Ensure clear communication and engagement
through accompanying explanations and customizable
visualizations.
◆ Benefit: Enhances user interpretation of graphical
representations, actively engaging learners in the learning
process.
Web-Based Implementation:
◆ Objective: Develop a web-based tool for accessibility without
installation or coding requirements.
◆ Benefit: Widens access, enabling users to learn and interact
with CNNs directly on laptops or tablets.
21. Beginner Learning Layer
Connectivity
◆ User: Janis, a virology researcher.
◆ Objective: Understanding 3D to 1D transformation in CNNs.
◆ Journey:
◆ Starts from the Overview (Fig. 5A).
◆ Explores connections through detailed views.
◆ Learns hidden operations via interactive views.
◆ Impact: Janis gains insights into often-overlooked operations,
feeling more confident in applying CNNs to her research.
22. Teaching Through
Interactive
Experimentation
◆ User: Damian, a university professor teaching computer vision.
◆ Objective: Demonstrate convolutional operations and hyperparameters.
◆ Classroom Experience:
◆ Projects CNN EXPLAINER for a live class demonstration.
◆ Engages students in interpreting sliding window animations.
◆ Demonstrates impact of altering hyperparameters in real time.
◆ Impact: Provides an interactive and dynamic learning experience,
allowing students to experiment with concepts in real image inputs.
24. Discussion and Future Work
Explaining Training Process:
◆ CNN EXPLAINER's Current Focus: Transforming input data to
class prediction.
◆ Future Endeavor: Addressing user interest in training process
and backpropagation.
◆ Approach: Collaborate with instructors and students to design
visualizations for detailed understanding.
25. Research and Expansion
Generalization to Other Models:
◆ Current Success: Effectively explaining CNN layer operations
and structure.
◆ Future Scope: Adapting Interactive Formula Views to diverse
layer types and neural network models (e.g., Leaky ReLU,
Residual Block).
Best Practices Integration:
◆ Current Application: CNN EXPLAINER integrates visualizations
with explanations and customizable features (G4).
◆ Future Opportunities: Explore additional algorithm
visualization (AV) best practices (e.g., interactive quizzes, user-
built visualizations).
27. Bridging Gaps in AI Education
◆ Deep Learning Complexity: Deep learning's increasing impact, yet the
challenge for beginners.
◆ CNN EXPLAINER Solution: An interactive tool simplifying Convolutional
Neural Networks (CNNs).
◆ Addressing Learning Challenges: Tackles intricate model structures,
complex layer operations, and connections between them.
◆ Design Goals: Visual summaries, interactive math interfaces, seamless
abstraction transitions, clear communication, and web-based
accessibility.
◆ Real-World Scenarios: Illustrated through a virology researcher's learning
journey and a professor's interactive classroom demonstration.
◆ Future Directions: Expanding to cover other layer types, integrating
algorithm visualization best practices, and quantitative evaluation plans.
