Neural Network Visualizer

An interactive 3D visualization of Multi-Layer Perceptrons (MLPs) with real-time training, gradient descent visualization, and loss landscape exploration.

Features

🧠 Editable MLP Architecture

• Configurable inputs: 1-10 input neurons
• Dynamic hidden layers: Add/remove layers, adjust neuron count (1-16 per layer)
• Configurable outputs: 1-10 output neurons

⚡ Activation Functions

• tanh: Hyperbolic tangent (default)
• ReLU: Rectified Linear Unit
• Softmax: For multi-class output

📉 Loss Functions

• MSE (Quadratic): Mean Squared Error
• NLL: Negative Log Likelihood
• Hinge: SVM-style margin loss

🎯 Training Options

• L2 Regularization: Optional weight penalty with configurable λ
• Adjustable Learning Rate: Log-scale slider (0.0001 to 1.0)
• Real-time Training: Start/Stop controls with step-by-step option

🎨 3D Visualization

• Interactive Network Graph: Movable, rotatable, zoomable
• Connection Colors: Green (positive) → Red (negative) weights
• Gradient Particles: Visual representation of gradient magnitudes
• Loss Surface: 3D landscape with gradient descent trail
• Hover Info: See weight/bias/gradient values on hover

Tech Stack

• Three.js: 3D WebGL rendering
• Micrograd.js: JavaScript port of Karpathy's autograd engine
• Vanilla CSS: Glassmorphic design system

Usage

1. Start a local server:

   npx serve . -l 3000

2. Open http://localhost:3000

3. Configure your network architecture in the left panel

4. Click "Start Training" to begin gradient descent

5. Interact with the 3D visualization:

   • Drag: Rotate view
   • Scroll: Zoom in/out
   • Hover: See neuron/weight details

Project Structure

nn-visualizer/
├── index.html          # Main HTML
├── css/
│   └── styles.css      # Glassmorphic design system
├── js/
│   ├── main.js         # Main application
│   ├── micrograd.js    # Autograd engine (Value, MLP, Loss)
│   ├── scene-manager.js # Three.js scene setup
│   ├── network-visualizer.js # 3D network rendering
│   └── loss-surface.js # 3D loss landscape
└── README.md

Based On

This project uses a JavaScript implementation of micrograd by Andrej Karpathy, ported to run in the browser for real-time visualization.

License

MIT