Neural Network Visualization Tool in Browser: Real-Time Observation of Model Training Process

An interactive neural network architecture design and real-time training visualization tool that allows adjusting network structures in the browser and observing the dynamic evolution of decision boundaries.

• Original Author/Maintainer: SPB AI Data Science Club
• Source Platform: GitHub
• Original Title: neural-net-visualizer
• Original Link: https://github.com/SPB-AI-Data-Science-Club/neural-net-visualizer
• Online Demo: https://neural.spbdatascience.org
• Release Date: 2026-06-11

---

As the core component of deep learning, the working principle of neural networks often seems abstract and difficult to understand for beginners. Traditional teaching methods usually rely on static mathematical formulas and diagrams, making it hard for learners to intuitively feel how changes in network structure affect model performance, nor can they observe the evolution of decision boundaries in real time during training.

This project is an interactive visualization tool born to address this teaching pain point. It allows learners to design neural network architectures by hand in the browser, observe the model training process in real time, and transform abstract neural network concepts into a visual dynamic experience.

---

Users can freely build and modify neural network structures:

• Add/Remove Hidden Layers: Flexibly adjust network depth
• Adjust Number of Neurons per Layer: Explore performance of networks with different capacities
• Real-Time Architecture Diagram: SVG dynamically displays the current network topology

The system has five built-in classic synthetic datasets covering different classification difficulties:

• Moons (Crescent Shape): Basic scenario of non-linear separability
• Circles (Concentric Circles): Test the network's ability to capture circular boundaries
• Spiral (Spiral Shape): High-complexity non-linear classification challenge
• XOR (Exclusive OR): Classic introductory problem for neural networks
• Linear: Simple baseline test

Each dataset is equipped with an adjustable noise slider, allowing users to smoothly switch between clean and noisy data and observe the impact of noise on model learning.

This is the project's most distinctive feature—real-time streaming updates via Server-Sent Events (SSE):

• Dynamic Decision Boundary Rendering: Changes in decision boundaries during training are displayed in real time in the browser
• Loss Curve Tracking: Loss values for each iteration are updated in real time
• Accuracy Monitoring: Classification accuracy changes synchronously with training progress

---

Frontend Tech Stack:

• Built on modern browser native APIs
• Fetch API + ReadableStream to handle SSE streams
• Plotly for data visualization
• SVG for dynamic rendering of network architecture diagrams

Backend Tech Stack:

• Python + Flask for web services
• PyTorch for actual neural network training
• Server-Sent Events for real-time data push

The core innovation of the system lies in the design of the /api/train_stream endpoint. It is a Python generator that produces SSE events in real time inside the PyTorch training loop:

1. Scalar Metric Stream: Push loss values and accuracy every few rounds
2. Decision Boundary Grid: Calculate and push softmax decision boundaries multiple times during training
3. Unbuffered Transmission: By setting the X-Accel-Buffering: no response header, ensure that nginx does not buffer the data stream

This design allows users to observe the "slow motion" of model learning in the browser, where every decision boundary change caused by weight updates is clearly visible.