Latest:

\n ATTENTION — Q·K dot productplanted\n KV CACHE — O(n²) → O(n)tended\n FFN — where facts liveplanted\n

\n \n Mode · Illustrative\n Loading GPT-2…\n Mode · Real · GPT-2 Live\n

\n\n\n\n\n\n

A guided journey from input → \"Paris\" · 13 stages · one prompt · every layer

est. 2026 / GPT-Viz Annual

\n\n\n

CHAPTER ZERO — INTRODUCTION

How GPT Decides Paris

We follow a single sentence — all five tokens of it — through every layer of a GPT model. By the end, you'll feel why each step exists, not just what it does.

\n \"The capital of France is\"\n →\n Paris\n

\n\n \n

\n \n

\n Optional. The blog is fully readable without this. Flip it on to see actual GPT-2 numbers replace the illustrative ones throughout.\n

\n\n\n

\n Index ::\n 01 · Input\n 02 · Tokenize\n 03 · Embed\n 04 · Position\n 05 · Attention\n 06 · Multi-Head\n 07 · Residual\n 08 · FFN\n 09 · ×96 Stack\n 10 · Output\n 11 · Sample\n 12 · KV Cache\n 13 · Loop\n ∎ Recap\n

\n\n\n

THE WHOLE PICTURE — BEFORE WE DIVE IN

One Forward Pass, Top to Bottom

This is the entire mechanism we're about to walk through. Every stage that follows highlights its component on the map.

\n\n\n\n\n\n

\n\n\n\n

01 Where we begin

The Question Arrives

\n\n

\n You type the sentence \"The capital of France is\" and hit enter. To you, this is a half-finished thought with an obvious completion. To the model, it's not even a sentence yet — it's a sequence of bytes. The model can't read English. It can't read characters. It can only do math on numbers. Everything that follows is the journey from those bytes to a single confident guess: \"Paris\".\n

\n\n

\n Current state:\n raw string · 24 bytes\n →\n about to become: tokens\n

\n\n

Our input str

\n \"The capital of France is\"\n

\n bytes: [84, 104, 101, 32, 99, 97, 112, 105, 116, 97, 108, 32, 111, 102, 32, 70, 114, 97, 110, 99, 101, 32, 105, 115]\n

\n\n\n\n

02 First transformation

The Tokenizer Chops It Up

\n\n

\n Before anything intelligent happens, the model needs to recognize chunks it knows. A BPE tokenizer scans the string and matches it against a fixed vocabulary of ~50,000 known pieces. Our sentence breaks neatly into 5 tokens. Each gets a permanent integer ID — its address in the vocabulary. From this point on, the model never sees letters again. It only sees these IDs.\n

\n\n

\n Current state:\n 5 token IDs\n →\n about to become: 5 meaning-vectors\n

\n\n

Our 5 tokens — meet the cast of this journey

\"The\"

id 464

\"·capital\"

id 3139

\"·of\"

id 286

\"·France\"

id 4881

\"·is\"

id 318

\n The last token, \"·is\", is highlighted because it's the one that matters most — its job is to predict what comes next. Everything else exists to help \"·is\" figure that out.\n

\n\n

\n Why sub-words and not whole words? A whole-word vocab would need millions of entries — every plural, tense, name, typo. A character vocab is too short; sequences explode. BPE finds the sweet spot: common words are one token, rare words decompose into pieces. \"France\" stays one token because it's common. A rare word like \"unhopefully\" gets split into several pieces (the actual split depends on the tokenizer's learned merges).\n

\n\n

\n The leading · on most of our tokens represents a literal space. \"France\" and \" France\" are different tokens. So is \"the\" vs \"The\". Capitalization and whitespace are part of identity.\n

\n\n \n

Live BPE Tokenizer

Type any text. GPT-2's tokenizer splits it in real-time below.

\n \n \n

\n Try: antidisestablishmentarianism (one word, many tokens) · π = 3.14159 (math symbols) · print(\"hello\") (code splits differently from prose) · 你好世界 (Chinese — each character ≈ 2 tokens in GPT-2's BPE)\n

\n\n

\n The 5 token IDs above are exact, from the real GPT-2 BPE tokenizer (tiktoken). The · prefix is our display convention for a literal space — GPT-2's internal byte-pair representation uses Ġ for the same role. From here on, vector bars, attention weights, FFN neuron patterns, and logit values are plausible illustrations shaped to teach the right intuition; they are not extracted from a running model. The architecture, math, dimensions, and complexity claims are exact. Want real values? Flip the Use real GPT-2 toggle at the top of the page.\n \n Real-model mode is active. Token IDs, top-7 logits, softmax probabilities, sampled token, generated continuation, and the live tokenizer playground are actual outputs from GPT-2 small (124M params, 2019) running on your device via transformers.js + ONNX Runtime Web. The cosine-similarity playground in Stage 03 uses all-MiniLM-L6-v2. Marked sections carry a tag.\n

\n One honest caveat: GPT-2 small is a small 2019 model with limited factual recall — it often doesn't predict \"Paris\" for our prompt (it tends to generate \"now the world's largest producer of food, and…\" instead). Bigger models (GPT-3, GPT-4, modern Claude / Gemini) do reliably answer \"Paris.\" The illustrative numbers throughout reflect what large models do; the real top-7 above shows you what a tiny model actually outputs.\n

\n What stays illustrative even in real mode: the Stage 5 attention bars and Stage 3 embedding vector bars — GPT-2's ONNX export doesn't expose attention probabilities or hidden states. FFN neurons, multi-head specializations, and per-block stack labels are conceptual abstractions that don't map to single layer outputs.\n \n

\n\n\n\n

03 Giving tokens meaning

From IDs to Vectors of Meaning

\n\n

\n A token ID like 4881 is meaningless on its own. The model holds a giant lookup table — its embedding matrix, with one row per token ID. Looking up row 4881 returns a fat vector: in GPT-3, 12,288 numbers. These numbers were tuned during training to place tokens with similar meanings near each other in vector space. \"France\" ended up near \"Germany\", \"Italy\", and \"Japan\" — not because anyone told it to, but because those words appeared in similar contexts. Our 5 tokens become 5 vectors. Same shape, different meanings.\n

\n\n

\n Current state:\n 5 vectors · no position yet\n →\n about to gain: position\n

\n\n

Each token lights up its dimensions\n ○ STAYS ILLUSTRATIVE\n

\"The\"

\"·capital\"

\"·of\"

\"·France\"

\"·is\"

\n 32 DIMS SHOWN. REAL MODELS: 768 (GPT-2) — 12,288 (GPT-3). EACH ROW = ONE TOKEN'S \"MEANING FINGERPRINT\".\n

\n\n

\n The key intuition: embeddings encode meaning as direction. Mathematical operations on these vectors map to semantic operations. The famous example: king − man + woman ≈ queen. By the time training finishes, \"France\"'s vector is geometrically close to other countries — near words like \"Paris\", \"European\", \"nation\" — and far from \"banana\" or \"Tuesday\". The model didn't memorize this. It emerged from billions of training sentences.\n

\n\n

\n The embedding table for GPT-3 is 50,257 × 12,288 ≈ 617M parameters just to map IDs to vectors. Almost a full GPT-2 model, used purely as a dictionary.\n

\n\n \n

Compare two words · cosine similarity

\n Compare actual learned embeddings of any two words or phrases. Cosine similarity is +1 if identical, 0 if unrelated, −1 if opposite. Watch how concepts cluster. (Powered by all-MiniLM-L6-v2, a 25 MB sentence-embedding model — loaded on first click.)\n

\n \n vs\n \n \n

\n Try: France / Italy (countries) · King / Queen · cat / kitten · cat / airplane (unrelated) · run / walked · happy / sad (antonyms — still positive!)\n

\n\n \n

Compare many words · pairwise heatmap

\n Type up to 6 words. See every pairwise similarity as a heatmap. Watch related concepts cluster together — the diagonal is always 1.00 (self-similarity), and groups of related words form darker patches.\n

\n \n \n \n \n \n \n

\n \n

\n Try mixing categories: dog / cat / lion / hammer / saw / drill — should form two clear clusters (animals vs tools).\n

\n\n\n\n

04 Adding order

\"France is\" ≠ \"is France\"

\n\n

\n There's a problem. The next stage — attention — computes sums of these vectors. Sums don't care about order. Without position information, \"France is\" and \"is France\" would produce identical outputs. To fix this, the model adds a position vector to each token's embedding. Position 0 has its own vector. Position 1 has another. Position 4 has another. These are added directly into the token vectors. Now \"·France\" sitting at position 3 is mathematically distinguishable from \"·France\" sitting at position 0.\n

\n\n

\n Current state:\n 5 vectors · meaning + position\n →\n about to enter: attention\n

\n\n

Position Playground · drag to move \"·France\"

\n Move the slider to put \"·France\" at different positions. Watch its position vector — and the resulting sum — change. The token's meaning stays the same; only its place updates.\n

\n Position:\n

\n \n \n \n \n \n

\n ← in the prompt \"The capital of France is\", France sits at position 3\n

\"·France\" tok

+ position 3

= sum

\n Same token (top row stays put). Position vector (middle) shifts every time. Sum (bottom) is what actually enters attention.\n

\n\n

\n Concat — rejected\n Half the vector for meaning, half for position. Wastes capacity, can't directly interact.\n

\n Add — used\n Same vector encodes both. The model learns to disentangle internally — for free.\n

\n\n\n\n

05 The heart of GPT

\"·is\" Sends Out a Query

\n\n

\n Now the most important moment. Our final token \"·is\" has one job — figure out what comes next. So it does what every token here does: it sends out a query vector, essentially asking \"who in this sentence has information that's relevant to me?\" Every other token offers a key vector — its \"tag\" advertising what kind of token it is. The dot product between query and key tells us how well they match. \"·is\" is going to find out, very quickly, that two tokens matter the most: \"·capital\" (the role) and \"·France\" (the country).\n

\n\n

\n Current state:\n 5 vectors with position\n →\n about to become: 5 context-mixed vectors\n

\n\n

Step 1 — Why three vectors (Q, K, V) instead of using the token vector directly?

\n You might ask: why bother making Q and K? Couldn't \"·is\" just dot its raw vector against the others? Here's why not:\n

\n No projections\n Dot products would be symmetric: \"is\" → \"France\" would equal \"France\" → \"is\". But language is directional. \"is\" needs to look at the noun. The noun shouldn't necessarily look at \"is\".\n

\n With Q, K, V\n Each token projects through 3 different learned matrices. Now \"is\" can have a Q that points exactly where \"France\"'s K points — without forcing the reverse. Asymmetric attention.\n

X · W_Q  →  Q   # what am I asking?\nX · W_K  →  K   # what tag do I broadcast?\nX · W_V  →  V   # what content do I send if chosen?

\n\n

Step 2 — How \"·is\" scores one other token (e.g. \"·France\")

\n We dot the Q vector from \"·is\" against the K vector from \"·France\". That means: multiply each pair of dimensions, then sum them up. The result is one number — how strongly \"·is\" wants to look at \"·France\".\n

Q vector from \"·is\"

K vector from \"·France\"

Element-wise products

Click below to watch the dot product build up dimension by dimension.

—

\n \n \n

\n Geometric intuition: a dot product is large when two vectors point in the same direction. So Q and K live in the same imagined space — high dot product means \"this query matches this tag.\"\n

\n\n

Step 3 — \"·is\" scores all 5 tokens\n ○ STAYS ILLUSTRATIVE\n

\n That dot-product calculation runs against every previous token. After scaling (÷√d) and softmax, we get a probability distribution — how much \"·is\" \"looks at\" each token. Notice where the weight lands.\n

\n \n

\n The biggest weights land on \"·capital\" and \"·France\" — exactly the tokens that define what the answer is supposed to be.\n

\n\n \n

Live Attention Playground · type any sentence

\n Type a sentence below. We tokenize it, look up real MiniLM-L6 embeddings for every token, then compute real softmax(Q·Kᵀ/√d) self-attention right here in your browser. Click any token to see what it attends to — and toggle the causal mask to see how GPT-style \"no peeking forward\" changes the pattern.\n

\n \n \n

\n\n

\n \n \n scale by 1/√d\n \n \n \n apply causal mask (GPT-style)\n \n \n temperature\n \n 1.00\n \n

\n\n

Click a token to make it the query:

\n\n

\n The math here is identical to what runs inside every transformer layer of GPT-2, GPT-4, Claude, etc.: dot-product attention with optional scaling and masking. The only difference is we use MiniLM's pre-trained 384-dim embeddings as both Q and K (instead of per-layer learned projections), since browsers can't yet expose intermediate attention weights from a real LM's ONNX export.\n

\n\n

Step 4 — \"·is\" becomes an enriched version of itself

\n With those weights, \"·is\" now computes a weighted sum of the V vectors from all 5 tokens. It mostly absorbs values from \"·capital\" and \"·France\", with smaller contributions from the rest. The result replaces \"·is\"'s own vector going forward.\n

new_is_vector = 0.08·V_The + 0.34·V_capital + 0.05·V_of + 0.41·V_France + 0.12·V_is

\n \"·is\" is no longer a pure copy of the word \"is\". It now contains the influence of \"capital\" and \"France\". The same operation happens for every other token in parallel — each one mixes in whatever earlier context matters most to it. This is attention. There's nothing more to it.\n

\n\n

Why /√d before softmax?

Dot products grow with vector dimension. Without scaling, the score for the best match becomes huge — softmax collapses to ~100% on one token. Gradients die. Scaling by √d keeps the distribution healthy.

Why mask future tokens?

During training the model sees full sentences like \"The capital of France is Paris\" and learns to predict every token from the ones before it. Without a mask, the position predicting \"·is\" could attend to \"·Paris\" and trivially copy the answer. The fix: set scores for positions to the right of each query to −∞ before softmax. e^−∞=0, so they contribute nothing. At inference there's nothing to mask in our 5-token prompt — the rule simply continues to apply.

\n\n

\n Attention is O(n²·d). Going from 4k to 32k context = 64× more attention compute, the central reason long contexts get expensive.\n

\n\n\n\n

06 Different questions, in parallel

The Model Does That, But Many Times

\n\n

\n What you just saw — \"·is\" querying all other tokens — was one attention head. But one head can only learn one kind of question. So GPT runs many heads in parallel, each with its own W_Q, W_K, W_V. Different heads specialize: one looks for the proper noun, another for the role, another for syntactic glue, another for distant references. Each head produces its own enriched \"·is\" vector. Then they're concatenated and projected back to a single vector. The \"is\" that comes out has been examined from many angles at once.\n

\n\n

What each head might be paying attention to illustrative

↓ concat(head_1, ..., head_n) · W_O

\n a single \"·is\" vector, enriched by 12 different perspectives\n

\n \n

\n\n

\n Mechanistic interpretability research has identified real GPT heads that match brackets, copy the previous token, find the subject of the sentence, and dozens more. Nobody designed these behaviors — they emerged from training.\n

\n\n\n\n

07 Don't forget who you were

Add the Old \"·is\" Back In, Then Normalize

\n\n

\n Attention just replaced our \"·is\" vector with a context-mixed version. But we don't want to throw away the original — that information might still be useful for the next layer. So we add the original back in: new_is = is_before + attention_output. This is the residual connection. Then we run LayerNorm to keep the numbers in a healthy range — without it, repeated additions across 96 layers would blow up.\n

\n\n

The bookkeeping (pre-norm, used by GPT-2/3 and modern models)

x_out = x + SubLayer( LayerNorm(x) )\n        └┬┘   └────────────┬─────────────┘\n       keep             new info

\n The original 2017 Transformer wrapped the norm around the residual (post-norm). GPT-2 onward moved the norm inside the residual branch (pre-norm) — it trains much more stably at depth. Most modern open models (LLaMA, Mistral, Gemma) further replace LayerNorm with RMSNorm — same idea, no mean-centering, cheaper.\n

\n\n \n

Try it · gradient flow through 12 layers

\n Flip the toggle to see what would happen during training. The bars show how much of the gradient survives back-propagating from layer 12 down to layer 1.\n

\n \n \n

\n Without residuals, gradient magnitude collapses exponentially with depth — early layers stop learning. With residuals, the identity path keeps the gradient near 1.0 even at the bottom of a deep stack.\n

\n\n

\n Why residuals exist at all? When training a 96-layer network, gradients have to flow backward through all 96 multiplications. Each one can shrink them. The residual x + f(x) always provides a clean identity path — gradients reach early layers without dying. Without residuals, deep networks simply don't learn. This single trick unlocked everything past ~20 layers.\n

\n\n\n\n

08 Where facts live

The Feed-Forward Net Thinks About \"·is\"

\n\n

\n Attention told us who to listen to. Now the model needs to do something with that. The Feed-Forward Network is applied to each token's vector independently. For our \"·is\" — which now carries information about \"capital\" and \"France\" — the FFN acts like a giant associative memory. The pattern \"capital + France + is\" activates a specific set of neurons in the hidden layer. Those neurons collectively encode \"the answer is Paris.\" They nudge the \"·is\" vector in a direction that, in vector space, points toward the word \"Paris\".\n

\n\n

\n \"·is\" Meaning:\n \"capital-of-France-is...\"\n →\n becoming: \"...basically Paris\"\n

\n\n

The FFN expands, activates, contracts

FFN(x) = W_2 · GELU( W_1 · x + b_1 ) + b_2\n\n# x:   (768,)            ← our \"is\" vector\n# W_1: (3072, 768)       → expand to 4× wide\n# W_2: (768, 3072)       → project back down

\n\n

Hidden layer neurons (mustard = active for general context · brick = \"Paris-knowing\" neurons):

\n \n \n

\n\n

\n Where does GPT \"remember\" that Paris is the capital of France? Probing research suggests this kind of factual knowledge lives in FFN weights, not attention. Attention routes context; the FFN turns that context into \"thinking\" — including looking up facts. They're a giant key-value memory whose keys are attention outputs and whose values are concept directions.\n

\n\n

\n FFN holds ~⅔ of all parameters in a transformer. Attention gets the headlines, but the MLPs hold most of the weights and most of the knowledge.\n

\n\n\n\n

09 Depth is where intelligence lives

That Whole Thing — 96 Times

\n\n

\n Everything you just saw — attention, residual, FFN, residual — is one transformer block. GPT-3 has 96 of them stacked. Each takes the previous block's output and refines it further. The intelligence isn't in any one block — it's in the refinement across depth.\n

\n (Illustrative narrative:) By block 5, our \"·is\" vector knows it's part of a fact-completion task. Around the middle layers, the model retrieves and commits to \"Paris\" as the answer — probing studies consistently localize factual recall to middle layers, not the final ones. By the late layers, the vector has been transformed into something close to the input embedding of \" Paris\", ready for the unembedding step.\n

\n\n

What changes across the stack illustrative

\n \n

\n\n

Real depths

GPT-2 small: 12 layers, 124M params
GPT-2 XL: 48 layers, 1.5B
GPT-3: 96 layers, 175B
LLaMA-3 70B: 80 layers, 70B
LLaMA-3.1 405B: 126 layers, 405B
GPT-4 (unconfirmed leaks): ~120 layers, MoE, ~1.7T total

Why so deep?

Each block can refine the representation a little. Stacking many lets the model build up reasoning, world knowledge, and answer synthesis in increments. Depth + scale + data = the capability we call \"intelligence.\"

\n\n\n\n

10 Turning the vector back into a word

What Word Lives in This Vector?

\n\n

\n After 96 blocks of refinement, the final vector for \"·is\" is dense with meaning that essentially says \"the next token should be Paris.\" But it's still a vector — 12,288 numbers. We need to turn it back into a token. The model takes this vector and asks every word in the vocabulary: \"how close are you to this vector?\" That's done with one matrix multiplication: last_vec · W_unembed. The result is one logit per vocabulary entry — 50,257 numbers, one per token. The bigger the number, the more the model wants that token.\n

\n\n

\n Current state:\n 1 vector for \"·is\"\n →\n becoming: 50,257 scores\n

\n\n

Top 7 logits (out of 50,257)

\n Show top:\n

\n \n \n \n \n

logits[\"·Paris\"]   = 10.5   ← winning\nlogits[\"·a\"]       = 7.8\nlogits[\"·home\"]    = 7.0\nlogits[\"·one\"]     = 6.3\nlogits[\"·the\"]     = 5.9\nlogits[\"·also\"]    = 5.5\nlogits[\"·France\"]  = 4.3   ← the model \"knows\" not to repeat\n...                       (50,250 more)

\n\n

\n Weight tying: in GPT-2 and GPT-3, W_unembed is literally the transpose of the input embedding matrix W_embed. The same map that turned IDs into vectors is reused (in reverse) to score vectors against IDs — saving ~600M params at GPT-3 scale and forcing a consistent meaning space. Most modern open models (LLaMA-2/3, Mistral, PaLM, Falcon) don't tie weights — they let the unembedding learn its own mapping.\n

\n\n\n\n

11 Making it a probability

Softmax: Logits Become Probabilities

\n\n

\n Logits aren't probabilities yet — they're raw scores. We apply softmax: exponentiate everything (kills negatives, amplifies big scores), then normalize so they sum to 1. \"·Paris\" now has 87% probability. \"·a\" has 4%. The rest have crumbs. Most of the time we just pick the highest, but with a non-zero temperature, we can sample probabilistically — giving the model the option to be more creative.\n

\n\n

probs = softmax(logits / T)

\n Temperature\n \n 1.00\n \n \n \n \n

\n\n

\n Why ever sample, instead of always picking the top? Greedy decoding gets repetitive (\"Paris. Paris. Paris.\") and stuck in safe phrasings. A calibrated bit of randomness produces text that's both coherent and varied. Temperature is the dial: low = confident and deterministic, high = creative and risky.\n

\n Try sampling 100× at temperature 0.20 vs 1.50. At low T, \"Paris\" wins almost every time. At high T, a long tail of less-likely tokens starts showing up. This is the diversity-vs-coherence trade-off, visible in the histogram.\n

\n\n\n\n

12 Don't recompute what you already know

Caching the Past So We Can Move Fast

\n\n

\n We just generated \"·Paris\". The conversation isn't done — maybe we want a longer sentence: \"The capital of France is Paris, a city famous for…\". To predict the next token, the model needs to do attention again, on 6 tokens now. But here's the trick: the K and V vectors for the original 5 tokens haven't changed. They depend only on each token's own context. So we cache them. Only the new \"·Paris\" token needs fresh K and V. That's the KV cache — and it's the reason ChatGPT can stream tokens in milliseconds instead of seconds.\n

\n\n

\n KV Cache:\n empty → 5 slots filled (prefill) → +1 per new token\n

\n\n

Watch the cache grow as we generate

K cache · each slot holds one token's K across all 96 layers

V cache

\n \n \n

\n\n

\n Without cache\n Recompute K and V for every prior token at every step. Each step costs O(n²) (full attention over n tokens). Generating a sequence of n tokens: O(n³) total.\n

\n With cache\n Only the new token's K and V are computed. Each step still attends over n cached K/V, so it's O(n) per step. Generating n tokens: O(n²) total. One full power lower in n.\n

\n\n

\n Cache memory ≈ 2 · n_layers · seq_len · (n_kv_heads · d_head) · bytes. LLaMA-3 70B uses Grouped-Query Attention (8 KV heads of 128 dim each, 80 layers) — at 32k context in fp16 that's ~10 GB per user. Without GQA the same model would need ~80 GB. This is why long contexts are expensive — and why \"cached input\" tokens in APIs cost 50–90% less than fresh prefills (the cache was already built).\n

\n\n

\n Real-world optimizations: PagedAttention (vLLM) treats the cache like virtual memory. GQA / MQA (LLaMA-3, Mistral) share K/V across attention heads to shrink cache 4–8×. Continuous batching packs multiple users' caches together. These are the engineering behind low API latency.\n

\n\n\n\n

13 One token at a time, forever

And Then We Loop

\n\n

\n We have \"·Paris\". We append it. Now the prompt is \"The capital of France is Paris\". The whole journey starts again — but thanks to the KV cache, almost all the work for the first 5 tokens is skipped. The model produces the next token. Then the next. Then the next. Generation is just this loop, run until the model decides it's done (by producing an end-of-sequence token).\n

\n\n

\n Generation · edit the prompt, watch GPT continue\n ○ ILLUSTRATIVE\n ⚡ REAL · GPT-2 LIVE\n

Edit the prompt below, then click Generate.

\n \n

\n The capital of France is\n

\n \n \n \n

\n Max new tokens:\n

\n \n \n \n

\n Sampling:\n \n \n \n \n \n \n

\n Try: The recipe calls for · Dear sister, · def fibonacci(n): · In the year 2099, · any sentence fragment. GPT-2 is from 2019 — fluent at style, loose with facts.\n

# The full generation loop, in essence\ntokens = tokenize(prompt)\nkv_cache, hidden = model.prefill(tokens)         # one parallel pass, O(n²·d) attention\n\nwhile len(tokens) < max_length:\n    logits, kv_cache = model.decode(tokens[-1], kv_cache)   # O(n·d) attention per step\n    next_id = sample(softmax(logits / T))\n    tokens.append(next_id)\n    if next_id == EOS: break\n\nprint(detokenize(tokens))

\n\n

\n The model itself has no memory between API calls. When you continue a chat, the entire conversation is re-sent as the prompt every time. The model is stateless. Modern APIs (Anthropic, OpenAI) now offer prompt caching that keeps KV state alive for minutes between requests — but that's an infrastructure optimization, not memory in the model. The weights don't change; the cache is just a way to avoid re-prefilling the same tokens.\n

\n\n

\n The \"typing speed\" you see when ChatGPT streams is real, not a UI effect. Each token = one full forward pass through 96 layers in the decode phase. 50 tokens/second = each layer running in roughly 200 microseconds on a GPU.\n

\n\n\n\n

∎ Recap · All 13 stages

The Whole Journey, On One Page

\n\n

\n Pull back from the details. Here's everything you just watched — the entire mechanism that turns \"The capital of France is\" into \"Paris\":\n

\n\n

  USER PROMPT: \"The capital of France is\"\n            │\n            ▼\n   ┌──────────────────────────────────────┐\n   │ 01. TOKENIZE                         │ string → 5 IDs\n   └──────────────────────────────────────┘\n            │  [464, 3139, 286, 4881, 318]\n            ▼\n   ┌──────────────────────────────────────┐\n   │ 02. EMBED                            │ IDs → dense meaning vectors\n   └──────────────────────────────────────┘\n            │  \"France\"-vec ≈ \"Italy\"-vec, far from \"banana\"\n            ▼\n   ┌──────────────────────────────────────┐\n   │ 03. + POSITION                       │ add ordering info\n   └──────────────────────────────────────┘\n            │\n            ▼\n   ╔══════════════════════════════════════╗\n   ║   ┌─────────────────────────────┐    ║\n   ║   │ 04. ATTENTION                │    ║ \"·is\" looks at \"·capital\"\n   ║   │   Q,K,V projections         │    ║ and \"·France\" most strongly\n   ║   │   softmax(Q·Kᵀ/√d) · V      │    ║\n   ║   └────────────┬────────────────┘    ║\n   ║                ▼                     ║\n   ║   ┌─────────────────────────────┐    ║\n   ║   │ 05. MULTI-HEAD               │    ║ 12+ heads in parallel\n   ║   └────────────┬────────────────┘    ║\n   ║                ▼                     ║   × 96\n   ║   ┌─────────────────────────────┐    ║   layers\n   ║   │ 06. RESIDUAL + NORM          │    ║\n   ║   └────────────┬────────────────┘    ║\n   ║                ▼                     ║\n   ║   ┌─────────────────────────────┐    ║\n   ║   │ 07. FEED-FORWARD MLP         │    ║ activates Paris-neurons\n   ║   └────────────┬────────────────┘    ║\n   ║                ▼                     ║\n   ║   ┌─────────────────────────────┐    ║\n   ║   │ 08. RESIDUAL + NORM          │    ║\n   ║   └─────────────────────────────┘    ║\n   ╚══════════════════════════════════════╝\n            │  \"·is\" vector now points toward \"Paris\"\n            ▼\n   ┌──────────────────────────────────────┐\n   │ 09. UNEMBED → LOGITS                 │ score against every vocab token\n   └──────────────────────────────────────┘\n            │\n            ▼\n   ┌──────────────────────────────────────┐\n   │ 10. SOFTMAX → PROBS                  │ \"Paris\" = 87%\n   └──────────────────────────────────────┘\n            │\n            ▼\n   ┌──────────────────────────────────────┐\n   │ 11. SAMPLE                            │ pick a token\n   └──────────────────────────────────────┘\n            │  → \"·Paris\"\n            ▼\n   ┌──────────────────────────────────────┐\n   │ 12. STORE IN KV CACHE                │ K, V for \"·Paris\" cached\n   └──────────────────────────────────────┘\n            │\n            ▼\n   ┌──────────────────────────────────────┐\n   │ 13. LOOP — generate next             │ append, repeat\n   └──────────────────────────────────────┘

\n\n

If you remember 7 things

Embeddings turn IDs into geometric meaning.
Position is added so order survives.
Q/K/V let each token ask asymmetric questions.
Dot product + softmax = similarity → weights.
Multi-head + FFN = many views, then per-token thinking.
Residual + LayerNorm make deep stacking trainable.
KV cache drops generation one full power of n — O(n³)→O(n²).

What training actually adjusts

Architecture is fixed. Training tunes the numbers inside:

Embedding & unembedding matrices
W_Q, W_K, W_V, W_O for every head × every layer
W_1, W_2 in every FFN
LayerNorm scales

For GPT-3 that's 175B numbers, tuned by gradient descent on terabytes of text.

\n\n

\n What GPT really is: a very large, very carefully tuned next-token predictor. Everything else — answering, reasoning, coding, creativity — emerges from doing that one task well, at sufficient scale, on diverse enough data.\n

\n\n

\n One sentence to keep: \"GPT turns text into vectors, lets those vectors talk to each other and reshape themselves across many layers, then turns the final vector back into a probability over the next token — and repeats.\"\n

\n\n

\n\n\n\n\n\n\n\n\n\n\n\n\n","label",[18],"pulls","branches","forks","envVars",{"_170":26,"_172":26},"connections",{"_170":26,"_171":26},"count","unfilledCount","emptyCount",{"_33":155,"_13":18,"_63":64,"_43":-5,"_35":36,"_156":72,"_157":93,"_37":202,"_39":97,"_65":21,"_159":160,"_66":24,"_161":-5,"_183":203,"_17":204},{"_33":194,"_13":195,"_63":91,"_43":-5,"_35":36,"_156":120,"_157":93,"_37":196,"_39":97,"_65":197,"_159":198,"_66":24,"_161":199,"_183":200,"_17":201},{"_33":186,"_13":187,"_63":188,"_43":-5,"_35":36,"_156":189,"_157":93,"_37":190,"_39":26,"_65":21,"_159":191,"_66":24,"_161":-5,"_183":192,"_17":193},{"_33":177,"_13":178,"_63":179,"_43":-5,"_35":36,"_156":180,"_157":93,"_37":181,"_39":26,"_65":21,"_159":182,"_66":24,"_161":-5,"_183":184,"_17":185},"a4189ae2-209a-4fe4-886d-4dbd66722253","styles.css","7b4dca44-68b8-11f1-868f-1607ee4eb77e",12,["D",1781527697705],"\n :root {\n /* Parchment palette — tuned for long-form readability */\n --paper: #f1e6cc; /* lighter, less yellow */\n --paper-2: #eadcb8;\n --paper-3: #dccaa2;\n --ink: #0a0805; /* near-black, less warmth */\n --ink-2: #1a1410;\n --muted: #4a3e2a; /* darker than before — readable */\n --dim: #6a5a3e;\n --rule: #0a0805;\n --rule-soft: rgba(10,8,5,0.18);\n /* Accents — slightly deeper for contrast on the lighter paper */\n --brick: #8a2f15;\n --teal: #1e4050;\n --ochre: #6e521c;\n --forest: #3a4a1c;\n --wine: #5a1a1a;\n --indigo: #1f2450;\n /* Inverted (dark tile) */\n --dark-bg: #0a0805;\n --dark-text: #f1e6cc;\n }\n\n /* RESET */\n * { box-sizing: border-box; }\n html, body { margin: 0; padding: 0; }\n body {\n background: var(--paper);\n color: var(--ink);\n font-family: 'Karla', system-ui, sans-serif;\n font-size: 17px;\n line-height: 1.7;\n scroll-behavior: smooth;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n min-height: 100vh;\n }\n .container { max-width: 1180px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }\n\n /* HEADER BAR — newspaper style status bar */\n .status-bar {\n position: sticky; top: 0; z-index: 100;\n background: var(--dark-bg);\n color: var(--dark-text);\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n border-bottom: 2px solid var(--ink);\n padding: 6px 0;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n .status-bar .container {\n display: grid;\n grid-template-columns: auto 1fr auto;\n gap: 20px;\n align-items: center;\n }\n .status-bar .latest-label {\n color: var(--paper);\n font-weight: 700;\n }\n .status-bar .latest-items {\n display: flex; gap: 28px; overflow-x: auto;\n scrollbar-width: none;\n justify-content: space-between;\n }\n .status-bar .latest-items::-webkit-scrollbar { display: none; }\n .status-bar .latest-item {\n color: var(--paper);\n opacity: 0.85;\n text-decoration: none;\n white-space: nowrap;\n }\n .status-bar .latest-item:hover { opacity: 1; color: var(--paper); }\n .status-bar .latest-item .tag {\n background: var(--brick);\n color: var(--paper);\n padding: 1px 6px;\n margin-left: 6px;\n font-weight: 700;\n font-size: 9.5px;\n letter-spacing: 0.08em;\n }\n .status-bar .latest-item .tag.tended { background: var(--ochre); }\n .status-bar .latest-item .tag.planted { background: var(--forest); }\n\n /* SUB-HEADER */\n .sub-header {\n font-family: 'JetBrains Mono', monospace;\n font-size: 11.5px;\n padding: 10px 0;\n border-bottom: 1px solid var(--rule);\n color: var(--ink);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n }\n .sub-header strong { font-weight: 700; }\n .sub-header .container { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }\n\n /* HERO */\n header.hero {\n border-bottom: 2px solid var(--ink);\n padding: 80px 0 60px;\n text-align: center;\n position: relative;\n }\n .eyebrow {\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--muted);\n margin-bottom: 16px;\n }\n h1.hero-title {\n font-family: 'Newsreader', Georgia, serif;\n font-weight: 500;\n font-style: italic;\n font-size: clamp(48px, 8vw, 88px);\n line-height: 0.95;\n letter-spacing: -0.02em;\n margin: 0 0 20px;\n color: var(--ink);\n }\n h1.hero-title em {\n font-style: normal;\n font-family: 'JetBrains Mono', monospace;\n font-size: 0.7em;\n background: var(--ink);\n color: var(--paper);\n padding: 0 14px;\n letter-spacing: 0.04em;\n vertical-align: 0.05em;\n }\n .tagline {\n font-family: 'Newsreader', Georgia, serif;\n font-size: 20px;\n color: var(--ink-2);\n max-width: 620px;\n margin: 0 auto 28px;\n line-height: 1.5;\n }\n .tagline em { font-style: italic; color: var(--brick); }\n .prompt-hero {\n display: inline-block;\n font-family: 'JetBrains Mono', monospace;\n font-size: clamp(18px, 2.6vw, 24px);\n padding: 16px 26px;\n background: var(--ink);\n color: var(--paper);\n border: 0;\n margin-top: 12px;\n letter-spacing: 0.02em;\n }\n .prompt-hero .q { color: var(--paper); }\n .prompt-hero .arrow-big { color: var(--paper); opacity: 0.5; margin: 0 12px; }\n .prompt-hero .a { color: var(--paper); background: var(--brick); padding: 2px 12px; }\n\n /* TOC NAV — printed-page chapter index */\n .toc {\n border-bottom: 1px solid var(--rule);\n padding: 18px 0;\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n }\n .toc .container {\n display: flex; gap: 4px; flex-wrap: wrap;\n align-items: center;\n }\n .toc .toc-label { color: var(--muted); margin-right: 12px; font-weight: 700; }\n .toc a {\n color: var(--ink);\n text-decoration: none;\n padding: 4px 10px;\n border: 1px solid transparent;\n transition: all 0.15s;\n }\n .toc a:hover {\n border-color: var(--ink);\n background: var(--ink);\n color: var(--paper);\n }\n\n /* SECTIONS */\n section.layer {\n padding: 60px 0;\n border-bottom: 1px solid var(--rule);\n position: relative;\n }\n section.layer .step-tag {\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--ink-2);\n margin-bottom: 10px;\n display: flex;\n gap: 12px;\n align-items: center;\n font-weight: 600;\n }\n section.layer .step-tag .num {\n background: var(--ink);\n color: var(--paper);\n padding: 2px 8px;\n font-weight: 700;\n }\n section.layer h2 {\n font-family: 'Newsreader', Georgia, serif;\n font-weight: 500;\n font-size: clamp(30px, 4vw, 44px);\n line-height: 1.05;\n letter-spacing: -0.01em;\n margin: 4px 0 14px;\n color: var(--ink);\n }\n section.layer h2 em {\n font-style: italic;\n color: var(--brick);\n }\n section.layer .subtitle {\n font-family: 'Karla', sans-serif;\n color: var(--ink-2);\n font-size: 17px;\n margin: 0 0 24px;\n max-width: 700px;\n }\n\n /* STORY BLOCK — editorial pull quote */\n .story {\n background: var(--paper-2);\n border-top: 2px solid var(--ink);\n border-bottom: 2px solid var(--ink);\n padding: 26px 30px;\n margin: 0 0 26px;\n font-family: 'Newsreader', Georgia, serif;\n font-size: 19px;\n line-height: 1.65;\n color: var(--ink);\n position: relative;\n max-width: 720px;\n }\n .story::before {\n content: \"📖 STORY\";\n display: block;\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n letter-spacing: 0.22em;\n color: var(--brick);\n font-weight: 700;\n margin-bottom: 10px;\n }\n .story strong { color: var(--ink); font-weight: 700; font-family: 'Karla', sans-serif; }\n .story em { color: var(--brick); font-style: italic; font-weight: 500; }\n\n /* STATE BAR — like a \"page header\" indicator */\n .state-bar {\n background: var(--paper);\n border: 1px solid var(--ink);\n padding: 8px 14px;\n margin: 0 0 18px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 11.5px;\n color: var(--ink);\n display: flex; flex-wrap: wrap; align-items: center; gap: 10px;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n }\n .state-bar .label { color: var(--brick); font-weight: 700; }\n .state-bar .state-now {\n background: var(--ink); color: var(--paper);\n padding: 2px 9px; letter-spacing: 0.04em;\n }\n .state-bar .arrow-mini { color: var(--muted); }\n\n /* TILE — bradwoods.io grid card */\n .tile {\n background: var(--paper);\n border: 1px solid var(--ink);\n padding: 26px 28px;\n margin: 16px 0;\n position: relative;\n font-size: 16px;\n line-height: 1.7;\n }\n .tile p { margin: 8px 0; }\n .tile.dark {\n background: var(--ink);\n color: var(--dark-text);\n border-color: var(--ink);\n }\n .tile.dark h3, .tile.dark .tile-title { color: var(--paper); }\n .tile.dark code { background: rgba(230,212,173,0.1); color: var(--paper); }\n .tile-title {\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n letter-spacing: 0.16em;\n text-transform: uppercase;\n margin-bottom: 16px;\n color: var(--ink);\n font-weight: 700;\n display: flex; gap: 8px; align-items: center;\n border-bottom: 1px solid var(--rule-soft);\n padding-bottom: 10px;\n }\n .tile-title .badge {\n background: var(--ink); color: var(--paper);\n padding: 2px 8px;\n font-weight: 700; letter-spacing: 0.1em;\n }\n .tile-title .badge.brick { background: var(--brick); }\n .tile-title .badge.ochre { background: var(--ochre); }\n .tile-title .badge.forest { background: var(--forest); }\n\n .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }\n .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }\n @media (max-width: 760px) {\n .grid-2, .grid-3 { grid-template-columns: 1fr; }\n }\n\n /* CALLOUT BOXES — like marginal notes */\n .why, .insight, .tip, .warn, .cost, .note {\n padding: 16px 20px;\n margin: 14px 0;\n font-size: 15.5px;\n line-height: 1.65;\n border-left: 4px solid;\n background: var(--paper-2);\n font-family: 'Karla', sans-serif;\n color: var(--ink);\n max-width: 760px;\n }\n .why { border-color: var(--wine); }\n .why::before { content: \"WHY\"; }\n .insight { border-color: var(--teal); }\n .insight::before { content: \"INSIGHT\"; }\n .tip { border-color: var(--forest); }\n .tip::before { content: \"TIP\"; }\n .warn { border-color: var(--ochre); }\n .warn::before { content: \"GOTCHA\"; }\n .cost { border-color: var(--brick); }\n .cost::before { content: \"COST\"; }\n .note { border-color: var(--ink); }\n .note::before { content: \"NOTE ON ACCURACY\"; }\n .why::before, .insight::before, .tip::before, .warn::before, .cost::before, .note::before {\n display: block;\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n letter-spacing: 0.22em;\n font-weight: 700;\n margin-bottom: 6px;\n color: var(--ink);\n }\n .why::before { color: var(--wine); }\n .insight::before { color: var(--teal); }\n .tip::before { color: var(--forest); }\n .warn::before { color: var(--ochre); }\n .cost::before { color: var(--brick); }\n .note::before { color: var(--ink); }\n\n /* CODE */\n code, .mono {\n font-family: 'JetBrains Mono', monospace;\n background: rgba(26,22,18,0.08);\n color: var(--ink);\n padding: 1px 5px;\n font-size: 0.9em;\n border-radius: 0;\n }\n pre {\n background: var(--ink);\n color: var(--paper);\n border: 0;\n padding: 14px 16px;\n overflow-x: auto;\n font-family: 'JetBrains Mono', monospace;\n font-size: 12.5px;\n line-height: 1.65;\n margin: 8px 0;\n }\n pre .k { color: #d4a04e; } /* keyword - mustard */\n pre .s { color: #c4a890; } /* string */\n pre .c { color: #8d7a55; font-style: italic; } /* comment */\n pre .n { color: #d4a04e; } /* number */\n pre .b { color: #e89060; font-weight: 700; }\n pre code { background: transparent; color: inherit; padding: 0; }\n\n /* BUTTONS */\n button.action, button.ghost {\n font-family: 'JetBrains Mono', monospace;\n font-size: 11.5px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n padding: 9px 16px;\n cursor: pointer;\n border-radius: 0;\n font-weight: 700;\n transition: all 0.12s;\n }\n button.action {\n background: var(--ink);\n color: var(--paper);\n border: 1px solid var(--ink);\n }\n button.action:hover { background: var(--brick); border-color: var(--brick); }\n button.ghost {\n background: transparent;\n color: var(--ink);\n border: 1px solid var(--ink);\n }\n button.ghost:hover { background: var(--ink); color: var(--paper); }\n .controls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }\n\n /* TOKEN STRIP */\n .strip {\n display: grid; grid-template-columns: repeat(5, 1fr);\n gap: 0; margin: 16px 0;\n border: 1px solid var(--ink);\n }\n .strip .slot {\n padding: 16px 8px;\n text-align: center;\n border-right: 1px solid var(--ink);\n background: var(--paper);\n min-height: 80px;\n display: flex; flex-direction: column; justify-content: center;\n transition: all 0.3s;\n position: relative;\n }\n .strip .slot:last-child { border-right: 0; }\n .strip .slot .tok {\n font-family: 'JetBrains Mono', monospace;\n font-size: 14px;\n color: var(--ink);\n font-weight: 700;\n }\n .strip .slot .sub {\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n color: var(--muted);\n margin-top: 5px;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n .strip .slot.focus {\n background: var(--ink); color: var(--paper);\n }\n .strip .slot.focus .tok { color: var(--paper); }\n .strip .slot.focus .sub { color: var(--paper); opacity: 0.7; }\n .strip .slot.focus::after {\n content: \"← about to predict\";\n position: absolute; top: -22px; left: 50%;\n transform: translateX(-50%);\n font-family: 'JetBrains Mono', monospace;\n font-size: 9.5px; color: var(--brick);\n white-space: nowrap; letter-spacing: 0.1em;\n font-weight: 700; text-transform: uppercase;\n }\n\n /* VECTORS as bars */\n .vec {\n display: flex; gap: 1px; align-items: center;\n padding: 4px;\n background: var(--paper-3);\n border: 1px solid var(--ink);\n }\n .vec-cell { width: 9px; height: 26px; transition: all 0.5s; }\n .vec-row { display: flex; gap: 12px; align-items: center; padding: 4px 0; }\n .vec-label {\n width: 100px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 12px;\n color: var(--ink); flex-shrink: 0;\n }\n\n /* NUMERIC VECTOR (dot product) */\n .numvec {\n display: flex; gap: 4px; padding: 6px;\n background: var(--paper-3);\n border: 1px solid var(--ink);\n align-items: center; flex-wrap: nowrap; overflow-x: auto;\n }\n .numcell {\n min-width: 50px; height: 44px;\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n background: var(--paper);\n border: 1px solid var(--ink);\n font-family: 'JetBrains Mono', monospace;\n font-size: 12.5px;\n color: var(--ink);\n transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n flex-shrink: 0; position: relative;\n }\n .numcell.q { border-color: var(--teal); color: var(--teal); }\n .numcell.k { border-color: var(--brick); color: var(--brick); }\n .numcell.v { border-color: var(--ochre); color: var(--ochre); }\n .numcell.lit {\n background: var(--ink); color: var(--paper);\n border-color: var(--ink);\n transform: scale(1.08); z-index: 5;\n }\n .numcell.q.lit { background: var(--teal); border-color: var(--teal); color: var(--paper); }\n .numcell.k.lit { background: var(--brick); border-color: var(--brick); color: var(--paper); }\n .numcell.product {\n background: var(--forest); color: var(--paper); border-color: var(--forest);\n }\n .numcell .idx {\n font-size: 9px;\n color: var(--muted);\n position: absolute; top: 1px; left: 4px;\n opacity: 0.8;\n }\n .numcell.lit .idx, .numcell.product .idx { color: var(--paper); opacity: 0.7; }\n\n /* ATTENTION REVEAL */\n .attn-reveal {\n display: grid;\n grid-template-columns: 130px 1fr 70px;\n gap: 10px;\n align-items: center;\n padding: 5px 0;\n }\n .attn-reveal .key-name {\n font-family: 'JetBrains Mono', monospace;\n font-size: 13px;\n color: var(--brick);\n text-align: right;\n font-weight: 500;\n }\n .attn-reveal .bar-wrap {\n height: 22px;\n background: var(--paper-3);\n border: 1px solid var(--ink);\n overflow: hidden;\n position: relative;\n }\n .attn-reveal .bar-fill {\n height: 100%;\n background: var(--ink);\n transition: width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .attn-reveal .score {\n font-family: 'JetBrains Mono', monospace;\n font-size: 13px;\n color: var(--ink);\n text-align: left;\n font-weight: 500;\n }\n .attn-reveal.high .bar-fill { background: var(--brick); }\n .attn-reveal.high .score { color: var(--brick); font-weight: 700; }\n .attn-reveal.high .key-name { color: var(--brick); font-weight: 700; }\n\n /* HEADS */\n .heads-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 0;\n border: 1px solid var(--ink);\n }\n .head {\n background: var(--paper);\n border-right: 1px solid var(--ink);\n border-bottom: 1px solid var(--ink);\n padding: 12px;\n text-align: center;\n }\n .head:last-child { border-right: 0; }\n .head .h-name {\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px; letter-spacing: 0.1em;\n color: var(--teal); font-weight: 700;\n text-transform: uppercase;\n }\n .head .h-focus {\n font-family: 'Karla', sans-serif;\n font-size: 11.5px; color: var(--ink);\n margin-top: 6px; min-height: 36px;\n }\n .head .h-bar {\n height: 4px; margin-top: 8px;\n background: var(--paper-3);\n border: 1px solid var(--ink);\n overflow: hidden;\n }\n .head .h-bar > div {\n height: 100%; background: var(--teal);\n transition: width 0.8s;\n }\n\n /* FFN NEURONS */\n .ffn-neurons {\n display: grid;\n grid-template-columns: repeat(20, 1fr);\n gap: 2px;\n padding: 8px;\n background: var(--paper-3);\n border: 1px solid var(--ink);\n }\n .ffn-neurons .neuron {\n aspect-ratio: 1;\n background: var(--paper);\n border: 1px solid var(--rule-soft);\n transition: all 0.4s;\n }\n .ffn-neurons .neuron.active {\n background: var(--ochre);\n border-color: var(--ochre);\n }\n .ffn-neurons .neuron.paris {\n background: var(--brick);\n border-color: var(--brick);\n }\n\n /* ARROW */\n .arrow {\n text-align: center;\n color: var(--ink);\n font-family: 'JetBrains Mono', monospace;\n font-size: 20px;\n margin: 8px 0;\n }\n .arrow.small { font-size: 14px; margin: 2px 0; opacity: 0.6; }\n\n /* STACK */\n .stack-viz {\n display: flex; flex-direction: column;\n gap: 0;\n border: 1px solid var(--ink);\n }\n .stack-block {\n padding: 10px 16px;\n border-bottom: 1px solid var(--ink);\n background: var(--paper);\n font-size: 13px;\n display: flex; justify-content: space-between; align-items: center;\n transition: all 0.3s;\n font-family: 'JetBrains Mono', monospace;\n }\n .stack-block:last-child { border-bottom: 0; }\n .stack-block .lbl { font-weight: 700; font-size: 12px; letter-spacing: 0.04em; }\n .stack-block .info { color: var(--muted); font-size: 11.5px; font-style: italic; font-family: 'Newsreader', serif; }\n\n /* GEN DISPLAY */\n .gen-display {\n background: var(--paper);\n border: 1px solid var(--ink);\n padding: 16px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 17px;\n min-height: 70px;\n line-height: 1.7;\n color: var(--ink);\n }\n .gen-display .typed { color: var(--ink); }\n .gen-display .new { color: var(--brick); font-weight: 700; }\n .gen-display .cursor {\n display: inline-block; width: 9px; height: 18px;\n background: var(--ink); margin-left: 2px;\n vertical-align: middle; animation: blink 1s infinite;\n }\n @keyframes blink { 50% { opacity: 0; } }\n\n /* PROB BARS */\n .prob-row {\n display: flex; align-items: center; gap: 10px;\n padding: 5px 0;\n }\n .prob-row .lbl {\n width: 110px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 13px; color: var(--ink);\n text-align: right;\n }\n .prob-bar {\n flex: 1; height: 22px;\n background: var(--paper-3);\n border: 1px solid var(--ink);\n overflow: hidden;\n }\n .prob-fill {\n height: 100%; background: var(--ink);\n transition: width 0.6s cubic-bezier(0.4,0,0.2,1);\n }\n .prob-row.winner .prob-fill { background: var(--brick); }\n .prob-row.winner .lbl { color: var(--brick); font-weight: 700; }\n .prob-row .pct {\n width: 60px; font-family: 'JetBrains Mono', monospace;\n font-size: 12px; color: var(--ink);\n }\n\n /* KV CACHE */\n .kv-cache {\n display: flex; gap: 4px; padding: 10px;\n background: var(--paper-3);\n border: 1px solid var(--ink);\n align-items: flex-end; min-height: 70px; flex-wrap: wrap;\n }\n .kv-slot {\n min-width: 64px; padding: 8px 6px;\n text-align: center;\n background: var(--paper);\n border: 1px solid var(--ink);\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n color: var(--ink);\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .kv-slot .tag {\n font-size: 9px;\n color: var(--muted);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n .kv-slot.new {\n background: var(--brick);\n color: var(--paper);\n border-color: var(--brick);\n }\n .kv-slot.new .tag { color: var(--paper); opacity: 0.8; }\n\n /* COMPARE */\n .compare {\n display: grid; grid-template-columns: 1fr 1fr;\n gap: 0;\n border: 1px solid var(--ink);\n margin: 14px 0;\n }\n .compare > div { padding: 14px; font-size: 13.5px; }\n .compare > div:first-child { border-right: 1px solid var(--ink); }\n .compare .bad { background: var(--paper-2); }\n .compare .good { background: var(--paper); }\n .compare .label-bad, .compare .label-good {\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n font-weight: 700;\n margin-bottom: 6px;\n display: block;\n }\n .compare .label-bad { color: var(--wine); }\n .compare .label-good { color: var(--forest); }\n @media (max-width: 760px) {\n .compare { grid-template-columns: 1fr; }\n .compare > div:first-child { border-right: 0; border-bottom: 1px solid var(--ink); }\n }\n\n /* DOT PRODUCT DISPLAY */\n .dotprod-display {\n background: var(--ink);\n color: var(--paper);\n padding: 14px 18px;\n text-align: center;\n font-family: 'JetBrains Mono', monospace;\n font-size: 15px;\n margin-top: 14px;\n min-height: 50px;\n }\n .dotprod-display .running {\n color: #e89060; font-size: 20px; font-weight: 700; margin-top: 4px;\n }\n .dotprod-display .calc {\n color: var(--paper); opacity: 0.7;\n font-size: 12px; margin-bottom: 4px;\n }\n\n /* COLORED INLINE TEXT */\n .ink-brick { color: var(--brick); font-weight: 700; }\n .ink-teal { color: var(--teal); font-weight: 700; }\n .ink-ochre { color: var(--ochre); font-weight: 700; }\n .ink-forest { color: var(--forest); font-weight: 700; }\n .ink-wine { color: var(--wine); font-weight: 700; }\n\n /* MISC */\n footer {\n padding: 60px 0 80px;\n text-align: center;\n color: var(--muted);\n border-top: 2px solid var(--ink);\n margin-top: 40px;\n font-family: 'Newsreader', Georgia, serif;\n font-style: italic;\n font-size: 16px;\n }\n footer .container > div { max-width: 620px; margin: 0 auto; }\n ul.clean { padding-left: 18px; margin: 6px 0; }\n ul.clean li { margin: 4px 0; }\n .small-label {\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px; color: var(--muted);\n text-transform: uppercase;\n letter-spacing: 0.16em; font-weight: 700;\n }\n\n /* selection */\n ::selection { background: var(--ink); color: var(--paper); }\n\n /* Abbreviations — dotted underline + native tooltip */\n abbr[title] {\n text-decoration: underline dotted var(--brick);\n text-decoration-thickness: 1.5px;\n text-underline-offset: 3px;\n cursor: help;\n font-weight: 500;\n }\n\n /* Cosine matrix heatmap (Stage 03 — real mode) */\n .word-inputs {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 8px;\n margin-bottom: 12px;\n }\n .word-inputs input {\n padding: 8px 12px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 13px;\n background: var(--paper);\n border: 1px solid var(--ink);\n color: var(--ink);\n border-radius: 0;\n }\n .word-inputs input:focus {\n outline: 0; border-color: var(--brick);\n box-shadow: inset 0 0 0 1px var(--brick);\n }\n .cos-matrix {\n display: grid; gap: 2px; margin-top: 16px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 11.5px;\n }\n .cos-matrix .mcell {\n aspect-ratio: 1;\n border: 1px solid var(--ink);\n display: flex; align-items: center; justify-content: center;\n min-height: 54px;\n transition: transform 0.15s;\n }\n .cos-matrix .mcell:hover { transform: scale(1.08); z-index: 5; box-shadow: 0 0 12px rgba(138, 47, 21, 0.4); }\n .cos-matrix .mhead {\n background: transparent;\n border: 0 !important;\n color: var(--ink);\n font-weight: 700;\n font-size: 11px;\n padding: 4px 6px;\n text-align: center;\n aspect-ratio: auto;\n min-height: auto;\n }\n .cos-matrix .mhead.row { text-align: right; padding-right: 10px; }\n\n /* Sample N histogram (Stage 11) */\n .sample-hist {\n margin-top: 14px;\n background: var(--paper-3);\n border: 1px solid var(--ink);\n padding: 12px 14px;\n }\n .sample-hist .sh-row {\n display: flex; align-items: center; gap: 10px; padding: 4px 0;\n }\n .sample-hist .sh-lbl {\n width: 90px; font-family: 'JetBrains Mono', monospace;\n font-size: 12px; text-align: right; color: var(--ink);\n }\n .sample-hist .sh-bar {\n flex: 1; height: 18px;\n background: var(--paper);\n border: 1px solid var(--ink);\n overflow: hidden; position: relative;\n }\n .sample-hist .sh-fill {\n height: 100%;\n transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .sample-hist .sh-pct {\n width: 80px; font-family: 'JetBrains Mono', monospace;\n font-size: 11.5px; color: var(--muted);\n }\n\n /* Position playground (Stage 04) */\n .pos-demo-row {\n display: flex; gap: 12px; align-items: center;\n padding: 4px 0;\n }\n .pos-demo-label {\n width: 130px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 12px;\n color: var(--ink);\n }\n\n /* Residual on/off demo (Stage 07) */\n .res-demo {\n display: grid;\n grid-template-columns: 60px 1fr 80px;\n gap: 8px;\n align-items: center;\n padding: 3px 0;\n font-family: 'JetBrains Mono', monospace;\n font-size: 11.5px;\n }\n .res-demo .layer-name { color: var(--muted); text-align: right; }\n .res-demo .bar-track {\n height: 18px;\n background: var(--paper-3);\n border: 1px solid var(--ink);\n overflow: hidden;\n }\n .res-demo .bar-fill {\n height: 100%;\n background: var(--ink);\n transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s;\n }\n .res-demo.off .bar-fill { background: var(--wine); }\n .res-demo .value { font-family: monospace; font-size: 11.5px; color: var(--ink); }\n .res-demo.off .value { color: var(--wine); font-weight: 700; }\n .res-toggle-row {\n display: flex; gap: 0; margin: 10px 0;\n border: 1px solid var(--ink);\n width: max-content;\n }\n .res-toggle-row button {\n background: var(--paper);\n border: 0;\n padding: 8px 14px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n font-weight: 700;\n cursor: pointer;\n color: var(--ink);\n }\n .res-toggle-row button.active {\n background: var(--ink);\n color: var(--paper);\n }\n .res-toggle-row button:not(:last-child) {\n border-right: 1px solid var(--ink);\n }\n\n /* ============================================================\n REAL-MODE — small status chip + big hero button\n ============================================================ */\n /* Small chip in the top status bar */\n .rm-chip {\n display: flex; align-items: center; gap: 8px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n font-weight: 700;\n color: var(--paper);\n border-left: 1px solid rgba(241,230,204,0.2);\n padding-left: 16px;\n white-space: nowrap;\n }\n .rm-chip .dot {\n display: inline-block; width: 7px; height: 7px;\n border-radius: 50%;\n background: var(--paper); opacity: 0.45;\n }\n body.real-mode .rm-chip .dot {\n background: var(--green);\n opacity: 1;\n box-shadow: 0 0 8px var(--green);\n animation: rmchip 1.6s ease-in-out infinite;\n }\n body.rm-loading .rm-chip .dot {\n background: var(--yellow);\n opacity: 1;\n animation: rmchip 0.7s ease-in-out infinite;\n }\n @keyframes rmchip { 50% { opacity: 0.5; } }\n .rm-chip .rm-c-on, .rm-chip .rm-c-load { display: none; }\n body.real-mode .rm-chip .rm-c-off,\n body.real-mode .rm-chip .rm-c-load { display: none; }\n body.real-mode .rm-chip .rm-c-on { display: inline; }\n body.rm-loading .rm-chip .rm-c-off,\n body.rm-loading .rm-chip .rm-c-on { display: none; }\n body.rm-loading .rm-chip .rm-c-load{ display: inline; }\n\n /* ── HERO BUTTON ────────────────────────────────────── */\n .hero-real-cta { margin: 34px auto 0; max-width: 580px; }\n .hero-real-btn {\n width: 100%;\n display: flex; gap: 18px; align-items: center;\n background: var(--paper);\n border: 1.5px solid var(--ink);\n box-shadow: 6px 6px 0 var(--ink);\n padding: 18px 24px;\n cursor: pointer; text-align: left;\n font-family: 'JetBrains Mono', monospace;\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),\n box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),\n background 0.25s;\n position: relative; overflow: hidden;\n }\n .hero-real-btn:not([disabled]):hover {\n transform: translate(-2px, -2px);\n box-shadow: 9px 9px 0 var(--ink);\n background: var(--paper-2);\n }\n .hero-real-btn:not([disabled]):active {\n transform: translate(2px, 2px);\n box-shadow: 2px 2px 0 var(--ink);\n }\n .hero-real-btn[disabled] { cursor: progress; }\n\n .hero-real-btn .brb-icon {\n width: 60px; height: 60px;\n flex-shrink: 0;\n background: var(--brick);\n color: var(--paper);\n border: 1px solid var(--ink);\n display: flex; align-items: center; justify-content: center;\n font-size: 28px;\n font-weight: 700;\n position: relative;\n transition: background 0.3s;\n }\n .hero-real-btn .brb-icon-inner {\n display: inline-block;\n transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .hero-real-btn:hover .brb-icon-inner { transform: scale(1.18) rotate(-10deg); }\n\n .hero-real-btn .brb-pulse {\n position: absolute; inset: -5px;\n border: 1.5px solid var(--ochre);\n opacity: 0; pointer-events: none;\n }\n .hero-real-btn.is-loading .brb-icon { background: var(--ochre); }\n .hero-real-btn.is-loading .brb-pulse {\n opacity: 1; animation: brbpulse 1.5s ease-out infinite;\n }\n .hero-real-btn.is-loading .brb-icon-inner {\n animation: brbspin 1.2s linear infinite;\n }\n @keyframes brbpulse {\n 0% { transform: scale(0.92); opacity: 0.9; }\n 100% { transform: scale(1.6); opacity: 0; }\n }\n @keyframes brbspin { to { transform: rotate(360deg); } }\n .hero-real-btn.is-on .brb-icon { background: var(--forest); }\n .hero-real-btn.is-on .brb-icon-inner {\n animation: brbmild 2.4s ease-in-out infinite;\n }\n @keyframes brbmild { 50% { transform: scale(1.12); } }\n\n .hero-real-btn .brb-body { flex: 1; min-width: 0; }\n .hero-real-btn .brb-content { display: none; }\n .hero-real-btn .brb-c-off { display: block; }\n .hero-real-btn.is-loading .brb-c-off,\n .hero-real-btn.is-loading .brb-c-on { display: none; }\n .hero-real-btn.is-loading .brb-c-load { display: block; }\n .hero-real-btn.is-on .brb-c-off,\n .hero-real-btn.is-on .brb-c-load { display: none; }\n .hero-real-btn.is-on .brb-c-on { display: block; }\n\n .brb-title {\n font-size: 14px; letter-spacing: 0.12em;\n font-weight: 700; color: var(--ink);\n margin-bottom: 5px; line-height: 1.2;\n }\n .hero-real-btn.is-on .brb-title { color: var(--forest); }\n .brb-sub {\n font-size: 12px; color: var(--muted);\n font-family: 'Karla', sans-serif;\n line-height: 1.45;\n }\n\n .brb-progress {\n height: 7px;\n background: var(--paper-3);\n border: 1px solid var(--ink);\n margin: 7px 0;\n position: relative; overflow: hidden;\n }\n .brb-progress-fill {\n height: 100%; background: var(--brick);\n width: 0%; transition: width 0.3s ease;\n position: relative;\n }\n .brb-progress-fill::after {\n content: \"\"; position: absolute; inset: 0;\n background: linear-gradient(90deg, transparent, rgba(241,230,204,0.55), transparent);\n animation: brbshimmer 1.4s linear infinite;\n }\n @keyframes brbshimmer {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n }\n\n .hero-real-hint {\n text-align: center;\n margin-top: 16px;\n font-family: 'Karla', sans-serif;\n font-size: 13px;\n color: var(--muted);\n font-style: italic;\n max-width: 560px;\n margin-left: auto; margin-right: auto;\n line-height: 1.55;\n }\n .hero-real-hint strong { color: var(--brick); font-style: normal; font-weight: 700; }\n\n /* Error banner (shown only on load failure) */\n .rm-banner {\n display: none;\n background: var(--wine); color: var(--paper);\n padding: 14px 0;\n font-family: 'JetBrains Mono', monospace;\n font-size: 13px;\n border-bottom: 2px solid var(--ink);\n position: sticky; top: 33px; z-index: 99;\n }\n .rm-banner.visible { display: block; }\n .rm-banner .container {\n display: flex; gap: 16px; align-items: center; flex-wrap: wrap;\n }\n\n /* \"● REAL\" tag */\n .real-tag {\n display: inline-block;\n background: var(--brick); color: var(--paper);\n padding: 2px 7px; margin-left: 8px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 9.5px; font-weight: 700;\n letter-spacing: 0.14em;\n vertical-align: middle;\n }\n .real-tag::before { content: \"● REAL\"; }\n\n body.real-mode .tile-title .badge:not(.brick):not(.ochre):not(.forest) {\n background: var(--brick);\n }\n\n /* Inverse of rm-only: hide in real mode */\n body.real-mode .rm-hide { display: none !important; }\n\n /* Visual mode badges (illustrative / real) */\n .mode-badge {\n display: inline-block;\n padding: 3px 10px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.14em;\n vertical-align: middle;\n border: 1px solid;\n text-transform: uppercase;\n margin-left: 10px;\n }\n .mode-illust {\n background: transparent;\n color: var(--muted);\n border-color: var(--muted);\n }\n .mode-real {\n background: var(--brick);\n color: var(--paper);\n border-color: var(--brick);\n box-shadow: 0 0 12px rgba(138, 47, 21, 0.3);\n }\n\n /* Real-mode visual cue: input field gets brick focus border */\n body.real-mode .rm-input:not(:focus) {\n border-color: var(--brick);\n border-width: 1.5px;\n }\n body.real-mode #genPromptInput {\n border-color: var(--brick);\n border-width: 1.5px;\n }\n\n /* ── REAL-MODE ONLY interactive controls ───────────────── */\n .rm-only { display: none !important; }\n body.real-mode .rm-only { display: block !important; }\n body.real-mode .rm-only.rm-flex { display: flex !important; }\n body.real-mode .rm-only.rm-inline { display: inline-block !important; }\n\n /* Chip buttons (small clickable tags for layer/head/query pickers) */\n .chip-group { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }\n .chip {\n background: var(--paper);\n border: 1px solid var(--ink);\n padding: 6px 11px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n color: var(--ink);\n cursor: pointer;\n letter-spacing: 0.04em;\n transition: all 0.12s;\n min-width: 30px;\n text-align: center;\n }\n .chip:hover { background: var(--paper-2); }\n .chip.active {\n background: var(--ink);\n color: var(--paper);\n border-color: var(--ink);\n }\n .chip.active.brick-active {\n background: var(--brick);\n border-color: var(--brick);\n }\n\n /* Text inputs in playgrounds */\n .rm-input {\n padding: 10px 14px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 14px;\n background: var(--paper);\n border: 1px solid var(--ink);\n color: var(--ink);\n border-radius: 0;\n outline: none;\n transition: border-color 0.15s;\n }\n .rm-input:focus {\n border-color: var(--brick);\n box-shadow: inset 0 0 0 1px var(--brick);\n }\n .rm-input::placeholder { color: var(--muted); }\n\n /* Cosine similarity result bar */\n .cos-result {\n display: flex; align-items: baseline; gap: 14px;\n margin-top: 14px;\n }\n .cos-result .cos-val {\n font-family: 'JetBrains Mono', monospace;\n font-size: 32px; font-weight: 700;\n color: var(--brick);\n }\n .cos-result .cos-meta {\n font-family: 'Newsreader', Georgia, serif;\n font-style: italic;\n color: var(--ink-2);\n font-size: 15px;\n }\n .cos-bar {\n height: 16px;\n background: var(--paper-3);\n border: 1px solid var(--ink);\n margin-top: 10px;\n position: relative;\n }\n .cos-bar .center {\n position: absolute; left: 50%;\n top: -4px; bottom: -4px;\n width: 1px;\n background: var(--ink);\n opacity: 0.55;\n }\n .cos-bar .fill {\n position: absolute; top: 0; bottom: 0;\n background: var(--brick);\n transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .cos-bar.neg .fill { background: var(--wine); }\n .cos-legend {\n display: flex; justify-content: space-between;\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px; color: var(--muted);\n margin-top: 4px;\n }\n\n /* Live attention display */\n .live-attn-meta {\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n color: var(--brick);\n margin-bottom: 12px;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n font-weight: 700;\n }\n\n /* Small loading state for async computations */\n .rm-busy {\n opacity: 0.5; pointer-events: none;\n }\n\n /* ============================================================\n MASTER ARCHITECTURE SVG + STICKY MINIMAP\n ============================================================ */\n .arch-section {\n border-bottom: 1px solid var(--rule);\n padding: 50px 0 70px;\n }\n .arch-section .label-row {\n text-align: center;\n margin-bottom: 18px;\n }\n .arch-section h3 {\n font-family: 'Newsreader', Georgia, serif;\n font-weight: 500;\n font-style: italic;\n font-size: 30px;\n margin: 6px 0 8px;\n color: var(--ink);\n }\n .arch-section .arch-subtitle {\n font-family: 'Karla', sans-serif;\n color: var(--ink-2);\n font-size: 15px;\n max-width: 580px;\n margin: 0 auto;\n }\n .arch-hero {\n max-width: 920px;\n margin: 30px auto 0;\n padding: 24px 32px;\n background: var(--paper);\n border: 1px solid var(--ink);\n }\n\n /* SVG core styling */\n .arch-svg { width: 100%; height: auto; display: block; color: var(--ink); }\n .arch-svg rect,\n .arch-svg circle,\n .arch-svg line,\n .arch-svg path {\n fill: none;\n stroke: var(--ink);\n stroke-width: 1.3;\n transition: stroke 0.3s, fill 0.3s, stroke-width 0.3s;\n }\n .arch-svg .arch-outer {\n stroke-dasharray: 6 3;\n stroke-width: 0.9;\n }\n .arch-svg .arrowmarker { fill: var(--ink); stroke: none; }\n .arch-svg .dashed {\n stroke-dasharray: 4 4;\n stroke-width: 1;\n }\n .arch-svg text {\n fill: var(--ink);\n stroke: none;\n font-family: 'JetBrains Mono', monospace;\n transition: fill 0.3s;\n }\n .arch-svg .arch-title-svg {\n font-size: 11px; font-weight: 700; letter-spacing: 2px;\n }\n .arch-svg .arch-lbl {\n font-size: 11px; font-weight: 700; letter-spacing: 0.5px;\n }\n .arch-svg .arch-micro {\n font-size: 9.5px; font-weight: 700;\n }\n .arch-svg .arch-badge {\n font-size: 9px; font-weight: 700;\n fill: var(--muted);\n letter-spacing: 0.5px;\n }\n .arch-svg .arch-annot {\n font-size: 9px; font-weight: 700;\n fill: var(--muted);\n letter-spacing: 1.2px;\n }\n\n /* ACTIVE STATE — highlights the stage you're reading */\n .arch-svg .arch-stage.arch-active rect,\n .arch-svg .arch-stage.arch-active circle {\n stroke: var(--brick);\n stroke-width: 2.2;\n fill: rgba(138, 47, 21, 0.10);\n }\n .arch-svg .arch-stage.arch-active line,\n .arch-svg .arch-stage.arch-active path:not(.dashed) {\n stroke: var(--brick);\n stroke-width: 2.2;\n }\n .arch-svg .arch-stage.arch-active text {\n fill: var(--brick);\n font-weight: 800;\n }\n .arch-svg .arch-stage.arch-active .arch-badge {\n fill: var(--brick);\n }\n\n /* MINIMAP — fixed sidebar on wide screens */\n .minimap {\n position: fixed;\n top: 84px;\n right: 20px;\n width: 440px;\n max-height: calc(100vh - 110px);\n z-index: 50;\n background: var(--paper);\n border: 1px solid var(--ink);\n padding: 16px 18px 12px;\n box-shadow: 6px 6px 0 var(--ink);\n opacity: 0;\n transform: translateX(20px);\n transition: opacity 0.4s, transform 0.4s;\n pointer-events: none;\n overflow: hidden;\n }\n .minimap.visible {\n opacity: 1;\n transform: translateX(0);\n pointer-events: auto;\n }\n .minimap .mini-title {\n font-family: 'JetBrains Mono', monospace;\n font-size: 10.5px;\n letter-spacing: 0.18em;\n color: var(--ink);\n text-transform: uppercase;\n font-weight: 700;\n text-align: center;\n margin-bottom: 10px;\n padding-bottom: 8px;\n border-bottom: 1px solid var(--rule-soft);\n }\n /* In mini-map, hide annotations / loop label to reduce clutter at small scale,\n but keep stage labels & badges readable */\n .minimap .arch-svg .arch-annot { display: none; }\n .minimap #archMini { max-height: calc(100vh - 160px); overflow-y: auto; }\n .minimap #archMini::-webkit-scrollbar { width: 4px; }\n .minimap #archMini::-webkit-scrollbar-thumb { background: var(--ink); }\n\n @media (max-width: 1500px) {\n .minimap { display: none; }\n }\n @media (min-width: 1500px) {\n .container { padding-right: 490px; }\n /* don't push fixed-width chrome / master diagram over the minimap.\n (minimap is hidden when arch-section is in view, so it can use full width) */\n header.hero .container,\n .status-bar .container,\n .sub-header .container,\n .toc .container,\n .arch-section .container,\n footer .container {\n padding-right: 28px;\n }\n }\n","children",[],[178],"e092db24-28b9-40bd-a1f9-157d5761fc5f","script.js","7c136344-68b8-11f1-bde2-1607ee4eb77e",13,["D",1781527698948],"\n// ============================================================\n// REAL-MODE ENGINE — GPT-2 in the browser via transformers.js\n// ============================================================\nconst PROMPT_TEXT = \"The capital of France is\";\nconst REAL = {\n active: false,\n loading: false,\n loaded: false,\n data: null,\n illust: null\n};\n\nfunction snapshotIllustrative() {\n if (REAL.illust) return;\n REAL.illust = {\n baseLogits: JSON.parse(JSON.stringify(baseLogits)),\n attnTokens: JSON.parse(JSON.stringify(attnTokens)),\n continuation: continuation.slice(),\n logitsPreHTML: document.getElementById('logitsPre')?.innerHTML,\n embVecs: {\n 'emb-the': document.getElementById('emb-the')?.innerHTML,\n 'emb-cap': document.getElementById('emb-cap')?.innerHTML,\n 'emb-of': document.getElementById('emb-of')?.innerHTML,\n 'emb-france': document.getElementById('emb-france')?.innerHTML,\n 'emb-is': document.getElementById('emb-is')?.innerHTML,\n }\n };\n}\n\n// ── HERO BUTTON & CHIP STATE MANAGEMENT ────────────────────\nfunction setRMState(state) {\n // state: 'off' | 'loading' | 'on'\n const btn = document.getElementById('heroRealBtn');\n const body = document.body;\n if (!btn) return;\n btn.classList.toggle('is-loading', state === 'loading');\n btn.classList.toggle('is-on', state === 'on');\n btn.disabled = (state === 'loading');\n body.classList.toggle('real-mode', state === 'on');\n body.classList.toggle('rm-loading', state === 'loading');\n}\nfunction setRMProgress(pct, msg) {\n const fill = document.getElementById('brbProgFill');\n const m = document.getElementById('brbProgMsg');\n const tt = document.getElementById('brbTitleLoad');\n if (fill) fill.style.width = Math.round(pct) + '%';\n if (m && msg) m.textContent = msg;\n if (tt) tt.textContent = pct < 100 ? `DOWNLOADING ${Math.round(pct)}%` : 'ALMOST THERE…';\n}\nfunction bannerError(text) {\n const banner = document.getElementById('rmBanner');\n if (!banner) return;\n banner.classList.add('visible');\n banner.querySelector('.container').innerHTML =\n `Couldn't load GPT-2: ${text} — staying on illustrative values.`;\n setTimeout(() => banner.classList.remove('visible'), 6000);\n}\n\n// ── LOAD MODEL + RUN INFERENCE ─────────────────────────────\nasync function loadRealModel() {\n if (REAL.loaded || REAL.loading) return;\n REAL.loading = true;\n setRMState('loading');\n setRMProgress(2, 'initialising transformers.js');\n\n if (!window.transformers) {\n await new Promise(res => window.addEventListener('transformers-ready', res, { once: true }));\n }\n const { AutoTokenizer, AutoModelForCausalLM, Tensor } = window.transformers;\n\n try {\n setRMProgress(5, 'downloading tokenizer');\n const tokenizer = await AutoTokenizer.from_pretrained('Xenova/gpt2', {\n progress_callback: (p) => {\n if (p.status === 'progress') setRMProgress(5 + (p.progress || 0) * 0.05, 'downloading tokenizer');\n }\n });\n\n setRMProgress(10, 'downloading GPT-2 weights (~250 MB)');\n const model = await AutoModelForCausalLM.from_pretrained('Xenova/gpt2', {\n quantized: true,\n progress_callback: (p) => {\n if (p.status === 'progress') {\n const pct = 10 + (p.progress || 0) * 0.78;\n setRMProgress(pct, 'downloading weights · cached after first load');\n }\n }\n });\n\n setRMProgress(90, 'running forward pass');\n // Tokenize\n const enc = await tokenizer(PROMPT_TEXT, { return_tensor: false });\n const ids = enc.input_ids;\n const tokenStrings = ids.map(id => tokenizer.decode([id]));\n\n const idsBigInt = BigInt64Array.from(ids.map(i => BigInt(i)));\n const inputIds = new Tensor('int64', idsBigInt, [1, ids.length]);\n const attMask = new Tensor('int64', BigInt64Array.from(ids.map(() => 1n)), [1, ids.length]);\n\n // Forward pass — request attentions + hidden states if supported\n let out;\n let hasAttn = false, hasHidden = false;\n try {\n out = await model({\n input_ids: inputIds, attention_mask: attMask,\n output_attentions: true, output_hidden_states: true\n });\n hasAttn = !!(out.attentions && out.attentions.length);\n hasHidden = !!(out.hidden_states && out.hidden_states.length);\n } catch (_) {\n out = await model({ input_ids: inputIds, attention_mask: attMask });\n }\n\n const logitsTensor = out.logits;\n const [, S, V] = logitsTensor.dims;\n const start = (S - 1) * V;\n const lastLogits = Array.from(logitsTensor.data.slice(start, start + V));\n\n const top10 = topKLogits(lastLogits, 10).map(t => ({\n id: t.id, tok: tokenizer.decode([t.id]), logit: t.logit\n }));\n\n // Attention: build per-layer { perHead: [[query][key]] × heads, avg: [[query][key]] }\n let realAttn = null; // averaged last-layer, query=last token (for the static bars)\n let realAttnByLayer = null; // all-layer, all-head detail for explorer\n if (hasAttn) {\n realAttnByLayer = out.attentions.map(attnTensor => {\n const dims = attnTensor.dims; // [1, H, S, S]\n const H = dims[1], SS = dims[2];\n const flat = attnTensor.data;\n const perHead = [];\n const avg = [];\n for (let q = 0; q < SS; q++) avg.push(new Array(SS).fill(0));\n for (let h = 0; h < H; h++) {\n const head = [];\n for (let q = 0; q < SS; q++) {\n const row = [];\n for (let k = 0; k < SS; k++) {\n const v = flat[h * SS * SS + q * SS + k];\n row.push(v);\n avg[q][k] += v / H;\n }\n head.push(row);\n }\n perHead.push(head);\n }\n return { perHead, avg };\n });\n // For the static \"·is\" attention bars in Stage 5, use last layer avg, row = last token\n const last = realAttnByLayer[realAttnByLayer.length - 1];\n realAttn = last.avg[last.avg.length - 1];\n }\n\n // Embeddings: first hidden state (after embed+pos), first 32 dims of each token\n let realEmbeds = null;\n if (hasHidden && out.hidden_states.length > 0) {\n const h0 = out.hidden_states[0]; // [1, seq, d_model=768]\n const [, sH, D] = h0.dims;\n const data = h0.data;\n realEmbeds = [];\n for (let i = 0; i < sH; i++) {\n const tokVec = [];\n // sample 32 dims at regular intervals\n const stride = Math.max(1, Math.floor(D / 32));\n for (let k = 0; k < 32 && k * stride < D; k++) {\n tokVec.push(data[i * D + k * stride]);\n }\n realEmbeds.push(tokVec);\n }\n }\n\n setRMProgress(95, 'generating continuation');\n const continuationTokens = [];\n let curIds = ids.slice();\n for (let i = 0; i < 10; i++) {\n const cur = new Tensor('int64',\n BigInt64Array.from(curIds.map(x => BigInt(x))),\n [1, curIds.length]);\n const m = new Tensor('int64',\n BigInt64Array.from(curIds.map(() => 1n)),\n [1, curIds.length]);\n const o = await model({ input_ids: cur, attention_mask: m });\n const lT = o.logits;\n const [, sS, vV] = lT.dims;\n const lastStart = (sS - 1) * vV;\n const last = lT.data.slice(lastStart, lastStart + vV);\n let bestIdx = 0, bestVal = -Infinity;\n for (let j = 0; j < last.length; j++) {\n if (last[j] > bestVal) { bestVal = last[j]; bestIdx = j; }\n }\n curIds.push(bestIdx);\n continuationTokens.push(tokenizer.decode([bestIdx]));\n if (continuationTokens.join('').trim().endsWith('.') && i >= 4) break;\n }\n\n setRMProgress(100, 'done');\n\n // Shift logits so the displayed top is ~10.5 (matches the illustrative scale\n // and looks natural). Softmax is shift-invariant so probabilities are unaffected.\n const maxLogit = Math.max(...top10.map(t => t.logit));\n const displayOffset = 10.5 - maxLogit;\n const top10Display = top10.map(t => ({ ...t, logit: t.logit + displayOffset }));\n\n REAL.data = {\n tokenIds: ids,\n tokenStrings,\n topLogits: top10Display,\n topLogitsRaw: top10,\n continuation: continuationTokens,\n attnFromIs: realAttn,\n attnByLayer: realAttnByLayer,\n embeddings: realEmbeds\n };\n REAL.tokenizer = tokenizer;\n REAL.model = model;\n REAL.Tensor = Tensor;\n REAL.loaded = true;\n REAL.loading = false;\n setRMState('on');\n REAL.active = true;\n snapshotIllustrative();\n applyReal();\n try { localStorage.setItem('rm-active', '1'); } catch (e) {}\n } catch (err) {\n console.error('[real-mode] load failed:', err);\n REAL.loading = false;\n setRMState('off');\n bannerError(err.message || String(err));\n }\n}\n\nfunction topKLogits(arr, k) {\n const indexed = Array.from(arr, (v, i) => ({ id: i, logit: v }));\n indexed.sort((a, b) => b.logit - a.logit);\n return indexed.slice(0, k);\n}\n\n// ── APPLY REAL DATA TO THE PAGE ────────────────────────────\nfunction applyReal() {\n if (!REAL.data) return;\n document.body.classList.add('real-mode');\n\n // 1. Top logits → baseLogits + static pre\n const topReal = REAL.data.topLogits.slice(0, 7);\n baseLogits.length = 0;\n topReal.forEach(t => baseLogits.push({\n tok: t.tok.replace(/^ /, '·'),\n logit: +t.logit.toFixed(2)\n }));\n const tempEl = document.getElementById('tempSlider');\n const T = tempEl ? tempEl.value / 100 : 1.0;\n renderProbs(T);\n // Refresh the top-N display using the unified helper (uses real data when REAL.active)\n const activeNBtn = document.querySelector('#topNChips .chip.active');\n const currentN = activeNBtn ? +activeNBtn.textContent.trim() : 7;\n setTopN(currentN);\n ensureRealTag('logitsTitle');\n\n // 2. Generation continuation\n continuation.length = 0;\n REAL.data.continuation.forEach(t => continuation.push(t));\n resetGen();\n\n // 3. Real attention from \"·is\" — replace the bars (only if we got it)\n if (REAL.data.attnFromIs && REAL.data.attnFromIs.length === attnTokens.length) {\n for (let i = 0; i < attnTokens.length; i++) {\n attnTokens[i].score = +(REAL.data.attnFromIs[i]).toFixed(3);\n attnTokens[i].high = attnTokens[i].score >= 0.20;\n }\n renderAttnRows(true);\n const attnPanels = document.querySelectorAll('#attnRows');\n attnPanels.forEach(p => {\n const tile = p.closest('.tile');\n if (tile) ensureRealTagOnTile(tile);\n });\n }\n // (If we don't have real attention, leave the static bars as illustrative —\n // and Stage 5 picks up the inline \"illustrative\" badge via the note below.)\n\n // 4. Real embeddings → vector bars (only if available)\n if (REAL.data.embeddings) {\n const ids = ['emb-the','emb-cap','emb-of','emb-france','emb-is'];\n let mn = Infinity, mx = -Infinity;\n REAL.data.embeddings.forEach(v => v.forEach(x => { if (x < mn) mn = x; if (x > mx) mx = x; }));\n const range = (mx - mn) || 1;\n ids.forEach((id, i) => {\n const el = document.getElementById(id);\n if (!el) return;\n const vec = REAL.data.embeddings[i] || [];\n el.innerHTML = '';\n vec.forEach(v => {\n const norm = (v - mn) / range;\n const cell = document.createElement('div');\n cell.className = 'vec-cell';\n cell.style.background = colorForValue(norm);\n cell.style.height = (8 + norm * 22) + 'px';\n el.appendChild(cell);\n });\n });\n }\n // (If we don't have real embeddings, the bars stay illustrative — the\n // cosine-similarity playground below uses MiniLM and gives real numbers.)\n\n // 5. Note callout swap\n document.getElementById('noteIllust').style.display = 'none';\n document.getElementById('noteReal').style.display = 'inline';\n\n // 6. Initialize interactive panels (buildAttnExplorer shows \"unavailable\" note if no data)\n buildAttnExplorer();\n liveTokenize(); // populate tokenizer playground with default text\n // Don't auto-run cosine sim — it'd trigger MiniLM download on activation.\n // Let user click Compare when they want.\n}\n\n// =========================================================\n// INTERACTIVE PANELS (real-mode only)\n// =========================================================\n\n// ── Live tokenizer ────────────────────────────────────────\nasync function liveTokenize() {\n if (!REAL.tokenizer) return;\n const inp = document.getElementById('liveTokInput');\n const out = document.getElementById('liveTokOutput');\n if (!inp || !out) return;\n const text = inp.value;\n if (!text) { out.innerHTML = ''; return; }\n try {\n const enc = await REAL.tokenizer(text, { return_tensor: false });\n const ids = enc.input_ids;\n const tokens = ids.map(id => ({\n id, text: REAL.tokenizer.decode([id])\n }));\n out.innerHTML = `\n

\n Tokens (${tokens.length} · ratio: ${(text.length / Math.max(1, tokens.length)).toFixed(2)} chars per token):\n

\n ${tokens.map(t => {\n const visText = t.text.replace(/ /g, '·').replace(/\\n/g, '⏎');\n return `

${escapeHtml(visText)}id ${t.id}

`;\n }).join('')}\n

\n `;\n } catch (e) {\n out.innerHTML = `

Error: ${e.message}

`;\n }\n}\nfunction escapeHtml(s) {\n return s.replace(/&/g, '&').replace(//g, '>').replace(/\"/g, '"');\n}\n// Debounced live-tokenize on input\nlet _tokDebounce = null;\ndocument.addEventListener('input', (e) => {\n if (e.target && e.target.id === 'liveTokInput') {\n if (_tokDebounce) clearTimeout(_tokDebounce);\n _tokDebounce = setTimeout(() => liveTokenize(), 250);\n }\n});\n\n// ── Cosine similarity playground (uses MiniLM, loaded lazily) ──\n// GPT-2's ONNX export doesn't expose hidden states, so we use a\n// proper sentence-embedding model just for the similarity demo.\nlet EMB_MODEL = null;\nlet EMB_TOKENIZER = null;\nlet EMB_LOADING = false;\nasync function ensureEmbedder(onProgress) {\n if (EMB_MODEL) return true;\n if (EMB_LOADING) {\n while (EMB_LOADING) await new Promise(r => setTimeout(r, 200));\n return !!EMB_MODEL;\n }\n EMB_LOADING = true;\n try {\n const { AutoTokenizer, AutoModel } = window.transformers;\n if (!AutoModel) throw new Error('AutoModel not exposed by transformers.js — reload page');\n EMB_TOKENIZER = await AutoTokenizer.from_pretrained('Xenova/all-MiniLM-L6-v2', {\n progress_callback: onProgress\n });\n EMB_MODEL = await AutoModel.from_pretrained('Xenova/all-MiniLM-L6-v2', {\n quantized: true,\n progress_callback: onProgress\n });\n return true;\n } catch (e) {\n console.error('[embedder] load failed', e);\n return false;\n } finally {\n EMB_LOADING = false;\n }\n}\n\n// Get the full per-token hidden state matrix (not mean-pooled) for any text\n// Returns: { tokens: string[], vectors: number[][] } where vectors[i] has length 384\nasync function getHiddenStates(text) {\n if (!text) return null;\n const ok = await ensureEmbedder();\n if (!ok) return null;\n const enc = await EMB_TOKENIZER(text, { return_tensor: false });\n const ids = enc.input_ids;\n const mask = enc.attention_mask || ids.map(() => 1);\n const T = REAL.Tensor;\n const inputIds = new T('int64', BigInt64Array.from(ids.map(i => BigInt(i))), [1, ids.length]);\n const attMask = new T('int64', BigInt64Array.from(mask.map(i => BigInt(i))), [1, ids.length]);\n const out = await EMB_MODEL({ input_ids: inputIds, attention_mask: attMask });\n const hs = out.last_hidden_state;\n if (!hs) return null;\n const [, S, D] = hs.dims;\n const tokens = ids.map(id => EMB_TOKENIZER.decode([id]));\n const vectors = [];\n for (let s = 0; s < S; s++) {\n const v = new Array(D);\n for (let d = 0; d < D; d++) v[d] = hs.data[s * D + d];\n vectors.push(v);\n }\n return { tokens, vectors, mask };\n}\nasync function getEmbeddingFor(text) {\n const result = await getHiddenStates(text);\n if (!result) return null;\n const D = result.vectors[0].length;\n // Mean-pool across tokens (sentence embedding)\n const avg = new Float32Array(D);\n for (const v of result.vectors) {\n for (let d = 0; d < D; d++) avg[d] += v[d];\n }\n for (let d = 0; d < D; d++) avg[d] /= result.vectors.length;\n return avg;\n}\nfunction cosineDot(a, b) {\n let dot = 0, na = 0, nb = 0;\n for (let i = 0; i < a.length; i++) {\n dot += a[i] * b[i];\n na += a[i] * a[i];\n nb += b[i] * b[i];\n }\n return dot / (Math.sqrt(na) * Math.sqrt(nb) + 1e-9);\n}\nasync function liveCosineSim() {\n const a = document.getElementById('cosA')?.value;\n const b = document.getElementById('cosB')?.value;\n const out = document.getElementById('cosOutput');\n if (!out || !REAL.model) return;\n out.classList.add('rm-busy');\n if (!EMB_MODEL) {\n out.innerHTML = '

First time only · loading a small sentence-embedding model (~25 MB)…

';\n }\n try {\n const [va, vb] = await Promise.all([getEmbeddingFor(a), getEmbeddingFor(b)]);\n if (!va || !vb) {\n out.innerHTML = '

Please enter both words.

';\n return;\n }\n const sim = cosineDot(va, vb);\n const negative = sim < 0;\n const widthPct = Math.abs(sim) * 50;\n const posStyle = sim >= 0\n ? `left: 50%; width: ${widthPct}%;`\n : `right: 50%; width: ${widthPct}%;`;\n out.innerHTML = `\n

${sim.toFixed(3)}

cosine( ${escapeHtml(a)} , ${escapeHtml(b)} )

\n −1 opposite\n 0 unrelated\n +1 identical\n

\n `;\n } catch (e) {\n out.innerHTML = `

Error: ${e.message}

`;\n } finally {\n out.classList.remove('rm-busy');\n }\n}\n\n// ── Live Attention Playground ─────────────────────────────\n// Computes real self-attention in JS using MiniLM hidden states for any\n// user-typed text. The math is identical to what runs inside transformer\n// layers. We use raw embeddings as Q and K (instead of learned per-layer\n// projections) because no in-browser model exposes those weights yet.\nconst attnPlayState = { queryIdx: 0, hiddenStates: null, tokens: null };\n\nfunction buildAttnExplorer() {\n // First-time real-mode init: auto-run with the default sentence\n if (attnPlayState.hiddenStates === null) {\n recomputeAttnPlay();\n } else {\n renderAttnPlayTokens();\n renderAttnPlayDisplay();\n }\n}\n\nasync function recomputeAttnPlay() {\n const inp = document.getElementById('attnPlayInput');\n const display = document.getElementById('attnPlayDisplay');\n const tokensEl = document.getElementById('attnPlayTokens');\n if (!inp || !display) return;\n const text = inp.value;\n if (!text || !text.trim()) {\n display.innerHTML = '

Type something above and click Compute.

';\n return;\n }\n if (!EMB_MODEL) {\n display.innerHTML = '

First time only · loading MiniLM (~25 MB)…

';\n } else {\n display.innerHTML = '

computing real attention…

';\n }\n tokensEl.innerHTML = '';\n try {\n const res = await getHiddenStates(text);\n if (!res) {\n display.innerHTML = '

Couldn\\'t compute embeddings.

';\n return;\n }\n attnPlayState.hiddenStates = res.vectors;\n attnPlayState.tokens = res.tokens;\n if (attnPlayState.queryIdx >= res.tokens.length) {\n attnPlayState.queryIdx = Math.min(1, res.tokens.length - 1);\n }\n renderAttnPlayTokens();\n renderAttnPlayDisplay();\n } catch (e) {\n display.innerHTML = `

Error: ${escapeHtml(e.message)}

`;\n }\n}\n\nfunction renderAttnPlayTokens() {\n const tokensEl = document.getElementById('attnPlayTokens');\n if (!tokensEl || !attnPlayState.tokens) return;\n tokensEl.innerHTML = attnPlayState.tokens.map((tok, i) => {\n const lbl = tok.replace(/ /g, '·').replace(/\\n/g, '⏎').replace(/^\\[CLS\\]$/, '[CLS]');\n const active = i === attnPlayState.queryIdx ? ' active brick-active' : '';\n return ``;\n }).join('');\n}\n\nfunction setAttnPlayQuery(i) {\n attnPlayState.queryIdx = i;\n renderAttnPlayTokens();\n renderAttnPlayDisplay();\n}\n\nfunction renderAttnPlayDisplay() {\n const display = document.getElementById('attnPlayDisplay');\n if (!display || !attnPlayState.hiddenStates) return;\n\n const useScale = document.getElementById('attnPlayScale')?.checked ?? true;\n const useMask = document.getElementById('attnPlayMask')?.checked ?? false;\n const tempEl = document.getElementById('attnPlayTemp');\n const tempVal = tempEl ? (tempEl.value / 100) : 1.0;\n const tempLabel = document.getElementById('attnPlayTempVal');\n if (tempLabel) tempLabel.textContent = tempVal.toFixed(2);\n\n const Q = attnPlayState.queryIdx;\n const hs = attnPlayState.hiddenStates;\n const S = hs.length;\n const D = hs[0].length;\n const scale = useScale ? Math.sqrt(D) : 1;\n\n // Compute scores: Q_i · K_j for all j\n const scores = [];\n for (let k = 0; k < S; k++) {\n if (useMask && k > Q) { scores.push(-Infinity); continue; }\n let dot = 0;\n for (let d = 0; d < D; d++) dot += hs[Q][d] * hs[k][d];\n scores.push((dot / scale) / tempVal);\n }\n // softmax\n const finite = scores.filter(s => isFinite(s));\n const maxS = Math.max(...finite);\n const exps = scores.map(s => isFinite(s) ? Math.exp(s - maxS) : 0);\n const sumE = exps.reduce((a, b) => a + b, 0);\n const probs = exps.map(e => sumE > 0 ? e / sumE : 0);\n\n const maxProb = Math.max(...probs) || 1;\n const queryLabel = attnPlayState.tokens[Q].replace(/ /g, '·');\n const maskNote = useMask ? ` · masked positions show ▒` : '';\n display.innerHTML = `\n

query = \"${escapeHtml(queryLabel)}\" · ${useScale ? '√d scaled' : 'unscaled'} · T=${tempVal.toFixed(2)}${maskNote}

\n ${probs.map((p, i) => {\n const blocked = useMask && i > Q;\n const isHigh = p > 0.25;\n const keyLabel = attnPlayState.tokens[i].replace(/ /g, '·');\n const widthPct = blocked ? 0 : Math.max(1.5, (p / maxProb) * 100);\n const scoreText = blocked ? '▒ masked' : (p * 100).toFixed(1) + '%';\n return `

${escapeHtml(keyLabel)}

${scoreText}

`;\n }).join('')}\n `;\n}\n\n// Wire up live controls\ndocument.addEventListener('change', (e) => {\n const t = e.target;\n if (t && (t.id === 'attnPlayScale' || t.id === 'attnPlayMask')) renderAttnPlayDisplay();\n});\ndocument.addEventListener('input', (e) => {\n const t = e.target;\n if (t && t.id === 'attnPlayTemp') renderAttnPlayDisplay();\n});\n\nfunction ensureRealTag(titleId) {\n const t = document.getElementById(titleId);\n if (t && !t.querySelector('.real-tag')) {\n const tag = document.createElement('span'); tag.className = 'real-tag';\n t.appendChild(tag);\n }\n}\nfunction ensureRealTagOnTile(tile) {\n const title = tile.querySelector('.tile-title');\n if (!title || title.querySelector('.real-tag')) return;\n const tag = document.createElement('span'); tag.className = 'real-tag';\n title.appendChild(tag);\n}\nfunction clearRealTags() {\n document.querySelectorAll('.tile-title .real-tag').forEach(t => t.remove());\n}\n\nfunction revertIllustrative() {\n if (!REAL.illust) return;\n REAL.active = false;\n document.body.classList.remove('real-mode');\n\n // logits\n baseLogits.length = 0;\n REAL.illust.baseLogits.forEach(t => baseLogits.push(t));\n const tempEl = document.getElementById('tempSlider');\n const T = tempEl ? tempEl.value / 100 : 1.0;\n renderProbs(T);\n // Refresh top-N block with illustrative data\n const activeNBtn = document.querySelector('#topNChips .chip.active');\n const currentN = activeNBtn ? +activeNBtn.textContent.trim() : 7;\n setTopN(currentN);\n\n // attention\n for (let i = 0; i < attnTokens.length; i++) {\n attnTokens[i].score = REAL.illust.attnTokens[i].score;\n attnTokens[i].high = REAL.illust.attnTokens[i].high;\n }\n renderAttnRows(true);\n\n // embeddings\n Object.entries(REAL.illust.embVecs).forEach(([id, html]) => {\n const el = document.getElementById(id);\n if (el && html) el.innerHTML = html;\n });\n\n // generation\n continuation.length = 0;\n REAL.illust.continuation.forEach(t => continuation.push(t));\n resetGen();\n\n // note\n document.getElementById('noteIllust').style.display = 'inline';\n document.getElementById('noteReal').style.display = 'none';\n\n clearRealTags();\n try { localStorage.removeItem('rm-active'); } catch (e) {}\n}\n\n// ── HOOK UP THE HERO BUTTON ───────────────────────────────\nfunction bindRealButton() {\n const btn = document.getElementById('heroRealBtn');\n if (!btn) return;\n btn.addEventListener('click', async () => {\n if (REAL.loading) return;\n if (REAL.active) {\n setRMState('off');\n revertIllustrative();\n return;\n }\n if (REAL.loaded) {\n REAL.active = true;\n setRMState('on');\n applyReal();\n try { localStorage.setItem('rm-active','1'); } catch(_){}\n return;\n }\n await loadRealModel();\n });\n // Auto-restore\n try {\n if (localStorage.getItem('rm-active') === '1') {\n setTimeout(() => loadRealModel(), 700);\n }\n } catch (e) {}\n}\nbindRealButton();\n\n// =============== UTILITIES ===============\nfunction rand(seed) { return ((Math.sin(seed * 12.9898 + 78.233) * 43758.5453) % 1 + 1) % 1; }\nfunction clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }\n\n// Aged-ink palette mapped to embedding values\nfunction colorForValue(v) {\n v = clamp(v, 0, 1);\n // Gradient from cream → brown → black with subtle warm tone\n if (v < 0.5) {\n const t = v * 2;\n // cream(#d1b984) to brown(#6b5a3f)\n const r = Math.round(209 - t * (209 - 107));\n const g = Math.round(185 - t * (185 - 90));\n const b = Math.round(132 - t * (132 - 63));\n return `rgb(${r},${g},${b})`;\n } else {\n const t = (v - 0.5) * 2;\n // brown(#6b5a3f) to near-black(#1a1612)\n const r = Math.round(107 - t * (107 - 26));\n const g = Math.round(90 - t * (90 - 22));\n const b = Math.round(63 - t * (63 - 18));\n return `rgb(${r},${g},${b})`;\n }\n}\n\n// =============== EMBEDDING BARS ===============\nfunction buildVec(id, seed, dim = 32) {\n const el = document.getElementById(id);\n if (!el) return;\n el.innerHTML = \"\";\n for (let i = 0; i < dim; i++) {\n const cell = document.createElement(\"div\");\n cell.className = \"vec-cell\";\n const v = rand(seed + i * 0.31);\n cell.style.background = colorForValue(v);\n cell.style.height = (8 + v * 22) + \"px\";\n el.appendChild(cell);\n }\n}\nbuildVec(\"emb-the\", 1.1);\nbuildVec(\"emb-cap\", 4.7);\nbuildVec(\"emb-of\", 7.3);\nbuildVec(\"emb-france\", 9.2);\nbuildVec(\"emb-is\", 12.5);\nbuildVec(\"france-tok\", 9.2);\nbuildVec(\"france-pos\", 17.3);\nbuildVec(\"france-sum\", 9.2 + 17.3);\n\n// ===== Multi-word Cosine Matrix (Stage 03) =====\nasync function computeCosineMatrix() {\n const inputs = document.querySelectorAll('#wordInputs input');\n const words = Array.from(inputs).map(i => i.value.trim()).filter(w => w);\n const out = document.getElementById('cosMatrix');\n if (words.length < 2) {\n out.innerHTML = '

Enter at least 2 words.

';\n return;\n }\n out.innerHTML = '

computing embeddings…

';\n try {\n const embeds = await Promise.all(words.map(w => getEmbeddingFor(w)));\n const n = embeds.length;\n if (embeds.some(e => !e)) {\n out.innerHTML = '

Couldn\\'t embed one or more words.

';\n return;\n }\n const matrix = [];\n for (let i = 0; i < n; i++) {\n const row = [];\n for (let j = 0; j < n; j++) row.push(cosineDot(embeds[i], embeds[j]));\n matrix.push(row);\n }\n renderCosineMatrix(words, matrix);\n } catch (e) {\n out.innerHTML = `

Error: ${escapeHtml(e.message)}

`;\n }\n}\n\nfunction renderCosineMatrix(words, matrix) {\n const n = words.length;\n const el = document.getElementById('cosMatrix');\n el.style.gridTemplateColumns = `90px repeat(${n}, 1fr)`;\n let html = '

';\n for (const w of words) html += `

${escapeHtml(w)}

`;\n for (let i = 0; i < n; i++) {\n html += `

${escapeHtml(words[i])}

`;\n for (let j = 0; j < n; j++) {\n const v = matrix[i][j];\n // Normalize 0..1 for color intensity (clamp negative to 0)\n const intensity = Math.max(0, Math.min(1, v));\n const r = 138 + Math.round((1 - intensity) * 100);\n const g = 47 + Math.round((1 - intensity) * 165);\n const b = 21 + Math.round((1 - intensity) * 180);\n const bg = `rgb(${r}, ${g}, ${b})`;\n const textColor = intensity > 0.6 ? 'var(--paper)' : 'var(--ink)';\n html += `

${v.toFixed(2)}

`;\n }\n }\n el.innerHTML = html;\n}\n\n// ===== Sample N Times (Stage 11) =====\nasync function sampleNTimes(n) {\n const T = +document.getElementById('tempSlider').value / 100;\n const probs = softmaxTemp(baseLogits.map(b => b.logit), T);\n const counts = new Array(baseLogits.length).fill(0);\n for (let i = 0; i < n; i++) {\n let r = Math.random(); let cum = 0;\n for (let j = 0; j < probs.length; j++) {\n cum += probs[j];\n if (r <= cum) { counts[j]++; break; }\n }\n }\n const out = document.getElementById('sampleNResults');\n if (!out) return;\n const maxCount = Math.max(...counts) || 1;\n const rowsHtml = baseLogits\n .map((b, i) => ({ tok: b.tok, count: counts[i], expected: (probs[i] * n) }))\n .sort((a, b) => b.count - a.count)\n .filter(r => r.count > 0 || r.expected > 0.5)\n .map((r, idx) => {\n const pct = (r.count / n) * 100;\n const expectedPct = (r.expected / n) * 100;\n const barColor = idx === 0 ? 'var(--brick)' : 'var(--ink)';\n return `

\"${r.tok}\"

${r.count}× (${pct.toFixed(0)}%)

`;\n }).join('');\n out.innerHTML = `

\n ${n} samples · T = ${T.toFixed(2)} · ${(counts.filter(c => c > 0).length)} distinct tokens picked\n

\n ${rowsHtml}\n

`;\n}\n\n// Top-N selector for Stage 10 logits block\nconst ILLUST_TOP15 = [\n { tok: \"·Paris\", logit: 10.5, note: \"← winning\" },\n { tok: \"·a\", logit: 7.8 },\n { tok: \"·home\", logit: 7.0 },\n { tok: \"·one\", logit: 6.3 },\n { tok: \"·the\", logit: 5.9 },\n { tok: \"·also\", logit: 5.5 },\n { tok: \"·France\", logit: 4.3, note: \"← the model 'knows' not to repeat\" },\n { tok: \"·now\", logit: 4.0 },\n { tok: \"·another\", logit: 3.6 },\n { tok: \"·its\", logit: 3.2 },\n { tok: \"·just\", logit: 2.9 },\n { tok: \"·known\", logit: 2.6 },\n { tok: \"·only\", logit: 2.3 },\n { tok: \"·in\", logit: 2.0 },\n { tok: \"·even\", logit: 1.7 }\n];\nfunction setTopN(n) {\n document.querySelectorAll('#topNChips .chip').forEach(c => {\n c.classList.remove('active', 'brick-active');\n });\n const targetBtn = Array.from(document.querySelectorAll('#topNChips .chip')).find(c => c.textContent.trim() == String(n));\n if (targetBtn) { targetBtn.classList.add('active', 'brick-active'); }\n document.getElementById('topNDisplay').textContent = n;\n\n // If we have real data, slice real top-N from REAL.data.topLogits etc.\n // Otherwise use ILLUST_TOP15.\n let src;\n if (REAL.active && REAL.data && REAL.data.topLogits) {\n src = REAL.data.topLogits.map((t, i) => ({\n tok: t.tok.replace(/^ /, '·'),\n logit: +t.logit.toFixed(2),\n note: i === 0 ? \"← winning (real GPT-2)\" : \"\"\n }));\n // Pad with placeholders if user wants more than we have\n while (src.length < n) src.push({ tok: \"...\", logit: 0, note: \"\" });\n } else {\n src = ILLUST_TOP15;\n }\n const shown = src.slice(0, n);\n const lines = shown.map((t, i) => {\n const padTok = (`\"${t.tok}\"`).padEnd(18);\n const cls = i === 0 ? 'b' : 'n';\n const noteSpan = t.note ? ` ${t.note}` : '';\n return `logits[${padTok}] = ${t.logit.toFixed(2)}${noteSpan}`;\n }).join('\\n');\n const remaining = 50257 - n;\n const pre = document.getElementById('logitsPre');\n if (pre) pre.innerHTML = lines + `\\n... (${remaining.toLocaleString()} more)`;\n}\n\n// Residual on/off gradient demo\nfunction renderResidualDemo(withResidual) {\n const layers = [12, 10, 8, 6, 4, 2, 1];\n const el = document.getElementById('resDemoBars');\n if (!el) return;\n el.innerHTML = layers.map(l => {\n // With residual: identity path keeps gradient ≈ 1 (slight wobble)\n // Without: gradient ≈ 0.85^(13-l) per layer multiplicatively\n const val = withResidual\n ? Math.max(0.7, 1 - (12 - l) * 0.025 + (Math.sin(l * 2.1) * 0.05))\n : Math.pow(0.85, 13 - l);\n const pct = Math.round(val * 100);\n const cls = withResidual ? '' : 'off';\n return `

layer ${l}

${val.toFixed(2)} ${withResidual ? '' : (val < 0.05 ? '· lost' : '')}

`;\n }).join('');\n}\nfunction setResidual(on) {\n document.getElementById('resOn').classList.toggle('active', on);\n document.getElementById('resOff').classList.toggle('active', !on);\n renderResidualDemo(on);\n}\n// initial render\nrenderResidualDemo(true);\n\n// Position playground — re-build the position + sum vectors when chip clicked\nfunction setPositionDemo(pos) {\n const chips = document.querySelectorAll('#posChips .chip');\n chips.forEach((c, i) => {\n c.classList.toggle('active', i === pos);\n c.classList.toggle('brick-active', i === pos);\n });\n const numEl = document.getElementById('posDemoNum');\n if (numEl) numEl.textContent = pos;\n // Use a position-dependent seed so the vector visibly changes\n const posSeed = 17.3 + pos * 5.7;\n buildVec(\"france-pos\", posSeed);\n buildVec(\"france-sum\", 9.2 + posSeed);\n}\n\n// =============== DOT PRODUCT ===============\nconst DOT_DIM = 8;\nlet qVecData = [];\nlet kVecData = [];\n\nfunction genVectors() {\n qVecData = []; kVecData = [];\n for (let i = 0; i < DOT_DIM; i++) {\n const base = (Math.random() * 1.6 - 0.6);\n qVecData.push(+base.toFixed(2));\n kVecData.push(+(base * 0.7 + (Math.random() * 0.6 - 0.3)).toFixed(2));\n }\n}\ngenVectors();\n\nfunction renderDotProduct() {\n const q = document.getElementById(\"qvec\");\n const k = document.getElementById(\"kvec\");\n const p = document.getElementById(\"pvec\");\n if (!q || !k || !p) return;\n q.innerHTML = \"\"; k.innerHTML = \"\"; p.innerHTML = \"\";\n\n for (let i = 0; i < DOT_DIM; i++) {\n const qc = document.createElement(\"div\");\n qc.className = \"numcell q\"; qc.id = `qc-${i}`;\n qc.innerHTML = `${i}${qVecData[i].toFixed(2)}`;\n q.appendChild(qc);\n\n const kc = document.createElement(\"div\");\n kc.className = \"numcell k\"; kc.id = `kc-${i}`;\n kc.innerHTML = `${i}${kVecData[i].toFixed(2)}`;\n k.appendChild(kc);\n\n const pc = document.createElement(\"div\");\n pc.className = \"numcell\"; pc.id = `pc-${i}`;\n pc.innerHTML = `${i}—`;\n p.appendChild(pc);\n }\n document.getElementById(\"dotprodRunning\").textContent = \"—\";\n document.getElementById(\"dotprodDisplay\").querySelector(\".calc\").textContent =\n \"Click below to walk through the dot product step by step.\";\n}\nrenderDotProduct();\n\nasync function animateDotProduct() {\n let running = 0;\n const calcEl = document.getElementById(\"dotprodDisplay\").querySelector(\".calc\");\n const runEl = document.getElementById(\"dotprodRunning\");\n const parts = [];\n\n for (let i = 0; i < DOT_DIM; i++) {\n const qc = document.getElementById(`qc-${i}`);\n const kc = document.getElementById(`kc-${i}`);\n const pc = document.getElementById(`pc-${i}`);\n qc.classList.add(\"lit\"); kc.classList.add(\"lit\");\n\n const product = +(qVecData[i] * kVecData[i]).toFixed(2);\n pc.innerHTML = `${i}${product.toFixed(2)}`;\n pc.classList.add(\"product\", \"lit\");\n running += product;\n parts.push(`(${qVecData[i].toFixed(2)}×${kVecData[i].toFixed(2)})`);\n calcEl.innerHTML = parts.join(\" + \");\n runEl.textContent = \"= \" + running.toFixed(2);\n\n await new Promise(r => setTimeout(r, 360));\n qc.classList.remove(\"lit\"); kc.classList.remove(\"lit\"); pc.classList.remove(\"lit\");\n }\n calcEl.innerHTML = parts.join(\" + \") + \" = \" + running.toFixed(2);\n runEl.innerHTML = `Q_is · K_France = ${running.toFixed(2)}`;\n}\nfunction randomizeVectors() { genVectors(); renderDotProduct(); }\n\n// =============== ATTENTION SCORE BARS ===============\nconst attnTokens = [\n { tok: '\"The\"', score: 0.08, high: false },\n { tok: '\"·capital\"', score: 0.34, high: true },\n { tok: '\"·of\"', score: 0.05, high: false },\n { tok: '\"·France\"', score: 0.41, high: true },\n { tok: '\"·is\" (self)', score: 0.12, high: false }\n];\nfunction renderAttnRows(reveal = false) {\n const c = document.getElementById(\"attnRows\");\n c.innerHTML = \"\";\n attnTokens.forEach((t, i) => {\n const row = document.createElement(\"div\");\n row.className = \"attn-reveal\" + (t.high ? \" high\" : \"\");\n row.id = `arow-${i}`;\n row.innerHTML = `\n

${t.tok}

${reveal ? (t.score * 100).toFixed(0) + \"%\" : \"\"}

\n `;\n c.appendChild(row);\n });\n}\nrenderAttnRows(true);\nasync function animateAttnScores() {\n renderAttnRows(false);\n await new Promise(r => setTimeout(r, 200));\n for (let i = 0; i < attnTokens.length; i++) {\n const row = document.getElementById(`arow-${i}`);\n const fill = row.querySelector(\".bar-fill\");\n const score = row.querySelector(\".score\");\n fill.style.width = (attnTokens[i].score * 100 / 0.45) + \"%\";\n score.textContent = (attnTokens[i].score * 100).toFixed(0) + \"%\";\n await new Promise(r => setTimeout(r, 280));\n }\n}\n\n// =============== HEADS ===============\nconst heads = [\n { name: \"HEAD 1\", focus: \"finds the proper noun → ·France\" },\n { name: \"HEAD 2\", focus: \"finds the role word → ·capital\" },\n { name: \"HEAD 3\", focus: \"tracks 'of' relations\" },\n { name: \"HEAD 4\", focus: \"syntactic structure\" },\n { name: \"HEAD 5\", focus: \"long-range references\" },\n { name: \"HEAD 6\", focus: \"named entities\" },\n { name: \"HEAD 7\", focus: \"fact-completion pattern\" },\n { name: \"HEAD 8\", focus: \"punctuation context\" }\n];\nconst headRotations = [\n [\"proper noun → France\", \"role word → capital\", \"'of' relations\", \"syntactic structure\", \"long-range refs\", \"named entities\", \"fact completion\", \"punctuation\"],\n [\"subject locator\", \"verb tense\", \"country detector\", \"discourse markers\", \"rhyme/sound\", \"magnitude of numbers\", \"code symbols\", \"speaker turn\"],\n [\"matches quotes\", \"scope of NOT\", \"list parallelism\", \"comparisons\", \"synonym links\", \"geography facts\", \"function calls\", \"sentence end\"]\n];\nfunction renderHeads(focuses) {\n const c = document.getElementById(\"headsContainer\");\n c.innerHTML = \"\";\n heads.forEach((h, i) => {\n const d = document.createElement(\"div\");\n d.className = \"head\";\n const f = focuses ? focuses[i] : h.focus;\n const w = 30 + Math.floor(rand(i * 7.3 + (focuses ? focuses.length : 0)) * 65);\n d.innerHTML = `

${h.name}

${f}

`;\n c.appendChild(d);\n });\n}\nrenderHeads();\nlet headIdx = 0;\nfunction cycleHeads() {\n headIdx = (headIdx + 1) % headRotations.length;\n renderHeads(headRotations[headIdx]);\n}\n\n// =============== FFN NEURONS ===============\nconst FFN_NEURONS = 100;\nfunction renderFFNNeurons(active = false) {\n const c = document.getElementById(\"ffnNeurons\");\n c.innerHTML = \"\";\n for (let i = 0; i < FFN_NEURONS; i++) {\n const n = document.createElement(\"div\");\n n.className = \"neuron\"; n.id = `nrn-${i}`;\n if (active) {\n const r = rand(i * 0.31);\n if (r > 0.85) n.classList.add(\"paris\");\n else if (r > 0.55) n.classList.add(\"active\");\n }\n c.appendChild(n);\n }\n}\nrenderFFNNeurons(false);\nfunction activateFFN() {\n renderFFNNeurons(false);\n const targets = [];\n for (let i = 0; i < FFN_NEURONS; i++) {\n const r = rand(i * 0.31);\n if (r > 0.85) targets.push({ i, cls: \"paris\" });\n else if (r > 0.55) targets.push({ i, cls: \"active\" });\n }\n targets.forEach((t, idx) => {\n setTimeout(() => {\n const n = document.getElementById(`nrn-${t.i}`);\n if (n) n.classList.add(t.cls);\n }, idx * 25);\n });\n}\nfunction resetFFN() { renderFFNNeurons(false); }\n\n// =============== STACK ===============\nconst stackBlocks = [\n { name: \"Block 1\", info: \"tokens, n-grams, surface\" },\n { name: \"Block 5\", info: \"local syntax, phrase structure\" },\n { name: \"Block 12\", info: \"recognizes fact-completion pattern\" },\n { name: \"Block 24\", info: \"France ↔ country concept linked\" },\n { name: \"Block 40\", info: \"retrieves 'Paris' from MLP memory\" },\n { name: \"Block 60\", info: \"answer commits, attention refines it\" },\n { name: \"Block 80\", info: \"vector approaches input-embed of 'Paris'\" },\n { name: \"Block 96\", info: \"ready to project to logits\" }\n];\nfunction renderStack() {\n const c = document.getElementById(\"stackViz\"); c.innerHTML = \"\";\n stackBlocks.forEach((b, i) => {\n const d = document.createElement(\"div\");\n d.className = \"stack-block\"; d.id = `stack-${i}`;\n d.innerHTML = `${b.name}${b.info}`;\n c.appendChild(d);\n });\n}\nrenderStack();\nfunction animateStack() {\n stackBlocks.forEach((_, i) => {\n setTimeout(() => {\n const el = document.getElementById(`stack-${i}`);\n el.style.background = \"var(--ink)\";\n el.style.color = \"var(--paper)\";\n const info = el.querySelector(\".info\");\n if (info) info.style.color = \"rgba(230,212,173,0.7)\";\n setTimeout(() => {\n el.style.background = \"\";\n el.style.color = \"\";\n if (info) info.style.color = \"\";\n }, 700);\n }, i * 320);\n });\n}\n\n// =============== PROB / SAMPLE ===============\nconst baseLogits = [\n { tok: \"·Paris\", logit: 10.5 },\n { tok: \"·a\", logit: 7.8 },\n { tok: \"·home\", logit: 7.0 },\n { tok: \"·one\", logit: 6.3 },\n { tok: \"·the\", logit: 5.9 },\n { tok: \"·also\", logit: 5.5 },\n { tok: \"·France\", logit: 4.3 }\n];\nfunction softmaxTemp(logits, T) {\n const scaled = logits.map(l => l / T);\n const m = Math.max(...scaled);\n const e = scaled.map(s => Math.exp(s - m));\n const sum = e.reduce((a, b) => a + b, 0);\n return e.map(x => x / sum);\n}\nfunction renderProbs(T = 1.0) {\n const probs = softmaxTemp(baseLogits.map(b => b.logit), T);\n const c = document.getElementById(\"probBars\"); c.innerHTML = \"\";\n baseLogits.forEach((b, i) => {\n const row = document.createElement(\"div\");\n row.className = \"prob-row\" + (i === 0 ? \" winner\" : \"\");\n row.innerHTML = `

\"${b.tok}\"

${(probs[i]*100).toFixed(1)}%

`;\n c.appendChild(row);\n });\n}\nrenderProbs(1.0);\ndocument.getElementById(\"tempSlider\").addEventListener(\"input\", e => {\n const T = e.target.value / 100;\n document.getElementById(\"tempVal\").textContent = T.toFixed(2);\n renderProbs(T);\n});\nfunction sampleToken() {\n const T = document.getElementById(\"tempSlider\").value / 100;\n const probs = softmaxTemp(baseLogits.map(b => b.logit), T);\n let r = Math.random(); let cum = 0; let chosen = 0;\n for (let i = 0; i < probs.length; i++) {\n cum += probs[i];\n if (r <= cum) { chosen = i; break; }\n }\n document.getElementById(\"sampleResult\").innerHTML =\n `Sampled (T=${T.toFixed(2)}): \"${baseLogits[chosen].tok}\" (p=${(probs[chosen]*100).toFixed(1)}%)`;\n}\n\n// =============== KV CACHE ===============\nconst promptTokens = [\"The\", \"·capital\", \"·of\", \"·France\", \"·is\"];\nconst decodeTokens = [\"·Paris\", \",\", \"·a\", \"·city\", \"·in\", \"·Europe\", \".\"];\nlet kvStep = 0;\nfunction renderKVCache() {\n const k = document.getElementById(\"kvCacheK\");\n const v = document.getElementById(\"kvCacheV\");\n k.innerHTML = \"\"; v.innerHTML = \"\";\n if (kvStep > 0) {\n promptTokens.forEach((t) => {\n [k, v].forEach(c => {\n const s = document.createElement(\"div\");\n s.className = \"kv-slot\";\n s.innerHTML = `

prefill

${t}`;\n c.appendChild(s);\n });\n });\n }\n for (let i = 0; i < kvStep - 1; i++) {\n [k, v].forEach(c => {\n const s = document.createElement(\"div\");\n s.className = \"kv-slot\";\n s.innerHTML = `

cached

${decodeTokens[i]}`;\n c.appendChild(s);\n });\n }\n}\nrenderKVCache();\nfunction kvGenerateOne() {\n const status = document.getElementById(\"kvStatus\");\n if (kvStep === 0) {\n kvStep = 1; renderKVCache();\n document.querySelectorAll(\"#kvCacheK .kv-slot, #kvCacheV .kv-slot\").forEach((el, i) => {\n el.style.opacity = \"0\"; el.style.transform = \"translateY(20px)\";\n setTimeout(() => { el.style.opacity = \"1\"; el.style.transform = \"translateY(0)\"; }, i * 70);\n });\n status.innerHTML = `Prefill phase complete. All 5 prompt tokens processed in parallel; K and V cached for every layer.`;\n return;\n }\n if (kvStep - 1 >= decodeTokens.length) {\n status.innerHTML = `Sequence complete. Reset to start again.`;\n return;\n }\n const newToken = decodeTokens[kvStep - 1];\n kvStep++; renderKVCache();\n const kSlots = document.querySelectorAll(\"#kvCacheK .kv-slot\");\n const vSlots = document.querySelectorAll(\"#kvCacheV .kv-slot\");\n const lastK = kSlots[kSlots.length - 1];\n const lastV = vSlots[vSlots.length - 1];\n if (lastK) {\n lastK.classList.add(\"new\");\n lastK.innerHTML = `

just computed

${newToken}`;\n setTimeout(() => {\n lastK.classList.remove(\"new\");\n lastK.innerHTML = `

cached

${newToken}`;\n }, 1500);\n }\n if (lastV) {\n lastV.classList.add(\"new\");\n lastV.innerHTML = `

just computed

${newToken}`;\n setTimeout(() => {\n lastV.classList.remove(\"new\");\n lastV.innerHTML = `

cached

${newToken}`;\n }, 1500);\n }\n const skipped = kSlots.length - 1;\n const total = kSlots.length;\n status.innerHTML = `Decode step ${kvStep - 1}: computed K and V for \"${newToken}\" only. The K/V of ${skipped} previous tokens were reused from cache — ${((skipped / total) * 100).toFixed(0)}% of attention work skipped.`;\n}\nfunction kvReset() {\n kvStep = 0; renderKVCache();\n document.getElementById(\"kvStatus\").innerHTML = \"\";\n}\n\n// =============== GENERATION LOOP (merged: canonical playback + real custom prompt) ===============\nconst CANONICAL_PROMPT = \"The capital of France is\";\nconst continuation = [\" Paris\", \",\", \" a\", \" city\", \" famous\", \" for\", \" art\", \" and\", \" food\", \".\"];\nconst genState = {\n maxTokens: 15,\n mode: \"greedy\",\n generatedCount: 0,\n promptText: CANONICAL_PROMPT,\n tokenIds: null,\n running: false,\n stop: false\n};\n\nfunction setGenMax(n) {\n genState.maxTokens = n;\n document.querySelectorAll(\"#genMaxChips .chip\").forEach(c => {\n const isActive = +c.textContent.trim() === n;\n c.classList.toggle(\"active\", isActive);\n c.classList.toggle(\"brick-active\", isActive);\n });\n}\nfunction setGenMode(mode) {\n genState.mode = mode;\n document.querySelectorAll(\"#genModeChips .chip\").forEach(c => {\n const txt = c.textContent.trim();\n const isActive = (mode === \"greedy\" && txt === \"greedy\") || (mode === \"sample\" && txt.startsWith(\"sample\"));\n c.classList.toggle(\"active\", isActive);\n c.classList.toggle(\"brick-active\", isActive);\n });\n}\n\nfunction onGenPromptEdit() {\n const inp = document.getElementById(\"genPromptInput\");\n if (!inp) return;\n genState.promptText = inp.value;\n genState.generatedCount = 0;\n genState.tokenIds = null;\n const display = document.getElementById(\"genDisplay\");\n if (display) display.innerHTML = `${escapeHtml(genState.promptText)}`;\n}\n\nfunction resetGen() {\n genState.stop = true;\n genState.running = false;\n genState.generatedCount = 0;\n genState.tokenIds = null;\n const inp = document.getElementById(\"genPromptInput\");\n const text = inp?.value || CANONICAL_PROMPT;\n genState.promptText = text;\n const display = document.getElementById(\"genDisplay\");\n if (display) display.innerHTML = `${escapeHtml(text)}`;\n}\n\nfunction appendGenToken(tokenStr) {\n const display = document.getElementById(\"genDisplay\");\n const cursor = display.querySelector(\".cursor\");\n if (cursor) cursor.remove();\n const span = document.createElement(\"span\");\n span.className = \"new\";\n span.textContent = tokenStr;\n span.style.opacity = \"0\";\n span.style.transform = \"translateY(6px)\";\n display.appendChild(span);\n requestAnimationFrame(() => {\n span.style.transition = \"all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1)\";\n span.style.opacity = \"1\";\n span.style.transform = \"translateY(0)\";\n });\n setTimeout(() => span.classList.remove(\"new\"), 700);\n const newC = document.createElement(\"span\");\n newC.className = \"cursor\";\n display.appendChild(newC);\n}\n\nasync function generateOneReal() {\n if (!genState.tokenIds) {\n const enc = await REAL.tokenizer(genState.promptText, { return_tensor: false });\n genState.tokenIds = enc.input_ids.slice();\n }\n const T = REAL.Tensor;\n const inp = new T(\"int64\", BigInt64Array.from(genState.tokenIds.map(x => BigInt(x))), [1, genState.tokenIds.length]);\n const mask = new T(\"int64\", BigInt64Array.from(genState.tokenIds.map(() => 1n)), [1, genState.tokenIds.length]);\n const out = await REAL.model({ input_ids: inp, attention_mask: mask });\n const lT = out.logits;\n const [, S, V] = lT.dims;\n const lastStart = (S - 1) * V;\n const last = Array.from(lT.data.slice(lastStart, lastStart + V));\n\n let nextId;\n if (genState.mode === \"sample\") {\n const indexed = last.map((v, i) => ({ i, v }));\n indexed.sort((a, b) => b.v - a.v);\n const top = indexed.slice(0, 50);\n const maxL = top[0].v;\n const exps = top.map(t => Math.exp((t.v - maxL) / 0.8));\n const sum = exps.reduce((a, b) => a + b, 0);\n let r = Math.random(), cum = 0;\n nextId = top[0].i;\n for (let j = 0; j < top.length; j++) {\n cum += exps[j] / sum;\n if (r <= cum) { nextId = top[j].i; break; }\n }\n } else {\n let best = 0, bestVal = -Infinity;\n for (let j = 0; j < last.length; j++) {\n if (last[j] > bestVal) { bestVal = last[j]; best = j; }\n }\n nextId = best;\n }\n genState.tokenIds.push(nextId);\n return REAL.tokenizer.decode([nextId]);\n}\n\nasync function generateOne() {\n if (genState.running) return;\n if (genState.generatedCount >= genState.maxTokens) return;\n genState.running = true;\n try {\n let tokenStr;\n if (REAL.active && REAL.model && REAL.tokenizer) {\n tokenStr = await generateOneReal();\n } else {\n if (genState.promptText !== CANONICAL_PROMPT) {\n // Visual feedback: pulse the illustrative badge brick-red\n const badge = document.querySelector(\".mode-badge.mode-illust\");\n if (badge) {\n badge.style.transition = \"all 0.25s\";\n badge.style.background = \"var(--brick)\";\n badge.style.color = \"var(--paper)\";\n badge.style.borderColor = \"var(--brick)\";\n badge.style.transform = \"scale(1.08)\";\n setTimeout(() => {\n badge.style.background = \"\";\n badge.style.color = \"\";\n badge.style.borderColor = \"\";\n badge.style.transform = \"\";\n }, 1600);\n }\n const hint = document.getElementById(\"genHintIllust\");\n if (hint) {\n const orig = hint.innerHTML;\n hint.style.color = \"var(--brick)\";\n hint.style.fontWeight = \"700\";\n hint.innerHTML = \"↑ Flip on Run real GPT-2 at the top of the page to generate from a custom prompt.\";\n setTimeout(() => {\n if (hint) {\n hint.style.color = \"\";\n hint.style.fontWeight = \"\";\n hint.innerHTML = orig;\n }\n }, 2600);\n }\n return;\n }\n if (genState.generatedCount >= continuation.length) return;\n tokenStr = continuation[genState.generatedCount];\n }\n appendGenToken(tokenStr);\n genState.generatedCount++;\n } finally {\n genState.running = false;\n }\n}\n\nasync function generateAll() {\n if (genState.running) return;\n genState.stop = false;\n const limit = Math.min(\n genState.maxTokens,\n (REAL.active ? genState.maxTokens : continuation.length)\n );\n // Same-prompt early-exit handled by generateOne's guards\n for (let i = genState.generatedCount; i < limit; i++) {\n if (genState.stop) break;\n const beforeCount = genState.generatedCount;\n await generateOne();\n if (genState.generatedCount === beforeCount) break; // didn't generate (hint shown)\n await new Promise(r => setTimeout(r, 110));\n }\n}\n\n// =============== MASTER ARCHITECTURE SVG ===============\nconst ARCH_SVG = ``;\n\n// Inject into both containers\ndocument.getElementById('archHero').innerHTML = ARCH_SVG;\ndocument.getElementById('archMini').innerHTML = ARCH_SVG;\n\n// =============== STAGE → ARCH MAPPING + SCROLL TRACKING ===============\nconst SECTION_TO_STAGE = {\n start: 'start',\n tokenize: 'tokenize',\n embed: 'embed',\n position: 'position',\n attention: 'attention',\n multihead: 'attention',\n residual: 'residual',\n ffn: 'ffn',\n stack: 'stack',\n output: 'output',\n sample: 'sample',\n kvcache: 'kvcache',\n loop: 'loop',\n recap: ''\n};\n\nfunction setActiveStage(stage) {\n document.querySelectorAll('.arch-stage.arch-active').forEach(el => el.classList.remove('arch-active'));\n if (!stage) return;\n document.querySelectorAll(`.arch-stage[data-stage=\"${stage}\"]`).forEach(el => el.classList.add('arch-active'));\n}\n\n// IntersectionObserver to detect which section is most in view\nlet visibleSections = new Map();\nconst stageObserver = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n visibleSections.set(e.target.id, e.intersectionRatio);\n } else {\n visibleSections.delete(e.target.id);\n }\n });\n // Find section with highest visibility\n let bestId = null; let bestRatio = 0;\n for (const [id, ratio] of visibleSections) {\n if (ratio > bestRatio) { bestRatio = ratio; bestId = id; }\n }\n if (bestId) {\n const stage = SECTION_TO_STAGE[bestId];\n setActiveStage(stage);\n }\n}, { threshold: [0, 0.15, 0.3, 0.5, 0.75, 1] });\ndocument.querySelectorAll('section.layer').forEach(s => stageObserver.observe(s));\n\n// Show/hide minimap based on scroll position.\n// Rule: only visible when the user has scrolled PAST the architecture overview.\n// IntersectionObserver alone can't distinguish \"above\" from \"below\" — both report\n// !isIntersecting — so we check the section's bounding rect directly on scroll.\nconst minimap = document.getElementById('minimap');\nconst archSection = document.querySelector('.arch-section');\nfunction updateMinimapVisibility() {\n if (!minimap || !archSection) return;\n const rect = archSection.getBoundingClientRect();\n // bottom < 0 means the arch-section has scrolled completely above the viewport\n // → we're past it → show minimap.\n // Otherwise (still above viewport, or intersecting) → hide.\n if (rect.bottom < 80) {\n minimap.classList.add('visible');\n } else {\n minimap.classList.remove('visible');\n }\n}\nwindow.addEventListener('scroll', updateMinimapVisibility, { passive: true });\nwindow.addEventListener('resize', updateMinimapVisibility, { passive: true });\nupdateMinimapVisibility(); // initial pass\n\n// =============== MOTION FADE-INS ===============\nwindow.addEventListener('motion-ready', () => {\n if (!window.M) return;\n const els = document.querySelectorAll('.tile, .story, .why, .insight, .tip, .warn, .cost, .state-bar, .compare');\n els.forEach((el) => {\n el.style.opacity = \"0\";\n el.style.transform = \"translateY(14px)\";\n });\n const obs = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n window.M.animate(e.target,\n { opacity: 1, transform: \"translateY(0px)\" },\n { duration: 0.5, easing: [0.34, 1.56, 0.64, 1] }\n );\n obs.unobserve(e.target);\n }\n });\n }, { threshold: 0.06 });\n els.forEach(p => obs.observe(p));\n});\n",[],[187],"93d45ba6-a6d9-4902-aa0f-b4be309eaed8","main.ts",["D",1781527699489],"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n if (path === \"/styles.css\") return serveFile(\"./styles.css\", import.meta.url);\n if (path === \"/script.js\") return serveFile(\"./script.js\", import.meta.url);\n return serveFile(\"./index.html\", import.meta.url);\n}\n","transformer-viz-atiq",[],[195],["D",1781527696644],[],[18],["D",1781519848496],["D",1789464074488],{"_11":12,"_133":69},{"_11":12,"_129":-5,"_68":69,"_30":67,"_130":131,"_132":24},{"_39":120,"_13":16,"_33":36,"_121":79,"_122":-5,"_123":-5,"_124":-5,"_125":-5,"_126":-5,"_127":14,"_128":12},"ctx",{"_53":-5,"_152":243,"_244":245,"_246":247,"_248":24,"_249":24,"_250":24,"_251":93,"_252":-5,"_253":-7,"_254":-7,"_255":26,"_256":24,"_257":24,"_258":-5,"_259":24,"_260":24,"_261":24,"_262":-5},"ENV",{"_214":215,"_216":217,"_218":16,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html