Add reasoning level selector, single session per page load

index.html

@@ -20,7 +20,6 @@
       margin: auto;
     }
     header { padding: 14px 16px; border-bottom: 1px solid #e5e7eb; }
-    .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
     h1 { margin: 0; font-size: 15px; font-weight: 600; }
     header p { margin: 4px 0 0; color: #6b7280; font-size: 12px; }
     header a { color: #4f46e5; }
@@ -28,10 +27,11 @@
     details { margin-top: 10px; }
     summary { color: #6b7280; font-size: 12px; cursor: pointer; }
     summary:hover { color: #4f46e5; }
+    .field { margin-top: 10px; }
+    .field label { display: block; margin-bottom: 4px; color: #6b7280; font-size: 12px; }
     #system {
       width: 100%;
       min-height: 76px;
-      margin-top: 8px;
       padding: 8px 10px;
       border: 1px solid #d1d5db;
       border-radius: 8px;
@@ -39,6 +39,14 @@
       font-size: 13px;
       resize: vertical;
     }
+    #reasoning {
+      padding: 6px 8px;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+      background: #fff;
+      font: inherit;
+      font-size: 13px;
+    }
     #chat { padding: 20px 16px; overflow-y: auto; }
     .message {
       max-width: 80%;
@@ -53,6 +61,14 @@
     .user { margin-left: auto; color: #fff; background: #4f46e5; }
     .error { color: #991b1b; background: #fee2e2; }
     .pending { color: #6b7280; font-style: italic; }
+    .reasoning {
+      margin-bottom: 8px;
+      padding-left: 9px;
+      border-left: 2px solid #d1d5db;
+      color: #6b7280;
+      font-size: 13px;
+      font-style: italic;
+    }
     form {
       display: grid;
       grid-template-columns: 1fr auto;
@@ -77,20 +93,10 @@
       font: inherit;
       font-weight: 600;
       cursor: pointer;
+      align-self: end;
     }
     button:disabled { opacity: 0.5; cursor: wait; }
-    #new {
-      padding: 6px 12px;
-      color: #4f46e5;
-      background: transparent;
-      border: 1px solid #d1d5db;
-      border-radius: 8px;
-      font-size: 13px;
-      font-weight: 500;
-    }
-    #new:hover { background: #f3f4f6; }
-    #send { align-self: end; }
-    textarea:focus, button:focus-visible, summary:focus-visible {
+    textarea:focus, button:focus-visible, select:focus-visible, summary:focus-visible {
       outline: 2px solid #6366f1;
       outline-offset: 2px;
     }
@@ -112,38 +118,45 @@
       :root { color-scheme: dark; }
       body { color: #f3f4f6; background: #111827; }
       header, form { border-color: #374151; }
-      header p, #status, .pending, summary { color: #9ca3af; }
+      header p, #status, .pending, summary, .field label, .reasoning { color: #9ca3af; }
       summary:hover { color: #818cf8; }
       code { color: #d1d5db; }
-      #system, textarea { color: #f3f4f6; background: #1f2937; border-color: #4b5563; }
+      #system, textarea, #reasoning { color: #f3f4f6; background: #1f2937; border-color: #4b5563; }
       .assistant { background: #1f2937; }
       .error { color: #fecaca; background: #450a0a; }
-      #new { color: #a5b4fc; border-color: #4b5563; }
-      #new:hover { background: #1f2937; }
+      .reasoning { border-color: #4b5563; }
       #status.busy::before { border-color: #4b5563; border-top-color: #818cf8; }
     }
     @media (max-width: 620px) {
       .message { max-width: 92%; }
       form { grid-template-columns: 1fr; }
-      #send { width: 100%; }
+      button { width: 100%; }
     }
   </style>
 </head>
 <body>
   <main>
     <header>
-      <div class="row">
-        <h1>Qwen3.8-27B Humanlike Chat</h1>
-        <button id="new" type="button">New chat</button>
-      </div>
+      <h1>Qwen3.8-27B Humanlike Chat</h1>
       <p>
         Live demo of the hosted endpoint <code>https://api.lessthanthreeai.com/v1</code>.
         <a href="https://huggingface.co/LessThanThreeAI/Qwen3.8-27B-Humanlike-Chat-GGUF">Model card</a>
       </p>
       <details>
-        <summary>System prompt</summary>
-        <textarea id="system" aria-label="System prompt"
-          placeholder="Optional. Sets identity, setting, or relationship for the whole conversation."></textarea>
+        <summary>Settings</summary>
+        <div class="field">
+          <label for="system">System prompt</label>
+          <textarea id="system"
+            placeholder="Optional. Sets identity, setting, or relationship for the conversation."></textarea>
+        </div>
+        <div class="field">
+          <label for="reasoning">Reasoning</label>
+          <select id="reasoning">
+            <option value="off">Off (fastest, the default)</option>
+            <option value="low">Low</option>
+            <option value="medium">Medium</option>
+          </select>
+        </div>
       </details>
     </header>
 
@@ -161,6 +174,7 @@
     const API = "https://api.lessthanthreeai.com/v1";
     const MODEL = "qwen3.8-27b-humanlike-chat";
     const INTRO = "Say something. The first reply can take a couple of minutes while the inference worker starts.";
+    const MAX_TOKENS = { off: 512, low: 4096, medium: 4096 };
 
     const chat = document.querySelector("#chat");
     const form = document.querySelector("#form");
@@ -168,14 +182,15 @@
     const send = document.querySelector("#send");
     const status = document.querySelector("#status");
     const system = document.querySelector("#system");
-    const newChat = document.querySelector("#new");
+    const reasoning = document.querySelector("#reasoning");
 
-    let messages = [];
+    // One conversation per page load. Reloading starts a fresh session.
+    const messages = [];
 
     system.value = localStorage.getItem("systemPrompt") || "";
-    system.addEventListener("input", () => {
-      localStorage.setItem("systemPrompt", system.value);
-    });
+    reasoning.value = localStorage.getItem("reasoningEffort") || "off";
+    system.addEventListener("input", () => localStorage.setItem("systemPrompt", system.value));
+    reasoning.addEventListener("change", () => localStorage.setItem("reasoningEffort", reasoning.value));
 
     function addMessage(role, text) {
       const element = document.createElement("div");
@@ -186,19 +201,24 @@
       return element;
     }
 
-    function startSession(message) {
-      messages = [];
-      chat.replaceChildren();
-      addMessage("assistant", message);
-      status.textContent = "";
-      status.classList.remove("busy");
-      prompt.value = "";
-      prompt.focus();
+    function addAssistantMessage() {
+      const element = document.createElement("div");
+      element.className = "message assistant";
+      const thoughts = document.createElement("div");
+      thoughts.className = "reasoning";
+      thoughts.hidden = true;
+      const content = document.createElement("div");
+      content.className = "pending";
+      content.textContent = "waiting for the first token";
+      element.append(thoughts, content);
+      chat.append(element);
+      chat.scrollTop = chat.scrollHeight;
+      return { element, thoughts, content };
     }
 
     // Server-sent events arrive as "data: {...}" chunks. The endpoint may also send
     // ": status={...}" comment lines while a cold worker starts.
-    function applyEvent(line, output) {
+    function applyEvent(line, target) {
       if (line.startsWith(":")) {
         const payload = line.slice(1).trim().replace(/^status=/, "");
         try {
@@ -210,21 +230,24 @@
       if (!line.startsWith("data:")) return;
       const payload = line.slice(5).trim();
       if (!payload || payload === "[DONE]") return;
-      const event = JSON.parse(payload);
-      const content = event.choices?.[0]?.delta?.content || event.choices?.[0]?.text || "";
-      if (content) {
-        if (output.classList.contains("pending")) {
-          output.classList.remove("pending");
-          output.textContent = "";
+
+      const delta = (JSON.parse(payload).choices || [{}])[0].delta || {};
+      if (delta.reasoning) {
+        target.thoughts.hidden = false;
+        target.thoughts.textContent += delta.reasoning;
+        chat.scrollTop = chat.scrollHeight;
+      }
+      if (delta.content) {
+        if (target.content.classList.contains("pending")) {
+          target.content.classList.remove("pending");
+          target.content.textContent = "";
           status.textContent = "";
         }
-        output.textContent += content;
+        target.content.textContent += delta.content;
         chat.scrollTop = chat.scrollHeight;
       }
     }
 
-    newChat.addEventListener("click", () => startSession(INTRO));
-
     form.addEventListener("submit", async (event) => {
       event.preventDefault();
       const text = prompt.value.trim();
@@ -237,15 +260,18 @@
       status.classList.add("busy");
       status.textContent = "Starting the model. A cold start takes about two to three minutes.";
 
-      const output = addMessage("assistant", "");
-      output.classList.add("pending");
-      output.textContent = "waiting for the first token";
+      const target = addAssistantMessage();
+      const effort = reasoning.value;
 
       const systemPrompt = system.value.trim();
       const request = systemPrompt
         ? [{ role: "system", content: systemPrompt }, ...messages]
         : messages;
 
+      const chatTemplateKwargs = effort === "off"
+        ? { enable_thinking: false, preserve_thinking: false }
+        : { enable_thinking: true, reasoning_effort: effort, preserve_thinking: false };
+
       try {
         const response = await fetch(`${API}/chat/completions`, {
           method: "POST",
@@ -254,7 +280,8 @@
             model: MODEL,
             messages: request,
             stream: true,
-            max_tokens: 512,
+            max_tokens: MAX_TOKENS[effort],
+            chat_template_kwargs: chatTemplateKwargs,
           }),
         });
 
@@ -274,19 +301,19 @@
           buffer += decoder.decode(value || new Uint8Array(), { stream: !done });
           const lines = buffer.split("\n");
           buffer = lines.pop() || "";
-          for (const line of lines) applyEvent(line.trim(), output);
+          for (const line of lines) applyEvent(line.trim(), target);
           if (done) break;
         }
-        if (buffer.trim()) applyEvent(buffer.trim(), output);
+        if (buffer.trim()) applyEvent(buffer.trim(), target);
 
-        output.classList.remove("pending");
-        if (!output.textContent) output.textContent = "(empty response)";
-        messages.push({ role: "assistant", content: output.textContent });
+        target.content.classList.remove("pending");
+        if (!target.content.textContent) target.content.textContent = "(no final answer returned)";
+        messages.push({ role: "assistant", content: target.content.textContent });
         status.textContent = "Complete. Later replies are fast while the worker stays warm.";
       } catch (error) {
-        output.classList.remove("pending");
-        output.classList.add("error");
-        output.textContent = `Request failed: ${error.message}`;
+        target.content.classList.remove("pending");
+        target.element.classList.add("error");
+        target.content.textContent = `Request failed: ${error.message}`;
         status.textContent = "The inference service did not complete the request.";
       } finally {
         status.classList.remove("busy");
@@ -295,7 +322,8 @@
       }
     });
 
-    startSession(INTRO);
+    addMessage("assistant", INTRO);
+    prompt.focus();
   </script>
 </body>
 </html>