Initial commit

llamaCpp.Wrapper.app/ui_static/app.js

@@ -0,0 +1,306 @@
+const modelsList = document.getElementById("models-list");
+const downloadsList = document.getElementById("downloads-list");
+const refreshModels = document.getElementById("refresh-models");
+const refreshDownloads = document.getElementById("refresh-downloads");
+const form = document.getElementById("download-form");
+const errorEl = document.getElementById("download-error");
+const statusEl = document.getElementById("switch-status");
+const configStatusEl = document.getElementById("config-status");
+const configForm = document.getElementById("config-form");
+const refreshConfig = document.getElementById("refresh-config");
+const warmupPromptEl = document.getElementById("warmup-prompt");
+const refreshLogs = document.getElementById("refresh-logs");
+const logsOutput = document.getElementById("logs-output");
+const logsStatus = document.getElementById("logs-status");
+const themeToggle = document.getElementById("theme-toggle");
+
+const applyTheme = (theme) => {
+  document.documentElement.setAttribute("data-theme", theme);
+  themeToggle.textContent = theme === "dark" ? "Light" : "Dark";
+  themeToggle.setAttribute("aria-pressed", theme === "dark" ? "true" : "false");
+};
+
+const savedTheme = localStorage.getItem("theme") || "light";
+applyTheme(savedTheme);
+themeToggle.addEventListener("click", () => {
+  const next = document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark";
+  localStorage.setItem("theme", next);
+  applyTheme(next);
+});
+
+const cfgFields = {
+  ctx_size: document.getElementById("cfg-ctx-size"),
+  n_gpu_layers: document.getElementById("cfg-n-gpu-layers"),
+  tensor_split: document.getElementById("cfg-tensor-split"),
+  split_mode: document.getElementById("cfg-split-mode"),
+  cache_type_k: document.getElementById("cfg-cache-type-k"),
+  cache_type_v: document.getElementById("cfg-cache-type-v"),
+  flash_attn: document.getElementById("cfg-flash-attn"),
+  temp: document.getElementById("cfg-temp"),
+  top_k: document.getElementById("cfg-top-k"),
+  top_p: document.getElementById("cfg-top-p"),
+  repeat_penalty: document.getElementById("cfg-repeat-penalty"),
+  repeat_last_n: document.getElementById("cfg-repeat-last-n"),
+  frequency_penalty: document.getElementById("cfg-frequency-penalty"),
+  presence_penalty: document.getElementById("cfg-presence-penalty"),
+};
+const extraArgsEl = document.getElementById("cfg-extra-args");
+
+const fmtBytes = (bytes) => {
+  if (!bytes && bytes !== 0) return "-";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let idx = 0;
+  let value = bytes;
+  while (value >= 1024 && idx < units.length - 1) {
+    value /= 1024;
+    idx += 1;
+  }
+  return `${value.toFixed(1)} ${units[idx]}`;
+};
+
+const setStatus = (message, type) => {
+  statusEl.textContent = message || "";
+  statusEl.className = "status";
+  if (type) {
+    statusEl.classList.add(type);
+  }
+};
+
+const setConfigStatus = (message, type) => {
+  configStatusEl.textContent = message || "";
+  configStatusEl.className = "status";
+  if (type) {
+    configStatusEl.classList.add(type);
+  }
+};
+
+async function loadModels() {
+  const res = await fetch("/ui/api/models");
+  const data = await res.json();
+  modelsList.innerHTML = "";
+  const activeModel = data.active_model;
+  data.models.forEach((model) => {
+    const li = document.createElement("li");
+    if (model.active) {
+      li.classList.add("active");
+    }
+    const row = document.createElement("div");
+    row.className = "model-row";
+
+    const name = document.createElement("span");
+    name.textContent = `${model.id} (${fmtBytes(model.size)})`;
+
+    const actions = document.createElement("div");
+    if (model.active) {
+      const badge = document.createElement("span");
+      badge.className = "badge";
+      badge.textContent = "Active";
+      actions.appendChild(badge);
+    } else {
+      const button = document.createElement("button");
+      button.className = "ghost";
+      button.textContent = "Switch";
+      button.onclick = async () => {
+        setStatus(`Switching to ${model.id}...`);
+        const warmupPrompt = warmupPromptEl.value.trim();
+        const res = await fetch("/ui/api/switch-model", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ model_id: model.id, warmup_prompt: warmupPrompt }),
+        });
+        const payload = await res.json();
+        if (!res.ok) {
+          setStatus(payload.detail || "Switch failed.", "error");
+          return;
+        }
+        warmupPromptEl.value = "";
+        setStatus(`Active model: ${model.id}`, "ok");
+        await loadModels();
+      };
+      actions.appendChild(button);
+    }
+
+    row.appendChild(name);
+    row.appendChild(actions);
+    li.appendChild(row);
+    modelsList.appendChild(li);
+  });
+  if (activeModel) {
+    setStatus(`Active model: ${activeModel}`, "ok");
+  }
+}
+
+async function loadDownloads() {
+  const res = await fetch("/ui/api/downloads");
+  const data = await res.json();
+  downloadsList.innerHTML = "";
+  const entries = Object.values(data.downloads || {});
+  if (!entries.length) {
+    downloadsList.innerHTML = "<p>No active downloads.</p>";
+    return;
+  }
+  entries.forEach((download) => {
+    const card = document.createElement("div");
+    card.className = "download-card";
+
+    const title = document.createElement("strong");
+    title.textContent = download.filename;
+
+    const meta = document.createElement("div");
+    const percent = download.bytes_total
+      ? Math.round((download.bytes_downloaded / download.bytes_total) * 100)
+      : 0;
+    meta.textContent = `${download.status} · ${fmtBytes(download.bytes_downloaded)} / ${fmtBytes(download.bytes_total)}`;
+
+    const progress = document.createElement("div");
+    progress.className = "progress";
+    const bar = document.createElement("span");
+    bar.style.width = `${Math.min(percent, 100)}%`;
+    progress.appendChild(bar);
+
+    const actions = document.createElement("div");
+    if (download.status === "downloading" || download.status === "queued") {
+      const cancel = document.createElement("button");
+      cancel.className = "ghost";
+      cancel.textContent = "Cancel";
+      cancel.onclick = async () => {
+        await fetch(`/ui/api/downloads/${download.download_id}`, { method: "DELETE" });
+        await loadDownloads();
+      };
+      actions.appendChild(cancel);
+    }
+
+    card.appendChild(title);
+    card.appendChild(meta);
+    card.appendChild(progress);
+    card.appendChild(actions);
+    downloadsList.appendChild(card);
+  });
+}
+
+async function loadConfig() {
+  const res = await fetch("/ui/api/llamacpp-config");
+  const data = await res.json();
+  Object.entries(cfgFields).forEach(([key, el]) => {
+    el.value = data.params?.[key] || "";
+  });
+  extraArgsEl.value = data.extra_args || "";
+  if (data.active_model) {
+    setConfigStatus(`Active model: ${data.active_model}`, "ok");
+  }
+}
+
+async function loadLogs() {
+  const res = await fetch("/ui/api/llamacpp-logs");
+  if (!res.ok) {
+    logsStatus.textContent = "Unavailable";
+    return;
+  }
+  const data = await res.json();
+  logsOutput.textContent = data.logs || "";
+  logsStatus.textContent = data.logs ? "Snapshot" : "Empty";
+}
+
+form.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  errorEl.textContent = "";
+  const url = document.getElementById("model-url").value.trim();
+  const filename = document.getElementById("model-filename").value.trim();
+  if (!url) {
+    errorEl.textContent = "URL is required.";
+    return;
+  }
+  const payload = { url };
+  if (filename) payload.filename = filename;
+  const res = await fetch("/ui/api/downloads", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok) {
+    const err = await res.json();
+    errorEl.textContent = err.detail || "Failed to start download.";
+    return;
+  }
+  document.getElementById("model-url").value = "";
+  document.getElementById("model-filename").value = "";
+  await loadDownloads();
+});
+
+configForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  setConfigStatus("Applying parameters...");
+  const params = {};
+  Object.entries(cfgFields).forEach(([key, el]) => {
+    if (el.value.trim()) {
+      params[key] = el.value.trim();
+    }
+  });
+  const warmupPrompt = warmupPromptEl.value.trim();
+  const res = await fetch("/ui/api/llamacpp-config", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ params, extra_args: extraArgsEl.value.trim(), warmup_prompt: warmupPrompt }),
+  });
+  const payload = await res.json();
+  if (!res.ok) {
+    setConfigStatus(payload.detail || "Update failed.", "error");
+    return;
+  }
+  setConfigStatus("Parameters updated.", "ok");
+  warmupPromptEl.value = "";
+});
+
+refreshModels.addEventListener("click", loadModels);
+refreshDownloads.addEventListener("click", loadDownloads);
+refreshConfig.addEventListener("click", loadConfig);
+refreshLogs.addEventListener("click", loadLogs);
+
+loadModels();
+loadDownloads();
+loadConfig();
+loadLogs();
+
+const eventSource = new EventSource("/ui/api/events");
+eventSource.onmessage = async (event) => {
+  const payload = JSON.parse(event.data);
+  if (payload.type === "download_progress" || payload.type === "download_completed" || payload.type === "download_status") {
+    await loadDownloads();
+  }
+  if (payload.type === "active_model") {
+    await loadModels();
+    await loadConfig();
+  }
+  if (payload.type === "model_switched") {
+    setStatus(`Active model: ${payload.model_id}`, "ok");
+    await loadModels();
+    await loadConfig();
+  }
+  if (payload.type === "model_switch_failed") {
+    setStatus(payload.error || "Model switch failed.", "error");
+  }
+  if (payload.type === "llamacpp_config_updated") {
+    await loadConfig();
+  }
+};
+
+const logsSource = new EventSource("/ui/api/llamacpp-logs/stream");
+logsSource.onopen = () => {
+  logsStatus.textContent = "Streaming";
+};
+logsSource.onmessage = (event) => {
+  const payload = JSON.parse(event.data);
+  if (payload.type !== "logs") {
+    return;
+  }
+  const lines = payload.lines || [];
+  if (!lines.length) return;
+  const current = logsOutput.textContent.split("\n").filter((line) => line.length);
+  const merged = current.concat(lines).slice(-400);
+  logsOutput.textContent = merged.join("\n");
+  logsOutput.scrollTop = logsOutput.scrollHeight;
+  logsStatus.textContent = "Streaming";
+};
+logsSource.onerror = () => {
+  logsStatus.textContent = "Disconnected";
+};

llamaCpp.Wrapper.app/ui_static/index.html

@@ -0,0 +1,151 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>llama.cpp Model Manager</title>
+    <link rel="stylesheet" href="/ui/styles.css" />
+  </head>
+  <body>
+    <div class="page">
+      <header class="topbar">
+        <div class="brand">
+          <p class="eyebrow">llama.cpp wrapper</p>
+          <h1>Model Manager</h1>
+          <p class="lede">Curate models, tune runtime parameters, and keep llama.cpp responsive.</p>
+        </div>
+        <div class="header-actions">
+          <button id="theme-toggle" class="ghost" type="button" aria-pressed="false">Dark</button>
+          <div class="quick-actions card">
+          <h2>Quick Add</h2>
+          <form id="download-form">
+            <label>
+              Model URL
+              <input type="url" id="model-url" placeholder="https://.../model.gguf" required />
+            </label>
+            <label>
+              Optional filename
+              <input type="text" id="model-filename" placeholder="custom-name.gguf" />
+            </label>
+            <button type="submit">Start Download</button>
+            <p id="download-error" class="error"></p>
+          </form>
+          </div>
+        </div>
+      </header>
+
+      <main class="layout">
+        <section class="column">
+          <div class="card">
+            <div class="card-header">
+              <h3>Models</h3>
+              <button id="refresh-models" class="ghost">Refresh</button>
+            </div>
+            <div id="switch-status" class="status"></div>
+            <label class="config-wide">
+              Warmup prompt (one-time)
+              <textarea id="warmup-prompt" rows="3" placeholder="Optional warmup prompt for the next restart only"></textarea>
+            </label>
+            <ul id="models-list" class="list"></ul>
+          </div>
+
+          <div class="card">
+            <div class="card-header">
+              <h3>Downloads</h3>
+              <button id="refresh-downloads" class="ghost">Refresh</button>
+            </div>
+            <div id="downloads-list" class="downloads"></div>
+          </div>
+        </section>
+
+        <section class="column">
+          <div class="card">
+            <div class="card-header">
+              <h3>Runtime Parameters</h3>
+              <button id="refresh-config" class="ghost">Refresh</button>
+            </div>
+            <div id="config-status" class="status"></div>
+            <form id="config-form" class="config-grid">
+              <label>
+                ctx-size
+                <input type="text" id="cfg-ctx-size" placeholder="e.g. 8192" />
+              </label>
+              <label>
+                n-gpu-layers
+                <input type="text" id="cfg-n-gpu-layers" placeholder="e.g. 999" />
+              </label>
+              <label>
+                tensor-split
+                <input type="text" id="cfg-tensor-split" placeholder="e.g. 0.5,0.5" />
+              </label>
+              <label>
+                split-mode
+                <input type="text" id="cfg-split-mode" placeholder="e.g. layer" />
+              </label>
+              <label>
+                cache-type-k
+                <input type="text" id="cfg-cache-type-k" placeholder="e.g. q8_0" />
+              </label>
+              <label>
+                cache-type-v
+                <input type="text" id="cfg-cache-type-v" placeholder="e.g. q8_0" />
+              </label>
+              <label>
+                flash-attn
+                <input type="text" id="cfg-flash-attn" placeholder="on/off" />
+              </label>
+              <label>
+                temp
+                <input type="text" id="cfg-temp" placeholder="e.g. 0.7" />
+              </label>
+              <label>
+                top-k
+                <input type="text" id="cfg-top-k" placeholder="e.g. 40" />
+              </label>
+              <label>
+                top-p
+                <input type="text" id="cfg-top-p" placeholder="e.g. 0.9" />
+              </label>
+              <label>
+                repeat-penalty
+                <input type="text" id="cfg-repeat-penalty" placeholder="e.g. 1.1" />
+              </label>
+              <label>
+                repeat-last-n
+                <input type="text" id="cfg-repeat-last-n" placeholder="e.g. 256" />
+              </label>
+              <label>
+                frequency-penalty
+                <input type="text" id="cfg-frequency-penalty" placeholder="e.g. 0.1" />
+              </label>
+              <label>
+                presence-penalty
+                <input type="text" id="cfg-presence-penalty" placeholder="e.g. 0.0" />
+              </label>
+              <label class="config-wide">
+                extra args
+                <textarea id="cfg-extra-args" rows="3" placeholder="--mlock --no-mmap"></textarea>
+              </label>
+              <button type="submit" class="config-wide">Apply Parameters</button>
+            </form>
+          </div>
+        </section>
+      </main>
+
+      <section class="card logs-panel">
+        <div class="card-header">
+          <div>
+            <h3>llama.cpp Logs</h3>
+            <p class="lede small">Live tail from the llama.cpp container.</p>
+          </div>
+          <div class="log-actions">
+            <span id="logs-status" class="badge muted">Idle</span>
+            <button id="refresh-logs" class="ghost">Refresh</button>
+          </div>
+        </div>
+        <pre id="logs-output" class="log-output"></pre>
+      </section>
+    </div>
+    <script src="/ui/app.js"></script>
+  </body>
+</html>

llamaCpp.Wrapper.app/ui_static/styles.css

@@ -0,0 +1,337 @@
+:root {
+  --bg: #f5f6f8;
+  --panel: #ffffff;
+  --panel-muted: #f2f3f6;
+  --text: #111318;
+  --muted: #5b6472;
+  --border: rgba(17, 19, 24, 0.08);
+  --accent: #0a84ff;
+  --accent-ink: #005ad6;
+  --shadow: 0 20px 60px rgba(17, 19, 24, 0.08);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", sans-serif;
+  background: radial-gradient(circle at top, #ffffff 0%, var(--bg) 60%);
+  color: var(--text);
+}
+
+.page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 48px 28px 72px;
+}
+
+.topbar {
+  display: grid;
+  grid-template-columns: minmax(240px, 1.2fr) minmax(280px, 0.8fr);
+  gap: 32px;
+  align-items: stretch;
+  margin-bottom: 36px;
+}
+
+.header-actions {
+  display: grid;
+  gap: 16px;
+  justify-items: end;
+}
+
+.header-actions .quick-actions {
+  width: 100%;
+}
+
+.header-actions #theme-toggle {
+  justify-self: end;
+}
+
+.brand h1 {
+  font-size: clamp(2.2rem, 4vw, 3.2rem);
+  letter-spacing: -0.02em;
+}
+
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  font-size: 0.68rem;
+  color: var(--muted);
+}
+
+.lede {
+  margin-top: 12px;
+  font-size: 1rem;
+  color: var(--muted);
+}
+
+.lede.small {
+  font-size: 0.85rem;
+}
+
+.card {
+  background: var(--panel);
+  padding: 22px;
+  border-radius: 22px;
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+}
+
+.quick-actions h2 {
+  margin-bottom: 14px;
+  font-size: 1.1rem;
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 24px;
+}
+
+.column {
+  display: grid;
+  gap: 24px;
+}
+
+.logs-panel {
+  margin-top: 28px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.card-header h3 {
+  font-size: 1.1rem;
+}
+
+.log-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+form {
+  display: grid;
+  gap: 12px;
+}
+
+label {
+  display: grid;
+  gap: 6px;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+input,
+textarea,
+button {
+  font: inherit;
+}
+
+input,
+textarea {
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: #fff;
+}
+
+button {
+  border: none;
+  padding: 10px 16px;
+  border-radius: 12px;
+  background: var(--accent);
+  color: #fff;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.2s ease, background 0.2s ease;
+}
+
+button:hover {
+  transform: translateY(-1px);
+  background: var(--accent-ink);
+}
+
+button.ghost {
+  background: transparent;
+  color: var(--accent);
+  border: 1px solid rgba(10, 132, 255, 0.4);
+  padding: 8px 12px;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 10px;
+}
+
+.list li {
+  padding: 12px;
+  border-radius: 14px;
+  background: var(--panel-muted);
+  border: 1px solid var(--border);
+  font-family: "SF Mono", "JetBrains Mono", "Menlo", monospace;
+  font-size: 0.85rem;
+}
+
+.list li.active {
+  border-color: rgba(10, 132, 255, 0.4);
+  background: #eef5ff;
+}
+
+.model-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.badge {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+.badge.muted {
+  background: rgba(17, 19, 24, 0.1);
+  color: var(--muted);
+}
+
+.status {
+  margin-bottom: 12px;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.status.ok {
+  color: #1a7f37;
+}
+
+.status.error {
+  color: #b02a14;
+}
+
+.downloads {
+  display: grid;
+  gap: 12px;
+}
+
+.download-card {
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  padding: 12px;
+  background: #f7f8fb;
+}
+
+.download-card strong {
+  display: block;
+  font-size: 0.9rem;
+  margin-bottom: 6px;
+}
+
+.progress {
+  height: 8px;
+  border-radius: 999px;
+  background: #dfe3ea;
+  overflow: hidden;
+  margin: 8px 0;
+}
+
+.progress > span {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+  width: 0;
+}
+
+.error {
+  color: #b02a14;
+  font-size: 0.85rem;
+}
+
+.config-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 14px;
+}
+
+.config-wide {
+  grid-column: 1 / -1;
+}
+
+textarea {
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  font-family: "SF Mono", "JetBrains Mono", "Menlo", monospace;
+  font-size: 0.85rem;
+  resize: vertical;
+}
+
+.log-output {
+  background: #0f141b;
+  color: #dbe6f3;
+  padding: 16px;
+  border-radius: 16px;
+  min-height: 260px;
+  max-height: 420px;
+  overflow: auto;
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+[data-theme="dark"] {
+  --bg: #0b0d12;
+  --panel: #141824;
+  --panel-muted: #1b2132;
+  --text: #f1f4f9;
+  --muted: #a5afc2;
+  --border: rgba(241, 244, 249, 0.1);
+  --accent: #4aa3ff;
+  --accent-ink: #1f7ae0;
+  --shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme="dark"] body {
+  background: radial-gradient(circle at top, #131826 0%, var(--bg) 60%);
+}
+
+[data-theme="dark"] .download-card {
+  background: #121826;
+}
+
+[data-theme="dark"] .progress {
+  background: #2a3349;
+}
+
+[data-theme="dark"] .log-output {
+  background: #080b12;
+  color: #d8e4f3;
+}
+
+@media (max-width: 900px) {
+  .topbar {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .page {
+    padding: 32px 16px 48px;
+  }
+}