Hitonabi
103 lines
4.1 KiB
JavaScript
103 lines
4.1 KiB
JavaScript
import { $ } from "../core/ui.js";
|
|
|
|
let currentUrl = "http://localhost:8000";
|
|
|
|
function render() {
|
|
const c = document.querySelector(".view[data-view='guides']");
|
|
if (!c) return;
|
|
|
|
c.innerHTML = `
|
|
<div class="card-h"><h3>Guides & Integrationen</h3></div>
|
|
<div class="card" style="padding:0; overflow:hidden;">
|
|
|
|
<details class="guide-acc">
|
|
<summary>Cline / Cursor (Juni 2026)</summary>
|
|
<div class="acc-body">
|
|
<p>Nutze deine lokalen Modelle kostenlos in der Cursor IDE und Cline.</p>
|
|
<label>Cursor: Settings -> Models -> Add Custom Model</label>
|
|
<input class="tokin mono-sm" readonly value="coder">
|
|
<label>Base URL (OpenAI API)</label>
|
|
<input class="tokin mono-sm" readonly value="${currentUrl}/v1">
|
|
<label>API Key</label>
|
|
<input class="tokin mono-sm" readonly value="MissionControl-Token-oder-leer">
|
|
<p style="margin-top:12px; font-size:12px; color:var(--mut);">
|
|
In Cline: Wähle "OpenAI Compatible" als Provider.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="guide-acc">
|
|
<summary>OpenWebUI (Pipes & Connections)</summary>
|
|
<div class="acc-body">
|
|
<p>Verbinde llama-swap nativ in OpenWebUI.</p>
|
|
<label>Settings -> Admin Settings -> Connections</label>
|
|
<input class="tokin mono-sm" readonly value="${currentUrl}/v1">
|
|
<label>API Key</label>
|
|
<input class="tokin mono-sm" readonly value="dummy-key">
|
|
<p style="margin-top:12px; font-size:12px; color:var(--mut);">
|
|
OpenWebUI erkennt nun vollautomatisch, wenn ein Modell ausgetauscht wird.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="guide-acc">
|
|
<summary>Python / LangChain (OpenAI SDK)</summary>
|
|
<div class="acc-body">
|
|
<p>Nutze das offizielle <code>openai</code> Package, um mit llama-swap zu sprechen.</p>
|
|
<pre style="background: var(--bg); padding: 12px; border-radius: 8px; border: 1px solid var(--line); overflow-x: auto; color: var(--tx); font-family: monospace; font-size: 13px;"><code>from openai import OpenAI
|
|
|
|
client = OpenAI(
|
|
base_url="${currentUrl}/v1",
|
|
api_key="Dein_Token" # Optional
|
|
)
|
|
|
|
response = client.chat.completions.create(
|
|
model="coder", # Alias aus deinem Cookbook
|
|
messages=[{"role": "user", "content": "Hallo Modell!"}]
|
|
)
|
|
|
|
print(response.choices[0].message.content)</code></pre>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="guide-acc">
|
|
<summary>n8n (AI Agent Nodes)</summary>
|
|
<div class="acc-body">
|
|
<p>Nutze den "OpenAI Chat Model" Node in n8n Advanced AI.</p>
|
|
<label>Credentials -> OpenAI API -> Custom URL</label>
|
|
<input class="tokin mono-sm" readonly value="${currentUrl}/v1">
|
|
<p style="margin-top:12px; font-size:12px; color:var(--mut);">
|
|
Einfach den Node verbinden, "coder" als Modell-ID (Expression) eintippen und loslegen.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="guide-acc">
|
|
<summary>Begrifflichkeiten (Glossar)</summary>
|
|
<div class="acc-body">
|
|
<p><b>LLM-Engine (llama-swap):</b> Der Server im Hintergrund, der die Sprachmodelle (LLMs) lädt und OpenAI-kompatible Schnittstellen bereitstellt.</p>
|
|
<p><b>VRAM:</b> Der Grafikkarten-Speicher. KI-Modelle sind extrem groß und benötigen viel VRAM, um schnell zu laufen.</p>
|
|
<p><b>Quantisierung (z.B. Q4_K_M):</b> Ein Verfahren, das die Genauigkeit der Modellgewichte leicht reduziert (von 16-Bit auf 4-Bit), damit sie in den VRAM passen, ohne signifikant dümmer zu werden.</p>
|
|
<p><b>Context-Window:</b> Wie viel Text ("Tokens") sich das Modell gleichzeitig "merken" kann. Ein Buchstabe ist ~0.3 Tokens. Mehr Kontext braucht drastisch mehr VRAM.</p>
|
|
</div>
|
|
</details>
|
|
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function mount() {
|
|
render();
|
|
}
|
|
|
|
function onStatus(s) {
|
|
if (s && s.swap_url) {
|
|
if (currentUrl !== s.swap_url) {
|
|
currentUrl = s.swap_url;
|
|
render(); // Neu rendern, wenn sich die URL ändert
|
|
}
|
|
}
|
|
}
|
|
|
|
export default { id: "guides", mount, onStatus };
|