Looking inside a forward pass.
ANN Visualizer
A browser experiment that connects neural-network training to a spatial view of inputs, hidden layers, and predictions.
- JavaScript
- React
- TensorFlow.js
- Three.js
- Web Workers
Private source · project overview
Bring the hidden layers into view
A 784-input network feeds two 16-unit hidden layers and ten output classes. The scene represents inputs and neurons spatially, while animation highlights information moving through the network.
Separate learning from rendering
A Web Worker runs TensorFlow.js training in batches and sends activation information, loss, accuracy, and the input label back to the interface. The scene consumes these messages to animate the prediction.
MNIST → TRAINING WORKER → ACTIVATIONS
│ │
loss / accuracy ▼
└───────── 3D NETWORK VIEWTraining and drawing live on opposite sides of a message.
- 01 / main thread
NeuralNetwork
Train / predict actions
Web Worker message handler
- postMessage(train / predict) → 2. worker.js
- 02 / worker thread
worker.js
Load MNIST examples
TensorFlow.js model.fit()
- batch / predict → 3. 784 → 16 → 16 → 10
- 03 / model
784 → 16 → 16 → 10
Hidden activations
Output prediction
- activation data → 4. animatePrediction
- 04 / message
animatePrediction
Input pixels + digit label
Activations + loss / accuracy
- postMessage to main thread → 5. processAnimationPackage
- 05 / scene state
processAnimationPackage
Input colours / hidden layers
Prediction and metric readouts
- animation state → 6. useFrame / animations
- 06 / render loop
useFrame / animations
Animate forward pass
Three.js meshes + camera
- 1NeuralNetwork worker.jspostMessage(train / predict)
- 2worker.js 784 → 16 → 16 → 10batch / predict
- 3784 → 16 → 16 → 10 animatePredictionactivation data
- 4animatePrediction processAnimationPackagepostMessage to main thread
- 5processAnimationPackage useFrame / animationsanimation state
Read from the implementation
components/NeuralNetwork.jsworkers/worker.jsML Files/mnist_data.jshelperFunctions/networkAnimations.js
A fresh run, with readable results
This film reruns the original network with 300 training batches of 64 examples, two epochs per batch, and shows consecutive held-out predictions from later in the run. A capture-only readout displays the actual input pixels, digit label, and model prediction. The camera moves while each result remains visible. Batch accuracy is a training metric, not a claim about overall test accuracy. Camera framing, visual density, and result hold time were adjusted in an isolated copy; the model architecture is unchanged.
