| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>tiny-llm demo</title> |
| <style> |
| :root { |
| color-scheme: light; |
| --page: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781; |
| --grid: #e1e0d9; --ring: rgba(11,11,11,0.10); --accent: #2a78d6; --on-accent: #fff; |
| --gen: #e8f1fc; --bad: #d03b3b; --warn: #fab219; |
| } |
| @media (prefers-color-scheme: dark) { |
| :root:not([data-theme="light"]) { |
| color-scheme: dark; |
| --page: #0d0d0d; --surface: #1a1a19; --ink: #f0efec; --ink-2: #c3c2b7; --muted: #898781; |
| --grid: #2c2c2a; --ring: rgba(255,255,255,0.10); --accent: #3987e5; --gen: #12243a; |
| } |
| } |
| :root[data-theme="dark"] { |
| color-scheme: dark; |
| --page: #0d0d0d; --surface: #1a1a19; --ink: #f0efec; --ink-2: #c3c2b7; --muted: #898781; |
| --grid: #2c2c2a; --ring: rgba(255,255,255,0.10); --accent: #3987e5; --gen: #12243a; |
| } |
| * { box-sizing: border-box; } |
| body { margin: 0; background: var(--page); color: var(--ink); |
| font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; } |
| main { max-width: 760px; margin: 0 auto; padding: 28px 16px 48px; } |
| h1 { font-size: 24px; margin: 0; font-weight: 600; } |
| .lede { color: var(--ink-2); margin: 4px 0 20px; } |
| a { color: var(--accent); } |
| .panel { background: var(--surface); border: 1px solid var(--ring); border-radius: 12px; padding: 16px; } |
| label { font-size: 14px; color: var(--ink-2); } |
| textarea { width: 100%; min-height: 84px; resize: vertical; margin: 6px 0 4px; padding: 10px 12px; |
| font: inherit; color: var(--ink); background: var(--page); border: 1px solid var(--ring); border-radius: 8px; } |
| textarea:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } |
| .count { font-size: 12px; color: var(--muted); text-align: right; } |
| .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; } |
| .chip { font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 999px; cursor: pointer; |
| color: var(--ink-2); background: transparent; border: 1px solid var(--ring); } |
| .chip:hover { color: var(--ink); border-color: var(--muted); } |
| .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; } |
| .controls div { display: flex; flex-direction: column; } |
| .controls output { color: var(--ink); font-variant-numeric: tabular-nums; } |
| input[type=range] { accent-color: var(--accent); width: 100%; } |
| .actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; } |
| button.primary, button.secondary { font: inherit; font-size: 15px; padding: 8px 18px; border-radius: 8px; cursor: pointer; } |
| button.primary { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); } |
| button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--ring); } |
| button:disabled { opacity: 0.5; cursor: default; } |
| .hint { font-size: 13px; color: var(--muted); } |
| .story { margin-top: 16px; min-height: 120px; white-space: pre-wrap; font-size: 17px; line-height: 1.65; } |
| .story .p { color: var(--ink-2); } |
| .story .g { background: var(--gen); border-radius: 3px; } |
| .story .placeholder { color: var(--muted); } |
| .cursor { display: inline-block; width: 8px; height: 1.1em; vertical-align: text-bottom; background: var(--accent); |
| margin-left: 1px; animation: blink 1s steps(1) infinite; } |
| @keyframes blink { 50% { opacity: 0; } } |
| @media (prefers-reduced-motion: reduce) { .cursor { animation: none; } } |
| .stats { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; font-size: 13px; color: var(--ink-2); |
| font-variant-numeric: tabular-nums; } |
| .stats b { color: var(--ink); font-weight: 600; } |
| .msg { display: none; margin-top: 12px; padding: 8px 12px; border-radius: 8px; font-size: 14px; |
| border: 1px solid var(--ring); border-left: 4px solid var(--warn); } |
| .msg.show { display: block; } |
| .msg.error { border-left-color: var(--bad); } |
| footer { color: var(--ink-2); font-size: 13px; margin-top: 28px; } |
| footer p { margin: 6px 0; } |
| footer details { margin: 6px 0; } |
| footer summary { cursor: pointer; color: var(--ink); } |
| footer ul { margin: 6px 0; padding-left: 20px; } |
| @media (max-width: 520px) { .controls { grid-template-columns: 1fr; } } |
| </style> |
| </head> |
| <body> |
| <main> |
| <h1>tiny-llm</h1> |
| <p class="lede">A small language model trained from scratch on children's stories. |
| Start a story and it writes the rest. |
| It knows simple stories, not facts, so it can't answer questions or follow instructions.</p> |
|
|
| <section class="panel"> |
| <label for="prompt">Story opening</label> |
| <textarea id="prompt" maxlength="600" spellcheck="true">Once upon a time, there was a little dog named Max.</textarea> |
| <div class="count" id="count"></div> |
| <div class="chips" id="chips" aria-label="Example openings"></div> |
| <div class="controls"> |
| <div><label for="len">Length: <output id="len-out"></output> tokens</label> |
| <input type="range" id="len" min="20" max="250" step="10" value="120"></div> |
| <div><label for="temp">Temperature: <output id="temp-out"></output></label> |
| <input type="range" id="temp" min="0" max="1.5" step="0.1" value="0.8"></div> |
| </div> |
| <div class="actions"> |
| <button class="primary" id="go">Write the story</button> |
| <button class="secondary" id="stop" disabled>Stop</button> |
| <span class="hint">Ctrl + Enter. Lower temperature: safer and more repetitive; higher: more surprising.</span> |
| </div> |
| </section> |
|
|
| <div class="msg" id="msg" role="status"></div> |
| <div class="story" id="story" aria-live="polite"><span class="placeholder">The story appears here, one token at a time.</span></div> |
| <div class="stats" id="stats"></div> |
|
|
| <footer> |
| <p>Model: <span id="model">loading…</span> · |
| <a href="https://huggingface.co/CoolDip00/tiny-llm-tinystories-30m">model card</a> · |
| <a href="https://github.com/cooldip00/tiny-llm">source on GitHub</a> · |
| <a href="status">server status</a></p> |
| <p>This demo runs on a shared CPU, so it is slower than the GPU numbers in the project README, |
| and it can be busy or asleep for a minute.</p> |
| <p>Privacy: your text isn't stored. The server keeps request metadata (timings, token counts and a |
| salted hash of your address), never the opening or the story.</p> |
| <details> |
| <summary>What is logged</summary> |
| <ul> |
| <li>Per request: time, status, timings (queue wait, time to first token, total), token counts, |
| whether it streamed, why it stopped, the error message if any, and how busy the server was.</li> |
| <li>Your address only as a salted hash: it can tell repeat visits apart, not who you are. |
| Raw addresses are never stored.</li> |
| <li>Never the opening you type or the story the model writes.</li> |
| <li>The log is kept in a private dataset that only the project owner can read, and is deleted after 30 days.</li> |
| </ul> |
| </details> |
| </footer> |
| </main> |
| <script> |
| "use strict"; |
| const EXAMPLES = [ |
| "Once upon a time, there was a little dog named Max.", |
| "Lily found a shiny key under her bed.", |
| "The sun was hot, and Tom wanted to swim.", |
| "One day, a small bird could not fly.", |
| "Mia and her mom baked a big cake.", |
| ]; |
| const MAX_CHARS = 600; |
| const $ = (id) => document.getElementById(id); |
| const prompt = $("prompt"), story = $("story"), stats = $("stats"), msg = $("msg"); |
| let ctrl = null; |
| |
| for (const ex of EXAMPLES) { |
| const b = document.createElement("button"); |
| b.className = "chip"; b.type = "button"; b.textContent = ex; |
| b.onclick = () => { prompt.value = ex; updateCount(); prompt.focus(); }; |
| $("chips").appendChild(b); |
| } |
| function updateCount() { $("count").textContent = `${prompt.value.length} / ${MAX_CHARS}`; } |
| function bindRange(id, fmt) { |
| const r = $(id), o = $(id + "-out"); |
| const f = () => { o.textContent = fmt(r.value); }; |
| r.oninput = f; f(); |
| } |
| bindRange("len", (v) => v); |
| bindRange("temp", (v) => Number(v).toFixed(1)); |
| prompt.oninput = updateCount; updateCount(); |
| prompt.onkeydown = (e) => { if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) { e.preventDefault(); start(); } }; |
| $("go").onclick = start; |
| $("stop").onclick = () => ctrl && ctrl.abort(); |
| |
| fetch("v1/models").then((r) => r.json()).then((d) => { |
| const m = d.data && d.data[0]; |
| $("model").textContent = m ? (m.version || m.id) : "unknown"; |
| }).catch(() => { $("model").textContent = "unavailable"; }); |
| |
| function say(text, kind) { |
| msg.textContent = text; |
| msg.className = "msg show" + (kind === "error" ? " error" : ""); |
| } |
| function stat(label, value) { |
| const s = document.createElement("span"); |
| const b = document.createElement("b"); b.textContent = value; |
| s.append(document.createTextNode(label + " "), b); |
| return s; |
| } |
| function showStats(t) { |
| const items = []; |
| if (t.ttft !== null) items.push(stat("First token", Math.round(t.ttft * 1000) + " ms")); |
| if (t.tokens > 1 && t.genS > 0) items.push(stat("Speed", ((t.tokens - 1) / t.genS).toFixed(1) + " tokens/s")); |
| items.push(stat("Tokens", String(t.tokens))); |
| if (t.finish) items.push(stat("Stopped because", t.finish === "stop" ? "the story ended" : |
| t.finish === "length" ? "it reached the length" : t.finish)); |
| stats.replaceChildren(...items); |
| } |
| function errorText(status, body, retry) { |
| if (status === 429) return `The server is busy right now. Please try again in ${retry || "a few"} seconds.`; |
| if (status === 503) return "The model is still loading (or the server is waking up). Try again in a minute."; |
| if (status === 504) return "That took too long and was stopped. Try a shorter length."; |
| if (status === 400) return "The request wasn't accepted: " + ((body && body.error && body.error.message) || "bad input"); |
| return `Something went wrong on the server (${status}). Please try again.`; |
| } |
| |
| async function start() { |
| if (ctrl) return; |
| const text = prompt.value.slice(0, MAX_CHARS); |
| if (!text.trim()) { say("Write the start of a story first."); return; } |
| msg.className = "msg"; |
| const pSpan = document.createElement("span"), gSpan = document.createElement("span"), cur = document.createElement("span"); |
| pSpan.className = "p"; gSpan.className = "g"; cur.className = "cursor"; |
| pSpan.textContent = text; |
| story.replaceChildren(pSpan, gSpan, cur); |
| stats.replaceChildren(); |
| ctrl = new AbortController(); |
| $("go").disabled = true; $("stop").disabled = false; |
| const t = { t0: performance.now(), ttft: null, tFirst: 0, genS: 0, tokens: 0, finish: null }; |
| try { |
| const r = await fetch("v1/completions", { |
| method: "POST", headers: { "content-type": "application/json" }, signal: ctrl.signal, |
| body: JSON.stringify({ prompt: text, max_tokens: Number($("len").value), |
| temperature: Number($("temp").value), stream: true }), |
| }); |
| if (!r.ok) { |
| let body = null; try { body = await r.json(); } catch (e) {} |
| throw { status: r.status, body, retry: r.headers.get("retry-after") }; |
| } |
| const reader = r.body.getReader(), dec = new TextDecoder(); |
| let buf = ""; |
| for (;;) { |
| const { value, done } = await reader.read(); |
| if (done) break; |
| buf += dec.decode(value, { stream: true }); |
| let i; |
| while ((i = buf.indexOf("\n\n")) >= 0) { |
| const line = buf.slice(0, i).trim(); buf = buf.slice(i + 2); |
| if (!line.startsWith("data:")) continue; |
| const data = line.slice(5).trim(); |
| if (data === "[DONE]") continue; |
| const ev = JSON.parse(data); |
| if (ev.error) throw { status: ev.error.code, body: ev }; |
| const ch = ev.choices[0], now = performance.now(); |
| if (t.ttft === null) { t.ttft = (now - t.t0) / 1000; t.tFirst = now; } |
| t.genS = (now - t.tFirst) / 1000; |
| if (ev.usage) t.tokens = ev.usage.completion_tokens; else t.tokens += 1; |
| if (ch.text) gSpan.textContent += ch.text; |
| if (ch.finish_reason) t.finish = ch.finish_reason; |
| showStats(t); |
| } |
| } |
| } catch (e) { |
| if (e && e.name === "AbortError") { t.finish = "you pressed Stop"; showStats(t); } |
| else if (e && e.status) say(errorText(e.status, e.body, e.retry), e.status === 429 || e.status === 503 ? "warn" : "error"); |
| else say("Can't reach the server. Check your connection, or try again in a minute.", "error"); |
| } finally { |
| cur.remove(); |
| ctrl = null; |
| $("go").disabled = false; $("stop").disabled = true; |
| } |
| } |
| </script> |
| </body> |
| </html> |
|
|
