Artificial Intelligence Neural Network Playground Help new

Neural Network Playground

Explore decision boundaries with interactive neural network training

Settings

Neural Network Classification

This demo visualizes how neural networks learn to classify 2D points by drawing decision boundaries.

How It Works

  1. Input layer (2 neurons): X and Y coordinates of each point
  2. Hidden layers: Configurable depth and width (e.g., 4-4 or 8-8)
  3. Output layer (2 neurons): Probability for each class
  4. Activation: ReLU or Sigmoid for hidden layers, Softmax for output

Training Process

  • Forward pass: Data flows through the network to produce predictions
  • Loss calculation: Cross-entropy measures prediction error
  • Backpropagation: Gradients flow backwards to compute weight updates
  • Gradient descent: Weights are adjusted to minimize loss

Visual Elements

  • Points: Left-click adds class 1 (blue), right-click adds class 2 (orange)
  • Background: Color gradient shows the network’s decision boundary
  • Loss curve: Tracks training progress over epochs

Preset Datasets

  • XOR: Classic non-linearly separable problem
  • Spiral: Interleaved spiral patterns
  • Circles: Concentric circles
  • Moons: Two interlocking crescents
© 2013 - 2026 Cylian Size:  T S M L W Theme:  Dark Light [Detected] [Forced] 0.62.0 (f7ef9462) 🤖 Claude
Instructions
How to Use

Add data points by clicking on the canvas:

  • Left-click adds a blue point (class 1)
  • Right-click adds an orange point (class 2)

Or select a preset dataset from the dropdown.

Press Train to start the neural network training. The background colors show the decision boundary as it evolves.

Tips
  • More hidden neurons = more complex boundaries
  • ReLU learns faster, Sigmoid is smoother
  • Lower learning rate = more stable training
About

Generation Prompt

Page: Neural Network Playground
Slogan: "Explore decision boundaries with interactive neural network training"

Structure:
- Widget before:title -> h1 + p.slogan centered
- Main -> Canvas (16:9 ratio) for visualization
- Widget after:algorithm -> Neural network explanation
- Widget modal:claude -> This documentation

Canvas (playground-canvas):
- 2D classification visualization
- Left-click: add class 1 point (blue)
- Right-click: add class 2 point (orange)
- Real-time decision boundary rendering
- Loss curve overlay

Neural Network:
- Architecture: 2-4-4-2 (configurable)
- Activations: ReLU, Sigmoid (hidden), Softmax (output)
- Training: Mini-batch gradient descent
- Backpropagation with automatic differentiation

Features:
- Preset datasets: XOR, Spiral, Circles, Moons
- Configurable: learning rate, hidden layers, activation
- Real-time training visualization
- Loss curve tracking

Controls:
- Train: Start/stop training loop
- Reset: Clear network weights
- Clear: Remove all data points
- Dataset selector: Load preset patterns