This 100% client-side playground demonstrates how artificial neural networks process visual patterns directly inside web browsers without any servers or paid APIs.
When you draw on the 280×280 canvas, the application detects the stroke's bounding box, centers the shape with uniform padding to ensure translational invariance, and downsamples the image into a 10Ã10 sensory matrix (100 continuous normalized float values between 0.0 and 1.0).
σ(z) = 1 / (1 + e-z).During training, the network computes Cross-Entropy Loss. Backpropagation calculates analytical gradients with respect to each weight and bias:
ΔW = β • ΔW + η • (δ × aT)
Momentum (β = 0.85) accelerates gradient descent and prevents oscillations.
- Cyan Lines: Positive synaptic weights (excitatory connections).
- Pink Lines: Negative synaptic weights (inhibitory connections).
- Line Thickness & Opacity: Proportional to the absolute magnitude |Wij|.