Point the demo at the hosted vLLM endpoint

index.html

@@ -3,35 +3,77 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Qwen3.8 27B Humanlike Chat</title>
+  <title>Qwen3.8-27B Humanlike Chat</title>
   <style>
     * { box-sizing: border-box; }
-    body { margin: 0; color: #111827; background: #fff; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
-    main { display: grid; grid-template-rows: auto 1fr auto auto; width: min(900px, 100%); height: 100vh; margin: auto; }
-    .endpoint { padding: 12px 16px; color: #6b7280; background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-size: 13px; }
+    body {
+      margin: 0;
+      color: #111827;
+      background: #fff;
+      font: 15px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
+    }
+    main {
+      display: grid;
+      grid-template-rows: auto 1fr auto auto;
+      width: min(880px, 100%);
+      height: 100dvh;
+      margin: auto;
+    }
+    header { padding: 14px 16px; border-bottom: 1px solid #e5e7eb; }
+    h1 { margin: 0; font-size: 15px; font-weight: 600; }
+    header p { margin: 4px 0 0; color: #6b7280; font-size: 12px; }
+    header a { color: #4f46e5; }
     code { color: #374151; overflow-wrap: anywhere; }
-    #chat { padding: 24px 16px; overflow-y: auto; }
-    .message { max-width: 80%; margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
+    #chat { padding: 20px 16px; overflow-y: auto; }
+    .message {
+      max-width: 80%;
+      margin: 0 0 14px;
+      padding: 10px 14px;
+      border-radius: 12px;
+      line-height: 1.55;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+    }
     .assistant { background: #f3f4f6; }
-    .user { margin-left: auto; color: white; background: #4f46e5; }
+    .user { margin-left: auto; color: #fff; background: #4f46e5; }
     .error { color: #991b1b; background: #fee2e2; }
-    form { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 16px; border-top: 1px solid #e5e7eb; }
-    textarea, input { padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font: inherit; }
-    textarea { min-height: 84px; resize: vertical; }
-    .controls { display: flex; flex-direction: column; gap: 8px; }
-    label { color: #6b7280; font-size: 12px; }
-    input { display: block; width: 120px; margin-top: 4px; }
-    button { padding: 10px 18px; color: white; background: #4f46e5; border: 0; border-radius: 8px; font-weight: 600; cursor: pointer; }
+    .pending { color: #6b7280; font-style: italic; }
+    form {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 10px;
+      padding: 14px 16px;
+      border-top: 1px solid #e5e7eb;
+    }
+    textarea {
+      min-height: 60px;
+      padding: 10px 12px;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+      font: inherit;
+      resize: vertical;
+    }
+    button {
+      padding: 10px 20px;
+      color: #fff;
+      background: #4f46e5;
+      border: 0;
+      border-radius: 8px;
+      font: inherit;
+      font-weight: 600;
+      cursor: pointer;
+      align-self: end;
+    }
     button:disabled { opacity: 0.5; cursor: wait; }
-    textarea:focus, input:focus, button:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
-    #status { min-height: 34px; margin: 0; padding: 0 16px 12px; color: #6b7280; font-size: 12px; }
-    #status.loading::before {
+    textarea:focus, button:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
+    #status { min-height: 32px; margin: 0; padding: 0 16px 12px; color: #6b7280; font-size: 12px; }
+    #status.busy::before {
       content: "";
       display: inline-block;
-      width: 12px;
-      height: 12px;
+      width: 10px;
+      height: 10px;
       margin-right: 8px;
-      vertical-align: -2px;
+      vertical-align: -1px;
       border: 2px solid #d1d5db;
       border-top-color: #4f46e5;
       border-radius: 50%;
@@ -41,42 +83,46 @@
     @media (prefers-color-scheme: dark) {
       :root { color-scheme: dark; }
       body { color: #f3f4f6; background: #111827; }
-      .endpoint { color: #9ca3af; background: #0f172a; border-color: #374151; }
+      header, form { border-color: #374151; }
+      header p, #status, .pending { color: #9ca3af; }
       code { color: #d1d5db; }
       .assistant { background: #1f2937; }
       .error { color: #fecaca; background: #450a0a; }
-      form { border-color: #374151; }
-      textarea, input { color: #f3f4f6; background: #1f2937; border-color: #4b5563; }
-      label, #status { color: #9ca3af; }
-      textarea:focus, input:focus, button:focus-visible { outline-color: #818cf8; }
-      #status.loading::before { border-color: #4b5563; border-top-color: #818cf8; }
+      textarea { color: #f3f4f6; background: #1f2937; border-color: #4b5563; }
+      #status.busy::before { border-color: #4b5563; border-top-color: #818cf8; }
     }
-    @media (max-width: 600px) {
-      form { grid-template-columns: 1fr; }
-      .controls { flex-direction: row; align-items: end; justify-content: space-between; }
+    @media (max-width: 620px) {
       .message { max-width: 92%; }
+      form { grid-template-columns: 1fr; }
+      button { width: 100%; }
     }
   </style>
 </head>
 <body>
   <main>
-    <div class="endpoint">OpenAI-compatible endpoint: <code>https://qwen38-humanlike-api.qwen38-public-api.workers.dev/v1</code></div>
+    <header>
+      <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>
+    </header>
+
     <div id="chat" aria-live="polite">
-      <div class="message assistant">Ask anything. The first response can take longer while the inference worker starts.</div>
+      <div class="message assistant">Say something. The first reply can take a couple of minutes while the inference worker starts.</div>
     </div>
+
     <form id="form">
-      <textarea id="prompt" required aria-label="Message" placeholder="Type a message..."></textarea>
-      <div class="controls">
-        <label>Max output tokens<input id="max-tokens" type="number" min="1" max="20000" value="1024"></label>
-        <button id="send" type="submit">Send</button>
-      </div>
+      <textarea id="prompt" required aria-label="Message" placeholder="Type a message"></textarea>
+      <button id="send" type="submit">Send</button>
     </form>
+
     <p id="status" aria-live="polite"></p>
   </main>
 
   <script>
-    const API = "https://qwen38-humanlike-api.qwen38-public-api.workers.dev/v1";
-    const MODEL = "LessThanThreeAI/Qwen3.8-27B-Humanlike-Chat-Q8_0-GGUF";
+    const API = "https://api.lessthanthreeai.com/v1";
+    const MODEL = "qwen3.8-27b-humanlike-chat";
     const messages = [];
     const chat = document.querySelector("#chat");
     const form = document.querySelector("#form");
@@ -93,13 +139,28 @@
       return element;
     }
 
+    // Server-sent events arrive as "data: {...}" chunks. The endpoint may also send
+    // ": status={...}" comment lines while a cold worker starts.
     function applyEvent(line, output) {
+      if (line.startsWith(":")) {
+        const payload = line.slice(1).trim().replace(/^status=/, "");
+        try {
+          const state = JSON.parse(payload);
+          if (state.message) status.textContent = state.message;
+        } catch {}
+        return;
+      }
       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 = "";
+          status.textContent = "";
+        }
         output.textContent += content;
         chat.scrollTop = chat.scrollHeight;
       }
@@ -109,16 +170,17 @@
       event.preventDefault();
       const text = prompt.value.trim();
       if (!text) return;
+
       messages.push({ role: "user", content: text });
       addMessage("user", text);
       prompt.value = "";
       send.disabled = true;
-      status.classList.add("loading");
-      status.textContent = "Starting model. Cold starts can take a few minutes...";
-      const slowNotice = setTimeout(() => {
-        status.textContent = "Still waiting for the inference worker to become ready...";
-      }, 45_000);
+      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";
 
       try {
         const response = await fetch(`${API}/chat/completions`, {
@@ -127,20 +189,22 @@
           body: JSON.stringify({
             model: MODEL,
             messages,
-            max_tokens: Number(document.querySelector("#max-tokens").value),
             stream: true,
+            max_tokens: 512,
           }),
         });
+
         if (!response.ok) {
-          const errorBody = await response.text();
-          let message = errorBody;
-          try { message = JSON.parse(errorBody).error?.message || errorBody; } catch {}
+          const body = await response.text();
+          let message = body;
+          try { message = JSON.parse(body).error?.message || body; } catch {}
           throw new Error(message || `HTTP ${response.status}`);
         }
 
         const reader = response.body.getReader();
         const decoder = new TextDecoder();
         let buffer = "";
+
         while (true) {
           const { value, done } = await reader.read();
           buffer += decoder.decode(value || new Uint8Array(), { stream: !done });
@@ -150,15 +214,18 @@
           if (done) break;
         }
         if (buffer.trim()) applyEvent(buffer.trim(), output);
+
+        output.classList.remove("pending");
+        if (!output.textContent) output.textContent = "(empty response)";
         messages.push({ role: "assistant", content: output.textContent });
-        status.textContent = "Complete";
+        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}`;
         status.textContent = "The inference service did not complete the request.";
       } finally {
-        clearTimeout(slowNotice);
-        status.classList.remove("loading");
+        status.classList.remove("busy");
         send.disabled = false;
         prompt.focus();
       }