demo.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>TinyGPT Playground</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+KR:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap">
<link rel="stylesheet" href="style.css">
<style>
/* Layout: one prompt box, completions stream in below it word by word, nothing else on stage. */
.stage { max-width: 44rem; margin-inline: auto; padding-block: 3rem 2rem; display: grid; gap: 1.5rem; }
.stage h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }

.ask { display: flex; gap: 0.5rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 0.45rem; }
.ask:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ask input { flex: 1; min-width: 0; font: inherit; font-size: 1.15rem; padding: 0.5rem 0.7rem; border: 0; background: transparent; color: var(--ink); outline: none; }
.ask button { font: inherit; font-weight: 600; padding: 0.5rem 1.1rem; border-radius: 8px; border: 0; background: var(--accent); color: var(--surface); cursor: pointer; }
.ask button:focus-visible, .try:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tries { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: -0.6rem; }
.try { font: inherit; font-size: var(--s-sm); padding: 0.2rem 0.75rem; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--muted); cursor: pointer; }
.try:hover { color: var(--accent); border-color: var(--accent); }
.msg { font-size: var(--s-sm); color: var(--warn); }

.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.log li { display: grid; gap: 0.3rem; }
.line { font-family: var(--f-display); font-size: clamp(1.35rem, 3.6vw, 1.85rem); line-height: 1.35; }
.line .you { color: var(--muted); }
.line .gpt { color: var(--ink); }
.cursor { display: inline-block; width: 0.5em; height: 1em; margin-left: 0.1em; background: var(--accent); vertical-align: -0.12em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.meta { font-size: var(--s-xs); color: var(--muted); }
.meta .from { color: var(--accent); }
.meta .fresh { color: var(--back); }
.log li + li .line { font-size: clamp(1.1rem, 2.8vw, 1.35rem); }
.log li + li { opacity: 0.75; }

details.corpus { border-top: 1px solid var(--rule); padding-top: 1rem; font-size: var(--s-sm); }
details.corpus summary { cursor: pointer; color: var(--muted); }
details.corpus summary b { color: var(--ink); }
details.corpus ol { margin: 0.8rem 0 0; padding-left: 2rem; columns: 2 18rem; column-gap: 2rem; font-family: var(--f-mono); font-size: 0.8rem; color: var(--muted); }
details.corpus li { break-inside: avoid; padding: 0.1rem 0.3rem; border-radius: 3px; }
details.corpus li.hit { background: var(--accent-soft); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }
</style>
</head>
<body>
<div class="page">

  <div class="bar wide">
    <nav class="tabs" aria-label="Pages">
      <a href="index.html"><span class="en">How it works</span><span class="ko">설명</span></a>
      <a href="demo.html" aria-current="page"><span class="en">Try it</span><span class="ko">데모</span></a>
    </nav>
    <div class="bar-r">
      <div class="seg" role="group" aria-label="Language">
        <button type="button" id="lang-en" data-set-lang="en" aria-pressed="true">EN</button>
        <button type="button" id="lang-ko" data-set-lang="ko" aria-pressed="false">한국어</button>
      </div>
      <a class="gh" href="https://github.com/ColumnBack/tinygpt-numpy">GitHub ↗</a>
    </div>
  </div>

  <main class="stage">
    <div style="display:grid; gap:0.5rem">
      <h1><span class="en">Start a sentence. TinyGPT finishes it.</span><span class="ko">문장을 시작하면, TinyGPT가 끝냅니다.</span></h1>
      <p class="muted"><span class="en">A 77,952-parameter GPT, written in NumPy, running in your browser.</span><span class="ko">NumPy로 만든 77,952개 파라미터 GPT가 브라우저에서 돌아갑니다.</span></p>
    </div>

    <form class="ask" id="ask">
      <input id="prompt" type="text" value="the dog" autocomplete="off" spellcheck="false" aria-label="Start of a sentence">
      <button type="submit"><span class="en">Complete</span><span class="ko">완성</span></button>
    </form>
    <div class="tries" id="tries"></div>
    <p class="msg" id="msg" hidden></p>

    <ol class="log" id="log" aria-live="polite"></ol>

    <details class="corpus">
      <summary><span class="en">It learned from just <b>36 sentences</b>. Show them</span><span class="ko">학습한 문장은 <b>36개</b>뿐입니다. 보기</span></summary>
      <ol id="corpus"></ol>
    </details>
  </main>
</div>

<script src="site.js"></script>
<script src="model.js"></script>
<script src="tinygpt-web.js"></script>
<script>
(function () {
  "use strict";
  var model = new TinyGPTWeb.Model(window.TINYGPT_MODEL);
  var BOS = model.id["<BOS>"];
  var TEMP = 0.7, STEP_MS = 140, KEEP = 5;
  var sentences = model.sentences.map(function (s) { return s.toLowerCase(); });
  var reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var $ = function (id) { return document.getElementById(id); };
  var timer = null;

  function esc(s) { return s.replace(/[&<>"]/g, function (c) { return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]; }); }
  function bi(en, ko) { return '<span class="en">' + en + '</span><span class="ko">' + ko + '</span>'; }

  ["the cat", "my sister", "we", "she", "the teacher", "i"].forEach(function (s) {
    var b = document.createElement("button");
    b.type = "button"; b.className = "try"; b.textContent = s;
    b.addEventListener("click", function () { $("prompt").value = s; complete(s); });
    $("tries").appendChild(b);
  });

  var corpus = $("corpus");
  sentences.forEach(function (s) {
    var li = document.createElement("li");
    li.textContent = s;
    corpus.appendChild(li);
  });

  function complete(text, instant) {
    var ws = text.trim().toLowerCase().split(/\s+/).filter(Boolean);
    if (!ws.length) return;
    var unknown = ws.filter(function (w) { return !(w in model.id) || w.charAt(0) === "<"; });
    var msg = $("msg");
    if (unknown.length) {
      msg.hidden = false;
      msg.innerHTML = bi(
        "It has never seen “" + unknown.map(esc).join(", ") + "”. It only knows words from its 36 training sentences.",
        "“" + unknown.map(esc).join(", ") + "”는(은) 본 적 없는 단어입니다. 36개 학습 문장에 나온 단어만 압니다."
      );
      return;
    }
    msg.hidden = true;

    clearTimeout(timer);
    var cur = document.querySelector(".cursor");
    if (cur) cur.remove();

    var ids = [BOS].concat(ws.map(function (w) { return model.id[w]; }));
    var out = model.generate(ids, TEMP);
    var gen = model.decode(out).split(" ").slice(ws.length);

    var log = $("log");
    var li = document.createElement("li");
    li.innerHTML = '<div class="line"><span class="you">' + esc(ws.join(" ")) + '</span> <span class="gpt"></span><span class="cursor"></span></div><div class="meta"></div>';
    log.insertBefore(li, log.firstChild);
    while (log.children.length > KEEP) log.removeChild(log.lastChild);

    var gpt = li.querySelector(".gpt"), i = 0;
    (function step() {
      if (i < gen.length) {
        gpt.textContent += (i ? " " : "") + gen[i++];
        if (instant || reduce) return step();
        timer = setTimeout(step, STEP_MS);
        return;
      }
      var c = li.querySelector(".cursor");
      if (c) c.remove();
      var full = ws.concat(gen).join(" ");
      var idx = sentences.indexOf(full);
      Array.prototype.forEach.call(corpus.children, function (el, k) { el.classList.toggle("hit", k === idx); });
      li.querySelector(".meta").innerHTML = idx >= 0
        ? '<span class="from">' + bi("Recalled training sentence #" + (idx + 1), "학습 문장 #" + (idx + 1) + "을 기억해 냄") + "</span>"
        : '<span class="fresh">' + bi("A new sentence, not in the training data", "학습 데이터에 없는 새 문장") + "</span>";
    })();
  }

  $("ask").addEventListener("submit", function (e) { e.preventDefault(); complete($("prompt").value); });

  // open with one finished example
  complete("the dog", true);
})();
</script>
</body>
</html>