Artificial Intelligence often feels like magic—a "black box" where data goes in and answers come out, with little visibility into the machinery in between. This Neural Network Visualizer is designed to strip away that mystery. It offers a real-time window into the microscopic decisions that power modern AI, scaling down the complexity of massive language models into a single, observable Multi-Layer Perceptron (MLP). By focusing on fundamental logic problems like the XOR gate, we can witness the foundational "spark" of learning that occurs when a machine figures out a pattern it wasn't explicitly programmed to solve.

At the heart of the simulation lies the architecture of thought: neurons and synapses. You see the network not as a static equation, but as a living web of connections. The "neurons" (circles) act as decision-making units, lighting up when activated, while the "synapses" (lines) represent the strength of opinion between them. A thick blue line is a strong endorsement; a thick red line is a firm rejection. As you toggle inputs manually, you are witnessing Forward Propagation—the flow of information from cause to effect. The network takes what it sees, processes it through layers of hidden logic, and offers a prediction.

However, the true spectacle is Backpropagation—the act of learning itself. When you hit "Start Training," the application accelerates time, simulating thousands of trial-and-error attempts per second. You can watch the weights shift and evolve as the network makes mistakes, calculates its error, and rewires itself to be more accurate. It is a visual story of adaptation: chaotic randomness slowly organizing itself into a structured solution. Whether it is mastering the simplicity of an 'AND' gate or the non-linear complexity of 'XOR', this simulator provides a front-row seat to the moment a collection of math equations becomes intelligent.

How the Neural Network Visualizer Works

This application visualizes a Multi-Layer Perceptron (MLP), a fundamental type of artificial neural network, as it learns to solve logic problems like XOR (Exclusive OR).

1. The Objective: The XOR Problem

The network is trying to learn a specific logic gate. For XOR, the rules are:

• Input [0, 0] → Output 0
• Input [1, 1] → Output 0
• Input [0, 1] → Output 1
• Input [1, 0] → Output 1

This is a classic benchmark in AI history. A simple, single-layer network cannot solve this because the data is not "linearly separable" (you can't draw a single straight line to separate the 0s from the 1s). This is why the visualization includes a Hidden Layer (the middle column of nodes), which allows the network to learn complex, non-linear patterns.

2. Visual Elements

• Neurons (Circles): These represent the inputs, processing units, and output. When a neuron lights up (becomes opaque and colorful), it has a high "activation" (near 1.0). Dark neurons have low activation (near 0.0).
• Weights (Lines): The lines connecting neurons represent "synapses" or weights.
  • Blue Lines: Positive weights. If the previous neuron is active, it encourages the next neuron to activate.
  • Red Lines: Negative weights. If the previous neuron is active, it suppresses the next neuron.
  • Thickness: The absolute strength of the connection. Thicker lines mean the connection has a stronger influence.

3. The Math: The Calculus of Backpropagation

While the visualization shows lines growing and shrinking, the underlying engine is pure calculus. The goal of training is to minimize the Loss Function (Cost), usually defined as the Mean Squared Error:

Where:

• C is the Cost (Error).
• y is the Target (the correct answer, e.g., 1).
• a is the Activation (the network's guess, e.g., 0.8).

To minimize this error, we need to change the weight w. But how do we know which way to change it? We use the Chain Rule to find the derivative of the Cost with respect to the weight (∂C/∂w).

The Chain Rule tells us that a small change in weight w causes a chain reaction:

1. Change in weight w → Change in weighted sum z
2. Change in sum z → Change in activation a
3. Change in activation a → Change in Cost C

Mathematically, this is expressed as:

Let's break down each term:

1. ∂z/∂w (The Input): Since z = w · input + b, the derivative with respect to w is simply the input from the previous neuron.
2. ∂a/∂z (The Activation Derivative): We use the Sigmoid function σ(z). Its derivative is computationally beautiful: σ'(z) = σ(z)(1 - σ(z)). This measures how sensitive the neuron is to changes.
3. ∂C/∂a (The Error): The derivative of the cost function is simply (a - y). This is the raw difference between the guess and the answer.

Putting it together:
To update a weight connecting Neuron A to Neuron B, we calculate:

4. The Process: Forward vs. Backward

Forward Propagation (Inference)

When you toggle the input buttons, data flows from left to right.

1. The Input Layer receives your values (0 or 1).
2. These values travel down the weighted lines.
3. Each neuron in the Hidden Layer sums up the inputs. If the weighted sum is high, the neuron "fires".
4. This repeats until the Output Layer produces a final prediction.

Backpropagation (Training)

When you click "Start Training," the network performs thousands of cycles per second:

1. Guess: It runs a forward pass with random inputs.
2. Measure Error: It compares its guess to the actual answer.
3. Backpropagate: It calculates the gradients using the calculus described above. It moves backward from Output to Input, assigning "blame" to every connection.
4. Update: It tweaks the weights (making lines bluer, redder, thicker, or thinner) to reduce the error slightly for the next time.

5. The Loss Graph

The red graph at the bottom shows the Mean Squared Error.

• At the start, the line is high because the network is guessing randomly.
• As training progresses, the line drops.
• When the line hits near-zero, the network has successfully "learned" the XOR pattern.