ForgeLM/ui/index.html

<!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>