| <!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")); |
| |
| |
| 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`; |
| |
| |
| 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()} |
| }); |
| |
| |
| $("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,"&").replace(/</g,"<").replace(/>/g,">");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> |
