Free!

KI völlig kostenlos!

Ollama aufs nächste Level gebracht

Echt starke Kombi 100% gratis! Hiermit könnt ihr so gut wie alles machen und es ist super einfach:

  1. Ollama installieren:
    https://ollama.com/download/windows
  2. Das Terminal öffnen (einfach nach "PowerShell" suchen) und dort folgendes eingeben, um sich die besten universellen Modelle zu ziehen:
    1. ollama pull qwen3.5:9b
      Gutes Modell für 16 GB RAM (nutzt bei mir sogar deutlich weniger);
      Größe: 6.6GB;
    2. ollama pull qwen3.5:4b
      Noch weniger RAM-Verbrauch;
      Größe: 3.4GB;
    3. ollama pull gemma4:e4b
      Auch ein gutes Modell, fordert aber ein bisschen den Rechner (braucht länger), bietet aber auch sehr gute Antworten;
      Größe: 9.6GB;
    4. ollama pull gemma4:e2b Und auch dafür noch eine kleiner Variante;
      Größe: 7.2GB;
  3. Slashspace installieren:
    https://www.slashspace.ai
    Es gibt eine Gratis-Variante, mit der man Ollama nutzen kann. Dafür muss man sich einen kostenlosen Account erstellen. Mit Slashspace kann man Nodes erstellen, die miteinander verbunden und auch wieder getrennt werden können, alles visuell - das hilft enorm, um den Kontext zu steuern. Hinzu kommt die RAG-Funktionalität von Slashspace: Lade eine Riesen-Datei hoch (z.B. die Dokumentation zu einer aktuellen Software) und chatte mit ihr (RAG verkleinert einfach gesagt den Kontext aufs Wesentliche, sodass dein Rechner nicht die kommenden 10 Jahre mit der Frage beschäftigt ist^^);
  4. Page Assist (Chrome Addon) installieren, um komfortabel Ollama einzusetzen:
    https://chromewebstore.google.com/detail/page-assist-a-web-ui-for/jfgfiigpkhlkbnfnbobbkinehhfdhndo
    Es ist kinderleicht. Dann hat man einen Button, mit dem man einen Chat öffnet, der aufgeräumt und simpel ist.
  5. Schau manchmal, ob es Updates gibt (neue Modelle oder Updates zu deinen installierten Modellen, und natürlich zu Ollama selbst). - Hier sind die URLs zu den oben genannten Modellen:
    1. https://ollama.com/library/qwen3.5
    2. https://ollama.com/library/gemma4

Ollama Next Level

A really powerful combo—100% free! You can use this to do just about anything, and it’s super easy:

  1. Install Ollama:
    https://ollama.com/download/windows
  2. Open the terminal (just search for “PowerShell”) and enter the following to download the best universal models:
    1. ollama pull qwen3.5:9b
      Good model for 16 GB RAM (uses significantly less on my system);
      Size: 6.6 GB;
    2. ollama pull qwen3.5:4b
      Even lower RAM usage;
      Size: 3.4 GB;
    3. ollama pull gemma4:e4b
      Also a good model, but it puts a bit more strain on the computer (takes longer), though it also provides very good answers;
      Size: 9.6GB;
    4. ollama pull gemma4:e2b And here’s an even smaller version of that;
      Size: 7.2GB;
  3. Installing Slashspace:
    https://www.slashspace.ai
    There is a free version that allows you to use Ollama. To use it, you need to create a free account. With Slashspace, you can create nodes that can be connected and disconnected from one another, all visually—this helps enormously in managing the context. Added to this is Slashspace’s RAG functionality: Upload a huge file (e.g., the documentation for a current software) and chat with it (put simply, RAG narrows the context down to the essentials so your computer isn’t tied up with the question for the next 10 years^^);
  4. Install Page Assist (Chrome add-on) to use Ollama comfortably:
    https://chromewebstore.google.com/detail/page-assist-a-web-ui-for/jfgfiigpkhlkbnfnbobbkinehhfdhndo
    It’s a piece of cake. Then you have a button that opens a clean and simple chat.
  5. Check occasionally for updates (new models or updates to your installed models, and of course to Ollama itself). - Here are the URLs for the models mentioned above:
    1. https://ollama.com/library/qwen3.5
    2. https://ollama.com/library/gemma4

Ollama verstehen

Wenn man Ollama so konfigurieren will, dass ein Modell viel Kontext verarbeiten und lange Antworten erzeugen kann, stößt man sehr schnell auf Begriffe wie num_ctx und num_predict. Diese beiden Werte sind tatsächlich zentral — aber sie sind nicht die ganze Geschichte.

Denn in der Praxis hängt die Qualität und Länge von Antworten nicht nur davon ab, was man einstellt, sondern auch davon:

Dieser Artikel erklärt die wichtigsten Ollama-Werte rund um Kontext und Antwortlänge, was sie technisch bedeuten, wie sie sich auf das Verhalten des Modells auswirken und welche sinnvollen Konfigurationen es für verschiedene Anwendungsfälle gibt.

1. Das Grundprinzip: Eingabetokens und Ausgabetokens

Bevor wir über Parameter sprechen, ist ein Konzept entscheidend:

Ein Sprachmodell arbeitet mit einem Kontextfenster. In diesem Fenster befinden sich alle Tokens, die das Modell aktuell „sehen“ kann. Dazu gehören z. B.:

Ein Token ist kein Wort, sondern ein kleines Textstück. Als grobe Faustregel gilt:

Wichtig ist: Das Modell hat kein unbegrenztes Gedächtnis. Es kann nur die Tokens berücksichtigen, die in sein Kontextfenster passen.

2. num_ctx: Wie viel Kontext das Modell sehen kann

Was bedeutet num_ctx?

num_ctx bestimmt die maximale Kontextlänge, also wie viele Tokens insgesamt dem Modell zur Verfügung stehen.

Das betrifft insbesondere:

Kurz gesagt:

Warum ist num_ctx so wichtig?

Wenn du z. B. möchtest, dass ein Modell:

dann brauchst du ein ausreichend großes num_ctx.

Beispiel

Du gibst dem Modell:

Dann bist du schon bei 25.000 Tokens Eingabekontext. Mit num_ctx=8192 würde das nicht vollständig hineinpassen. Ein Teil müsste abgeschnitten werden oder der Prompt würde fehlschlagen bzw. intern gekürzt.

Was passiert bei zu kleinem num_ctx?

Ein zu kleines Kontextfenster führt oft zu:

Das zeigt sich dann in Antworten wie:

Was passiert bei sehr großem num_ctx?

Ein großes Kontextfenster ist nützlich, hat aber Kosten:

Wichtig: Ein Modell kann zwar manchmal mit großem Kontext gestartet werden, aber das heißt nicht automatisch, dass es diesen Kontext qualitativ gut nutzen kann.

Es gibt einen Unterschied zwischen:

  1. technisch möglich
  2. vom Modell nativ trainiert/unterstützt
  3. inhaltlich noch zuverlässig

Das ist extrem wichtig.

3. num_predict: Wie lang die Antwort werden darf

Was bedeutet num_predict?

num_predict legt fest, wie viele neue Tokens das Modell maximal erzeugen darf.

Also:

Wenn du lange Antworten möchtest, ist num_predict der wichtigste direkte Parameter.

Beispiel

Wenn du num_predict=256 setzt, dann kann die Antwort maximal etwa 256 Tokens lang sein. Das ist oft nur eine kurze bis mittlere Antwort.

Wenn du num_predict=2048 setzt, dann kann die Antwort deutlich ausführlicher werden.

Wenn du sehr lange Artikel, Analysen oder Zusammenfassungen willst, sind Werte wie:

oft realistischer.

Was passiert bei zu kleinem num_predict?

Dann wirkt das Modell oft so, als würde es:

In vielen Fällen ist das kein „Unwille“ des Modells, sondern schlicht eine harte Tokenbegrenzung.

Was passiert bei sehr großem num_predict?

Große Werte erlauben lange Antworten, aber auch hier gibt es Nebenwirkungen:

Außerdem heißt ein hoher Wert nicht, dass das Modell immer so lang antwortet. Er ist nur das Maximum.

Das Modell kann trotzdem kurz antworten, wenn:

4. Zusammenspiel von num_ctx und num_predict

Viele verstehen diese beiden Werte anfangs isoliert. In Wirklichkeit wirken sie zusammen.

Denkmodell

Typischer Fall 1: Großer Input, kurze Antwort

Du willst ein langes Dokument analysieren und nur eine knappe Zusammenfassung.

Dann brauchst du:

Beispiel:

Typischer Fall 2: Mittlerer Input, lange Antwort

Du gibst eine überschaubare Aufgabe, willst aber einen langen Aufsatz.

Dann brauchst du:

Beispiel:

Typischer Fall 3: Großer Input und lange Antwort

Das ist der anspruchsvollste Fall, z. B.:

Dann brauchst du beides hoch:

Beispiel:

Aber genau hier steigen Speicherbedarf und Laufzeit stark.

5. Warum „mehr Kontext“ nicht immer automatisch „besser“ ist

Das ist einer der wichtigsten Punkte.

Viele denken:
Je größer num_ctx, desto besser die Antwort.

Das stimmt nur teilweise.

Problem 1: Das Modell wurde vielleicht nicht für so viel Kontext trainiert

Ein Modell hat häufig eine native oder empfohlene Kontextlänge. Wenn man diese stark überschreitet, kann Folgendes passieren:

Ein Modell kann technisch vielleicht mit 32k oder 64k gestartet werden, obwohl es bei 8k oder 16k am besten arbeitet.

Problem 2: Relevante Informationen gehen in der Masse unter

Auch wenn formal alles in den Kontext passt, heißt das nicht, dass das Modell alles gleich gut nutzt.

Wenn du 50 Seiten Kontext gibst, aber nur drei Sätze relevant sind, kann die Antwort schlechter werden als mit einem gut kuratierten, kompakten Prompt.

Problem 3: Performance sinkt

Mehr Kontext bedeutet meist:

Gerade lokal mit Ollama ist das sehr spürbar.

6. Warum „mehr num_predict“ nicht automatisch „bessere lange Antworten“ bedeutet

Ein hoher Wert ist nötig, aber nicht hinreichend.

Mögliche Probleme bei sehr langen Generationen

Je länger eine Antwort wird, desto wichtiger wird:

Praktischer Tipp

Wenn du sehr lange und gute Antworten willst, hilft oft mehr als bloß num_predict zu erhöhen:

Statt nur zu sagen:

Schreib mir einen langen Text

besser:

Schreibe einen strukturierten Artikel mit Einleitung, 6 Hauptabschnitten, Praxisbeispielen, Grenzen, Fazit. Vermeide Wiederholungen und führe jeden Punkt konkret aus.

So nutzt du das erlaubte Ausgabebudget sinnvoller.

7. Weitere wichtige Parameter, die Antworten beeinflussen

Auch wenn num_ctx und num_predict die Hauptrollen spielen, gibt es weitere Werte, die das Antwortverhalten stark beeinflussen.

temperature

Bestimmt, wie kreativ oder zufällig das Modell antwortet.

Einfluss auf lange Antworten

Für lange fachliche Texte ist eine zu hohe Temperatur oft problematisch:

Für sachliche, längere Ausgaben sind oft Werte um 0.2 bis 0.7 sinnvoll.

top_k

Begrenzt die Auswahl auf die wahrscheinlichsten nächsten Tokens.

Wirkung

Kann helfen, Antworten kontrollierter oder kreativer zu machen. Für nüchterne und längere Analysen eher moderat halten.

top_p

Alternative bzw. Ergänzung zu top_k.

Das Modell wählt aus den wahrscheinlichsten Tokens, bis eine kumulierte Wahrscheinlichkeit erreicht ist.

Auch das beeinflusst, ob lange Antworten eher stabil oder eher driftend werden.

repeat_penalty

Reduziert Wiederholungen.

Gerade bei langen Antworten kann das wichtig sein, weil Modelle sonst dazu neigen, Formulierungen, Satzmuster oder Inhalte zu wiederholen.

Ein etwas erhöhter Wert kann helfen, aber zu viel kann auch unnatürliche Sprache erzeugen.

Stop-Sequenzen / stop

Mit Stop-Sequenzen kann man festlegen, wann die Ausgabe enden soll.

Das ist nützlich, wenn ein Modell sonst weiterredet, in neue Rollen springt oder Formatgrenzen ignoriert.

Aber Vorsicht:
Eine unpassende Stop-Sequenz kann lange Antworten frühzeitig abschneiden.

8. Speicher, Geschwindigkeit und Hardware

Großer Kontext ist vor allem ein Hardware-Thema.

Mehr Kontext kostet Speicher

Je größer num_ctx, desto mehr Speicher wird für den KV-Cache und die Verarbeitung benötigt. Das heißt:

Auswirkungen in der Praxis

Wenn du lokal arbeitest, merkst du das oft so:

Wichtiger praktischer Zusammenhang

Ein kleines Modell mit großem Kontext kann manchmal praktikabler sein als ein großes Modell mit riesigem Kontext.

Beispielhaft:

9. Modellgrenzen: Nicht jedes Modell ist für riesige Kontexte geeignet

Das ist vielleicht der wichtigste praktische Rat überhaupt:

Ollama kann nur das freischalten, was Modell und Hardware sinnvoll hergeben.

Wenn ein Modell von Haus aus eher auf 4k, 8k oder 16k ausgelegt ist, bringt es oft wenig, einfach num_ctx extrem hochzusetzen.

Worauf du achten solltest

Beim gewählten Modell prüfen:

Ein Modell mit offiziell guter Long-Context-Unterstützung ist für Dokumentanalyse oft viel wertvoller als ein Modell, das nur theoretisch groß konfigurierbar ist.

10. Typische Anwendungsfälle und sinnvolle Einstellungen

A. Langer Chat mit viel Gesprächsverlauf

Ziel:

Empfehlung:

Warum?
Der Chat-Verlauf ist wichtiger als riesige Einzelausgaben.

B. Dokumentanalyse großer Texte

Ziel:

Empfehlung:

Warum?
Das Modell muss viel lesen, aber oft nicht extrem viel schreiben.

C. Lange Essays, Berichte, Blogartikel

Ziel:

Empfehlung:

Warum?
Der eigentliche Schreibraum ist hier besonders wichtig.

D. Code-Assistenz mit größeren Projekten

Ziel:

Empfehlung:

Warum?
Sowohl Kontext als auch Antwortlänge sind relevant. Besonders bei Refactoring, Architekturvorschlägen oder Datei-übergreifender Analyse.

11. Wie man Konfigurationen sinnvoll testet

Die beste Einstellung findet man selten nur theoretisch. Sinnvoll ist ein systematisches Vorgehen.

Schritt 1: Das Ziel definieren

Willst du vor allem:

Je nach Ziel verschiebt sich die optimale Konfiguration.

Schritt 2: Erst konservativ starten

Zum Beispiel:

Dann prüfen:

Schritt 3: Nur einen Wert auf einmal erhöhen

Erhöhe entweder:

Nicht alles gleichzeitig hochdrehen, sonst ist schwer erkennbar, was geholfen oder geschadet hat.

Schritt 4: Mit echten Aufgaben testen

Nicht nur mit Mini-Prompts. Nutze:

Nur dann siehst du, ob die Konfiguration wirklich passt.

12. Praktische Faustregeln

Wenn du große Dokumente verarbeiten willst:

Erhöhe zuerst num_ctx.

Wenn du längere Antworten willst:

Erhöhe zuerst num_predict.

Wenn Antworten trotz hohem num_predict kurz bleiben:

Dann liegt es oft am Prompt oder an Stop-Kriterien, nicht nur an der Token-Grenze.

Wenn das Modell frühere Infos vergisst:

Dann ist oft num_ctx zu klein oder der relevante Kontext wird im Chat verdrängt.

Wenn das Modell langsam wird oder abstürzt:

Dann ist num_ctx möglicherweise zu hoch für dein Modell oder deine Hardware.

Wenn lange Antworten schlechter werden:

Dann nicht nur num_predict erhöhen, sondern:

13. Beispielhafte Denkmuster statt „ein bester Wert“

Es gibt keinen universell besten Wert für num_ctx oder num_predict.

Stattdessen sind diese Denkmuster nützlich:

„Ich will, dass das Modell mehr erinnert“

→ num_ctx erhöhen

„Ich will, dass es nicht mitten im Artikel aufhört“

→ num_predict erhöhen

„Ich will lange Dokumente und dann ausführliche Ausgaben“

→ beide erhöhen, Hardware und Modellgrenzen beachten

„Ich will bessere Qualität bei langen Antworten“

→ nicht nur Tokenlimits anheben, sondern Sampling und Prompt verbessern

14. Typische Missverständnisse

Missverständnis 1:

„Großer Kontext heißt automatisch gute Langzeit-Erinnerung.“

Nicht unbedingt. Das Modell kann Informationen formal im Fenster haben, sie aber nicht optimal gewichten.

Missverständnis 2:

„Wenn ich num_predict riesig setze, bekomme ich automatisch lange Antworten.“

Nein. Es ist nur das Maximum. Der Prompt und das Modellverhalten entscheiden mit.

Missverständnis 3:

„Ich kann jedes Modell einfach auf 64k oder 128k Kontext stellen.“

Technisch vielleicht teilweise, aber sinnvoll und qualitativ stabil ist das nicht bei jedem Modell.

Missverständnis 4:

„Wenn Antworten abgeschnitten werden, brauche ich nur mehr num_ctx.“

Nicht unbedingt. Oft ist dann eher num_predict zu klein.

15. Konkrete Kurzempfehlungen

Wenn du mit Ollama arbeitest und einfach praktikabel starten willst:

Für allgemeine Nutzung

Für große Dokumente

Für lange Artikel/Erklärungen

Für sehr anspruchsvolle Long-Context-Aufgaben

16. Fazit

Die beiden wichtigsten Ollama-Werte für dein Anliegen sind:

Man kann sich das so merken:

Wenn du große Kontexte verarbeiten willst, musst du num_ctx erhöhen.
Wenn du lange Antworten möchtest, musst du num_predict erhöhen.
Wenn du beides willst, musst du beides erhöhen — aber dann steigen auch die Anforderungen an Modell, Speicher und Laufzeit.

Der wichtigste praktische Punkt ist dabei:
Nicht nur größer einstellen, sondern passend einstellen.

Denn ein riesiger Kontext bringt wenig, wenn:

Die beste Konfiguration ist deshalb immer ein Kompromiss aus:

gemma4:12b

Ein gutes Modell, aber Vorsicht beim Vibe-Coding!

gemma4:12b

gemma4:12b - Web Development Fähigkeiten

Bist du gut im Programmieren mit PHP, JavaScript, CSS und HTML? Bitte benenne mir ausführlich deine Fähigkeiten.

Ja, ich kann dich bei der Entwicklung mit HTML, CSS, JavaScript und PHP sehr gut unterstützen. Da ich auf einer riesigen Menge an Code, Dokumentationen und Best Practices trainiert wurde, kann ich sowohl als "Code-Generator" als auch als "Debugger" und "Architekt" fungieren.

Hier ist eine detaillierte Aufschlüsselung meiner Fähigkeiten in den jeweiligen Bereichen:

1. HTML (Struktur & Semantik)

Ich beherrsche die Grundlagen und fortgeschrittenen Aspekte von HTML5:

2. CSS (Design & Layout)

Ich kann dir helfen, Webseiten optisch ansprechend und funktional zu gestalten:

3. JavaScript (Interaktivität & Logik)

Hier gehe ich weit über einfaches "Klicken" hinaus:

4. PHP (Backend-Entwicklung)

Ich kann die Logik auf dem Server für dich umsetzen:

Wie ich dich konkret unterstützen kann:

  1. Code-Erstellung: Du beschreibst mir eine Funktion (z.B. "Schreibe ein PHP-Skript, das Daten aus einer MySQL-Datenbank zieht und als JSON ausgibt"), und ich schreibe dir den fertigen Code.
  2. Debugging: Wenn du eine Fehlermeldung erhältst oder dein Code nicht so funktioniert wie gewünscht, kopiere den Code und die Fehlermeldung hier hinein. Ich analysiere die Fehlerquelle und korrigiere sie.
  3. Refactoring: Gib mir einen funktionierenden, aber "unsauberen" Codeabschnitt, und ich mache ihn effizienter, lesbarer und sicherer (Clean Code).
  4. Erklärungen: Wenn du nicht verstehst, warum ein bestimmter Code funktioniert (oder warum er abstürzt), kann ich dir die Konzepte Schritt für Schritt erklären.
  5. Conversion: Ich kann Code von einer Sprache in eine andere übersetzen (z.B. von jQuery zu modernem Vanilla JS).

Einfach anfangen: Du kannst mir direkt eine Aufgabe stellen, wie zum Beispiel: "Erstelle mir ein Kontaktformular mit HTML und CSS, das auf Mobilgeräten gut aussieht und die Daten per PHP verarbeitet."

gemma4:12b

gemma4:12b - Test (Admin-Bar in WP nur beim Hovern)

Kannst du mir eine WordPress-Plugin schreiben, das die Admin-Bar so macht, dass diese sich nur aufklappt, wenn man mit der Maus den oberen Bildschirmrand berührt?

Hier ist eine elegante Lösung für dein Vorhaben. Um die gewünschte Funktionalität umzusetzen, kombinieren wir CSS für eine flüssige Animation und JavaScript, um die Position der Maus im Verhältnis zum oberen Rand des Browsers zu überwachen.

Die Funktionsweise der Lösung 🛠️

Anstatt die Admin-Bar hart über CSS zu verstecken (was oft zu Sprüngen im Layout führt), nutzen wir einen Hybrid-Ansatz:

  1. CSS-Transition: Die Admin-Bar erhält eine opacity-Eigenschaft und wird standardmäßig auf $0$ gesetzt. Dies sorgt dafür, dass sie „sanft“ ein- und ausblendet, anstatt abrupt zu erscheinen.
  2. JavaScript-Überwachung: Ein kleiner Skriptblock prüft kontinuierlich die Y-Koordinate der Mausbewegung. Sobald sich der Cursor im Bereich des oberen Randes (z. B. innerhalb von $60$ Pixeln) befindet, wird eine CSS-Klasse hinzugefügt, die die Sichtbarkeit aktiviert.

Der Plugin-Code

Du kannst diesen Code direkt in eine neue Datei namens hide-admin-bar-on-hover.php kopieren und in deinen Plugins-Ordner hochladen.

<?php
/**
 * Plugin Name: Elegante Admin-Bar (Hover)
 * Description: Blendet die WordPress-Admin-Bar standardmäßig aus und zeigt sie nur an, wenn die Maus den oberen Bereich des Bildschirms berührt.
 * Version: 1.0
 * Author: Dein Name
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Direkter Zugriff verhindern
}

function hab_hide_admin_bar_script() {
    ?>
    <style>
        /* Die Admin-Bar wird unsichtbar gemacht, aber bleibt im DOM */
        #wpadminbar {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out, visibility 0.3s;
        }

        /* Diese Klasse wird per JavaScript hinzugefügt, wenn die Maus oben ist */
        #wpadminbar.is-visible {
            opacity: 1;
            visibility: visible;
        }
    </style>

    <script>
    (function() {
        document.addEventListener('DOMContentLoaded', function() {
            var adminBar = document.getElementById('wpadminbar');
            if (!adminBar) return;

            // Definition des Bereichs (in Pixeln vom oberen Rand)
            var threshold = 60; 

            document.addEventListener('mousemove', function(e) {
                // Prüfen, ob die Maus im oberen Bereich ist
                if (e.clientY <= threshold) {
                    adminBar.classList.add('is-visible');
                } else {
                    adminBar.classList.remove('is-visible');
                }
            });
        });
    })();
    </script>
    <?php
}
add_action('wp_head', 'hab_hide_admin_bar_script');

Anleitung zur Installation und Anpassung 📝

Um dieses Plugin zu aktivieren und zu nutzen, folge diesen Schritten:

  1. Plugin erstellen:
    • Erstelle auf deinem Computer einen Ordner namens hide-admin-bar-on-hover.
    • Erstelle darin eine Datei namens hide-admin-bar-on-hover.php und kopiere den obigen Code hinein.
  2. Installation:
    • Lade den gesamten Ordner per FTP oder über den WordPress-Dateimanager in den Verzeichnispfad /wp-content/plugins/ hoch.
  3. Aktivierung:
    • Navigiere im WordPress-Backend zu Plugins und aktiviere das Plugin „Elegante Admin-Bar (Hover)“.
  4. Feinabstimmung:
    • Sollte die Admin-Bar zu spät oder zu früh erscheinen, kannst du den Wert threshold = 60; im Code anpassen. Ein höherer Wert vergrößert die „erkennbare“ Zone am oberen Rand des Browsers.

Warum diese Methode sinnvoll ist 💡

Diese technische Umsetzung bietet gegenüber einer einfachen Lösung durch CSS einige Vorteile:

Stelle sicher, dass du nach der Installation kurz testest, ob die Animation flüssig läuft. Falls du eine spezifische Größe für den Bereich benötigst, kannst du die Variable im Code jederzeit anpassen.

Claude Opus 4.6' Meinung

Code-Review: Elegante Admin-Bar (Hover)

Das Plugin in hide-admin-bar-on-hover.php ist funktional und für seinen Zweck solide geschrieben. Es gibt jedoch einige Verbesserungspunkte, die ich in die Kategorien Funktionalität, Performance und Best Practices aufteile:

✅ Was gut ist

  1. Sicherheitscheck mit !defined('ABSPATH') – korrekt.
  2. CSS-Transitions für sanftes Ein-/Ausblenden – gute UX.
  3. IIFE-Pattern im JavaScript verhindert globale Variablen-Verschmutzung.
  4. Null-Check auf adminBar – defensives Programmieren.
  5. DOMContentLoaded stellt sicher, dass das DOM bereit ist.

⚠️ Verbesserungspotenzial

1. Performance – mousemove feuert extrem oft

Das mousemove-Event feuert dutzende Male pro Sekunde. Ohne Throttling wird bei jeder Mausbewegung classList.add/remove aufgerufen – auch wenn sich der Zustand nicht ändert.

2. Nur im Frontend, nicht im Admin-Bereich

Die Funktion hab_hide_admin_bar_script wird auch im Backend geladen, was dort unerwünscht sein könnte.

3. Inline-CSS/JS statt enqueuete Dateien

WordPress Best Practice ist wp_enqueue_script / wp_enqueue_style, allerdings ist bei so wenig Code Inline vertretbar.

4. Kein mouseleave-Fallback für den Fensterrand

Wenn die Maus das Browserfenster nach oben verlässt, wird kein mousemove mehr gefeuert – die Bar bleibt dann sichtbar hängen.

Optimierte Version

Die überarbeitete Version enthält Throttling, Zustandsprüfung, Frontend-Only-Check und ein mouseleave-Fallback:

<?php
/**
 * Plugin Name: Elegante Admin-Bar (Hover)
 * Description: Blendet die WordPress-Admin-Bar standardmäßig aus und zeigt sie nur an, wenn die Maus den oberen Bereich des Bildschirms berührt.
 * Version: 1.1
 * Author: Dein Name
 */

if (!defined('ABSPATH')) {
  exit;
}

function hab_hide_admin_bar_script()
{
  // Nur im Frontend anwenden, nicht im Admin-Bereich
  if (is_admin()) {
    return;
  }

  // Nur ausgeben, wenn die Admin-Bar auch tatsächlich angezeigt wird
  if (!is_admin_bar_showing()) {
    return;
  }
  ?>
  <style>
    #wpadminbar {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out, visibility 0.3s;
      /* Verhindert, dass die unsichtbare Bar Klicks blockiert */
      pointer-events: none;
    }

    #wpadminbar.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    /* Kompensiert den Margin-Top, den WP für die Admin-Bar setzt */
    html.hab-bar-hidden {
      margin-top: 0 !important;
    }
  </style>

  <script>
    (function () {
      document.addEventListener('DOMContentLoaded', function () {
        var adminBar = document.getElementById('wpadminbar');
        if (!adminBar) return;

        var threshold = 60;
        var isVisible = false;

        // html-Element-Klasse setzen, um den oberen Margin zu entfernen
        document.documentElement.classList.add('hab-bar-hidden');

        function showBar() {
          if (!isVisible) {
            isVisible = true;
            adminBar.classList.add('is-visible');
            document.documentElement.classList.remove('hab-bar-hidden');
          }
        }

        function hideBar() {
          if (isVisible) {
            isVisible = false;
            adminBar.classList.remove('is-visible');
            document.documentElement.classList.add('hab-bar-hidden');
          }
        }

        // Throttle: max. alle 50ms ausführen
        var lastCall = 0;
        document.addEventListener('mousemove', function (e) {
          var now = Date.now();
          if (now - lastCall < 50) return;
          lastCall = now;

          if (e.clientY <= threshold) {
            showBar();
          } else {
            hideBar();
          }
        });

        // Fallback: Maus verlässt das Fenster → Bar ausblenden
        document.addEventListener('mouseleave', function () {
          hideBar();
        });
      });
    })();
  </script>
  <?php
}

add_action('wp_head', 'hab_hide_admin_bar_script');

Zusammenfassung der Änderungen

Verbesserung Begründung
is_admin() / is_admin_bar_showing() Guards Verhindert unnötige Ausgabe im Backend oder wenn die Bar deaktiviert ist
pointer-events: none Die unsichtbare Bar blockiert keine Klicks auf darunterliegende Elemente mehr
Zustandsvariable isVisible Verhindert redundante DOM-Manipulationen bei jedem mousemove
Throttling (50ms) Reduziert die Event-Verarbeitung von ~60/s auf ~20/s
mouseleave-Event Bar wird ausgeblendet, wenn die Maus das Fenster verlässt
hab-bar-hidden Klasse auf <html> Kompensiert den margin-top: 32px, den WordPress für die Admin-Bar setzt

Das Original war bereits nutzbar, die optimierte Version ist jedoch robuster und performanter.

gemma4:12b

Claude Opus 4.6 testet Ollama (gemma4:12b)

Anmerkung: Damit Ollama so lange Antworten generieren kann, muss man folgende Werte setzen:

Diese hohen Werte sollten eigentlich viel RAM und Rechenleistung fordern. Davon habe ich aber nichts gemerkt.
Mehr zu Ollama

Schreibe mir eine schwierige Aufgabe für eine KI von Ollama (gemma4:12b), die die Fähigkeiten in Bezug auf web Development testen soll: es soll vor alle der Umgang mit HTML, CSS, JavaScript, PHP und WordPress getestet werden.

KI-Aufgabe: WordPress Admin-Bar Hover Plugin

Hier ist eine anspruchsvolle, mehrstufige Aufgabe, die alle genannten Technologien abdeckt und die Fähigkeiten von Gemma 4 12B umfassend testet:

Die Aufgabe (zum Kopieren an die KI)

Erstelle ein vollständiges WordPress-Plugin namens "Admin Bar Hover", das folgende Anforderungen erfüllt:

## Kernfunktion
Die WordPress Admin-Bar (#wpadminbar) soll standardmäßig versteckt sein (nur 3px hoher farbiger Streifen sichtbar) und erst beim Hover sanft eingeblendet werden. Der gesamte Body-Content soll KEINEN margin-top mehr haben, wenn die Bar versteckt ist.

## Anforderungen im Detail

### 1. PHP (Plugin-Struktur)
- Erstelle eine saubere Plugin-Hauptdatei mit korrektem WordPress Plugin Header.
- Erstelle eine Settings-Page unter "Einstellungen → Admin Bar Hover" im WordPress-Backend.
- Nutze die WordPress Settings API (register_setting, add_settings_section, add_settings_field).
- Folgende Optionen sollen konfigurierbar sein:
  a) Streifenfarbe (Color Picker, Default: #23282d)
  b) Streifenhöhe in Pixel (Number Input, Default: 3)
  c) Animation-Dauer in Millisekunden (Number Input, Default: 300)
  d) Nur für Admins aktiv (Checkbox)
  e) Plugin aktivieren/deaktivieren (Toggle-Checkbox)
- Alle Optionen müssen sanitized und validiert werden.
- Nutze wp_enqueue_scripts und admin_enqueue_scripts korrekt, um Assets nur dort zu laden, wo sie gebraucht werden.

### 2. CSS
- Die Admin-Bar soll per CSS transform: translateY() animiert werden (GPU-beschleunigt).
- Erstelle eine separate CSS-Datei für das Frontend.
- Nutze CSS Custom Properties (Variablen), die per PHP inline gesetzt werden, um die Einstellungen zu übertragen.
- Der Übergang soll eine cubic-bezier Timing-Funktion nutzen.
- Stelle sicher, dass der Body-Margin-Top korrekt angepasst wird (auch für das html-Element, das WordPress ebenfalls mit margin-top versieht).
- Mobile Responsiveness: Auf Bildschirmen unter 783px (WordPress mobile Breakpoint) soll das Plugin deaktiviert sein.

### 3. JavaScript
- Erstelle eine separate JS-Datei.
- Implementiere eine Debounce-Funktion für das mouseenter/mouseleave Event.
- Nutze einen MutationObserver, der überwacht, ob WordPress den margin-top dynamisch ändert und dies sofort korrigiert.
- Füge ein data-Attribut am body hinzu, das den aktuellen Zustand trackt (data-adminbar-state="hidden"|"visible").
- Das Script soll als ES6-Modul geschrieben sein (oder zumindest modernes JS mit const/let, Arrow Functions, Template Literals nutzen).
- Füge eine Accessibility-Verbesserung hinzu: Bei Fokus auf ein Element innerhalb der Admin-Bar soll diese ebenfalls eingeblendet werden (Keyboard-Navigation).

### 4. HTML (Settings Page)
- Die Settings-Seite soll ein aufgeräumtes Layout haben.
- Füge eine Live-Vorschau hinzu: Ein kleiner Bereich auf der Settings-Seite simuliert das Verhalten der Admin-Bar mit den aktuellen Einstellungen.
- Nutze semantisches HTML5 (fieldset, legend, etc.).

### 5. Bonus-Anforderungen
- Füge eine Uninstall-Routine hinzu (uninstall.php), die alle Plugin-Optionen aus der Datenbank entfernt.
- Internationalisierung: Alle Strings sollen mit __() bzw. esc_html__() übersetzbar sein.
- Füge PHPDoc-Kommentare zu allen Funktionen hinzu.

## Dateistruktur

admin-bar-hover/
├── admin-bar-hover.php
├── uninstall.php
├── css/
│   ├── frontend.css
│   └── admin-settings.css
├── js/
│   ├── frontend.js
│   └── admin-settings.js
└── languages/
    └── (leer, aber Ordner anlegen)
    
Erstelle ALLE Dateien mit vollständigem, produktionsreifem Code. Keine Platzhalter, keine TODOs.

Warum diese Aufgabe besonders anspruchsvoll ist

Kategorie Was getestet wird
PHP WordPress Settings API, Hooks/Filters, Sanitization, Conditional Loading, Plugin-Lifecycle
CSS GPU-Animationen, Custom Properties, Media Queries, WordPress-spezifische Selektoren, Spezifitätskonflikte
JavaScript Debounce-Pattern, MutationObserver API, Event Delegation, Accessibility, State Management
HTML Semantik, Formulare, Live-Vorschau, WordPress-Admin-UI-Konventionen
WordPress Plugin-Header, Hooks-Architektur, Settings API, Enqueue-System, i18n, Uninstall-Routine

Die Aufgabe erfordert, dass alle Technologien zusammenspielen – die PHP-Einstellungen müssen per CSS Custom Properties ans Frontend übergeben werden, das JavaScript muss mit den CSS-Animationen harmonieren, und die Settings-Page braucht eine JS-gesteuerte Live-Vorschau. Das macht Einzelwissen allein nicht ausreichend – die KI muss das Zusammenspiel verstehen.

gemma4:12b (Antwort)

Da die Erstellung einer kompletten Plugin-Struktur mit mehreren Dateien in einer einzigen Antwort sehr umfangreich ist, habe ich den Code so strukturiert, dass er exakt deinen Anforderungen entspricht.

Hier sind alle Dateien für das Plugin "Admin Bar Hover".

1. Die Hauptdatei: admin-bar-hover.php

Diese Datei enthält die Logik, die Settings API und die Übergabe der Variablen an das CSS.

<?php
/**
 * Plugin Name: Admin Bar Hover
 * Description: Versteckt die WordPress Admin-Bar und zeigt sie nur bei Hover oder Fokus an.
 * Version: 1.0.0
 * Author: Dein Name
 * Text Domain: admin-bar-hover
 */

if ( ! defined( 'ABSPATH' ) ) exit;

/**
 * Define constants for paths.
 */
define( 'ABH_PATH', plugin_dir_path( __FILE__ ) );
define( 'ABH_URL', plugin_dir_url( __FILE__ ) );

/**
 * Register settings and pages.
 */
add_action( 'admin_menu', 'abh_register_settings_menu' );
function abh_register_settings_menu() {
    add_options_page(
        __( 'Admin Bar Hover Settings', 'admin-bar-hover' ),
        __( 'Admin Bar Hover', 'admin-bar-hover' ),
        'admin-bar-hover',
        'abh-settings',
        'abh_render_settings_page'
    );
}

/**
 * Register settings using Settings API.
 */
add_action( 'admin_init', 'abh_register_settings' );
function abh_register_settings() {
    register_setting( 'abh_settings_group', 'abh_enabled', 'sanitize_callback_abh_enabled' );
    register_setting( 'abh_settings_group', 'abh_color', 'sanitize_callback_abh_color' );
    register_setting( 'abh_settings_group', 'abh_height', 'sanitize_callback_abh_height' );
    register_setting( 'abh_settings_group', 'abh_duration', 'sanitize_callback_abh_duration' );
    register_setting( 'abh_settings_group', 'abh_admin_only', 'sanitize_callback_abh_admin_only' );
}

function sanitize_callback_abh_enabled($val) { return (bool)$val; }
function sanitize_callback_abh_color($val) { return esc_attr($val); }
function sanitize_callback_abh_height($val) { return intval($val); }
function sanitize_callback_abh_duration($val) { return intval($val); }
function sanitize_callback_abh_admin_only($val) { return (bool)$val; }

/**
 * Render the settings page.
 */
function abh_render_settings_page() {
    ?>
    <div class="wrap">
        <h1><?php _e( 'Admin Bar Hover Settings', 'admin-bar-hover' ); ?></h1>
        <form method="post" action="options.php">
            <?php
            settings_fields( 'abh_settings_group' );
            ?>
            <table class="form-table">
                <tr valign="top">
                    <th scope="row"><?php _e( 'Enable Plugin', 'admin-bar-hover' ); ?></th>
                    <td>
                        <input type="checkbox" name="abh_enabled" value="1" <?php checked(1, get_option('abh_enabled')); ?> />
                        <p class="description"><?php _e( 'Enable the hover effect for the admin bar.', 'admin-bar-hover' ); ?></p>
                    </td>
                </tr>
                <tr valign="top">
                    <th scope="row"><?php _e( 'Strip Color', 'admin-bar-hover' ); ?></th>
                    <td>
                        <input type="color" name="abh_color" value="<?php echo esc_attr(get_option('abh_color', '#23282d')); ?>" />
                    </td>
                </tr>
                <tr valign="top">
                    <th scope="row"><?php _e( 'Strip Height (px)', 'admin-bar-hover' ); ?></th>
                    <td>
                        <input type="number" name="abh_height" value="<?php echo esc_attr(get_option('abh_height', '3')); ?>" />
                    </td>
                </tr>
                <tr valign="top">
                    <th scope="row"><?php _e( 'Animation Duration (ms)', 'admin-bar-hover' ); ?></th>
                    <td>
                        <input type="number" name="abh_duration" value="<?php echo esc_attr(get_option('abh_duration', '300')); ?>" />
                    </td>
                </tr>
                <tr valign="top">
                    <th scope="row"><?php _e( 'Admin Only', 'admin-bar-hover' ); ?></th>
                    <td>
                        <input type="checkbox" name="abh_admin_only" value="1" <?php checked(1, get_option('abh_admin_only')); ?> />
                        <p class="description"><?php _e( 'Only show the effect for logged-in administrators.', 'admin-bar-hover' ); ?></p>
                    </td>
                </tr>
            </table>
            <?php submit_button(); ?>
        </form>

        <hr>
        <h2><?php _e( 'Live Preview', 'admin-bar-hover' ); ?></h2>
        <div id="abh-preview-container" style="padding: 20px; border: 1px solid #ccc; background: #f9f9f9;">
            <div class="abh-preview-bar"></div>
            <p><small>Simulated Admin Bar Behavior</small></p>
        </div>
    </div>
    <style>
        .abh-preview-bar {
            height: <?php echo get_option('abh_height', 3); ?>px;
            background: <?php echo get_option('abh_color', '#23282d'); ?>;
            width: 100%;
            transition: height 0.3s;
        }
        #abh-preview-container:hover .abh-preview-bar {
            height: 40px; /* Simulating expansion */
        }
    </style>
    <?php
}

/**
 * Enqueue assets for frontend and admin.
 */
add_action( 'wp_enqueue_scripts', 'abh_enqueue_assets' );
function abh_enqueue_assets() {
    if ( ! get_option('abh_enabled') ) return;

    // Check if admin-only is disabled or if user is admin
    $admin_only = get_option('abh_admin_only');
    if ( $admin_only && ! current_user_can( 'manage_options' ) ) {
        return;
    }

    // Inject CSS Variables
    $custom_css = "
        :root {
            --abh-color: " . get_option('abh_color', '#23282d') . ";
            --abh-height: " . get_option('abh_height', '3') . "px;
            --abh-duration: " . get_option('abh_duration', '300') . "ms;
        }
    ";
    wp_add_inline_style( 'wp-block-library', $custom_css );

    wp_enqueue_style( 'abh-frontend-css', abh_get_asset_uri('css/frontend.css') );
    wp_enqueue_script( 'abh-frontend-js', abh_get_asset_uri('js/frontend.js'), array(), '1.0', true );
}

/**
 * Helper to get asset URL.
 */
function abh_get_asset_uri($path) {
    return abh_url_path( $path );
}

function abh_url_path($path) {
    $path = str_replace(ABH_PATH, '', $path);
    return ABH_URL . $path;
}

2. Die Uninstall-Datei: uninstall.php

<?php
/**
 * Uninstall logic for Admin Bar Hover.
 */
if ( ! defined( 'WP_UNINSTALL_PLUGIN' ) ) {
    exit;
}

// Remove options from the database
delete_option( 'abh_enabled' );
delete_option( 'abh_color' );
delete_option( 'abh_height' );
delete_option( 'abh_duration' );
delete_option( 'abh_admin_only' );

3. Frontend CSS: css/frontend.css

/* Admin Bar Hover Styles */
@media screen and (min-width: 784px) {
    /* Target the WordPress admin bar specifically */
    #wpadminbar {
        background-color: var(--abh-color);
        height: var(--abh-height) !important;
        transition: transform var(--abh-duration) cubic-bezier(0.4, 0, 0.2, 1), height var(--abh-duration) ease;
        transform: translateY(0);
        will-change: transform, height;
    }

    /* The state when it's hidden */
    body[data-adminbar-state="hidden"] #wpadminbar {
        height: var(--abh_height) !important;
        transform: translateY(0);
    }

    /* When visible (via JS class or attribute) */
    body[data-adminbar-state="visible"] #wpadminbar {
        height: 40px !important; /* Standard WordPress height approx */
        transform: translateY(0);
    }

    /* Fix for the body margin. WP adds -20px to body if admin bar is present. */
    body.admin-bar .abh-hidden_fix {
        margin-top: 0 !important;
    }

    /* Ensure the base html element doesn't have extra spacing when hidden */
    html {
        margin-top: 0 !important;
    }
}

/* Hide on mobile by default (WP standard) */
@media screen and (max-width: 783px) {
    #wpadminbar {
        display: none !important;
    }
}

4. Frontend JS: js/frontend.js

/**
 * Admin Bar Hover Frontend Logic
 */
(function() {
    'use strict';

    const adminBar = document.getElementById('wpadminbar');
    const body = document.body;

    /**
     * Debounce function to limit execution frequency.
     */
    function debounce(func, wait) {
        let timeout;
        return function(...args) {
            const context = this;
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(context, args), wait);
        };
    }

    /**
     * Update the state attribute on body.
     */
    const setBarState = (state) => {
        body.setAttribute('data-adminbar-state', state);
    };

    // Event Handlers
    const handleMouseEnter = () => {
        setBarState('visible');
    };

    const handleMouseLeave = () => {
        setBarState('hidden');
    };

    /**
     * Accessibility: Show bar when any element inside it is focused.
     */
    const handleFocus = () => {
        if (adminBar && adminBar.contains(document.activeElement)) {
            setBarState('visible');
        }
    };

    // Initialization
    const init = () => {
        if (!adminBar) return;

        // Mouse events with debounce
        adminBar.addEventListener('mouseenter', debounce(handleMouseEnter, 10));
        adminBar.addEventListener('mouseleave', debounce(handleMouseLeave, 50));

        // Accessibility focus
        adminBar.addEventListener('focusin', handleFocus);

        /**
         * MutationObserver to watch for WordPress dynamic styles/classes
         * that might override our logic (especially on mobile or during transitions).
         */
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                // If WP tries to change the height via inline style, we force it back 
                // based on the data-attribute logic.
                if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                    const state = body.getAttribute('data-adminbar-state');
                    if (state === 'hidden') {
                        adminBar.style.height = 'var(--abh-height)';
                    } else {
                        adminBar.style.height = '40px';
                    }
                }
            });
        });

        observer.observe(adminBar, { attributes: true });
    };

    // Run when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();

5. Admin Settings CSS & JS (Optional/Add-ons)

Da die Einstellungen bereits im PHP-Teil gerendert werden, sind diese Dateien für das Backend-Design gedacht:

css/admin-settings.css

.abh-preview-container {
    border: 2px dashed #ccc;
    padding: 20px;
    margin-top: 20px;
}
.abh-preview-bar {
    background: #23282d;
    height: 3px;
    width: 100%;
    transition: all 0.3s ease;
}
#abh-preview-container:hover .abh-preview-bar {
    height: 40px;
}

js/admin-settings.js
(Da die Preview im Beispiel oben via CSS gelöst wurde, kann diese Datei leer bleiben oder für komplexere UI-Interaktionen genutzt werden).

6. Verzeichnisstruktur (Zusammenfassung)

Stelle sicher, dass du die Ordner wie folgt anlegst:

  1. admin-bar-hover/
    • admin-bar-hover.php
    • uninstall.php
    • css/
      • frontend.css
      • admin-settings.css
    • js/
      • frontend.js
      • admin-settings.js
    • languages/

Anleitung zur Installation:

  1. Erstelle einen Ordner namens admin-bar-hover in deinem wp-content/plugins/ Verzeichnis.
  2. Kopiere die oben genannten Dateien hinein.
  3. Aktiviere das Plugin im WordPress Dashboard.
  4. Gehe zu Einstellungen -> Admin Bar Hover, um die Farben und Animationen anzupassen.

Besonderheiten der Implementierung:

Analyse (durch Claude Opus 4.6)

Das Plugin wurde von Gemma 4 (12B) generiert und hat eine solide Grundidee, weist aber mehrere Fehler und Schwächen auf. Hier eine detaillierte Analyse:

🔴 Kritische Fehler

1. Falscher Capability-Parameter in add_options_page()

In admin-bar-hover.php wird 'admin-bar-hover' als Capability übergeben – das ist der Text-Domain, keine WordPress-Capability:

add_options_page(
    __('Admin Bar Hover Settings', 'admin-bar-hover'),
    __('Admin Bar Hover', 'admin-bar-hover'),
    'admin-bar-hover',  // ❌ Das ist keine gültige Capability!
    'abh-settings',
    'abh_render_settings_page'
);

Korrekt wäre 'manage_options'. Mit dem aktuellen Code kann kein Benutzer die Einstellungsseite sehen (außer es wurde zufällig eine Custom-Capability mit diesem Namen registriert).

2. CSS-Variable inkonsistent benannt

In frontend.css wird --abh_height (mit Unterstrich) verwendet, aber in PHP und überall sonst --abh-height (mit Bindestrich):

body[data-adminbar-state="hidden"] #wpadminbar {
    height: var(--abh_height) !important;  /* ❌ Unterstrich statt Bindestrich */
}

Das bedeutet, der Hidden-State funktioniert nicht korrekt – die Höhe wird nicht angewendet.

3. Deprecated register_setting()-Aufruf

In admin-bar-hover.php wird der dritte Parameter als String (Funktionsname) übergeben:

register_setting('abh_settings_group', 'abh_enabled', 'sanitize_callback_abh_enabled');

Seit WordPress 4.7 erwartet register_setting() ein Array als dritten Parameter:

register_setting('abh_settings_group', 'abh_enabled', [
    'sanitize_callback' => 'sanitize_callback_abh_enabled',
    'type' => 'boolean',
    'default' => false,
]);

4. Fehlende do_settings_sections()

In abh_render_settings_page werden settings_fields() aufgerufen, aber keine Settings-Sections/Fields über die Settings API registriert. Die Felder werden manuell gerendert, was funktioniert, aber inkonsequent ist.

🟡 Mittlere Probleme

5. Checkbox-Werte werden bei Deaktivierung nicht gespeichert

Wenn eine Checkbox nicht angehakt ist, sendet der Browser keinen Wert. Die (bool)$val-Sanitization gibt dann false zurück – aber WordPress speichert gar nichts, wenn der Key fehlt. Es fehlt ein Hidden-Field oder eine explizite Prüfung.

6. html { margin-top: 0 !important; } ist zu aggressiv

In frontend.css wird der margin-top des html-Elements global auf 0 gesetzt. Das überschreibt den WordPress-Standard (margin-top: 32px) immer, nicht nur wenn die Bar versteckt ist. Das führt dazu, dass Seiteninhalte unter der Admin-Bar verschwinden, wenn sie sichtbar wird.

7. wp_add_inline_style hängt von wp-block-library ab

In abh_enqueue_assets:

wp_add_inline_style('wp-block-library', $custom_css);

Wenn ein Theme den Block-Editor nicht nutzt, wird wp-block-library nie geladen – und die CSS-Variablen fehlen komplett. Es sollte an den eigenen Stylesheet angehängt werden:

wp_add_inline_style('abh-frontend-css', $custom_css);

8. MutationObserver-Logik fragwürdig

Im frontend.js überwacht der MutationObserver das style-Attribut der Admin-Bar und setzt es zurück. Das kann zu einer Endlosschleife führen: Observer erkennt Änderung → setzt Style → Observer erkennt erneut Änderung → ...

9. Admin-Bar auf Mobile komplett versteckt

@media screen and (max-width: 783px) {
    #wpadminbar { display: none !important; }
}

Das entfernt die Admin-Bar auf Mobilgeräten komplett – nicht nur das Hover-Verhalten. Nutzer verlieren den Zugang zu Admin-Funktionen auf dem Handy.

10. Kein Initialer data-adminbar-state

Beim Laden setzt das JavaScript keinen initialen State. Der Body hat anfangs kein data-adminbar-state-Attribut, also greift weder der hidden- noch der visible-Selektor im CSS. Die Admin-Bar bleibt im CSS-Defaultzustand (reduzierte Höhe), aber ohne expliziten State.

🟢 Positives

Aspekt Bewertung
Grundstruktur Saubere Trennung in PHP, CSS, JS
Uninstall-Logik uninstall.php räumt Optionen korrekt auf
Accessibility-Ansatz focusin-Event für Tastaturnavigation berücksichtigt
Debounce debounce verhindert Event-Flooding
CSS-Variablen Konfigurierbare Werte über Custom Properties
Live-Preview Netter Ansatz in den Settings

📋 Gesamtbewertung

Kategorie Note
Funktionalität ⭐⭐ (Settings-Seite nicht erreichbar!)
Sicherheit ⭐⭐⭐ (Sanitization vorhanden, aber veraltet)
Code-Qualität ⭐⭐⭐ (ordentliche Struktur, aber Bugs)
Best Practices ⭐⭐ (deprecated APIs, aggressive CSS)
Gesamt ⭐⭐½ / ⭐⭐⭐⭐⭐

Korrigierte Hauptdatei

Hier die wichtigsten Fixes angewendet:

<?php
/**
 * Plugin Name: Admin Bar Hover
 * Description: Versteckt die WordPress Admin-Bar und zeigt sie nur bei Hover oder Fokus an.
 * Version: 1.1.0
 * Author: Dein Name
 * Text Domain: admin-bar-hover
 */

if (!defined('ABSPATH')) exit;

define('ABH_PATH', plugin_dir_path(__FILE__));
define('ABH_URL', plugin_dir_url(__FILE__));

/**
 * Register settings menu with correct capability.
 */
add_action('admin_menu', 'abh_register_settings_menu');
function abh_register_settings_menu()
{
  add_options_page(
    __('Admin Bar Hover Settings', 'admin-bar-hover'),
    __('Admin Bar Hover', 'admin-bar-hover'),
    'manage_options', // ✅ Korrekte Capability
    'abh-settings',
    'abh_render_settings_page'
  );
}

/**
 * Register settings using modern Settings API format.
 */
add_action('admin_init', 'abh_register_settings');
function abh_register_settings()
{
  register_setting('abh_settings_group', 'abh_enabled', [
    'type' => 'boolean',
    'sanitize_callback' => function ($val) { return (bool) $val; },
    'default' => false,
  ]);
  register_setting('abh_settings_group', 'abh_color', [
    'type' => 'string',
    'sanitize_callback' => 'sanitize_hex_color', // ✅ Korrekte WP-Funktion für Farben
    'default' => '#23282d',
  ]);
  register_setting('abh_settings_group', 'abh_height', [
    'type' => 'integer',
    'sanitize_callback' => 'absint',
    'default' => 3,
  ]);
  register_setting('abh_settings_group', 'abh_duration', [
    'type' => 'integer',
    'sanitize_callback' => 'absint',
    'default' => 300,
  ]);
  register_setting('abh_settings_group', 'abh_admin_only', [
    'type' => 'boolean',
    'sanitize_callback' => function ($val) { return (bool) $val; },
    'default' => false,
  ]);
}

/**
 * Render the settings page.
 */
function abh_render_settings_page()
{
  ?>
  <div class="wrap">
    <h1><?php _e('Admin Bar Hover Settings', 'admin-bar-hover'); ?></h1>
    <form method="post" action="options.php">
      <?php settings_fields('abh_settings_group'); ?>
      <table class="form-table">
        <tr valign="top">
          <th scope="row"><?php _e('Enable Plugin', 'admin-bar-hover'); ?></th>
          <td>
            <!-- ✅ Hidden field ensures unchecked = 0 -->
            <input type="hidden" name="abh_enabled" value="0" />
            <input type="checkbox" name="abh_enabled" value="1" <?php checked(1, get_option('abh_enabled')); ?> />
            <p class="description"><?php _e('Enable the hover effect for the admin bar.', 'admin-bar-hover'); ?></p>
          </td>
        </tr>
        <tr valign="top">
          <th scope="row"><?php _e('Strip Color', 'admin-bar-hover'); ?></th>
          <td>
            <input type="color" name="abh_color" value="<?php echo esc_attr(get_option('abh_color', '#23282d')); ?>"/>
          </td>
        </tr>
        <tr valign="top">
          <th scope="row"><?php _e('Strip Height (px)', 'admin-bar-hover'); ?></th>
          <td>
            <input type="number" name="abh_height" min="1" max="20" value="<?php echo esc_attr(get_option('abh_height', 3)); ?>"/>
          </td>
        </tr>
        <tr valign="top">
          <th scope="row"><?php _e('Animation Duration (ms)', 'admin-bar-hover'); ?></th>
          <td>
            <input type="number" name="abh_duration" min="0" max="2000"
                   value="<?php echo esc_attr(get_option('abh_duration', 300)); ?>"/>
          </td>
        </tr>
        <tr valign="top">
          <th scope="row"><?php _e('Admin Only', 'admin-bar-hover'); ?></th>
          <td>
            <input type="hidden" name="abh_admin_only" value="0" />
            <input type="checkbox" name="abh_admin_only" value="1" <?php checked(1, get_option('abh_admin_only')); ?> />
            <p class="description"><?php _e('Only show the effect for logged-in administrators.', 'admin-bar-hover'); ?></p>
          </td>
        </tr>
      </table>
      <?php submit_button(); ?>
    </form>

    <hr>
    <h2><?php _e('Live Preview', 'admin-bar-hover'); ?></h2>
    <div id="abh-preview-container" style="padding: 20px; border: 1px solid #ccc; background: #f9f9f9;">
      <div class="abh-preview-bar"></div>
      <p><small>Simulated Admin Bar Behavior</small></p>
    </div>
  </div>
  <style>
    .abh-preview-bar {
      height: <?php echo intval(get_option('abh_height', 3)); ?>px;
      background: <?php echo esc_attr(get_option('abh_color', '#23282d')); ?>;
      width: 100%;
      transition: height 0.3s;
    }
    #abh-preview-container:hover .abh-preview-bar {
      height: 40px;
    }
  </style>
  <?php
}

/**
 * Enqueue assets for frontend.
 */
add_action('wp_enqueue_scripts', 'abh_enqueue_assets');
function abh_enqueue_assets()
{
  if (!get_option('abh_enabled')) return;
  if (!is_admin_bar_showing()) return; // ✅ Prüfen ob Admin-Bar überhaupt sichtbar

  $admin_only = get_option('abh_admin_only');
  if ($admin_only && !current_user_can('manage_options')) {
    return;
  }

  wp_enqueue_style('abh-frontend-css', ABH_URL . 'css/frontend.css', [], '1.1.0');

  // ✅ Inline-Style an eigenes Stylesheet anhängen
  $custom_css = sprintf(
    ':root { --abh-color: %s; --abh-height: %dpx; --abh-duration: %dms; }',
    esc_attr(get_option('abh_color', '#23282d')),
    intval(get_option('abh_height', 3)),
    intval(get_option('abh_duration', 300))
  );
  wp_add_inline_style('abh-frontend-css', $custom_css);

  wp_enqueue_script('abh-frontend-js', ABH_URL . 'js/frontend.js', [], '1.1.0', true);
}

Korrigiertes CSS mit konsistenten Variablennamen und weniger aggressiven Overrides:

/* Admin Bar Hover Styles */
@media screen and (min-width: 784px) {
  #wpadminbar {
    background-color: var(--abh-color);
    height: var(--abh-height) !important;
    overflow: hidden;
    transition: height var(--abh-duration) cubic-bezier(0.4, 0, 0.2, 1);
    will-change: height;
  }

  /* Hidden state – collapsed to strip */
  body[data-adminbar-state="hidden"] #wpadminbar {
    height: var(--abh-height) !important; /* ✅ Korrekter Variablenname */
  }

  /* Visible state – full height */
  body[data-adminbar-state="visible"] #wpadminbar {
    height: 32px !important; /* ✅ WP Standard-Höhe Desktop ist 32px */
  }

  /* ✅ Nur margin-top anpassen wenn Admin-Bar versteckt */
  body.admin-bar {
    margin-top: var(--abh-height) !important;
  }

  html.wp-toolbar {
    padding-top: 0 !important;
  }
}

/* ✅ Auf Mobile das Plugin deaktivieren, aber Admin-Bar NICHT verstecken */
@media screen and (max-width: 783px) {
  #wpadminbar {
    /* Mobile: Plugin-Effekt deaktivieren, WP-Standard beibehalten */
    height: auto !important;
    transition: none !important;
  }
}

Korrigiertes JavaScript ohne Endlosschleifen-Risiko:

/**
 * Admin Bar Hover Frontend Logic
 */
(function () {
  'use strict';

  const adminBar = document.getElementById('wpadminbar');
  const body = document.body;

  if (!adminBar) return;

  function debounce(func, wait) {
    let timeout;
    return function (...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), wait);
    };
  }

  const setBarState = (state) => {
    body.setAttribute('data-adminbar-state', state);
  };

  // ✅ Initialer State setzen
  setBarState('hidden');

  const handleMouseEnter = () => setBarState('visible');
  const handleMouseLeave = () => setBarState('hidden');

  const handleFocusIn = () => setBarState('visible');
  const handleFocusOut = (e) => {
    // Nur verstecken wenn Fokus die Admin-Bar verlässt
    if (!adminBar.contains(e.relatedTarget)) {
      setBarState('hidden');
    }
  };

  // Mouse events
  adminBar.addEventListener('mouseenter', handleMouseEnter);
  adminBar.addEventListener('mouseleave', debounce(handleMouseLeave, 100));

  // ✅ Accessibility: focusin UND focusout
  adminBar.addEventListener('focusin', handleFocusIn);
  adminBar.addEventListener('focusout', handleFocusOut);

  // ✅ MutationObserver entfernt – verursachte potenzielle Endlosschleife
  // Die CSS-Lösung über data-attributes ist ausreichend.
})();

Fazit

Das von Gemma 4 generierte Plugin ist ein brauchbarer Prototyp, aber nicht produktionsreif. Der kritischste Bug – die falsche Capability 'admin-bar-hover' statt 'manage_options' – macht die Settings-Seite komplett unerreichbar. Zusammen mit dem CSS-Variablen-Tippfehler und der fehlenden initialen State-Setzung würde das Plugin in der Originalform nicht funktionieren. Die korrigierte Version oben behebt alle identifizierten Probleme.

Lokale KI statt teurer APIs: Ein ausführlicher Artikel zum Video

Die Preise für KI-Dienste in der Cloud sind für viele Entwickler inzwischen ein echtes Ärgernis. Monatliche Abos werden eingeschränkt, nutzbare Kontingente sinken, und wer ernsthaft mit KI arbeiten will, landet oft zwangsläufig bei API-Abrechnung nach Verbrauch. Genau an diesem Punkt setzt das Video an: Es zeigt, wie man sich eine lokale KI-Umgebung auf dem eigenen Rechner einrichtet – privat, offline-fähig, schnell und vielseitig einsetzbar.

Dabei geht es ausdrücklich nicht nur um einen simplen Chatbot. Gezeigt wird ein vollständiges Setup für:

Der große Mehrwert des Videos liegt darin, dass nicht nur Klick-für-Klick-Anweisungen gegeben werden, sondern die technischen Grundlagen sauber erklärt werden. Wer die Konzepte verstanden hat, kann sich auch in Zukunft bei neuen Modellen, neuen Tools und neuer Hardware selbst helfen.

https://youtu.be/UngVdAsQEiU

1. Warum lokale KI überhaupt sinnvoll ist

Die Ausgangsthese des Videos ist klar: Cloud-KI ist bequem, aber auf Dauer teuer, eingeschränkt und nicht privat. Lokale KI verspricht dagegen mehrere Vorteile:

Natürlich gibt es auch Nachteile. Lokale Modelle sind oft kleiner und im Durchschnitt schwächer als die größten Cloud-Modelle. Außerdem hängt die Geschwindigkeit stark von der eigenen Hardware ab. Dennoch zeigt das Video, dass lokale KI gerade für viele Coding-Workflows bereits heute erstaunlich brauchbar ist.

2. Die Grundlagen: Wie ein KI-Modell lokal läuft

Bevor konkrete Tools eingerichtet werden, erklärt das Video die wichtigsten technischen Bausteine. Das ist entscheidend, denn nur so versteht man später, warum ein Modell schnell oder langsam ist.

2.1 Parameter: Wie groß ein Modell ist

Fast jedes Sprachmodell wird über seine Anzahl an Parametern beschrieben. Im Video werden Beispiele wie 1B, 27B, 128B oder sogar 862B genannt. Das „B“ steht für Milliarden.

Die Grundregel lautet:

Ein Modell mit hunderten Milliarden Parametern ist auf normaler Consumer-Hardware praktisch nicht lokal nutzbar. Deshalb muss man für ein lokales Setup fast immer auf kleinere oder speziell komprimierte Varianten zurückgreifen.

2.2 Kontextfenster: Wie viel Information gleichzeitig verarbeitet werden kann

Neben den Parametern ist das Kontextfenster zentral. Es beschreibt, wie viel Text, Code oder sonstige Information das Modell gleichzeitig „im Kopf behalten“ kann.

Ein größeres Kontextfenster ist nützlich für:

Aber: Ein großes Kontextfenster kostet zusätzlich Speicher. Das heißt, auch wenn das Basismodell in den Grafikspeicher passt, kann ein zu groß eingestellter Kontext dazu führen, dass das Setup plötzlich deutlich langsamer wird.

3. GPU, VRAM und Arbeitsspeicher: Der eigentliche Flaschenhals

Der vielleicht wichtigste Teil des Videos ist die Erklärung, wo ein Modell überhaupt geladen wird.

3.1 VRAM ist der wichtigste Wert

Lokale Modelle laufen hauptsächlich auf der GPU, also der Grafikkarte. Relevant ist hier vor allem der VRAM (Video RAM), also der dedizierte Speicher der Grafikkarte.

Wenn ein Modell geladen wird, versucht das System, möglichst viel davon direkt in den VRAM zu packen. Das ist der schnellste Pfad.

Beispiel:

3.2 Was passiert, wenn das Modell zu groß ist?

Wenn das Modell mehr Speicher braucht, als der VRAM bietet, passiert Folgendes:

  1. Der VRAM wird vollständig gefüllt.
  2. Der Rest wird in den normalen Arbeitsspeicher (RAM) ausgelagert.

Das funktioniert grundsätzlich, hat aber einen großen Nachteil:
Sobald Teile des Modells im normalen RAM liegen, sinkt die Geschwindigkeit drastisch.

Das ist einer der wichtigsten praktischen Punkte des Videos. Der Unterschied ist nicht nur ein bisschen spürbar, sondern kann enorm sein.

3.3 Mac vs. Windows/Linux mit dedizierter GPU

Das Video weist außerdem auf einen Unterschied zwischen Plattformen hin:

Unified Memory kann vorteilhaft sein, weil insgesamt mehr Speicher flexibel verfügbar ist. Dedizierter VRAM ist dafür oft performanter. Für das lokale KI-Setup zählt aber in beiden Fällen vor allem:
Wie viel nutzbarer Speicher steht real zur Verfügung?

4. Einstieg mit LM Studio

Als zentrales Werkzeug empfiehlt das Video LM Studio. Das ist eine Desktop-Anwendung, die das lokale Herunterladen, Laden und Bereitstellen von Modellen stark vereinfacht.

Warum LM Studio laut Video so gut für den Einstieg geeignet ist:

Gerade für Einsteiger ist das wichtig, weil man nicht sofort mit Kommandozeilen-Tools und komplexen Inferenzservern kämpfen muss.

5. Modelle finden: LM Studio und Hugging Face

5.1 Direkte Suche in LM Studio

In LM Studio kann man Modelle direkt suchen, etwa nach Qwen. Das Tool zeigt dann:

So lässt sich schnell einschätzen, ob ein Modell überhaupt zur eigenen Hardware passt.

5.2 Hugging Face als größere Modellbibliothek

Wenn LM Studio nicht alles anbietet, verweist das Video auf Hugging Face. Dort lassen sich Modelle nach Popularität, Parametern und Features durchsuchen.

Besonders hilfreich ist dort:

6. Quantisierung: Der Schlüssel für lokale Nutzbarkeit

Ein zentraler Begriff des Videos ist die Quantisierung.

6.1 Was Quantisierung bedeutet

Vereinfacht gesagt wird ein Modell dabei so komprimiert, dass seine Gewichte mit weniger Genauigkeit gespeichert werden. Dadurch wird es deutlich kleiner.

Typische Stufen sind:

6.2 Der praktische Effekt

Je stärker quantisiert wird:

Im Video wird Q4 als guter Startpunkt empfohlen. Das gilt heute tatsächlich oft als sinnvoller Mittelweg aus Qualität und Ressourcenbedarf.

6.3 Wichtige Konsequenz

Quantisierung ist für lokale KI praktisch unverzichtbar. Die meisten interessanten Modelle wären in ihrer ursprünglichen Form viel zu groß für Consumer-Hardware.

7. Welche Fähigkeiten ein Modell haben sollte

Das Video betont, dass man nicht nur auf Größe achten darf, sondern auch auf die Fähigkeiten des Modells. In LM Studio werden oft Eigenschaften angezeigt wie:

Gerade für Coding-Agenten ist Tool Use sehr wichtig.
Reasoning kann bei komplexeren Aufgaben ebenfalls hilfreich sein, kostet aber meist zusätzliche Zeit und oft auch mehr Ressourcen.

Für verschiedene Aufgaben empfiehlt sich deshalb nicht unbedingt ein einziges Modell für alles, sondern eher eine Aufteilung:

Diese Trennung ist einer der praktisch wichtigsten Tipps des Videos.

8. Modelle laden und konfigurieren

Ist ein Modell heruntergeladen, muss es in LM Studio geladen werden. Dabei zeigt das Video, dass man unbedingt die erweiterten Ladeparameter aktivieren sollte.

8.1 GPU Offload

Wenn das Modell vollständig in den VRAM passt, sollte der GPU Offload maximal gesetzt werden. Damit wird das Modell vollständig auf die GPU geladen, was maximale Geschwindigkeit bringt.

8.2 Kontextlänge

Die Kontextlänge sollte bewusst gesetzt werden. Wer nur chatten will, braucht nicht zwangsläufig extrem viel Kontext. Wer mit einem Agenten auf einer größeren Codebasis arbeitet, braucht deutlich mehr.

Der entscheidende Punkt:

9. Der große Performance-Unterschied: Alles im VRAM vs. Auslagerung in RAM

Das Video demonstriert die Geschwindigkeit sehr anschaulich.

Fall 1: Modell passt komplett in den VRAM

Fall 2: Modell plus Kontext passt nicht mehr komplett hinein

Das ist ungefähr ein sechsfacher Geschwindigkeitsverlust.

Diese Demonstration ist einer der wichtigsten Punkte des gesamten Videos. Sie zeigt sehr klar, warum die Modellwahl, Quantisierung und Kontextgröße nicht bloß technische Nebensachen sind, sondern direkten Einfluss auf die Alltagstauglichkeit haben.

10. MoE-Modelle: Mehr Leistung auf begrenzter Hardware

Ein besonders interessanter Teil des Videos behandelt MoE-Modelle („Mixture of Experts“).

10.1 Was MoE bedeutet

Bei MoE-Modellen sind zwar sehr viele Parameter vorhanden, aber pro Anfrage werden nur bestimmte Teile aktiv genutzt. Deshalb spricht man oft von:

Ein Modell kann zum Beispiel 35 Milliarden Parameter haben, aber nur 3 Milliarden davon pro Schritt aktiv nutzen.

10.2 Warum das nützlich ist

MoE-Modelle sind für lokale Setups spannend, weil man einen Teil der Gewichte auf CPU bzw. RAM auslagern kann, während die besonders relevanten Teile auf der GPU bleiben.

In LM Studio gibt es dafür einen Parameter wie:
„number of layers for which to force MOE weights onto the CPU“

10.3 Praktischer Nutzen

Das Video zeigt, dass ein großes Modell mit dieser Methode noch mit brauchbarer Geschwindigkeit laufen kann. Ohne die MoE-spezifische Verteilung würde das gleiche Setup fast unbenutzbar langsam werden.

Das ist ein sehr wichtiger Hintergrundaspekt:

11. Mehrere Modelle gleichzeitig laden

Für ein realistisches Entwickler-Setup reicht oft ein einzelnes Modell nicht. Das Video zeigt deshalb, wie man in LM Studio mehrere Modelle gleichzeitig lädt:

Das ist sinnvoll, weil die Anforderungen unterschiedlich sind:

Autocomplete

Agenten/Chat

Diese Arbeitsteilung erhöht die Nutzbarkeit des Setups enorm.

12. LM Studio als lokaler API-Server

Ein weiterer Kernpunkt: LM Studio dient nicht nur als Chat-App, sondern auch als lokaler Server, der OpenAI-kompatible API-Endpunkte bereitstellt.

Das ist deshalb so wichtig, weil viele Tools bereits mit OpenAI-kompatiblen APIs umgehen können. Wenn LM Studio lokal denselben Stil von Endpunkten anbietet, kann man zahlreiche Anwendungen daran anschließen, ohne viel Speziallogik.

Das bedeutet praktisch:

13. VS Code und Continue: Lokales Autocomplete

Für die IDE-Integration verwendet das Video zunächst die Erweiterung Continue.

13.1 Warum Continue?

Continue unterstützt:

Gerade Autocomplete ist hier ein entscheidender Punkt, denn nicht alle VS-Code-KI-Erweiterungen erlauben dafür lokale Modelle.

13.2 Wichtige Einstellungen

Das Video empfiehlt, insbesondere zwei Dinge anzupassen:

Der Hintergrund: Auch wenn das Modell lokal läuft, gibt es eine gewisse Latenz durch Anfrage, Verarbeitung und Rückgabe. Wenn der Timeout zu kurz ist, erscheint der Vorschlag nicht.

13.3 Das passende Modell für Autocomplete

Für Autocomplete sollte ein kleines Modell verwendet werden, etwa ein kleiner Coder-Ableger. Denn:

Das Video zeigt dafür ein Modell um ungefähr 1 GB Größe.

13.4 Konfiguration

In Continue wird das Modell über eine YAML-Konfiguration eingebunden. Relevante Punkte sind:

Dadurch weiß Continue, welches Modell als Autocomplete-Modell fungieren soll.

14. Agentisches Coding mit Continue

Neben Autocomplete zeigt das Video auch den Chat- und Agentenmodus in Continue.

14.1 Tool-Rechte richtig setzen

Wichtig ist hier die Konfiguration der Tools. Viele Aktionen sollten auf automatic gestellt werden, etwa:

Andere Dinge sollte man bewusst absichern, etwa:

Das ist ein wichtiger praktischer Punkt:
Ein Agent ist nur dann nützlich, wenn er genügend Rechte hat, um wirklich zu arbeiten. Gleichzeitig sollte man riskante Operationen nicht unkontrolliert freigeben.

14.2 Modellfähigkeiten deklarieren

Für das Agentenmodell muss man in Continue u. a. angeben:

Damit der Agent korrekt arbeitet, muss die Konfiguration also nicht nur auf die API zeigen, sondern auch die tatsächlichen Fähigkeiten des Modells widerspiegeln.

14.3 Praktische Demonstration

Im Video wird gezeigt, wie der Agent eine Datei test.ts erzeugt und darin console.log("test") bzw. sinngemäß einen Testinhalt schreibt. Das verdeutlicht: Das lokale Modell ist nicht nur ein Gesprächspartner, sondern kann tatsächlich in Projekten arbeiten.

15. GitHub Copilot mit lokalem Modell

Als zweite VS-Code-Variante zeigt das Video die Einbindung in GitHub Copilot, genauer über die Insider- bzw. Betaversion von VS Code.

15.1 Idee dahinter

Copilot kann inzwischen auch OpenAI-kompatible Modelle einbinden. Dadurch lässt sich LM Studio dort als lokaler Anbieter registrieren.

Konfiguriert werden:

15.2 Wichtiger Hinweis

Das Video nennt aber auch einen Nachteil:
Diese Copilot-Integration scheint weiterhin eine Internetverbindung zu benötigen, da VS Code bzw. Copilot selbst noch mit GitHub kommuniziert.

Das heißt:

Das ist ein sehr relevanter Punkt, gerade wenn Datenschutz und völlige Unabhängigkeit wichtig sind.

16. Terminalbasierte Agenten mit „Pi“

Wer vollständig lokal und flexibler arbeiten will, bekommt im Video noch eine dritte Variante: ein terminalbasiertes Tool namens Pi.

16.1 Warum ein Terminal-Agent sinnvoll sein kann

Terminalagenten haben einige Vorteile:

16.2 Konfiguration

Auch hier ist das Grundprinzip wieder dasselbe:

Das Schöne daran: Genau das ist die eigentliche Lehre des Videos.
Wenn man einmal das Grundprinzip verstanden hat – lokaler OpenAI-kompatibler Endpoint, Modellname, Kontextgröße, Fähigkeiten –, dann wird die Einrichtung in jedem Tool im Grunde nur eine Frage der jeweiligen Konfigurationssyntax.

17. Praxisvergleich: Lokales Modell vs. Claude Sonnet

Das Video bleibt nicht bei Theorie und Setup stehen, sondern vergleicht lokale Modelle auch mit Cloud-Modellen anhand praktischer Beispiele.

17.1 Sudoku-App aus einem Prompt

Ein lokales Qwen-Modell erzeugte eine komplette Sudoku-App mit:

Dauer:

Dasselbe Prompt wurde auch mit einem Claude-Sonnet-Modell ausgeführt.

Ergebnis:

Das zeigt: Bei generativen Aufgaben kann ein lokales Modell durchaus mithalten, zumindest wenn man Zeit akzeptiert und die Anforderungen nicht extrem sind.

17.2 Bugfix in einer größeren Codebasis

Spannender wird der Unterschied bei einer echten Fehlerbehebung in einer größeren Anwendung.

Aufgabe:

Ergebnis:

Beide kamen laut Video zur praktisch identischen Lösung.
Der Unterschied lag vor allem in der Zeit, die das lokale Modell brauchte, um die Codebasis zu lesen und zu verarbeiten.

Das ist eine sehr ehrliche und wichtige Einordnung:

18. Was man aus dem Video wirklich mitnehmen sollte

Der größte Wert des Videos liegt nicht in einzelnen Modellnamen oder Toolversionen, sondern in den allgemeinen Prinzipien.

Die wichtigsten Lehren sind:

1. VRAM ist der zentrale Engpass

Nicht die CPU-Leistung, sondern vor allem der verfügbare Grafikspeicher bestimmt, welche Modelle praktikabel laufen.

2. Das Modell muss zur Aufgabe passen

Nicht jedes Modell ist für alles ideal.
Autocomplete braucht etwas anderes als ein Coding-Agent.

3. Quantisierung ist entscheidend

Ohne Quantisierung sind viele Modelle lokal unbrauchbar.

4. Kontext kostet viel Speicher

Ein zu großes Kontextfenster kann ein eigentlich brauchbares Setup ruinieren.

5. Spillover in normalen RAM macht alles langsam

Sobald ein Modell nicht mehr komplett oder überwiegend im VRAM liegt, bricht die Geschwindigkeit stark ein.

6. MoE-Modelle können ein cleverer Mittelweg sein

Gerade bei begrenzter Hardware sind sie ein interessanter Hebel.

7. OpenAI-kompatible APIs sind der Integrationsschlüssel

Sobald LM Studio als lokaler API-Server läuft, lassen sich viele Tools relativ ähnlich anbinden.

19. Für wen sich ein solches Setup lohnt

Ein lokales KI-Setup lohnt sich besonders für:

Weniger geeignet ist es für Nutzer, die:

20. Fazit

Das Video ist im Kern eine sehr gelungene Einführung in die Welt der lokalen KI für Entwickler. Es verbindet praktische Anleitung mit technischem Verständnis und bleibt dabei erstaunlich konkret. Statt nur ein bestimmtes Tool oder ein bestimmtes Modell zu hypen, vermittelt es ein belastbares mentales Modell dafür, wie lokale Inferenz auf echter Hardware funktioniert.

Besonders stark ist dabei:

Die wichtigste Botschaft lautet letztlich:
Lokale KI ist kein magischer Ersatz für alle Cloud-Modelle, aber sie ist längst mehr als ein Experiment. Wer seine Hardware und die zugrunde liegenden Konzepte versteht, kann sich schon heute eine erstaunlich leistungsfähige, private und kostengünstige KI-Umgebung für den Entwicklungsalltag aufbauen.