Neural Network Digit Recognition Simulation 🧠✏️

This project is an interactive web-based simulation that demonstrates how a Convolutional Neural Network (CNN) recognizes handwritten digits (0-9). Draw a digit, and see the network predict it in real-time while visualizing its internal state!

✨ Live Demo ✨

Try the simulation here!

Features

• Interactive Drawing: Draw digits directly onto the canvas.
• Real-time Prediction: See the network's prediction and confidence score immediately after drawing.
• Input Preprocessing: Visualizes the steps involved in preparing the drawn image for the network (resizing, centering, normalization).
• Network Visualization: Displays a simplified view of the network architecture:
  • Input Layer (Processed 28x28 image)
  • Hidden Dense Layer
  • Output Layer (10 digits)
• Activation Visualization: Neuron nodes are colored based on their activation level (darker = higher activation/probability).
• Weight Visualization: Connections between layers are colored (Green for positive, Magenta for negative) and their thickness indicates the weight's magnitude.
• Output Probabilities: Shows the probability assigned by the network to each output digit (0-9).
• Prediction Highlighting: The predicted digit and its corresponding output neuron are highlighted.
• Interactive Tooltips: Hover over hidden or output neurons to see their exact activation/probability value.
• Pre-trained Model: Uses a CNN trained offline on the standard MNIST dataset for fast loading and good accuracy.
• Introductory Menu: Provides context and instructions on first load.

How it Works

1. Drawing: The user draws a digit on the input canvas.
2. Preprocessing: The drawing is:
   • Resized to 28x28 pixels.
   • Converted to grayscale.
   • Centered based on the center of mass of the drawing. (it seems not to work correctly...)
   • Normalized (pixel values scaled, colors inverted to match MNIST format - white digit on black background).
3. Prediction: The processed 28x28 image tensor is fed into the pre-trained TensorFlow.js model.
4. Activation/Weight Extraction: The simulation extracts the activations from the hidden dense layer and the output probabilities from the final layer. Pre-calculated weights between the visualized layers are loaded.
5. Visualization: The network graph, input image, activations, weights, and probabilities are drawn on the main canvas.

Technology Stack

• Frontend: HTML, CSS, Vanilla JavaScript
• Machine Learning (Client-side): TensorFlow.js
• Model Training (Offline): Python, TensorFlow/Keras (trained on Google Colab)
• Hosting: GitHub Pages

Running Locally

While the primary way to use this is via the GitHub Pages link above, you can run it locally:

1. Clone this repository: git clone https://github.com/gnurtuv/neural-network-simulation.git
2. Navigate into the directory: cd neural-network-simulation
3. Ensure you have Python 3 installed.
4. Start a simple local HTTP server from the project directory: python -m http.server
5. Open your web browser and go to http://localhost:8000 (or the port number specified by the server).

Future Ideas

• Load and predict actual MNIST test images for comparison.
• Visualize convolutional layer feature maps.
• Implement saliency maps to show influential input pixels.
• Allow users to adjust network/visualization parameters.

Acknowledgements

• Based on the concept of neural network visualization.
• Uses the MNIST dataset created by Yann LeCun, Corinna Cortes, and Christopher J.C. Burges.