Restore free minimal Space UI

README.md

@@ -2,8 +2,8 @@
 title: Qwen3.8 27B Humanlike Chat
 colorFrom: indigo
 colorTo: pink
-sdk: gradio
-app_file: app.py
+sdk: static
+app_file: index.html
 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
 
-Gradio chat client for the public OpenAI-compatible inference endpoint.
+Chat client for the public OpenAI-compatible inference endpoint.

app.py

@@ -1,55 +0,0 @@
-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

@@ -0,0 +1,131 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <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; }
+    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; }
+    .assistant { background: #f3f4f6; }
+    .user { margin-left: auto; color: white; 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; }
+    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; }
+    @media (max-width: 600px) {
+      form { grid-template-columns: 1fr; }
+      .controls { flex-direction: row; align-items: end; justify-content: space-between; }
+      .message { max-width: 92%; }
+    }
+  </style>
+</head>
+<body>
+  <main>
+    <div class="endpoint">OpenAI-compatible endpoint: <code>https://qwen38-humanlike-api.qwen38-public-api.workers.dev/v1</code></div>
+    <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>
+    <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>
+    </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 messages = [];
+    const chat = document.querySelector("#chat");
+    const form = document.querySelector("#form");
+    const prompt = document.querySelector("#prompt");
+    const send = document.querySelector("#send");
+    const status = document.querySelector("#status");
+
+    function addMessage(role, text) {
+      const element = document.createElement("div");
+      element.className = `message ${role}`;
+      element.textContent = text;
+      chat.append(element);
+      chat.scrollTop = chat.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;
+        chat.scrollTop = chat.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}`);
+
+        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();
+      }
+    });
+  </script>
+</body>
+</html>