| <div class="nte-wrap"> |
| <header> |
| <div> |
| <p class="eyebrow">LLM seminar · MA Design for Digital Futures · TH Nürnberg</p> |
| <h1>What comes next?</h1> |
| </div> |
| <div class="hright"> |
| <p class="lede">Type any text. A small language model, Qwen2.5-1.5B, splits it into tokens and gives every possible next token a probability. Pick one, roll the dice, or change the temperature.</p> |
| <span class="status" id="status"><span class="dot"></span><span id="status-text">Starting…</span></span> |
| </div> |
| </header> |
|
|
| <section class="input" aria-label="Start text"> |
| <div class="input-head"> |
| <h2 id="input-title">Start text</h2> |
| <div class="seg" role="group" aria-label="How the model reads the text"> |
| <button type="button" data-mode="raw" aria-pressed="true">Continue the text</button> |
| <button type="button" data-mode="chat" aria-pressed="false">Answer as assistant</button> |
| </div> |
| </div> |
| <div class="persona" id="persona" hidden> |
| <div class="field-head"> |
| <span class="field-label">System prompt <span class="field-sub">the assistant's personality, read before every message</span></span> |
| <span class="pcount" id="pcount"></span> |
| </div> |
| <div class="chips" id="personas" role="group" aria-label="Personas"></div> |
| <textarea id="system" rows="4" spellcheck="false" aria-label="System prompt"></textarea> |
| </div> |
| <div class="field-head" id="text-head" hidden><span class="field-label">Your message</span></div> |
| <textarea id="text" rows="2" spellcheck="false" aria-label="Start text"></textarea> |
| <p class="hint" id="raw-hint">Want to give the model a personality? Switch to “Answer as assistant”. Only the chat format has a system prompt. In plain text, the persona would have to be part of the text itself.</p> |
| <div class="chips" id="presets" role="group" aria-label="Examples"></div> |
| <div class="toks-head"> |
| <span class="n" id="ntok">…</span><span class="u" id="ntok-u">tokens the model reads</span> |
| <span class="hov" id="hov">Point at a token to see its number.</span> |
| </div> |
| <div class="toks" id="toks" aria-live="polite"></div> |
| </section> |
|
|
| <div class="sentence" id="sentence" aria-live="polite"></div> |
| <div class="msg" id="msg" hidden></div> |
|
|
| <section class="board"> |
| <div class="panel"> |
| <div class="panel-head"><h2>The next token</h2><small id="timing"></small></div> |
| <div class="strip-wrap"> |
| <div class="strip" id="strip"><div class="pointer" id="pointer" hidden></div></div> |
| <span class="strip-cap">All possible next tokens laid end to end, most likely first. Rolling the dice drops a pin at a random point on this strip.</span> |
| </div> |
| <div class="bars" id="bars"><div class="placeholder">Waiting for the model…</div></div> |
| <div class="legend"> |
| <span><i class="sw"></i>probability at this temperature</span> |
| <span><i class="sw ghost"></i>the model's own probability (temperature 1)</span> |
| <span><i class="sw top"></i>most likely</span> |
| </div> |
| </div> |
|
|
| <div class="side"> |
| <div class="panel"> |
| <h2>Temperature</h2> |
| <div class="temp-read"><span class="t" id="tval">1.0</span><span class="what" id="twhat"></span></div> |
| <input type="range" id="temp" min="0" max="40" step="1" value="20" aria-label="Temperature"> |
| <div class="ticks"><span>0</span><span>0.5</span><span>1</span><span>1.5</span><span>2</span></div> |
| <p class="explain">At temperature T, every probability is raised to the power 1/T, then the list is scaled back to 100%. Below 1 the favourite gets stronger. Above 1 the rare tokens catch up. At 0 the model always takes the favourite.</p> |
| </div> |
| <div class="panel"> |
| <h2>Write</h2> |
| <div class="ctrl"> |
| <button type="button" class="primary" id="roll"><b>Roll the dice</b><kbd>Space</kbd></button> |
| <button type="button" id="greedy"><b>Take the favourite</b><kbd>F</kbd></button> |
| <button type="button" id="auto"><b>Write on its own</b><kbd>A</kbd></button> |
| <button type="button" id="undo"><b>Undo</b><kbd>Backspace</kbd></button> |
| <button type="button" id="reset"><b>Clear the answer</b><kbd>C</kbd></button> |
| <button type="button" id="next-preset"><b>Next example</b><kbd>N</kbd></button> |
| </div> |
| <p class="explain">Or click any token in the list. Click a word in the sentence to go back to that point. <kbd>↑</kbd> <kbd>↓</kbd> change the temperature. Shortcuts work when the cursor is not in the text box (press <kbd>Esc</kbd>).</p> |
| </div> |
| </div> |
| </section> |
|
|
| <p class="foot" id="foot">Everything you type is processed by this demo on Hugging Face's servers and is not stored, but please do not enter personal data.</p> |
| </div> |
|
|
