A dynamic, interactive visualization tool built with HTML, CSS (Tailwind CSS), and Vanilla JavaScript to help understand the forward and backward propagation mechanisms of a fully connected neural network.
- Interactive Architecture: Adjust the number of Input, Hidden Layers, Neurons per Layer, and Output neurons using sliders to instantly rebuild the network.
- Real-time Visualization: Watch data (represented as colored particles) flow through the network connections, with color and size representing the sign and magnitude of the neuron's activation value.
- Real-time Training Loss Graph: A dedicated, dynamically scaling canvas displays the training loss over time, allowing for immediate observation of the network's learning curve.
- Generic Training Task: The network is trained on an abstract classification problem that scales with the network's number of inputs and outputs, allowing for flexible experimentation beyond single, hardcoded problems like XOR.
- Adjustable Training: Start/Stop training, and fine-tune the Learning Rate in real-time to observe its effect on convergence and loss stability.
- Activation Functions: Select between
Tanh,ReLU, andSigmoidactivation functions. - Weight Inspection & Tuning: Hover over connections to see specific weight values, and click on a connection to fine-tune its weight manually.
- Pan and Zoom: Explore large network architectures with intuitive mouse-wheel zoom and drag-to-pan functionality.
| Feature | Description | Status |
|---|---|---|
| Real-time Loss Graph | Dedicated canvas added to display training loss history, updating on every step. | ✅ Implemented |
| Abstract Problem Training | Training logic generalized from the hardcoded XOR problem to a default, scalable classification task. | ✅ Implemented |
| Multiple Output Support | Backpropagation correctly updates weights for all neurons in the output layer. | ✅ Implemented |
| Network Controls | Sliders allow for complete, instantaneous restructuring of the network architecture. | ✅ Implemented |
- Save the Code: Save the provided HTML content as
index.html. - Open in Browser: Open
index.htmlin any modern web browser (Chrome, Firefox, Edge, etc.). - Start Experimenting:
- Use the sliders to set up your network architecture.
- Click the Start Training button to begin backpropagation and observe the loss decrease on the graph.
- Click on Input neurons to change their values and see the resulting activations propagate forward.