Use standard Gradio chat UI

README.md

@@ -2,8 +2,8 @@
 title: Qwen3.8 27B Humanlike Chat
 colorFrom: indigo
 colorTo: pink
-sdk: static
-app_file: index.html
+sdk: gradio
+app_file: app.py
 fullWidth: true
 short_description: Chat with the Q8_0 Humanlike model through its public API.
 models:
@@ -12,4 +12,4 @@ models:
 
 # Qwen3.8 27B Humanlike Chat
 
-Static chat client for the public OpenAI-compatible inference endpoint. Prompts and model responses are retained privately for evaluation.
+Gradio chat client for the public OpenAI-compatible inference endpoint.

app.py

@@ -0,0 +1,55 @@
+import json
+from urllib.error import HTTPError, URLError
+from urllib.request import Request, urlopen
+
+import gradio as gr
+
+
+API_BASE = "https://qwen38-humanlike-api.qwen38-public-api.workers.dev/v1"
+MODEL = "LessThanThreeAI/Qwen3.8-27B-Humanlike-Chat-Q8_0-GGUF"
+
+
+def chat(message, history, max_tokens):
+    request = Request(
+        f"{API_BASE}/chat/completions",
+        data=json.dumps(
+            {
+                "model": MODEL,
+                "messages": [*history, {"role": "user", "content": message}],
+                "max_tokens": int(max_tokens),
+                "stream": True,
+            }
+        ).encode(),
+        headers={"Content-Type": "application/json"},
+        method="POST",
+    )
+
+    answer = ""
+    try:
+        with urlopen(request, timeout=900) as response:
+            for raw_line in response:
+                line = raw_line.decode().strip()
+                if not line.startswith("data:"):
+                    continue
+                payload = line[5:].strip()
+                if not payload or payload == "[DONE]":
+                    continue
+                event = json.loads(payload)
+                content = event.get("choices", [{}])[0].get("delta", {}).get("content", "")
+                if content:
+                    answer += content
+                    yield answer
+    except HTTPError as error:
+        raise gr.Error(error.read().decode() or f"Inference request failed: HTTP {error.code}") from error
+    except URLError as error:
+        raise gr.Error(f"Inference endpoint unavailable: {error.reason}") from error
+
+
+with gr.Blocks(fill_height=True) as demo:
+    gr.Markdown(f"OpenAI-compatible endpoint: `{API_BASE}`")
+    max_tokens = gr.Slider(1, 20_000, value=1_024, step=1, label="Max output tokens")
+    gr.ChatInterface(chat, type="messages", additional_inputs=[max_tokens])
+
+
+if __name__ == "__main__":
+    demo.launch()

index.html

@@ -1,361 +0,0 @@
-<!doctype html>
-<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>