Spaces:

shreyask
/

needle-playground

Running

App Files Files Community

shreyask commited on 9 days ago

Commit

6c01099

verified ·

1 Parent(s): ee342db

Upload folder using huggingface_hub

Browse files

Files changed (6) hide show

assets/index-CENTWb2t.css +1 -0
assets/index-Dh-E6L2Y.js +0 -0
index.html +2 -2
src/main.ts +20 -6
src/style.css +18 -1
src/ui.ts +16 -2

assets/index-CENTWb2t.css ADDED Viewed

	@@ -0,0 +1 @@

+ :root{--bg:#0a0a0a;--bg-2:#141414;--fg:#e8e8e8;--fg-dim:#888;--accent:#fff;--border:#222;--error:#ff6b6b;font-family:JetBrains Mono,SF Mono,Menlo,Consolas,monospace}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);min-height:100vh;margin:0}.mono{font-family:inherit}.topbar{border-bottom:1px solid var(--border);padding:16px 24px}.brand-name{font-weight:600}.brand-sub{color:var(--fg-dim);margin-left:8px}.grid{grid-template-columns:1fr 1.4fr;gap:16px;min-height:calc(100vh - 60px);padding:16px 24px;display:grid}.pane{flex-direction:column;gap:8px;display:flex}.pane-header{color:var(--fg-dim);justify-content:space-between;align-items:baseline;font-size:13px;display:flex}.model-indicator,.loading-indicator{color:var(--fg-dim);font-size:12px}textarea#tools{background:var(--bg-2);min-height:400px;color:var(--fg);border:1px solid var(--border);resize:none;border-radius:4px;flex:1;padding:12px;font-size:13px}input#query{background:var(--bg-2);color:var(--fg);border:1px solid var(--border);border-radius:4px;padding:10px 12px;font-size:14px}.result-pane{background:var(--bg-2);border:1px solid var(--border);white-space:pre-wrap;word-break:break-word;border-radius:4px;flex:1;margin:0;padding:12px;font-size:13px;overflow:auto}.result-pane.error{color:var(--error)}.examples{flex-wrap:wrap;gap:8px;display:flex}.example-chip{color:var(--fg);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:999px;padding:4px 12px;font-size:12px;transition:opacity .12s ease-in-out}.example-chip:hover:not(:disabled){background:var(--bg-2)}.example-chip:disabled,input#query:disabled,textarea#tools:disabled{opacity:.4;cursor:not-allowed}.loading-indicator.busy{animation:1.2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.55}50%{opacity:1}}.error-inline{color:var(--error);margin-top:4px;font-size:12px}

assets/index-Dh-E6L2Y.js ADDED Viewed

The diff for this file is too large to render. See raw diff

index.html CHANGED Viewed

@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Needle Playground (Browser)</title>
-    <script type="module" crossorigin src="/assets/index-BJo2pRXI.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/chunk-jRWAZmH_.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-CRllq4cA.css">
   </head>
   <body>
     <header class="topbar">

     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Needle Playground (Browser)</title>
+    <script type="module" crossorigin src="/assets/index-Dh-E6L2Y.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/chunk-jRWAZmH_.js">
+    <link rel="stylesheet" crossorigin href="/assets/index-CENTWb2t.css">
   </head>
   <body>
     <header class="topbar">

src/main.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import type { Tokenizer } from './tokenizer';
 import { loadSessions } from './runtime';
 import type { NeedleSessions } from './runtime';
 import { generate } from './generate';
-import { mountUI, setStatus, renderResult, renderError, readTools } from './ui';
 import type { UI } from './ui';
 import { TOKENIZER_URL, SPECIALS_URL } from './config';
@@ -25,14 +25,17 @@ async function fetchJson<T>(url: string): Promise<T> {
 async function boot() {
   const ui = mountUI();
   try {
-    setStatus(ui, 'loading model…');
     const [sessions, tokenizerBytes, specials] = await Promise.all([
-      loadSessions(m => setStatus(ui, m)),
       fetchBytes(TOKENIZER_URL),
       fetchJson<Specials>(SPECIALS_URL),
     ]);
     const tokenizer = await createTokenizer(tokenizerBytes);
-    setStatus(ui, 'ready');
     wireRun(ui, sessions, tokenizer, specials);
   } catch (e) {
     setStatus(ui, 'failed');
@@ -49,7 +52,12 @@ function wireRun(ui: UI, sessions: NeedleSessions, tokenizer: Tokenizer, special
     const query = ui.queryEl.value.trim();
     if (!query) return;
     running = true;
-    setStatus(ui, 'generating…');
     try {
       const result = await generate(
         sessions, tokenizer, query, tools.tools,
@@ -60,14 +68,20 @@ function wireRun(ui: UI, sessions: NeedleSessions, tokenizer: Tokenizer, special
           maxNewTokens: 256,
         },
         (_id, decodedSoFar) => {
           let display = decodedSoFar;
           if (display.startsWith('<tool_call>')) display = display.slice('<tool_call>'.length);
           renderResult(ui, display);
         },
       );
       renderResult(ui, result.text);
-      setStatus(ui, 'ready');
     } catch (e) {
       renderError(ui, `Generation failed: ${(e as Error).message}`);
       setStatus(ui, 'ready');
     } finally {

 import { loadSessions } from './runtime';
 import type { NeedleSessions } from './runtime';
 import { generate } from './generate';
+import { mountUI, setStatus, renderResult, renderError, readTools, setInteractiveEnabled } from './ui';
 import type { UI } from './ui';
 import { TOKENIZER_URL, SPECIALS_URL } from './config';
 async function boot() {
   const ui = mountUI();
   try {
+    setStatus(ui, 'loading model…', true);
+    const t0 = performance.now();
     const [sessions, tokenizerBytes, specials] = await Promise.all([
+      loadSessions(m => setStatus(ui, m, true)),
       fetchBytes(TOKENIZER_URL),
       fetchJson<Specials>(SPECIALS_URL),
     ]);
     const tokenizer = await createTokenizer(tokenizerBytes);
+    const loadSecs = ((performance.now() - t0) / 1000).toFixed(1);
+    setStatus(ui, `ready · loaded in ${loadSecs}s`);
+    setInteractiveEnabled(ui, true);
     wireRun(ui, sessions, tokenizer, specials);
   } catch (e) {
     setStatus(ui, 'failed');
     const query = ui.queryEl.value.trim();
     if (!query) return;
     running = true;
+    let tokensSoFar = 0;
+    const t0 = performance.now();
+    const tick = setInterval(() => {
+      const elapsed = ((performance.now() - t0) / 1000).toFixed(1);
+      setStatus(ui, `generating… ${elapsed}s · ${tokensSoFar} tok`, true);
+    }, 100);
     try {
       const result = await generate(
         sessions, tokenizer, query, tools.tools,
           maxNewTokens: 256,
         },
         (_id, decodedSoFar) => {
+          tokensSoFar += 1;
           let display = decodedSoFar;
           if (display.startsWith('<tool_call>')) display = display.slice('<tool_call>'.length);
           renderResult(ui, display);
         },
       );
+      clearInterval(tick);
+      const elapsedMs = performance.now() - t0;
+      const elapsed = (elapsedMs / 1000).toFixed(2);
+      const tps = (result.ids.length / (elapsedMs / 1000)).toFixed(1);
       renderResult(ui, result.text);
+      setStatus(ui, `ready · ${elapsed}s · ${result.ids.length} tok · ${tps} tok/s`);
     } catch (e) {
+      clearInterval(tick);
       renderError(ui, `Generation failed: ${(e as Error).message}`);
       setStatus(ui, 'ready');
     } finally {

src/style.css CHANGED Viewed

@@ -118,12 +118,29 @@ input#query {
   padding: 4px 12px;
   font-size: 12px;
   cursor: pointer;
 }
-.example-chip:hover {
   background: var(--bg-2);
 }
 .error-inline {
   color: var(--error);
   font-size: 12px;

   padding: 4px 12px;
   font-size: 12px;
   cursor: pointer;
+  transition: opacity 120ms ease-in-out;
 }
+.example-chip:hover:not(:disabled) {
   background: var(--bg-2);
 }
+.example-chip:disabled,
+input#query:disabled,
+textarea#tools:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+/* Subtle pulse on the status text while model is loading or generating. */
+.loading-indicator.busy {
+  animation: pulse 1.2s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 0.55; }
+  50%      { opacity: 1; }
+}
 .error-inline {
   color: var(--error);
   font-size: 12px;

src/ui.ts CHANGED Viewed

@@ -19,11 +19,13 @@ export function mountUI(): UI {
   // Pre-populate tools textarea with DEFAULT_TOOLS
   toolsEl.value = JSON.stringify(DEFAULT_TOOLS, null, 2);
-  // Render example chips
   EXAMPLES.forEach((ex: Example) => {
     const chip = document.createElement('button');
     chip.className = 'example-chip';
     chip.textContent = ex.label;
     chip.addEventListener('click', () => {
       // Set query value from example
@@ -52,8 +54,20 @@ export function mountUI(): UI {
   };
 }
-export function setStatus(ui: UI, msg: string): void {
   ui.statusEl.textContent = msg;
 }
 export function renderResult(ui: UI, rawText: string): void {

   // Pre-populate tools textarea with DEFAULT_TOOLS
   toolsEl.value = JSON.stringify(DEFAULT_TOOLS, null, 2);
+  // Render example chips — disabled until the model finishes loading
+  queryEl.disabled = true;
   EXAMPLES.forEach((ex: Example) => {
     const chip = document.createElement('button');
     chip.className = 'example-chip';
     chip.textContent = ex.label;
+    chip.disabled = true;
     chip.addEventListener('click', () => {
       // Set query value from example
   };
 }
+export function setStatus(ui: UI, msg: string, busy = false): void {
   ui.statusEl.textContent = msg;
+  ui.statusEl.classList.toggle('busy', busy);
+}
+/**
+ * Toggle the disabled state of the example chips and the query input.
+ * Chips start disabled at mount; main.ts flips them on once the model finishes
+ * loading. Toggling off again during a busy / failed state is also valid.
+ */
+export function setInteractiveEnabled(ui: UI, enabled: boolean): void {
+  ui.queryEl.disabled = !enabled;
+  ui.examplesEl.querySelectorAll<HTMLButtonElement>('button.example-chip')
+    .forEach(btn => { btn.disabled = !enabled; });
 }
 export function renderResult(ui: UI, rawText: string): void {