Spaces:

VIDraft
/

WebGPU

Running

App Files Files Community

openfree commited on about 1 month ago

Commit

76a6627

verified ·

1 Parent(s): b4cd759

Update index.html

Browse files

Files changed (1) hide show

index.html +276 -846

index.html CHANGED Viewed

@@ -2,925 +2,355 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8"/>
-<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
-<title>Qwen 3.5 Vision — In-Browser AI Chat</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=DM+Mono:wght@300;400;500&family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
-<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚡</text></svg>"/>
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
 :root{
-  --bg:#0b0c0f;--surface:#131518;--surface-2:#1a1d22;--surface-3:#22262c;
-  --border:#2a2e36;--border-light:#353a44;
-  --text:#e8e4de;--text-dim:#8a8680;--text-muted:#5c5955;
-  --accent:#e8a84c;--accent-dim:#c4862e;
-  --accent-glow:rgba(232,168,76,0.12);--accent-glow-strong:rgba(232,168,76,0.25);
-  --red:#d45a5a;--green:#6abf7b;--blue:#5b9bd5;--yellow:#e2c25a;
-  --radius:12px;--radius-sm:8px;
-  --font-body:'Manrope',sans-serif;--font-display:'Instrument Serif',serif;--font-mono:'DM Mono',monospace;
 }
-html{font-size:16px}
-body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100dvh;overflow:hidden;-webkit-font-smoothing:antialiased;opacity:0}
-body.ready{opacity:1;transition:opacity .4s}
-body::before{content:"";position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:9999}
-input,textarea,button,select{font-family:inherit;font-size:inherit}
-::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}
-.screen{display:none;width:100%;height:100dvh}.screen.active{display:flex}
-/* ─── LANDING ─── */
-#landing{flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
-.landing-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,var(--accent-glow-strong) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-55%);animation:breathe 6s ease-in-out infinite;pointer-events:none}
-@keyframes breathe{0%,100%{opacity:.5;transform:translate(-50%,-55%) scale(1)}50%{opacity:.8;transform:translate(-50%,-55%) scale(1.12)}}
-.landing-tag{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);background:var(--accent-glow);border:1px solid rgba(232,168,76,.2);padding:6px 16px;border-radius:100px;margin-bottom:28px;position:relative}
-.landing-title{font-family:var(--font-display);font-size:clamp(3rem,8vw,5.5rem);font-weight:400;line-height:1.05;letter-spacing:-.02em;color:var(--text);position:relative;margin-bottom:16px}
 .landing-title em{font-style:italic;color:var(--accent)}
-.landing-sub{font-size:1.05rem;color:var(--text-dim);max-width:520px;line-height:1.65;margin-bottom:36px;position:relative;font-weight:300}
-.landing-specs{display:flex;gap:32px;margin-bottom:36px;position:relative}
-.spec{text-align:center}.spec-value{font-family:var(--font-mono);font-size:1rem;font-weight:500;color:var(--text)}.spec-label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-top:4px}
-/* Model search */
-.model-search-wrap{position:relative;width:420px;max-width:90vw;margin-bottom:20px}
-.model-search-input{width:100%;padding:12px 38px 12px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-family:var(--font-mono);font-size:.85rem;outline:none;transition:border-color .2s}
-.model-search-input:focus{border-color:var(--accent)}
-.model-search-input::placeholder{color:var(--text-muted)}
-.search-chevron{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.7rem;pointer-events:none;transition:transform .2s}
 .model-search-wrap.open .search-chevron{transform:translateY(-50%) rotate(180deg)}
-.model-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--surface-2);border:1px solid var(--accent);border-top:none;border-radius:0 0 10px 10px;max-height:300px;overflow-y:auto;z-index:100;display:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
 .model-search-wrap.open .model-dropdown{display:block}
-.model-search-wrap.open .model-search-input{border-radius:10px 10px 0 0;border-color:var(--accent)}
-.model-item{padding:10px 14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .1s}
 .model-item:last-child{border-bottom:none}
-.model-item:hover,.model-item.active{background:var(--accent-glow)}
-.model-item-name{font-family:var(--font-mono);font-size:.8rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
 .model-item-meta{display:flex;gap:5px;align-items:center;flex-shrink:0}
-.size-badge{background:var(--accent-glow);color:var(--accent);padding:2px 7px;border-radius:4px;font-family:var(--font-mono);font-size:.65rem;font-weight:600}
-.cached-badge{background:rgba(106,191,123,.15);color:var(--green);padding:2px 6px;border-radius:4px;font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.05em}
-.model-dropdown-loading{padding:10px 14px;font-size:.75rem;color:var(--text-muted);text-align:center}
-.btn-load-group{display:inline-flex;align-items:stretch;border-radius:100px;position:relative;box-shadow:0 0 40px var(--accent-glow-strong);transition:all .25s}
-.btn-load-group:hover{transform:translateY(-2px);box-shadow:0 0 60px var(--accent-glow-strong),0 8px 30px rgba(0,0,0,.4)}
-.btn-load{font-family:var(--font-body);font-size:.92rem;font-weight:600;letter-spacing:.03em;color:var(--bg);background:var(--accent);border:none;padding:16px 36px;border-radius:100px;cursor:pointer}
-.btn-load:disabled{opacity:.4;cursor:not-allowed}
-.landing-footer{position:absolute;bottom:28px;font-family:var(--font-mono);font-size:.68rem;color:var(--text-muted);letter-spacing:.06em}
-.landing-footer a{color:var(--text-dim);text-decoration:none}.landing-footer a:hover{color:var(--accent)}
-/* ─── LOADING ─── */
-#loading{flex-direction:column;align-items:center;justify-content:center;gap:28px}
-.loader-ring{width:72px;height:72px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
 @keyframes spin{to{transform:rotate(360deg)}}
-.loader-text{font-family:var(--font-mono);font-size:.82rem;color:var(--text-dim);letter-spacing:.05em;text-align:center}
-.loader-sub{font-size:.72rem;color:var(--text-muted);margin-top:8px;text-align:center;line-height:1.5}
-.download-bar{width:360px;max-width:80vw;margin-top:4px}
-.download-text{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);text-align:center;margin-bottom:6px}
-.download-track{height:3px;background:var(--border);border-radius:2px;overflow:hidden}
 .download-fill{height:100%;width:0%;background:var(--accent);border-radius:2px;transition:width .3s}
-/* ─── CHAT ─── */
-#chat{flex-direction:column;height:100dvh}
-.chat-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}
-.chat-header-left{display:flex;align-items:center;gap:12px}
-.chat-avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-dim));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1rem;color:var(--bg);font-weight:600}
-.chat-header-title{font-family:var(--font-display);font-size:1.15rem}
-.chat-header-status{font-family:var(--font-mono);font-size:.65rem;color:var(--green);letter-spacing:.06em;display:flex;align-items:center;gap:5px}
-.chat-header-status::before{content:"";width:6px;height:6px;background:var(--green);border-radius:50%}
-.chat-header-controls{display:flex;align-items:center;gap:10px}
-.toggle-wrap{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
-.toggle-wrap input{display:none}
-.toggle-slider{width:30px;height:16px;background:var(--border);border-radius:100px;position:relative;transition:background .2s}
-.toggle-slider::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--text-muted);top:2px;left:2px;transition:all .2s}
-.toggle-wrap input:checked+.toggle-slider{background:var(--accent-glow)}
-.toggle-wrap input:checked+.toggle-slider::after{background:var(--accent);left:16px}
-.toggle-lbl{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);transition:color .2s}
-.toggle-wrap input:checked~.toggle-lbl{color:var(--accent)}
-.btn-icon{background:transparent;border:1px solid var(--border);color:var(--text-muted);width:28px;height:28px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:.8rem}
-.btn-icon:hover{background:var(--surface-2);color:var(--text-dim)}
-.btn-reset{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);background:transparent;border:1px solid var(--border);padding:6px 12px;border-radius:100px;cursor:pointer;transition:all .2s}
-.btn-reset:hover{color:var(--red);border-color:var(--red)}
-/* Stats bar */
-.stats-bar{display:flex;align-items:center;justify-content:center;gap:24px;padding:6px 20px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;font-size:.65rem}
-.stats-bar:empty{display:none}
-.stat{display:flex;align-items:center;gap:5px}
-.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-family:var(--font-mono);font-size:.58rem}
-.stat-value{color:var(--text-dim);font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-size:.7rem}
-.stat-value.hl{color:var(--accent)}
-/* Settings panel */
-.settings-panel{padding:0 20px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:center;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease}
-.settings-panel.open{max-height:200px;padding:10px 20px}
-.settings-row{display:flex;align-items:center;gap:6px}
-.settings-label{font-family:var(--font-mono);font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);min-width:44px;white-space:nowrap}
-.settings-select{padding:3px 6px;border-radius:5px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:.72rem;outline:none;cursor:pointer}
 .settings-select:focus{border-color:var(--accent)}
-.settings-slider{width:70px;accent-color:var(--accent);height:3px;cursor:pointer}
-.settings-val{font-family:var(--font-mono);font-size:.68rem;color:var(--text-dim);font-variant-numeric:tabular-nums;min-width:28px;text-align:right}
-/* System prompt */
-.system-prompt-wrap{padding:0 20px;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;background:var(--surface)}
-.system-prompt-wrap.open{max-height:180px;padding:8px 20px 10px;border-bottom:1px solid var(--border)}
-.system-prompt-input{width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);outline:none;resize:vertical;min-height:50px;max-height:140px;font-size:.78rem;line-height:1.5;font-family:var(--font-body)}
-.system-prompt-input:focus{border-color:var(--accent)}
-.system-prompt-input::placeholder{color:var(--text-muted)}
-/* Messages */
-.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth}
-.msg-group{display:flex;flex-direction:column;gap:4px;max-width:78%;animation:msgIn .3s ease}
 .msg-group.user{align-self:flex-end}
 .msg-group.assistant{align-self:flex-start}
-@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
-.msg-role{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
-.msg-group.assistant .msg-role{color:var(--accent-dim)}
-.msg-bubble{padding:12px 16px;border-radius:var(--radius);border:1px solid var(--border);color:var(--text);font-size:.88rem;line-height:1.7;word-wrap:break-word}
-.msg-group.user .msg-bubble{background:var(--surface-3);border-bottom-right-radius:4px}
-.msg-group.assistant .msg-bubble{background:var(--surface);border-bottom-left-radius:4px}
-.msg-group.assistant .msg-bubble.generating{border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow)}
-.msg-image{max-width:220px;max-height:180px;border-radius:var(--radius-sm);margin-bottom:8px;display:block;object-fit:cover;border:1px solid var(--border)}
-/* Markdown content */
 .msg-bubble.md p{margin:0 0 .5em}.msg-bubble.md p:last-child{margin:0}
-.msg-bubble.md h1,.msg-bubble.md h2,.msg-bubble.md h3,.msg-bubble.md h4{margin:.8em 0 .4em;font-weight:600;color:var(--text);line-height:1.3}
-.msg-bubble.md h1{font-size:1.3em}.msg-bubble.md h2{font-size:1.15em}.msg-bubble.md h3{font-size:1em}
 .msg-bubble.md h1:first-child,.msg-bubble.md h2:first-child,.msg-bubble.md h3:first-child{margin-top:0}
-.msg-bubble.md code{font-family:var(--font-mono);font-size:.85em;padding:2px 6px;background:var(--surface-3);border-radius:4px;color:var(--accent)}
-.msg-bubble.md pre{margin:.5em 0;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:6px;overflow-x:auto;line-height:1.5}
-.msg-bubble.md pre code{padding:0;background:none;color:var(--text);font-size:.8rem}
-.msg-bubble.md ul,.msg-bubble.md ol{margin:.4em 0;padding-left:1.5em}
-.msg-bubble.md li{margin:.2em 0}
-.msg-bubble.md blockquote{margin:.5em 0;padding:6px 12px;border-left:3px solid var(--border-light);color:var(--text-dim);background:var(--surface-2);border-radius:0 4px 4px 0}
 .msg-bubble.md table{margin:.5em 0;border-collapse:collapse;width:100%;font-size:.82rem}
-.msg-bubble.md th,.msg-bubble.md td{padding:5px 8px;border:1px solid var(--border);text-align:left}
-.msg-bubble.md th{background:var(--surface-2);font-weight:600;color:var(--text-dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
-.msg-bubble.md strong{font-weight:600;color:var(--text)}
-.msg-bubble.md a{color:var(--accent);text-decoration:none}
-.msg-bubble.md a:hover{text-decoration:underline}
-.msg-bubble.md hr{margin:.8em 0;border:none;border-top:1px solid var(--border)}
-/* Thinking block */
-.think-block{margin-bottom:8px;border-left:2px solid var(--accent);padding:8px 12px;background:var(--accent-glow);border-radius:0 6px 6px 0}
-.think-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;font-family:var(--font-mono);font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
-.think-toggle:hover{opacity:.8}
-.think-arrow{font-size:.55rem;transition:transform .2s;display:inline-block}
 .think-arrow.open{transform:rotate(90deg)}
-.think-content{font-size:.8rem;color:var(--text-dim);line-height:1.65;white-space:pre-wrap;word-wrap:break-word;margin-top:6px;overflow:hidden;max-height:50vh;transition:max-height .3s,margin .3s,opacity .2s}
 .think-content.collapsed{max-height:0;margin-top:0;opacity:0}
-/* Gen stats */
-.msg-stats{font-family:var(--font-mono);font-size:.6rem;color:var(--text-muted);margin-top:6px;letter-spacing:.03em}
-/* Thinking dots */
 .thinking-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}
 .thinking-dots span:nth-child(2){animation-delay:.2s}
 .thinking-dots span:nth-child(3){animation-delay:.4s}
-@keyframes dot{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
-/* Input area */
-.chat-input-area{padding:12px 20px 16px;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0}
-.image-preview-bar{display:none;align-items:center;gap:10px;margin-bottom:10px;padding:6px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}
 .image-preview-bar.visible{display:flex}
-.image-preview-thumb{width:40px;height:40px;border-radius:6px;object-fit:cover;border:1px solid var(--border)}
-.image-preview-name{font-family:var(--font-mono);font-size:.72rem;color:var(--text-dim);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.btn-remove-image{background:none;border:none;color:var(--text-muted);font-size:1rem;cursor:pointer;padding:4px;transition:color .2s}
 .btn-remove-image:hover{color:var(--red)}
-.chat-input-row{display:flex;align-items:flex-end;gap:8px}
-.btn-attach{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);font-size:1.1rem;transition:all .2s}
-.btn-attach:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}
-.btn-attach:disabled{opacity:.35;cursor:not-allowed}
 .input-wrap{flex:1;position:relative}
-.input-wrap textarea{width:100%;min-height:40px;max-height:140px;padding:9px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:var(--font-body);font-size:.86rem;line-height:1.5;resize:none;outline:none;transition:border-color .2s}
-.input-wrap textarea::placeholder{color:var(--text-muted)}
-.input-wrap textarea:focus{border-color:var(--accent)}
-.btn-send{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;background:var(--accent);border:none;color:var(--bg);font-size:1rem;transition:all .2s}
-.btn-send:disabled{opacity:.35;cursor:not-allowed}
-.btn-send:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 20px var(--accent-glow-strong)}
 .btn-send .icon-stop{display:none}
 .btn-send.stopping{background:var(--red)}
 .btn-send.stopping .icon-send{display:none}
 .btn-send.stopping .icon-stop{display:block}
-.chat-footer-note{font-family:var(--font-mono);font-size:.58rem;color:var(--text-muted);text-align:center;margin-top:8px;letter-spacing:.04em}
-/* Toast */
-.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);padding:10px 20px;border-radius:8px;font-size:.82rem;font-weight:500;background:var(--surface-2);color:var(--text);border:1px solid var(--border);opacity:0;transition:all .3s;z-index:1000;max-width:480px;pointer-events:none}
 .toast.show{transform:translateX(-50%) translateY(0);opacity:1}
 .toast.error{border-color:var(--red);color:var(--red)}
 .toast.success{border-color:var(--green);color:var(--green)}
-/* Error banner */
-.error-banner{display:none;padding:10px 16px;background:rgba(212,90,90,.1);border:1px solid rgba(212,90,90,.3);border-radius:var(--radius-sm);color:var(--red);font-size:.8rem;margin:10px 20px 0}
-.error-banner.visible{display:block}
-/* Welcome */
-.welcome-msg{text-align:center;padding:48px 24px;color:var(--text-muted);flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
-.welcome-msg h3{font-family:var(--font-display);font-size:1.4rem;color:var(--text-dim);margin-bottom:8px;font-weight:400}
-.welcome-msg p{font-size:.85rem;line-height:1.6}
 </style>
 </head>
 <body>
-<!-- ═══ LANDING ═══ -->
 <div id="landing" class="screen active">
-  <div class="landing-glow"></div>
-  <div class="landing-tag">Multimodal AI · 100% Local · WebGPU</div>
   <h1 class="landing-title">Qwen 3.5 <em>Vision</em></h1>
-  <p class="landing-sub">
-    Run a multimodal vision-language model entirely in your browser.
-    No server, no API keys — powered by Transformers.js and WebGPU.
-  </p>
-  <div class="landing-specs">
-    <div class="spec"><div class="spec-value">Vision + Language</div><div class="spec-label">Unified Multimodal</div></div>
-    <div class="spec"><div class="spec-value">201 Languages</div><div class="spec-label">Global Coverage</div></div>
-    <div class="spec"><div class="spec-value">Reasoning</div><div class="spec-label">Code · Agents · Visual</div></div>
-  </div>
   <div class="model-search-wrap" id="modelSearchWrap">
-    <input class="model-search-input" id="modelSearchInput" type="text"
-           value="onnx-community/Qwen3.5-0.8B-ONNX" placeholder="Search Qwen3.5 models on HuggingFace..." autocomplete="off"/>
     <span class="search-chevron">▾</span>
     <div class="model-dropdown" id="modelDropdown"></div>
   </div>
-  <div class="btn-load-group">
-    <button class="btn-load" id="btnLoad">Load Model</button>
-  </div>
-  <div class="landing-footer">
-    Built with <a href="https://huggingface.co/docs/transformers.js" target="_blank">Transformers.js</a>
-    · Combined Edition
-  </div>
 </div>
-<!-- ═══ LOADING ═══ -->
 <div id="loading" class="screen">
   <div class="loader-ring" id="loaderRing"></div>
-  <div>
-    <div class="loader-text" id="loaderText">Initializing model…</div>
-    <div class="loader-sub" id="loaderSub">Model weights are cached for future visits.</div>
-  </div>
-  <div class="download-bar" id="downloadBar" style="display:none">
-    <div class="download-text" id="downloadText">Downloading…</div>
-    <div class="download-track"><div class="download-fill" id="downloadFill"></div></div>
-  </div>
 </div>
-<!-- ═══ CHAT ═══ -->
 <div id="chat" class="screen">
   <div class="chat-header">
-    <div class="chat-header-left">
-      <div class="chat-avatar">Q</div>
-      <div>
-        <div class="chat-header-title" id="chatTitle">Qwen 3.5 Vision</div>
-        <div class="chat-header-status">Ready on WebGPU</div>
-      </div>
-    </div>
     <div class="chat-header-controls">
-      <label class="toggle-wrap" title="Think step-by-step before answering">
-        <input type="checkbox" id="reasoningToggle"/>
-        <span class="toggle-slider"></span>
-        <span class="toggle-lbl">Reasoning</span>
-      </label>
       <button class="btn-icon" id="btnSettings" title="Settings">⚙</button>
       <button class="btn-icon" id="btnSysPrompt" title="System prompt">S</button>
       <button class="btn-reset" id="btnReset">Reset</button>
     </div>
   </div>
-  <!-- Settings panel -->
   <div class="settings-panel" id="settingsPanel">
-    <div class="settings-row">
-      <span class="settings-label">Temp</span>
-      <input type="range" class="settings-slider" id="tempSlider" min="0" max="200" value="70"/>
-      <span class="settings-val" id="tempVal">0.70</span>
-    </div>
-    <div class="settings-row">
-      <span class="settings-label">Top-K</span>
-      <input type="range" class="settings-slider" id="topkSlider" min="1" max="100" value="50"/>
-      <span class="settings-val" id="topkVal">50</span>
-    </div>
-    <div class="settings-row">
-      <span class="settings-label">Max Tok</span>
-      <select class="settings-select" id="maxTokSelect">
-        <option value="256">256</option>
-        <option value="512" selected>512</option>
-        <option value="1024">1024</option>
-        <option value="2048">2048</option>
-        <option value="4096">4096</option>
-      </select>
-    </div>
-    <div class="settings-row">
-      <span class="settings-label">Rep Pen</span>
-      <input type="range" class="settings-slider" id="repPenSlider" min="100" max="200" value="110"/>
-      <span class="settings-val" id="repPenVal">1.10</span>
-    </div>
   </div>
-  <!-- System prompt -->
-  <div class="system-prompt-wrap" id="sysPromptWrap">
-    <textarea class="system-prompt-input" id="sysPromptInput" placeholder="Enter system prompt (optional)..."></textarea>
-  </div>
-  <!-- Stats bar -->
   <div class="stats-bar" id="statsBar"></div>
   <div class="error-banner" id="errorBanner"></div>
-  <div class="chat-messages" id="chatMessages">
-    <div class="welcome-msg" id="welcomeMsg">
-      <h3>Start a conversation</h3>
-      <p>Optionally attach an image, then type your message.<br/>The model runs entirely in your browser.</p>
-    </div>
-  </div>
   <div class="chat-input-area">
-    <div class="image-preview-bar" id="imagePreview">
-      <img class="image-preview-thumb" id="imageThumb" src="" alt=""/>
-      <span class="image-preview-name" id="imageName"></span>
-      <button class="btn-remove-image" id="btnRemoveImage">&times;</button>
-    </div>
     <div class="chat-input-row">
-      <button class="btn-attach" id="btnAttach" title="Attach image">
-        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
-      </button>
       <input type="file" id="fileInput" accept="image/png,image/jpeg,image/webp,image/gif,image/bmp" hidden/>
-      <div class="input-wrap">
-        <textarea id="msgInput" rows="1" placeholder="Type your message…"></textarea>
-      </div>
-      <button class="btn-send" id="btnSend" disabled title="Send">
-        <svg class="icon-send" width="17" height="17" 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="icon-stop" 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="chat-footer-note">No data is sent to a server. Everything runs locally in your browser. AI can make mistakes.</div>
   </div>
 </div>
 <div class="toast" id="toast"></div>
-<!-- Markdown parser -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js"></script>
 <script type="module">
-import {
-  AutoProcessor,
-  Qwen3_5ForConditionalGeneration,
-  RawImage,
-  TextStreamer,
-  InterruptableStoppingCriteria,
-} from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.0.0-next.6";
-/* ─── State ─── */
-let processor = null;
-let model = null;
-let conversationImage = null;
-let attachedImage = null;
-let isGenerating = false;
-let pastKeyValues = null;
-let imageGridThw = null;
-let promptHistory = "";
-const stoppingCriteria = new InterruptableStoppingCriteria();
-let totalTokens = 0;
-let totalTime = 0;
-let sessionMsgCount = 0;
-/* ─── Config ─── */
-const getTemp = () => parseInt($("tempSlider").value) / 100;
-const getTopK = () => parseInt($("topkSlider").value);
-const getMaxTok = () => parseInt($("maxTokSelect").value);
-const getRepPen = () => parseInt($("repPenSlider").value) / 100;
-const getSysPrompt = () => $("sysPromptInput").value.trim();
-/* ─── Wait for fonts ─── */
-document.fonts.ready.then(() => document.body.classList.add("ready"));
-/* ─── DOM refs ─── */
-const $ = (id) => document.getElementById(id);
-const $loaderTx = $("loaderText");
-const $loaderSub = $("loaderSub");
-const $messages = $("chatMessages");
-const $input = $("msgInput");
-const $btnSend = $("btnSend");
-const $btnLoad = $("btnLoad");
-const $btnReset = $("btnReset");
-const $btnAttach = $("btnAttach");
-const $fileInput = $("fileInput");
-const $imgPrev = $("imagePreview");
-const $imgThumb = $("imageThumb");
-const $imgName = $("imageName");
-const $btnRemImg = $("btnRemoveImage");
-const $errBanner = $("errorBanner");
-const $reasoning = $("reasoningToggle");
-const $searchInput = $("modelSearchInput");
-const $searchWrap = $("modelSearchWrap");
-const $dropdown = $("modelDropdown");
-const $downloadBar = $("downloadBar");
-const $downloadText = $("downloadText");
-const $downloadFill = $("downloadFill");
-const $statsBar = $("statsBar");
-const $toast = $("toast");
-/* ─── Toast ─── */
-let toastTimer = null;
-function showToast(msg, type = "") {
-  clearTimeout(toastTimer);
-  $toast.textContent = msg;
-  $toast.className = "toast " + type + " show";
-  toastTimer = setTimeout(() => $toast.classList.remove("show"), 3000);
-}
-/* ─── Stats bar ─── */
-function updateStatsBar(tps = null, tokens = null) {
-  if (!totalTokens && !tps) { $statsBar.innerHTML = ""; return; }
-  let html = "";
-  if (tps !== null) html += `<div class="stat"><span class="stat-label">Speed</span><span class="stat-value hl">${tps} tok/s</span></div>`;
-  if (tokens !== null) html += `<div class="stat"><span class="stat-label">Tokens</span><span class="stat-value">${tokens}</span></div>`;
-  if (totalTokens > 0) html += `<div class="stat"><span class="stat-label">Session</span><span class="stat-value">${totalTokens} tok</span></div>`;
-  if (sessionMsgCount > 0) html += `<div class="stat"><span class="stat-label">Msgs</span><span class="stat-value">${sessionMsgCount}</span></div>`;
-  $statsBar.innerHTML = html;
-}
-/* ─── Model search ─── */
-const PRESET_MODELS = [
-  { id: "onnx-community/Qwen3.5-0.8B-ONNX", size: "0.8B" },
-  { id: "onnx-community/Qwen3.5-2B-ONNX", size: "2B" },
-  { id: "onnx-community/Qwen3.5-4B-ONNX", size: "4B" },
-];
-let searchTimer = null;
-function renderDropdown(models) {
-  $dropdown.innerHTML = models.map(m => {
-    const meta = m.size ? `<span class="size-badge">${m.size}</span>` : "";
-    const cached = m.cached ? `<span class="cached-badge">CACHED</span>` : "";
-    return `<div class="model-item" data-id="${m.id}"><span class="model-item-name">${m.id}</span><span class="model-item-meta">${cached}${meta}</span></div>`;
-  }).join("");
-  $dropdown.querySelectorAll(".model-item").forEach(el => {
-    el.addEventListener("click", () => {
-      $searchInput.value = el.dataset.id;
-      closeDropdown();
-    });
-  });
-}
-function openDropdown() {
-  $searchWrap.classList.add("open");
-  if (!$dropdown.innerHTML) renderDropdown(PRESET_MODELS);
-}
-function closeDropdown() { $searchWrap.classList.remove("open"); }
-$searchInput.addEventListener("focus", () => {
-  openDropdown();
-  renderDropdown(PRESET_MODELS);
-});
-$searchInput.addEventListener("input", () => {
-  const q = $searchInput.value.trim().toLowerCase();
-  if (q.length < 2) { renderDropdown(PRESET_MODELS); openDropdown(); return; }
-  const local = PRESET_MODELS.filter(m => m.id.toLowerCase().includes(q));
-  if (local.length) { renderDropdown(local); openDropdown(); }
-  clearTimeout(searchTimer);
-  searchTimer = setTimeout(async () => {
-    try {
-      $dropdown.innerHTML = '<div class="model-dropdown-loading">Searching HuggingFace…</div>';
-      openDropdown();
-      const resp = await fetch(`https://huggingface.co/api/models?search=${encodeURIComponent(q)}&filter=onnx&limit=10&sort=downloads&direction=-1`);
-      if (!resp.ok) return;
-      const data = await resp.json();
-      const results = data.filter(m => m.id.toLowerCase().includes("qwen") || m.id.toLowerCase().includes("onnx"))
-        .map(m => ({ id: m.id, size: m.id.match(/(\d+\.?\d*B)/i)?.[1] || "" }));
-      const combined = [...local, ...results.filter(r => !local.find(l => l.id === r.id))];
-      if (combined.length) renderDropdown(combined);
-      else $dropdown.innerHTML = '<div class="model-dropdown-loading">No models found</div>';
-    } catch (e) { console.error(e); }
-  }, 400);
-});
-document.addEventListener("click", (e) => { if (!e.target.closest(".model-search-wrap")) closeDropdown(); });
-$searchInput.addEventListener("keydown", (e) => {
-  if (e.key === "Enter") { e.preventDefault(); closeDropdown(); }
-  if (e.key === "Escape") closeDropdown();
-  const items = $dropdown.querySelectorAll(".model-item");
-  if (!items.length) return;
-  const active = $dropdown.querySelector(".model-item.active");
-  let idx = Array.from(items).indexOf(active);
-  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" && active) { $searchInput.value = active.dataset.id; closeDropdown(); }
-});
-/* ─── Settings panel toggles ─── */
-$("btnSettings").addEventListener("click", () => $("settingsPanel").classList.toggle("open"));
-$("btnSysPrompt").addEventListener("click", () => $("sysPromptWrap").classList.toggle("open"));
-$("tempSlider").addEventListener("input", () => $("tempVal").textContent = getTemp().toFixed(2));
-$("topkSlider").addEventListener("input", () => $("topkVal").textContent = getTopK());
-$("repPenSlider").addEventListener("input", () => $("repPenVal").textContent = getRepPen().toFixed(2));
-/* ─── Screen switching ─── */
-function showScreen(id) {
-  document.querySelectorAll(".screen").forEach(s => s.classList.toggle("active", s.id === id));
-}
-/* ─── Model loading ─── */
-$btnLoad.addEventListener("click", async () => {
-  const model_id = $searchInput.value.trim();
-  if (!model_id) { showToast("Enter a model ID", "error"); return; }
-  showScreen("loading");
-  $downloadBar.style.display = "none";
-  try {
-    $loaderTx.textContent = "Loading processor…";
-    processor = await AutoProcessor.from_pretrained(model_id, {
-      progress_callback: (p) => {
-        if (p.status === "download") {
-          $downloadBar.style.display = "";
-          const pct = p.total ? Math.round(p.loaded / p.total * 100) : 0;
-          $downloadFill.style.width = pct + "%";
-          $downloadText.textContent = `Processor: ${pct}%`;
-        }
-      }
-    });
-    $loaderTx.textContent = "Loading model weights…";
-    $loaderSub.textContent = "This may take a minute on first visit.";
-    model = await Qwen3_5ForConditionalGeneration.from_pretrained(model_id, {
-      dtype: {
-        embed_tokens: "q4",
-        vision_encoder: "fp16",
-        decoder_model_merged: "q4",
-      },
-      device: "webgpu",
-      progress_callback: (p) => {
-        if (p.status === "download" || p.status === "progress") {
-          $downloadBar.style.display = "";
-          const pct = p.total ? Math.round(p.loaded / p.total * 100) : 0;
-          $downloadFill.style.width = pct + "%";
-          const mb = (p.loaded / 1024 / 1024).toFixed(0);
-          const totalMb = p.total ? (p.total / 1024 / 1024).toFixed(0) : "?";
-          $downloadText.textContent = `Model: ${mb}MB / ${totalMb}MB (${pct}%)`;
-        }
-        if (p.status === "done") {
-          $downloadFill.style.width = "100%";
-        }
-      }
-    });
-    $loaderTx.textContent = "Ready!";
-    const sizeLabel = model_id.match(/(\d+\.?\d*B)/i)?.[1] || "";
-    $("chatTitle").textContent = `Qwen 3.5 Vision${sizeLabel ? " · " + sizeLabel : ""}`;
-    setTimeout(() => showScreen("chat"), 400);
-  } catch (err) {
-    console.error(err);
-    $loaderTx.textContent = "Failed to load model";
-    $loaderSub.textContent = err.message;
-    $("loaderRing").style.borderTopColor = "var(--red)";
-  }
-});
-/* ─── Image attachment ─── */
-$btnAttach.addEventListener("click", () => { if (!$btnAttach.disabled) $fileInput.click(); });
-$fileInput.addEventListener("change", async (e) => {
-  const file = e.target.files?.[0];
-  if (!file) return;
-  const dataURL = URL.createObjectURL(file);
-  const raw = await RawImage.read(dataURL);
-  const resized = await raw.resize(448, 448);
-  attachedImage = { raw: resized, dataURL, name: file.name };
-  $imgThumb.src = dataURL;
-  $imgName.textContent = file.name;
-  $imgPrev.classList.add("visible");
-  updateSendBtn();
-  $fileInput.value = "";
-});
-$btnRemImg.addEventListener("click", clearAttachment);
-function clearAttachment() {
-  if (attachedImage?.dataURL) URL.revokeObjectURL(attachedImage.dataURL);
-  attachedImage = null;
-  $imgPrev.classList.remove("visible");
-  $imgThumb.src = "";
-  $imgName.textContent = "";
-  updateSendBtn();
-}
-/* ─── Input handling ─── */
-$input.addEventListener("input", () => {
-  $input.style.height = "auto";
-  $input.style.height = Math.min($input.scrollHeight, 140) + "px";
-  updateSendBtn();
-});
-$input.addEventListener("keydown", (e) => {
-  if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); if (!isGenerating) sendMessage(); }
-});
-$btnSend.addEventListener("click", () => {
-  if (isGenerating) stoppingCriteria.interrupt();
-  else sendMessage();
-});
-function updateSendBtn() {
-  if (isGenerating) { $btnSend.disabled = false; $btnSend.classList.add("stopping"); }
-  else { $btnSend.classList.remove("stopping"); $btnSend.disabled = !$input.value.trim() && !attachedImage; }
-}
-function disposePastKeyValues() {
-  if (pastKeyValues) {
-    for (const tensor of Object.values(pastKeyValues)) tensor.dispose();
-    pastKeyValues = null;
-  }
-}
-/* ─── Paste image support ─── */
-$input.addEventListener("paste", (e) => {
-  const items = e.clipboardData?.items;
-  if (!items) return;
-  for (const item of items) {
-    if (item.type.startsWith("image/")) {
-      e.preventDefault();
-      const file = item.getAsFile();
-      const dt = new DataTransfer();
-      dt.items.add(file);
-      $fileInput.files = dt.files;
-      $fileInput.dispatchEvent(new Event("change"));
-      break;
-    }
-  }
-});
-/* ─── Reset ─── */
-$btnReset.addEventListener("click", () => {
-  conversationImage = null;
-  attachedImage = null;
-  disposePastKeyValues();
-  stoppingCriteria.reset();
-  imageGridThw = null;
-  promptHistory = "";
-  totalTokens = 0; totalTime = 0; sessionMsgCount = 0;
-  $imgPrev.classList.remove("visible");
-  $btnAttach.disabled = false;
-  $messages.innerHTML = `<div class="welcome-msg" id="welcomeMsg"><h3>Start a conversation</h3><p>Optionally attach an image, then type your message.<br/>The model runs entirely in your browser.</p></div>`;
-  $errBanner.classList.remove("visible");
-  $input.value = "";
-  $input.style.height = "auto";
-  updateStatsBar();
-  updateSendBtn();
-});
-/* ─── Markdown render ─── */
-function renderMarkdown(text) {
-  if (typeof marked === "undefined") return escapeHtml(text);
-  try {
-    marked.setOptions({ breaks: true, gfm: true });
-    return marked.parse(text);
-  } catch { return escapeHtml(text); }
-}
-function escapeHtml(s) {
-  return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
-}
-/* ─── Chat logic ─── */
-async function sendMessage() {
-  if (isGenerating) return;
-  const text = $input.value.trim();
-  if (!text && !attachedImage) return;
-  $errBanner.classList.remove("visible");
-  const welcome = $messages.querySelector(".welcome-msg");
-  if (welcome) welcome.remove();
-  const img = attachedImage;
-  if (img) conversationImage = img.raw;
-  appendMessage("user", text, img?.dataURL);
-  sessionMsgCount++;
-  $input.value = "";
-  $input.style.height = "auto";
-  clearAttachment();
-  if (conversationImage) $btnAttach.disabled = true;
-  isGenerating = true;
-  updateSendBtn();
-  const { groupEl, bubbleEl } = appendAssistantPlaceholder();
-  try {
-    const isFirstTurn = promptHistory === "";
-    const enableThinking = $reasoning.checked;
-    const sysPrompt = getSysPrompt();
-    const maxTok = enableThinking ? Math.max(getMaxTok(), 2048) : getMaxTok();
-    let userPrompt = "";
-    if (isFirstTurn && sysPrompt) {
-      userPrompt += `<|im_start|>system\n${sysPrompt}<|im_end|>\n`;
-    }
-    userPrompt += "<|im_start|>user\n";
-    if (img?.raw) userPrompt += "<|vision_start|><|image_pad|><|vision_end|>";
-    userPrompt += (text || "") + "<|im_end|>\n";
-    userPrompt += enableThinking
-      ? "<|im_start|>assistant\n<think>\n"
-      : "<|im_start|>assistant\n<think>\n\n</think>\n\n";
-    let inputs, generateArgs;
-    if (img?.raw) {
-      const fullPrompt = (isFirstTurn ? "" : promptHistory + "\n") + userPrompt;
-      inputs = await processor(fullPrompt, img.raw);
-      if (inputs.image_grid_thw) imageGridThw = inputs.image_grid_thw;
-      disposePastKeyValues();
-      generateArgs = { ...inputs };
-    } else if (isFirstTurn) {
-      inputs = await processor(userPrompt);
-      generateArgs = { ...inputs };
-    } else {
-      const continuationPrompt = promptHistory + "\n" + userPrompt;
-      inputs = await processor(continuationPrompt);
-      generateArgs = { ...inputs, past_key_values: pastKeyValues };
-      if (imageGridThw) generateArgs.image_grid_thw = imageGridThw;
-    }
-    let fullText = "";
-    let thinkingDone = !enableThinking;
-    let thinkBlock = null;
-    let thinkContentEl = null;
-    let thinkArrow = null;
-    let tokenCount = 0;
-    let startTime = null;
-    if (enableThinking) {
-      thinkBlock = document.createElement("div");
-      thinkBlock.className = "think-block";
-      const toggle = document.createElement("div");
-      toggle.className = "think-toggle";
-      thinkArrow = document.createElement("span");
-      thinkArrow.className = "think-arrow open";
-      thinkArrow.textContent = "▶";
-      toggle.append(thinkArrow);
-      toggle.append(document.createTextNode(" Thinking"));
-      thinkContentEl = document.createElement("div");
-      thinkContentEl.className = "think-content";
-      thinkBlock.append(toggle, thinkContentEl);
-      bubbleEl.prepend(thinkBlock);
-      toggle.addEventListener("click", () => {
-        thinkContentEl.classList.toggle("collapsed");
-        thinkArrow.classList.toggle("open");
-      });
-    }
-    const contentEl = bubbleEl.querySelector(".msg-text") || bubbleEl;
-    let textNode = document.createElement("div");
-    textNode.className = "msg-text";
-    bubbleEl.appendChild(textNode);
-    const streamer = new TextStreamer(processor.tokenizer, {
-      skip_prompt: true,
-      skip_special_tokens: !enableThinking,
-      token_callback_function: () => {
-        if (!startTime) startTime = performance.now();
-        tokenCount++;
-      },
-      callback_function: (token) => {
-        if (!thinkingDone) {
-          const endIdx = (fullText + token).indexOf("</think>");
-          if (endIdx !== -1) {
-            thinkingDone = true;
-            const thinkText = (fullText + token).slice(0, endIdx).trim();
-            thinkContentEl.textContent = thinkText;
-            fullText = (fullText + token).slice(endIdx + "</think>".length);
-            textNode.innerHTML = renderMarkdown(fullText.replace(/^\n+/, "").replace(/<\|im_end\|>/g, ""));
-            thinkContentEl.classList.add("collapsed");
-            thinkArrow.classList.remove("open");
-          } else {
-            fullText += token;
-            thinkContentEl.textContent = fullText;
-          }
-        } else {
-          fullText += token;
-          const cleaned = fullText.replace(/^\n+/, "").replace(/<\|im_end\|>/g, "");
-          textNode.innerHTML = renderMarkdown(cleaned);
-        }
-        $messages.scrollTop = $messages.scrollHeight;
-      },
-    });
-    const genConfig = {
-      ...generateArgs,
-      max_new_tokens: maxTok,
-      do_sample: true,
-      temperature: getTemp(),
-      top_k: getTopK(),
-      repetition_penalty: getRepPen(),
-      streamer,
-      stopping_criteria: stoppingCriteria,
-      return_dict_in_generate: true,
-    };
-    const result = await model.generate(genConfig);
-    pastKeyValues = result.past_key_values;
-    const fullSequenceText = processor.batch_decode(result.sequences, { skip_special_tokens: false })[0];
-    promptHistory = fullSequenceText;
-    // Final markdown render
-    if (thinkingDone) {
-      const cleaned = fullText.replace(/^\n+/, "").replace(/<\|im_end\|>/g, "");
-      textNode.innerHTML = renderMarkdown(cleaned);
-      if (cleaned.includes("`") || cleaned.includes("#") || cleaned.includes("|") || cleaned.includes("*")) {
-        bubbleEl.classList.add("md");
-      }
-    }
-    // Stats
-    if (tokenCount > 0 && startTime) {
-      const elapsed = (performance.now() - startTime) / 1000;
-      const tps = (tokenCount / elapsed).toFixed(1);
-      const statsEl = document.createElement("div");
-      statsEl.className = "msg-stats";
-      statsEl.textContent = `${tokenCount} tokens · ${tps} tok/s · ${elapsed.toFixed(1)}s`;
-      groupEl.appendChild(statsEl);
-      totalTokens += tokenCount;
-      totalTime += elapsed;
-      updateStatsBar(tps, tokenCount);
-    }
-    sessionMsgCount++;
-    bubbleEl.classList.remove("generating");
-  } catch (err) {
-    console.error(err);
-    groupEl.remove();
-    $errBanner.textContent = "Generation error: " + err.message;
-    $errBanner.classList.add("visible");
-    showToast("Generation failed", "error");
-  }
-  isGenerating = false;
-  stoppingCriteria.reset();
-  updateSendBtn();
-  $messages.scrollTop = $messages.scrollHeight;
-}
-/* ─── Render helpers ─── */
-function appendMessage(role, text, imageDataURL) {
-  const group = document.createElement("div");
-  group.className = `msg-group ${role}`;
-  const roleEl = document.createElement("div");
-  roleEl.className = "msg-role";
-  roleEl.textContent = role === "user" ? "You" : "Qwen 3.5";
-  group.appendChild(roleEl);
-  if (imageDataURL) {
-    const img = document.createElement("img");
-    img.className = "msg-image";
-    img.src = imageDataURL;
-    img.alt = "attached";
-    group.appendChild(img);
-  }
-  const bubble = document.createElement("div");
-  bubble.className = "msg-bubble";
-  bubble.textContent = text;
-  group.appendChild(bubble);
-  $messages.appendChild(group);
-  $messages.scrollTop = $messages.scrollHeight;
-  return group;
-}
-function appendAssistantPlaceholder() {
-  const group = document.createElement("div");
-  group.className = "msg-group assistant";
-  const roleEl = document.createElement("div");
-  roleEl.className = "msg-role";
-  roleEl.textContent = "Qwen 3.5";
-  group.appendChild(roleEl);
-  const bubble = document.createElement("div");
-  bubble.className = "msg-bubble generating";
-  const dots = document.createElement("span");
-  dots.className = "thinking-dots";
-  for (let i = 0; i < 3; i++) dots.appendChild(document.createElement("span"));
-  bubble.appendChild(dots);
-  group.appendChild(bubble);
-  $messages.appendChild(group);
-  $messages.scrollTop = $messages.scrollHeight;
-  return { groupEl: group, bubbleEl: bubble };
-}
-/* ─── WebGPU check ─── */
-(async () => {
-  if (!navigator.gpu) {
-    showToast("WebGPU not available in this browser", "error");
-    $btnLoad.disabled = true;
-    return;
-  }
-  try {
-    const adapter = await navigator.gpu.requestAdapter({ powerPreference: "high-performance" });
-    if (!adapter) {
-      showToast("No WebGPU adapter found", "error");
-      $btnLoad.disabled = true;
-    }
-  } catch (e) {
-    showToast("WebGPU init failed: " + e.message, "error");
-  }
-})();
 </script>
 </body>
 </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="apple-mobile-web-app-status-bar-style" content="default"/>
+<meta name="mobile-web-app-capable" content="yes"/>
+<meta name="theme-color" content="#ffffff"/>
+<title>Qwen 3.5 Vision — Local AI Chat</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"/>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧠</text></svg>"/>
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
 :root{
+  --bg:#ffffff;--bg-warm:#faf9f7;--bg-cool:#f4f2ef;
+  --surface:#ffffff;--surface-raised:#fefefe;
+  --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),0 1px 2px rgba(0,0,0,.02);
+  --shadow-md:0 4px 16px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.04);
+  --shadow-lg:0 12px 40px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);
+  --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
+  --font-display:'Newsreader',Georgia,serif;
+  --font-mono:'IBM Plex Mono','SF Mono',monospace;
+  --safe-top:env(safe-area-inset-top,0px);
+  --safe-bottom:env(safe-area-inset-bottom,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;appearance:none}
+::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}
+.screen{display:none;width:100%;height:100%}.screen.active{display:flex}
+/* LANDING */
+#landing{flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;position:relative;overflow-y:auto;background:var(--bg)}
+.landing-deco{position:absolute;width:min(500px,90vw);height:min(500px,90vw);border-radius:50%;background:radial-gradient(circle,rgba(79,109,245,.07) 0%,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:24px;font-weight:500}
+.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;color:var(--text);margin-bottom:12px}
 .landing-title em{font-style:italic;color:var(--accent)}
+.landing-sub{font-size:.95rem;color:var(--text-2);max-width:460px;line-height:1.7;margin-bottom:32px;font-weight:400}
+.landing-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:32px}
+.chip{font-family:var(--font-mono);font-size:.68rem;font-weight:500;padding:5px 12px;border-radius:100px;border:1px solid var(--border);color:var(--text-2);background:var(--surface);letter-spacing:.02em}
+.model-search-wrap{position:relative;width:100%;max-width:440px;margin-bottom:20px}
+.model-search-input{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:.82rem;outline:none;transition:border-color .2s,box-shadow .2s}
+.model-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,109,245,.1)}
+.model-search-input::placeholder{color:var(--text-4)}
+.search-chevron{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-4);font-size:.65rem;pointer-events:none;transition:transform .2s}
 .model-search-wrap.open .search-chevron{transform:translateY(-50%) rotate(180deg)}
+.model-dropdown{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:260px;overflow-y:auto;z-index:100;display:none;box-shadow:var(--shadow-lg)}
 .model-search-wrap.open .model-dropdown{display:block}
+.model-search-wrap.open .model-search-input{border-radius:var(--radius-sm) var(--radius-sm) 0 0;border-color:var(--accent)}
+.model-item{padding:11px 14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--border-light);transition:background .1s;min-height:44px}
 .model-item:last-child{border-bottom:none}
+.model-item:hover,.model-item.active{background:var(--accent-light)}
+.model-item-name{font-family:var(--font-mono);font-size:.78rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
 .model-item-meta{display:flex;gap:5px;align-items:center;flex-shrink:0}
+.size-badge{background:var(--accent-light);color:var(--accent-text);padding:3px 8px;border-radius:6px;font-family:var(--font-mono);font-size:.62rem;font-weight:600}
+.cached-badge{background:var(--green-bg);color:var(--green);padding:3px 7px;border-radius:6px;font-family:var(--font-mono);font-size:.58rem;font-weight:700}
+.model-dropdown-loading{padding:12px 14px;font-size:.75rem;color:var(--text-3);text-align:center}
+.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);box-shadow:0 4px 20px rgba(79,109,245,.3);transform:translateY(-1px)}
+.btn-load:active{transform:translateY(0)}
+.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}.landing-footer a:hover{color:var(--accent)}
+/* LOADING */
+#loading{flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px;background:var(--bg)}
+.loader-ring{width:56px;height:56px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
 @keyframes spin{to{transform:rotate(360deg)}}
+.loader-text{font-size:.88rem;color:var(--text-2);font-weight:500;text-align:center}
+.loader-sub{font-size:.75rem;color:var(--text-3);margin-top:4px;text-align:center;line-height:1.5}
+.download-bar{width:min(360px,85vw)}
+.download-text{font-family:var(--font-mono);font-size:.68rem;color:var(--text-3);text-align:center;margin-bottom:6px}
+.download-track{height:4px;background:var(--bg-cool);border-radius:2px;overflow:hidden}
 .download-fill{height:100%;width:0%;background:var(--accent);border-radius:2px;transition:width .3s}
+/* CHAT */
+#chat{flex-direction:column;height:100%;background:var(--bg-warm)}
+.chat-header{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}
+.chat-header-left{display:flex;align-items:center;gap:10px;min-width:0}
+.chat-avatar{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:1.05rem;color:#fff;font-weight:600;flex-shrink:0}
+.chat-header-info{min-width:0}
+.chat-header-title{font-size:.92rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.chat-header-status{font-family:var(--font-mono);font-size:.6rem;color:var(--green);letter-spacing:.05em;display:flex;align-items:center;gap:4px;font-weight:500}
+.chat-header-status::before{content:"";width:5px;height:5px;background:var(--green);border-radius:50%;flex-shrink:0}
+.chat-header-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}
+.toggle-pill{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}
+.toggle-pill:has(input:checked){background:var(--accent-light);border-color:var(--accent)}
+.toggle-pill input{display:none}
+.toggle-dot{width:8px;height:8px;border-radius:50%;background:var(--text-4);transition:background .2s;flex-shrink:0}
+.toggle-pill:has(input:checked) .toggle-dot{background:var(--accent)}
+.toggle-lbl{font-size:.65rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);transition:color .2s;white-space:nowrap}
+.toggle-pill:has(input:checked) .toggle-lbl{color:var(--accent-text)}
+.btn-icon{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}
+.btn-icon:hover{background:var(--bg-cool);color:var(--text-2)}
+.btn-icon:active{transform:scale(.95)}
+.btn-icon.active{background:var(--accent-light);color:var(--accent-text);border-color:var(--accent)}
+.btn-reset{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;white-space:nowrap;min-height:32px}
+.btn-reset:hover{color:var(--red);border-color:var(--red);background:var(--red-bg)}
+.settings-panel{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}
+.settings-panel.open{max-height:200px;padding:10px 16px}
+.settings-row{display:flex;align-items:center;gap:5px}
+.settings-label{font-family:var(--font-mono);font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);min-width:40px;white-space:nowrap}
+.settings-select{padding:4px 8px;border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.72rem;outline:none;cursor:pointer;min-height:32px}
 .settings-select:focus{border-color:var(--accent)}
+.settings-slider{width:64px;accent-color:var(--accent);height:3px;cursor:pointer}
+.settings-val{font-family:var(--font-mono);font-size:.68rem;color:var(--text-2);font-variant-numeric:tabular-nums;min-width:28px;text-align:right}
+.system-prompt-wrap{padding:0 16px;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;background:var(--bg)}
+.system-prompt-wrap.open{max-height:170px;padding:8px 16px 10px;border-bottom:1px solid var(--border-light)}
+.system-prompt-input{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}
+.system-prompt-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,109,245,.08)}
+.system-prompt-input::placeholder{color:var(--text-4)}
+.stats-bar{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;font-size:.62rem;flex-wrap:wrap}
+.stats-bar:empty{display:none}
+.stat{display:flex;align-items:center;gap:4px}
+.stat-label{color:var(--text-4);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-family:var(--font-mono);font-size:.55rem}
+.stat-value{color:var(--text-2);font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-size:.68rem}
+.stat-value.hl{color:var(--accent-text)}
+.error-banner{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}
+.error-banner.visible{display:block}
+.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
+.msg-group{display:flex;flex-direction:column;gap:3px;max-width:85%;animation:msgIn .25s ease}
 .msg-group.user{align-self:flex-end}
 .msg-group.assistant{align-self:flex-start}
+@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
+.msg-role{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:1px;font-weight:600}
+.msg-group.assistant .msg-role{color:var(--accent-text)}
+.msg-bubble{padding:12px 16px;border-radius:var(--radius);color:var(--text);font-size:.88rem;line-height:1.7;word-wrap:break-word;box-shadow:var(--shadow-sm)}
+.msg-group.user .msg-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px;box-shadow:0 2px 8px rgba(79,109,245,.15)}
+.msg-group.assistant .msg-bubble{background:var(--surface);border:1px solid var(--border-light);border-bottom-left-radius:4px}
+.msg-group.assistant .msg-bubble.generating{border-color:var(--accent);box-shadow:0 0 0 2px rgba(79,109,245,.08)}
+.msg-image{max-width:min(220px,60vw);max-height:180px;border-radius:var(--radius-sm);margin-bottom:8px;display:block;object-fit:cover;border:1px solid var(--border)}
+.msg-bubble.md{white-space:normal}
 .msg-bubble.md p{margin:0 0 .5em}.msg-bubble.md p:last-child{margin:0}
+.msg-bubble.md h1,.msg-bubble.md h2,.msg-bubble.md h3{margin:.7em 0 .35em;font-weight:600;line-height:1.3}
+.msg-bubble.md h1{font-size:1.2em}.msg-bubble.md h2{font-size:1.1em}.msg-bubble.md h3{font-size:1em}
 .msg-bubble.md h1:first-child,.msg-bubble.md h2:first-child,.msg-bubble.md h3:first-child{margin-top:0}
+.msg-bubble.md code{font-family:var(--font-mono);font-size:.84em;padding:2px 6px;background:var(--bg-cool);border-radius:5px;color:var(--accent-text)}
+.msg-bubble.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;line-height:1.5}
+.msg-bubble.md pre code{padding:0;background:none;color:var(--text);font-size:.78rem}
+.msg-bubble.md ul,.msg-bubble.md ol{margin:.4em 0;padding-left:1.4em}
+.msg-bubble.md li{margin:.15em 0}
+.msg-bubble.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}
 .msg-bubble.md table{margin:.5em 0;border-collapse:collapse;width:100%;font-size:.82rem}
+.msg-bubble.md th,.msg-bubble.md td{padding:6px 8px;border:1px solid var(--border);text-align:left}
+.msg-bubble.md th{background:var(--bg-cool);font-weight:600;color:var(--text-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em}
+.msg-bubble.md strong{font-weight:600}
+.msg-bubble.md a{color:var(--accent)}
+.msg-bubble.md hr{margin:.7em 0;border:none;border-top:1px solid var(--border-light)}
+.msg-group.user .msg-bubble.md code{background:rgba(255,255,255,.2);color:#fff}
+.msg-group.user .msg-bubble.md pre{background:rgba(0,0,0,.1);border-color:rgba(255,255,255,.15)}
+.msg-group.user .msg-bubble.md pre code{color:#fff}
+.msg-group.user .msg-bubble.md blockquote{background:rgba(255,255,255,.1);border-left-color:rgba(255,255,255,.4);color:rgba(255,255,255,.85)}
+.think-block{margin-bottom:8px;border-left:2.5px solid var(--accent);padding:8px 12px;background:var(--accent-light);border-radius:0 var(--radius-xs) var(--radius-xs) 0}
+.think-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;font-family:var(--font-mono);font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-text);min-height:28px}
+.think-toggle:hover{opacity:.75}
+.think-arrow{font-size:.5rem;transition:transform .2s;display:inline-block}
 .think-arrow.open{transform:rotate(90deg)}
+.think-content{font-size:.8rem;color:var(--text-2);line-height:1.65;white-space:pre-wrap;word-wrap:break-word;margin-top:6px;overflow:hidden;max-height:50vh;transition:max-height .3s,margin .3s,opacity .2s}
 .think-content.collapsed{max-height:0;margin-top:0;opacity:0}
+.msg-stats{font-family:var(--font-mono);font-size:.58rem;color:var(--text-3);margin-top:5px;letter-spacing:.03em}
 .thinking-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}
 .thinking-dots span:nth-child(2){animation-delay:.2s}
 .thinking-dots span:nth-child(3){animation-delay:.4s}
+@keyframes dot{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
+.chat-input-area{padding:10px 12px;padding-bottom:calc(10px + var(--safe-bottom));border-top:1px solid var(--border-light);background:var(--bg);flex-shrink:0}
+.image-preview-bar{display:none;align-items:center;gap:8px;margin-bottom:8px;padding:8px 10px;background:var(--bg-warm);border:1px solid var(--border-light);border-radius:var(--radius-sm)}
 .image-preview-bar.visible{display:flex}
+.image-preview-thumb{width:44px;height:44px;border-radius:var(--radius-xs);object-fit:cover;border:1px solid var(--border)}
+.image-preview-name{font-family:var(--font-mono);font-size:.72rem;color:var(--text-2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.btn-remove-image{background:none;border:none;color:var(--text-3);font-size:1.1rem;cursor:pointer;padding:6px;transition:color .15s;min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center}
 .btn-remove-image:hover{color:var(--red)}
+.chat-input-row{display:flex;align-items:flex-end;gap:6px}
+.btn-attach{width:44px;height:44px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;background:var(--bg-warm);border:1px solid var(--border);color:var(--text-3);transition:all .15s}
+.btn-attach:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
+.btn-attach:active:not(:disabled){transform:scale(.95)}
+.btn-attach:disabled{opacity:.3;cursor:not-allowed}
 .input-wrap{flex:1;position:relative}
+.input-wrap 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,box-shadow .2s}
+.input-wrap textarea::placeholder{color:var(--text-4)}
+.input-wrap textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,109,245,.08)}
+.btn-send{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}
+.btn-send:disabled{opacity:.3;cursor:not-allowed}
+.btn-send:not(:disabled):hover{background:var(--accent-hover);box-shadow:0 2px 8px rgba(79,109,245,.25)}
+.btn-send:not(:disabled):active{transform:scale(.95)}
 .btn-send .icon-stop{display:none}
 .btn-send.stopping{background:var(--red)}
 .btn-send.stopping .icon-send{display:none}
 .btn-send.stopping .icon-stop{display:block}
+.chat-footer-note{font-family:var(--font-mono);font-size:.55rem;color:var(--text-4);text-align:center;margin-top:6px;letter-spacing:.03em;padding:0 8px}
+.welcome-msg{text-align:center;padding:40px 20px;color:var(--text-3);flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
+.welcome-msg h3{font-family:var(--font-display);font-size:1.5rem;color:var(--text-2);margin-bottom:8px;font-weight:400;font-style:italic}
+.welcome-msg 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.error{border-color:var(--red);color:var(--red)}
 .toast.success{border-color:var(--green);color:var(--green)}
+@media(max-width:640px){
+  .landing-specs{gap:16px;flex-wrap:wrap}.chip{font-size:.62rem;padding:4px 10px}
+  .landing-sub{font-size:.88rem;padding:0 8px}
+  .chat-header{padding:8px 12px;padding-top:calc(8px + var(--safe-top));gap:6px}
+  .chat-header-title{font-size:.84rem}
+  .chat-header-controls{gap:4px}
+  .toggle-pill{padding:4px 8px;min-height:28px}
+  .toggle-lbl{font-size:.58rem}
+  .btn-icon{width:28px;height:28px;font-size:.7rem}
+  .btn-reset{font-size:.58rem;padding:5px 10px;min-height:28px}
+  .settings-panel.open{gap:6px 12px;padding:8px 12px}
+  .settings-slider{width:56px}
+  .chat-messages{padding:12px}
+  .msg-group{max-width:90%}
+  .msg-bubble{padding:10px 14px;font-size:.85rem}
+  .chat-input-area{padding:8px 10px;padding-bottom:calc(8px + var(--safe-bottom))}
+  .btn-attach,.btn-send{width:42px;height:42px}
+  .input-wrap textarea{min-height:42px;padding:10px 12px;font-size:.86rem}
+  .stats-bar{gap:10px;padding:4px 12px}
+  .system-prompt-wrap.open{padding:6px 12px 8px}
+  .msg-image{max-width:min(180px,55vw)}
+}
+@media(max-width:380px){
+  .toggle-lbl{display:none}
+  .landing-title{font-size:2rem}
+  .chat-header-title{font-size:.78rem;max-width:120px}
+}
+@media(max-height:500px) and (orientation:landscape){
+  .chat-header{padding:6px 12px;min-height:44px}
+  .chat-avatar{width:28px;height:28px;font-size:.8rem}
+  .chat-messages{padding:8px 12px;gap:10px}
+}
 </style>
 </head>
 <body>
 <div id="landing" class="screen active">
+  <div class="landing-deco"></div>
+  <div class="landing-tag">Local AI · No Server · WebGPU</div>
   <h1 class="landing-title">Qwen 3.5 <em>Vision</em></h1>
+  <p class="landing-sub">Run a multimodal vision-language model entirely in your browser. No server, no API keys — your data stays on your device.</p>
+  <div class="landing-chips"><span class="chip">Vision + Language</span><span class="chip">201 Languages</span><span class="chip">Reasoning</span><span class="chip">Markdown</span></div>
   <div class="model-search-wrap" id="modelSearchWrap">
+    <input class="model-search-input" id="modelSearchInput" type="text" value="onnx-community/Qwen3.5-0.8B-ONNX" placeholder="Search Qwen3.5 models…" autocomplete="off"/>
     <span class="search-chevron">▾</span>
     <div class="model-dropdown" id="modelDropdown"></div>
   </div>
+  <button class="btn-load" id="btnLoad">Load Model</button>
+  <div class="landing-footer">Built with <a href="https://huggingface.co/docs/transformers.js" target="_blank">Transformers.js</a></div>
 </div>
 <div id="loading" class="screen">
   <div class="loader-ring" id="loaderRing"></div>
+  <div><div class="loader-text" id="loaderText">Initializing…</div><div class="loader-sub" id="loaderSub">Weights are cached for future visits.</div></div>
+  <div class="download-bar" id="downloadBar" style="display:none"><div class="download-text" id="downloadText">Downloading…</div><div class="download-track"><div class="download-fill" id="downloadFill"></div></div></div>
 </div>
 <div id="chat" class="screen">
   <div class="chat-header">
+    <div class="chat-header-left"><div class="chat-avatar">Q</div><div class="chat-header-info"><div class="chat-header-title" id="chatTitle">Qwen 3.5 Vision</div><div class="chat-header-status">Ready</div></div></div>
     <div class="chat-header-controls">
+      <label class="toggle-pill" title="Think step-by-step"><input type="checkbox" id="reasoningToggle"/><span class="toggle-dot"></span><span class="toggle-lbl">Think</span></label>
       <button class="btn-icon" id="btnSettings" title="Settings">⚙</button>
       <button class="btn-icon" id="btnSysPrompt" title="System prompt">S</button>
       <button class="btn-reset" id="btnReset">Reset</button>
     </div>
   </div>
   <div class="settings-panel" id="settingsPanel">
+    <div class="settings-row"><span class="settings-label">Temp</span><input type="range" class="settings-slider" id="tempSlider" min="0" max="200" value="70"/><span class="settings-val" id="tempVal">0.70</span></div>
+    <div class="settings-row"><span class="settings-label">Top-K</span><input type="range" class="settings-slider" id="topkSlider" min="1" max="100" value="50"/><span class="settings-val" id="topkVal">50</span></div>
+    <div class="settings-row"><span class="settings-label">Tokens</span><select class="settings-select" id="maxTokSelect"><option value="256">256</option><option value="512" selected>512</option><option value="1024">1024</option><option value="2048">2048</option><option value="4096">4096</option></select></div>
+    <div class="settings-row"><span class="settings-label">Rep</span><input type="range" class="settings-slider" id="repPenSlider" min="100" max="200" value="110"/><span class="settings-val" id="repPenVal">1.10</span></div>
   </div>
+  <div class="system-prompt-wrap" id="sysPromptWrap"><textarea class="system-prompt-input" id="sysPromptInput" placeholder="System prompt (optional)…"></textarea></div>
   <div class="stats-bar" id="statsBar"></div>
   <div class="error-banner" id="errorBanner"></div>
+  <div class="chat-messages" id="chatMessages"><div class="welcome-msg" id="welcomeMsg"><h3>Start a conversation</h3><p>Attach an image or type a message.<br/>Everything runs locally in your browser.</p></div></div>
   <div class="chat-input-area">
+    <div class="image-preview-bar" id="imagePreview"><img class="image-preview-thumb" id="imageThumb" src="" alt=""/><span class="image-preview-name" id="imageName"></span><button class="btn-remove-image" id="btnRemoveImage">&times;</button></div>
     <div class="chat-input-row">
+      <button class="btn-attach" id="btnAttach" title="Attach image"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg></button>
       <input type="file" id="fileInput" accept="image/png,image/jpeg,image/webp,image/gif,image/bmp" hidden/>
+      <div class="input-wrap"><textarea id="msgInput" rows="1" placeholder="Type a message…"></textarea></div>
+      <button class="btn-send" id="btnSend" disabled title="Send"><svg class="icon-send" 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="icon-stop" 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="chat-footer-note">100% local — no data leaves your device. AI can make mistakes.</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{AutoProcessor,Qwen3_5ForConditionalGeneration,RawImage,TextStreamer,InterruptableStoppingCriteria}from"https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.0.0-next.6";
+let processor=null,model=null,conversationImage=null,attachedImage=null,isGenerating=false;
+let pastKeyValues=null,imageGridThw=null,promptHistory="";
+const stoppingCriteria=new InterruptableStoppingCriteria();
+let totalTokens=0,totalTime=0,sessionMsgCount=0;
+const getTemp=()=>parseInt($("tempSlider").value)/100;
+const getTopK=()=>parseInt($("topkSlider").value);
+const getMaxTok=()=>parseInt($("maxTokSelect").value);
+const getRepPen=()=>parseInt($("repPenSlider").value)/100;
+const getSysPrompt=()=>$("sysPromptInput").value.trim();
+document.fonts.ready.then(()=>document.body.classList.add("ready"));
+const $=id=>document.getElementById(id);
+const[$loaderTx,$loaderSub,$messages,$input,$btnSend,$btnLoad,$btnReset,$btnAttach,$fileInput,$imgPrev,$imgThumb,$imgName,$btnRemImg,$errBanner,$reasoning,$searchInput,$searchWrap,$dropdown,$downloadBar,$downloadText,$downloadFill,$statsBar,$toast]=["loaderText","loaderSub","chatMessages","msgInput","btnSend","btnLoad","btnReset","btnAttach","fileInput","imagePreview","imageThumb","imageName","btnRemoveImage","errorBanner","reasoningToggle","modelSearchInput","modelSearchWrap","modelDropdown","downloadBar","downloadText","downloadFill","statsBar","toast"].map($);
+let toastTimer=null;
+function showToast(m,t=""){clearTimeout(toastTimer);$toast.textContent=m;$toast.className="toast "+t+" show";toastTimer=setTimeout(()=>$toast.classList.remove("show"),3000)}
+function updateStatsBar(tps=null,tokens=null){if(!totalTokens&&!tps){$statsBar.innerHTML="";return}let h="";if(tps!==null)h+=`<div class="stat"><span class="stat-label">Speed</span><span class="stat-value hl">${tps} t/s</span></div>`;if(tokens!==null)h+=`<div class="stat"><span class="stat-label">Tokens</span><span class="stat-value">${tokens}</span></div>`;if(totalTokens>0)h+=`<div class="stat"><span class="stat-label">Session</span><span class="stat-value">${totalTokens}</span></div>`;$statsBar.innerHTML=h}
+const PRESET_MODELS=[{id:"onnx-community/Qwen3.5-0.8B-ONNX",size:"0.8B"},{id:"onnx-community/Qwen3.5-2B-ONNX",size:"2B"},{id:"onnx-community/Qwen3.5-4B-ONNX",size:"4B"}];
+let searchTimer=null;
+function renderDropdown(models){$dropdown.innerHTML=models.map(m=>`<div class="model-item" data-id="${m.id}"><span class="model-item-name">${m.id}</span><span class="model-item-meta">${m.cached?'<span class="cached-badge">CACHED</span>':""}${m.size?`<span class="size-badge">${m.size}</span>`:""}</span></div>`).join("");$dropdown.querySelectorAll(".model-item").forEach(el=>{el.addEventListener("click",()=>{$searchInput.value=el.dataset.id;closeDropdown()})})}
+function openDropdown(){$searchWrap.classList.add("open");if(!$dropdown.innerHTML)renderDropdown(PRESET_MODELS)}
+function closeDropdown(){$searchWrap.classList.remove("open")}
+$searchInput.addEventListener("focus",()=>{openDropdown();renderDropdown(PRESET_MODELS)});
+$searchInput.addEventListener("input",()=>{const q=$searchInput.value.trim().toLowerCase();if(q.length<2){renderDropdown(PRESET_MODELS);openDropdown();return}const local=PRESET_MODELS.filter(m=>m.id.toLowerCase().includes(q));if(local.length){renderDropdown(local);openDropdown()}clearTimeout(searchTimer);searchTimer=setTimeout(async()=>{try{$dropdown.innerHTML='<div class="model-dropdown-loading">Searching…</div>';openDropdown();const r=await fetch(`https://huggingface.co/api/models?search=${encodeURIComponent(q)}&filter=onnx&limit=10&sort=downloads&direction=-1`);if(!r.ok)return;const d=await r.json();const res=d.filter(m=>m.id.toLowerCase().includes("qwen")||m.id.toLowerCase().includes("onnx")).map(m=>({id:m.id,size:m.id.match(/(\d+\.?\d*B)/i)?.[1]||""}));const c=[...local,...res.filter(r=>!local.find(l=>l.id===r.id))];if(c.length)renderDropdown(c);else $dropdown.innerHTML='<div class="model-dropdown-loading">No models found</div>'}catch(e){console.error(e)}},400)});
+document.addEventListener("click",e=>{if(!e.target.closest(".model-search-wrap"))closeDropdown()});
+$searchInput.addEventListener("keydown",e=>{if(e.key==="Enter"){e.preventDefault();closeDropdown()}if(e.key==="Escape")closeDropdown();const items=$dropdown.querySelectorAll(".model-item");if(!items.length)return;const active=$dropdown.querySelector(".model-item.active");let idx=Array.from(items).indexOf(active);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"&&active){$searchInput.value=active.dataset.id;closeDropdown()}});
+$("btnSettings").addEventListener("click",()=>{$("settingsPanel").classList.toggle("open");$("btnSettings").classList.toggle("active")});
+$("btnSysPrompt").addEventListener("click",()=>{$("sysPromptWrap").classList.toggle("open");$("btnSysPrompt").classList.toggle("active")});
+$("tempSlider").addEventListener("input",()=>$("tempVal").textContent=getTemp().toFixed(2));
+$("topkSlider").addEventListener("input",()=>$("topkVal").textContent=getTopK());
+$("repPenSlider").addEventListener("input",()=>$("repPenVal").textContent=getRepPen().toFixed(2));
+function showScreen(id){document.querySelectorAll(".screen").forEach(s=>s.classList.toggle("active",s.id===id))}
+$btnLoad.addEventListener("click",async()=>{const mid=$searchInput.value.trim();if(!mid){showToast("Enter a model ID","error");return}showScreen("loading");$downloadBar.style.display="none";try{$loaderTx.textContent="Loading processor…";processor=await AutoProcessor.from_pretrained(mid,{progress_callback:p=>{if(p.status==="download"){$downloadBar.style.display="";const pct=p.total?Math.round(p.loaded/p.total*100):0;$downloadFill.style.width=pct+"%";$downloadText.textContent=`Processor: ${pct}%`}}});$loaderTx.textContent="Loading model…";$loaderSub.textContent="This may take a minute on first visit.";model=await Qwen3_5ForConditionalGeneration.from_pretrained(mid,{dtype:{embed_tokens:"q4",vision_encoder:"fp16",decoder_model_merged:"q4"},device:"webgpu",progress_callback:p=>{if(p.status==="download"||p.status==="progress"){$downloadBar.style.display="";const pct=p.total?Math.round(p.loaded/p.total*100):0;$downloadFill.style.width=pct+"%";const mb=(p.loaded/1024/1024).toFixed(0);const tot=p.total?(p.total/1024/1024).toFixed(0):"?";$downloadText.textContent=`Model: ${mb}/${tot}MB (${pct}%)`}if(p.status==="done")$downloadFill.style.width="100%"}});$loaderTx.textContent="Ready!";const sl=mid.match(/(\d+\.?\d*B)/i)?.[1]||"";$("chatTitle").textContent=`Qwen 3.5 Vision${sl?" · "+sl:""}`;setTimeout(()=>showScreen("chat"),400)}catch(err){console.error(err);$loaderTx.textContent="Failed to load";$loaderSub.textContent=err.message;$("loaderRing").style.borderTopColor="var(--red)"}});
+$btnAttach.addEventListener("click",()=>{if(!$btnAttach.disabled)$fileInput.click()});
+$fileInput.addEventListener("change",async e=>{const f=e.target.files?.[0];if(!f)return;const d=URL.createObjectURL(f);const raw=await RawImage.read(d);const resized=await raw.resize(448,448);attachedImage={raw:resized,dataURL:d,name:f.name};$imgThumb.src=d;$imgName.textContent=f.name;$imgPrev.classList.add("visible");updateSendBtn();$fileInput.value=""});
+$btnRemImg.addEventListener("click",clearAttachment);
+function clearAttachment(){if(attachedImage?.dataURL)URL.revokeObjectURL(attachedImage.dataURL);attachedImage=null;$imgPrev.classList.remove("visible");$imgThumb.src="";$imgName.textContent="";updateSendBtn()}
+$input.addEventListener("input",()=>{$input.style.height="auto";$input.style.height=Math.min($input.scrollHeight,120)+"px";updateSendBtn()});
+$input.addEventListener("keydown",e=>{if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();if(!isGenerating)sendMessage()}});
+$btnSend.addEventListener("click",()=>{if(isGenerating)stoppingCriteria.interrupt();else sendMessage()});
+function updateSendBtn(){if(isGenerating){$btnSend.disabled=false;$btnSend.classList.add("stopping")}else{$btnSend.classList.remove("stopping");$btnSend.disabled=!$input.value.trim()&&!attachedImage}}
+function disposePastKeyValues(){if(pastKeyValues){for(const t of Object.values(pastKeyValues))t.dispose();pastKeyValues=null}}
+$input.addEventListener("paste",e=>{const items=e.clipboardData?.items;if(!items)return;for(const item of items){if(item.type.startsWith("image/")){e.preventDefault();const f=item.getAsFile();const dt=new DataTransfer();dt.items.add(f);$fileInput.files=dt.files;$fileInput.dispatchEvent(new Event("change"));break}}});
+$btnReset.addEventListener("click",()=>{conversationImage=null;attachedImage=null;disposePastKeyValues();stoppingCriteria.reset();imageGridThw=null;promptHistory="";totalTokens=0;totalTime=0;sessionMsgCount=0;$imgPrev.classList.remove("visible");$btnAttach.disabled=false;$messages.innerHTML=`<div class="welcome-msg" id="welcomeMsg"><h3>Start a conversation</h3><p>Attach an image or type a message.<br/>Everything runs locally in your browser.</p></div>`;$errBanner.classList.remove("visible");$input.value="";$input.style.height="auto";updateStatsBar();updateSendBtn()});
+function renderMarkdown(t){if(typeof marked==="undefined")return escapeHtml(t);try{marked.setOptions({breaks:true,gfm:true});return marked.parse(t)}catch{return escapeHtml(t)}}
+function escapeHtml(s){return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}
+async function sendMessage(){if(isGenerating)return;const text=$input.value.trim();if(!text&&!attachedImage)return;$errBanner.classList.remove("visible");const welcome=$messages.querySelector(".welcome-msg");if(welcome)welcome.remove();const img=attachedImage;if(img)conversationImage=img.raw;appendMessage("user",text,img?.dataURL);sessionMsgCount++;$input.value="";$input.style.height="auto";clearAttachment();if(conversationImage)$btnAttach.disabled=true;isGenerating=true;updateSendBtn();const{groupEl,bubbleEl}=appendAssistantPlaceholder();try{const isFirstTurn=promptHistory==="";const enableThinking=$reasoning.checked;const sysPrompt=getSysPrompt();const maxTok=enableThinking?Math.max(getMaxTok(),2048):getMaxTok();let userPrompt="";if(isFirstTurn&&sysPrompt)userPrompt+=`<|im_start|>system\n${sysPrompt}<|im_end|>\n`;userPrompt+="<|im_start|>user\n";if(img?.raw)userPrompt+="<|vision_start|><|image_pad|><|vision_end|>";userPrompt+=(text||"")+"<|im_end|>\n";userPrompt+=enableThinking?"<|im_start|>assistant\n<think>\n":"<|im_start|>assistant\n<think>\n\n</think>\n\n";let inputs,generateArgs;if(img?.raw){const fp=(isFirstTurn?"":promptHistory+"\n")+userPrompt;inputs=await processor(fp,img.raw);if(inputs.image_grid_thw)imageGridThw=inputs.image_grid_thw;disposePastKeyValues();generateArgs={...inputs}}else if(isFirstTurn){inputs=await processor(userPrompt);generateArgs={...inputs}}else{const cp=promptHistory+"\n"+userPrompt;inputs=await processor(cp);generateArgs={...inputs,past_key_values:pastKeyValues};if(imageGridThw)generateArgs.image_grid_thw=imageGridThw}let fullText="",thinkingDone=!enableThinking,thinkBlock=null,thinkContentEl=null,thinkArrow=null,tokenCount=0,startTime=null;if(enableThinking){thinkBlock=document.createElement("div");thinkBlock.className="think-block";const toggle=document.createElement("div");toggle.className="think-toggle";thinkArrow=document.createElement("span");thinkArrow.className="think-arrow open";thinkArrow.textContent="▶";toggle.append(thinkArrow);toggle.append(document.createTextNode(" Thinking"));thinkContentEl=document.createElement("div");thinkContentEl.className="think-content";thinkBlock.append(toggle,thinkContentEl);bubbleEl.prepend(thinkBlock);toggle.addEventListener("click",()=>{thinkContentEl.classList.toggle("collapsed");thinkArrow.classList.toggle("open")})}let textNode=document.createElement("div");textNode.className="msg-text";bubbleEl.appendChild(textNode);const streamer=new TextStreamer(processor.tokenizer,{skip_prompt:true,skip_special_tokens:!enableThinking,token_callback_function:()=>{if(!startTime)startTime=performance.now();tokenCount++},callback_function:token=>{if(!thinkingDone){const endIdx=(fullText+token).indexOf("</think>");if(endIdx!==-1){thinkingDone=true;thinkContentEl.textContent=(fullText+token).slice(0,endIdx).trim();fullText=(fullText+token).slice(endIdx+"</think>".length);textNode.innerHTML=renderMarkdown(fullText.replace(/^\n+/,"").replace(/<\|im_end\|>/g,""));thinkContentEl.classList.add("collapsed");thinkArrow.classList.remove("open")}else{fullText+=token;thinkContentEl.textContent=fullText}}else{fullText+=token;textNode.innerHTML=renderMarkdown(fullText.replace(/^\n+/,"").replace(/<\|im_end\|>/g,""))}$messages.scrollTop=$messages.scrollHeight}});const result=await model.generate({...generateArgs,max_new_tokens:maxTok,do_sample:true,temperature:getTemp(),top_k:getTopK(),repetition_penalty:getRepPen(),streamer,stopping_criteria:stoppingCriteria,return_dict_in_generate:true});pastKeyValues=result.past_key_values;promptHistory=processor.batch_decode(result.sequences,{skip_special_tokens:false})[0];if(thinkingDone){const cleaned=fullText.replace(/^\n+/,"").replace(/<\|im_end\|>/g,"");textNode.innerHTML=renderMarkdown(cleaned);if(cleaned.includes("`")||cleaned.includes("#")||cleaned.includes("|")||cleaned.includes("*"))bubbleEl.classList.add("md")}if(tokenCount>0&&startTime){const elapsed=(performance.now()-startTime)/1000;const tps=(tokenCount/elapsed).toFixed(1);const se=document.createElement("div");se.className="msg-stats";se.textContent=`${tokenCount} tokens · ${tps} tok/s · ${elapsed.toFixed(1)}s`;groupEl.appendChild(se);totalTokens+=tokenCount;totalTime+=elapsed;updateStatsBar(tps,tokenCount)}sessionMsgCount++;bubbleEl.classList.remove("generating")}catch(err){console.error(err);groupEl.remove();$errBanner.textContent="Error: "+err.message;$errBanner.classList.add("visible");showToast("Generation failed","error")}isGenerating=false;stoppingCriteria.reset();updateSendBtn();$messages.scrollTop=$messages.scrollHeight}
+function appendMessage(role,text,imageDataURL){const g=document.createElement("div");g.className=`msg-group ${role}`;const r=document.createElement("div");r.className="msg-role";r.textContent=role==="user"?"You":"Qwen 3.5";g.appendChild(r);if(imageDataURL){const i=document.createElement("img");i.className="msg-image";i.src=imageDataURL;i.alt="attached";g.appendChild(i)}const b=document.createElement("div");b.className="msg-bubble";b.textContent=text;g.appendChild(b);$messages.appendChild(g);$messages.scrollTop=$messages.scrollHeight;return g}
+function appendAssistantPlaceholder(){const g=document.createElement("div");g.className="msg-group assistant";const r=document.createElement("div");r.className="msg-role";r.textContent="Qwen 3.5";g.appendChild(r);const b=document.createElement("div");b.className="msg-bubble generating";const d=document.createElement("span");d.className="thinking-dots";for(let i=0;i<3;i++)d.appendChild(document.createElement("span"));b.appendChild(d);g.appendChild(b);$messages.appendChild(g);$messages.scrollTop=$messages.scrollHeight;return{groupEl:g,bubbleEl:b}}
+window.visualViewport?.addEventListener("resize",()=>{$messages.scrollTop=$messages.scrollHeight});
+(async()=>{if(!navigator.gpu){showToast("WebGPU not available","error");$btnLoad.disabled=true;return}try{const a=await navigator.gpu.requestAdapter({powerPreference:"high-performance"});if(!a){showToast("No WebGPU adapter","error");$btnLoad.disabled=true}}catch(e){showToast("WebGPU init failed","error")}})();
 </script>
 </body>
 </html>