reformat slides 12 and 13 to match slide 10 pattern; trim slide 12 heading
Slides 12 ("How an LLM tokenizes input") and 13 ("What the LLM actually
sees: integer token IDs") restructured to use the heading-with-separator
pattern modeled after slide 17 (and just-applied to slide 10):
- <h1> uses default styling (no inline overrides) → border-bottom separator
- Outer flex-centering wrapper dropped
- SVG-internal title promoted to slide heading; SVG-internal subtitle
promoted to single-line bold caption
- Figure max-width: 860px → 1100px (slide 12); 960px → 1100px (slide 13)
Slide 12 heading shortened to "How an LLM tokenizes input" (was
"How an LLM tokenizes input and generates text autoregressively") — the
longer form was wrapping to two lines on a projector. Autoregressive
generation is already covered on slide 10; slide 12's caption makes
clear this slide's focus is tokenization specifically.
Slide 13 heading trimmed: "What the LLM actually sees: integer token IDs"
(dropped "(advanced view)" parenthetical — read as redundant scaffolding
in heading position).
Slide 13 caption: chose the comma-as-ID-11 line over the abstract
sequence-of-integers definition. The math notation from the SVG subtitle
was deliberately not promoted — it's been removed from the SVG entirely
(see paired commit b667fc5).
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Shayan Rais
@@ -522,50 +522,34 @@
|
||||
<!-- SLIDE 12: Tokens In, Tokens Out — Full Picture -->
|
||||
<!-- ============================================================ -->
|
||||
<div class="slide" data-slide="12">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 120px); text-align: center; gap: 0;">
|
||||
|
||||
<!-- Title -->
|
||||
<h1 style="border-bottom: none; padding-bottom: 0; font-size: 2.6rem; margin-bottom: 28px;">Tokens in, tokens out</h1>
|
||||
|
||||
<!-- Animated SVG -->
|
||||
<figure style="max-width: 860px; width: 100%; margin: 0 auto;">
|
||||
<img
|
||||
src="../assets/llm/llm-advanced.svg"
|
||||
alt="Animated diagram combining tokenization and autoregressive generation: the BPE-tokenized prompt feeds into the LLM, which generates the answer token-by-token using the same shared vocabulary."
|
||||
style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.10);"
|
||||
/>
|
||||
<figcaption style="margin-top: 20px; font-size: 1rem; color: #555; font-style: italic; line-height: 1.5;">
|
||||
<strong style="font-style: normal; color: #1a1a1a;">Input and output share the same vocabulary — tokenization shapes what the model even “sees”.</strong><br/>
|
||||
“Anthropic” becomes “Anth” + “ropic” because that’s how it appears most often in training data.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<h1>How an LLM tokenizes input</h1>
|
||||
<figure style="max-width: 1100px; width: 100%; margin: 24px auto 0;">
|
||||
<img
|
||||
src="../assets/llm/llm-advanced.svg"
|
||||
alt="Animated diagram combining tokenization and autoregressive generation: the BPE-tokenized prompt feeds into the LLM, which generates the answer token-by-token using the same shared vocabulary."
|
||||
style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.10);"
|
||||
/>
|
||||
<figcaption style="margin-top: 16px; font-size: 1.1rem; color: #1a1a1a; font-weight: 600; text-align: center;">
|
||||
BPE chops words into subword tokens — same color = same word, gray = punctuation.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================ -->
|
||||
<!-- SLIDE 13: What the Model Actually Sees — Integer Token IDs -->
|
||||
<!-- ============================================================ -->
|
||||
<div class="slide" data-slide="13">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 120px); text-align: center; gap: 0;">
|
||||
|
||||
<!-- Title -->
|
||||
<h1 style="border-bottom: none; padding-bottom: 0; font-size: 2.6rem; margin-bottom: 28px;">What the model actually sees</h1>
|
||||
|
||||
<!-- Animated SVG — wider asset (1360×600 viewBox); use max-width 960px to fill the slide without overcrowding -->
|
||||
<figure style="max-width: 960px; width: 100%; margin: 0 auto;">
|
||||
<img
|
||||
src="../assets/llm/llm-animation-tokenids.svg"
|
||||
alt="Animated diagram showing the 32 integer token IDs the model receives: e.g. 28133 for 'Does', 17554 for ' Chat', 162016 for 'GPT', 97481 for ' Claude'. Generated tokens are also shown as IDs. Vocab size V ≈ 200,000."
|
||||
style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.10);"
|
||||
/>
|
||||
<figcaption style="margin-top: 20px; font-size: 1rem; color: #555; font-style: italic; line-height: 1.5;">
|
||||
<strong style="font-style: normal; color: #1a1a1a;">The model never reads text — it reads a sequence of integers, each one an index into a vocabulary of ~200,000 entries.</strong><br/>
|
||||
Notice the comma is always ID 11 — the same punctuation mark maps to the same integer, everywhere, every time.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<h1>What the LLM actually sees: integer token IDs</h1>
|
||||
<figure style="max-width: 1100px; width: 100%; margin: 24px auto 0;">
|
||||
<img
|
||||
src="../assets/llm/llm-animation-tokenids.svg"
|
||||
alt="Animated diagram showing the 32 integer token IDs the model receives: e.g. 28133 for 'Does', 17554 for ' Chat', 162016 for 'GPT', 97481 for ' Claude'. Generated tokens are also shown as IDs. Vocab size V ≈ 200,000."
|
||||
style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.10);"
|
||||
/>
|
||||
<figcaption style="margin-top: 16px; font-size: 1.1rem; color: #1a1a1a; font-weight: 600; text-align: center;">
|
||||
Notice the comma is always ID 11 — the same punctuation mark maps to the same integer, everywhere, every time.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================ -->
|
||||
|
||||
Reference in New Issue
Block a user