Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Humanlike Chat</title> | |
| <style> | |
| * { box-sizing: border-box; } | |
| 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; } | |
| 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; | |
| padding: 8px 10px; | |
| border: 1px solid #d1d5db; | |
| border-radius: 8px; | |
| font: inherit; | |
| 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%; | |
| 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: #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; | |
| 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, button:focus-visible, select:focus-visible, summary: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: 10px; | |
| height: 10px; | |
| margin-right: 8px; | |
| vertical-align: -1px; | |
| border: 2px solid #d1d5db; | |
| border-top-color: #4f46e5; | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| @media (prefers-color-scheme: dark) { | |
| :root { color-scheme: dark; } | |
| body { color: #f3f4f6; background: #111827; } | |
| header, form { border-color: #374151; } | |
| header p, #status, .pending, summary, .field label, .reasoning { color: #9ca3af; } | |
| summary:hover { color: #818cf8; } | |
| code { color: #d1d5db; } | |
| #system, textarea, #reasoning { color: #f3f4f6; background: #1f2937; border-color: #4b5563; } | |
| .assistant { background: #1f2937; } | |
| .error { color: #fecaca; background: #450a0a; } | |
| .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; } | |
| button { width: 100%; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main> | |
| <header> | |
| <h1>Humanlike Chat</h1> | |
| <p> | |
| Live demo of the hosted endpoint <code>https://api.lessthanthreeai.com/v1</code>. | |
| </p> | |
| <details> | |
| <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">Thinking</label> | |
| <select id="reasoning"> | |
| <option value="off">Off (fastest, the default)</option> | |
| <option value="low">Low</option> | |
| <option value="medium">Medium</option> | |
| <option value="high">High</option> | |
| </select> | |
| </div> | |
| </details> | |
| </header> | |
| <div id="chat" aria-live="polite"></div> | |
| <form id="form"> | |
| <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://api.lessthanthreeai.com/v1"; | |
| const MODEL = "gemma-4-31b-humanlike-chat"; | |
| const INTRO = "Say something. The first reply can take a few minutes while the inference worker starts."; | |
| const MAX_TOKENS = { off: 512, low: 4096, medium: 4096, high: 8192 }; | |
| 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"); | |
| const system = document.querySelector("#system"); | |
| const reasoning = document.querySelector("#reasoning"); | |
| // One conversation per page load. Reloading starts a fresh session. | |
| const messages = []; | |
| system.value = localStorage.getItem("systemPrompt") || ""; | |
| reasoning.value = localStorage.getItem("thinkingLevel") in MAX_TOKENS ? localStorage.getItem("thinkingLevel") : "off"; | |
| system.addEventListener("input", () => localStorage.setItem("systemPrompt", system.value)); | |
| reasoning.addEventListener("change", () => localStorage.setItem("thinkingLevel", reasoning.value)); | |
| 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 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, target) { | |
| 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 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 = ""; | |
| } | |
| target.content.textContent += delta.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.classList.add("busy"); | |
| status.textContent = "Starting the model. A cold start can take a few minutes."; | |
| 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", | |
| headers: { "content-type": "application/json" }, | |
| body: JSON.stringify({ | |
| model: MODEL, | |
| messages: request, | |
| stream: true, | |
| max_tokens: MAX_TOKENS[effort], | |
| chat_template_kwargs: chatTemplateKwargs, | |
| }), | |
| }); | |
| if (!response.ok) { | |
| 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 }); | |
| const lines = buffer.split("\n"); | |
| buffer = lines.pop() || ""; | |
| for (const line of lines) applyEvent(line.trim(), target); | |
| if (done) break; | |
| } | |
| if (buffer.trim()) applyEvent(buffer.trim(), target); | |
| 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) { | |
| 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"); | |
| send.disabled = false; | |
| prompt.focus(); | |
| } | |
| }); | |
| addMessage("assistant", INTRO); | |
| prompt.focus(); | |
| </script> | |
| </body> | |
| </html> | |