|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta |
|
|
name="viewport" |
|
|
content="width=device-width,initial-scale=1,viewport-fit=cover" /> |
|
|
<title>Qwen2.5‑Coder‑3B‑Instruct — WebGPU (ONNX)</title> |
|
|
<meta name="color-scheme" content="dark light" /> |
|
|
<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)} |
|
|
.examples{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:10px} |
|
|
.examples button{justify-content:flex-start} |
|
|
.toggle{display:flex;align-items:center;gap:8px} |
|
|
progress{width:220px;height:10px} |
|
|
a.link{color:var(--accent);text-decoration:none} |
|
|
a.link:hover{text-decoration:underline} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<div> |
|
|
<h1>Qwen2.5‑Coder‑3B‑Instruct — WebGPU (ONNX)</h1> |
|
|
<div class="muted">Pure front‑end · Transformers.js v3 + ONNX Runtime Web · WebGPU preferred</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 ONNX weights). Desktop Chrome/Edge recommended. HTTPS or localhost required for WebGPU.</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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" style="align-items:center"> |
|
|
<progress id="progress" value="0" max="100"></progress> |
|
|
<span id="progress-label" class="muted">0%</span> |
|
|
</div> |
|
|
<div class="muted"> |
|
|
WebGPU works on secure contexts (HTTPS/localhost). Safari/Firefox may need experimental flags; fallback is WASM/CPU. |
|
|
</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" aria-live="polite" aria-busy="false"></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">Examples</h3> |
|
|
<div class="toggle"><input id="autorun" type="checkbox" checked/> <label for="autorun" class="muted">Auto‑run on click</label></div> |
|
|
<div id="examples" class="examples"></div> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h3 style="margin:6px 0">Debug log</h3> |
|
|
<div id="log" role="log" aria-live="polite"></div> |
|
|
</div> |
|
|
|
|
|
<script type="module"> |
|
|
|
|
|
const MODEL_ID = 'onnx-community/Qwen2.5-Coder-3B-Instruct'; |
|
|
|
|
|
const TRANSFORMERS_CDN = 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0'; |
|
|
|
|
|
|
|
|
const device = ('gpu' in navigator) ? 'webgpu' : 'auto'; |
|
|
|
|
|
|
|
|
const options = { |
|
|
device, |
|
|
dtype: 'q4', |
|
|
progress_callback: setProgress, |
|
|
}; |
|
|
|
|
|
|
|
|
const EXAMPLES = [ |
|
|
{ |
|
|
title: 'Parse Apache logs (Python)', |
|
|
sys: 'You are a senior coding assistant. Keep answers concise and show tested code.', |
|
|
prompt: `Write a Python function parse_log(line: str) that parses Apache combined log format into a dict with keys ip, time, method, path, status, bytes, referrer, ua. Include robust regex, timezone handling, and 5 pytest unit tests.` |
|
|
}, |
|
|
{ |
|
|
title: 'Refactor callbacks → async/await (JS)', |
|
|
sys: 'You are a pragmatic JS refactoring assistant.', |
|
|
prompt: `Refactor this Node.js callback code to async/await with proper error handling and backpressure using streams: |
|
|
const fs = require('fs'); |
|
|
fs.readFile('in.txt', (e, d) => { |
|
|
if (e) throw e; |
|
|
fs.writeFile('out.txt', d.toString().toUpperCase(), err => { |
|
|
if (err) throw err; |
|
|
console.log('done'); |
|
|
}); |
|
|
}); |
|
|
Provide a short explanation.` |
|
|
}, |
|
|
{ |
|
|
title: 'Cohort retention SQL (Postgres)', |
|
|
sys: 'You are a data engineer.', |
|
|
prompt: `Given events(user_id, event_time, event_name) with sign_up and active events, write a SQL that computes weekly user retention (cohorted by signup week) as a pivoted table. Assume UTC timestamps. Explain indexes briefly.` |
|
|
}, |
|
|
{ |
|
|
title: 'Unit tests with pytest', |
|
|
sys: 'You are a Python testing expert.', |
|
|
prompt: `Generate pytest tests for a function normalize_phone(s: str) that returns E.164 format or raises ValueError. Cover edge cases and property tests with hypothesis.` |
|
|
}, |
|
|
{ |
|
|
title: 'Explain code step by step', |
|
|
sys: 'Be a clear explainer for junior developers.', |
|
|
prompt: `Explain the following code step by step, then suggest two improvements for readability and performance: |
|
|
from collections import defaultdict |
|
|
|
|
|
def f(nums): |
|
|
d = defaultdict(int) |
|
|
for x in nums: |
|
|
d[x] += 1 |
|
|
m = max(d.values()) |
|
|
return [k for k, v in d.items() if v == m]` |
|
|
}, |
|
|
{ |
|
|
title: 'Regex with explanation', |
|
|
sys: 'You write readable regex with comments.', |
|
|
prompt: `Write a single regex that matches a valid IPv4 or IPv6 address. Provide a commented, multi-line version and a short, single-line version, plus examples of matches and non-matches.` |
|
|
}, |
|
|
{ |
|
|
title: 'Document a Go function', |
|
|
sys: 'You are a Go reviewer.', |
|
|
prompt: `Write a Go doc comment and improve the signature for a function that merges two sorted slices of ints and returns a deduplicated sorted slice. Provide a fully working example.` |
|
|
}, |
|
|
{ |
|
|
title: 'GitHub Actions CI', |
|
|
sys: 'You are a DevOps assistant.', |
|
|
prompt: `Create a GitHub Actions workflow (YAML) that runs Python tests on 3.11, caches pip, runs flake8 + pytest, and uploads coverage to Codecov with secrets.CODECOV_TOKEN.` |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
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'); |
|
|
const exWrap=$('#examples'); |
|
|
const autoRun=$('#autorun'); |
|
|
|
|
|
let pipe=null; |
|
|
let cancelled=false; |
|
|
let stopping=null; |
|
|
let currentStreamer=null; |
|
|
|
|
|
|
|
|
function log(...a){ |
|
|
const s = a.map(x => (typeof x === 'string' ? x : JSON.stringify(x))).join(' '); |
|
|
logDiv.textContent += s + '\n'; |
|
|
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(){ |
|
|
log('Importing library:',TRANSFORMERS_CDN); |
|
|
return await import(TRANSFORMERS_CDN); |
|
|
} |
|
|
|
|
|
function renderExamples(){ |
|
|
exWrap.innerHTML=''; |
|
|
EXAMPLES.forEach((ex)=>{ |
|
|
const b=document.createElement('button'); |
|
|
b.textContent=ex.title; b.className='ghost'; |
|
|
b.addEventListener('click',()=>{ |
|
|
sysEl.value = ex.sys || ''; |
|
|
promptEl.value = ex.prompt || ''; |
|
|
if(autoRun.checked){ sendBtn.click(); } |
|
|
}); |
|
|
exWrap.appendChild(b); |
|
|
}); |
|
|
} |
|
|
renderExamples(); |
|
|
|
|
|
|
|
|
loadBtn.addEventListener('click', ()=>{ |
|
|
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, TextStreamer, InterruptableStoppingCriteria } = await importTransformers(); |
|
|
|
|
|
if (device !== 'webgpu') { |
|
|
log('WebGPU not detected; falling back to device=auto (WASM/CPU).'); |
|
|
chip('warn','WebGPU not detected — using auto'); |
|
|
} else { |
|
|
log('WebGPU detected.'); |
|
|
} |
|
|
log('Transformers.js loaded. Creating text-generation pipeline…'); |
|
|
|
|
|
pipe = await pipeline('text-generation', MODEL_ID, options); |
|
|
stopping = new InterruptableStoppingCriteria(); |
|
|
|
|
|
window.__hf = { TextStreamer }; |
|
|
|
|
|
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){ chip('warn','Model not loaded'); return; } |
|
|
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…'); chatDiv.setAttribute('aria-busy','true'); |
|
|
|
|
|
|
|
|
const messages = []; |
|
|
if (sys) messages.push({ role: 'system', content: sys }); |
|
|
messages.push({ role: 'user', content: user }); |
|
|
|
|
|
const { TextStreamer } = window.__hf || {}; |
|
|
let outText = ''; |
|
|
currentStreamer = new TextStreamer(pipe.tokenizer, { |
|
|
skip_prompt: true, |
|
|
callback_function: (chunk) => { outText += chunk; botEl.textContent = outText; } |
|
|
}); |
|
|
|
|
|
|
|
|
stopping?.reset?.(); |
|
|
|
|
|
const out = await pipe(messages, { |
|
|
max_new_tokens: 256, |
|
|
temperature: 0.7, |
|
|
top_p: 0.9, |
|
|
repetition_penalty: 1.05, |
|
|
streamer: currentStreamer, |
|
|
stopping_criteria: stopping |
|
|
}); |
|
|
|
|
|
|
|
|
if (!outText && Array.isArray(out) && out[0] && out[0].generated_text) { |
|
|
botEl.textContent = (typeof out[0].generated_text === 'string') |
|
|
? out[0].generated_text |
|
|
: JSON.stringify(out[0].generated_text); |
|
|
} |
|
|
|
|
|
chip('ok','Done'); setTimeout(clearChip, 1200); |
|
|
}catch(err){ |
|
|
log('❌ Generation error:', err?.message||err); |
|
|
chip('err','Generation failed'); |
|
|
}finally{ |
|
|
stopBtn.disabled=true; currentStreamer=null; chatDiv.setAttribute('aria-busy','false'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
stopBtn.addEventListener('click',()=>{ |
|
|
try{ |
|
|
stopping?.interrupt?.(); |
|
|
chip('warn','Stopped'); setTimeout(clearChip,1200); |
|
|
}catch{} |
|
|
}); |
|
|
</script> |
|
|
|
|
|
</body> |
|
|
</html> |
|
|
|
