mission-control/static/js/panels/cookbook.js

// cookbook.js — "App-Store" für Modelle (v3): Hardware-Fit als Ampel, Klartext-Urteile.
// Backend: /api/cookbook/{analyze,evaluate} (hw_math), /api/download, /api/register.

import { api } from "../core/api.js";
import { $, esc, icon, toast } from "../core/ui.js";

const CURATED = [
  { name: "Qwen 2.5 Coder 7B", repo: "unsloth/Qwen2.5-Coder-7B-Instruct-GGUF", file: "Qwen2.5-Coder-7B-Instruct-Q4_K_M.gguf",
    desc: "Schnell und locker auf deiner Kiste — ideal zum Programmieren.", params_b: 7, quant: "Q4_K_M", ctx: 32768, alias: "coder-fast" },
  { name: "Qwen 2.5 Coder 32B", repo: "unsloth/Qwen2.5-Coder-32B-Instruct-GGUF", file: "Qwen2.5-Coder-32B-Instruct-Q4_K_M.gguf",
    desc: "Mehr Können, etwas langsamer — der starke Allround-Coder.", params_b: 32, quant: "Q4_K_M", ctx: 32768, alias: "coder" },
  { name: "Llama 3.2 Vision 11B", repo: "unsloth/Llama-3.2-11B-Vision-Instruct-GGUF", file: "Llama-3.2-11B-Vision-Instruct-Q4_K_M.gguf",
    desc: "Versteht Bilder und Text — gut für multimodale Aufgaben.", params_b: 11, quant: "Q4_K_M", ctx: 8192, alias: "vision" },
  { name: "Qwen 2.5 7B", repo: "unsloth/Qwen2.5-7B-Instruct-GGUF", file: "Qwen2.5-7B-Instruct-Q4_K_M.gguf",
    desc: "Hervorragender Allrounder — schnell und vielseitig.", params_b: 7, quant: "Q4_K_M", ctx: 8192, alias: "scout" },
];

const FILTERS = [
  { id: "", label: "Alle" }, { id: "coder", label: "Coder" }, { id: "scout", label: "Scout" },
  { id: "vision", label: "Vision" }, { id: "manager", label: "Manager" }, { id: "reviewer", label: "Reviewer" },
];

let lastSys = null;
let currentResults = [];
let currentAnalysis = null;
let activeFilter = "";

const fitCls = lvl => lvl === "perfect" ? "ok" : lvl === "marginal" ? "warn" : "bad";

function mount() {
  const c = $(".view[data-view='cookbook']");
  c.innerHTML = `
    <div class="pagehead"><div>
      <h1>Modell-Cookbook</h1>
      <div class="sub">Finde ein KI-Modell, das auf deinen Mini-PC passt — den Hardware-Check rechnen wir für dich aus.</div>
    </div></div>

    <div class="flex gap-3" style="margin:4px 0 6px">
      <input id="cb-search" placeholder="Modell suchen, z.B. „Llama 3"…" style="margin:0;flex:1">
      <button class="primary" id="cb-btn-search" style="white-space:nowrap">Suchen</button>
    </div>
    <div id="cb-filters" class="flex gap-2" style="flex-wrap:wrap"></div>

    <div class="card-h" style="margin-top:18px;align-items:center">
      <h3 id="cb-section-title">Empfohlen für deine Hardware</h3>
      <span class="chip" id="cb-hw">deine Hardware</span>
    </div>
    <div class="legend mb-4">
      <span><i style="background:var(--on)"></i>passt locker</span>
      <span><i style="background:var(--warn)"></i>läuft, aber knapp</span>
      <span><i style="background:var(--err)"></i>zu groß für deinen Speicher</span>
    </div>
    <div class="grid grid-3" id="cb-grid"></div>

    <div id="cb-modal" class="modal-overlay" style="display:none">
      <div class="modal-card" style="max-width:560px">
        <button id="cb-modal-close" class="ghost" style="position:absolute;top:14px;right:14px">Schließen</button>
        <h3 id="cb-m-title">Modell</h3>
        <p class="mono-sm" id="cb-m-repo" style="margin:-4px 0 16px">repo/name</p>

        <label>Quantisierung (GGUF-Datei) wählen</label>
        <select id="cb-m-files"></select>
        <div class="hint" id="cb-m-loading" style="display:none">Lade Dateien von HuggingFace…</div>

        <div class="row" style="margin-top:4px">
          <div><label>Alias (Rolle)</label><input id="cb-m-alias" placeholder="z.B. coder"></div>
          <div><label>Kontext-Größe</label><input id="cb-m-ctx" type="number" value="8192"></div>
        </div>

        <div id="cb-m-fit" class="tile" style="display:flex;justify-content:space-between;align-items:center;margin:8px 0 18px">
          <div><div style="font-size:13px">Ressourcen-Check</div>
            <div class="hint" id="cb-m-fit-text" style="margin:4px 0 0">Berechne…</div></div>
          <span id="cb-m-fit-badge"></span>
        </div>

        <button class="primary" id="cb-m-download" style="width:100%">Herunterladen &amp; Einpflegen</button>
      </div>
    </div>`;

  renderFilters();
  $("#cb-btn-search").addEventListener("click", doSearch);
  $("#cb-search").addEventListener("keydown", e => { if (e.key === "Enter") doSearch(); });
  $("#cb-modal-close").addEventListener("click", () => $("#cb-modal").style.display = "none");
  $("#cb-modal").addEventListener("click", e => { if (e.target.id === "cb-modal") $("#cb-modal").style.display = "none"; });
  $("#cb-m-download").addEventListener("click", doDownload);
  $("#cb-m-files").addEventListener("change", updateLiveFit);
  $("#cb-m-ctx").addEventListener("change", reanalyzeCtx);

  renderHwChip();
  renderCurated();
}

function renderFilters() {
  $("#cb-filters").innerHTML = FILTERS.map(f =>
    `<button class="${activeFilter === f.id ? "primary" : "ghost"}" data-f="${f.id}" style="border-radius:999px">${f.label}</button>`
  ).join("");
  $("#cb-filters").querySelectorAll("[data-f]").forEach(b =>
    b.addEventListener("click", () => { activeFilter = b.getAttribute("data-f"); renderFilters(); doSearch(); }));
}

function renderHwChip() {
  const el = $("#cb-hw"); if (!el) return;
  if (lastSys?.ram?.total) {
    el.innerHTML = `${icon("cpu")}${Math.round(lastSys.ram.total / 1024 ** 3)} GB Speicher`;
  }
}

// ---- Karten ----
function metricLine(fit) { return `~${fit.req_gb.toFixed(1)} GB · ~${Math.round(fit.tps)} Tok/s`; }

function curatedCard(m, i, fit) {
  return `<div class="card" style="display:flex;flex-direction:column;cursor:pointer" data-cur="${i}">
    <div class="flex justify-between items-center"><h3 style="margin:0;font-size:15px;font-weight:500">${esc(m.name)}</h3>
      <span class="fit-badge ${fitCls(fit.level)}">${esc(fit.text)}</span></div>
    <div class="text-sm text-mut" style="margin:12px 0;flex:1;line-height:1.5">${esc(m.desc)}</div>
    <div class="flex justify-between items-center text-xs text-mut" style="border-top:1px solid var(--line);padding-top:11px">
      <span class="mono-sm">${metricLine(fit)}</span><span class="mono-sm">${esc(m.quant)}</span></div>
  </div>`;
}

async function renderCurated() {
  $("#cb-section-title").textContent = "Empfohlen für deine Hardware";
  const grid = $("#cb-grid"); if (!grid) return;
  grid.innerHTML = `<div class="empty" style="grid-column:1/-1;text-align:center">Berechne Hardware-Fit…</div>`;
  try {
    let html = "";
    for (let i = 0; i < CURATED.length; i++) {
      const m = CURATED[i];
      const fit = await api("/api/cookbook/evaluate", { method: "POST", body: JSON.stringify({ params_b: m.params_b, quant: m.quant, ctx: m.ctx }) });
      html += curatedCard(m, i, fit);
    }
    grid.innerHTML = html;
    grid.querySelectorAll("[data-cur]").forEach(el => el.addEventListener("click", () => openCurated(+el.getAttribute("data-cur"))));
  } catch (e) {
    grid.innerHTML = `<div class="alert err" style="grid-column:1/-1">Konnte Empfehlungen nicht laden: ${esc(e.message)}</div>`;
  }
}

async function doSearch() {
  let q = $("#cb-search").value.trim();
  if (activeFilter) q = q ? q + " " + activeFilter : activeFilter;
  if (!q) return renderCurated();

  const btn = $("#cb-btn-search"); btn.disabled = true; btn.textContent = "Lade…";
  $("#cb-section-title").textContent = "Suchergebnisse: " + q;
  const grid = $("#cb-grid");
  grid.innerHTML = `<div class="empty" style="grid-column:1/-1;text-align:center">Suche auf HuggingFace…</div>`;
  try {
    const url = `https://huggingface.co/api/models?search=${encodeURIComponent(q)}&filter=gguf&sort=downloads&direction=-1&limit=12`;
    const r = await fetch(url);
    currentResults = await r.json();
    renderResults(currentResults);
  } catch (e) {
    grid.innerHTML = `<div class="alert err" style="grid-column:1/-1">${esc(e.message)}</div>`;
  }
  btn.disabled = false; btn.textContent = "Suchen";
}

function renderResults(results) {
  const grid = $("#cb-grid");
  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}">
      <div class="flex justify-between" style="align-items:flex-start;gap:8px">
        <div style="min-width:0"><h3 style="margin:0;font-size:14.5px;font-weight:500;word-break:break-word">${esc(m.id.split("/").pop())}</h3>
          <div class="text-xs text-mut" style="margin-top:3px">${esc(m.author || "")}</div></div>
        <span class="fit-badge warn" id="cb-b-${i}">prüfe…</span>
      </div>
      <div style="flex:1;margin-top:12px"></div>
      <div class="flex justify-between items-center text-xs text-mut" style="border-top:1px solid var(--line);padding-top:11px">
        <span class="mono-sm" id="cb-m-${i}">Hardware-Fit…</span>
        <span class="mono-sm">⬇ ${(m.downloads || 0).toLocaleString()}</span></div>
    </div>`).join("");
  grid.querySelectorAll("[data-res]").forEach(el => el.addEventListener("click", () => openResult(+el.getAttribute("data-res"))));
  results.forEach((m, i) => fetchFitForCard(i, m.id));
}

async function fetchFitForCard(i, repo_id) {
  try {
    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 bad"; b.textContent = "keine GGUFs"; mt.textContent = "—"; 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"; }
  }
}

// ---- Modal ----
function showFit() {
  const file = $("#cb-m-files").value;
  const f = currentAnalysis?.files.find(x => x.filename === file);
  if (!f) { $("#cb-m-fit").style.display = "none"; return; }
  $("#cb-m-fit").style.display = "flex";
  $("#cb-m-fit-text").innerHTML = `Bedarf: <b>~${f.fit.req_gb.toFixed(1)} GB</b> · ${currentAnalysis.params_b}B · ${esc(f.quant)} · ~${Math.round(f.fit.tps)} Tok/s`;
  $("#cb-m-fit-badge").innerHTML = `<span class="fit-badge ${fitCls(f.fit.level)}">${esc(f.fit.text)}</span>`;
  const btn = $("#cb-m-download");
  if (f.fit.level === "too_tight") { btn.className = "primary warn"; btn.textContent = "Trotzdem holen (zu groß)"; }
  else { btn.className = "primary"; btn.textContent = "Herunterladen & Einpflegen"; }
}
function updateLiveFit() { showFit(); }

async function reanalyzeCtx() {
  if (!currentAnalysis) return;
  const ctx = parseInt($("#cb-m-ctx").value) || 8192;
  const file = $("#cb-m-files").value;
  try {
    currentAnalysis = await api("/api/cookbook/analyze", { method: "POST", body: JSON.stringify({ repo_id: currentAnalysis.repo, ctx }) });
    $("#cb-m-files").value = file; showFit();
  } catch {}
}

function openModalBase(title, repo) {
  $("#cb-modal").style.display = "flex";
  $("#cb-m-title").textContent = title;
  $("#cb-m-repo").textContent = repo;
}

async function openResult(i) {
  const m = currentResults[i]; if (!m) return;
  openModalBase(m.id.split("/").pop(), m.id);
  $("#cb-m-alias").value = m.id.split("/").pop().toLowerCase().replace(/[^a-z0-9]/g, "-");
  $("#cb-m-files").style.display = "none"; $("#cb-m-loading").style.display = "block"; $("#cb-m-download").disabled = true;
  try {
    const ctx = parseInt($("#cb-m-ctx").value) || 8192;
    currentAnalysis = await api("/api/cookbook/analyze", { method: "POST", body: JSON.stringify({ repo_id: m.id, ctx }) });
    $("#cb-m-loading").style.display = "none"; $("#cb-m-files").style.display = "block";
    if (!currentAnalysis.files?.length) { $("#cb-m-files").innerHTML = "<option>Keine GGUF-Dateien gefunden</option>"; $("#cb-m-fit").style.display = "none"; return; }
    $("#cb-m-files").innerHTML = currentAnalysis.files.map(f => {
      const mark = f.fit.level === "perfect" ? "●" : f.fit.level === "marginal" ? "◐" : "○";
      return `<option value="${esc(f.filename)}">${mark} ${esc(f.filename)}</option>`;
    }).join("");
    $("#cb-m-download").disabled = false; showFit();
  } catch (e) { $("#cb-m-loading").textContent = "Fehler: " + e.message; }
}

async function openCurated(i) {
  const m = CURATED[i]; if (!m) return;
  openModalBase(m.name, m.repo);
  $("#cb-m-files").style.display = "block"; $("#cb-m-loading").style.display = "none";
  $("#cb-m-files").innerHTML = `<option value="${esc(m.file)}">${esc(m.file)}</option>`;
  $("#cb-m-alias").value = m.alias; $("#cb-m-ctx").value = m.ctx; $("#cb-m-download").disabled = false;
  try {
    const fit = await api("/api/cookbook/evaluate", { method: "POST", body: JSON.stringify({ params_b: m.params_b, quant: m.quant, ctx: m.ctx }) });
    currentAnalysis = { repo: m.repo, params_b: m.params_b, files: [{ filename: m.file, quant: m.quant, fit }] };
    showFit();
  } catch {}
}

async function doDownload() {
  const repo = $("#cb-m-repo").textContent, file = $("#cb-m-files").value;
  const alias = $("#cb-m-alias").value.trim(), ctx = parseInt($("#cb-m-ctx").value) || 8192;
  if (!repo || !file || !alias) return toast("Bitte alle Felder ausfüllen.", true);
  const btn = $("#cb-m-download"); btn.disabled = true; btn.textContent = "Starte…";
  try {
    const res = await api("/api/download", { method: "POST", body: JSON.stringify({ repo, file }) });
    await api("/api/register", { method: "POST", body: JSON.stringify({ alias, model_path: res.expected_path, ctx }) });
    toast("Download gestartet — siehe Aktivität.");
    $("#cb-modal").style.display = "none";
    document.querySelector(".nav-item[data-view='activity']")?.click();
  } catch (e) { toast("Fehler: " + e.message, true); }
  btn.disabled = false; btn.textContent = "Herunterladen & Einpflegen";
}

function onSystem(sys) { lastSys = sys; renderHwChip(); }

export default { id: "cookbook", mount, onSystem };