Shayan Rais
e53739367a
Three-panel SVG (input context, LLM black box, predicted next token) with 7-iteration loop generating "The capital of Japan is Tokyo." from the prompt "What is the capital of Japan?". Includes purple feedback loop showing each predicted token appended back into the input. Co-Authored-By: Claude <noreply@anthropic.com>
124 lines
20 KiB
XML
124 lines
20 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 500" width="1200" height="500"
|
|
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="1200" height="500" fill="#fafbfc"/>
|
|
|
|
<text x="600" y="35" text-anchor="middle" font-size="22" font-weight="bold" fill="#1a1a1a">
|
|
How an LLM generates text (autoregressive)
|
|
</text>
|
|
<text x="600" y="58" text-anchor="middle" font-size="13" fill="#666">
|
|
Each predicted token is appended to the input, then fed back into the LLM
|
|
</text>
|
|
|
|
<text x="600" y="85" 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="600" y="85" 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="600" y="85" 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="600" y="85" 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="600" y="85" 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="600" y="85" 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="600" y="85" 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="225" y="100" text-anchor="middle" font-size="11" font-weight="700"
|
|
fill="#777" letter-spacing="1.5">INPUT (CONTEXT)</text>
|
|
<rect x="30" y="110" width="400" height="280" rx="10"
|
|
fill="#fff" stroke="#c5cee0" stroke-width="2"/>
|
|
|
|
<text x="42" y="148" font-size="11" font-weight="600" fill="#888"
|
|
letter-spacing="0.5">Original prompt</text>
|
|
<g opacity="0"><rect x="42" y="165" width="52" height="28" rx="6" fill="#e3f2fd" stroke="#1976d2" stroke-width="1.5"/><text x="68.0" y="184" text-anchor="middle" font-size="14" fill="#0d47a1" font-family="ui-monospace,Menlo,Consolas,monospace">What</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.00500;0.01944;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
|
<g opacity="0"><rect x="100" y="165" width="36" height="28" rx="6" fill="#e3f2fd" stroke="#1976d2" stroke-width="1.5"/><text x="118.0" y="184" text-anchor="middle" font-size="14" fill="#0d47a1" font-family="ui-monospace,Menlo,Consolas,monospace">is</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.01333;0.02778;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
|
<g opacity="0"><rect x="142" y="165" width="44" height="28" rx="6" fill="#e3f2fd" stroke="#1976d2" stroke-width="1.5"/><text x="164.0" y="184" text-anchor="middle" font-size="14" fill="#0d47a1" font-family="ui-monospace,Menlo,Consolas,monospace">the</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="192" y="165" width="76" height="28" rx="6" fill="#e3f2fd" stroke="#1976d2" stroke-width="1.5"/><text x="230.0" y="184" text-anchor="middle" font-size="14" fill="#0d47a1" font-family="ui-monospace,Menlo,Consolas,monospace">capital</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="274" y="165" width="36" height="28" rx="6" fill="#e3f2fd" stroke="#1976d2" stroke-width="1.5"/><text x="292.0" y="184" text-anchor="middle" font-size="14" fill="#0d47a1" font-family="ui-monospace,Menlo,Consolas,monospace">of</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.03833;0.05278;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
|
<g opacity="0"><rect x="316" y="165" width="60" height="28" rx="6" fill="#e3f2fd" stroke="#1976d2" stroke-width="1.5"/><text x="346.0" y="184" text-anchor="middle" font-size="14" fill="#0d47a1" font-family="ui-monospace,Menlo,Consolas,monospace">Japan</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.04667;0.06111;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
|
<g opacity="0"><rect x="382" y="165" width="28" height="28" rx="6" fill="#e3f2fd" stroke="#1976d2" stroke-width="1.5"/><text x="396.0" y="184" text-anchor="middle" font-size="14" fill="#0d47a1" font-family="ui-monospace,Menlo,Consolas,monospace">?</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.05500;0.06944;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
|
|
|
|
<text x="42" y="228" font-size="11" font-weight="600" fill="#bf360c"
|
|
letter-spacing="0.5">Generated tokens (autoregressive)</text>
|
|
<g opacity="0"><rect x="42" y="245" width="44" height="28" rx="6" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="64.0" y="264" text-anchor="middle" font-size="14" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">The</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="92" y="245" width="76" height="28" rx="6" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="130.0" y="264" text-anchor="middle" font-size="14" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">capital</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="174" y="245" width="36" height="28" rx="6" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="192.0" y="264" text-anchor="middle" font-size="14" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">of</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="216" y="245" width="60" height="28" rx="6" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="246.0" y="264" text-anchor="middle" font-size="14" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">Japan</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="282" y="245" width="36" height="28" rx="6" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="300.0" y="264" text-anchor="middle" font-size="14" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">is</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="324" y="245" width="60" height="28" rx="6" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="354.0" y="264" text-anchor="middle" font-size="14" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">Tokyo</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="390" y="245" width="28" height="28" rx="6" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="404.0" y="264" text-anchor="middle" font-size="14" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace">.</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="430" y1="270" x2="475" y2="270" stroke="#333" stroke-width="2.5"
|
|
marker-end="url(#arrow)"/>
|
|
<circle cx="435" cy="270" r="6" fill="#1976d2" opacity="0"><animate attributeName="cx" values="435;435;435;475;475;435;435;475;475;435;435;475;475;435;435;475;475;435;435;475;475;435;435;475;475;435;435;475;475;435" 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="480" y="215" width="240" height="120" rx="12" fill="#0d0d0d" stroke="#000"/>
|
|
<text x="600" y="270" text-anchor="middle" fill="#fff"
|
|
font-size="40" font-weight="bold" font-family="ui-monospace,Menlo,monospace">LLM</text>
|
|
<text x="600" y="293" text-anchor="middle" fill="#888" font-size="11"
|
|
letter-spacing="0.5">(black box)</text>
|
|
<circle cx="580" cy="312" 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="600" cy="312" 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="620" cy="312" 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="580" cy="312" 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="600" cy="312" 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="620" cy="312" 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="580" cy="312" 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="600" cy="312" 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="620" cy="312" 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="580" cy="312" 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="600" cy="312" 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="620" cy="312" 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="580" cy="312" 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="600" cy="312" 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="620" cy="312" 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="580" cy="312" 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="600" cy="312" 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="620" cy="312" 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="580" cy="312" 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="600" cy="312" 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="620" cy="312" 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="478" y="213" width="244" height="124" 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>
|
|
|
|
<!-- arrow LLM -> output -->
|
|
<line x1="725" y1="270" x2="765" y2="270" stroke="#333" stroke-width="2.5"
|
|
marker-end="url(#arrow)"/>
|
|
<circle cx="725" cy="270" r="6" fill="#e65100" opacity="0"><animate attributeName="cx" values="725;725;725;765;765;725;725;765;765;725;725;765;765;725;725;765;765;725;725;765;765;725;725;765;765;725;725;765;765;725" keyTimes="0;0.13056;0.13333;0.15000;0.15278;0.24167;0.24444;0.26111;0.26389;0.35278;0.35556;0.37222;0.37500;0.46389;0.46667;0.48333;0.48611;0.57500;0.57778;0.59444;0.59722;0.68611;0.68889;0.70556;0.70833;0.79722;0.80000;0.81667;0.81944;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.15000;0.15278;0.24167;0.24444;0.26111;0.26389;0.35278;0.35556;0.37222;0.37500;0.46389;0.46667;0.48333;0.48611;0.57500;0.57778;0.59444;0.59722;0.68611;0.68889;0.70556;0.70833;0.79722;0.80000;0.81667;0.81944;1" dur="18.0s" repeatCount="indefinite"/></circle>
|
|
|
|
<!-- OUTPUT PANEL -->
|
|
<text x="970" y="100" text-anchor="middle" font-size="11" font-weight="700"
|
|
fill="#777" letter-spacing="1.5">PREDICTED NEXT TOKEN</text>
|
|
<rect x="770" y="110" width="400" height="280" rx="10"
|
|
fill="#fff" stroke="#ffc107" stroke-width="2"/>
|
|
<text x="970" y="200" text-anchor="middle" font-size="12" fill="#888"
|
|
font-style="italic">argmax P(next token | input)</text>
|
|
<g opacity="0"><rect x="845" y="225" width="250" height="60" rx="10" fill="#fff3e0" stroke="#e65100" stroke-width="2.5"/><text x="970" y="265" text-anchor="middle" font-size="30" fill="#bf360c" font-weight="700" font-family="ui-monospace,Menlo,Consolas,monospace">The</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"><rect x="845" y="225" width="250" height="60" rx="10" fill="#fff3e0" stroke="#e65100" stroke-width="2.5"/><text x="970" y="265" text-anchor="middle" font-size="30" fill="#bf360c" font-weight="700" font-family="ui-monospace,Menlo,Consolas,monospace">capital</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"><rect x="845" y="225" width="250" height="60" rx="10" fill="#fff3e0" stroke="#e65100" stroke-width="2.5"/><text x="970" y="265" text-anchor="middle" font-size="30" fill="#bf360c" font-weight="700" font-family="ui-monospace,Menlo,Consolas,monospace">of</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"><rect x="845" y="225" width="250" height="60" rx="10" fill="#fff3e0" stroke="#e65100" stroke-width="2.5"/><text x="970" y="265" text-anchor="middle" font-size="30" fill="#bf360c" font-weight="700" font-family="ui-monospace,Menlo,Consolas,monospace">Japan</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"><rect x="845" y="225" width="250" height="60" rx="10" fill="#fff3e0" stroke="#e65100" stroke-width="2.5"/><text x="970" y="265" text-anchor="middle" font-size="30" fill="#bf360c" font-weight="700" font-family="ui-monospace,Menlo,Consolas,monospace">is</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"><rect x="845" y="225" width="250" height="60" rx="10" fill="#fff3e0" stroke="#e65100" stroke-width="2.5"/><text x="970" y="265" text-anchor="middle" font-size="30" fill="#bf360c" font-weight="700" font-family="ui-monospace,Menlo,Consolas,monospace">Tokyo</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"><rect x="845" y="225" width="250" height="60" rx="10" fill="#fff3e0" stroke="#e65100" stroke-width="2.5"/><text x="970" y="265" text-anchor="middle" font-size="30" fill="#bf360c" font-weight="700" font-family="ui-monospace,Menlo,Consolas,monospace">.</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>
|
|
|
|
<!-- Feedback loop -->
|
|
<path d="M 970 395 Q 600 470 230 395"
|
|
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="600" y="488" text-anchor="middle" fill="#9c27b0" font-size="13"
|
|
font-style="italic" font-weight="600">
|
|
predicted token appended to input → next iteration
|
|
</text>
|
|
</svg>
|