Spaces:

akhaliq
/

Kimi-K3

Running

akhaliq HF Staff Claude commited on 2 days ago

Commit

0322825

1 Parent(s): 078b2dd

Redesign UI as terminal-style chat

- Monospace font, prompt-prefixed lines, blinking cursor
- Single-column layout centered at 900px max
- Brand header with system info, minimal status bar
- Pills for mode/model, icon button for attach
- Streaming tokens with live re-render of assistant line

Co-Authored-By: Claude <noreply@anthropic.com>

Files changed (1) hide show

index.html +270 -236

index.html CHANGED Viewed

@@ -3,187 +3,248 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Kimi K3 Chat</title>
 <style>
   :root {
-    --bg: #0f1115;
-    --panel: #181b22;
-    --border: #2a2f3a;
-    --text: #e6e9ef;
-    --muted: #9aa3b2;
-    --accent: #6366f1;
-    --accent-2: #4f46e5;
-    --user: #1f2937;
-    --assistant: #111827;
-    --think: #facc15;
   }
   * { box-sizing: border-box; }
-  html, body { margin: 0; padding: 0; height: 100%; }
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
     background: var(--bg);
     color: var(--text);
-    display: flex;
-    height: 100vh;
   }
-  aside {
-    width: 280px;
-    background: var(--panel);
-    border-right: 1px solid var(--border);
     padding: 20px;
-    overflow-y: auto;
   }
-  aside h1 { font-size: 20px; margin: 0 0 8px; }
-  aside p { font-size: 13px; color: var(--muted); line-height: 1.5; }
-  main {
-    flex: 1;
     display: flex;
-    flex-direction: column;
-    max-width: calc(100% - 280px);
   }
-  #chat {
     flex: 1;
     overflow-y: auto;
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
   }
-  .msg {
-    max-width: 80%;
-    padding: 12px 16px;
-    border-radius: 14px;
-    line-height: 1.55;
     white-space: pre-wrap;
     word-wrap: break-word;
   }
-  .msg.user {
-    align-self: flex-end;
-    background: var(--user);
-    border: 1px solid var(--border);
-  }
-  .msg.assistant {
-    align-self: flex-start;
-    background: var(--assistant);
-    border: 1px solid var(--border);
-  }
-  .msg .think {
-    color: var(--think);
     font-style: italic;
     opacity: 0.85;
-    margin-bottom: 6px;
-    font-size: 13px;
-    border-left: 3px solid var(--think);
-    padding-left: 8px;
   }
-  .msg img.attached {
-    max-width: 220px;
-    border-radius: 8px;
-    margin-bottom: 8px;
     display: block;
   }
-  .role {
-    font-size: 11px;
     color: var(--muted);
-    margin-bottom: 4px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
   }
-  form {
     border-top: 1px solid var(--border);
-    padding: 14px 24px;
-    background: var(--panel);
     display: flex;
-    flex-direction: column;
-    gap: 10px;
   }
-  .previews { display: flex; gap: 8px; flex-wrap: wrap; }
-  .previews img {
-    width: 70px; height: 70px; object-fit: cover;
-    border-radius: 8px; border: 1px solid var(--border);
   }
-  .row { display: flex; gap: 8px; align-items: flex-end; }
-  textarea {
     flex: 1;
-    background: #0b0d12;
     color: var(--text);
-    border: 1px solid var(--border);
-    border-radius: 10px;
-    padding: 10px 12px;
     resize: none;
-    min-height: 44px;
     max-height: 200px;
     font-family: inherit;
-    font-size: 14px;
   }
-  textarea:focus { outline: none; border-color: var(--accent); }
-  button {
-    background: var(--accent-2);
-    color: white;
     border: none;
-    padding: 10px 18px;
-    border-radius: 10px;
     cursor: pointer;
-    font-weight: 600;
-    font-size: 14px;
   }
-  button:hover { background: var(--accent); }
-  button:disabled { opacity: 0.5; cursor: not-allowed; }
-  button.ghost {
-    background: transparent;
-    border: 1px solid var(--border);
-    color: var(--muted);
   }
-  .toolbar { display: flex; gap: 8px; align-items: center; }
-  .examples { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
-  .examples button {
-    background: transparent;
     border: 1px solid var(--border);
-    color: var(--muted);
-    padding: 6px 10px;
-    font-weight: 400;
   }
-  .examples button:hover { color: var(--text); border-color: var(--accent); }
 </style>
 </head>
 <body>
-  <aside>
-    <h1>🌙 Kimi K3</h1>
-    <p>
-      <strong>Kimi K3</strong> — Moonshot AI's open 3T-class multimodal agentic model
-      (2.8T params, 104B active MoE, 1M context).<br><br>
-      Served via <a href="https://huggingface.co/moonshotai/Kimi-K3" target="_blank" style="color:var(--accent)">HF Inference Providers</a>
-      (Together AI).<br><br>
-      🖼️ Attach images for multimodal chat.
-    </p>
-  </aside>
-  <main>
-    <div id="chat"></div>
-    <form id="form">
-      <div class="previews" id="previews"></div>
-      <div class="row">
-        <button type="button" id="attachBtn" class="ghost">📎 Attach image</button>
-        <input type="file" id="fileInput" accept="image/*" multiple style="display:none" />
-        <textarea id="input" placeholder="Message Kimi K3 — attach an image for multimodal chat…" rows="1"></textarea>
-        <button type="submit" id="sendBtn">Send</button>
       </div>
-      <div class="examples">
-        <button type="button" class="ex">Explain mixture-of-experts routing like I'm five.</button>
-        <button type="button" class="ex">Write a Python function that streams tokens from an SSE endpoint.</button>
-        <button type="button" class="ex">What are the tradeoffs of MXFP4 quantization for a 3T-param model?</button>
       </div>
-    </form>
-  </main>
 <script type="module">
-import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
-const chat = document.getElementById("chat");
-const form = document.getElementById("form");
 const input = document.getElementById("input");
-const sendBtn = document.getElementById("sendBtn");
-const fileInput = document.getElementById("fileInput");
-const attachBtn = document.getElementById("attachBtn");
 const previews = document.getElementById("previews");
 let history = [];
@@ -191,6 +252,44 @@ let attachedFiles = [];
 let client = null;
 attachBtn.onclick = () => fileInput.click();
 function splitThink(text) {
   const parts = [];
@@ -206,126 +305,66 @@ function splitThink(text) {
   return parts;
 }
-function renderMessage(role, content, attachments = []) {
-  const div = document.createElement("div");
-  div.className = "msg " + role;
-  const roleDiv = document.createElement("div");
-  roleDiv.className = "role";
-  roleDiv.textContent = role === "user" ? "You" : "Kimi K3";
-  div.appendChild(roleDiv);
-  for (const att of attachments) {
-    const img = document.createElement("img");
-    img.className = "attached";
-    img.src = att.url;
-    div.appendChild(img);
-  }
-  if (typeof content === "string") {
-    const parts = splitThink(content);
-    for (const p of parts) {
-      if (p.kind === "think") {
-        const t = document.createElement("div");
-        t.className = "think";
-        t.textContent = "💭 " + p.value.trim();
-        div.appendChild(t);
-      } else if (p.value) {
-        const t = document.createElement("div");
-        t.textContent = p.value;
-        div.appendChild(t);
-      }
     }
   }
-  chat.appendChild(div);
-  chat.scrollTop = chat.scrollHeight;
-  return div;
 }
-attachBtn.onclick = () => fileInput.click();
-fileInput.onchange = (e) => {
-  for (const f of e.target.files) {
-    attachedFiles.push(f);
-    const img = document.createElement("img");
-    img.src = URL.createObjectURL(f);
-    previews.appendChild(img);
-  }
-  fileInput.value = "";
-};
-input.oninput = () => {
-  input.style.height = "auto";
-  input.style.height = Math.min(input.scrollHeight, 200) + "px";
-};
-input.onkeydown = (e) => {
-  if (e.key === "Enter" && !e.shiftKey) {
-    e.preventDefault();
-    form.requestSubmit();
-  }
-};
-document.querySelectorAll(".ex").forEach(b => {
-  b.onclick = () => {
-    input.value = b.textContent;
-    input.focus();
-  };
-});
-async function send(text) {
-  if (!text.trim() && attachedFiles.length === 0) return;
-  // Show user message
   const attachments = attachedFiles.map(f => ({ url: URL.createObjectURL(f) }));
-  renderMessage("user", text, attachments);
   history.push({ role: "user", content: text });
-  // Show assistant placeholder
-  const assistantEl = renderMessage("assistant", "▌");
   sendBtn.disabled = true;
-  sendBtn.textContent = "...";
   try {
     if (!client) client = await Client.connect(window.location.origin);
     const gradioMsg = {
       text: text,
-      files: attachedFiles.map(f => f),
     };
     let fullText = "";
-    // Stream via SSE — accumulate partial chunks as they arrive
     const stream = client.stream("/chat", {
       message: gradioMsg,
       history: history.slice(0, -1),
     });
-    // Subscribe to partial updates and re-render assistant message
-    let renderQueued = false;
     stream.on("data", (chunk) => {
-      // Gradio Server streaming emits cumulative outputs as data arrives
       const data = chunk?.data?.[0];
-      const text = typeof data === "object" ? (data?.content || "") : (data || "");
-      if (text) {
-        fullText = text;
         if (!renderQueued) {
           renderQueued = true;
           requestAnimationFrame(() => {
             renderQueued = false;
-            // Re-render assistant message
-            assistantEl.querySelectorAll("div:not(.role)").forEach(n => n.remove());
-            const parts = splitThink(fullText);
-            for (const p of parts) {
-              if (p.kind === "think") {
-                const t = document.createElement("div");
-                t.className = "think";
-                t.textContent = "💭 " + p.value.trim();
-                assistantEl.appendChild(t);
-              } else if (p.value) {
-                const t = document.createElement("div");
-                t.textContent = p.value;
-                assistantEl.appendChild(t);
-              }
-            }
-            chat.scrollTop = chat.scrollHeight;
           });
         }
       }
@@ -339,29 +378,24 @@ async function send(text) {
     history.push({ role: "assistant", content: fullText });
   } catch (err) {
     console.error(err);
-    assistantEl.querySelectorAll("div:not(.role)").forEach(n => n.remove());
-    const t = document.createElement("div");
-    t.textContent = "Error: " + (err.message || String(err));
-    t.style.color = "#ef4444";
-    assistantEl.appendChild(t);
   }
-  // Reset
   attachedFiles = [];
   previews.innerHTML = "";
   input.value = "";
   input.style.height = "auto";
   sendBtn.disabled = false;
-  sendBtn.textContent = "Send";
 }
-form.onsubmit = (e) => {
-  e.preventDefault();
-  const text = input.value.trim();
-  const files = [...attachedFiles];
-  input.value = "";
-  send(text);
-};
 </script>
 </body>
 </html>

 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Kimi K3 — Terminal</title>
 <style>
   :root {
+    --bg: #0a0a0a;
+    --panel: #0d0d0d;
+    --border: #2a2a2a;
+    --text: #e5e5e5;
+    --muted: #6e6e6e;
+    --accent: #00ff88;
+    --accent-dim: #00cc6a;
+    --user: #1a1a1a;
+    --assistant: #0d0d0d;
+    --prompt: #00ff88;
+    --error: #ff5555;
   }
   * { box-sizing: border-box; }
+  html, body {
+    margin: 0; padding: 0; height: 100%;
     background: var(--bg);
     color: var(--text);
+    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', 'Consolas', monospace;
+    font-size: 14px;
+    line-height: 1.6;
   }
+  #terminal {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    max-width: 900px;
+    margin: 0 auto;
     padding: 20px;
   }
+  #header {
     display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 0 16px;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 16px;
+  }
+  #header .brand {
+    color: var(--accent);
+    font-weight: bold;
+    letter-spacing: 2px;
+  }
+  #header .meta {
+    color: var(--muted);
+    font-size: 12px;
   }
+  #output {
     flex: 1;
     overflow-y: auto;
+    padding: 8px 0;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
   }
+  #output::-webkit-scrollbar { width: 6px; }
+  #output::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  .line {
+    margin: 8px 0;
     white-space: pre-wrap;
     word-wrap: break-word;
   }
+  .line.user .prompt { color: var(--prompt); }
+  .line.user .cmd { color: var(--text); }
+  .line.user .content { color: var(--text); margin-left: 8px; }
+  .line.assistant .label { color: var(--accent); }
+  .line.assistant .text { color: var(--text); }
+  .line.assistant .think {
+    color: var(--muted);
     font-style: italic;
+    border-left: 2px solid var(--border);
+    padding-left: 12px;
+    margin: 8px 0;
     opacity: 0.85;
   }
+  .line.assistant .think::before {
+    content: "↳ thinking: ";
+    color: var(--accent-dim);
+    font-style: normal;
+  }
+  .line img.attached {
+    max-width: 300px;
+    border: 1px solid var(--border);
+    margin: 8px 0;
     display: block;
   }
+  .line.system {
     color: var(--muted);
+    font-size: 12px;
   }
+  .cursor {
+    display: inline-block;
+    width: 8px;
+    height: 16px;
+    background: var(--accent);
+    animation: blink 1s step-end infinite;
+    vertical-align: middle;
+    margin-left: 2px;
+  }
+  @keyframes blink { 50% { opacity: 0; } }
+  #input-area {
     border-top: 1px solid var(--border);
+    padding-top: 16px;
+    margin-top: 16px;
+  }
+  #prompt-line {
     display: flex;
+    align-items: flex-start;
+    gap: 8px;
   }
+  #prompt-line .prompt {
+    color: var(--prompt);
+    user-select: none;
+    font-weight: bold;
   }
+  #prompt-line textarea {
     flex: 1;
+    background: transparent;
     color: var(--text);
+    border: none;
+    outline: none;
+    font-family: inherit;
+    font-size: 14px;
     resize: none;
+    min-height: 24px;
     max-height: 200px;
+    padding: 0;
+    caret-color: var(--accent);
+  }
+  #prompt-line textarea::placeholder { color: var(--muted); }
+  #status-line {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 12px;
+    font-size: 12px;
+    color: var(--muted);
+  }
+  #status-line .left, #status-line .right { display: flex; gap: 12px; align-items: center; }
+  .pill {
+    border: 1px solid var(--border);
+    padding: 4px 10px;
+    border-radius: 999px;
+    cursor: pointer;
+    transition: all 0.15s;
+    background: transparent;
+    color: var(--muted);
     font-family: inherit;
+    font-size: 12px;
   }
+  .pill:hover { border-color: var(--accent); color: var(--text); }
+  .pill.active { border-color: var(--accent); color: var(--accent); }
+  .pill.icon { display: inline-flex; align-items: center; gap: 4px; }
+  .pill svg { width: 12px; height: 12px; }
+  #send-btn {
+    background: var(--accent);
+    color: #000;
     border: none;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: inherit;
+    font-weight: bold;
   }
+  #send-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+  #send-btn:hover:not(:disabled) { background: var(--accent-dim); }
+  #previews {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-bottom: 8px;
   }
+  #previews img {
+    width: 60px; height: 60px;
+    object-fit: cover;
     border: 1px solid var(--border);
+    border-radius: 4px;
+  }
+  .blink-dot {
+    display: inline-block;
+    width: 6px; height: 6px;
+    border-radius: 50%;
+    background: var(--accent);
+    animation: blink 1s step-end infinite;
+    margin-right: 6px;
   }
 </style>
 </head>
 <body>
+  <div id="terminal">
+    <div id="header">
+      <div>
+        <span class="brand">▶ KIMI·K3</span>
+        <span class="meta">— terminal.chat</span>
       </div>
+      <div class="meta">moonshotai/Kimi-K3 · via HF Inference Providers</div>
+    </div>
+    <div id="output">
+      <div class="line system">
+        <span class="blink-dot"></span>connected · type a message and press enter
+      </div>
+      <div class="line system">
+        ⓘ multimodal — attach images via the <span style="color:var(--accent)">[+]</span> button
       </div>
+    </div>
+    <div id="input-area">
+      <div id="previews"></div>
+      <div id="prompt-line">
+        <span class="prompt">›</span>
+        <textarea id="input" rows="1" placeholder="ask anything, or task an agent..." autofocus></textarea>
+        <button id="send-btn" title="send">↑</button>
+      </div>
+      <div id="status-line">
+        <div class="left">
+          <button class="pill icon" id="attach-btn" title="attach image">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+            attach
+          </button>
+          <input type="file" id="file-input" accept="image/*" multiple style="display:none" />
+        </div>
+        <div class="right">
+          <span class="pill active">K3 · HIGH</span>
+        </div>
+      </div>
+    </div>
+  </div>
 <script type="module">
+import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+const output = document.getElementById("output");
 const input = document.getElementById("input");
+const sendBtn = document.getElementById("send-btn");
+const attachBtn = document.getElementById("attach-btn");
+const fileInput = document.getElementById("file-input");
 const previews = document.getElementById("previews");
 let history = [];
 let client = null;
 attachBtn.onclick = () => fileInput.click();
+fileInput.onchange = (e) => {
+  for (const f of e.target.files) {
+    attachedFiles.push(f);
+    const img = document.createElement("img");
+    img.src = URL.createObjectURL(f);
+    previews.appendChild(img);
+  }
+  fileInput.value = "";
+};
+input.addEventListener("input", () => {
+  input.style.height = "auto";
+  input.style.height = Math.min(input.scrollHeight, 200) + "px";
+});
+input.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" && !e.shiftKey) {
+    e.preventDefault();
+    submit();
+  }
+});
+sendBtn.onclick = submit;
+function scrollDown() { output.scrollTop = output.scrollHeight; }
+function appendLine(html) {
+  const div = document.createElement("div");
+  div.className = "line";
+  div.innerHTML = html;
+  output.appendChild(div);
+  scrollDown();
+  return div;
+}
+function escape(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
 function splitThink(text) {
   const parts = [];
   return parts;
 }
+function renderAssistant(el, content) {
+  const parts = splitThink(content || "");
+  let html = `<span class="label">› kimi:</span> `;
+  for (const p of parts) {
+    if (p.kind === "think") {
+      html += `<div class="think">${escape(p.value.trim())}</div>`;
+    } else if (p.value) {
+      html += `<span class="text">${escape(p.value)}</span>`;
     }
   }
+  html += `<span class="cursor"></span>`;
+  el.innerHTML = html;
 }
+async function submit() {
+  const text = input.value.trim();
+  if (!text && attachedFiles.length === 0) return;
   const attachments = attachedFiles.map(f => ({ url: URL.createObjectURL(f) }));
+  const userLine = appendLine("");
+  let userHtml = `<span class="prompt">› you:</span> `;
+  for (const a of attachments) {
+    userHtml += `<img class="attached" src="${a.url}" />`;
+  }
+  userHtml += `<span class="cmd">${escape(text)}</span>`;
+  userLine.innerHTML = userHtml;
   history.push({ role: "user", content: text });
+  const assistantLine = appendLine(`<span class="label">› kimi:</span> <span class="cursor"></span>`);
   sendBtn.disabled = true;
+  const originalSend = sendBtn.innerHTML;
+  sendBtn.innerHTML = "...";
   try {
     if (!client) client = await Client.connect(window.location.origin);
     const gradioMsg = {
       text: text,
+      files: attachedFiles,
     };
     let fullText = "";
+    let renderQueued = false;
     const stream = client.stream("/chat", {
       message: gradioMsg,
       history: history.slice(0, -1),
     });
     stream.on("data", (chunk) => {
       const data = chunk?.data?.[0];
+      const txt = typeof data === "object" ? (data?.content || "") : (data || "");
+      if (txt) {
+        fullText = txt;
         if (!renderQueued) {
           renderQueued = true;
           requestAnimationFrame(() => {
             renderQueued = false;
+            renderAssistant(assistantLine, fullText);
           });
         }
       }
     history.push({ role: "assistant", content: fullText });
   } catch (err) {
     console.error(err);
+    assistantLine.innerHTML = `<span class="label">› kimi:</span> <span style="color:var(--error)">error: ${escape(err.message || String(err))}</span>`;
   }
   attachedFiles = [];
   previews.innerHTML = "";
   input.value = "";
   input.style.height = "auto";
   sendBtn.disabled = false;
+  sendBtn.innerHTML = originalSend;
+  input.focus();
 }
+window.addEventListener("keydown", (e) => {
+  if (e.key === "/" && document.activeElement !== input) {
+    e.preventDefault();
+    input.focus();
+  }
+});
 </script>
 </body>
 </html>