Transformer Explainer: GPT-2 im Browser als Lehrstück

Ein GPT-2, das im Browser erklärt, was es gerade tut

Die meisten Einführungen in Transformer arbeiten mit Diagrammen, die aus einem Paper abgezeichnet sind. Man sieht Pfeile, Matrizen und die Formel für Scaled Dot-Product Attention, aber man sieht nicht, was in einem konkreten Modell mit einem konkreten Satz passiert. Transformer Explainer setzt genau dort an: Laut README läuft ein GPT-2-Modell direkt im Browser, man gibt eigenen Text ein und beobachtet in Echtzeit, wie die internen Komponenten zusammenwirken, um die nächsten Tokens vorherzusagen. Das Publikum ist entsprechend breit: Studierende, die Attention zum ersten Mal sehen, Lehrende, die eine Vorlesung damit bestücken, und Praktiker, die eine intuitive Vorstellung davon brauchen, warum ein Prompt so und nicht anders fortgesetzt wird. Es ist kein Werkzeug, um ein Modell zu trainieren oder zu tunen. Es ist ein Erklärstück mit einem echten Modell im Rücken.

Warum das Modell im Browser läuft und nicht auf einem Server

Der Unterschied zu einer gehosteten Demo ist kein Detail. Wenn GPT-2 im Browser läuft, muss der Rechenweg auf der Client-Seite stattfinden, und damit liegen die Zwischenergebnisse lokal vor, statt hinter einer API zu verschwinden. Genau diese Zwischenergebnisse sind das Material, aus dem die Visualisierung ihre Zahlen zieht. Die Verarbeitungskette, die das README benennt, ist die übliche: Eingabetext wird tokenisiert, die Tokens laufen durch die Schichten des Transformers, und am Ende steht eine Verteilung über das nächste Token. Die Visualisierung greift an den Stellen ab, an denen man sonst nur Formeln sieht, also bei den internen Komponenten und Operationen. Das Repository selbst ist JavaScript, was zur Browser-Ausführung passt. Welche Bibliothek das Modell tatsächlich ausführt und ob die Gewichte beim ersten Aufruf nachgeladen werden, lässt sich aus dem vorliegenden Material nicht belegen; das README nennt dazu keine Details. Wer das wissen muss, sollte vor dem Einsatz die Netzwerkanfragen im Browser oder den Quelltext prüfen.

Lokaler Start mit vier Befehlen und zwei Versionsuntergrenzen

Die Installation ist knapp dokumentiert. Das README nennt als Voraussetzungen Node.js v20 oder höher und NPM v10 oder höher. Danach folgen vier Schritte: git clone https://github.com/poloclub/transformer-explainer.git, cd transformer-explainer, npm install und npm run dev. Anschließend ist die Seite unter http://localhost:5173 erreichbar. Wer nur schauen will, kann die gehostete Version unter http://poloclub.github.io/transformer-explainer nutzen; für den lokalen Betrieb braucht es die genannten Versionen. Der Port 5173 deutet auf den üblichen Entwicklungsserver aus dem Vite-Umfeld hin, das README bestätigt das aber nicht ausdrücklich, also sollte man sich darauf nicht verlassen, falls der Port belegt ist. Konfigurationsschlüssel, Umgebungsvariablen oder Modellparameter tauchen im README nicht auf. Wer das Modellverhalten ändern will, muss im Quelltext suchen, nicht in einer Konfigurationsdatei. Das ist bei einem Lehrwerkzeug vertretbar, für einen reproduzierbaren Kursaufbau aber eine Einschränkung, die man vorher einplanen sollte.

Ein Modell, ein Maßstab, ein Browser

Die Beschränkung auf GPT-2 ist die wichtigste Grenze des Projekts. Alles, was man dort sieht, gilt für diese Modellgröße und diese Architekturvariante. Wer wissen will, wie sich Attention in einem Modell mit gruppierten Query-Heads oder mit sehr langen Kontextfenstern verhält, bekommt hier keine Antwort, weil das Modell diese Varianten nicht abbildet. Auch die Aussagekraft für Fehlverhalten ist begrenzt: Halluzinationen, Instruction-Following oder der Effekt von System-Prompts lassen sich an einem Basismodell dieser Größe nicht sinnvoll demonstrieren. Dazu kommt die Plattformfrage. Ein Modell im Browser bedeutet, dass die Rechenlast auf dem Gerät der Nutzerin liegt. Auf schwacher Hardware oder in einem Browser ohne passende Beschleunigung kann das die Interaktion zäh machen. Das README macht dazu keine Angaben, also ist das eine offene Frage, die man auf der Zielhardware testen sollte, bevor man das Werkzeug in eine Veranstaltung mit festem Zeitplan einbaut. Für Produktionsfragen ist das Projekt ohnehin das falsche Werkzeug.

Was die Nachbarprojekte anders machen

Das README verweist selbst auf drei verwandte Erklärstücke aus derselben Gruppe: Diffusion Explainer, CNN Explainer und GAN Lab. Der Vergleich lohnt, weil er zeigt, wo die Unterschiede in der Methode liegen. Diffusion Explainer erklärt, wie ein Text-Prompt in ein Bild umgesetzt wird, also einen anderen Generierungsprozess mit anderem Datenfluss. CNN Explainer behandelt Faltungsnetze, bei denen die räumliche Struktur des Eingabebildes die Architektur bestimmt. GAN Lab setzt auf ein spielerisches Experimentieren mit zwei konkurrierenden Netzen. Transformer Explainer unterscheidet sich von allen dreien dadurch, dass die Ausgabe selbst sequenziell entsteht: Token für Token, mit einer Verteilung über den nächsten Schritt. Wer Attention als Mechanismus verstehen will und nicht als Bildoperation, braucht dieses Projekt und nicht die anderen. Umgekehrt gilt: Für Bildgenerierung ist Diffusion Explainer die passendere Wahl, weil dort der Diffusionsprozess und nicht die Token-Vorhersage im Zentrum steht.

MIT-Lizenz, ein Release und die Frage der Pflege

Das Projekt steht unter der MIT-Lizenz, was die Weitergabe und Anpassung des Codes erlaubt, solange Lizenz- und Urheberrechtshinweise erhalten bleiben. Für den Einsatz in Lehrmaterial ist das die unkomplizierte Variante. Rechtlich verbindlich ist das nicht, das ist eine Einordnung, keine Beratung. Zum Wartungsstand: Das Repository ist nicht archiviert, der letzte Push datiert auf den 6. Juni 2026. Dem steht genau ein Release gegenüber, v0.0.1 vom 11. Juni 2024. Diese Kombination sagt etwas aus: Es gibt laufende Arbeit am main-Branch, aber keine versionierte Veröffentlichung, an der man sich festhalten könnte. Wer das Projekt in einen Kurs einbaut, sollte deshalb nicht auf ein stabiles Tag setzen, sondern einen konkreten Commit festhalten und die Abhängigkeiten aus package.json selbst prüfen. Ein Upgrade auf einen neueren Stand kann die Oberfläche verändern, ohne dass eine Versionsnummer das anzeigt. Das Paper ist bei der CHI 2026 erschienen und beschreibt das Werkzeug ausführlicher, als es das README tut; für die didaktische Begründung ist das die belastbarere Quelle.

Wofür es taugt und wofür nicht

Der Fall, für den das Projekt gebaut ist, ist die Erklärung. Man gibt Text ein, sieht die Tokenisierung, sieht die Verarbeitung durch die Schichten und sieht am Ende, welche Tokens das Modell als nächste vorschlägt. Diese Rückkopplung zwischen eigener Eingabe und sichtbarem Zwischenschritt ist der Kern, und sie fehlt bei einer statischen Abbildung aus einem Lehrbuch. Was das Projekt nicht leistet, ist alles, was mit eigenen Daten, eigenem Training oder produktiver Inferenz zu tun hat. Es gibt keinen Hinweis auf Fine-Tuning, keine Anbindung an eine API und keine Aussage über Durchsatz oder Latenz außerhalb des Browserkontexts. Wer ein Modell für eine Anwendung sucht, ist hier an der falschen Adresse. Wer dagegen eine Stunde hat und verstehen will, warum das nächste Wort im Satz dieses und nicht jenes ist, findet hier einen Weg, der ohne Server und ohne Account auskommt.

Redaktionelles Fazit

Wer Transformer-Mechanik erklären oder selbst nachvollziehen will, bekommt hier ein lauffähiges Modell mit sichtbaren Zwischenschritten, das ohne Server auskommt; wer ein Modell für eigene Daten, Fine-Tuning oder Inferenz im Backend sucht, ist hier falsch. Vor dem Einsatz in einem Kurs sollte man prüfen, ob die lokale Installation mit Node.js v20 und npm v10 startet, ob die Seite unter http://localhost:5173 das eigene Textbeispiel annimmt und ob die im Paper beschriebenen Visualisierungen mit dem Stand des main-Branches übereinstimmen.

Offizielle Quellen

1. License: MIT
2. poloclub/transformer-explainer on GitHub
3. Project website
4. README
5. Releases