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
@@ -240,6 +240,7 @@ button:disabled{opacity:.5;cursor:not-allowed}
|
||||
color:var(--tx);font-family:var(--sans)}
|
||||
.card-btn:hover,.card-btn:focus{border-color:var(--accent);background:var(--bg2);outline:none}
|
||||
.card-btn.cb-best{border:2px solid var(--accent);background:rgba(45,212,191,.05)}
|
||||
.card.res-best{border:2px solid var(--accent);background:rgba(45,212,191,.05)}
|
||||
.cb-best-tag{display:inline-block;font-size:11px;color:var(--accent-ink);background:var(--accent);border-radius:6px;padding:2px 9px;margin-bottom:8px;font-weight:500}
|
||||
.card-btn h3{margin:0;font-size:var(--text-lg);font-weight:500}
|
||||
.card-btn p{margin:var(--sp-2) 0 0;font-size:var(--text-sm);color:var(--mut)}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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 & 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 };
|
||||
|
||||
Reference in New Issue
Block a user