Interactive Neural Network Visualization

This interactive deep learning app provides a real-time CNN visualization. Explore computer vision concepts and neural network architecture. The model weights were learned beforehand using the MNIST dataset, and here you can see the prediction stage (inference).

How to Use:

• Draw: Click and drag on the 2D grid (top-left) to draw a digit
• Watch: See your drawing flow through the neural network layers in 3D
• Prediction: View the network's confidence for each digit (0-9) in the chart (top-right)

Network Architecture:

• Input Layer: 28×28 pixel grid (your drawing)
• Conv Layer 1: 3×3 filters → ReLU → MaxPool → 13×13
• Conv Layer 2: 3×3 filters (2 channels) → ReLU → MaxPool → 5×5
• Flatten: Convert 2D features to 1D vector (50 values)
• Dense Layer 1: Fully connected (50 → 22 neurons)
• Output Layer: Softmax classification (22 → 10 classes)

3D Controls:

• Rotate: Left click + drag
• Pan: Right click + drag
• Zoom: Scroll wheel

Color Intensity:

• Grid Cubes: Color represents neuron activation strength
  • Blue → Green → Red: Low to high activation values
  • Brighter colors = stronger activations
  • Dark/gray cubes = inactive neurons
• Connection Lines: Color shows data flow importance
  • Dark gray: Inactive or weak connections
  • Blue → White → Red: Low to high contribution strength
  • Only connections that significantly contribute to target neuron activation are colored
  • Connection strength = source activation × weight value
• Filter Weights: Small 3×3 grids show learned feature detectors
  • Colors represent the actual weight values in the filters
  • These determine what patterns the network looks for

Real-time Features:

• Live Processing: Watch activations propagate as you draw
• Connection Visualization: See which neurons influence others
• Feature Detection: Observe how filters detect edges and patterns

GradCAM Heatmap:

The heatmap overlay on the 2D input grid shows exactly which parts of your drawing drove the network's final decision, using a modified Gradient-weighted Class Activation Mapping (Grad-CAM).

• Red pixels: Positive influence. These pixels actively push the network toward its current prediction.
• Blue pixels: Negative influence. The network mathematically penalizes the prediction score based on these pixels.
• Dark/Neutral pixels: Little to no effect on the outcome.

Because this network is highly compressed (only 2 channels in the final convolutional layer), it must build every number using just two feature maps. You can use the bottom toggles to see inside its "brain":

• Both: Shows the combined tug-of-war between the positive and negative features.
• Ch 0 / Ch 1: Isolates a single feature map. You can often watch one channel act as a "vertical line detector" while the other looks for "horizontal/curved lines."

The network was intentionally kept small to ensure smooth, real-time visualization, but its limited depth and capacity can cause misclassifications, especially with unusual or ambiguous digit shapes.