I shrank a transformer until every number fitted on the screen and made the weights editable [R]

I've been teaching myself how LLMs actually work, not at the API level, but down to the matrix multiplications. To force myself to really understand the forward pass, I first built a complete transformer by hand in a spreadsheet from embeddings through to the loss. Then I turned the forward pass into a web page so it's easier to share.

It's a full transformer (single attention head, single block) shrunk to the smallest size where every single number still fits on screen: a 6-word vocabulary, 3-dimensional embeddings. It reads four words and predicts the next one, and it walks through the whole thing top to bottom: word vectors, Q/K/V, attention scores, the causal mask, softmax, the feed-forward network, logits, and the final probabilities.

The part I found most useful for my own understanding: the weights and word vectors are editable, and everything downstream recomputes live. There's also a Randomize button that scrambles all the weights, and the prediction immediately turns to nonsense. That's the honest point of the whole thing: with random (untrained) weights the guess is meaningless, and training is the entire story this page deliberately leaves out.

It's a single self-contained HTML file, no libraries, no build step. Backward propagation (how the weights actually get good) is the next one I want to build.

Link: https://dgochin.github.io/transformer/

I'm not an ML researcher, I'm a software engineer learning this from the ground up, so if anything's wrong or could be explained better, I'd genuinely like to hear it. This was just my attempt of trying to understand the transformer in the most basic way.