Add Gemma thinking toggle

dist/assets/index-COohfmVW.css

@@ -0,0 +1 @@
+:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f4f0e8;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#10100f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.4}*{box-sizing:border-box}body{background:linear-gradient(#39453a38,#0000 360px),#10100f;min-width:320px;min-height:100vh;margin:0}button,input,textarea,select{font:inherit}button{border:0}.app{width:min(1180px,100vw - 32px);margin:0 auto;padding:24px 0 36px}.topbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.brand{align-items:center;gap:12px;display:flex}.mark{color:#15170f;background:#d7ff7a;border:1px solid #f4f0e829;border-radius:8px;place-items:center;width:38px;height:38px;font-weight:800;display:grid}h1,h2,h3,p{margin:0}h1{letter-spacing:0;font-size:19px;font-weight:720}.subtle{color:#a7a093;font-size:13px}.actions{align-items:center;gap:8px;display:flex;position:relative}.icon-button,.button{color:#f4f0e8;cursor:pointer;background:#24231f;border:1px solid #f4f0e81f;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:38px;padding:0 14px;display:inline-flex}.icon-button{width:38px;padding:0}.icon-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:18px;height:18px}.settings-popover{z-index:10;width:min(430px,100vw - 32px);padding:16px;position:absolute;top:46px;right:0;box-shadow:0 18px 42px #00000061}.settings-popover h2{margin-bottom:8px;font-size:15px;font-weight:720}.button.primary{color:#15170f;background:#d7ff7a;border-color:#d7ff7a;font-weight:740}.button.danger{color:#ffd9d9;background:#3a2525;border-color:#6e3737}.button:disabled,.icon-button:disabled{cursor:not-allowed;opacity:.55}.shell{grid-template-columns:minmax(0,1fr) 340px;gap:18px;display:grid}.panel{background:#1a1916f0;border:1px solid #f4f0e81f;border-radius:8px}.chat-panel{grid-template-rows:auto minmax(0,1fr) auto;min-height:690px;display:grid}.status-strip{background:#f4f0e814;border-bottom:1px solid #f4f0e81a;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;display:grid}.metric{background:#1a1916;min-width:0;padding:12px 14px}.metric span{color:#a7a093;text-transform:uppercase;font-size:11px;display:block}.metric strong{text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:14px;font-weight:680;display:block;overflow:hidden}.messages{padding:18px;overflow:auto}.message-list{flex-direction:column;gap:14px;display:flex}.message{white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid #f4f0e81a;border-radius:8px;max-width:86%;padding:13px 14px}.message.user{background:#243124;align-self:flex-end}.message.assistant{background:#22211d;align-self:flex-start}.message.thinking-message{padding:8px}.answer-text{white-space:pre-wrap}.thinking-block{flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 8px;display:flex}.thinking-message .thinking-block{margin-bottom:0}.thinking-toggle{color:#c9c1b2;cursor:pointer;background:#171714;border-radius:6px;align-items:center;gap:7px;min-height:26px;padding:0 7px;font-size:12px;display:inline-flex}.thinking-arrow{color:#d7ff7a;justify-content:center;align-items:center;width:14px;height:14px;display:inline-flex}.thinking-arrow svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.2px;width:14px;height:14px}.thinking-content{color:#a7a093;white-space:pre-wrap;background:#141411;border-radius:6px;max-height:240px;padding:8px;font-size:12px;overflow:auto}.empty{color:#a7a093;text-align:center;place-items:center;min-height:340px;display:grid}.composer{border-top:1px solid #f4f0e81a;gap:10px;padding:14px;display:grid}textarea,input,select{color:#f4f0e8;background:#121210;border:1px solid #f4f0e81f;border-radius:8px;outline:none;width:100%}textarea:focus,input:focus,select:focus{border-color:#d7ff7acc;box-shadow:0 0 0 3px #d7ff7a1f}textarea{resize:vertical;min-height:96px;padding:12px}input,select{min-height:38px;padding:0 10px}.composer-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.file-chip{color:#a7a093;flex:1;align-items:center;gap:8px;min-width:0;font-size:13px;display:flex}.file-chip input{display:none}.chip-button{color:#f4f0e8;cursor:pointer;background:#24231f;border-radius:8px;align-items:center;gap:7px;min-height:34px;padding:0 10px;display:inline-flex}.file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.side{flex-direction:column;gap:14px;display:flex}.card{padding:16px}.card h2{margin-bottom:10px;font-size:15px;font-weight:720}.field{gap:6px;margin-top:12px;display:grid}.field label{color:#c9c1b2;font-size:12px;font-weight:650}.field-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.progress{background:#11110f;border-radius:999px;height:10px;overflow:hidden}.bar{border-radius:inherit;background:#d7ff7a;width:0%;height:100%;transition:width .18s}.indeterminate .bar{background:linear-gradient(90deg,#d7ff7a59,#d7ff7a,#d7ff7a59) 0 0/200% 100%;animation:1.1s linear infinite load-sweep}@keyframes load-sweep{0%{background-position:200% 0}to{background-position:0 0}}.log{color:#c9c1b2;white-space:pre-wrap;background:#11110f;border-radius:8px;min-height:106px;max-height:190px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;overflow:auto}.pill-row{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.pill{color:#c9c1b2;border:1px solid #f4f0e81f;border-radius:999px;padding:5px 9px;font-size:12px}.source{overflow-wrap:anywhere}@media (max-width:900px){.app{width:min(100vw - 20px,720px);padding-top:14px}.shell{grid-template-columns:1fr}.status-strip{grid-template-columns:1fr 1fr}.message{max-width:94%}.topbar{flex-direction:column;align-items:flex-start}.actions{justify-content:flex-end;align-self:stretch}}

dist/assets/wllama-ByHMPmd7.wasm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a3e827b9fc3536fd1b061eee8b130e46f6366d25b062438a791d8b17b2a72a30
+size 7308965

dist/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gemma 4 WebGPU</title>
+    <link rel="preconnect" href="https://huggingface.co" />
+    <script type="module" crossorigin src="./assets/index-Bqz15WNm.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-COohfmVW.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

src/main.ts

@@ -75,7 +75,7 @@ const state = {
   maxTokens: Number(params.get("maxTokens") || 384),
   temperature: Number(params.get("temperature") || 0.7),
   topP: Number(params.get("topP") || 0.95),
-  thinking: params.get("thinking") === "hidden" ? "hidden" : "collapsed",
+  thinking: params.get("thinking") === "enabled" ? "enabled" : "disabled",
   seed: Number(params.get("seed") || -1),
   prompt:
     params.get("prompt") ||
@@ -159,7 +159,7 @@ function webgpuStatus(): string {
   return modelLoaded && wllama?.isSupportWebGPU() ? "ready" : "available";
 }
 
-function iconSvg(name: "settings" | "newChat"): string {
+function iconSvg(name: "settings" | "newChat" | "chevronDown" | "chevronUp"): string {
   if (name === "settings") {
     return `
       <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -168,6 +168,20 @@ function iconSvg(name: "settings" | "newChat"): string {
       </svg>
     `;
   }
+  if (name === "chevronUp") {
+    return `
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <path d="m6 15 6-6 6 6"></path>
+      </svg>
+    `;
+  }
+  if (name === "chevronDown") {
+    return `
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <path d="m6 9 6 6 6-6"></path>
+      </svg>
+    `;
+  }
   return `
     <svg viewBox="0 0 24 24" aria-hidden="true">
       <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
@@ -196,8 +210,8 @@ function renderMessage(item: ChatEntry, index: number): string {
   }
 
   const thinking = item.thinking?.trim() || "";
-  const shouldShowThinking = state.thinking === "collapsed" && thinking.length > 0;
-  const arrow = item.thinkingOpen ? "^" : "v";
+  const shouldShowThinking = state.thinking === "enabled" && thinking.length > 0;
+  const arrow = item.thinkingOpen ? iconSvg("chevronUp") : iconSvg("chevronDown");
   const thinkingBlock = shouldShowThinking
     ? `<div class="thinking-block">
         <button class="thinking-toggle" type="button" data-thinking-index="${index}">
@@ -211,11 +225,10 @@ function renderMessage(item: ChatEntry, index: number): string {
         }
       </div>`
     : "";
-  const answer = item.content.trim()
-    ? escapeHtml(item.content)
-    : `<span class="subtle">Waiting for response...</span>`;
+  const answer = item.content.trim() ? `<div class="answer-text">${escapeHtml(item.content)}</div>` : "";
+  const waiting = !answer && !thinkingBlock ? `<div class="answer-text"><span class="subtle">Waiting for response...</span></div>` : "";
 
-  return `<div class="message assistant">${thinkingBlock}<div class="answer-text">${answer}</div></div>`;
+  return `<div class="message assistant${thinkingBlock && !answer ? " thinking-message" : ""}">${thinkingBlock}${answer}${waiting}</div>`;
 }
 
 function render(): void {
@@ -329,10 +342,10 @@ function render(): void {
               </div>
             </div>
             <div class="field">
-              <label for="thinking">Thinking</label>
+              <label for="thinking">Model thinking</label>
               <select id="thinking">
-                <option value="collapsed" ${state.thinking === "collapsed" ? "selected" : ""}>Show collapsed</option>
-                <option value="hidden" ${state.thinking === "hidden" ? "selected" : ""}>Hide</option>
+                <option value="disabled" ${state.thinking === "disabled" ? "selected" : ""}>Disabled</option>
+                <option value="enabled" ${state.thinking === "enabled" ? "selected" : ""}>Enabled</option>
               </select>
             </div>
           </section>
@@ -403,7 +416,7 @@ function syncInputs(): void {
   state.maxTokens = getNumberValue("maxTokens", state.maxTokens);
   state.temperature = getNumberValue("temperature", state.temperature);
   state.topP = getNumberValue("topP", state.topP);
-  state.thinking = getInputValue("thinking", state.thinking) === "hidden" ? "hidden" : "collapsed";
+  state.thinking = getInputValue("thinking", state.thinking) === "enabled" ? "enabled" : "disabled";
   state.seed = getNumberValue("seed", state.seed);
 }
 
@@ -624,7 +637,7 @@ async function sendMessage(): Promise<void> {
       content,
     } as ChatCompletionMessage;
     const thinkingInstruction =
-      state.thinking === "hidden"
+      state.thinking === "disabled"
         ? ([
             {
               role: "system",
@@ -644,6 +657,9 @@ async function sendMessage(): Promise<void> {
       seed: state.seed >= 0 ? state.seed : undefined,
       cache_prompt: true,
       timings_per_token: true,
+      chat_template_kwargs: {
+        enable_thinking: state.thinking === "enabled",
+      },
     };
 
     await wllama.createChatCompletion({
@@ -666,7 +682,7 @@ async function sendMessage(): Promise<void> {
         currentLog = [
           `Generating ${formatSeconds(elapsed)}`,
           assistant?.content ? `Answer ${assistant.content.length} chars` : "Waiting for answer text...",
-          assistant?.thinking ? `Thinking ${assistant.thinking.length} chars` : "",
+          state.thinking === "enabled" && assistant?.thinking ? `Thinking ${assistant.thinking.length} chars` : "",
           lastTimings ? `Prompt ${lastTimings.prompt_per_second.toFixed(1)} tok/s` : "",
           lastTimings ? `Output ${lastTimings.predicted_per_second.toFixed(1)} tok/s` : "",
         ]

src/style.css

@@ -236,40 +236,63 @@ h1 {
   background: #22211d;
 }
 
+.message.thinking-message {
+  padding: 8px;
+}
+
 .answer-text {
   white-space: pre-wrap;
 }
 
 .thinking-block {
-  margin-bottom: 10px;
-  border-bottom: 1px solid rgba(244, 240, 232, 0.08);
-  padding-bottom: 10px;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0 0 8px;
+}
+
+.thinking-message .thinking-block {
+  margin-bottom: 0;
 }
 
 .thinking-toggle {
   display: inline-flex;
-  min-height: 28px;
+  min-height: 26px;
   align-items: center;
   gap: 7px;
-  border-radius: 7px;
-  padding: 0 8px;
-  background: #181815;
+  border-radius: 6px;
+  padding: 0 7px;
+  background: #171714;
   color: #c9c1b2;
   cursor: pointer;
   font-size: 12px;
 }
 
 .thinking-arrow {
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+  align-items: center;
+  justify-content: center;
   color: #d7ff7a;
-  font-weight: 800;
+}
+
+.thinking-arrow svg {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2.2;
 }
 
 .thinking-content {
-  margin-top: 8px;
   max-height: 240px;
   overflow: auto;
-  border-radius: 7px;
-  padding: 10px;
+  border-radius: 6px;
+  padding: 8px;
   background: #141411;
   color: #a7a093;
   font-size: 12px;