Initial ForgeLM import

ui/index.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>LocalLLM — Dev UI</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui, sans-serif; background: #0f0f0f; color: #e0e0e0; height: 100dvh; display: flex; flex-direction: column; }
+    header { padding: 12px 20px; background: #1a1a1a; border-bottom: 1px solid #2a2a2a; display: flex; align-items: center; gap: 16px; }
+    header h1 { font-size: 1rem; font-weight: 600; }
+    #status { font-size: 0.75rem; color: #888; }
+    #tps-badge { font-size: 0.75rem; background: #222; padding: 2px 8px; border-radius: 4px; }
+    #profile-select { background: #222; color: #e0e0e0; border: 1px solid #333; border-radius: 4px; padding: 2px 8px; font-size: 0.8rem; margin-left: auto; }
+    #chat { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
+    .msg { max-width: 720px; padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; line-height: 1.6; white-space: pre-wrap; }
+    .msg.user { align-self: flex-end; background: #1e3a5f; }
+    .msg.assistant { align-self: flex-start; background: #1e1e1e; border: 1px solid #2a2a2a; }
+    #input-row { display: flex; gap: 8px; padding: 12px 20px; background: #1a1a1a; border-top: 1px solid #2a2a2a; }
+    #prompt { flex: 1; background: #222; color: #e0e0e0; border: 1px solid #333; border-radius: 6px; padding: 10px 14px; font-size: 0.9rem; resize: none; height: 52px; }
+    #send-btn { background: #2563eb; color: #fff; border: none; border-radius: 6px; padding: 0 20px; cursor: pointer; font-size: 0.9rem; }
+    #send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    #stream-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
+    label { cursor: pointer; }
+  </style>
+</head>
+<body>
+<header>
+  <h1>LocalLLM</h1>
+  <span id="status">connecting…</span>
+  <span id="tps-badge">— tok/s</span>
+  <label id="stream-toggle">
+    <input type="checkbox" id="stream-cb" checked /> stream
+  </label>
+  <select id="profile-select">
+    <option value="turbo_4b">turbo · 4B</option>
+    <option value="balanced_9b">balanced · 9B</option>
+    <option value="cpu_fallback">cpu fallback</option>
+  </select>
+</header>
+
+<div id="chat"></div>
+
+<div id="input-row">
+  <textarea id="prompt" placeholder="Type a message…"></textarea>
+  <button id="send-btn">Send</button>
+</div>
+
+<script>
+const BASE = "";  // same origin
+const chat = document.getElementById("chat");
+const promptEl = document.getElementById("prompt");
+const sendBtn = document.getElementById("send-btn");
+const streamCb = document.getElementById("stream-cb");
+const tpsBadge = document.getElementById("tps-badge");
+const statusEl = document.getElementById("status");
+
+const messages = [];
+
+async function checkHealth() {
+  try {
+    const r = await fetch(`${BASE}/health`);
+    const d = await r.json();
+    statusEl.textContent = d.status === "ok" ? "● online" : "⚠ " + d.status;
+    statusEl.style.color = d.status === "ok" ? "#4ade80" : "#facc15";
+  } catch {
+    statusEl.textContent = "✕ offline";
+    statusEl.style.color = "#f87171";
+  }
+}
+
+function appendMsg(role, content) {
+  const div = document.createElement("div");
+  div.className = `msg ${role}`;
+  div.textContent = content;
+  chat.appendChild(div);
+  chat.scrollTop = chat.scrollHeight;
+  return div;
+}
+
+async function send() {
+  const text = promptEl.value.trim();
+  if (!text) return;
+  promptEl.value = "";
+  sendBtn.disabled = true;
+
+  messages.push({ role: "user", content: text });
+  appendMsg("user", text);
+
+  const assistantDiv = appendMsg("assistant", "");
+  const stream = streamCb.checked;
+  const t0 = Date.now();
+  let tokenCount = 0;
+
+  try {
+    const resp = await fetch(`${BASE}/v1/chat/completions`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        model: document.getElementById("profile-select").value,
+        messages,
+        stream,
+        max_tokens: 512,
+        temperature: 0.7,
+      }),
+    });
+
+    if (stream) {
+      const reader = resp.body.getReader();
+      const decoder = new TextDecoder();
+      let buf = "";
+
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        buf += decoder.decode(value, { stream: true });
+        const lines = buf.split("\n");
+        buf = lines.pop();
+        for (const line of lines) {
+          if (!line.startsWith("data:")) continue;
+          const data = line.slice(5).trim();
+          if (data === "[DONE]") break;
+          try {
+            const chunk = JSON.parse(data);
+            const content = chunk.choices?.[0]?.delta?.content;
+            if (content) {
+              assistantDiv.textContent += content;
+              tokenCount++;
+              chat.scrollTop = chat.scrollHeight;
+            }
+          } catch {}
+        }
+      }
+    } else {
+      const d = await resp.json();
+      const content = d.choices?.[0]?.message?.content ?? "";
+      assistantDiv.textContent = content;
+      tokenCount = d.usage?.completion_tokens ?? 0;
+    }
+
+    const elapsed = (Date.now() - t0) / 1000;
+    const tps = tokenCount / elapsed;
+    tpsBadge.textContent = `${tps.toFixed(1)} tok/s`;
+    messages.push({ role: "assistant", content: assistantDiv.textContent });
+
+  } catch (err) {
+    assistantDiv.textContent = `[error] ${err.message}`;
+  } finally {
+    sendBtn.disabled = false;
+    promptEl.focus();
+  }
+}
+
+sendBtn.addEventListener("click", send);
+promptEl.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); }
+});
+
+checkHealth();
+setInterval(checkHealth, 10_000);
+</script>
+</body>
+</html>