Hitonabi
8e7a5425d4
- Swapping-Klartext + Spitzenbedarf (peak_ram) pro Modell: Modelle-Konfig + Cookbook-Setup-Modal zeigen 'nur ein Modell gleichzeitig, groesstes zaehlt'. models.py: peak_ram_gb/_optimal in Meta. - Kontextfenster: infoDot(ⓘ)-Helfer in ui.js + Tooltips an ctx-Feldern. - Guides-Tab komplett neu = echter Anfaenger-Guide (LLM/GGUF/Quant/Kontext/Swapping/MCP/Skills/Agenten). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
65 lines
4.1 KiB
JavaScript
65 lines
4.1 KiB
JavaScript
// guides.js — Anfänger-Guide (v5): erklärt die Local-LLM-Welt idiotensicher.
|
|
// Reine Erklär-Seite. Tool-Einrichtung/Configs liegen im Tab „Verbinden".
|
|
|
|
import { $ } from "../core/ui.js";
|
|
|
|
const SECTIONS = [
|
|
["Erste Schritte — in 3 Schritten loslegen", `
|
|
<ol style="padding-left:18px;line-height:1.9">
|
|
<li><b>Modell holen:</b> Im <b>Cookbook</b> auf „Wofür möchtest du es nutzen?" deinen Fall wählen
|
|
(z.B. „Coden") → „Komplettes Setup installieren". Der Download läuft im Tab <b>Aktivität</b>.</li>
|
|
<li><b>Verbinden:</b> Im Tab <b>Verbinden</b> die Basis-URL kopieren und in deinem Tool (z.B. OpenCode)
|
|
als „OpenAI-kompatibel" eintragen. Mit „Verbindung testen" prüfen.</li>
|
|
<li><b>Loslegen:</b> Im Tool das Modell (z.B. <code>coder</code>) auswählen und arbeiten. Die Engine
|
|
lädt das passende Modell automatisch.</li>
|
|
</ol>`],
|
|
["Was ist ein LLM bzw. ein Modell?", `
|
|
<p>Ein <b>LLM</b> (Large Language Model) ist ein KI-Sprachmodell — die „Intelligenz", die Text versteht
|
|
und schreibt (wie ChatGPT, nur <b>lokal auf deinem Mini-PC</b>, ohne Cloud). Ein <b>Modell</b> ist eine
|
|
konkrete Datei davon. Verschiedene Modelle sind unterschiedlich gut/schnell und auf Dinge spezialisiert
|
|
(Coden, Bilder, Chat).</p>`],
|
|
["Was ist GGUF?", `
|
|
<p><b>GGUF</b> ist das Datei<b>format</b>, in dem lokale Modelle gespeichert werden — gemacht, damit sie
|
|
effizient auf normaler Hardware laufen. Unsere Engine (llama-swap/llama.cpp) lädt <b>nur GGUF</b>.
|
|
Steht im Cookbook „keine GGUF", hat dieses HuggingFace-Repo schlicht keine passende Datei — dann ein
|
|
anderes Repo nehmen (oft gibt's „…-GGUF"-Varianten).</p>`],
|
|
["Quantisierung (z.B. Q4_K_M)?", `
|
|
<p>Modelle sind riesig. <b>Quantisierung</b> verkleinert sie, indem die Zahlen gröber gespeichert werden
|
|
(16-Bit → 4-Bit) — sie passen dann in den Speicher und laufen schneller, bei kaum spürbarem
|
|
Qualitätsverlust. <b>Q4_K_M</b> ist der beliebte Sweetspot aus Größe und Qualität. Höhere Zahl (Q6, Q8)
|
|
= etwas besser, aber größer/langsamer.</p>`],
|
|
["Kontextfenster — das Gedächtnis", `
|
|
<p>Das <b>Kontextfenster</b> ist das Kurzzeitgedächtnis: wie viel Text (Tokens) sich das Modell
|
|
<i>gleichzeitig</i> merken kann. <b>Größer</b> = es überblickt längere Dateien/Gespräche, braucht aber
|
|
<b>mehr Speicher</b> und wird etwas langsamer. Fürs Coden (viele Dateien) hilft groß; für kurzen Chat
|
|
reicht klein. Mission Control rechnet dir das <b>Optimum für deine Hardware</b> aus.</p>`],
|
|
["Swapping — warum nur ein Modell läuft", `
|
|
<p>llama-swap lädt <b>immer nur ein Modell gleichzeitig</b> und tauscht es bei Bedarf automatisch aus.
|
|
Vorteil: Du kannst viele Modelle einrichten, ohne dass sie sich den Speicher teilen müssen.
|
|
Heißt auch: Der Speicherbedarf deines Setups = das <b>größte</b> Einzelmodell, <b>nicht</b> die Summe.</p>`],
|
|
["MCP, Skills & Agenten", `
|
|
<p><b>Agent:</b> Ein Programm, das das Modell <i>selbstständig</i> Aufgaben erledigen lässt — Dateien
|
|
lesen/schreiben, Befehle ausführen, mehrere Schritte planen (z.B. OpenCode, Cline).</p>
|
|
<p><b>MCP (Model Context Protocol):</b> Ein Standard, über den ein Agent dem Modell <b>zusätzliche
|
|
Werkzeuge</b> gibt — z.B. „durchsuche das Web", „lies meine Datenbank", „steuere Tool X". So wird aus
|
|
einem reinen Textmodell ein nützlicher Helfer mit Zugriff auf echte Tools.</p>
|
|
<p><b>Skills:</b> Vorgefertigte Fähigkeiten/Anleitungen, die ein Agent für wiederkehrende Aufgaben nutzt.</p>`],
|
|
];
|
|
|
|
function mount() {
|
|
const c = $(".view[data-view='guides']"); if (!c) return;
|
|
c.innerHTML = `
|
|
<div class="pagehead"><div>
|
|
<h1>Guide für Einsteiger</h1>
|
|
<div class="sub">Die Local-LLM-Welt in Klartext — ohne Vorwissen verständlich.</div></div></div>
|
|
<div class="card" style="padding:0;overflow:hidden">
|
|
${SECTIONS.map(([title, body], i) => `
|
|
<details class="guide-acc"${i === 0 ? " open" : ""}>
|
|
<summary>${title}</summary>
|
|
<div class="acc-body">${body}</div>
|
|
</details>`).join("")}
|
|
</div>`;
|
|
}
|
|
|
|
export default { id: "guides", mount };
|