|
|
<!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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
