Add public chat client

README.md

@@ -1,10 +1,15 @@
 ---
 title: Qwen3.8 27B Humanlike Chat
-emoji: 📊
-colorFrom: blue
+colorFrom: indigo
 colorTo: pink
 sdk: static
-pinned: false
+app_file: index.html
+fullWidth: true
+short_description: Chat with the Q8_0 Humanlike model through its public API.
+models:
+  - LessThanThreeAI/Qwen3.8-27B-Humanlike-Chat-Q8_0-GGUF
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Qwen3.8 27B Humanlike Chat
+
+Static chat client for the public OpenAI-compatible inference endpoint. Prompts and model responses are retained privately for evaluation.

index.html

@@ -1,19 +1,361 @@
 <!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">
+  <meta name="description" content="Chat with Qwen3.8 27B Humanlike through its public OpenAI-compatible API.">
+  <title>Qwen3.8 27B Humanlike Chat</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --paper: #f4efe4;
+      --ink: #18231e;
+      --muted: #657068;
+      --line: #c9c2b3;
+      --accent: #d9513d;
+      --accent-dark: #a63225;
+      --panel: rgba(255, 253, 247, 0.78);
+      --user: #18231e;
+      --assistant: #fffdf7;
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      color: var(--ink);
+      background:
+        radial-gradient(circle at 9% 12%, rgba(217, 81, 61, 0.13), transparent 28rem),
+        linear-gradient(120deg, transparent 0 49.7%, rgba(24, 35, 30, 0.045) 50%, transparent 50.3%),
+        var(--paper);
+      font-family: Georgia, "Times New Roman", serif;
+    }
+
+    button, input, textarea { font: inherit; }
+
+    .shell {
+      width: min(1180px, calc(100% - 32px));
+      margin: 0 auto;
+      padding: 32px 0;
+    }
+
+    header {
+      display: flex;
+      align-items: end;
+      justify-content: space-between;
+      gap: 24px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid var(--ink);
+    }
+
+    .eyebrow, label, .label, code, pre, .status {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    }
+
+    .eyebrow {
+      margin: 0 0 8px;
+      color: var(--accent-dark);
+      font-size: 0.72rem;
+      font-weight: 700;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    h1 {
+      max-width: 760px;
+      margin: 0;
+      font-size: clamp(2.2rem, 6vw, 5.4rem);
+      font-weight: 400;
+      line-height: 0.92;
+      letter-spacing: -0.045em;
+    }
+
+    .model-link {
+      color: var(--ink);
+      text-decoration-thickness: 1px;
+      text-underline-offset: 4px;
+      white-space: nowrap;
+    }
+
+    main {
+      display: grid;
+      grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
+      gap: 24px;
+      padding-top: 24px;
+    }
+
+    .chat, aside section {
+      border: 1px solid var(--line);
+      background: var(--panel);
+      box-shadow: 6px 6px 0 rgba(24, 35, 30, 0.08);
+    }
+
+    .transcript {
+      height: min(58vh, 600px);
+      min-height: 360px;
+      overflow-y: auto;
+      padding: 22px;
+    }
+
+    .message {
+      width: fit-content;
+      max-width: 88%;
+      margin: 0 0 16px;
+      padding: 14px 16px;
+      border: 1px solid var(--line);
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+      line-height: 1.5;
+    }
+
+    .message.user {
+      margin-left: auto;
+      color: var(--paper);
+      background: var(--user);
+      border-color: var(--user);
+    }
+
+    .message.assistant { background: var(--assistant); }
+    .message.error { color: #8c241a; border-color: #c77a70; }
+
+    form {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 12px;
+      padding: 16px;
+      border-top: 1px solid var(--line);
+    }
+
+    textarea {
+      width: 100%;
+      min-height: 94px;
+      resize: vertical;
+      padding: 12px;
+      color: var(--ink);
+      background: #fffdf7;
+      border: 1px solid var(--line);
+      border-radius: 0;
+    }
+
+    textarea:focus, input:focus, button:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+
+    .controls {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      gap: 10px;
+    }
+
+    input[type="number"] {
+      width: 112px;
+      padding: 8px;
+      color: var(--ink);
+      background: #fffdf7;
+      border: 1px solid var(--line);
+    }
+
+    button {
+      padding: 11px 16px;
+      color: white;
+      background: var(--accent);
+      border: 1px solid var(--accent-dark);
+      cursor: pointer;
+    }
+
+    button:hover { background: var(--accent-dark); }
+    button:disabled { cursor: wait; opacity: 0.6; }
+
+    aside {
+      display: flex;
+      flex-direction: column;
+      gap: 18px;
+    }
+
+    aside section { padding: 18px; }
+    aside h2 { margin: 0 0 12px; font-size: 1.1rem; }
+    aside p { margin: 0; color: var(--muted); line-height: 1.5; }
+
+    .endpoint {
+      display: block;
+      margin: 10px 0;
+      padding: 10px;
+      overflow-x: auto;
+      color: var(--ink);
+      background: #e9e2d5;
+      border: 1px solid var(--line);
+      font-size: 0.78rem;
+    }
+
+    pre {
+      margin: 10px 0 0;
+      padding: 12px;
+      overflow-x: auto;
+      color: #eaf0eb;
+      background: #18231e;
+      font-size: 0.7rem;
+      line-height: 1.45;
+      white-space: pre-wrap;
+    }
+
+    .notice { border-left: 5px solid var(--accent); }
+    .status { min-height: 1.2em; margin: 0; padding: 0 16px 14px; color: var(--muted); font-size: 0.75rem; }
+
+    @media (max-width: 780px) {
+      .shell { width: min(100% - 20px, 680px); padding: 20px 0; }
+      header { align-items: start; flex-direction: column; }
+      h1 { font-size: clamp(2.4rem, 15vw, 4.4rem); }
+      main { grid-template-columns: 1fr; }
+      .transcript { height: 52vh; min-height: 320px; }
+      form { grid-template-columns: 1fr; }
+      .controls { flex-direction: row; align-items: end; }
+      .message { max-width: 94%; }
+    }
+  </style>
+</head>
+<body>
+  <div class="shell">
+    <header>
+      <div>
+        <p class="eyebrow">Public research preview</p>
+        <h1>Qwen3.8 27B Humanlike Chat</h1>
+      </div>
+      <a class="model-link" href="https://huggingface.co/LessThanThreeAI/Qwen3.8-27B-Humanlike-Chat-Q8_0-GGUF">View model files</a>
+    </header>
+
+    <main>
+      <section class="chat" aria-label="Chat interface">
+        <div id="transcript" class="transcript" aria-live="polite">
+          <div class="message assistant">Ask anything. The first response can take longer while the inference worker starts.</div>
+        </div>
+        <form id="chat-form">
+          <label>
+            Message
+            <textarea id="prompt" required placeholder="Write a message..." aria-label="Message"></textarea>
+          </label>
+          <div class="controls">
+            <label>
+              Max tokens
+              <input id="max-tokens" type="number" min="1" max="20000" value="1024">
+            </label>
+            <button id="send" type="submit">Send</button>
+          </div>
+        </form>
+        <p id="status" class="status" aria-live="polite"></p>
+      </section>
+
+      <aside>
+        <section class="notice">
+          <h2>Retention notice</h2>
+          <p>Prompts and model responses are retained privately for evaluation. Authorization headers and IP addresses are not stored in conversation records.</p>
+        </section>
+
+        <section>
+          <p class="label">OPENAI-COMPATIBLE ENDPOINT</p>
+          <code class="endpoint">https://qwen38-humanlike-api.qwen38-public-api.workers.dev/v1</code>
+          <button id="copy-endpoint" type="button">Copy endpoint</button>
+          <pre>curl https://qwen38-humanlike-api.qwen38-public-api.workers.dev/v1/chat/completions \
+  -H 'Content-Type: application/json' \
+  -d '{"model":"LessThanThreeAI/Qwen3.8-27B-Humanlike-Chat-Q8_0-GGUF","messages":[{"role":"user","content":"Hello"}],"max_tokens":1024,"stream":true}'</pre>
+        </section>
+      </aside>
+    </main>
+  </div>
+
+  <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 messages = [];
+    const form = document.querySelector("#chat-form");
+    const prompt = document.querySelector("#prompt");
+    const send = document.querySelector("#send");
+    const status = document.querySelector("#status");
+    const transcript = document.querySelector("#transcript");
+
+    function addMessage(role, text, extraClass = "") {
+      const element = document.createElement("div");
+      element.className = `message ${role} ${extraClass}`;
+      element.textContent = text;
+      transcript.append(element);
+      transcript.scrollTop = transcript.scrollHeight;
+      return element;
+    }
+
+    function applyEvent(line, output) {
+      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) {
+        output.textContent += content;
+        transcript.scrollTop = transcript.scrollHeight;
+      }
+    }
+
+    form.addEventListener("submit", async (event) => {
+      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.textContent = "Waiting for model...";
+      const output = addMessage("assistant", "");
+
+      try {
+        const response = await fetch(`${API}/chat/completions`, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({
+            model: MODEL,
+            messages,
+            max_tokens: Number(document.querySelector("#max-tokens").value),
+            stream: true,
+          }),
+        });
+        if (!response.ok) throw new Error((await response.text()) || `HTTP ${response.status}`);
+
+        if (!response.headers.get("content-type")?.includes("text/event-stream")) {
+          const result = await response.json();
+          output.textContent = result.choices?.[0]?.message?.content || "No response content.";
+        } else {
+          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 });
+            const lines = buffer.split("\n");
+            buffer = lines.pop() || "";
+            for (const line of lines) applyEvent(line.trim(), output);
+            if (done) break;
+          }
+          if (buffer.trim()) applyEvent(buffer.trim(), output);
+        }
+
+        messages.push({ role: "assistant", content: output.textContent });
+        status.textContent = "Complete";
+      } catch (error) {
+        output.classList.add("error");
+        output.textContent = `Request failed: ${error.message}`;
+        status.textContent = "The inference service did not complete the request.";
+      } finally {
+        send.disabled = false;
+        prompt.focus();
+      }
+    });
+
+    document.querySelector("#copy-endpoint").addEventListener("click", async (event) => {
+      await navigator.clipboard.writeText(API);
+      event.currentTarget.textContent = "Copied";
+      setTimeout(() => { event.currentTarget.textContent = "Copy endpoint"; }, 1500);
+    });
+  </script>
+</body>
 </html>