Spaces:

VIDraft
/

WebLLM

Running

File size: 30,750 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="theme-color" content="#ffffff"/>
<title>WebLLM Chat — Local AI</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet"/>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#fff;--bg-warm:#faf9f7;--bg-cool:#f4f2ef;--surface:#fff;--border:#e8e5e0;--border-light:#f0ede8;--text:#1a1815;--text-2:#5c5650;--text-3:#9c958d;--text-4:#c4beb6;--accent:#4f6df5;--accent-hover:#3d5ae0;--accent-light:#eef1fe;--accent-text:#3b54c4;--green:#2d9d5e;--green-bg:#edf7f0;--red:#d44040;--red-bg:#fdf0f0;--amber:#c08520;--amber-bg:#fdf6e8;--radius:14px;--radius-sm:10px;--radius-xs:7px;--shadow-sm:0 1px 3px rgba(0,0,0,.04);--shadow-lg:0 12px 40px rgba(0,0,0,.08);--font:'Plus Jakarta Sans',system-ui,sans-serif;--font-display:'Newsreader',Georgia,serif;--font-mono:'IBM Plex Mono',monospace;--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px)}
html{font-size:16px;height:100%}body{font-family:var(--font);background:var(--bg-warm);color:var(--text);height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;opacity:0}body.ready{opacity:1;transition:opacity .3s}
input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appearance:none}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}
.screen{display:none;width:100%;height:100%}.screen.active{display:flex}
#landing{flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;overflow-y:auto;background:var(--bg);position:relative}
.landing-deco{position:absolute;width:min(500px,90vw);height:min(500px,90vw);border-radius:50%;background:radial-gradient(circle,rgba(79,109,245,.07),transparent 70%);top:50%;left:50%;transform:translate(-50%,-55%);pointer-events:none}
.landing-tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-light);padding:6px 16px;border-radius:100px;margin-bottom:20px;font-weight:500}
.dbadge{font-family:var(--font-mono);font-size:.6rem;font-weight:600;padding:4px 12px;border-radius:100px;margin-bottom:8px}.dbadge.m{background:var(--green-bg);color:var(--green)}.dbadge.d{background:var(--accent-light);color:var(--accent-text)}
.landing-title{font-family:var(--font-display);font-size:clamp(2.4rem,7vw,4.5rem);font-weight:400;line-height:1.1;letter-spacing:-.02em;margin-bottom:12px}.landing-title em{font-style:italic;color:var(--accent)}
.landing-sub{font-size:.92rem;color:var(--text-2);max-width:440px;line-height:1.7;margin-bottom:24px}
.minfo{font-family:var(--font-mono);font-size:.7rem;color:var(--text-3);margin-bottom:12px}
.mwrap{position:relative;width:100%;max-width:440px;margin-bottom:20px}
.minput{width:100%;padding:14px 40px 14px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font-mono);font-size:.78rem;outline:none;transition:border-color .2s,box-shadow .2s}
.minput:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,109,245,.1)}
.minput::placeholder{color:var(--text-4)}
.mchev{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-4);font-size:.65rem;pointer-events:none;transition:transform .2s}
.mwrap.open .mchev{transform:translateY(-50%) rotate(180deg)}
.mdrop{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1.5px solid var(--accent);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);max-height:350px;overflow-y:auto;z-index:100;display:none;box-shadow:var(--shadow-lg)}
.mwrap.open .mdrop{display:block}
.mwrap.open .minput{border-radius:var(--radius-sm) var(--radius-sm) 0 0;border-color:var(--accent)}
.mi{padding:10px 14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:6px;border-bottom:1px solid var(--border-light);transition:background .1s;min-height:44px}
.mi:last-child{border-bottom:none}.mi:hover:not(.lk){background:var(--accent-light)}
.mi.lk{opacity:.3;cursor:not-allowed}
.mi-name{font-family:var(--font-mono);font-size:.72rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.mi.lk .mi-name{text-decoration:line-through}
.mi-meta{display:flex;gap:3px;align-items:center;flex-shrink:0}
.vb{background:var(--amber-bg);color:var(--amber);padding:2px 6px;border-radius:5px;font-family:var(--font-mono);font-size:.52rem;font-weight:600}
.mb{background:var(--green-bg);color:var(--green);padding:2px 5px;border-radius:5px;font-family:var(--font-mono);font-size:.5rem;font-weight:700}
.lb{background:var(--red-bg);color:var(--red);padding:2px 5px;border-radius:5px;font-family:var(--font-mono);font-size:.5rem;font-weight:700}
.msec{padding:7px 14px 3px;font-family:var(--font-mono);font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);background:var(--bg-warm);position:sticky;top:0;z-index:1}
.btn-load{font-family:var(--font);font-size:.9rem;font-weight:600;color:#fff;background:var(--accent);border:none;padding:14px 40px;border-radius:100px;cursor:pointer;transition:all .2s;box-shadow:0 2px 12px rgba(79,109,245,.25);min-height:48px}
.btn-load:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn-load:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.landing-footer{margin-top:auto;padding:20px 0;font-family:var(--font-mono);font-size:.65rem;color:var(--text-4)}.landing-footer a{color:var(--text-3);text-decoration:none}
#loading{flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px;background:var(--bg)}
.lr{width:56px;height:56px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.lt{font-size:.88rem;color:var(--text-2);font-weight:500;text-align:center}.ls{font-size:.75rem;color:var(--text-3);margin-top:4px;text-align:center}
.dbar{width:min(360px,85vw)}.dt{font-family:var(--font-mono);font-size:.68rem;color:var(--text-3);text-align:center;margin-bottom:6px}
.dtrack{height:4px;background:var(--bg-cool);border-radius:2px;overflow:hidden}.dfill{height:100%;width:0%;background:var(--accent);border-radius:2px;transition:width .3s}
#chat{flex-direction:column;height:100%;background:var(--bg-warm)}
.ch{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;padding-top:calc(10px + var(--safe-top));border-bottom:1px solid var(--border-light);background:var(--bg);flex-shrink:0;min-height:56px;gap:8px}
.ch-l{display:flex;align-items:center;gap:10px;min-width:0}
.ch-av{width:36px;height:36px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--accent),#8b5cf6);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1rem;color:#fff;font-weight:600;flex-shrink:0}
.ch-info{min-width:0}.ch-title{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-st{font-family:var(--font-mono);font-size:.6rem;color:var(--green);display:flex;align-items:center;gap:4px;font-weight:500}.ch-st::before{content:"";width:5px;height:5px;background:var(--green);border-radius:50%}
.ch-r{display:flex;align-items:center;gap:6px;flex-shrink:0}
.tp{display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none;padding:5px 10px;border-radius:100px;border:1px solid var(--border);background:var(--surface);transition:all .2s;min-height:32px}
.tp:has(input:checked){background:var(--accent-light);border-color:var(--accent)}.tp input{display:none}
.td{width:8px;height:8px;border-radius:50%;background:var(--text-4);transition:background .2s}.tp:has(input:checked) .td{background:var(--accent)}
.tl{font-size:.65rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}.tp:has(input:checked) .tl{color:var(--accent-text)}
.bi{background:var(--surface);border:1px solid var(--border);color:var(--text-3);width:32px;height:32px;border-radius:var(--radius-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-size:.78rem;flex-shrink:0}
.bi:hover{background:var(--bg-cool)}.bi.act{background:var(--accent-light);color:var(--accent-text);border-color:var(--accent)}
.br{font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);background:var(--surface);border:1px solid var(--border);padding:6px 12px;border-radius:100px;cursor:pointer;transition:all .15s;min-height:32px}.br:hover{color:var(--red);border-color:var(--red);background:var(--red-bg)}
.sp{padding:0 16px;background:var(--bg);border-bottom:1px solid var(--border-light);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s}.sp.open{max-height:200px;padding:10px 16px}
.sr{display:flex;align-items:center;gap:5px}
.slb{font-family:var(--font-mono);font-size:.6rem;font-weight:600;text-transform:uppercase;color:var(--text-3);min-width:40px}
.ssl{padding:4px 8px;border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.72rem;outline:none;min-height:32px}
.sslider{width:64px;accent-color:var(--accent);height:3px;cursor:pointer}
.sv{font-family:var(--font-mono);font-size:.68rem;color:var(--text-2);min-width:28px;text-align:right}
.spw{padding:0 16px;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;background:var(--bg)}.spw.open{max-height:170px;padding:8px 16px 10px;border-bottom:1px solid var(--border-light)}
.spi{width:100%;padding:10px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--bg-warm);color:var(--text);outline:none;resize:vertical;min-height:48px;max-height:120px;font-size:.8rem;line-height:1.5}.spi:focus{border-color:var(--accent)}.spi::placeholder{color:var(--text-4)}
.sb{display:flex;align-items:center;justify-content:center;gap:16px;padding:5px 16px;border-bottom:1px solid var(--border-light);background:var(--bg);flex-shrink:0;flex-wrap:wrap}.sb:empty{display:none}
.st{display:flex;align-items:center;gap:4px}.stl{color:var(--text-4);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-family:var(--font-mono);font-size:.55rem}.stv{color:var(--text-2);font-weight:600;font-family:var(--font-mono);font-size:.68rem}.stv.hl{color:var(--accent-text)}
.eb{display:none;padding:10px 16px;background:var(--red-bg);border:1px solid rgba(212,64,64,.2);border-radius:var(--radius-sm);color:var(--red);font-size:.8rem;margin:8px 16px 0}.eb.vis{display:block}
.cms{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.mg{display:flex;flex-direction:column;gap:3px;max-width:85%;animation:mi .25s ease}.mg.u{align-self:flex-end}.mg.a{align-self:flex-start}
@keyframes mi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.mr{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:600}.mg.a .mr{color:var(--accent-text)}
.mb2{padding:12px 16px;border-radius:var(--radius);font-size:.88rem;line-height:1.7;word-wrap:break-word;box-shadow:var(--shadow-sm)}
.mg.u .mb2{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.mg.a .mb2{background:var(--surface);border:1px solid var(--border-light);border-bottom-left-radius:4px}
.mg.a .mb2.gen{border-color:var(--accent);box-shadow:0 0 0 2px rgba(79,109,245,.08)}
.mb2.md{white-space:normal}.mb2.md p{margin:0 0 .5em}.mb2.md p:last-child{margin:0}.mb2.md code{font-family:var(--font-mono);font-size:.84em;padding:2px 6px;background:var(--bg-cool);border-radius:5px;color:var(--accent-text)}.mb2.md pre{margin:.5em 0;padding:12px;background:var(--bg-warm);border:1px solid var(--border-light);border-radius:var(--radius-sm);overflow-x:auto}.mb2.md pre code{padding:0;background:none;color:var(--text);font-size:.78rem}
.mb2.md ul,.mb2.md ol{margin:.4em 0;padding-left:1.4em}.mb2.md blockquote{margin:.5em 0;padding:8px 12px;border-left:3px solid var(--accent);color:var(--text-2);background:var(--accent-light);border-radius:0 var(--radius-xs) var(--radius-xs) 0}
.mb2.md table{margin:.5em 0;border-collapse:collapse;width:100%;font-size:.82rem}.mb2.md th,.mb2.md td{padding:6px 8px;border:1px solid var(--border)}.mb2.md th{background:var(--bg-cool);font-weight:600;font-size:.72rem;text-transform:uppercase}
.mg.u .mb2.md code{background:rgba(255,255,255,.2);color:#fff}.mg.u .mb2.md pre{background:rgba(0,0,0,.1)}.mg.u .mb2.md pre code{color:#fff}
.ms2{font-family:var(--font-mono);font-size:.58rem;color:var(--text-3);margin-top:5px}
.dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:4px;animation:dot 1.2s ease-in-out infinite}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.cia{padding:10px 12px;padding-bottom:calc(10px + var(--safe-bottom));border-top:1px solid var(--border-light);background:var(--bg);flex-shrink:0}
.cir{display:flex;align-items:flex-end;gap:6px}
.ciw{flex:1}.ciw textarea{width:100%;min-height:44px;max-height:120px;padding:11px 14px;background:var(--bg-warm);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:.88rem;line-height:1.5;resize:none;outline:none;transition:border-color .2s}.ciw textarea:focus{border-color:var(--accent)}.ciw textarea::placeholder{color:var(--text-4)}
.bs{width:44px;height:44px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;background:var(--accent);border:none;color:#fff;transition:all .15s}.bs:disabled{opacity:.3;cursor:not-allowed}.bs:not(:disabled):active{transform:scale(.95)}
.bs .is{display:none}.bs.stop{background:var(--red)}.bs.stop .ss{display:none}.bs.stop .is{display:block}
.cfn{font-family:var(--font-mono);font-size:.55rem;color:var(--text-4);text-align:center;margin-top:6px}
.wm{text-align:center;padding:40px 20px;color:var(--text-3);flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.wm h3{font-family:var(--font-display);font-size:1.5rem;color:var(--text-2);margin-bottom:8px;font-weight:400;font-style:italic}.wm p{font-size:.85rem;line-height:1.65}
.toast{position:fixed;bottom:calc(24px + var(--safe-bottom));left:50%;transform:translateX(-50%) translateY(20px);padding:10px 20px;border-radius:var(--radius-sm);font-size:.82rem;font-weight:500;background:var(--surface);color:var(--text);border:1px solid var(--border);opacity:0;transition:all .3s;z-index:1000;max-width:min(480px,90vw);box-shadow:var(--shadow-lg);pointer-events:none}.toast.show{transform:translateX(-50%) translateY(0);opacity:1}.toast.err{border-color:var(--red);color:var(--red)}.toast.ok{border-color:var(--green);color:var(--green)}
@media(max-width:640px){.ch{padding:8px 12px;padding-top:calc(8px + var(--safe-top));gap:6px}.ch-title{font-size:.82rem}.ch-r{gap:4px}.tp{padding:4px 8px;min-height:28px}.tl{font-size:.58rem}.bi{width:28px;height:28px;font-size:.7rem}.br{font-size:.58rem;padding:5px 10px;min-height:28px}.cms{padding:12px}.mg{max-width:90%}.mb2{padding:10px 14px;font-size:.85rem}.cia{padding:8px 10px;padding-bottom:calc(8px + var(--safe-bottom))}.bs{width:42px;height:42px}.ciw textarea{min-height:42px;padding:10px 12px;font-size:.86rem}}
@media(max-width:380px){.tl{display:none}.landing-title{font-size:2rem}.ch-title{font-size:.78rem;max-width:120px}}
</style>
</head>
<body>
<div id="landing" class="screen active">
  <div class="landing-deco"></div>
  <div class="landing-tag">WebLLM · Mobile + Desktop</div>
  <div class="dbadge" id="db"></div>
  <h1 class="landing-title">Local <em>AI Chat</em></h1>
  <p class="landing-sub">Run open-source LLMs in your browser. No server, no API keys.</p>
  <div class="minfo" id="minfo">Loading models…</div>
  <div class="mwrap" id="mwrap">
    <input class="minput" id="minput" type="text" value="" placeholder="Select a model…" autocomplete="off"/>
    <span class="mchev">▾</span>
    <div class="mdrop" id="mdrop"></div>
  </div>
  <button class="btn-load" id="btnLoad" disabled>Load Model</button>
  <div class="landing-footer">Powered by <a href="https://webllm.mlc.ai/" target="_blank">WebLLM</a></div>
</div>
<div id="loading" class="screen">
  <div class="lr" id="lr"></div>
  <div><div class="lt" id="lt">Initializing…</div><div class="ls" id="ls">Cached after first download.</div></div>
  <div class="dbar" id="dbar" style="display:none"><div class="dt" id="dtt"></div><div class="dtrack"><div class="dfill" id="df"></div></div></div>
</div>
<div id="chat" class="screen">
  <div class="ch"><div class="ch-l"><div class="ch-av">W</div><div class="ch-info"><div class="ch-title" id="ct">WebLLM</div><div class="ch-st">Ready</div></div></div>
    <div class="ch-r"><label class="tp"><input type="checkbox" id="stog" checked/><span class="td"></span><span class="tl">Stream</span></label><button class="bi" id="bset">⚙</button><button class="bi" id="bsys">S</button><button class="br" id="brst">Reset</button></div>
  </div>
  <div class="sp" id="sp"><div class="sr"><span class="slb">Temp</span><input type="range" class="sslider" id="stemp" min="0" max="200" value="70"/><span class="sv" id="vtemp">0.70</span></div><div class="sr"><span class="slb">Top-P</span><input type="range" class="sslider" id="stopp" min="1" max="100" value="95"/><span class="sv" id="vtopp">0.95</span></div><div class="sr"><span class="slb">Tokens</span><select class="ssl" id="smax"><option value="256">256</option><option value="512" selected>512</option><option value="1024">1024</option><option value="2048">2048</option></select></div></div>
  <div class="spw" id="spw"><textarea class="spi" id="sysin" placeholder="System prompt (optional)…"></textarea></div>
  <div class="sb" id="sbar"></div>
  <div class="eb" id="eb"></div>
  <div class="cms" id="cms"><div class="wm"><h3>Start a conversation</h3><p>Type a message below.</p></div></div>
  <div class="cia"><div class="cir"><div class="ciw"><textarea id="inp" rows="1" placeholder="Type a message…"></textarea></div><button class="bs" id="bsend" disabled><svg class="ss" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg><svg class="is" width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="2"/></svg></button></div><div class="cfn">100% local — no data leaves your device.</div></div>
</div>
<div class="toast" id="toast"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js"></script>
<script type="module">
import * as webllm from "https://esm.run/@mlc-ai/web-llm";

const isMob=(()=>{const u=navigator.userAgent||"";return/Mobile|Android|iPhone|iPad|iPod/i.test(u)||('ontouchstart'in window&&innerWidth<768)})();
const $=id=>document.getElementById(id);
document.fonts.ready.then(()=>document.body.classList.add("ready"));

/* Read ALL models from WebLLM runtime */
const raw=webllm.prebuiltAppConfig.model_list;
const SKIP=/snowflake|embed|arctic/i;
const models=raw.filter(m=>!SKIP.test(m.model_id)).map(m=>{
  const v=m.vram_required_MB||0;
  const vStr=v>1024?(v/1024).toFixed(1)+"GB":Math.round(v)+"MB";
  return{id:m.model_id,vram:v,vStr,low:!!m.low_resource_required};
}).sort((a,b)=>a.vram-b.vram);

const mobModels=models.filter(m=>m.low);
const $db=$("db");
if(isMob){$db.textContent=`MOBILE · ${mobModels.length} models`;$db.className="dbadge m"}
else{$db.textContent=`DESKTOP · ${models.length} models`;$db.className="dbadge d"}
$("minfo").textContent=isMob?`${mobModels.length} mobile-safe of ${models.length} total`:`${models.length} models available`;

/* Default */
const def=isMob?(mobModels.find(m=>/SmolLM2-360M.*q4f16/i.test(m.id))||mobModels[0]):(models.find(m=>/Qwen3-4B-q4f16/i.test(m.id))||models.find(m=>/Llama-3\.2-3B.*q4f16/i.test(m.id))||models[0]);
const $mi=$("minput"),$mw=$("mwrap"),$md=$("mdrop");
$mi.value=def?.id||"";
$("btnLoad").disabled=false;

function fam(id){
  if(/^Qwen3-/i.test(id))return"Qwen3";if(/^Qwen2\.5-C/i.test(id))return"Qwen2.5-Coder";if(/^Qwen2\.5-M/i.test(id))return"Qwen2.5-Math";if(/^Qwen2\.5/i.test(id))return"Qwen2.5";if(/^Qwen2-M/i.test(id))return"Qwen2-Math";if(/^Qwen2/i.test(id))return"Qwen2";
  if(/^DeepSeek/i.test(id))return"DeepSeek";if(/^SmolLM/i.test(id))return"SmolLM2";if(/^Llama-3\.2/i.test(id))return"Llama3.2";if(/^Llama-3\.1/i.test(id))return"Llama3.1";if(/^Llama-3-/i.test(id))return"Llama3";if(/^Llama-2/i.test(id))return"Llama2";
  if(/^gemma-2-/i.test(id))return"Gemma2";if(/^gemma-/i.test(id))return"Gemma";if(/^Phi-3\.5/i.test(id))return"Phi3.5";if(/^Phi-3/i.test(id))return"Phi3";if(/^phi-/i.test(id))return"Phi";
  if(/^Mistral/i.test(id))return"Mistral";if(/^Hermes/i.test(id))return"Hermes";if(/^TinyLlama/i.test(id))return"TinyLlama";if(/^Ministral/i.test(id))return"Ministral";
  if(/^stable/i.test(id))return"StableLM";if(/^Red/i.test(id))return"RedPajama";if(/^Wizard/i.test(id))return"Wizard";if(/^Open/i.test(id))return"OpenHermes";if(/^Neural/i.test(id))return"NeuralHermes";
  return"Other";
}

function renderDD(q=""){
  const f=q.toLowerCase();
  const list=f?models.filter(m=>m.id.toLowerCase().includes(f)||fam(m.id).toLowerCase().includes(f)):models;
  const fams=[...new Set(list.map(m=>fam(m.id)))];
  let h="";
  for(const fm of fams){
    const grp=list.filter(m=>fam(m.id)===fm);
    h+=`<div class="msec">${fm} (${grp.length})</div>`;
    for(const m of grp){
      const lk=isMob&&!m.low;
      const c=lk?"mi lk":"mi";
      let bd=`<span class="vb">${m.vStr}</span>`;
      if(m.low)bd+=`<span class="mb">OK</span>`;
      if(lk)bd+=`<span class="lb">PC</span>`;
      h+=`<div class="${c}" data-id="${m.id}"><span class="mi-name">${m.id}</span><span class="mi-meta">${bd}</span></div>`;
    }
  }
  if(!list.length)h='<div style="padding:12px;text-align:center;color:var(--text-3);font-size:.75rem">No match</div>';
  $md.innerHTML=h;
  $md.querySelectorAll(".mi:not(.lk)").forEach(el=>el.addEventListener("click",()=>{$mi.value=el.dataset.id;closeDD()}));
}
function openDD(){$mw.classList.add("open");renderDD("")}
function closeDD(){$mw.classList.remove("open")}
$mi.addEventListener("click",()=>{$mi.select();openDD()});
$mi.addEventListener("focus",()=>{$mi.select();openDD()});
$mi.addEventListener("input",()=>renderDD($mi.value));
document.addEventListener("click",e=>{if(!e.target.closest(".mwrap"))closeDD()});
$mi.addEventListener("keydown",e=>{
  if(e.key==="Escape")closeDD();
  const items=$md.querySelectorAll(".mi:not(.lk)");if(!items.length)return;
  const act=$md.querySelector(".mi.active")||null;let idx=Array.from(items).indexOf(act);
  if(e.key==="ArrowDown"){e.preventDefault();idx=Math.min(idx+1,items.length-1);items.forEach(i=>i.classList.remove("active"));items[idx].classList.add("active");items[idx].scrollIntoView({block:"nearest"})}
  if(e.key==="ArrowUp"){e.preventDefault();idx=Math.max(idx-1,0);items.forEach(i=>i.classList.remove("active"));items[idx].classList.add("active");items[idx].scrollIntoView({block:"nearest"})}
  if(e.key==="Enter"){e.preventDefault();const a=$md.querySelector(".mi.active");if(a)$mi.value=a.dataset.id;closeDD()}
});

/* Settings */
$("bset").addEventListener("click",()=>{$("sp").classList.toggle("open");$("bset").classList.toggle("act")});
$("bsys").addEventListener("click",()=>{$("spw").classList.toggle("open");$("bsys").classList.toggle("act")});
$("stemp").addEventListener("input",()=>$("vtemp").textContent=(parseInt($("stemp").value)/100).toFixed(2));
$("stopp").addEventListener("input",()=>$("vtopp").textContent=(parseInt($("stopp").value)/100).toFixed(2));
function showScr(id){document.querySelectorAll(".screen").forEach(s=>s.classList.toggle("active",s.id===id))}

let engine=null,isGen=false,abort=null,hist=[],totTok=0;
let tt=null;function toast(m,c=""){clearTimeout(tt);$("toast").textContent=m;$("toast").className="toast "+c+" show";tt=setTimeout(()=>$("toast").classList.remove("show"),3000)}
function stats(tps,tok){if(!totTok&&!tps){$("sbar").innerHTML="";return}let h="";if(tps!=null)h+=`<div class="st"><span class="stl">Speed</span><span class="stv hl">${tps} t/s</span></div>`;if(tok!=null)h+=`<div class="st"><span class="stl">Tokens</span><span class="stv">${tok}</span></div>`;if(totTok>0)h+=`<div class="st"><span class="stl">Total</span><span class="stv">${totTok}</span></div>`;$("sbar").innerHTML=h}

$("btnLoad").addEventListener("click",async()=>{
  const mid=$mi.value.trim();if(!mid){toast("Select a model","err");return}
  const mf=models.find(x=>x.id===mid);
  if(isMob&&mf&&!mf.low){toast("Too large for mobile","err");return}
  showScr("loading");$("dbar").style.display="none";
  try{
    $("lt").textContent="Initializing…";
    engine=await webllm.CreateMLCEngine(mid,{initProgressCallback:p=>{$("dbar").style.display="";const pct=Math.round(p.progress*100);$("df").style.width=pct+"%";$("dtt").textContent=p.text||pct+"%";$("lt").textContent=p.text||"Loading…"}});
    $("lt").textContent="Ready!";$("ct").textContent=mid.replace(/-MLC$/,"").replace(/-q\w+/,"");
    setTimeout(()=>showScr("chat"),300);toast("Loaded!","ok");
  }catch(e){console.error(e);$("lt").textContent="Failed";$("ls").textContent=e.message;$("lr").style.borderTopColor="var(--red)";toast("Failed","err")}
});

const $inp=$("inp"),$bs=$("bsend"),$cms=$("cms"),$eb=$("eb");
$inp.addEventListener("input",()=>{$inp.style.height="auto";$inp.style.height=Math.min($inp.scrollHeight,120)+"px";ubtn()});
$inp.addEventListener("keydown",e=>{if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();if(!isGen)send()}});
$bs.addEventListener("click",()=>{if(isGen&&abort){abort.abort();abort=null}else send()});
function ubtn(){if(isGen){$bs.disabled=false;$bs.classList.add("stop")}else{$bs.classList.remove("stop");$bs.disabled=!$inp.value.trim()}}
$("brst").addEventListener("click",async()=>{hist=[];totTok=0;if(engine)try{await engine.resetChat()}catch(e){}$cms.innerHTML='<div class="wm"><h3>Start a conversation</h3><p>Type a message below.</p></div>';$eb.classList.remove("vis");$inp.value="";$inp.style.height="auto";stats();ubtn()});
function md(t){if(typeof marked==="undefined")return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");try{marked.setOptions({breaks:true,gfm:true});return marked.parse(t)}catch{return t}}

async function send(){
  if(isGen||!engine)return;const text=$inp.value.trim();if(!text)return;
  $eb.classList.remove("vis");const w=$cms.querySelector(".wm");if(w)w.remove();
  amsg("u",text);hist.push({role:"user",content:text});
  $inp.value="";$inp.style.height="auto";isGen=true;ubtn();
  const{g,b}=aph();
  try{
    const msgs=[];const sp=$("sysin").value.trim();if(sp)msgs.push({role:"system",content:sp});msgs.push(...hist);
    let full="",tc=0;const t0=performance.now();
    const tn=document.createElement("div");tn.className="msg-text";b.appendChild(tn);
    if($("stog").checked){
      abort=new AbortController();
      const s=await engine.chat.completions.create({messages:msgs,temperature:parseInt($("stemp").value)/100,top_p:parseInt($("stopp").value)/100,max_tokens:parseInt($("smax").value),stream:true,stream_options:{include_usage:true}});
      for await(const c of s){if(abort?.signal?.aborted)break;const d=c.choices?.[0]?.delta?.content;if(d){full+=d;tc++;tn.innerHTML=md(full);$cms.scrollTop=$cms.scrollHeight}if(c.usage)tc=c.usage.completion_tokens||tc}
    }else{const r=await engine.chat.completions.create({messages:msgs,temperature:parseInt($("stemp").value)/100,top_p:parseInt($("stopp").value)/100,max_tokens:parseInt($("smax").value)});full=r.choices[0]?.message?.content||"";tc=r.usage?.completion_tokens||0;tn.innerHTML=md(full)}
    hist.push({role:"assistant",content:full});
    if(full.includes("`")||full.includes("#")||full.includes("*"))b.classList.add("md");
    const el=(performance.now()-t0)/1000;const tps=tc>0?(tc/el).toFixed(1):"?";
    const se=document.createElement("div");se.className="ms2";se.textContent=`${tc} tok · ${tps} t/s · ${el.toFixed(1)}s`;g.appendChild(se);
    totTok+=tc;stats(tps,tc);b.classList.remove("gen");
  }catch(e){if(e.name==="AbortError"){b.classList.remove("gen");toast("Stopped")}else{console.error(e);g.remove();$eb.textContent="Error: "+e.message;$eb.classList.add("vis");toast("Failed","err")}}
  isGen=false;abort=null;ubtn();$cms.scrollTop=$cms.scrollHeight;
}
function amsg(r,t){const g=document.createElement("div");g.className=`mg ${r}`;const rl=document.createElement("div");rl.className="mr";rl.textContent=r==="u"?"You":"AI";g.appendChild(rl);const b=document.createElement("div");b.className="mb2";b.textContent=t;g.appendChild(b);$cms.appendChild(g);$cms.scrollTop=$cms.scrollHeight}
function aph(){const g=document.createElement("div");g.className="mg a";const r=document.createElement("div");r.className="mr";r.textContent="AI";g.appendChild(r);const b=document.createElement("div");b.className="mb2 gen";const d=document.createElement("span");d.className="dots";for(let i=0;i<3;i++)d.appendChild(document.createElement("span"));b.appendChild(d);g.appendChild(b);$cms.appendChild(g);$cms.scrollTop=$cms.scrollHeight;return{g,b}}
window.visualViewport?.addEventListener("resize",()=>{$cms.scrollTop=$cms.scrollHeight});
(async()=>{if(!navigator.gpu){toast("WebGPU not available","err");$("btnLoad").disabled=true;return}try{const a=await navigator.gpu.requestAdapter({powerPreference:"high-performance"});if(!a){toast("No WebGPU adapter","err");$("btnLoad").disabled=true}}catch(e){toast("WebGPU failed","err")}})();
</script>
</body>
</html>