Interactive CNN Visualizer with ReLU & Loss Tracking

🔍 What It Is

An interactive, animated visualizer that demonstrates how a Convolutional Neural Network (CNN) learns to match a target output by adjusting its filter weights using gradient descent — step by step.

---

What I've Built

1. 5×5 Input Matrix

• Binary pattern (1s and 0s)
• Represents a tiny grayscale image or signal

2. 3×3 Learnable Filter

• Starts with initialized weights
• Moves across 9 positions (3×3 output) using a sliding window
• Performs convolution on each patch

3. 3×3 Target Output Matrix

• The CNN’s goal is to learn filter weights that produce this exact output from the input

4. Forward + Backward Passes

At each position, the filter:

• Computes a dot product with the 3×3 input patch (forward pass)
• Compares the result with the target value
• Calculates the error (prediction - target)
• Uses the error to update the gradient for each filter weight (backward pass)

5. Loss Calculation (MSE)

• After each full sweep over the input:
  • Compute Mean Squared Error over all 9 outputs
  • Track the loss over time and plot it live

6. Weight Updates (Gradient Descent)

• After each full forward + backward pass:
  • Average the accumulated gradients
  • Update each filter weight using:

    w = w - η ⋅ avg_gradient
    

    where η is the learning rate

---

🧪 Project Features

• ReLU activation applied to the output
• Live MSE loss graph updates
• Reset button for easy re-runs
• Fully responsive visual layout using Tailwind CSS + Framer Motion