Skip to main content

AI Room: Step Inside a Neural Network That Is Actually Computing

· 4 min read

I open-sourced a new project, AI Room: it puts a neural network inside a 3D space you can walk into and inspect node by node. Try it live at ai-room-phi.vercel.app.

There is one essential difference from the usual "neural network explainer animations": this is not an animation — it is real computation. At load time, every network is genuinely trained in your browser with deterministic seeds; every value you see — activations, attention weights, softmax probabilities — is the true result of the forward pass. Click any node and check the arithmetic yourself.

Why I built it

I've seen plenty of diagrams and videos explaining neural networks, and most stop at the "illustration" level: arrows, boxes, gradient colors, made-up numbers, staged flows. I always wanted a version you could audit — every neuron's inputs, weights, bias, and activation laid out in front of you, where the Σ you add up is exactly the number glowing on screen. If you suspect it's lying, grab a calculator.

That became AI Room. Pure frontend, no backend, no runtime network calls — all training and inference happens in your browser.

What's inside

MLP (multi-layer perceptron): classifies three Gaussian clusters. Data-flow particles run through the weighted connections layer by layer, and the animation order is the computation order.

CNN (convolutional network): classifies patterns (vertical / horizontal / diagonal / ring). The receptive-field window slides across the input exactly in computation order. Kernels come in two modes — hand-crafted Sobel-style edge detectors (interpretable; only the dense head trains), or kernels that start as random noise and are trained end-to-end through a hand-written backward pass. There's also a draw mode: paint your own pattern on the input grid and watch the whole network classify it live, stroke by stroke. Three sizes (S/M/L), and switching retrains the network on the spot.

Tiny Transformer (character-level): a structurally faithful Transformer block — tokenizer → embedding → sinusoidal positional encoding → multi-head causal attention (2 heads, with output projection) → residual + LayerNorm → feed-forward → residual + LayerNorm → output softmax. Both the forward and backward passes (including LayerNorm and residual gradients) are hand-written, trained in-browser on a small corpus in about 2.5 seconds. Both heads' 8×8 attention matrices light up row by row; open an Add & Norm cell and you'll see the full arithmetic down to μ, σ, γ, β. Hit "Generate" for true autoregressive decoding: the sampled character is appended to the context, the window slides, the whole pipeline re-runs, and the text streams out one character at a time — exactly how real LLMs write. A temperature slider (0.2–1.4) controls the sampling distribution live.

Language ID (an AI application): type anything; the text becomes 8 interpretable statistics (Latin %, CJK %, kana %, and so on) and a trained MLP decides whether it's 中文, English, or 日本語. It's also direct proof that the computation is real: your input, its numbers, its prediction — one chain you can follow end to end.

Every layer title can be clicked for an explanation: what it does, why the network needs it, and a plain-words analogy — in Chinese, English, and Japanese — while the layer glows in 3D and everything else dims.

It doesn't pretend to be GPT

The README has a dedicated section on the differences from production models: a single Transformer block, 2 heads, d=12, character-level tokens; training is plain sample-by-sample SGD; the CNN has one conv+pool stage; language ID deliberately uses hand-crafted statistical features instead of modern embeddings. The math shown is real; the scale is not. I think honestly listing the simplifications is worth more than pretending "this is how ChatGPT works."

Stack

Vite + React + TypeScript + React Three Fiber + Drei + Zustand. npm run sanity trains every network at every scale and verifies accuracy.

The code is at github.com/tan-zhuo/ai-room — give it a spin, and issues are welcome.

COMMENTS