add llm-animation-tokenids.svg — advanced tokenization view with integer IDs
Animated SVG showing what the LLM actually receives: integer token IDs (one layer deeper than llm-advanced.svg). Each of the 32 input tokens displays the ID prominently with the token text in small italic underneath (e.g., 28133 "Does", 17554 " Chat", 162016 "GPT", 97481 " Claude", 29683 " Anth", 71571 "ropic"). Same 7-iteration autoregressive loop; generated tokens also shown as IDs. Vocab size labeled V ≈ 200,000. Title formula: f: ℤᵏ → ℝⱽ; next_id = argmax(f(ids)). ViewBox 1360×600 (wider than the other LLM SVGs). Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Shayan Rais
@@ -0,0 +1,157 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1360 600" width="1360" height="600"
|
||||
font-family="Helvetica, Arial, sans-serif">
|
||||
<defs>
|
||||
<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5"
|
||||
markerWidth="8" markerHeight="8" orient="auto-start-reverse">
|
||||
<path d="M0,0 L10,5 L0,10 z" fill="#333"/>
|
||||
</marker>
|
||||
<marker id="arrowFB" viewBox="0 0 10 10" refX="9" refY="5"
|
||||
markerWidth="8" markerHeight="8" orient="auto-start-reverse">
|
||||
<path d="M0,0 L10,5 L0,10 z" fill="#9c27b0"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<rect width="1360" height="600" fill="#fafbfc"/>
|
||||
|
||||
<text x="680" y="34" text-anchor="middle" font-size="22" font-weight="bold" fill="#1a1a1a">
|
||||
What the LLM actually sees: integer token IDs (advanced view)
|
||||
</text>
|
||||
<text x="680" y="56" text-anchor="middle" font-size="13" fill="#666">
|
||||
BPE encodes text → integer IDs. The model is a function f: ℤᵏ → ℝⱽ ; next_id = argmax(f(ids))
|
||||
</text>
|
||||
|
||||
<text x="680" y="83" text-anchor="middle" font-size="13" font-weight="700" fill="#1976d2" opacity="0" letter-spacing="1">ITERATION 1 / 7<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.11056;0.11111;0.22222;0.23333;1" dur="18.0s" repeatCount="indefinite"/></text>
|
||||
<text x="680" y="83" text-anchor="middle" font-size="13" font-weight="700" fill="#1976d2" opacity="0" letter-spacing="1">ITERATION 2 / 7<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.22167;0.22222;0.33333;0.34444;1" dur="18.0s" repeatCount="indefinite"/></text>
|
||||
<text x="680" y="83" text-anchor="middle" font-size="13" font-weight="700" fill="#1976d2" opacity="0" letter-spacing="1">ITERATION 3 / 7<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.33278;0.33333;0.44444;0.45556;1" dur="18.0s" repeatCount="indefinite"/></text>
|
||||
<text x="680" y="83" text-anchor="middle" font-size="13" font-weight="700" fill="#1976d2" opacity="0" letter-spacing="1">ITERATION 4 / 7<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.44389;0.44444;0.55556;0.56667;1" dur="18.0s" repeatCount="indefinite"/></text>
|
||||
<text x="680" y="83" text-anchor="middle" font-size="13" font-weight="700" fill="#1976d2" opacity="0" letter-spacing="1">ITERATION 5 / 7<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.55500;0.55556;0.66667;0.67778;1" dur="18.0s" repeatCount="indefinite"/></text>
|
||||
<text x="680" y="83" text-anchor="middle" font-size="13" font-weight="700" fill="#1976d2" opacity="0" letter-spacing="1">ITERATION 6 / 7<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.66611;0.66667;0.77778;0.78889;1" dur="18.0s" repeatCount="indefinite"/></text>
|
||||
<text x="680" y="83" text-anchor="middle" font-size="13" font-weight="700" fill="#1976d2" opacity="0" letter-spacing="1">ITERATION 7 / 7<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.77722;0.77778;0.88889;0.90000;1" dur="18.0s" repeatCount="indefinite"/></text>
|
||||
|
||||
<!-- INPUT PANEL -->
|
||||
<text x="270" y="100" text-anchor="middle" font-size="11" font-weight="700"
|
||||
fill="#777" letter-spacing="1.5">INPUT TOKEN IDs (k = 32, vocab V ≈ 200,000)</text>
|
||||
<rect x="30" y="110" width="480" height="380" rx="10"
|
||||
fill="#fff" stroke="#c5cee0" stroke-width="2"/>
|
||||
|
||||
<text x="42" y="148" font-size="11" font-weight="600" fill="#555"
|
||||
letter-spacing="0.3">Prompt encoded as 32 IDs (large) with token text below (small italic)</text>
|
||||
<g opacity="0"><rect x="42" y="170" width="52" height="42" rx="5" fill="#dbeafe" stroke="#1d4ed8" stroke-width="1.5"/><text x="68.0" y="187" text-anchor="middle" font-size="13" font-weight="700" fill="#1e3a8a" font-family="ui-monospace,Menlo,Consolas,monospace">28133</text><text x="68.0" y="203" text-anchor="middle" font-size="10" fill="#1e3a8a" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">Does</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.01056;0.02500;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="98" y="170" width="52" height="42" rx="5" fill="#dcfce7" stroke="#15803d" stroke-width="1.5"/><text x="124.0" y="187" text-anchor="middle" font-size="13" font-weight="700" fill="#14532d" font-family="ui-monospace,Menlo,Consolas,monospace">17554</text><text x="124.0" y="203" text-anchor="middle" font-size="10" fill="#14532d" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Chat</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.01278;0.02722;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="154" y="170" width="60" height="42" rx="5" fill="#dcfce7" stroke="#15803d" stroke-width="1.5"/><text x="184.0" y="187" text-anchor="middle" font-size="13" font-weight="700" fill="#14532d" font-family="ui-monospace,Menlo,Consolas,monospace">162016</text><text x="184.0" y="203" text-anchor="middle" font-size="10" fill="#14532d" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">GPT</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.01500;0.02944;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="218" y="170" width="28" height="42" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="232.0" y="187" text-anchor="middle" font-size="13" font-weight="700" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace">11</text><text x="232.0" y="203" text-anchor="middle" font-size="10" fill="#4b5563" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">,</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.01722;0.03167;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="250" y="170" width="61" height="42" rx="5" fill="#fce7f3" stroke="#9d174d" stroke-width="1.5"/><text x="280.5" y="187" text-anchor="middle" font-size="13" font-weight="700" fill="#831843" font-family="ui-monospace,Menlo,Consolas,monospace">97481</text><text x="280.5" y="203" text-anchor="middle" font-size="10" fill="#831843" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Claude</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.01944;0.03389;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="315" y="170" width="28" height="42" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="329.0" y="187" text-anchor="middle" font-size="13" font-weight="700" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace">11</text><text x="329.0" y="203" text-anchor="middle" font-size="10" fill="#4b5563" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">,</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.02167;0.03611;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="347" y="170" width="52" height="42" rx="5" fill="#ede9fe" stroke="#5b21b6" stroke-width="1.5"/><text x="373.0" y="187" text-anchor="middle" font-size="13" font-weight="700" fill="#4c1d95" font-family="ui-monospace,Menlo,Consolas,monospace">29683</text><text x="373.0" y="203" text-anchor="middle" font-size="10" fill="#4c1d95" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Anth</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.02389;0.03833;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="403" y="170" width="52" height="42" rx="5" fill="#ede9fe" stroke="#5b21b6" stroke-width="1.5"/><text x="429.0" y="187" text-anchor="middle" font-size="13" font-weight="700" fill="#4c1d95" font-family="ui-monospace,Menlo,Consolas,monospace">71571</text><text x="429.0" y="203" text-anchor="middle" font-size="10" fill="#4c1d95" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">ropic</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.02611;0.04056;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="459" y="170" width="28" height="42" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="473.0" y="187" text-anchor="middle" font-size="13" font-weight="700" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace">11</text><text x="473.0" y="203" text-anchor="middle" font-size="10" fill="#4b5563" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">,</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.02833;0.04278;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="42" y="220" width="36" height="42" rx="5" fill="#fef3c7" stroke="#a16207" stroke-width="1.5"/><text x="60.0" y="237" text-anchor="middle" font-size="13" font-weight="700" fill="#713f12" font-family="ui-monospace,Menlo,Consolas,monospace">451</text><text x="60.0" y="253" text-anchor="middle" font-size="10" fill="#713f12" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Ll</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.03000;0.04444;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="82" y="220" width="52" height="42" rx="5" fill="#fef3c7" stroke="#a16207" stroke-width="1.5"/><text x="108.0" y="237" text-anchor="middle" font-size="13" font-weight="700" fill="#713f12" font-family="ui-monospace,Menlo,Consolas,monospace">42804</text><text x="108.0" y="253" text-anchor="middle" font-size="10" fill="#713f12" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">ama</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.03222;0.04667;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="138" y="220" width="28" height="42" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="152.0" y="237" text-anchor="middle" font-size="13" font-weight="700" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace">11</text><text x="152.0" y="253" text-anchor="middle" font-size="10" fill="#4b5563" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">,</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.03444;0.04889;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="170" y="220" width="36" height="42" rx="5" fill="#fed7aa" stroke="#9a3412" stroke-width="1.5"/><text x="188.0" y="237" text-anchor="middle" font-size="13" font-weight="700" fill="#7c2d12" font-family="ui-monospace,Menlo,Consolas,monospace">391</text><text x="188.0" y="253" text-anchor="middle" font-size="10" fill="#7c2d12" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Mi</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.03667;0.05111;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="210" y="220" width="44" height="42" rx="5" fill="#fed7aa" stroke="#9a3412" stroke-width="1.5"/><text x="232.0" y="237" text-anchor="middle" font-size="13" font-weight="700" fill="#7c2d12" font-family="ui-monospace,Menlo,Consolas,monospace">2534</text><text x="232.0" y="253" text-anchor="middle" font-size="10" fill="#7c2d12" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">str</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.03889;0.05333;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="258" y="220" width="36" height="42" rx="5" fill="#fed7aa" stroke="#9a3412" stroke-width="1.5"/><text x="276.0" y="237" text-anchor="middle" font-size="13" font-weight="700" fill="#7c2d12" font-family="ui-monospace,Menlo,Consolas,monospace">280</text><text x="276.0" y="253" text-anchor="middle" font-size="10" fill="#7c2d12" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">al</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.04111;0.05556;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="298" y="220" width="28" height="42" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="312.0" y="237" text-anchor="middle" font-size="13" font-weight="700" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace">11</text><text x="312.0" y="253" text-anchor="middle" font-size="10" fill="#4b5563" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">,</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.04333;0.05778;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="330" y="220" width="61" height="42" rx="5" fill="#cffafe" stroke="#0e7490" stroke-width="1.5"/><text x="360.5" y="237" text-anchor="middle" font-size="13" font-weight="700" fill="#155e75" font-family="ui-monospace,Menlo,Consolas,monospace">115613</text><text x="360.5" y="253" text-anchor="middle" font-size="10" fill="#155e75" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Gemini</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.04556;0.06000;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="395" y="220" width="28" height="42" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="409.0" y="237" text-anchor="middle" font-size="13" font-weight="700" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace">11</text><text x="409.0" y="253" text-anchor="middle" font-size="10" fill="#4b5563" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">,</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.04778;0.06222;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="427" y="220" width="40" height="42" rx="5" fill="#fee2e2" stroke="#b91c1c" stroke-width="1.5"/><text x="447.0" y="237" text-anchor="middle" font-size="13" font-weight="700" fill="#7f1d1d" font-family="ui-monospace,Menlo,Consolas,monospace">326</text><text x="447.0" y="253" text-anchor="middle" font-size="10" fill="#7f1d1d" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> and</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.05000;0.06444;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="42" y="270" width="44" height="42" rx="5" fill="#e0e7ff" stroke="#3730a3" stroke-width="1.5"/><text x="64.0" y="287" text-anchor="middle" font-size="13" font-weight="700" fill="#312e81" font-family="ui-monospace,Menlo,Consolas,monospace">4651</text><text x="64.0" y="303" text-anchor="middle" font-size="10" fill="#312e81" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Per</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.04944;0.06389;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="90" y="270" width="52" height="42" rx="5" fill="#e0e7ff" stroke="#3730a3" stroke-width="1.5"/><text x="116.0" y="287" text-anchor="middle" font-size="13" font-weight="700" fill="#312e81" font-family="ui-monospace,Menlo,Consolas,monospace">12081</text><text x="116.0" y="303" text-anchor="middle" font-size="10" fill="#312e81" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">plex</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.05167;0.06611;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="146" y="270" width="36" height="42" rx="5" fill="#e0e7ff" stroke="#3730a3" stroke-width="1.5"/><text x="164.0" y="287" text-anchor="middle" font-size="13" font-weight="700" fill="#312e81" font-family="ui-monospace,Menlo,Consolas,monospace">536</text><text x="164.0" y="303" text-anchor="middle" font-size="10" fill="#312e81" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">ity</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.05389;0.06833;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="186" y="270" width="40" height="42" rx="5" fill="#d1fae5" stroke="#065f46" stroke-width="1.5"/><text x="206.0" y="287" text-anchor="middle" font-size="13" font-weight="700" fill="#064e3b" font-family="ui-monospace,Menlo,Consolas,monospace">722</text><text x="206.0" y="303" text-anchor="middle" font-size="10" fill="#064e3b" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> all</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.05611;0.07056;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="230" y="270" width="44" height="42" rx="5" fill="#fef9c3" stroke="#854d0e" stroke-width="1.5"/><text x="252.0" y="287" text-anchor="middle" font-size="13" font-weight="700" fill="#713f12" font-family="ui-monospace,Menlo,Consolas,monospace">1199</text><text x="252.0" y="303" text-anchor="middle" font-size="10" fill="#713f12" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> use</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.05833;0.07278;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="278" y="270" width="52" height="42" rx="5" fill="#bae6fd" stroke="#075985" stroke-width="1.5"/><text x="304.0" y="287" text-anchor="middle" font-size="13" font-weight="700" fill="#0c4a6e" font-family="ui-monospace,Menlo,Consolas,monospace">20445</text><text x="304.0" y="303" text-anchor="middle" font-size="10" fill="#0c4a6e" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Byte</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.06056;0.07500;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="334" y="270" width="52" height="42" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="360.0" y="287" text-anchor="middle" font-size="13" font-weight="700" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace">10316</text><text x="360.0" y="303" text-anchor="middle" font-size="10" fill="#4b5563" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">-</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.06278;0.07722;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="390" y="270" width="44" height="42" rx="5" fill="#bae6fd" stroke="#075985" stroke-width="1.5"/><text x="412.0" y="287" text-anchor="middle" font-size="13" font-weight="700" fill="#0c4a6e" font-family="ui-monospace,Menlo,Consolas,monospace">1517</text><text x="412.0" y="303" text-anchor="middle" font-size="10" fill="#0c4a6e" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">Pair</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.06500;0.07944;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="42" y="320" width="75" height="42" rx="5" fill="#f5d0fe" stroke="#86198f" stroke-width="1.5"/><text x="79.5" y="337" text-anchor="middle" font-size="13" font-weight="700" fill="#701a75" font-family="ui-monospace,Menlo,Consolas,monospace">70820</text><text x="79.5" y="353" text-anchor="middle" font-size="10" fill="#701a75" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Encoding</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.06889;0.08333;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="121" y="320" width="36" height="42" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="139.0" y="337" text-anchor="middle" font-size="13" font-weight="700" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace">350</text><text x="139.0" y="353" text-anchor="middle" font-size="10" fill="#4b5563" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> (</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.07111;0.08556;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="161" y="320" width="28" height="42" rx="5" fill="#fde68a" stroke="#92400e" stroke-width="1.5"/><text x="175.0" y="337" text-anchor="middle" font-size="13" font-weight="700" fill="#78350f" font-family="ui-monospace,Menlo,Consolas,monospace">33</text><text x="175.0" y="353" text-anchor="middle" font-size="10" fill="#78350f" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">B</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.07333;0.08778;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="193" y="320" width="44" height="42" rx="5" fill="#fde68a" stroke="#92400e" stroke-width="1.5"/><text x="215.0" y="337" text-anchor="middle" font-size="13" font-weight="700" fill="#78350f" font-family="ui-monospace,Menlo,Consolas,monospace">3111</text><text x="215.0" y="353" text-anchor="middle" font-size="10" fill="#78350f" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">PE</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.07556;0.09000;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="241" y="320" width="52" height="42" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="267.0" y="337" text-anchor="middle" font-size="13" font-weight="700" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace">20707</text><text x="267.0" y="353" text-anchor="middle" font-size="10" fill="#4b5563" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">)?</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.07778;0.09222;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
|
||||
<text x="42" y="396" font-size="11" font-weight="600" fill="#bf360c"
|
||||
letter-spacing="0.3">Generated token IDs (autoregressive feedback)</text>
|
||||
<g opacity="0"><rect x="42" y="408" width="52" height="42" rx="5" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="68.0" y="425" text-anchor="middle" font-size="13" font-weight="700" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">12814*</text><text x="68.0" y="441" text-anchor="middle" font-size="10" fill="#bf360c" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">Yes</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.19389;0.20833;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="98" y="408" width="28" height="42" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="112.0" y="425" text-anchor="middle" font-size="13" font-weight="700" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace">11</text><text x="112.0" y="441" text-anchor="middle" font-size="10" fill="#4b5563" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">,</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.30500;0.31944;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="130" y="408" width="40" height="42" rx="5" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="150.0" y="425" text-anchor="middle" font-size="13" font-weight="700" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">722</text><text x="150.0" y="441" text-anchor="middle" font-size="10" fill="#bf360c" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> all</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.41611;0.43056;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="174" y="408" width="36" height="42" rx="5" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="192.0" y="425" text-anchor="middle" font-size="13" font-weight="700" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">328*</text><text x="192.0" y="441" text-anchor="middle" font-size="10" fill="#bf360c" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> of</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.52722;0.54167;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="214" y="408" width="47" height="42" rx="5" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="237.5" y="425" text-anchor="middle" font-size="13" font-weight="700" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">1295*</text><text x="237.5" y="441" text-anchor="middle" font-size="10" fill="#bf360c" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> them</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.63833;0.65278;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="265" y="408" width="36" height="42" rx="5" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="283.0" y="425" text-anchor="middle" font-size="13" font-weight="700" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">656*</text><text x="283.0" y="441" text-anchor="middle" font-size="10" fill="#bf360c" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> do</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.74944;0.76389;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><rect x="305" y="408" width="28" height="42" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="319.0" y="425" text-anchor="middle" font-size="13" font-weight="700" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace">13</text><text x="319.0" y="441" text-anchor="middle" font-size="10" fill="#4b5563" font-style="italic" opacity="0.65" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">.</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.86056;0.87500;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
|
||||
<!-- arrow input -> LLM -->
|
||||
<line x1="510" y1="310" x2="555" y2="310" stroke="#333" stroke-width="2.5"
|
||||
marker-end="url(#arrow)"/>
|
||||
<circle cx="515" cy="310" r="6" fill="#1976d2" opacity="0"><animate attributeName="cx" values="515;515;515;555;555;515;515;555;555;515;515;555;555;515;515;555;555;515;515;555;555;515;515;555;555;515;515;555;555;515" keyTimes="0;0.10833;0.11111;0.13056;0.13333;0.21944;0.22222;0.24167;0.24444;0.33056;0.33333;0.35278;0.35556;0.44167;0.44444;0.46389;0.46667;0.55278;0.55556;0.57500;0.57778;0.66389;0.66667;0.68611;0.68889;0.77500;0.77778;0.79722;0.80000;1" dur="18.0s" repeatCount="indefinite"/><animate attributeName="opacity" values="0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0" keyTimes="0;0.10833;0.11111;0.13056;0.13333;0.21944;0.22222;0.24167;0.24444;0.33056;0.33333;0.35278;0.35556;0.44167;0.44444;0.46389;0.46667;0.55278;0.55556;0.57500;0.57778;0.66389;0.66667;0.68611;0.68889;0.77500;0.77778;0.79722;0.80000;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
|
||||
<!-- LLM black box -->
|
||||
<rect x="560" y="240" width="240" height="140" rx="12" fill="#0d0d0d" stroke="#000"/>
|
||||
<text x="680" y="295" text-anchor="middle" fill="#fff"
|
||||
font-size="38" font-weight="bold" font-family="ui-monospace,Menlo,monospace">LLM</text>
|
||||
<text x="680" y="320" text-anchor="middle" fill="#9ca3af" font-size="12"
|
||||
font-family="ui-monospace,Menlo,monospace">f: ℤᵏ → ℝⱽ</text>
|
||||
<circle cx="660" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.11333;0.11389;0.13333;0.13611;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="680" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.11889;0.11944;0.13333;0.13611;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="700" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.12444;0.12500;0.13333;0.13611;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="660" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.22444;0.22500;0.24444;0.24722;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="680" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.23000;0.23056;0.24444;0.24722;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="700" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.23556;0.23611;0.24444;0.24722;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="660" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.33556;0.33611;0.35556;0.35833;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="680" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.34111;0.34167;0.35556;0.35833;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="700" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.34667;0.34722;0.35556;0.35833;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="660" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.44667;0.44722;0.46667;0.46944;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="680" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.45222;0.45278;0.46667;0.46944;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="700" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.45778;0.45833;0.46667;0.46944;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="660" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.55778;0.55833;0.57778;0.58056;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="680" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.56333;0.56389;0.57778;0.58056;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="700" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.56889;0.56944;0.57778;0.58056;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="660" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.66889;0.66944;0.68889;0.69167;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="680" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.67444;0.67500;0.68889;0.69167;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="700" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.68000;0.68056;0.68889;0.69167;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="660" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.78000;0.78056;0.80000;0.80278;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="680" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.78556;0.78611;0.80000;0.80278;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="700" cy="350" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.79111;0.79167;0.80000;0.80278;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
<rect x="558" y="238" width="244" height="144" rx="12" fill="none" stroke="#ffc107" stroke-width="4" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0" keyTimes="0;0.10833;0.11111;0.13333;0.13611;0.21944;0.22222;0.24444;0.24722;0.33056;0.33333;0.35556;0.35833;0.44167;0.44444;0.46667;0.46944;0.55278;0.55556;0.57778;0.58056;0.66389;0.66667;0.68889;0.69167;0.77500;0.77778;0.80000;0.80278;1" dur="18.0s" repeatCount="indefinite"/></rect>
|
||||
|
||||
<text x="680" y="402" text-anchor="middle" fill="#666" font-size="11"
|
||||
font-style="italic">no characters inside the box — only integers</text>
|
||||
|
||||
<!-- arrow LLM -> output -->
|
||||
<line x1="805" y1="310" x2="845" y2="310" stroke="#333" stroke-width="2.5"
|
||||
marker-end="url(#arrow)"/>
|
||||
<circle cx="810" cy="310" r="6" fill="#e65100" opacity="0"><animate attributeName="cx" values="810;810;810;845;845;810;810;845;845;810;810;845;845;810;810;845;845;810;810;845;845;810;810;845;845;810;810;845;845;810" keyTimes="0;0.13056;0.13333;0.15278;0.15556;0.24167;0.24444;0.26389;0.26667;0.35278;0.35556;0.37500;0.37778;0.46389;0.46667;0.48611;0.48889;0.57500;0.57778;0.59722;0.60000;0.68611;0.68889;0.70833;0.71111;0.79722;0.80000;0.81944;0.82222;1" dur="18.0s" repeatCount="indefinite"/><animate attributeName="opacity" values="0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0" keyTimes="0;0.13056;0.13333;0.15278;0.15556;0.24167;0.24444;0.26389;0.26667;0.35278;0.35556;0.37500;0.37778;0.46389;0.46667;0.48611;0.48889;0.57500;0.57778;0.59722;0.60000;0.68611;0.68889;0.70833;0.71111;0.79722;0.80000;0.81944;0.82222;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
||||
|
||||
<!-- OUTPUT PANEL -->
|
||||
<text x="1090" y="100" text-anchor="middle" font-size="11" font-weight="700"
|
||||
fill="#777" letter-spacing="1.5">PREDICTED NEXT TOKEN ID</text>
|
||||
<rect x="850" y="110" width="480" height="380" rx="10"
|
||||
fill="#fff" stroke="#ffc107" stroke-width="2"/>
|
||||
<text x="1090" y="180" text-anchor="middle" font-size="12" fill="#888"
|
||||
font-style="italic">argmax over V ≈ 200,000 logit dimensions</text>
|
||||
<g opacity="0"><text x="1070" y="225" text-anchor="middle" font-size="12" fill="#777" letter-spacing="0.5">next_token_id =</text><text x="1070" y="295" text-anchor="middle" font-size="54" font-weight="700" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">12814*</text><text x="1070" y="325" text-anchor="middle" font-size="12" fill="#888" font-style="italic">↓ decodes to</text><rect x="965" y="340" width="210" height="42" rx="8" fill="#fff3e0" stroke="#e65100" stroke-width="2"/><text x="1070" y="368" text-anchor="middle" font-size="22" font-weight="600" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">"Yes"</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.13889;0.15000;0.20556;0.21667;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><text x="1070" y="225" text-anchor="middle" font-size="12" fill="#777" letter-spacing="0.5">next_token_id =</text><text x="1070" y="295" text-anchor="middle" font-size="54" font-weight="700" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">11</text><text x="1070" y="325" text-anchor="middle" font-size="12" fill="#888" font-style="italic">↓ decodes to</text><rect x="965" y="340" width="210" height="42" rx="8" fill="#fff3e0" stroke="#e65100" stroke-width="2"/><text x="1070" y="368" text-anchor="middle" font-size="22" font-weight="600" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">","</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.25000;0.26111;0.31667;0.32778;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><text x="1070" y="225" text-anchor="middle" font-size="12" fill="#777" letter-spacing="0.5">next_token_id =</text><text x="1070" y="295" text-anchor="middle" font-size="54" font-weight="700" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">722</text><text x="1070" y="325" text-anchor="middle" font-size="12" fill="#888" font-style="italic">↓ decodes to</text><rect x="965" y="340" width="210" height="42" rx="8" fill="#fff3e0" stroke="#e65100" stroke-width="2"/><text x="1070" y="368" text-anchor="middle" font-size="22" font-weight="600" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">" all"</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.36111;0.37222;0.42778;0.43889;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><text x="1070" y="225" text-anchor="middle" font-size="12" fill="#777" letter-spacing="0.5">next_token_id =</text><text x="1070" y="295" text-anchor="middle" font-size="54" font-weight="700" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">328*</text><text x="1070" y="325" text-anchor="middle" font-size="12" fill="#888" font-style="italic">↓ decodes to</text><rect x="965" y="340" width="210" height="42" rx="8" fill="#fff3e0" stroke="#e65100" stroke-width="2"/><text x="1070" y="368" text-anchor="middle" font-size="22" font-weight="600" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">" of"</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.47222;0.48333;0.53889;0.55000;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><text x="1070" y="225" text-anchor="middle" font-size="12" fill="#777" letter-spacing="0.5">next_token_id =</text><text x="1070" y="295" text-anchor="middle" font-size="54" font-weight="700" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">1295*</text><text x="1070" y="325" text-anchor="middle" font-size="12" fill="#888" font-style="italic">↓ decodes to</text><rect x="965" y="340" width="210" height="42" rx="8" fill="#fff3e0" stroke="#e65100" stroke-width="2"/><text x="1070" y="368" text-anchor="middle" font-size="22" font-weight="600" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">" them"</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.58333;0.59444;0.65000;0.66111;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><text x="1070" y="225" text-anchor="middle" font-size="12" fill="#777" letter-spacing="0.5">next_token_id =</text><text x="1070" y="295" text-anchor="middle" font-size="54" font-weight="700" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">656*</text><text x="1070" y="325" text-anchor="middle" font-size="12" fill="#888" font-style="italic">↓ decodes to</text><rect x="965" y="340" width="210" height="42" rx="8" fill="#fff3e0" stroke="#e65100" stroke-width="2"/><text x="1070" y="368" text-anchor="middle" font-size="22" font-weight="600" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">" do"</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.69444;0.70556;0.76111;0.77222;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<g opacity="0"><text x="1070" y="225" text-anchor="middle" font-size="12" fill="#777" letter-spacing="0.5">next_token_id =</text><text x="1070" y="295" text-anchor="middle" font-size="54" font-weight="700" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">13</text><text x="1070" y="325" text-anchor="middle" font-size="12" fill="#888" font-style="italic">↓ decodes to</text><rect x="965" y="340" width="210" height="42" rx="8" fill="#fff3e0" stroke="#e65100" stroke-width="2"/><text x="1070" y="368" text-anchor="middle" font-size="22" font-weight="600" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">"."</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.80556;0.81667;0.87222;0.88333;1" dur="18.0s" repeatCount="indefinite"/></g>
|
||||
<text x="1090" y="430" text-anchor="middle" font-size="11" fill="#777"
|
||||
font-style="italic">decoding text is post-processing — the model never produces strings</text>
|
||||
|
||||
<!-- Feedback loop -->
|
||||
<path d="M 1090 510 Q 680 568 270 510"
|
||||
stroke="#9c27b0" stroke-width="2.5" fill="none"
|
||||
stroke-dasharray="6,5" marker-end="url(#arrowFB)">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-22"
|
||||
dur="0.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<text x="680" y="565" text-anchor="middle" fill="#9c27b0" font-size="13"
|
||||
font-style="italic" font-weight="600">
|
||||
next_token_id appended to input_ids → next forward pass
|
||||
</text>
|
||||
|
||||
<text x="680" y="588" text-anchor="middle" font-size="10" fill="#9ca3af" font-style="italic">
|
||||
* Response IDs are illustrative estimates; prompt IDs are from OpenAI's o200k_base tokenizer.
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 41 KiB |
Reference in New Issue
Block a user