Spaces:

PeterPinetree
/

Next-Token-Predictor

Running

App Files Files Community

PeterPinetree commited on Aug 10

Commit

8eb8955

1 Parent(s): c749a1d

Update index.html

Browse files

Files changed (1) hide show

index.html +180 -17

index.html CHANGED Viewed

@@ -1,19 +1,182 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Next Token Predictor</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
+  <style>
+    :root{
+      --bg:#0b0f14; --text:#ffffff; --muted:#9aa4b2; --accent:#38bdf8; --border:#1f2a3a;
+      --chip:#111827; --chip-border:#263246; --chip-hover:#1a2434;
+      --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace; --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial;
+    }
+    *{box-sizing:border-box} body{margin:0;background:radial-gradient(900px 500px at 10% -10%, #07314a, transparent),var(--bg);color:var(--text);font-family:var(--sans)}
+    .wrap{max-width:1100px;margin:0 auto;padding:16px}
+    h1{margin:.2rem 0 .25rem;font-size:1.9rem;color:var(--accent)}
+    .sub{color:var(--muted);margin:0 0 .8rem}
+    .row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
+    .card{background:linear-gradient(180deg,#0c1624,#0a1220);border:1px solid var(--border);border-radius:14px;padding:12px}
+    .grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
+    @media (max-width:900px){.grid{grid-template-columns:1fr}}
+    select,input{border-radius:10px;border:1px solid var(--border);background:#0a1220;color:var(--text);padding:.6rem .8rem;outline:none}
+    select:focus,input:focus{border-color:var(--accent)}
+    #status{color:var(--muted);font-size:.9rem}
+    .tokens{display:flex;gap:.4rem;flex-wrap:wrap}
+    .chip{border:1px solid var(--chip-border);background:var(--chip);padding:.35rem .5rem;border-radius:10px;font-family:var(--mono);font-size:.9rem}
+    .chip.special{border-color:var(--accent);background:#0b2235}
+    .ids{font-family:var(--mono);font-size:.85rem;color:#c7d2fe}
+    .topk{display:flex;gap:.4rem;flex-wrap:wrap}
+    .k{padding:.35rem .5rem;border-radius:10px;background:#102133;border:1px solid #1c2b44;font-family:var(--mono);cursor:pointer}
+    .k:hover{border-color:var(--accent)}
+    .note{color:var(--muted);font-size:.8rem}
+  </style>
+</head>
+<body>
+  <main class="wrap">
+    <h1>Next Token Predictor</h1>
+    <div class="sub">How an LLM guesses the next token — runs entirely in your browser.</div>
+    <section class="card" style="margin-bottom:12px">
+      <div class="row">
+        <label>Model&nbsp;
+          <select id="model">
+            <option value="Xenova/distilgpt2">distilgpt2 (fast)</option>
+            <option value="Xenova/gpt2">gpt2</option>
+          </select>
+        </label>
+        <input id="text" type="text" value="Never gonna give you up, never gonna let you" style="flex:1" />
+        <span id="status">Loading model…</span>
+      </div>
+    </section>
+    <section class="grid">
+      <article class="card">
+        <h3 style="margin:.2rem 0 .4rem">Context</h3>
+        <div id="tokens" class="tokens"></div>
+        <div id="ids" class="ids" style="margin-top:.4rem"></div>
+        <div class="note" style="margin-top:.4rem">Tokens are subword pieces. IDs are how the model “sees” them. Special tokens are highlighted.</div>
+      </article>
+      <article class="card">
+        <h3 style="margin:.2rem 0 .4rem">Top-10 next tokens</h3>
+        <div id="topk" class="topk"></div>
+        <div class="note" style="margin-top:.4rem">Click a candidate to append it and see the next step.</div>
+      </article>
+    </section>
+    <p class="note" style="margin-top:10px">First load may take a few seconds while the model downloads and warms up.</p>
+  </main>
+  <!-- Option A: Load from CDN (simple). If it’s blocked on your network, comment this out and use Option B below. -->
+  <script type="module">
+    const tf = await import('https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2');
+    tf.env.useBrowserCache = true;
+    tf.env.allowRemoteModels = true;  // load from Hub/CDN
+    tf.env.allowLocalModels  = false; // flip to true only if you host weights yourself
+    // ----- UI -----
+    const $ = s => document.querySelector(s);
+    const modelSel = $('#model'), textIn = $('#text'), statusEl = $('#status');
+    const tokensEl = $('#tokens'), idsEl = $('#ids'), topkEl = $('#topk');
+    let tokenizer = null, model = null, warm = false;
+    function status(m){ statusEl.textContent = m; }
+    async function load(modelId){
+      status(`Loading ${modelId}…`);
+      tokenizer = await tf.AutoTokenizer.from_pretrained(modelId);
+      // Use int8 quant if available to keep VRAM/CPU low
+      model = await tf.AutoModelForCausalLM.from_pretrained(modelId, { dtype: 'q8' }).catch(async ()=>{
+        return await tf.AutoModelForCausalLM.from_pretrained(modelId);
+      });
+      warm = false;
+      status('Model ready.');
+      await predict(); // run once so the screen isn’t empty
+    }
+    // Small helpers
+    function softmax(arr){
+      const max = Math.max(...arr);
+      const exps = arr.map(v => Math.exp(v - max));
+      const sum = exps.reduce((a,b)=>a+b,0);
+      return exps.map(v => v/sum);
+    }
+    function topK(arr, k){
+      const idx = arr.map((p,i)=>[p,i]).sort((a,b)=>b[0]-a[0]).slice(0,k).map(x=>x[1]);
+      return idx.map(i => ({ i, p: arr[i] }));
+    }
+    async function predict(appendId=null){
+      if (!model || !tokenizer) return;
+      let text = textIn.value ?? '';
+      if (appendId !== null){
+        // Append a predicted token ID to the current context
+        text = tokenizer.decode([...tokenizer.encode(text), appendId], { skip_special_tokens:false, clean_up_tokenization_spaces:false });
+        textIn.value = text;
+      }
+      status(warm ? 'Predicting…' : 'Warming up…');
+      // Encode to IDs (array)
+      const ids = await tokenizer.encode(text);
+      // Render context tokens/ids (including specials)
+      const specials = new Set(tokenizer.all_special_ids || []);
+      const ctxTokens = (typeof tokenizer.convert_ids_to_tokens === 'function')
+        ? tokenizer.convert_ids_to_tokens(ids)
+        : ids.map(id => tokenizer.decode([id], { skip_special_tokens:false, clean_up_tokenization_spaces:false }));
+      tokensEl.innerHTML = ctxTokens.map((t,idx)=>{
+        const isSpecial = specials.has(ids[idx]);
+        return `<span class="chip${isSpecial?' special':''}">${escapeHtml(t)}</span>`;
+      }).join('');
+      idsEl.textContent = ids.join(' ');
+      // Run single forward to get logits at last position
+      const inputs = { input_ids: tf.Tensor.from(ids, { dtype: 'int64', shape: [1, ids.length] }) };
+      const out = await model(inputs);
+      const lastLogits = Array.from(out.logits.data.slice((ids.length-1)*out.logits.dims[2], ids.length*out.logits.dims[2]));
+      const probs = softmax(lastLogits);
+      const k = topK(probs, 10);
+      // Render top-k bar
+      topkEl.innerHTML = '';
+      for (const { i, p } of k){
+        const tok = (typeof tokenizer.id_to_token === 'function')
+          ? tokenizer.id_to_token(i)
+          : tokenizer.decode([i], { skip_special_tokens:false, clean_up_tokenization_spaces:false });
+        const btn = document.createElement('button');
+        btn.className = 'k';
+        btn.textContent = `${tok}  ${(p*100).toFixed(1)}%`;
+        btn.title = `id: ${i}`;
+        btn.onclick = ()=>predict(i);
+        topkEl.appendChild(btn);
+      }
+      warm = true;
+      status('Ready.');
+    }
+    function escapeHtml(s){ return String(s).replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m])); }
+    // Events
+    textIn.addEventListener('input', ()=>predict());
+    modelSel.addEventListener('change', ()=>load(modelSel.value));
+    // Initial load
+    await load(modelSel.value);
+  </script>
+  <!-- Option B: if your CDN path is blocked, upload transformers.min.js to /assets/vendor/ and use:
+  <script type="module">
+    const tf = await import('./assets/vendor/transformers.min.js');
+    tf.env.useBrowserCache = true;
+    tf.env.allowRemoteModels = true;
+    // (rest identical)
+  </script>
+  -->
+</body>
 </html>