Draw: Click and drag on the grid

3D Controls: • Left click + drag to rotate • Right click + drag to pan • Scroll wheel to zoom

Touch Controls
i

MNIST Digit Classification – Inference Visualization

Interactive Neural Network Visualization

This app visualizes how a pre-trained Convolutional Neural Network (CNN) is evaluated on handwritten digits in real-time. 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

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.