Optimizer Atlas

Interactive, research-grade visualization of first-order optimizers on a shared non-convex 2D loss landscape. Compare trajectories, momentum dynamics, and adaptive step sizes side-by-side in real time.

Features

• Non-convex procedural landscape with a global basin, local minima, and saddles
• Canvas heatmap rendering with optional contour lines
• Parallel optimizer instances with independent state and trails
• Live plots: loss vs step, gradient norm vs step, step size vs step
• Per-instance hyperparameter controls with typed numeric input
• Custom comparison panel for cross-optimizer and same-optimizer variants
• Live stats for position, loss, gradients, and optimizer-specific state

Quick start

npm install
npm run dev

Open the local URL printed by Vite (usually http://localhost:5173).

Build

npm run build
npm run preview

Usage guide

1. Use Playback to play/pause, step, reset, or regenerate the landscape.
2. Add or remove optimizer instances in Custom Optimizer Comparison.
3. Tune instance hyperparameters in Hyperparameter Controls.
4. Watch trajectories on the canvas and quantitative behavior in Live Status Graphs.

Project structure

src/
  optimizers/        Individual optimizer implementations
  landscape/         Loss surface + analytical gradients
  components/        Canvas, panels, and UI layout
  types/             Shared interfaces and state types
  utils/             Color, noise, and formatting helpers

Optimizers included

• Gradient Descent (batch)
• Stochastic GD
• Mini-batch GD
• Momentum
• Nesterov (NAG)
• AdaGrad
• RMSprop
• Adam
• AdamW
• Nadam

Adding a new optimizer

1. Implement the Optimizer interface in src/optimizers/.
2. Export it in src/optimizers/index.ts.
3. Add an entry in src/optimizers/catalog.ts with defaults and controls.

The UI and visualization will automatically pick up the new optimizer type.