An interactive neural network visualizer for learning mathematical functions and classifying datasets in real-time. Features a sci-fi CRT oscilloscope aesthetic with TensorFlow.js acceleration.
📈 Regression Mode
- Approximate mathematical functions (sin, cos, tan, custom formulas)
- Real-time oscilloscope visualization
- Test mode to evaluate generalization
📊 Classification Mode
- Load CSV datasets for binary classification
- Train/Test split with configurable ratio
- Live accuracy metrics (train & test)
- Feature importance visualization per neuron
- TensorFlow.js Backend: GPU-accelerated training
- Interactive Network Visualization: Neurons glow based on activation
- Forward Pass Animation: Watch signal flow through layers
- Hover Tooltips: Detailed neuron info with feature importance bars
- Configurable Architecture: Adjust hidden layers, neurons, and activations
- i18n Support: English/Spanish
git clone https://github.com/protos50/Neural-Network-Visualizer.git
cd Neural-Network-Visualizer
npm install
npm run dev
# Open http://localhost:3000Place CSV files in /public/datasets/. Use metadata comments to define columns:
# INPUT_COLS: Pclass,Sex,Age,SibSp,Parch,Fare
# OUTPUT_COLS: Survived
Pclass,Sex,Age,SibSp,Parch,Fare,Survived
3,0,22,1,0,7.25,0
1,1,38,1,0,71.28,1
...
| Rule | Description |
|---|---|
# INPUT_COLS: |
Comma-separated input column names |
# OUTPUT_COLS: |
Output column name (binary: 0 or 1) |
| First row after comments | Header row (column names) |
| All values | Must be numeric |
| Control | Description |
|---|---|
| ▶ Play/Pause | Start/stop training |
| ⏹ Stop | Stop and keep current state |
| ↺ Reset | Reinitialize network weights |
| Train/Test slider | Adjust data split ratio |
| Learning Rate | Control step size |
- Next.js 14 + TypeScript
- TensorFlow.js (GPU acceleration)
- Tailwind CSS (CRT styling)
- Lucide React (Icons)
Franco Joaquín Zini — GitHub · LinkedIn
MIT License — Educational use
Developed for Artificial Intelligence course — UNNE 2025