Upload 3 files

index.css

@@ -0,0 +1,737 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --bg: #0b0c0f;
+  --surface: #131518;
+  --surface-2: #1a1d22;
+  --surface-3: #22262c;
+  --border: #2a2e36;
+  --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;
+  --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;
+}
+
+/* ─── Noise overlay ─── */
+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;
+}
+
+/* ─── Screens ─── */
+.screen {
+  display: none;
+  width: 100%;
+  height: 100dvh;
+}
+.screen.active {
+  display: flex;
+}
+
+#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: 0.5;
+    transform: translate(-50%, -55%) scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: translate(-50%, -55%) scale(1.12);
+  }
+}
+
+.landing-tag {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--accent);
+  background: var(--accent-glow);
+  border: 1px solid rgba(232, 168, 76, 0.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: -0.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: 44px;
+  position: relative;
+  font-weight: 300;
+}
+
+.landing-specs {
+  display: flex;
+  gap: 32px;
+  margin-bottom: 48px;
+  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: 0.7rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
+.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 0.25s;
+}
+.btn-load-group:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 0 60px var(--accent-glow-strong),
+    0 8px 30px rgba(0, 0, 0, 0.4);
+}
+.btn-load-group:active {
+  transform: translateY(0);
+}
+.btn-load {
+  font-family: var(--font-body);
+  font-size: 0.92rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  color: var(--bg);
+  background: var(--accent);
+  border: none;
+  padding: 16px 12px 16px 36px;
+  border-radius: 100px 0 0 100px;
+  cursor: pointer;
+}
+.btn-load-arrow {
+  color: var(--bg);
+  background: var(--accent);
+  border: none;
+  border-left: 1px solid rgba(0, 0, 0, 0.15);
+  padding: 16px 20px 16px 12px;
+  border-radius: 0 100px 100px 0;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+}
+.model-select {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+  pointer-events: none;
+}
+.model-select option {
+  background: var(--surface-2);
+  color: var(--text);
+}
+
+.landing-footer {
+  position: absolute;
+  bottom: 28px;
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  color: var(--text-muted);
+  letter-spacing: 0.06em;
+}
+.landing-footer a {
+  color: var(--text-dim);
+  text-decoration: none;
+}
+.landing-footer a:hover {
+  color: var(--accent);
+}
+
+#loading {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 36px;
+}
+
+.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: 0.82rem;
+  color: var(--text-dim);
+  letter-spacing: 0.05em;
+  text-align: center;
+}
+.loader-sub {
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  margin-top: 8px;
+  text-align: center;
+  line-height: 1.5;
+}
+
+#chat {
+  flex-direction: column;
+  height: 100dvh;
+}
+
+/* Header */
+.chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  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: 0.65rem;
+  color: var(--green);
+  letter-spacing: 0.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: 12px;
+}
+
+/* Reasoning toggle */
+.toggle-reasoning {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+.toggle-reasoning input {
+  display: none;
+}
+.toggle-slider {
+  width: 32px;
+  height: 18px;
+  background: var(--border);
+  border-radius: 100px;
+  position: relative;
+  transition: background 0.2s;
+}
+.toggle-slider::after {
+  content: "";
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  top: 2px;
+  left: 2px;
+  transition: all 0.2s;
+}
+.toggle-reasoning input:checked + .toggle-slider {
+  background: var(--accent-glow);
+}
+.toggle-reasoning input:checked + .toggle-slider::after {
+  background: var(--accent);
+  left: 16px;
+}
+.toggle-label {
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  transition: color 0.2s;
+}
+.toggle-reasoning input:checked ~ .toggle-label {
+  color: var(--accent);
+}
+
+.btn-reset {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  background: transparent;
+  border: 1px solid var(--border);
+  padding: 7px 14px;
+  border-radius: 100px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.btn-reset:hover {
+  color: var(--red);
+  border-color: var(--red);
+}
+
+/* Messages */
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  scroll-behavior: smooth;
+}
+.chat-messages::-webkit-scrollbar {
+  width: 5px;
+}
+.chat-messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+.chat-messages::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 10px;
+}
+
+.msg {
+  max-width: 72%;
+  padding: 14px 18px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-size: 0.9rem;
+  line-height: 1.65;
+  animation: msgIn 0.3s ease;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+@keyframes msgIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.msg.user {
+  align-self: flex-end;
+  background: var(--surface-3);
+  border-bottom-right-radius: 4px;
+}
+.msg.assistant {
+  align-self: flex-start;
+  background: var(--surface);
+  border-bottom-left-radius: 4px;
+}
+.msg.assistant.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);
+}
+
+.msg-role {
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+.msg.assistant .msg-role {
+  color: var(--accent-dim);
+}
+
+.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: 0.2s;
+}
+.thinking-dots span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+@keyframes dot {
+  0%,
+  80%,
+  100% {
+    opacity: 0.25;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Generation stats */
+.msg-stats {
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  margin-top: 8px;
+  padding-top: 6px;
+  border-top: 1px solid var(--border);
+}
+
+/* Thinking block (collapsible) */
+.msg-thinking-label {
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent-dim);
+  margin-bottom: 4px;
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.msg-thinking-label:hover {
+  color: var(--accent);
+}
+.msg-thinking-chevron {
+  font-size: 0.55rem;
+  transition: transform 0.2s;
+}
+.msg-thinking {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  border-left: 2px solid var(--border);
+  padding-left: 10px;
+  margin-bottom: 8px;
+  max-height: none;
+  overflow-y: auto;
+}
+.msg-thinking.collapsing {
+  overflow: hidden;
+  transition:
+    max-height 0.3s ease,
+    opacity 0.2s ease,
+    margin-bottom 0.2s ease;
+}
+.msg-thinking.collapsed {
+  max-height: 0 !important;
+  opacity: 0;
+  margin-bottom: 0;
+  overflow: hidden;
+}
+
+/* Input area */
+.chat-input-area {
+  padding: 16px 24px 20px;
+  border-top: 1px solid var(--border);
+  background: var(--surface);
+  flex-shrink: 0;
+}
+
+.image-preview-bar {
+  display: none;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+.image-preview-bar.visible {
+  display: flex;
+}
+.image-preview-thumb {
+  width: 44px;
+  height: 44px;
+  border-radius: 6px;
+  object-fit: cover;
+  border: 1px solid var(--border);
+}
+.image-preview-name {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  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: 1.1rem;
+  cursor: pointer;
+  padding: 4px;
+  transition: color 0.2s;
+}
+.btn-remove-image:hover {
+  color: var(--red);
+}
+
+.chat-input-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+}
+
+.btn-attach,
+.btn-send {
+  width: 42px;
+  height: 42px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.btn-attach {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  font-size: 1.2rem;
+}
+.btn-attach:hover:not(:disabled) {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: var(--accent-glow);
+}
+.btn-attach:disabled,
+.btn-send:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.input-wrap {
+  flex: 1;
+  position: relative;
+}
+.input-wrap textarea {
+  width: 100%;
+  min-height: 42px;
+  max-height: 140px;
+  padding: 10px 16px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: 0.88rem;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+  transition: border-color 0.2s;
+}
+.input-wrap textarea::placeholder {
+  color: var(--text-muted);
+}
+.input-wrap textarea:focus {
+  border-color: var(--accent);
+}
+
+.btn-send {
+  background: var(--accent);
+  border: none;
+  color: var(--bg);
+  font-size: 1.1rem;
+}
+.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;
+}
+.btn-send:not(:disabled):hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 20px var(--accent-glow-strong);
+}
+.btn-send.stopping:not(:disabled):hover {
+  box-shadow: 0 4px 20px rgba(212, 90, 90, 0.3);
+}
+
+.chat-footer-note {
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  color: var(--text-muted);
+  text-align: center;
+  margin-top: 10px;
+  letter-spacing: 0.04em;
+}
+
+/* ─── Error banner ─── */
+.error-banner {
+  display: none;
+  padding: 12px 18px;
+  background: rgba(212, 90, 90, 0.1);
+  border: 1px solid rgba(212, 90, 90, 0.3);
+  border-radius: var(--radius-sm);
+  color: var(--red);
+  font-size: 0.82rem;
+  margin: 12px 24px 0;
+}
+.error-banner.visible {
+  display: block;
+}
+
+/* ─── Welcome msg ─── */
+.welcome-msg {
+  text-align: center;
+  padding: 48px 24px;
+  color: var(--text-muted);
+}
+.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: 0.85rem;
+  line-height: 1.6;
+}

index.html

@@ -1,19 +1,182 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Qwen 3.5 — In-Browser Vision 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>"
+    />
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <div id="landing" class="screen active">
+      <div class="landing-glow"></div>
+      <div class="landing-tag">Multimodal AI · 100% Local</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="btn-load-group">
+        <button class="btn-load" id="btnLoad">
+          Load Model (<span id="modelSizeLabel">0.8B</span>)
+        </button>
+        <button
+          class="btn-load-arrow"
+          id="btnModelArrow"
+          title="Choose model size"
+        >
+          ▾
+        </button>
+        <select class="model-select" id="modelSelect">
+          <option value="onnx-community/Qwen3.5-0.8B-ONNX">0.8B</option>
+          <option value="onnx-community/Qwen3.5-2B-ONNX">2B</option>
+          <option value="onnx-community/Qwen3.5-4B-ONNX">4B</option>
+        </select>
+      </div>
+      <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"></div>
+      <div>
+        <div class="loader-text" id="loaderText">Initializing model…</div>
+        <div class="loader-sub">
+          Model weights are cached for future visits.
+        </div>
+      </div>
+    </div>
+
+    <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">Qwen 3.5 Vision</div>
+            <div class="chat-header-status">Ready on WebGPU</div>
+          </div>
+        </div>
+        <div class="chat-header-controls">
+          <label
+            class="toggle-reasoning"
+            title="Let the model think step-by-step before answering"
+          >
+            <input type="checkbox" id="reasoningToggle" />
+            <span class="toggle-slider"></span>
+            <span class="toggle-label">Reasoning</span>
+          </label>
+          <button class="btn-reset" id="btnReset">Reset Chat</button>
+        </div>
+      </div>
+
+      <div class="error-banner" id="errorBanner"></div>
+
+      <div class="chat-messages" id="chatMessages">
+        <div class="welcome-msg">
+          <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="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="Describe this image…"
+            ></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="16"
+              height="16"
+              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 chats are sent to a server. Everything runs locally in your
+          browser. AI can make mistakes. Check important info.
+        </div>
+      </div>
+    </div>
+
+    <script src="index.js" type="module"></script>
+  </body>
 </html>

index.js

@@ -0,0 +1,459 @@
+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; // single RawImage used across the conversation
+let attachedImage = null; // { raw: RawImage, dataURL: string, name: string } | null
+let isGenerating = false;
+let pastKeyValues = null; // cached KV from previous generation
+let imageGridThw = null; // cached image_grid_thw from initial image inputs
+let promptHistory = ""; // raw prompt text built up across turns
+const stoppingCriteria = new InterruptableStoppingCriteria();
+
+/* ─── Wait for fonts, then reveal ─── */
+document.fonts.ready.then(() => document.body.classList.add("ready"));
+
+/* ─── DOM refs ─── */
+const $ = (id) => document.getElementById(id);
+const $loaderTx = $("loaderText");
+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 $modelSelect = $("modelSelect");
+const $modelSizeLabel = $("modelSizeLabel");
+const $btnModelArrow = $("btnModelArrow");
+
+/* ─── Model selector ─── */
+$btnModelArrow.addEventListener("click", () => {
+  $modelSelect.style.pointerEvents = "auto";
+  $modelSelect.focus();
+  $modelSelect.showPicker?.();
+});
+$modelSelect.addEventListener("change", () => {
+  $modelSizeLabel.textContent = $modelSelect.selectedOptions[0].textContent;
+  $modelSelect.style.pointerEvents = "none";
+});
+$modelSelect.addEventListener("blur", () => {
+  $modelSelect.style.pointerEvents = "none";
+});
+
+/* ─── Screen switching ─── */
+function showScreen(id) {
+  document
+    .querySelectorAll(".screen")
+    .forEach((s) => s.classList.toggle("active", s.id === id));
+}
+
+/* ─── Model loading ─── */
+$btnLoad.addEventListener("click", async () => {
+  showScreen("loading");
+  try {
+    const model_id = $modelSelect.value;
+    const sizeLabel = $modelSizeLabel.textContent;
+
+    $loaderTx.textContent = "Loading processor…";
+    processor = await AutoProcessor.from_pretrained(model_id);
+
+    $loaderTx.textContent = "Loading model weights…";
+    model = await Qwen3_5ForConditionalGeneration.from_pretrained(model_id, {
+      dtype: {
+        embed_tokens: "q4",
+        vision_encoder: "fp16",
+        decoder_model_merged: "q4",
+      },
+      device: "webgpu",
+    });
+
+    $loaderTx.textContent = "Ready!";
+    document.querySelector(".chat-header-title").textContent =
+      `Qwen 3.5 Vision · ${sizeLabel}`;
+    setTimeout(() => showScreen("chat"), 400);
+  } catch (err) {
+    console.error(err);
+    $loaderTx.textContent = "Failed to load model";
+    document.querySelector(".loader-sub").textContent = err.message;
+    document.querySelector(".loader-ring").style.borderTopColor = "var(--red)";
+  }
+});
+
+/* ─── Image attachment ─── */
+$btnAttach.addEventListener("click", () => {
+  if ($btnAttach.disabled) return;
+  $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() {
+  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;
+  }
+}
+
+/* ─── Reset ─── */
+$btnReset.addEventListener("click", () => {
+  conversationImage = null;
+  attachedImage = null;
+  disposePastKeyValues();
+  stoppingCriteria.reset();
+  imageGridThw = null;
+  promptHistory = "";
+  $imgPrev.classList.remove("visible");
+  $btnAttach.disabled = false;
+  $messages.innerHTML = `
+<div class="welcome-msg">
+<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";
+  updateSendBtn();
+});
+
+/* ─── Chat logic ─── */
+async function sendMessage() {
+  if (isGenerating) return;
+  const text = $input.value.trim();
+  if (!text && !attachedImage) return;
+
+  $errBanner.classList.remove("visible");
+
+  // Clear welcome
+  const welcome = $messages.querySelector(".welcome-msg");
+  if (welcome) welcome.remove();
+
+  // Capture attached image before clearing
+  const img = attachedImage;
+  if (img) conversationImage = img.raw;
+
+  // Render user message in the UI
+  appendMessage("user", text, img?.dataURL);
+
+  // Clear input fields
+  $input.value = "";
+  $input.style.height = "auto";
+  clearAttachment();
+
+  // Disable image attach for the rest of this conversation if we just used one
+  if (conversationImage) {
+    $btnAttach.disabled = true;
+  }
+
+  // Start generating
+  isGenerating = true;
+  updateSendBtn();
+
+  const assistantEl = appendMessage("assistant", "", null, true);
+  const contentEl = assistantEl.querySelector(".msg-content");
+
+  try {
+    // Build prompt manually (can't use apply_chat_template with PKV approach)
+    const isFirstTurn = promptHistory === "";
+
+    // Build the user turn
+    const enableThinking = $reasoning.checked;
+    let 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) {
+      // Image attached: must do a full encode (no PKV reuse possible)
+      // Rebuild the full prompt including any prior conversation
+      const fullPrompt = (isFirstTurn ? "" : promptHistory + "\n") + userPrompt;
+      inputs = await processor(fullPrompt, img.raw);
+
+      // Cache image_grid_thw for future PKV continuation turns
+      if (inputs.image_grid_thw) {
+        imageGridThw = inputs.image_grid_thw;
+      }
+
+      // Discard past key values — image changes the encoded sequence
+      disposePastKeyValues();
+      generateArgs = { ...inputs };
+    } else if (isFirstTurn) {
+      // First turn, text only: full encode, no image
+      inputs = await processor(userPrompt);
+      generateArgs = { ...inputs };
+    } else {
+      // Continuation: use past_key_values, no image re-encoding
+      const continuationPrompt = promptHistory + "\n" + userPrompt;
+      inputs = await processor(continuationPrompt);
+
+      generateArgs = {
+        ...inputs,
+        past_key_values: pastKeyValues,
+      };
+
+      // Pass image_grid_thw if we had an image earlier
+      if (imageGridThw) {
+        generateArgs.image_grid_thw = imageGridThw;
+      }
+    }
+
+    let fullText = "";
+    let thinkingDone = !enableThinking;
+    let thinkingEl = null;
+    let thinkingContentEl = null;
+
+    let thinkingLabel = null;
+    let chevron = null;
+
+    let tokenCount = 0;
+    let startTime = null;
+
+    if (enableThinking) {
+      // Add collapsible thinking block before the content area
+      thinkingLabel = document.createElement("div");
+      thinkingLabel.className = "msg-thinking-label";
+      chevron = document.createElement("span");
+      chevron.className = "msg-thinking-chevron";
+      chevron.textContent = "▼";
+      thinkingLabel.append(chevron, " Thinking");
+
+      thinkingEl = document.createElement("div");
+      thinkingEl.className = "msg-thinking";
+      contentEl.before(thinkingLabel, thinkingEl);
+      thinkingContentEl = thinkingEl;
+
+      thinkingLabel.addEventListener("click", () => {
+        if (thinkingEl.classList.contains("collapsed")) {
+          thinkingEl.classList.add("collapsing");
+          thinkingEl.classList.remove("collapsed");
+          thinkingEl.style.maxHeight = thinkingEl.scrollHeight + "px";
+          thinkingEl.addEventListener(
+            "transitionend",
+            () => {
+              thinkingEl.classList.remove("collapsing");
+              thinkingEl.style.maxHeight = "";
+            },
+            { once: true },
+          );
+          chevron.textContent = "▼";
+        } else {
+          thinkingEl.style.maxHeight = thinkingEl.scrollHeight + "px";
+          thinkingEl.classList.add("collapsing");
+          requestAnimationFrame(() => {
+            thinkingEl.classList.add("collapsed");
+          });
+          thinkingEl.addEventListener(
+            "transitionend",
+            () => {
+              thinkingEl.classList.remove("collapsing");
+              thinkingEl.style.maxHeight = "";
+            },
+            { once: true },
+          );
+          chevron.textContent = "▶";
+        }
+      });
+    }
+
+    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) {
+          // Check if this token contains the </think> boundary
+          const endIdx = (fullText + token).indexOf("</think>");
+          if (endIdx !== -1) {
+            thinkingDone = true;
+            const thinkText = (fullText + token).slice(0, endIdx).trim();
+            thinkingContentEl.textContent = thinkText;
+            fullText = (fullText + token).slice(endIdx + "</think>".length);
+            contentEl.textContent = fullText
+              .replace(/^\n+/, "")
+              .replace(/<\|im_end\|>/g, "");
+            // Auto-collapse thinking with animation
+            thinkingEl.style.maxHeight = thinkingEl.scrollHeight + "px";
+            thinkingEl.classList.add("collapsing");
+            requestAnimationFrame(() => {
+              thinkingEl.classList.add("collapsed");
+            });
+            thinkingEl.addEventListener(
+              "transitionend",
+              () => {
+                thinkingEl.classList.remove("collapsing");
+                thinkingEl.style.maxHeight = "";
+              },
+              { once: true },
+            );
+            chevron.textContent = "▶";
+          } else {
+            fullText += token;
+            thinkingContentEl.textContent = fullText;
+          }
+        } else {
+          fullText += token;
+          contentEl.textContent = fullText
+            .replace(/^\n+/, "")
+            .replace(/<\|im_end\|>/g, "");
+        }
+        $messages.scrollTop = $messages.scrollHeight;
+      },
+    });
+
+    const result = await model.generate({
+      ...generateArgs,
+      max_new_tokens: enableThinking ? 2048 : 512,
+      do_sample: true,
+      streamer,
+      stopping_criteria: stoppingCriteria,
+      return_dict_in_generate: true,
+    });
+
+    // Update past key values for next turn
+    pastKeyValues = result.past_key_values;
+
+    // Decode the full sequence to maintain prompt history
+    const fullSequenceText = processor.batch_decode(result.sequences, {
+      skip_special_tokens: false,
+    })[0];
+    promptHistory = fullSequenceText;
+
+    // Show generation 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`;
+      assistantEl.appendChild(statsEl);
+    }
+
+    assistantEl.classList.remove("generating");
+  } catch (err) {
+    console.error(err);
+    assistantEl.remove();
+    $errBanner.textContent = "Generation error: " + err.message;
+    $errBanner.classList.add("visible");
+  }
+
+  isGenerating = false;
+  stoppingCriteria.reset();
+  updateSendBtn();
+  $messages.scrollTop = $messages.scrollHeight;
+}
+
+/* ─── Render helpers ─── */
+function appendMessage(role, text, imageDataURL, generating = false) {
+  const el = document.createElement("div");
+  el.className = `msg ${role}` + (generating ? " generating" : "");
+
+  const roleEl = document.createElement("div");
+  roleEl.className = "msg-role";
+  roleEl.textContent = role === "user" ? "You" : "Qwen 3.5";
+  el.appendChild(roleEl);
+
+  if (imageDataURL) {
+    const img = document.createElement("img");
+    img.className = "msg-image";
+    img.src = imageDataURL;
+    img.alt = "attached";
+    el.appendChild(img);
+  }
+
+  const content = document.createElement("div");
+  content.className = "msg-content";
+  if (generating) {
+    const dots = document.createElement("span");
+    dots.className = "thinking-dots";
+    for (let i = 0; i < 3; i++)
+      dots.appendChild(document.createElement("span"));
+    content.appendChild(dots);
+  } else {
+    content.textContent = text;
+  }
+  el.appendChild(content);
+
+  $messages.appendChild(el);
+  $messages.scrollTop = $messages.scrollHeight;
+  return el;
+}