Neural Networks in Your Browser
Watch a convolutional neural network learn to read handwritten digits — live, in your browser, powered by TensorFlow.js.
What is a Neural Network?
A neural network is a stack of mathematical operations loosely inspired by the brain. Data flows in, each layer transforms it, and a final prediction comes out. Training adjusts millions of numerical "weights" so the output gets closer to the right answer.
🧠 Layers
Each layer applies a transformation — a matrix multiply, a non-linearity, a pooling operation. Early layers detect edges; later layers combine them into shapes, then objects.
📉 Loss Function
A number measuring how wrong the model is. For classification, we use cross-entropy: it penalises confident wrong answers much more harshly than uncertain ones.
⛰️ Gradient Descent
We compute the derivative of the loss with respect to every weight (backpropagation), then nudge each weight slightly in the direction that reduces the loss. Repeat millions of times.
🔍 Convolution
A small filter (e.g. 5×5 pixels) slides across the image multiplying pixel values. Different filters activate for different features — horizontal edges, corners, textures.
Interactive: A Single Neuron
The basic building block of a network. A neuron computes a weighted sum of its inputs, adds a bias, then passes the result through an activation function (here, ReLU — which simply clips negative values to zero). Drag the sliders to see it live.
Interactive: Convolution Filters
Click a filter below to see how it transforms a sample MNIST digit. Each filter is a small grid of numbers that slides across the image — multiplying and summing as it goes — producing a new image called a feature map. The network learns what filters are useful during training.
Live Training Demo
This trains a small convolutional neural network on MNIST (handwritten digits 0–9) entirely in your browser. The model uses 3×3 kernels with 4 then 8 filters — about 1,400 parameters total, roughly 15× lighter than a typical toy CNN. The loss and accuracy charts update every 5 batches, so you can watch the model improve in near real-time.
Loss (lower = better)
Accuracy (higher = better)
Activation Maps Over Time
After each epoch, the network processes a single test image. Below you can see what the first two convolutional layers "see" — their activation maps. At first (epoch 0) the activations look like noise. As the network learns, specific filters start responding to real features: edges, curves, stroke endings. Each small image below shows one filter's response to the input.