Concept Lab — feedforward & backprop

Inkling

A network small enough to hold in one hand. Draw a letter, tell it what you drew, and watch every weight and bias get nudged by real backpropagation — then hand it a whole word and watch its guesses sharpen, one lesson at a time.

1 — write a word

Write a word

Draw a word below, one letter per box — whatever you like, any length.

2 — its first guess

See its first guess

This network hasn't learned anything about your handwriting yet — every weight is still random. Here's what it reads your word as right now:

3 — teach it

Teach it a letter

click again to confirm
Your network translates to —
Past attempts
4 — take it with you

Take it with you

The whole trained network — every weight, every bias — is small enough to fit in a QR code.

Scan this to come back to this exact page with your trained network already loaded.

Every real connection this network has, drawn directly. Updates live as you train — print this next to the QR code so the shape and the trained weights travel together.

make it a gift

Print the QR code on one side of a mug and the network diagram on the other — scan the QR to bring this exact trained network back to life, with the diagram right there explaining its shape. Either download on this page is ready for a mug, a shirt, a poster, whatever Zazzle will put an uploaded image on.

Open a Zazzle "upload your own image" template → — works for a mug, and most of Zazzle's other blank templates take the same kind of upload.

5 — look inside

Look inside the network

A live picture of the network's actual weights and biases — no averages, no stand-ins.

How this actually works — the whole network, in one screen

Every drawing is downsampled to an 8×8 grid — 64 numbers between 0 (blank) and 1 (full ink). That's the entire input. From there it's the plainest network there is:

64 pixels 18 hidden (tanh) 26 output (softmax, A–Z) z=Wx+b z=Wa+b backward: ∂L/∂W, ∂L/∂b — one gradient step per Train click

Forward: a₁ = tanh(W₁x + b₁), then ŷ = softmax(W₂a₁ + b₂). Loss: cross-entropy against the label you gave it. Backward: the standard chain rule — δ₂ = ŷ − y, then δ₁ = (W₂ᵀδ₂) ⊙ (1 − a₁²) — with every W and b nudged by −η·∂L. Pressing Train adds your sample to everything taught so far and re-runs several passes over all of it, so earlier letters don't get forgotten as new ones arrive.

Look inside the network, in detail

Your drawing becomes 64 pixel values, every one of which connects to all 18 hidden neurons — the network's one and only hidden layer — which in turn connect to 26 output neurons, one per letter A–Z. Step 5's 18 tiles are those 18 hidden neurons: each has learned to look for one pattern of ink across your drawing grid — its receptive field. A tile's border color is that neuron's bias; its interior is its 64 input weights reshaped back into the 8×8 drawing grid, rose where a pixel excites that neuron and blue where it inhibits it. The larger heatmap next to the tiles is the next layer's weights: one column per output letter, one row per hidden neuron (same order as the tiles), again rose/blue for how much that neuron pushes toward or away from that letter. Both update live as you train.

The QR code is quantized — it's not quite the full network

Total parameters: 64×18+18 hidden, 18×26+26 output = 1,664 numbers. At 8 bits each that's 1,664 bytes — genuinely too dense to fit in one QR code at this network's size, confirmed directly against the real QR library rather than assumed. So the QR code above compresses every weight and bias down to 4 bits each first (832 bytes) — enough to fit comfortably, but a real, permanent loss of precision compared to the exact numbers this network is actually using right now. Scanning it back in reconstructs a network that's close to this one, not byte-identical to it. The "copy full-precision weights" box further down is the exact, lossless version of the same numbers, if that difference ever matters more to you than a QR code's convenience.

Copy full-precision weights

The raw floats, no quantization — paste this back in below to restore a network exactly. Useful if 4-bit's precision loss ever matters more than a QR code's convenience.

copied

Load weights

Paste a previously exported network here to pick up where it left off.

loaded

Loading weights back in only restores the numbers, not this session's drawn examples — teaching is one-way unless you keep the browser tab open. Nothing you draw ever leaves your browser — every forward pass, every gradient, every export happens right here.