feat: Cookbook-Download-Fix, Live-Update-Konsole, Profi-Highlight, OpenCode-Guide

Backend:
- hf_bin() + HF_DOWNLOAD_ENV zentral in config.py; install-recipe und
  install-model in cookbook.py nutzten weiter das fehlende `hf` + falsches
  XET-Env -> Haupt-Installationsweg war ebenso kaputt, jetzt konsistent gefixt

Frontend:
- Server: laufende Updates (LLM-Engine/OS) live auf der Server-Seite mitlesbar,
  inkl. klarer Fertig-/Fehlgeschlagen-Meldung (onJobs + Aktueller-Vorgang-Karte)
- Cookbook/Profi-Modus: meistgeladenes, passendes Modell wird als
  "★ Beste Wahl für dein System" hervorgehoben (analog zu den Templates)
- Verbinden: OpenCode korrekt per opencode.json (@ai-sdk/openai-compatible)
  statt irrefuehrender Felder; erklaert "Connect to API"-Fehler (LAN-IP statt
  localhost)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Hitonabi
2026-06-21 18:03:12 +02:00
parent f07a8440b2
commit 720b47a6e1
7 changed files with 125 additions and 28 deletions
+32 -5
View File
@@ -21,6 +21,28 @@ window.cnGo = v => document.querySelector(`.nav-item[data-view="${v}"]`)?.click(
function baseUrl() { return `${location.protocol}//${location.hostname}:8080/v1`; }
function models() { return S?.models || []; }
// Fertige opencode.json fuer einen OpenAI-kompatiblen Provider auf llama-swap.
function openCodeConfig(url, ids) {
const list = ids.length ? ids : ["coder"];
const modelMap = list.map(id => ` "${id}": { "name": "${id}" }`).join(",\n");
return `{
"$schema": "https://opencode.ai/config.json",
"provider": {
"llama-swap": {
"npm": "@ai-sdk/openai-compatible",
"name": "Bosgame (llama-swap)",
"options": {
"baseURL": "${url}",
"apiKey": "local"
},
"models": {
${modelMap}
}
}
}
}`;
}
function field(label, value) {
return `<label>${label}</label>
<div class="flex gap-2" style="align-items:stretch;margin-bottom:12px">
@@ -76,12 +98,17 @@ function render() {
<div class="card" style="padding:0;overflow:hidden">
<details class="guide-acc" open>
<summary>OpenCode (Windows) — Config</summary>
<summary>OpenCode — Config-Datei (JSON)</summary>
<div class="acc-body">
<p>Lege in OpenCode einen OpenAI-kompatiblen Provider an:</p>
${field("Basis-URL", url)}
${field("Modell-ID", firstModel)}
${field("API-Key", "(dein Token oder leer lassen)")}
<p>OpenCode richtest du nicht über Felder ein, sondern über eine <b>Config-Datei</b>. Lege sie hier an:</p>
<p class="mono-sm" style="line-height:1.6">Windows: <code>%USERPROFILE%\\.config\\opencode\\opencode.json</code><br>
(oder im Projektordner als <code>opencode.json</code>)</p>
<div style="position:relative;margin-top:12px">
<button class="ghost" style="position:absolute;top:8px;right:8px;z-index:1" onclick="window.mcCopyCode(this)">Kopieren</button>
<div class="log" style="max-height:none"><code>${esc(openCodeConfig(url, ids))}</code></div>
</div>
<p style="margin-top:12px">Danach in OpenCode <code>/models</code> tippen und <b>llama-swap/${esc(firstModel)}</b> wählen. Das Auto-Swapping lädt das passende Modell von selbst.</p>
<div class="hint" style="margin-top:8px"><b>Fehler „Connect to API could not be established"?</b> Dann zeigt die <code>baseURL</code> ins Leere. Sie muss auf die <b>LAN-IP des Bosgame</b> zeigen (oben: <code>${esc(url)}</code>) — niemals <code>localhost</code> oder <code>127.0.0.1</code>, denn das wäre dein eigener PC, nicht der Server.</div>
</div>
</details>
<details class="guide-acc">
+22 -2
View File
@@ -18,6 +18,8 @@ let currentAnalysis = null;
let activeFilter = "";
let RECIPES = [];
let RECOMMENDED = null;
let cardFits = []; // Fit-Level je Such-Karte (fuer „Beste Wahl"-Markierung)
const FIT_RANK = { perfect: 0, marginal: 1, too_tight: 2 };
const fitCls = lvl => lvl === "perfect" ? "ok" : lvl === "marginal" ? "warn" : "bad";
const fitWord = lvl => lvl === "perfect" ? "Passt locker" : lvl === "marginal" ? "Wird knapp" : "Zu groß";
@@ -211,6 +213,7 @@ async function doSearch() {
function renderResults(results) {
const grid = $("#cb-grid");
cardFits = [];
if (!results?.length) { grid.innerHTML = `<div class="empty" style="grid-column:1/-1;text-align:center">Keine GGUF-Modelle gefunden.</div>`; return; }
grid.innerHTML = results.map((m, i) => `
<div class="card" style="display:flex;flex-direction:column;cursor:pointer" data-res="${i}">
@@ -233,11 +236,28 @@ async function fetchFitForCard(i, repo_id) {
const res = await api("/api/cookbook/analyze", { method: "POST", body: JSON.stringify({ repo_id, ctx: 8192 }) });
const b = $("#cb-b-" + i), mt = $("#cb-m-" + i);
if (!b || !mt) return;
if (!res.files?.length) { b.className = "fit-badge"; b.style.cssText = "background:rgba(139,151,165,.14);color:var(--mut)"; b.title = GGUF_HELP; b.textContent = "kein GGUF"; mt.textContent = "—"; return; }
if (!res.files?.length) { b.className = "fit-badge"; b.style.cssText = "background:rgba(139,151,165,.14);color:var(--mut)"; b.title = GGUF_HELP; b.textContent = "kein GGUF"; mt.textContent = "—"; cardFits[i] = null; markBestResult(); return; }
let best = res.files.find(f => f.quant?.includes("Q4_K_M")) || res.files[0];
b.className = "fit-badge " + fitCls(best.fit.level); b.textContent = best.fit.text;
mt.textContent = metricLine(best.fit) + " · " + (best.quant || "GGUF");
} catch { const b = $("#cb-b-" + i); if (b) { b.className = "fit-badge bad"; b.textContent = "Fehler"; } }
cardFits[i] = best.fit.level; markBestResult();
} catch { const b = $("#cb-b-" + i); if (b) { b.className = "fit-badge bad"; b.textContent = "Fehler"; } cardFits[i] = null; markBestResult(); }
}
// Markiert die beste System-Wahl in den Suchergebnissen: das meistgeladene Modell
// (Liste ist nach Downloads sortiert), das noch sauber auf die Hardware passt.
function markBestResult() {
const grid = $("#cb-grid"); if (!grid) return;
let bestI = -1, bestRank = 99;
cardFits.forEach((lvl, i) => {
if (lvl == null) return;
const rank = FIT_RANK[lvl] ?? 99;
if (rank < bestRank) { bestRank = rank; bestI = i; }
});
grid.querySelectorAll("[data-res]").forEach(el => { el.classList.remove("res-best"); el.querySelector(".cb-best-tag")?.remove(); });
if (bestI < 0 || bestRank > 1) return; // nur hervorheben, wenn etwas Lauffähiges (perfect/marginal) dabei ist
const el = grid.querySelector(`[data-res="${bestI}"]`);
if (el) { el.classList.add("res-best"); el.insertAdjacentHTML("afterbegin", `<div class="cb-best-tag">★ Beste Wahl für dein System</div>`); }
}
function showFit() {
+47 -3
View File
@@ -38,6 +38,12 @@ function mount() {
${row("w-reboot", "bolt", "red", "Server neustarten (Reboot)", "Bootet den ganzen Bosgame neu. Alles ist für ~1 Minute offline, auch dieses Dashboard.")}
</div>
<div class="card" id="w-update-card" style="display:none">
<div class="card-h"><h3>Aktueller Vorgang</h3><span id="w-update-badge" style="margin-left:auto"></span></div>
<div class="card-sub" id="w-update-label">—</div>
<div id="w-update-log" class="log" style="max-height:280px"></div>
</div>
<div class="card">
<div class="card-h"><h3>Live-Konsole</h3>
<select id="w-console-sel" style="margin:0 0 0 auto;width:240px">
@@ -93,8 +99,46 @@ async function selfUpdate() {
catch (e) { toast(e.message, true); }
}
// ---- Live-Verlauf laufender Vorgaenge (Updates) direkt auf der Server-Seite ----
let activeJob = null; // { id, label }
const notified = new Set(); // Job-IDs, fuer die schon eine Abschluss-Meldung kam
function watchJob(id, label) {
activeJob = { id, label };
const card = $("#w-update-card");
if (!card) return;
card.style.display = "";
$("#w-update-label").textContent = label + " läuft…";
$("#w-update-badge").innerHTML = '<span class="badge b-load">läuft…</span>';
$("#w-update-log").textContent = "Starte…";
card.scrollIntoView({ behavior: "smooth", block: "nearest" });
}
function onJobs(jobs) {
if (!activeJob) return;
const j = (jobs || []).find(x => x.id === activeJob.id);
const card = $("#w-update-card");
if (!j || !card) return;
card.style.display = "";
const logEl = $("#w-update-log");
if (logEl) { logEl.textContent = (j.log || []).join("\n"); logEl.scrollTop = logEl.scrollHeight; }
const badge = $("#w-update-badge");
const done = j.state === "done", failed = j.state === "failed";
if (badge) badge.innerHTML = done ? '<span class="badge b-run">✓ fertig</span>'
: failed ? '<span class="badge b-err">✗ fehlgeschlagen</span>'
: '<span class="badge b-load">läuft…</span>';
if (done || failed) {
$("#w-update-label").textContent = activeJob.label + (done ? " — erfolgreich abgeschlossen." : " — fehlgeschlagen (siehe Protokoll).");
if (!notified.has(j.id)) {
notified.add(j.id);
toast(done ? "✓ " + activeJob.label + " abgeschlossen." : "✗ " + activeJob.label + " fehlgeschlagen.", failed);
if (done) setTimeout(refreshSoon, 800);
}
}
}
async function update() {
try { const r = await api("/api/update", { method: "POST" }); toast("llama.cpp-Update läuft — siehe Aktivität."); track(r.job_id); }
try { const r = await api("/api/update", { method: "POST" }); toast("LLM-Engine-Update läuft."); track(r.job_id); watchJob(r.job_id, "LLM-Engine-Update"); }
catch (e) { toast(e.message, true); }
}
@@ -102,7 +146,7 @@ async function osUpdate() {
if (!await confirmModal({ title: "OS-Updates installieren?", body: "Führt <code>apt update &amp; upgrade</code> aus. Das kann ein paar Minuten dauern; der Fortschritt erscheint in der Aktivität." })) return;
const pwd = await promptModal({ title: "sudo-Passwort", body: "Für die System-Updates wird einmalig dein sudo-Passwort gebraucht.", placeholder: "sudo-Passwort", password: true, confirmLabel: "Installieren" });
if (!pwd) return;
try { const r = await api("/api/os-update", { method: "POST", body: JSON.stringify({ password: pwd }) }); toast("OS-Update gestartet."); track(r.job_id); }
try { const r = await api("/api/os-update", { method: "POST", body: JSON.stringify({ password: pwd }) }); toast("OS-Update gestartet."); track(r.job_id); watchJob(r.job_id, "OS-Update"); }
catch (e) { toast(e.message, true); }
}
@@ -114,4 +158,4 @@ async function rebootServer() {
catch (e) { toast(e.message, true); }
}
export default { id: "server", mount };
export default { id: "server", mount, onJobs };