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-Coding-Agenten: Wie du dir 2026 dein eigenes, privates Copilot-Setup baust 🖥️

Die Preise für KI-Coding-Abos sind explodiert – und gleichzeitig wurden viele Monatspläne von Anbietern wie Anthropic oder OpenAI in den letzten Monaten deutlich zusammengestrichen. Wer produktiv mit KI-Agenten arbeitet, landet schnell bei happigen API-Rechnungen. Kyle von WebDev Simplified hat deshalb in einem ausführlichen Video vorgerechnet, wie man sich ein vollständig lokales, privates und kostenloses KI-Coding-Setup aufbaut – mit Autocomplete, Chat und vollem Agentenmodus, direkt in VS Code und im Terminal.

Das Spannende dabei: Die Konzepte sind hardware- und modellunabhängig. Ob du eine High-End-GPU oder einen bescheidenen Laptop hast – die Prinzipien bleiben gleich. Ich fasse die wichtigsten Erkenntnisse zusammen und ergänze sie um aktuelle Entwicklungen aus der lokalen-KI-Szene.

https://youtu.be/UngVdAsQEiU

Warum lokale Modelle gerade jetzt relevant werden

Cloud-Anbieter wie Anthropic haben ihre Pläne für Claude Code & Co. spürbar eingedampft – Vielnutzer stoßen schneller an Limits, obwohl sie $100–$200 im Monat zahlen. Gleichzeitig sind lokale Open-Source-Modelle inzwischen erstaunlich leistungsfähig geworden. Aktuelle Vergleichstests aus dem Sommer 2026 kommen zu einem bemerkenswerten Schluss: lokale Modelle decken inzwischen rund 80 % der täglichen Coding-Aufgaben ab, ohne dass eine Internetverbindung nötig ist. Für die restlichen 20 % – etwa sehr große, komplexe Refactorings – lohnt sich weiterhin ein Cloud-Modell.

Die zwei zentralen Stellschrauben: Parameter und Kontext

Jedes Sprachmodell lässt sich im Kern über zwei Werte einschätzen:

Beide Werte zusammen bestimmen, wie viel VRAM (Video-RAM der Grafikkarte) das Modell beim Laden benötigt.

VRAM: der eigentliche Flaschenhals

$$
\text{benötigter Speicher} \approx f(\text{Parameter}, \text{Quantisierung}, \text{Kontextgröße})
$$

Passt ein Modell nicht komplett in den VRAM, "läuft es über" in den normalen Arbeitsspeicher (RAM) deines Rechners – und das kostet massiv Geschwindigkeit. Kyle demonstriert das eindrücklich: Läuft ein Modell komplett auf der GPU, erreicht er über 120 Tokens/Sekunde. Sobald ein Teil ins System-RAM überläuft, bricht die Geschwindigkeit auf etwa 20–30 Tokens/Sekunde ein – ein Faktor von ungefähr sechs.

💡 Mac-Nutzer haben hier einen strukturellen Vorteil: Durch Unified Memory teilen sich GPU und CPU denselben Speicherpool, wodurch oft günstiger an mehr nutzbaren "VRAM" gekommen wird – dedizierte GPUs sind zwar meist etwas schneller, haben aber weniger Speicher zur Verfügung.

Windows-Nutzer finden ihre GPU-Speicherangabe im Task-Manager → Leistung → "Dedizierter GPU-Speicher".

Quantisierung: kleiner, aber fast genauso schlau

Modelle werden häufig in verschiedenen Quantisierungsstufen angeboten – erkennbar an Bezeichnungen wie Q4, Q6 oder Q8. Dabei werden interne Zahlenwerte gerundet bzw. vereinfacht, was die Modellgröße drastisch reduziert, bei nur leichtem Qualitätsverlust.

Stufe Bedeutung Größenverhältnis
16-bit Rohformat, keine Kompression 100 %
Q8 Eine Quantisierungsebene ca. 50 %
Q4 Guter Kompromiss – empfohlener Startpunkt ca. 25 %
Q3/Q2 Für sehr große Modelle auf kleiner Hardware noch kleiner

Q4 gilt als solider Einstiegspunkt für die meisten Setups.

Der Trick für große Modelle auf kleiner Hardware: MoE

Ein zentrales Konzept aus dem Video ist Mixture of Experts (MoE). Dabei ist zwar das Gesamtmodell riesig, aber zu jedem Zeitpunkt ist immer nur ein Teil davon ("Experten") aktiv. Modelle mit dieser Architektur werden oft so benannt:

35B-A3B   →  35 Milliarden Gesamtparameter, 3 Milliarden aktive Parameter

Der Clou: Man kann die "wichtigen", stark beanspruchten Layer auf der GPU behalten und die weniger kritischen Layer gezielt auf die CPU/System-RAM auslagern (in LM Studio über die Option "number of layers to force onto CPU"). So lassen sich deutlich größere Modelle nutzen, als eigentlich in den VRAM passen würden – mit nur moderatem Geschwindigkeitsverlust statt eines Totalabsturzes der Performance.

📰 Aktuell: Qwen3-Coder-Next

Genau in diese Richtung zielt das im Februar 2026 von Alibabas Qwen-Team veröffentlichte Qwen3-Coder-Next – ein 80-Milliarden-Parameter-MoE-Modell, das speziell für Coding-Agenten entwickelt wurde. Community-Berichte zeigen, dass sich dieses Modell mit geschickter Layer-Verteilung (und niedrigerer Quantisierung) sogar auf Consumer-GPUs mit nur 8–16 GB VRAM betreiben lässt – ein direktes Beispiel für das MoE-Prinzip, das Kyle im Video erklärt.

Das Setup in der Praxis

flowchart LR
    A["LM Studio<br/>lädt & serviert Modell"] --> B["Lokaler API-Endpunkt<br/>OpenAI-kompatibel"]
    B --> C["Continue-Extension<br/>Autocomplete + Chat"]
    B --> D["GitHub Copilot BYOK<br/>Agent-Modus in VS Code"]
    B --> E["Pi CLI<br/>Terminal-Agent"]
    style A fill:#cce5ff,color:#000000
    style B fill:#d4edda,color:#000000
    style C fill:#fff3cd,color:#000000
    style D fill:#fff3cd,color:#000000
    style E fill:#fff3cd,color:#000000

1. LM Studio als Modell-Server

LM Studio ist der empfohlene Einstiegspunkt: Es bietet eine grafische Oberfläche für Modell-Suche (auch direkt über Hugging Face), Download, RAM-Schätzung und Feinjustierung von Parametern wie:

Wichtig für die spätere Integration: Unter Developer Mode aktiviert LM Studio einen lokalen, OpenAI-kompatiblen API-Endpunkt (http://localhost:.../v1), über den sich praktisch jedes Tool anbinden lässt, das mit der OpenAI-API kompatibel ist.

2. Autocomplete via Continue

Die VS-Code-Extension Continue bringt echtes Inline-Autocomplete für lokale Modelle. Empfehlenswert:

Die Konfiguration erfolgt über eine YAML-Datei mit Provider (LM Studio), Modellname (1:1 aus LM Studio kopiert) und API-Basis-URL.

3. Agentenmodus über GitHub Copilot (BYOK)

Besonders praktisch: Seit einigen Monaten unterstützt VS Code offiziell "Bring Your Own Key" (BYOK) – auch für lokale Modelle, sogar ganz ohne GitHub-Konto oder Copilot-Abo. Laut dem offiziellen VS Code-Blog (Juni 2026) funktioniert BYOK inzwischen komplett unabhängig vom GitHub-Login, und seit Mai 2026 wurde die Unterstützung sogar auf air-gapped/abgeschottete Umgebungen ausgeweitet – relevant etwa für Unternehmen mit strengen Datenschutzvorgaben.

Einschränkend bleibt aktuell (Stand des Videos): Der Copilot-Chat selbst benötigt weiterhin eine Internetverbindung zur GitHub-Infrastruktur, auch wenn das eigentliche Sprachmodell komplett lokal läuft. Wer eine vollständig offline-fähige Lösung will, sollte auf CLI-Agenten setzen.

4. Terminal-Agenten: Pi, OpenCode & Co.

Für echtes Offline-Arbeiten empfiehlt sich ein schlanker CLI-Agent-Harness wie Pi (pi.dev). Konfiguriert wird er über eine lokale Modell-Datei, in der Provider, Basis-URL, Kontextfenster und Fähigkeiten (Reasoning, Bild-Input) hinterlegt werden.

📰 Aktuell: Die CLI-Agenten-Landschaft wächst rasant

Pi ist längst nicht allein – aktuelle Übersichten (Mai 2026) listen ein ganzes Ökosystem offener Terminal-Agenten:

Die Wahl des Harness ist dabei fast zweitrangig – entscheidend ist, wie in Kyles Video gezeigt, dass man das zugrunde liegende Prinzip (OpenAI-kompatibler lokaler Endpunkt + Modellkonfiguration) einmal verstanden hat. Dann lässt sich jedes beliebige Tool anschließen.

Lokale Modelle vs. Cloud: Wie groß ist der Unterschied wirklich?

Kyle hat einen direkten Vergleich zwischen einem lokalen Qwen 3.6-Modell und Claude Sonnet 4.6 durchgeführt:

Das deckt sich mit aktuellen unabhängigen Benchmarks aus 2026: Lokale Coding-Modelle wie Qwen3-Coder, Llama 3.3 oder Mistral Small 3 haben in Sachen Codequalität stark aufgeholt – der größte verbleibende Unterschied zu Cloud-Modellen liegt in der Geschwindigkeit bei großen, komplexen Codebasen, nicht mehr primär in der Ergebnisqualität.

Fazit: Lohnt sich der Umstieg?

Für Entwickler, die ohnehin $100–$200 monatlich in Cloud-KI-Abos investieren, rechnet sich der Umstieg schnell: Dieses Budget reicht bereits für deutlich leistungsfähigere, KI-optimierte Hardware. Und dank Konzepten wie Quantisierung und MoE-Layer-Offloading funktioniert ein lokales Setup inzwischen selbst auf bescheidener Hardware erstaunlich gut.

Wer die Grundprinzipien – Parameter, Kontext, VRAM, Quantisierung, MoE – einmal verstanden hat, ist zukunftssicher aufgestellt: Neue Modelle wie Qwen3-Coder-Next oder GPT-OSS lassen sich dann ohne neues Tutorial einfach in das bestehende Setup aus LM Studio + Continue/Copilot BYOK + Pi einklinken. 🚀

Qwen3.6-35B-A3B

Qwen3.6-35B-A3B (April 2026 von Alibaba veröffentlicht) ist ein sparse MoE-Modell mit 35 Mrd. Gesamtparametern, aber nur 3 Mrd. aktiven Parametern pro Inferenzschritt. Es wurde explizit für "Agentic Coding" optimiert und schlägt sich überraschend stark.

Coding-Benchmarks (im Vergleich)

Benchmark Qwen3.6-35B-A3B Gemma4-31B (dense) Qwen3.5-35B-A3B (Vorgänger)
SWE-bench Verified 73.4 52.0 70.0
SWE-bench Multilingual 67.2 51.7 60.3
Terminal-Bench 2.0 51.5 42.9 40.5
MCPMark (Tool-Use) 37.0 18.1 27.0
LiveCodeBench v6 80.4 80.0 74.6

Was dafür spricht 👍

Was man kritisch sehen sollte 👎

Fazit

Für seine Effizienzklasse (3B aktive Parameter, lokal lauffähig) ist Qwen3.6-35B-A3B eines der stärksten Open-Source-Coding-Modelle 2026 – ideal wenn du lokal/günstig arbeiten willst und "gut genug" reicht. Für anspruchsvollste Produktions-Coding-Agents oder komplexe Refactorings würde ich es aber (noch) nicht als Ersatz für Top-Closed-Source-Modelle wie Claude Opus 4.7 oder GPT-5-Klasse sehen.

Praxistipp: Wenn du es testen willst – läuft günstig über die API (~$0.38/$2.25 pro Mio. Token) oder lokal via LM Studio/Ollama mit dem Q4-GGUF (Unsloth).

DeepSeek V3.2 & DeepSeek V4 Flash für Coding

Basierend auf aktuellen Daten (Stand Juli 2026) hier eine Einschätzung beider Modelle fürs Coding:

DeepSeek V3.2 (Dezember 2025)

Stärken:

Einordnung: Für ein Open-Weight-Modell (MIT-Lizenz) exzellent, aber im Intelligence-Index inzwischen nur noch Platz #13/43 – solide, aber nicht mehr Spitzenklasse.

DeepSeek V4 Flash (April 2026, aktuell "Preview")

Stärken:

Einschränkungen:

Praktische Empfehlung

Anwendungsfall Empfehlung
Große Codebasen, günstige Standard-Coding-Aufgaben, Agenten mit hohem Volumen V4 Flash
Schwierigere Coding-/Reasoning-Aufgaben, wo mehr "Intelligenz" nötig ist DeepSeek V4 Pro (Nachfolger von V3.2, stärker)
Wenn maximale Coding-Qualität zählt und Kosten egal sind Eher Claude Opus 4.7 oder GPT-5.4/5.5 als Eskalationsroute

Fazit: V3.2 war Ende 2025 ein starkes, kosteneffizientes Open-Weight-Modell für Coding – wurde aber von V4 Pro abgelöst. V4 Flash ist kein Ersatz für Spitzenmodelle, sondern die günstige "Default-Route" für Coding-Agenten und Repo-Analyse in großem Maßstab; für wirklich schwierige Coding-Aufgaben lohnt sich der Umstieg auf V4 Pro oder ein Premium-Modell als Eskalationspfad.

Qwen3.6-Flash für Coding – Einschätzung

Kurz gesagt: Qwen3.6-Flash (offizieller API-Name für das offene Qwen3.6-35B-A3B-Modell) ist für seine Größenklasse überraschend stark im agentischen Coding und schlägt sogar größere Dense-Modelle wie Qwen3.5-27B in mehreren Benchmarks – bei nur 3 Mrd. aktiven Parametern (MoE mit 35 Mrd. Gesamtparametern).

Kontext zum Modell

Benchmark-Ergebnisse (Coding/Agentic)

Benchmark Qwen3.6-35B-A3B (Flash) Qwen3.5-35B-A3B (Vorgänger) Qwen3.5-27B (dense, größer) Gemma4-26B-A4B
SWE-bench Verified 73.4 70.0 75.0 17.4
SWE-bench Multilingual 67.2 60.3 69.3 17.3
SWE-bench Pro 49.5 44.6 51.2 13.8
Terminal-Bench 2.0 51.5 40.5 41.6 34.2
LiveCodeBench v6 80.4 74.6 80.7 77.1
QwenWebBench (Frontend) 1397 978 1068 1178

Fazit / Einordnung

✅ Stärken:

⚠️ Einschränkungen:

Praktische Einschätzung

Für den Preis-/Geschwindigkeits-Bereich ("Flash"-Klasse) ist Qwen3.6-Flash aktuell eines der stärksten Open-Weight-Modelle für agentisches Coding – gut geeignet für:

Für sehr anspruchsvolle, komplexe Software-Engineering-Aufgaben würde ich es gegen größere Modelle (Qwen3.6-Plus, Claude Sonnet, GPT-5-Klasse) testen, aber für sein Kosten-Performance-Verhältnis ist es sehr überzeugend.

Qwen3 Coder Next fürs Coding

Genug Infos für eine gute Einschätzung. Hier ist die Zusammenfassung:

Qwen3-Coder-Next – Kurzeinschätzung

Was es ist: Ein Open-Weight-Modell von Alibaba (Release: 3. Februar 2026), speziell für agentisches Coding und lokale Entwicklung gebaut – basierend auf Qwen3-Next-80B-A3B mit hybrider Attention/MoE-Architektur.

Kennzahlen

Eigenschaft Wert
Gesamtparameter 80B (MoE)
Aktive Parameter nur 3B
Kontextlänge 256K Tokens
Modus nur "non-thinking" (kein <think>-Block)

Benchmark-Ergebnisse

Stärken 💪

Schwächen ⚠️

Fazit

Für ein lokal betreibbares, extrem effizientes Coding-Modell ist Qwen3-Coder-Next momentan wohl das beste Open-Source-Modell in seiner Gewichtsklasse – es kommt bei einfachen bis mittelschweren Aufgaben nahe an Claude/GPT heran, fällt aber bei sehr komplexen, langen Multi-Step-Aufgaben klar zurück. Als Ergänzung zu einem stärkeren Cloud-Modell (z. B. für Routineaufgaben oder als lokaler "erster Entwurf") ist es sehr empfehlenswert – als vollständiger Ersatz für Claude Code/GPT bei anspruchsvollen Projekten (noch) nicht ganz auf Augenhöhe.

Coding-Fähigkeiten im Agenten-Kontext (Hermes Agent / "hermes"-Tool-Calling)

Vorab kurz zur Einordnung, weil das für die Bewertung wichtig ist: "Hermes" taucht bei dir in zwei Bedeutungen auf, die beide relevant sind:

  1. Hermes Agent (Nous Research) – ein Open-Source-Agenten-Harness (Nachfolger von OpenClaw) mit Skill-Learning, Memory, Tool-Gateway etc. Läuft mit praktisch jedem Provider (OpenRouter, Bedrock, vLLM, Ollama, …).
  2. Der "hermes"-Tool-Call-Parser in vLLM/llama.cpp – das ChatML-<tool_call>-Format, das ursprünglich für Nous-Hermes-Modelle entwickelt wurde und heute auch von Qwen2.5/3, Llama 3.x, Mistral, DeepSeek u.a. genutzt wird. Modelle mit nativer Unterstützung dieses Formats lassen sich in einem Agenten-Loop deutlich zuverlässiger steuern (weniger "Tool-Call als Fließtext"-Fehler).

Für die Bewertung zählt daher nicht nur der reine SWE-bench-Score, sondern auch Tool-Calling-Zuverlässigkeit, Kontextlänge, Kosten/Token und Ausführungsgeschwindigkeit in einem Multi-Step-Agenten-Loop.

Gesamtübersicht (Stand: Juli 2026)

Modell SWE-bench Verified (ca., je nach Harness) Architektur / Aktive Params Kontext Tool-Calling-Eignung im Agenten-Loop Einschätzung
Qwen3-Coder-480B-A35B ~55% (mini-SWE-agent) MoE, 35B aktiv 256K (bis 1M ext.) Nativ stark, explizit für Agentic Coding trainiert Starkes Flaggschiff-Open-Model, aber inzwischen von kleineren Nachfolgern teils überholt
Qwen3-Coder-30B-A3B (Flash) ~50–60% (Werte variieren stark je Quelle/Update) MoE, nur 3B aktiv 256K Sehr gut, „out-of-the-box" starke Tool-Use-Scores Bestes Preis/Leistungs-Verhältnis für lokale/günstige Agenten, oft nahe an 480B-Modell
Qwen3-Coder-Next >70% (SWE-Agent-Scaffold) Hybrid (Attention+SSM), 3B aktiv/80B total 256K+ Für Agenten-Workflows und lokale Entwicklung optimiert State-of-the-Art unter den Effizienzmodellen (Feb. 2026) – exzellent für Hermes lokal via vLLM/Ollama
Codestral 2508 ~52% Dense, ~22B 256K Eher FIM/Autocomplete-fokussiert, weniger als reiner Agent gedacht Gut für IDE-Vervollständigung; für vollen Agenten-Loop ist Mistrals Devstral (53–62%) die bessere Wahl
KAT-Coder-Pro V2 73–80% (nähert sich Claude Opus 4.6) Proprietär, günstig (Kwaipilot) 256K Explizit für agentische Coding-Tasks gebaut, Top-Terminal-Bench-Werte Einer der stärksten Nicht-Reasoning-Agenten-Coder aktuell, ~12x günstiger als Claude
GPT-5.1-Codex-Mini solide, aber unter Codex-Max Proprietär 400K Für Codex-Workflows gebaut, zuverlässiges Tool-Calling Guter Kompromiss Kosten/Leistung bei OpenAI, aber klar unter GPT-5.1-Codex(-Max)
DeepSeek V3 (0324) Basis-Niveau (älter) MoE 671B/37B aktiv 128K Ordentlich, aber unter V3.1/V3.2 Nur noch als Baseline relevant
DeepSeek V3.1 / Terminus verbessert ggü. V3 MoE 128K Function Calling im Non-Reasoning-Modus deutlich verbessert Guter Zwischenschritt, durch V3.2 abgelöst
DeepSeek V3.2 / V3.2-Exp 70% (high reasoning) MoE, mit Sparse-Attention (DSA) 128K+ Sehr stark in Agent-/Terminal-Bench-Evals Aktuell eines der stärksten offenen Reasoning-Coding-Modelle, nahe an Gemini 3 Pro
GLM-4.5-Air ~57–58% MoE, leichtgewichtig (~12B aktiv) 128K Höchste Tool-Calling-Erfolgsrate in der GLM-Familie (90,6%) Sehr gute leichte Agenten-Option, günstig selbst zu hosten
MiniMax M2 Basis-Niveau, günstig MoE 200K Gut, textbasiert Solide günstige Einstiegsoption
MiniMax M2.1 >67% (über mehrere Harnesses) MoE 200K Multilingual verbessert Deutlicher Sprung ggü. M2
MiniMax M2.5 75,8% (einer der schnellsten auf 80%+) MoE 200K Sehr günstig (~$0,07/Task laut swebench.com) Top Preis/Leistung, konkurriert mit Claude Opus 4.6
MiniMax M2.7 weiter verbessert MoE 200K Text-only, aktueller OAuth-Default in Hermes Agent Aktuell Standard-Empfehlung für MiniMax in Hermes
MiniMax M3 Flaggschiff (Juni 2026) MoE, multimodal ~1M Anthropic-Messages-kompatibel, Bild/Video Stärkster MiniMax, aber (noch) nicht überall Standard-Default
MiniMax M2-her – – – – Keine belastbaren Quellen gefunden – vermutlich Verwechslung/Community-Fine-Tune, kein offizielles MiniMax-Release
Qwen3-235B-A22B-Instruct-2507 solide, oberhalb Kimi K2/Claude 4 Opus in AA-Index MoE, 22B aktiv 256K Guter Generalist mit Agentic-Fähigkeiten Starker Allrounder, für reines Coding aber unter den Coder-Varianten
Qwen3-235B-A22B-Thinking-2507 Top-Reasoning (92,3 im AA-Reasoning-Index) MoE, 22B aktiv 256K Stark bei komplexer Logik/Multi-Step-Planung Beste Wahl, wenn Agent tiefes Reasoning vor Tool-Calls braucht
Qwen3-Next-80B-A3B wettbewerbsfähig, sehr effizient Hybrid, nur 3B aktiv 256K, 10x Durchsatz Für agentisches Coding & Reasoning positioniert Extrem effizient – gute Balance aus Geschwindigkeit und Fähigkeit
gpt-oss-120b ~62% (mit Tool-Zugriff) MoE, ~5B aktiv 128K Explizit auf Function-Calling/Agentic trainiert (OpenAI) Bestes offenes OpenAI-Modell für Agenten, Apache-2.0
gpt-oss-20b ~37% MoE, kleiner 128K Ebenfalls gutes Tool-Calling, aber klar schwächer Für sehr limitierte Hardware/leichte Tasks
GPT-5 Mini ~56–60% (je nach Scaffold) Proprietär groß Solides Tool-Calling Guter Mittelweg, deutlich günstiger als GPT-5
GPT-5 Nano ~35% Proprietär groß Funktioniert, aber schwach bei komplexen Multi-Step-Tasks Nur für einfache/hochfrequente Aufgaben sinnvoll
Hermes 4 70B eher mittel (kein spezialisiertes Coding-Modell) Dense, Llama-3.1-70B-Basis 128K Nativ auf das "hermes"-Tool-Call-Format trainiert, hybrides Reasoning (Think-Mode) Beste rohe Kompatibilität mit Hermes-Agent/vLLM-Parser, aber bei reinen SWE-bench-Coding-Metriken hinter den spezialisierten Coder-MoEs
Llama 4 Maverick ~15–21% (stark scaffold-abhängig, teils widersprüchliche Angaben) MoE, 17B aktiv/400B total 1M (nominell) Community-Feedback zur Coding-Qualität eher negativ Nicht empfehlenswert als primärer Coding-Agent-Backend
Llama 4 Scout ~9% (teils höhere Einzelwerte in anderen Benchmarks, uneinheitlich) MoE, 17B aktiv/109B total 10M (nominell) Schwach bei komplexem Agentic Coding Eher für lange Kontext-Aufgaben als für Coding-Agenten geeignet

(Werte schwanken teils stark je nach Scaffold/Datum der Messung – SWE-bench-Zahlen für dasselbe Modell können sich zwischen mini-SWE-agent, OpenHands, Claude Code, Droid etc. um 10–20 Prozentpunkte unterscheiden. Als Trend/Ranking sind sie aber verlässlich.)

Gruppierte Einschätzung

🥇 Top-Tier Open-Weight-Agentencoder (beste Wahl für Hermes, wenn Budget/Hardware es zulässt)

💪 Solide Generalisten mit guter Agentic-Fähigkeit

🏠 Beste lokale/Edge-Optionen

💰 Proprietäre Cloud-Optionen mit Preis/Leistungs-Fokus

⚠️ Weniger geeignet als primärer Coding-Agent-Backend

Praktische Empfehlung für den Einsatz mit Hermes Agent

Szenario Empfehlung
Maximale Coding-Power, Cloud, Budget egal KAT-Coder-Pro V2 oder MiniMax M2.5/M2.7, alternativ DeepSeek V3.2 (Reasoning)
Bestes Preis/Leistungs-Verhältnis MiniMax M2.5/M2.7, Qwen3-Coder-30B-A3B
Lokal/self-hosted (eine GPU/Apple Silicon) Qwen3-Coder-Next, gpt-oss-120b, Qwen3-Coder-30B-A3B
Höchste Tool-Call-Zuverlässigkeit/„Hermes-nativ" Hermes 4 70B (nativer Parser), Qwen3-Familie
OpenAI-Ökosystem, moderat GPT-5.1-Codex-Mini oder GPT-5 Mini
Vermeiden für ernsthafte Agenten-Coding-Tasks Llama 4 Maverick/Scout, GPT-5 Nano, Codestral 2508 (besser: Devstral)

Wenn du magst, kann ich als nächsten Schritt einen konkreten Kosten/Latenz-Vergleich (Tokens/Sekunde, $/Mio Tokens) für 3–4 deiner Favoriten im Hermes-Agent-Setup zusammenstellen, oder tiefer in ein einzelnes Modellpaar (z.B. KAT-Coder-Pro V2 vs. MiniMax M2.5) einsteigen.

🚀 Kompletter Einsteiger-Guide für Hermes Agent (hermes-ai.net)

Was ist Hermes Agent?

Hermes Agent ist ein Open-Source-KI-Agent von Nous Research (MIT-Lizenz). Er ist weder ein reiner Coding-Copilot noch ein simpler Chatbot, sondern ein autonomer, selbst-verbessernder Agent, der mit der Zeit klüger wird.

ℹ️ Wichtig zu wissen: hermes-ai.net ist eine inoffizielle, unabhängige Community-Seite mit lokalisierten Docs (u.a. auf Deutsch). Die offizielle Software und Dokumentation kommen von Nous Research (hermes-agent.nousresearch.com bzw. GitHub).

Kernmerkmale auf einen Blick

Feature Beschreibung
🧠 Selbstlernender Loop Erstellt Skills aus Erfahrung, verbessert sie im Betrieb, baut ein Modell von dir über Sessions hinweg
💬 15+ Messaging-Plattformen Telegram, Discord, Slack, WhatsApp, Signal, Matrix, E-Mail, SMS u.v.m.
🛠️ 47 eingebaute Tools Websuche, Dateioperationen, Terminal-Befehle
🔌 MCP-Integration Bindet beliebige Model-Context-Protocol-Server ein
⏰ Cron-Automationen Geplante Aufgaben, Ergebnis an jeden Kanal
🖥️ 6 Runtime-Backends local, Docker, SSH, Daytona, Singularity, Modal

⚡ Schnellstart – in ~60 Sekunden startklar

Voraussetzungen

Schritt 1 – Installation (Linux / macOS / WSL2)

# Installer herunterladen
curl -fsSLO https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh

# Skript ANSCHAUEN, bevor du es ausführst (Sicherheits-Best-Practice!)
less install.sh

# Ausführen
bash install.sh

Danach Shell neu laden:

source ~/.bashrc   # oder: source ~/.zshrc

🪟 Windows-Nutzer: Der empfohlene Weg ist WSL2. Installiere WSL2, öffne ein Ubuntu/WSL-Terminal und führe dort den Linux-Befehl aus. Das erspart dir viele Abhängigkeits- und Automatisierungsprobleme.

Schritt 2 – Modell konfigurieren

hermes model    # LLM-Anbieter und Modell wählen
hermes tools    # aktivierte Tools einstellen
hermes setup    # kompletter Setup-Assistent

Bei hermes model wählst du die Verbindungsart:

💡 Du kannst hermes model jederzeit erneut ausführen, um das Modell zu wechseln.

Schritt 3 – Loslegen und Chatten

hermes

Es erscheint ein Willkommens-Banner mit gewähltem Modell, Tools und Skills. Dann einfach tippen:

> Was kannst du gerade für mich tun?

🎯 Die wichtigsten Workflows

Hermes das Terminal nutzen lassen

> Prüfe die Festplattennutzung und liste die fünf größten Verzeichnisse.

Hermes führt die Befehle aus, erklärt die Ergebnisse und untersucht bei Bedarf weiter.

Slash-Befehle (im Chat / tippen)

Befehl Funktion
/help Alle Befehle anzeigen
/tools Verfügbare Tools auflisten
/model Modell interaktiv wechseln
/skills Skills anzeigen/verwalten
/save Aktuelle Konversation speichern

Nützliche Tastenkürzel

🔧 Erweiterte Nutzung

Sandboxed Terminal (mehr Isolation)

hermes config set terminal.backend docker
hermes config set terminal.backend ssh

Messaging-Plattformen anbinden

hermes gateway setup

Danach erreichst du Hermes über Telegram, Discord, WhatsApp, Signal, E-Mail, Home Assistant u.v.m.

Sprachmodus (Voice)

pip install "hermes-agent[voice]"
pip install faster-whisper    # optional: lokale Spracherkennung

Im CLI aktivieren:

/voice on

Skills durchsuchen & installieren

⚠️ Sicherheit: Prüfe Skills von Dritten immer vor der Installation – du siehst so, welche Tools und Daten sie nutzen. Community-Skills findest du auf agentskills.io.

MCP-Server verbinden

Bearbeite ~/.hermes/config.yaml:

mcp_servers:
  github:
    command: npx
    args: ["-y", "@modelcontextprotocol/server-github"]
    env:
      GITHUB_PERSONAL_ACCESS_TOKEN: "ghp_xxx"

In Editoren nutzen (ACP-Server)

pip install -e '.[acp]'
hermes acp

📋 Befehls-Referenz (Cheat Sheet)

Befehl Beschreibung
hermes Chat starten
hermes model LLM-Anbieter/Modell wählen
hermes tools Tools konfigurieren
hermes setup Kompletter Setup-Assistent
hermes doctor Installation/Konfiguration diagnostizieren
hermes update Auf neueste Version aktualisieren
hermes gateway Messaging-Gateway starten/konfigurieren
hermes --continue Vorherige Session fortsetzen

✅ Empfohlene Reihenfolge zum Einstieg

  1. Installieren → install.sh ausführen
  2. Modell einrichten → hermes setup durchlaufen
  3. Ersten Chat starten → hermes und eine echte Aufgabe stellen
  4. Slash-Befehle erkunden → mit /help beginnen
  5. Bei Problemen → hermes doctor ausführen
  6. Nächste Ebene → Gateway (Messaging), Skills und MCP-Server ergänzen