Skip to content

User Guide

Hllinaz edited this page Jun 9, 2026 · 2 revisions

User Guide

This page explains how to use the application from a learner's perspective.

Basic Workflow

  1. Open the application.
  2. Configure the network in the sidebar.
  3. Set the sample input values and target output.
  4. Choose the visualization mode.
  5. Use Step, Epoch, or Play to train the network.
  6. Adjust playback speed from the header if you want slower or faster animation.
  7. Watch the canvas, formula panel, and loss chart update.
  8. Export the loss chart or generate tables when you need numerical reports.

Main Areas

Sidebar

The sidebar contains the main controls:

  • Network architecture.
  • Activation function.
  • Loss function.
  • Weight initializer.
  • Learning rate.
  • Table generation.
  • Author information.

Header

The header contains:

  • Playback controls for reset, play/pause, step, and epoch.
  • Playback speed control.
  • Project title and subtitle.
  • Documentation link.

Network Canvas

The canvas shows:

  • Network layers.
  • Nodes and activations.
  • Weights and connections.
  • Bias values.
  • Current trace step during step-by-step playback.

Positive and negative weights use different colors.

The Sample panel on the canvas lets you edit input and target values. It can be minimized when you need more room to inspect the network.

Formula Panel

The formula panel explains the current mathematical step. It changes according to the selected visualization mode and the current training step.

Loss Chart

The loss chart records the loss value after each completed epoch.

The chart export menu can download the loss chart as:

  • SVG
  • PNG
  • PDF

Exported charts include a title and axis labels:

  • Title: Loss Chart
  • X axis: Epoch
  • Y axis: Loss

Generated Tables

The Generate Table button opens a modal with numerical tables for:

  • Forward pass values.
  • Backward pass gradients.
  • Parameter evolution by epoch.

Recommended Network for XOR

For a simple XOR-style example, use:

2,2,1

This creates:

  • 2 input neurons.
  • 2 hidden neurons.
  • 1 output neuron.

Neural Network Playground

Start Here

Configuration

Learning Concepts

Reports

Clone this wiki locally