Spaces:

HarbourSOFT
/

Your-Code-Assistant-WebGPU

Running

App Files Files Community

HarbourSOFT commited on Oct 22

Commit

df016b4

verified ·

1 Parent(s): 0b963a4

Update index.html

Browse files

Files changed (1) hide show

index.html +206 -18

index.html CHANGED Viewed

@@ -1,19 +1,207 @@
-<!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>Qwen2.5‑Coder‑3B‑Instruct — WebGPU (ONNX)</title>
+  <style>
+    :root{--bg:#0b1021;--panel:#0e1430;--text:#e9eeff;--muted:#9fb3ff;--accent:#7aa2ff;--ok:#2ecc71;--warn:#f39c12;--err:#e74c3c;--radius:14px;--border:1px solid rgba(255,255,255,.08)}
+    *{box-sizing:border-box}body{margin:0;background:radial-gradient(1200px 800px at 10% -10%,#1a2252 0%,transparent 60%),radial-gradient(1200px 800px at 110% 10%,#1b2d61 0%,transparent 60%),var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;padding:20px}
+    header{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:var(--border)}
+    h1{margin:0;font-size:22px}
+    .muted{color:var(--muted);font-size:12px}
+    .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+    .card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:var(--border);border-radius:var(--radius);padding:14px;margin-top:16px}
+    textarea{width:100%;height:180px;background:var(--panel);border:var(--border);border-radius:12px;color:var(--text);padding:10px}
+    input[type="text"]{width:100%;background:var(--panel);border:var(--border);border-radius:12px;color:var(--text);padding:10px}
+    button{appearance:none;border:0;border-radius:12px;padding:10px 14px;cursor:pointer;font-weight:600;background:linear-gradient(180deg,#7aa2ff,#4e77ff);color:white}
+    button.secondary{background:linear-gradient(180deg,#7780a6,#5a6284)}
+    button.ghost{background:transparent;border:var(--border)}
+    #chat{display:flex;flex-direction:column;gap:8px;height:280px;overflow:auto;border-radius:12px;background:var(--panel);border:var(--border);padding:10px}
+    .msg{padding:10px;border-radius:10px;max-width:90%}
+    .me{background:#1b2553;align-self:flex-end}
+    .bot{background:#0b143f;align-self:flex-start}
+    #log{background:#060a1d;color:#b8d0ff;border:var(--border);border-radius:12px;height:140px;overflow:auto;padding:8px;font-size:12px}
+    .chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;border:var(--border)}
+    .ok{background:rgba(46,204,113,.12);border-color:rgba(46,204,113,.35)}
+    .warn{background:rgba(243,156,18,.12);border-color:rgba(243,156,18,.35)}
+    .err{background:rgba(231,76,60,.12);border-color:rgba(231,76,60,.35)}
+  </style>
+</head>
+<body>
+  <header>
+    <div>
+      <h1>Qwen2.5‑Coder‑3B‑Instruct — WebGPU (ONNX)</h1>
+      <div class="muted">Pure front‑end · Transformers.js + ONNX Runtime Web · WebGPU forced</div>
+    </div>
+    <div class="row">
+      <button id="load">Load model</button>
+      <button id="cancel" class="secondary" style="display:none;">Cancel (UI reset only)</button>
+      <button id="clearlog" class="ghost">Clear log</button>
+    </div>
+  </header>
+  <div class="card">
+    <div class="row" style="margin-bottom:8px">
+      <span class="chip warn">First run will download ~2.1 GB (q4, smallest ONNX). Desktop Chrome/Edge recommended.</span>
+    </div>
+    <!-- Confirmation step -->
+    <div id="confirm" style="display:none">
+      <p>This will download model files (~2.1 GB, quantized q4) to your browser cache and run inference via WebGPU. Proceed?</p>
+      <div class="row">
+        <button id="confirm-yes">Yes, download now</button>
+        <button id="confirm-no" class="secondary">No, go back</button>
+      </div>
+    </div>
+    <div id="loading" style="display:none">
+      <div class="row">
+        <progress id="progress" value="0" max="100"></progress>
+        <span id="progress-label" class="muted">0%</span>
+      </div>
+      <div class="muted">WebGPU requires HTTPS or localhost. Chrome/Edge supported by default; Safari/Firefox may need experimental flags.</div>
+    </div>
+    <div id="ui" style="display:none">
+      <input id="sys" type="text" placeholder="System prompt (optional): You are a senior coding assistant. Keep answers concise." />
+      <div id="chat"></div>
+      <textarea id="prompt" placeholder="Ask something (you can paste code)…"></textarea>
+      <div class="row">
+        <button id="send">Send</button>
+        <button id="stop" class="ghost" disabled>Stop</button>
+        <span id="status" class="chip" style="display:none"></span>
+      </div>
+    </div>
+  </div>
+  <div class="card">
+    <h3 style="margin:6px 0">Debug log</h3>
+    <div id="log"></div>
+  </div>
+  <script type="module">
+    // ================= Configuration =================
+    // ONNX repo (3B Instruct), with multiple quantizations in onnx/ (model_q4.onnx, model_q4f16.onnx, model_int8.onnx, model_fp16.onnx, ...)
+    const MODEL_ID = 'onnx-community/Qwen2.5-Coder-3B-Instruct';
+    const CDN_PRIMARY  = 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0';
+    const CDN_FALLBACK = 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
+    // Smallest first: q4 → q4f16 → int8 → fp16
+    const options = {
+      device: 'webgpu',        // force WebGPU
+      dtype:  'q4',            // prefer smallest ONNX weights (model_q4.onnx + .onnx_data)
+      progress_callback: setProgress,
+    };
+    // ================= DOM & State =================
+    const $ = s=>document.querySelector(s);
+    const logDiv=$('#log'), chatDiv=$('#chat');
+    const loadBtn=$('#load'), cancelBtn=$('#cancel');
+    const clearBtn=$('#clearlog');
+    const ui=$('#ui'), loading=$('#loading');
+    const pbar=$('#progress'), plabel=$('#progress-label');
+    const sysEl=$('#sys'), promptEl=$('#prompt');
+    const sendBtn=$('#send'), stopBtn=$('#stop');
+    const statusChip=$('#status');
+    const confirmBox=$('#confirm');
+    const confirmYes=$('#confirm-yes');
+    const confirmNo=$('#confirm-no');
+    let pipe=null, cancelled=false, abortGen=null;
+    // ================= Utils =================
+    function log(...a){ const s=a.map(x=>typeof x==='string'?x:JSON.stringify(x)).join(' ');
+      logDiv.textContent+=s+'
+'; logDiv.scrollTop=logDiv.scrollHeight; console.log('[LOG]',...a); }
+    function chip(kind,text){ statusChip.className='chip '+(kind||''); statusChip.textContent=text; statusChip.style.display='inline-flex'; }
+    function clearChip(){ statusChip.style.display='none'; }
+    function setProgress(evt){ if(evt?.status==='progress'){ const pct=Math.round(Math.max(0,Math.min(100,evt.progress||0))); pbar.value=pct; plabel.textContent=`${pct}% ${evt?.name||evt?.file||''}`.trim(); } else if(evt?.status){ log(`status: ${evt.status} ${evt?.name||evt?.file||''}`); } }
+    window.addEventListener('error',e=>log('window.error:',e.message,e.filename,`${e.lineno}:${e.colno}`));
+    window.addEventListener('unhandledrejection',e=>log('unhandledrejection:',e.reason?.message||e.reason));
+    async function importTransformers(){
+      try{ log('Importing library:',CDN_PRIMARY); return await import(CDN_PRIMARY); }
+      catch(e){ log('Primary failed, fallback:',CDN_FALLBACK,e?.message); return await import(CDN_FALLBACK); }
+    }
+    // ================= Events =================
+    loadBtn.addEventListener('click', ()=>{
+      // Show confirmation instead of starting download immediately
+      loadBtn.style.display='none';
+      confirmBox.style.display='block';
+    });
+    confirmNo.addEventListener('click', ()=>{
+      confirmBox.style.display='none';
+      loadBtn.style.display='inline-block';
+    });
+    confirmYes.addEventListener('click', async ()=>{
+      try{
+        cancelled=false; confirmBox.style.display='none';
+        cancelBtn.style.display='inline-block';
+        loading.style.display='block'; pbar.value=0; plabel.textContent='0%';
+        const { pipeline } = await importTransformers();
+        log('Transformers.js loaded. Creating text-generation pipeline…');
+        pipe = await pipeline('text-generation', MODEL_ID, options);
+        if(cancelled) log('Note: cancel only resets UI and cannot interrupt underlying downloads.');
+        loading.style.display='none'; cancelBtn.style.display='none'; ui.style.display='block';
+        chip('ok','Model ready'); setTimeout(clearChip,1200);
+      }catch(err){
+        loading.style.display='none'; cancelBtn.style.display='none'; loadBtn.style.display='inline-block';
+        log('❌ Load failed:', err?.message||err);
+        if((err?.message||'').includes('404')) log('Check repo ID or private permissions:', MODEL_ID);
+        log('Reminder: Transformers.js expects ONNX weights under an onnx/ directory with proper configs.');
+      }
+    });
+    cancelBtn.addEventListener('click',()=>{ cancelled=true; loadBtn.style.display='inline-block'; cancelBtn.style.display='none'; loading.style.display='none'; log('Canceled (UI only).'); });
+    clearBtn.addEventListener('click',()=>{ logDiv.textContent=''; });
+    function addMsg(text, me=false){ const d=document.createElement('div'); d.className='msg '+(me?'me':'bot'); d.textContent=text; chatDiv.appendChild(d); chatDiv.scrollTop=chatDiv.scrollHeight; return d; }
+    sendBtn.addEventListener('click', async ()=>{
+      try{
+        if(!pipe) return chip('warn','Model not loaded');
+        const user=promptEl.value.trim(); if(!user) return; promptEl.value='';
+        const sys=sysEl.value.trim();
+        addMsg(user,true);
+        const botEl=addMsg('���');
+        stopBtn.disabled=false; chip('', 'Generating…');
+        // Stream tokens with callback_function (API shape may vary slightly between versions)
+        let outText='';
+        abortGen = new AbortController();
+        const gen = await pipe(
+          `${sys?`[SYSTEM]
+${sys}
+`:''}[USER]
+${user}
+[ASSISTANT]
+`,
+          {
+            max_new_tokens: 256,
+            temperature: 0.7,
+            top_p: 0.9,
+            repetition_penalty: 1.05,
+            callback_function: (x)=>{ outText += x; botEl.textContent = outText; },
+            signal: abortGen.signal,
+          }
+        );
+        if(typeof gen?.[0]?.generated_text === 'string' && !outText){ botEl.textContent = gen[0].generated_text; }
+        chip('ok','Done'); setTimeout(clearChip, 1200);
+      }catch(err){
+        if(err?.name==='AbortError'){ chip('warn','Stopped'); setTimeout(clearChip,1200); return; }
+        log('❌ Generation error:', err?.message||err);
+        chip('err','Generation failed');
+      }finally{ stopBtn.disabled=true; abortGen=null; }
+    });
+    stopBtn.addEventListener('click',()=>{ try{ abortGen?.abort(); }catch{} });
+  </script>
+</body>
 </html>