reformat slides 11, 14, 15, 16 — heading-with-separator pattern + emoji prefixes
Slide 11 ("Tokens, not words"): heading and figcaption removed entirely —
now a pure-picture slide (just the OpenAI tokenizer screenshot at
max-width 1100px). The screenshot is self-titled (visible tokenizer UI
labels), so a slide heading was redundant. Flex-centering wrapper dropped.
Slide 14 ("💬 Models are stateless"): flex-centering wrapper dropped,
<h1> now uses default styling (no inline overrides) so it picks up the
deck's border-bottom separator. Dialog diagram retained with margin-top
adjusted for breathing room. The two-line caption strip ("Every turn is
a fresh API call." / "Memory only exists if the harness replays the
transcript.") preserved — it's the slide's conceptual punchline.
Slide 15 ("🦜 Stochastic Parrots"): the standalone large parrot emoji
that previously floated above the heading was merged into the heading
itself (matches the deck's emoji-prefix convention used by slides 14 and
17). <h1> uses default styling for the separator. Subtitle paragraph
preserved as the subheading below the separator.
Slide 16 ("🌡️ Even temperature = 0 isn't deterministic."): thermometer
emoji prepended to the heading, matching the emoji-prefix pattern. <h1>
uses default styling for the separator. Subtitle paragraph preserved as
the subheading.
All four slides now follow (or, in slide 11's case, deliberately depart
from) the canonical slide-17 heading-with-separator pattern. Slide count
unchanged at 55. No data-level changes. No SVG/asset modifications.
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Shayan Rais
@@ -497,25 +497,13 @@
|
||||
<!-- SLIDE 11: What's a Token? -->
|
||||
<!-- ============================================================ -->
|
||||
<div class="slide" data-slide="11">
|
||||
<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, not words</h1>
|
||||
|
||||
<!-- Screenshot image -->
|
||||
<figure style="max-width: 860px; width: 100%; margin: 0 auto;">
|
||||
<img
|
||||
src="../assets/llm/tokens.jpg"
|
||||
alt="Screenshot of the OpenAI tokenizer showing the sentence about BPE split into 32 tokens across 105 characters, with tabs for GPT-5.x, GPT-4, and GPT-3 tokenizers."
|
||||
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;">105 characters → 32 tokens. Rule of thumb: ~4 chars per token in English.</strong><br/>
|
||||
Each model generation uses a different tokenizer — same text, different token count, different cost.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<figure style="max-width: 1100px; width: 100%; margin: 60px auto 0;">
|
||||
<img
|
||||
src="../assets/llm/tokens.jpg"
|
||||
alt="Screenshot of the OpenAI tokenizer showing the sentence about BPE split into 32 tokens across 105 characters, with tabs for GPT-5.x, GPT-4, and GPT-3 tokenizers."
|
||||
style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.10);"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================ -->
|
||||
@@ -556,13 +544,12 @@
|
||||
<!-- SLIDE 14: Models are stateless -->
|
||||
<!-- ============================================================ -->
|
||||
<div class="slide" data-slide="14">
|
||||
<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.4rem; margin-bottom: 32px;">💬 Models are stateless</h1>
|
||||
<h1>💬 Models are stateless</h1>
|
||||
|
||||
<!-- Dialog diagram — two-column conversation -->
|
||||
<div style="max-width: 700px; width: 100%; margin: 0 auto 28px;">
|
||||
<div style="max-width: 700px; width: 100%; margin: 32px auto 28px;">
|
||||
|
||||
<!-- Column headers -->
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 14px; padding: 0 24px;">
|
||||
@@ -605,10 +592,9 @@
|
||||
</div>
|
||||
|
||||
<!-- Caption strip — mirrors slide-12 pattern -->
|
||||
<p style="font-size: 1.6rem; font-weight: 700; color: #1a1a1a; margin: 8px 0 4px; letter-spacing: -0.02em; line-height: 1.2;">Every turn is a fresh API call.</p>
|
||||
<p style="font-size: 1.1rem; font-weight: 400; color: #C0392B; margin: 0; letter-spacing: 0.01em;">Memory only exists if the harness replays the transcript.</p>
|
||||
<p style="font-size: 1.6rem; font-weight: 700; color: #1a1a1a; margin: 8px 0 4px; letter-spacing: -0.02em; line-height: 1.2; text-align: center;">Every turn is a fresh API call.</p>
|
||||
<p style="font-size: 1.1rem; font-weight: 400; color: #C0392B; margin: 0; letter-spacing: 0.01em; text-align: center;">Memory only exists if the harness replays the transcript.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================ -->
|
||||
@@ -617,11 +603,8 @@
|
||||
<div class="slide" data-slide="15">
|
||||
|
||||
<!-- Headline -->
|
||||
<div style="text-align: center; margin-bottom: 36px;">
|
||||
<div style="font-size: 3.2rem; line-height: 1; margin-bottom: 12px;">🦜</div>
|
||||
<h1 style="border-bottom: none; padding-bottom: 0; font-size: 2.8rem; margin-bottom: 8px;">“Stochastic Parrots”</h1>
|
||||
<p style="font-size: 1.1rem; color: #777; margin: 0;"><strong>Stochastic</strong> means random/probabilistic — models don’t <em>know</em> the answer, they <em>sample</em> from a probability distribution.</p>
|
||||
</div>
|
||||
<h1>🦜 “Stochastic Parrots”</h1>
|
||||
<p style="font-size: 1.1rem; color: #777; margin: 0 0 32px;"><strong>Stochastic</strong> means random/probabilistic — models don’t <em>know</em> the answer, they <em>sample</em> from a probability distribution.</p>
|
||||
|
||||
<!-- Probability distribution visual -->
|
||||
<div style="max-width: 720px; margin: 0 auto 32px; background: #f8f9fa; border-radius: 12px; padding: 28px 36px;">
|
||||
@@ -687,10 +670,8 @@
|
||||
<div class="slide" data-slide="16">
|
||||
|
||||
<!-- Headline -->
|
||||
<div style="text-align: center; margin-bottom: 32px;">
|
||||
<h1 style="border-bottom: none; padding-bottom: 0; font-size: 2.6rem; margin-bottom: 8px;">Even temperature = 0 isn’t deterministic.</h1>
|
||||
<p style="font-size: 1.05rem; color: #777; margin: 0;">You set it to zero. You expect the same answer every time. You’re wrong.</p>
|
||||
</div>
|
||||
<h1>🌡️ Even temperature = 0 isn’t deterministic.</h1>
|
||||
<p style="font-size: 1.05rem; color: #777; margin: 0 0 32px;">You set it to zero. You expect the same answer every time. You’re wrong.</p>
|
||||
|
||||
<!-- Three beats -->
|
||||
<div style="max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px;">
|
||||
|
||||
Reference in New Issue
Block a user