MLP — Digit Recognition

Drawing Canvas

?

Prediction

—

Training — tap which digit you drew

No examples yet. Draw and train!

Step 1 — Input (196 pixels)

The canvas is a 14×14 grid = 196 pixels. Each pixel is a number from 0 (black) to 1 (white). These 196 numbers are the network's input.

Step 2 — Hidden layer (32 neurons)

Each of the 32 hidden neurons receives all 196 inputs multiplied by different weights, plus a bias offset:

z = w₁·x₁ + w₂·x₂ + … + w₁₉₆·x₁₉₆ + b

The weights (w) are numbers the network adjusts with every training step.

Step 3 — Sigmoid activation

The result z is "squashed" into the range 0–1 via the sigmoid function:

σ(z) = 1 / (1 + e⁻ᶻ)

This lets the neuron "decide" how strongly to activate. Large positive z → close to 1. Large negative z → close to 0.

Step 4 — Output layer (10 neurons)

The 32 values from the hidden layer become inputs to 10 output neurons (one for each digit 0–9). Again: weights × inputs + bias → sigmoid. The output is shown here:

Step 5 — Backpropagation

When you press "Train X", the network compares its output to the correct answer and calculates the error:

error = target_value − actual_value

The error is "propagated backwards" and each weight is slightly adjusted:

w ← w + lr × error × σ'(z) × input

lr = 0.15 is the learning rate. This repeats 200 times per tap.

Network diagram: 196 inputs (aggregated) → 32 neurons → 10 outputs. Neuron brightness updates as you draw.