index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>GPT-2 — in your browser</title>
<style>
  :root {
    --bg: #fbfaf9;
    --panel: #ffffff;
    --border: #e4e0db;
    --text: #1c1917;
    --muted: #78716c;
    --accent: #4338ca;
    --accent-soft: #eef2ff;
    --bar: #6366f1;
    --radius: 10px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #17161a;
      --panel: #201f24;
      --border: #363139;
      --text: #f2efec;
      --muted: #a09a94;
      --accent: #a5b4fc;
      --accent-soft: #272335;
      --bar: #818cf8;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    padding: 2rem 1.25rem 4rem;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.6 ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  }
  main { max-width: 760px; margin: 0 auto; }
  h1 { font-size: 1.9rem; letter-spacing: -0.02em; margin: 0 0 .4rem; }
  .sub { color: var(--muted); margin: 0 0 .75rem; }
  .links { font-size: .85rem; color: var(--muted); margin-bottom: 1.5rem; }
  .links a { color: var(--accent); text-decoration: none; }
  .links a:hover { text-decoration: underline; }

  #status {
    display: flex; align-items: center; gap: .6rem;
    font-size: .82rem; color: var(--muted);
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .6rem .8rem; margin-bottom: 1.25rem;
  }
  #status .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--muted); flex: none;
  }
  #status.ready .dot { background: #16a34a; }
  #status.busy .dot { background: #f59e0b; animation: pulse 1.1s infinite; }
  #status.error .dot { background: #dc2626; }
  @keyframes pulse { 50% { opacity: .25; } }
  #bar-wrap { flex: 1; height: 4px; background: var(--border); border-radius: 99px; overflow: hidden; display: none; }
  #bar-wrap.on { display: block; }
  #bar { height: 100%; width: 0; background: var(--bar); transition: width .2s; }

  .tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
  .tabs button {
    appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
    padding: .55rem .85rem; font: inherit; font-weight: 500;
    color: var(--muted); cursor: pointer; margin-bottom: -1px;
  }
  .tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
  .panel[hidden] { display: none; }

  .row { display: flex; gap: .5rem; align-items: stretch; }
  textarea, input[type="text"] {
    width: 100%; font: inherit; color: var(--text);
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .65rem .8rem; resize: vertical;
  }
  textarea:focus, input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
  button.primary {
    font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
    background: var(--accent); color: var(--bg);
    border: 0; border-radius: var(--radius); padding: .65rem 1.1rem;
  }
  button.primary:disabled { opacity: .5; cursor: default; }
  button.ghost {
    font: inherit; cursor: pointer; background: var(--panel);
    color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .65rem 1rem;
  }

  .chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 0; }
  .chips button {
    font: inherit; font-size: .82rem; cursor: pointer;
    background: var(--panel); color: var(--muted);
    border: 1px solid var(--border); border-radius: 99px; padding: .3rem .7rem;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .chips button:hover { color: var(--text); border-color: var(--accent); }

  #out {
    margin-top: 1rem; min-height: 9rem; white-space: pre-wrap; word-break: break-word;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .9rem 1rem;
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88rem; line-height: 1.7;
  }
  #out .given { color: var(--muted); }
  #out .empty { color: var(--muted); font-style: italic; font-family: inherit; }
  .cursor { display: inline-block; width: .5em; background: var(--accent); animation: pulse .9s infinite; }

  details { margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
  summary { cursor: pointer; padding: .6rem .85rem; font-weight: 500; font-size: .9rem; }
  .knobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; padding: .3rem .85rem 1rem; }
  .knob label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .3rem; }
  .knob input[type="range"] { width: 100%; accent-color: var(--accent); }
  .knob .val { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }

  #probs { margin-top: 1rem; display: flex; flex-direction: column; gap: .35rem; }
  .prob { display: grid; grid-template-columns: 8.5rem 1fr 4rem; gap: .6rem; align-items: center; font-size: .86rem; }
  .prob code {
    font-family: ui-monospace, Menlo, monospace; background: var(--accent-soft);
    color: var(--accent); padding: .15rem .4rem; border-radius: 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .prob .track { height: 9px; background: var(--border); border-radius: 99px; overflow: hidden; }
  .prob .fill { height: 100%; background: var(--bar); border-radius: 99px; }
  .prob .pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
  .note { font-size: .82rem; color: var(--muted); margin: .25rem 0 0; }
</style>
</head>
<body>
<main>
  <h1>GPT-2</h1>
  <p class="sub">The original 124M-parameter GPT-2, running entirely in your browser. It only ever does one thing: predict the next token.</p>
  <p class="links">
    <a href="https://huggingface.co/openai-community/gpt2" target="_blank" rel="noopener">Model card</a> ·
    <a href="https://cdn.openai.com/better-language-models/language_models_are_unsupervised_multitask_learners.pdf" target="_blank" rel="noopener">Paper</a> ·
    <a href="https://github.com/huggingface/transformers.js" target="_blank" rel="noopener">transformers.js</a>
  </p>

  <div id="status"><span class="dot"></span><span id="status-text">Model loads on your first run.</span><span id="bar-wrap"><span id="bar"></span></span></div>

  <div class="tabs" role="tablist">
    <button role="tab" id="tab-complete" aria-selected="true" aria-controls="panel-complete">Completion</button>
    <button role="tab" id="tab-next" aria-selected="false" aria-controls="panel-next">Next token</button>
  </div>

  <section class="panel" id="panel-complete" role="tabpanel">
    <div class="row">
      <textarea id="prompt" rows="3" placeholder="Hello, I'm a language model,"></textarea>
    </div>
    <div class="row" style="margin-top:.5rem">
      <button class="primary" id="go">Generate</button>
      <button class="ghost" id="stop" hidden>Stop</button>
    </div>

    <div class="chips" id="examples"></div>

    <div id="out"><span class="empty">Output appears here.</span></div>

    <details>
      <summary>Sampling settings</summary>
      <div class="knobs">
        <div class="knob"><label>Max new tokens <span class="val" id="v-len">120</span></label><input type="range" id="k-len" min="8" max="400" step="8" value="120"></div>
        <div class="knob"><label>Temperature <span class="val" id="v-temp">0.80</span></label><input type="range" id="k-temp" min="0.1" max="2" step="0.05" value="0.8"></div>
        <div class="knob"><label>Top-p <span class="val" id="v-topp">0.95</span></label><input type="range" id="k-topp" min="0.1" max="1" step="0.01" value="0.95"></div>
        <div class="knob"><label>Top-k <span class="val" id="v-topk">50</span></label><input type="range" id="k-topk" min="0" max="200" step="1" value="50"></div>
        <div class="knob"><label>Repetition penalty <span class="val" id="v-rep">1.10</span></label><input type="range" id="k-rep" min="1" max="2" step="0.05" value="1.1"></div>
      </div>
    </details>
  </section>

  <section class="panel" id="panel-next" role="tabpanel" hidden>
    <p class="note" style="margin-bottom:.8rem">GPT-2's raw output — the probability it assigns to every possible next token. <code>␣</code> marks a leading space.</p>
    <div class="row">
      <input type="text" id="nt-prompt" placeholder="The capital of France is">
      <button class="primary" id="nt-go">Predict</button>
    </div>
    <div class="chips" id="nt-examples"></div>
    <div class="knobs" style="padding-left:0;padding-right:0">
      <div class="knob"><label>Show top <span class="val" id="v-k">10</span> tokens</label><input type="range" id="k-k" min="3" max="25" step="1" value="10"></div>
    </div>
    <div id="probs"></div>
  </section>
</main>

<script type="module">
import {
  AutoTokenizer, AutoModelForCausalLM, TextStreamer, env,
} from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1';

env.allowLocalModels = false;

// ONNX export of openai-community/gpt2 — identical weights, browser-runnable.
const MODEL_ID = 'Xenova/gpt2';
const CONTEXT_LEN = 1024;               // GPT-2's hard positional limit

const $ = (id) => document.getElementById(id);
const statusEl = $('status'), statusText = $('status-text');
const barWrap = $('bar-wrap'), bar = $('bar');

function setStatus(text, state = '') {
  statusText.textContent = text;
  statusEl.className = state;
}

// ---------------------------------------------------------------- model load
let loadPromise = null;

function load() {
  if (loadPromise) return loadPromise;

  const webgpu = !!navigator.gpu;
  const device = webgpu ? 'webgpu' : 'wasm';
  const dtype = webgpu ? 'fp16' : 'int8';
  const size = webgpu ? '251 MB' : '281 MB';

  setStatus(`Downloading GPT-2 (${size}, ${device.toUpperCase()}) — cached after this.`, 'busy');
  barWrap.classList.add('on');

  const seen = new Map();
  const progress = (p) => {
    if (p.status === 'progress' && p.total) seen.set(p.file, p.progress);
    if (!seen.size) return;
    const avg = [...seen.values()].reduce((a, b) => a + b, 0) / seen.size;
    bar.style.width = `${avg.toFixed(1)}%`;
  };

  loadPromise = (async () => {
    const [tokenizer, model] = await Promise.all([
      AutoTokenizer.from_pretrained(MODEL_ID, { progress_callback: progress }),
      AutoModelForCausalLM.from_pretrained(MODEL_ID, { device, dtype, progress_callback: progress }),
    ]);
    barWrap.classList.remove('on');
    setStatus(`GPT-2 ready — running locally on ${device.toUpperCase()}. Nothing leaves your machine.`, 'ready');
    return { tokenizer, model };
  })().catch((err) => {
    loadPromise = null;
    barWrap.classList.remove('on');
    setStatus(`Could not load the model: ${err.message}`, 'error');
    throw err;
  });

  return loadPromise;
}

// ---------------------------------------------------------------- completion
const promptEl = $('prompt'), outEl = $('out'), goBtn = $('go'), stopBtn = $('stop');
let interrupted = false;

const knob = (id, fmt) => {
  const input = $(`k-${id}`), out = $(`v-${id}`);
  const sync = () => { out.textContent = fmt(input.value); };
  input.addEventListener('input', sync);
  sync();
  return () => Number(input.value);
};
const getLen  = knob('len',  (v) => v);
const getTemp = knob('temp', (v) => Number(v).toFixed(2));
const getTopP = knob('topp', (v) => Number(v).toFixed(2));
const getTopK = knob('topk', (v) => v);
const getRep  = knob('rep',  (v) => Number(v).toFixed(2));
const getK    = knob('k',    (v) => v);

function render(given, generated, streaming) {
  outEl.innerHTML = '';
  const a = document.createElement('span');
  a.className = 'given';
  a.textContent = given;
  outEl.append(a, document.createTextNode(generated));
  if (streaming) {
    const c = document.createElement('span');
    c.className = 'cursor';
    c.textContent = ' ';
    outEl.append(c);
  }
  outEl.scrollTop = outEl.scrollHeight;
}

async function complete() {
  const prompt = promptEl.value.trim() || promptEl.placeholder;
  const maxNew = getLen();

  goBtn.disabled = true;
  stopBtn.hidden = false;
  interrupted = false;
  render(prompt, '', true);

  try {
    const { tokenizer, model } = await load();
    setStatus('Generating…', 'busy');

    const inputs = tokenizer(prompt, {
      truncation: true,
      max_length: Math.max(64, CONTEXT_LEN - maxNew),
    });

    let generated = '';
    const streamer = new TextStreamer(tokenizer, {
      skip_prompt: true,
      skip_special_tokens: true,
      callback_function: (chunk) => {
        if (interrupted) throw new Error('__stop__');
        generated += chunk;
        render(prompt, generated, true);
      },
    });

    const temperature = getTemp();
    await model.generate({
      ...inputs,
      streamer,
      max_new_tokens: maxNew,
      do_sample: temperature > 0,
      temperature,
      top_p: getTopP(),
      top_k: getTopK(),
      repetition_penalty: getRep(),
    });

    render(prompt, generated, false);
    setStatus('Done.', 'ready');
  } catch (err) {
    if (err.message === '__stop__') setStatus('Stopped.', 'ready');
    else setStatus(`Generation failed: ${err.message}`, 'error');
  } finally {
    goBtn.disabled = false;
    stopBtn.hidden = true;
  }
}

goBtn.addEventListener('click', complete);
stopBtn.addEventListener('click', () => { interrupted = true; });
promptEl.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) complete();
});

// ---------------------------------------------------------------- next token
const ntEl = $('nt-prompt'), ntBtn = $('nt-go'), probsEl = $('probs');

async function predict() {
  const prompt = ntEl.value.trim() || ntEl.placeholder;
  const k = getK();

  ntBtn.disabled = true;
  probsEl.innerHTML = '';

  try {
    const { tokenizer, model } = await load();
    setStatus('Scoring next token…', 'busy');

    const inputs = tokenizer(prompt, { truncation: true, max_length: CONTEXT_LEN - 1 });
    const out = await model.generate({
      ...inputs,
      max_new_tokens: 1,
      do_sample: false,
      output_scores: true,
      return_dict_in_generate: true,
    });

    const logits = Array.from(out.scores[0].data);
    const max = Math.max(...logits);
    const exps = logits.map((x) => Math.exp(x - max));
    const sum = exps.reduce((a, b) => a + b, 0);

    const top = logits
      .map((_, i) => i)
      .sort((a, b) => logits[b] - logits[a])
      .slice(0, k)
      .map((id) => ({ id, p: exps[id] / sum }));

    const peak = top[0].p;
    for (const { id, p } of top) {
      const raw = tokenizer.decode([id]);
      const row = document.createElement('div');
      row.className = 'prob';

      const code = document.createElement('code');
      code.textContent = raw.replace(/ /g, '␣').replace(/\n/g, '\\n') || '⟨empty⟩';
      code.title = JSON.stringify(raw);

      const track = document.createElement('div');
      track.className = 'track';
      const fill = document.createElement('div');
      fill.className = 'fill';
      fill.style.width = `${(p / peak) * 100}%`;
      track.append(fill);

      const pct = document.createElement('div');
      pct.className = 'pct';
      pct.textContent = p >= 0.001 ? `${(p * 100).toFixed(1)}%` : '<0.1%';

      row.append(code, track, pct);
      probsEl.append(row);
    }

    setStatus('Done.', 'ready');
  } catch (err) {
    setStatus(`Prediction failed: ${err.message}`, 'error');
  } finally {
    ntBtn.disabled = false;
  }
}

ntBtn.addEventListener('click', predict);
ntEl.addEventListener('keydown', (e) => { if (e.key === 'Enter') predict(); });

// ---------------------------------------------------------------- examples
const EXAMPLES = [
  "Hello, I'm a language model,",
  'In a shocking finding, scientists discovered a herd of unicorns living in a remote valley',
  'The Manhattan Bridge was completed in',
  'Recipe for a perfect Sunday roast:',
];
const NT_EXAMPLES = [
  'The capital of France is',
  'Once upon a',
  '2 + 2 =',
  'My favourite programming language is',
];

for (const text of EXAMPLES) {
  const b = document.createElement('button');
  b.textContent = text;
  b.addEventListener('click', () => { promptEl.value = text; complete(); });
  $('examples').append(b);
}
for (const text of NT_EXAMPLES) {
  const b = document.createElement('button');
  b.textContent = text;
  b.addEventListener('click', () => { ntEl.value = text; predict(); });
  $('nt-examples').append(b);
}

// ---------------------------------------------------------------- tabs
for (const id of ['complete', 'next']) {
  $(`tab-${id}`).addEventListener('click', () => {
    for (const other of ['complete', 'next']) {
      const selected = other === id;
      $(`tab-${other}`).setAttribute('aria-selected', String(selected));
      $(`panel-${other}`).hidden = !selected;
    }
  });
}

if (!navigator.gpu) {
  setStatus('No WebGPU in this browser — GPT-2 will run on WASM (slower). Loads on first run.');
}
</script>
</body>
</html>