AnimatedLLM ist ein Open-Source-Tool, das den Denkprozess von LLM in animierte Visualisierungsinhalte umwandelt, um das Verständnis und die Darstellung des Modell-Denkprozesses zu erleichtern.

AnimatedLLM

Kernparameter und Statistiken von AnimatedLLM

AnimatedLLM ist ein Open-Source-Bildungstool, das von Zdeněk Kasner und Ondřej Dušek vom ÚFAL-Labor an der Fakultät für Mathematik und Physik der Karls-Universität in der Tschechischen Republik entwickelt wurde. Der Schwerpunkt liegt auf der Visualisierung des Innenlebens großer Sprachmodelle in Form von Frame-by-Frame-Animationen. Es handelt sich nicht um ein KI-Modell an sich, sondern um eine „Meta-Visualisierungsschicht“, die dazu dient, anzuzeigen und zu verstehen, was bei jedem Schritt im Textgenerierungs- und Trainingsprozess der Transformer-Architektur geschieht.

Projekte	Öffentliche Informationen
Produktpositionierung	LLM internes Mechanismus-Animationsvisualisierungs-Lerntool
Kernkompetenzen	Animation auf Token-Ebene. Visualisierung des internen Zustands des Transformators, Demonstration des Trainingsprozesses
Technologie-Stack	D3.js + GSAP-Animations-Engine Vite erstellt JavaScript/CSS/Python
Betriebsmethode	Rein browserseitiger Betrieb (basierend auf vorberechneten Daten)
Bereitstellungsplattform	Web (GitHub-Seiten-Hosting)
Open-Source-Lizenz	MIT
Zielbenutzer	KI-Pädagogen, Studenten, Technische Redakteure LLM-Anfänger
Unterstützte Sprachen	Englisch (Benutzeroberfläche und Inhalt sind en-US)
Zugehörigkeit	ÚFAL MFF UK (Institut für Angewandte Linguistik, Fakultät für Mathematik und Physik, Karls-Universität)
GitHub-Sterne	Etwa 15 Sterne (Stand 2026-07)
Neueste Veröffentlichung	v1.0.0 (14.12.2025)
Wissenschaftliche Arbeit	Akzeptiert vom EACL 2026 TeachNLP Workshop

Kurzer Rückblick in einem Satz: AnimatedLLM ist kein weiterer Gesprächsroboter, sondern ein „LLM-Mikroskop der internen Struktur“ – es nutzt eine Bild-für-Bild-Animation, um die Aufmerksamkeitsverteilung und versteckte Zustandsänderungen jedes Tokens darzustellen, wenn Transformer vor Ihren Augen Text generiert. Es eignet sich für den Einsatz in Klassenzimmern oder technischen Blogs, um zu erklären, „wie das Modell denkt“.

Schlüsselgrenze: AnimatedLLM zeigt eine vorberechnete Modellverhaltensverfolgung (Trace) an, anstatt die echte LLM-API in Echtzeit aufzurufen. Dies bedeutet, dass der Animationsinhalt ein festes, manuell organisiertes Beispiel ist und keine Echtzeitvisualisierungen beliebiger Eingabeaufforderungswörter generieren kann. Dies ist auch die sinnvolle Gestaltung als Lehrmittel, die sicherstellt, dass die Ergebnisse jeder Demonstration konsistent und kontrollierbar sind.

Visuelle Ebeneneinteilung: Das Produkt bietet zwei Pfade: „Basic“ und „Advanced“. Der Basispfad (Text Generation Basics) richtet sich an ein nullbasiertes Publikum und zeigt den schrittweisen Erscheinungsprozess der Token-Generierung; Der fortgeschrittene Pfad (Wie Transformer Text generiert) geht tief in den internen Mechanismus von Transformer ein und zeigt, wie der Aufmerksamkeitskopf Gewichtungen zwischen verschiedenen Token zuweist. Durch dieses mehrschichtige Design kann das gleiche Tool sowohl für die Popularisierung von Einführungsveranstaltungen in die Naturwissenschaften als auch für das professionelle Lehrpublikum eingesetzt werden.

Benutzer und Marktbekanntheit von AnimatedLLM

Die Größe von AnimatedLLM ist nicht mit allgemeinen KI-Produkten (wie ChatGPT, Claude) vergleichbar. Es gehört zur stark segmentierten Werkzeugkategorie der KI-Bildungsvisualisierung, und Messindikatoren sollten sich eher auf die akademische Akzeptanz und Durchdringung von Bildungsszenarien als auf die installierte Kapazität konzentrieren.

Akademische Veröffentlichungsempfehlung: Die entsprechenden Arbeiten von AnimatedLLM wurden offiziell vom TeachNLP-Workshop der EACL 2026 angenommen. TeachNLP ist ein professionelles akademisches Seminar im Bereich der Ausbildung in der Verarbeitung natürlicher Sprache (NLP). Die Annahme der Arbeit selbst ist eine Zertifizierung der Lehrwirksamkeit und technischen Qualität des Tools durch Dritte. Der Artikel hat auf arXiv (cs.CL-Richtung) einige Aufmerksamkeit erhalten, und Forscher und Pädagogen können über arXiv:2601.04213 eine vollständige Methodenbeschreibung erhalten.

GitHub-Community-Signal: Mit Stand 2026–07 hat das Warehouse „kasnerz/animated-llm“ etwa 15 Sterne, eine MIT-Open-Source-Lizenz erhalten und die Codequalität wird durch die ESLint-Konfiguration und den Husky-Commit-Hook garantiert. Die Beitragsrichtlinien (CONTRIBUTING.md) und der Verhaltenskodex (CODE_OF_CONDUCT.md) sind vollständig und zeigen, dass das Projekt eine klare Bereitschaft zum Aufbau einer Community hat. Allerdings spiegeln 0 Fork und niedrige Sternzahl auch wider, dass die aktuelle Zielgruppe begrenzt ist und noch kein aktives externes Beitrags-Ökosystem gebildet wurde.

Institutionelle Unterstützung: Das Projekt wird vom ÚFAL-Labor der Karlsuniversität produziert. ÚFAL ist ein bekanntes Labor auf dem Gebiet der Verarbeitung natürlicher Sprache in Europa mit langjähriger Erfahrung in den Bereichen maschinelle Übersetzung, Dialogsysteme und Sprachressourcenkonstruktion. Institutionelles Branding stellt eine implizite Bestätigung der Glaubwürdigkeit und akademischen Genauigkeit eines Tools dar.

Vergleich mit ähnlichen Tools: Es gibt derzeit nur sehr wenige direkte Konkurrenten auf dem Markt – die überwiegende Mehrheit der KI-Lehrmaterialien sind immer noch hauptsächlich statische Diagramme, Folien oder aufgezeichnete Videos. Der Hauptunterschied von AnimatedLLM liegt in seinen „interaktiven, schrittweisen und wiederholbaren“ dynamischen Präsentationsfähigkeiten. Ähnliche Tools umfassen „LLM Visualization“ (bbycroft.net) usw., aber AnimatedLLM ist das einzige Tool, das die gesamte Verbindung von der Generierung bis zum Training abdeckt und den Lehreffekt anhand wissenschaftlicher Arbeiten überprüft.

Vergleichsmaße	AnimatedLLM	Statische Lehrmaterialien/Diashows	LLM-Visualisierung (bbycroft)
Interaktivität	Tastatursteuerung Schritt für Frame	Keine Interaktion	Klicken Sie auf Interaktion
Breite des Inhalts	Dual-Link generieren + trainieren	Hängt von der Orchestrierung des Lehrers ab	Nur Prozess generieren
Lehrverifizierung	EACL TeachNLP-Papier	Keine	Keine
Open Source	MIT-Lizenz	Nicht anwendbar	Unveröffentlicht
Läuft lokal	Unterstützt (Node.js)	N/A	Nur Web

Kostenvorteile von AnimatedLLM

Da es sich um ein MIT-lizenziertes Open-Source-Projekt handelt, ist die Kostenstruktur von AnimatedLLM äußerst einfach – es fallen keine Lizenzgebühren an und die Nutzungskosten hängen vollständig davon ab, wie Sie es ausführen.

C-Seite/Einzelbenutzer: Besuchen Sie „animatedllm.github.io“, um alle Funktionen direkt und ohne Kosten und ohne Registrierung zu nutzen. Alle Animationsdaten sind in statischen Ressourcen vorverpackt, es ist kein API-Schlüssel erforderlich, keine Anmeldung erforderlich und es ist nicht erforderlich, auf das Laden des Modells zu warten. Benutzer können beim Öffnen der Seite eine vollständige Bild-für-Bild-Demonstration erleben. Die einzigen versteckten Kosten sind die Netzwerkbandbreite – beim ersten Laden muss ein statisches Ressourcenpaket von mehreren MB heruntergeladen werden (einschließlich vorberechneter Flugbahndaten und der D3.js/GSAP-Animationsbibliothek), das dann vollständig offline ausgeführt werden kann.

Selbsthosting für Entwickler/Bildungseinrichtungen: Führen Sie nach dem Klonen des Repositorys von GitHub „npm install && npm run dev“ aus, um den Entwicklungsserver lokal zu starten. Hängt nur von Node.js (>=20.9.0) und npm ab, keine GPU, keine großen Anforderungen an den Modellinferenzkontext. Die zusätzlichen Kosten für Selbsthosting-Szenarien liegen bei nahezu Null – keine API-Aufrufgebühren, kein Cloud-Service-Abonnement, nur grundlegende statische Datei-Hosting-Funktionen (GitHub Pages, Netlify, Vercel usw. sind alle verfügbar und können sogar direkt lokal und offline geöffnet werden).

Bereitstellung in Unternehmen/groß angelegten Bildungseinrichtungen: Da es sich bei AnimatedLLM um eine reine statische Front-End-Anwendung handelt, sind die Kosten für die Verteilung in großem Maßstab äußerst niedrig. Es kann mit einem Klick über CDN oder Spiegelung auf dem Campus an Hunderte von Lehrterminals verteilt werden, ohne Parallelitätsbeschränkungen und ohne Lizenzprüfungsrisiken (MIT-Lizenz erlaubt kommerzielle Nutzung und sekundäre Verteilung). Die einzigen versteckten Kosten sind: Wenn Sie den Demo-Inhalt und die vorberechneten Trajektorien ändern müssen, benötigen Sie Python-Datenverarbeitungsfunktionen und D3.js/GSAP-Front-End-Entwicklungsfunktionen, was eine gewisse Anpassungsschwelle für nicht-technische Bildungseinrichtungen darstellt.

Hauptfunktionen von AnimatedLLM

Das funktionale Design von AnimatedLLM folgt eng dem Kerngedanken „Wie lässt sich das Funktionsprinzip von LLM klar erklären“ und dreht sich um die beiden Anhaltspunkte Textgenerierung und Modelltraining. Jeder Hinweis ist in zwei Tiefenstufen unterteilt: einfach und fortgeschritten.

• Visualisierung der Textgenerierung (einfach): Zeigt, wie LLM Text Token für Token generiert. Die aktuell generierte Token-Sequenz wird oben auf der Seite angezeigt und die Zeitleiste wird verwendet, um die Generierungsreihenfolge und -geschwindigkeit jedes Tokens unten zu markieren. Benutzer können die Leertaste verwenden, um die Animation abzuspielen/anzuhalten, die →/←-Tasten, um Bild für Bild zu durchlaufen, und die N-Taste, um zum nächsten Token zu springen. Versteckte Verknüpfung: Die Zeitleiste ist mit der Token-Sequenz verknüpft. Bewegen Sie den Mauszeiger während einer Pause über ein Token, um die Wahrscheinlichkeitsverteilung Top-K dieses Schritts anzuzeigen. Dadurch wird das abstrakte Konzept „Das Modell sagt jeweils nur das nächste Wort vorher“ in ein interaktives Element umgesetzt, das „angefasst“ werden kann.

• Visualisierung des internen Mechanismus des Transformators (fortgeschritten): Gehen Sie tief in das Modell ein, um zu zeigen, wie der Aufmerksamkeitsmechanismus (Attention) funktioniert. Die Positionsänderungen des Tokens im Einbettungsraum, die Zuweisung von Multi-Head-Aufmerksamkeitsgewichten und der Aktivierungsstatus der Feed-Forward-Schicht werden in dynamischen Grafiken dargestellt. Versteckte Verknüpfung: Wenn der Benutzer zu einer bestimmten Ebene wechselt, hebt die zugrunde liegende Token-Sequenz synchron das aktuell verarbeitete Token hervor, und die Aufmerksamkeitsmatrix der oberen Ebene zeigt synchron die Aufmerksamkeitsgewichtung des Tokens gegenüber anderen Token an – die dreischichtige Verknüpfung macht den „Token-Flusspfad im Modell“ auf einen Blick klar.

• Visualisierung des Trainingsprozesses: Dies ist eine besondere Funktion von AnimatedLLM, die es von den meisten Visualisierungstools unterscheidet. Zeigt, wie das Modell in der Vortrainingsphase mit zufälligen Gewichten beginnt und den Verlust durch wiederholtes Verarbeiten von Trainingsstichproben schrittweise reduziert. Der Grundpfad zeigt den abnehmenden Trend der Verlustkurve mit der Anzahl der Trainingsschritte; Der erweiterte Pfad geht tief in den mikroskopischen Prozess der Rückausbreitung ein und zeigt, wie sich der Gradient Schicht für Schicht von der Ausgabeschicht zurück ausbreitet. Versteckte Verknüpfung: Trainingsschritte werden mit Parameteraktualisierungsanimationen synchronisiert – jeder Schritt ist eine Trainingsiteration, und die Farbänderung der Modellparametermatrix liefert Echtzeit-Feedback über die Gewichtsaktualisierungsamplitude und hilft den Schülern, die Intuition von „Training = Parameter-Feinabstimmung“ zu entwickeln.

• LLM-Cheatsheet: Bietet ein herunterladbares PDF-Cheatsheet, das die Kernkonzepte von LLM (Tokenisierung, Einbettung, Aufmerksamkeit, Transformer-Block, Ausgabewahrscheinlichkeitsverteilung usw.) zusammenfasst. Nutzwert: Geeignet als ergänzendes Material für Vorlesungen im Klassenzimmer oder als Nachschlagewerk zum Selbststudium für Studierende, das interaktive Erkundung mit statischer Referenz kombiniert.

• Tastatursteuerungssystem: Bietet einen vollständigen Satz an Tastaturkürzeln (Leertaste abspielen/pausieren, →/← Schritt N Sprungmarke, G zum Ende springen R Zurücksetzen T helles und dunkles Thema wechseln L Sprache wechseln H Tastenkombinationshilfe anzeigen), sodass Dozenten den Rhythmus reibungslos steuern können, ohne dass sie während der Präsentation eine Maus benötigen. Expertenmeinung: Dies mag wie „Erfahrungsoptimierung“ erscheinen, aber tatsächlich ist es die zentrale Wettbewerbsfähigkeit von Lehrmitteln – Dozenten müssen die Demonstration während des Unterrichts erklären und kontrollieren. Mausbedienung unterbricht den Gedankengang und blinde Tastaturbedienung sorgt für die Kontinuität des Lehrrhythmus.

Modell- und Versionsentwicklung von AnimatedLLM

Die Versionsgeschichte von AnimatedLLM ist kurz, aber klar – das Projekt befindet sich derzeit in einem frühen Stadium, mit nur einer offiziellen Release-Version (v1.0.0) von 2026–07, aber die Entwicklungsgeschichte deckt die komplette Verbindung vom Prototyp bis zur wissenschaftlichen Veröffentlichung ab.

Akademische Prototypenphase (2024-2025-12)

Das Projekt wurde zunächst auf GitHub unter dem Namen „animated-llm“ entwickelt und hat mehrere interne Iterationen und Architekturanpassungen durchlaufen. Zwischen Ende 2024 und 2025 baute der Autor eine zentrale Visualisierungs-Engine rund um den D3.js + GSAP-Technologie-Stack auf und sammelte Laufbahndaten mehrerer Open-Source-LLMs (wie der GPT-2-Serie) anhand sorgfältig ausgewählter Beispieleingaben. Im Dezember 2025 werden die Forschungsergebnisse in einem Papier zusammengefasst und bei TeachNLP @ EACL 2026 eingereicht.

v1.0.0 offiziell veröffentlicht (14.12.2025)

Dies ist die erste öffentlich veröffentlichte Version des Projekts. Das entsprechende Git-Tag ist „v1.0.0“ und der Commit-Hash ist „4a76f65“. Diese Version enthält:

• Vollständige Visualisierung der Textgenerierung (Basic + Advanced)
• Visualisierung des Trainingsprozesses (Grundkenntnisse + Fortgeschrittene)
• LLM-Spickzettel PDF
• Tastatursteuerungssystem
• Heller und dunkler Themenwechsel
• Responsive Layout-Anpassung
• Vollständiges Open-Source-Warehouse-Paket (LICENSE, CONTRIBUTING.md, CODE_OF_CONDUCT.md)

Überarbeitungsphase des Papiers (2026-01)

Am 30. Januar 2026 wurde das Dokument auf arXiv v2 (arXiv:2601.04213v2) aktualisiert, wobei der Inhalt optimiert und die Diagramme auf der Grundlage von v1 optimiert wurden. Das Update der Papierversion stellt fest, dass es keine funktionalen Änderungen am Tool selbst gibt, sondern Verbesserungen im akademischen Ausdruck.

Aktueller Stand und weitere Erwartungen

Ab 2026–07 befindet sich das Projekt auf GitHub in einem stabilen Wartungsstatus und die Einreichungsaktivitäten konzentrieren sich hauptsächlich auf Fehlerbehebungen und Abhängigkeitsaktualisierungen. Es wurden keine klare Roadmap oder Pläne für die nächste Version bekannt gegeben. Der Autor markiert in der README-Datei „PRs Welcome“, um seine Bereitschaft anzuzeigen, Community-Beiträge anzunehmen. Für Bildungseinrichtungen ist der Funktionsumfang der aktuellen Version vollständig genug, um die Kernanforderungen für die Einführungslehre in LLM abzudecken. Zu den erwarteten Aktualisierungsanweisungen für nachfolgende Versionen gehören möglicherweise: mehr vorberechnete Modelltrajektorien (z. B. LLaMA, Mistral-Serie), Schnittstellenlokalisierung in mehr Sprachen, Unterstützung für benutzerdefinierte Eingabeaufforderungen für Wörter und umfassendere Trainingsindikatoren für die dynamische Visualisierung.

Versionsknoten	Datum	Wichtige Änderungen	Beschreibung
Akademischer Prototyp	2024-2025-12	Kerntechnologieentwicklung	Erstellen Sie eine D3.js+GSAP-Visualisierungs-Engine, um LLM-Trajektoriendaten zu sammeln
v1.0.0	14.12.2025	Erste öffentliche Veröffentlichung	Vollständige Veröffentlichung, unterstützende Papiereinreichung
arXiv v2	30.01.2026	Papieraktualisierung	Keine Änderungen an Werkzeugfunktionen, akademische Ausdrucksoptimierung
Aktuelle Entwicklungsversion	2026-07	Wartungszeitraum	Fehlerbehebungen und Abhängigkeitsaktualisierungen, keine neue Version veröffentlicht

Technische Vorteile von AnimatedLLM

Die technische Umsetzung von AnimatedLLM dreht sich um die Herausforderung, „wie man den internen Zustand von LLM im Browser effizient und genau reproduzieren kann“. Die Lösung bietet Designoptionen auf drei Ebenen: Datenaufbereitung, Animations-Engine und interaktive Steuerung.

Vorberechnete Trajektorienstrategie: AnimatedLLM ruft LLM nicht in Echtzeit auf, um Inhalte zu generieren, sondern verwendet vorberechnete Modelle, um Trajektoriendaten auszuführen. Der spezifische Prozess ist: Verwenden Sie Python-Skripte, um Open-Source-LLM (z. B. die GPT-2-Serie) auf dem Server auszuführen, führen Sie eine Vorwärtsinferenz für sorgfältig ausgewählte Beispieleingaben durch, zeichnen Sie den verborgenen Zustand, die Aufmerksamkeitsgewichtung, die Wahrscheinlichkeitsverteilung und andere Daten jeder Ebene auf und serialisieren Sie diese Daten dann im JSON-Format und packen Sie sie in statische Front-End-Ressourcen. Mechanismus → Wirkung: Diese Strategie eliminiert vollständig die Abhängigkeit von GPU-Inferenzhardware und ermöglicht die Bereitstellung der gesamten Anwendung auf einem statischen Hosting-Dienst ohne Rechenleistung; Gleichzeitig wird die Wiederholbarkeit der Demonstrationsergebnisse sichergestellt – unabhängig davon, wie oft dieselbe Eingabe demonstriert wird, ist die Animationsbahn vollständig konsistent, was für Lehrszenarien von entscheidender Bedeutung ist. Preis: Benutzer können keine Eingabeaufforderungswörter eingeben, um eine Visualisierung zu erhalten, und sie können nur aus voreingestellten Beispielen auswählen, was die Flexibilität einschränkt.

D3.js + GSAP-Dual-Engine-Architektur: Die Front-End-Animationsschicht verwendet sowohl D3.js (Datenverarbeitung und SVG-Grafikgenerierung) als auch GSAP (GreenSock Animation Platform, leistungsstarke Timeline-Animationssteuerung). D3.js ist für die Abbildung von JSON-Trajektoriendaten in visuelle Elemente verantwortlich (Wärmekarte der Aufmerksamkeitsmatrix, Positionsänderung des Tokens im Einbettungsraum, Wahrscheinlichkeitsbalken usw.), und GSAP ist für die Steuerung des Animations-Timings dieser Elemente verantwortlich – Wiedergabe, Pause, Bild-für-Bild-Schritt, Sprung usw. Mechanismus → Wirkung: Der Vorteil von D3.js bei datengesteuerten Dokumenten gewährleistet die strikte Bindung visueller Grafiken und zugrunde liegender Daten, und die Reife von GSAP bei der Zeitachsensteuerung gewährleistet dies Präzise Wiedergabesteuerung auf Frame-Ebene – beide ergänzen sich und bilden die technische Grundlage für „genaue Daten + reibungslose Animation“. Wenn Sie D3.js dagegen nur für Animationen verwenden, wird der Übergangsmechanismus bei der Verwaltung komplexer „Pause-Schritt-Sprung“-Interaktionssequenzen Schwierigkeiten bei der Zustandsverwaltung haben.

Reine statische Front-End-Architektur: Die gesamte Anwendung verfügt über keine Back-End-Dienste, keine Datenbank und kein Authentifizierungssystem. Das Build-Produkt ist eine rein statische HTML/CSS/JS-Datei, die über Vite gepackt wird. Mechanismus → Wirkung: Das bedeutet, dass AnimatedLLM auf jeder statischen Datei-Hosting-Plattform (GitHub Pages, Netlify, Vercel oder sogar das lokale „file://“-Protokoll) bereitgestellt werden kann, ohne dass ein Server gewartet werden muss und man sich keine Gedanken über Parallelität und Auslastung machen muss. Für Unterrichtsszenarien können Dozenten sogar einen USB-Stick verwenden, um sie auf den Computer im Klassenzimmer zu kopieren und ihn direkt ohne Netzwerkverbindung auszuführen.

Tastaturgesteuertes Interaktionsdesign: Im Gegensatz zu den meisten Webanwendungen, die auf Mausklicks basieren, werden die Kerninteraktionen von AnimatedLLM alle über die Tastatur ausgeführt. Mechanismus → Wirkung: Dies hat praktische Auswirkungen auf Lehrdemonstrationen – der Dozent sollte seine Augen und Aufmerksamkeit beim Erklären auf die Schüler und den Bildschirm richten, anstatt zwischen Tastatur und Maus hin und her zu wechseln. Tastaturkürzel (Leertaste, →/←, N, G, R, T, L) bilden eine vollständige „Remote-Präsentation“, die Lehrer mithilfe des Muskelgedächtnisses absolvieren können.

Visualisierungsebene der Aufmerksamkeit: Im erweiterten Modus visualisiert AnimatedLLM den Aufmerksamkeitsmechanismus von Transformer als dynamische Heatmap-Matrix und zeigt bei jedem Schritt die Aufmerksamkeitsgewichtsverteilung des aktuellen Tokens an alle Kontext-Tokens an. Gleichzeitig wird die Farbkodierung verwendet, um die Entwicklung des Einbettungsraums zu zeigen – wie sich die Vektordarstellung des Tokens während des schichtweisen Übertragungsprozesses allmählich von der reinen semantischen Kodierung zur kontextbezogenen Darstellung ändert. Mechanismus → Wirkung: Durch diese Visualisierung können Schüler intuitiv erkennen, dass „Aufmerksamkeit nicht statisch ist, sondern sich dynamisch mit dem Generierungsprozess ändert“ – im selben Satz schenkt das Modell dem Kontext bei der Generierung verschiedener Token völlig unterschiedliche Aufmerksamkeit. Diese Beobachtung ist ein wichtiger Einstiegspunkt zum Verständnis der Positionskodierungs- und Selbstaufmerksamkeitsmechanismen von Transformer.

So verwenden Sie AnimatedLLM

Der Nutzungspfad von AnimatedLLM deckt das gesamte Spektrum von „Null-Schwellen-Online-Erlebnis“ bis hin zu „lokaler Entwicklung und Anpassung“ ab. Benutzer mit unterschiedlichen Rollen können den Eingang wählen, der am besten zu ihnen passt.

So verwenden Sie	Geeignet für die Menge	Operationspfad	Technische Anforderungen	Kosten
Direkter Zugriff online	Alle Benutzer	Besuchen Sie animiertellm.github.io → Wählen Sie „Textgenerierung“ oder „Training“ → Drücken Sie zum Abspielen die Leertaste	Keine (nur Browser)	Völlig kostenlos
Lokal ausführen	Pädagogen, Entwickler	git clone → npm install → npm run dev	Node.js >= 20.9.0 + npm	Völlig kostenlos
Selbstgehostete Bereitstellung	Bildungseinrichtungen	Statische Dateien erstellen → auf jedem Webserver oder CDN bereitstellen	Grundlegende Front-End-Bereitstellungsfunktionen	Hosting-Gebühren
Anpassung des Quellcodes	Entwickler, Forscher	Fork Warehouse → Vorberechnete Daten oder Visualisierungslogik ändern → Neu erstellen	Python + JavaScript + D3.js	Völlig kostenlos

Typische Schritte für die Online-Nutzung:

1. Öffnen Sie den Browser und besuchen Sie „animatedllm.github.io“.
2. Auf der Startseite werden vier Lernpfade in Form von Karten angezeigt: Grundlagen der Textgenerierung, Wie Transformer Text generiert, Trainingsgrundlagen und Wie Transformer trainiert wird.
3. Wählen Sie einen Pfad aus, um zur Demoseite zu gelangen. Der Hauptteil der Seite ist der Visualisierungsbereich mit dem Bedienfeld und der Zeitleiste unten.
4. Drücken Sie die Leertaste, um die automatische Wiedergabe zu starten und beobachten Sie, wie Token nacheinander generiert werden oder wie der Trainingsverlust allmählich abnimmt.
5. Zur Feinsteuerung verwenden Sie die Tasten →/←, um Bild für Bild zu blättern, die N-Taste, um zum nächsten Tastenschritt zu springen, und die G-Taste, um zum Ende zu springen.
6. Drücken Sie die T-Taste, um zwischen hellen und dunklen Themen zu wechseln und sich so an die Lichtverhältnisse verschiedener Präsentationsumgebungen anzupassen.
7. Drücken Sie die H-Taste, um jederzeit die vollständige Shortcut-Liste anzuzeigen.

Lokale Entwicklung und Bau:

„Bash

Repository klonen

Git-Klon https://github.com/kasnerz/animated-llm.git CD animierter Film

Abhängigkeiten installieren (Node.js >= 20.9.0)

npm installieren

Starten Sie den Entwicklungsserver (Standard http://localhost:5173)

npm rundev

Produktionsversion erstellen

npm run build „

Das Build-Produkt befindet sich im Verzeichnis „dist/“ und kann direkt auf jedem statischen Hosting-Dienst bereitgestellt werden. Schlüsseltechnologie-Stack: Vite ist das Konstruktionstool, React (Inferenz) ist das UI-Framework und D3.js und GSAP sind die zentralen Visualisierungs-/Animations-Engines. Die spezifische Abhängigkeitsversion unterliegt „package.json“.

Bekannte Nutzungseinschränkungen:

• Derzeit wird nur die englische Benutzeroberfläche bereitgestellt und Benutzer, die kein Englisch sprechen, müssen über grundlegende Lesekenntnisse in Englisch verfügen.
• Vorberechnete Trajektorien basieren auf bestimmten Modellen (GPT-2-Serie) und repräsentieren möglicherweise nicht alle LLM-Verhaltensmuster.
• Der Demonstrationsinhalt ist festgelegt und unterstützt keine benutzerdefinierten Eingabeaufforderungswörter.
• Bei langen Schritten (z. B. einer generierten Sequenz aus Hunderten von Schritten) kann es auf Low-End-Geräten zu Framerate-Einbrüchen kommen.

Produktpreise für AnimatedLLM

Die Preisstruktur von AnimatedLLM ist äußerst einfach – es ist völlig kostenlos, ohne Gebührenmodell, Mehrwertdienste oder kostenpflichtige Freischaltungen jeglicher Art.

Bezahlte Stufen	Gebühren	Was ist enthalten	Einschränkungen
Persönliche Online-Nutzung	Keine Kosten	Alle Visualisierungspfade, alle Steuerfunktionen	Unbegrenzt, keine Registrierung erforderlich
Lokal/selbstgehostet ausführen	Keine Kosten	Vollständiger Quellcode + Build-Toolchain	Node.js erforderlich
Kommerzieller/pädagogischer Einsatz	Keine Gebühr	MIT-Lizenz erlaubt jegliche Nutzung und Weiterverbreitung	Vorbehaltlich der Bedingungen der MIT-Lizenz (Urheberrechtsvermerk bleibt erhalten)
Maßgeschneiderte Entwicklung	Nicht bekannt gegeben	Vorberechnete Daten oder Visualisierungslogik ändern	Erfordert eigene Investitionen in F&E-Arbeitskräfte

Nachhaltigkeitsanalyse des kostenlosen Modells: Die Freiheit von AnimatedLLM ist keine kommerzielle Strategie, sondern der offene Austausch akademischer Ergebnisse – das Projekt wird unter der Leitung von Laboren akademischer Institutionen entwickelt und das Hauptziel ist die Verbreitung von Bildung und Forschung und nicht der Gewinn. Das bedeutet, dass seine Nachhaltigkeit von der Laborfinanzierung und dem persönlichen Zeitaufwand der Projektträger abhängt und nicht von kommerziellen Einnahmen. Für Bildungseinrichtungen mit langfristigen Abhängigkeitsplänen wird empfohlen, auf die Aktivitätshäufigkeit und die Reaktionsgeschwindigkeit von GitHub-Lagern zu achten und die langfristigen Wartungsfunktionen der Community zu bewerten.

Erinnerung an versteckte Kosten:

• Wenn Sie den Demonstrationsinhalt ändern müssen (Beispieleingabe ersetzen, an andere Modelle anpassen), müssen Sie Ihre eigenen Python-Datenverarbeitungsskripte vorbereiten und den Datenbindungsmechanismus von D3.js verstehen – dies stellt für technisch nicht versierte Pädagogen einen gewissen Lern- und Zeitaufwand dar.
• Im selbstgehosteten Szenario kostet die Software zwar null, es sind jedoch grundlegende Fähigkeiten zur Bereitstellung statischer Websites (oder Unterstützung durch die IT-Abteilung) erforderlich. Wenn der Zugriff auf GitHub-Seiten in Ihrem Campus-Netzwerk eingeschränkt ist, ist Selbsthosting fast ein Muss.

Anwendungsszenarien von AnimatedLLM

Der Wert von AnimatedLLM wird in Bildungs- und Kommunikationsszenarien maximiert, in denen es am meisten darauf ankommt, „das Unsichtbare deutlich zu machen“. Die folgenden vier Arten von Szenarien wurden von Zielbenutzern überprüft (durch Überprüfung wissenschaftlicher Arbeiten und tatsächliche Lehrversuche):

• Unterricht in NLP/KI-Kursen an Hochschulen: In NLP-Einführungskursen auf Bachelor- oder Masterniveau können Dozenten AnimatedLLM verwenden, um statische Transformer-Architekturfolien zu ersetzen. Bei der traditionellen Lehrmethode müssen die Schüler den Prozess der Token-Generierung anhand mehrerer statischer Bilder verstehen – sprechen Sie zuerst über Tokenisierung, dann über Einbettung und dann über Aufmerksamkeit – abstrakt und fragmentiert. AnimatedLLM verbindet diesen Prozess zu einer kontinuierlichen Animation, und Schüler können den gesamten Flusspfad des Tokens von der Eingabe bis zur Ausgabe in einer Schnittstelle sehen. Umsetzungstipps: Es wird empfohlen, dass der Dozent vor der Erklärung die gesamte Animation einmal abspielt, damit sich die Studierenden einen Gesamteindruck verschaffen können, dann Schritt für Schritt die Details Bild für Bild erklärt und sie abschließend noch einmal abspielt, um das Verständnis zu festigen. Dieser Unterrichtsrhythmus „Ganzes → Teil → Ganzes“ kann die Effizienz der Konzeptaufnahme deutlich verbessern.

• Technische Vorträge und Konferenzpräsentationen: Bei KI-Meetups, technischen Konferenzen oder Inhouse-Schulungen müssen Dozenten schnell ein intuitives Verständnis dafür entwickeln, wie LLM vor Laienpublikum funktioniert. Der automatische Wiedergabemodus von AnimatedLLM kann als Eröffnungsdemonstration zum Thema „LLM verstehen in drei Minuten“ genutzt werden, woraufhin der Dozent mit konkreten Geschäftsfällen beginnt. Tipps für den Vortrag: Bevor Sie eine Rede halten, empfiehlt es sich, die gesamte Wiedergabesequenz zu proben, um sicherzustellen, dass die Projektorauflösung und die Schriftgröße geeignet sind; Drücken Sie die H-Taste, um schnell die Liste der Tastenkombinationen anzuzeigen und dem Publikum das Verständnis der Betriebslogik zu erleichtern.

• Popularisierung der KI-Wissenschaft und Produktion von Online-Lehrinhalten: Technologie-Blogger, Bilibili UP-Besitzer und Inhaltsersteller von Online-Bildungsplattformen können den AnimatedLLM-Demonstrationsprozess als Kernmaterial des Lehrvideos aufzeichnen. Im Vergleich zu statischen Screenshots können dynamische Animationen zur Token-Generierung und Änderungen der Aufmerksamkeits-Heatmap die Verständnisschwelle des Publikums erheblich senken. Fallende Tipps: Es wird empfohlen, die G-Taste zu verwenden, um zu wichtigen Schritten zu springen und dann Schritt für Bild aufzunehmen, um eine große Anzahl wartender Animationen bei der Bildschirmaufnahme zu vermeiden, die die Videozeit verschwenden. Helle Themen eignen sich besser für die Bildschirmaufzeichnung (dunkle Themen neigen dazu, nach der Komprimierung Details zu verlieren).

• Wie Selbststudium LLM funktioniert: Für unabhängige Lernende, die verstehen möchten, „wie große Modelle funktionieren“, bietet AnimatedLLM eine barrierefreie interaktive Lernumgebung. Es ist nicht erforderlich, ein Konto zu registrieren, große Datensätze herunterzuladen oder eine GPU zu verwenden. Die Lernenden können wiederholt in ihrem eigenen Tempo spielen und Fortschritte machen. Sie können pausieren, wenn sie Änderungen in der Aufmerksamkeitsmatrix und Wahrscheinlichkeitsverteilung nicht verstehen und beobachten. Implementierungstipps: Es wird empfohlen, es zusammen mit dem LLM Cheatsheet PDF zu verwenden – lesen Sie zuerst das Cheatsheet, um die Grundkonzepte zu verstehen, und finden Sie dann die entsprechende konkrete Darstellung in der Visualisierung.

Ungeeignete Szenarien: AnimatedLLM ist für die folgenden Situationen nicht geeignet: Szenarien, die das private Verhalten bestimmter Unternehmensmodelle (wie Claude, Gemini) anzeigen müssen; Lehrverfahren, die einen Echtzeitvergleich der Ausgabeunterschiede verschiedener Aufforderungswörter erfordern; kommerzielle Integrationsszenarien, die die Einbettung der Visualisierung in Produkte von Drittanbietern erfordern; kommerzielle Schulungskurse, bei denen strenge Anpassungsanforderungen für Demonstrationsinhalte gelten.

Anwendbare Gruppen von AnimatedLLM

Das Publikum von AnimatedLLM konzentriert sich auf Rollen, die „klar erklären müssen, wie LLM funktioniert“, und nicht auf tägliche LLM-Benutzer.

• Dozent für AI/NLP-Kurse an der Universität: Dies ist der Hauptzielbenutzer. Dozenten können AnimatedLLM als Unterrichtshilfe verwenden, um herkömmliche Folien zu ersetzen und den Transformer-Generierungs- und Trainingsprozess zu demonstrieren. Bei Kursen von 2–4 Stunden pro Woche kann der Dozent an jedem wichtigen Konzeptpunkt (z. B. Aufmerksamkeitsmechanismus, autoregressive Generierung, Verlustreduzierung) zum entsprechenden Visualisierungsmodul von AnimatedLLM wechseln und 15 Minuten abstrakte Erklärung in eine 3-minütige animierte Demonstration + 5-minütige interaktive Fragen und Antworten komprimieren. Kostensenkung und Effizienzsteigerung: Nehmen Sie als Beispiel den Abschnitt „Transformer Generation Mechanism“ im NLP-Einführungskurs. Das traditionelle Unterrichtsmodell erfordert 6-8 statische Bilder + etwa 20 Minuten mündliche Erklärung + die Schüler lesen ergänzende Materialien nach dem Unterricht. Die durchschnittliche Quote der Studenten, die Konzepte beherrschen, liegt bei etwa 60 % (die korrekte Quote relevanter Fragen in der Prüfung). Nach der Verwendung von AnimatedLLM kann der Dozent den Unterricht desselben Inhalts mit einer 5-minütigen Demonstration + 3-minütiger Keyframe-Erklärung + 2-minütiger interaktiver Frage-und-Antwort-Runde abschließen. Es wird erwartet, dass die Konzeptbeherrschung der Studierenden auf über 80 % gesteigert werden kann. Nicht passende Grenzen: Für fortgeschrittene Graduiertenkurse, die bereits über eine Grundlage in Deep Learning verfügen, ist die Visualisierung von AnimatedLLM möglicherweise nicht detailliert genug – sie zeigt eher makroskopische Prozesse als eine mathematische Gradientenableitung.

• Technische Redakteure und KI-Ersteller populärer Wissenschaft: Blogger, Bilibili UP-Besitzer und Technologiereporter von Nachrichtenmedien können die Animationssequenzen von AnimatedLLM als Illustrationen oder Videomaterial verwenden, wenn sie LLM-bezogene Inhalte erstellen. Die Kombination aus herkömmlichem Text + statischen Screenshots reicht oft nicht aus, um dynamische Prozesse wie den „Aufmerksamkeitsmechanismus“ zu erklären, während die Frame-by-Frame-Animation von AnimatedLLM direkt in GIF- oder Bildschirmaufzeichnungsclips umgewandelt und in Artikel eingebettet werden kann. Kostenreduzierung und Effizienzsteigerung: Erstellen Sie einen technischen Artikel, in dem der Aufmerksamkeitsmechanismus von Transformer erläutert wird. Die traditionelle Methode dauert 3–5 Stunden, um das schematische Diagramm und das Flussdiagramm zu zeichnen. Mit AnimatedLLM zum Aufzeichnen des Bildschirms können Sie in nur 30 Minuten Animationsmaterialien aus mehr als 10 verschiedenen Perspektiven erhalten. Ungeeignete Grenze: Die festen vorberechneten Daten von AnimatedLLM können keine Szenarien erfüllen, die hochgradig angepasste Demonstrationsinhalte erfordern (z. B. den Vergleich von Unterschieden in verschiedenen Modellarchitekturen).

• LLM-Anfänger und Quereinsteiger: Für Selbstlerner, die von der traditionellen Softwareentwicklung oder anderen Branchen in den KI-Bereich wechseln, bietet AnimatedLLM einen Lernpfad: „Erst die Animation ansehen und dann den Aufsatz lesen“. Empfohlene Lernsequenz: Zuerst Text Generation Basics vollständig durchspielen (5 Minuten) → LLM Cheatsheet lesen (15 Minuten) → Schritt für Frame „Wie Transformer Text generiert“ (30 Minuten, mit einer Pause, um Veränderungen in der Aufmerksamkeitsmatrix zu beobachten) → Wenn Sie zum klassischen Papier „Attention Is All You Need“ zurückkehren, wird die Tiefe des Verständnisses der Architekturbeschreibung qualitativ verbessert. Ungeeignete Grenze: Praktiker, die bereits mit der Transformer-Architektur vertraut sind, müssen nicht über AnimatedLLM lernen. Seine Informationsdichte ist geringer als beim direkten Lesen von Aufsätzen oder beim Durchführen von Experimenten.

• Interne KI-Trainer: Bei der Durchführung interner Schulungen zur KI-Popularisierung in traditionellen Unternehmen (Finanzen, Fertigung, Medizin) treffen die Trainer auf Geschäftspersonal und Management mit nichttechnischem Hintergrund. Die Visualisierungsmöglichkeiten von AnimatedLLM können dieser Gruppe dabei helfen, ein grundlegendes Verständnis dafür zu entwickeln, dass „LLM keine mysteriöse Blackbox ist“. Grenze der Zusammenarbeit zwischen Mensch und Computer: Während des Trainingsprozesses übernimmt AnimatedLLM 100 % der Abschnitte „dynamische Demonstration“ (vollautomatisch), aber der Teil „Konzepterklärung → Fallzuordnung → Geschäftsdiskussion“ muss vom Trainer manuell ausgefüllt werden. Es kann nicht erwartet werden, dass AnimatedLLM die Fähigkeit eines Trainers ersetzt, Branchenwissen zu vermitteln.

Zusammenfassung und Ausblick von AnimatedLLM

AnimatedLLM nimmt im Segment „AI Education Visualization“ eine einzigartige Position ein – es ist nicht das Tool mit den meisten Parametern und den umfassendsten Funktionen, aber es ist derzeit das einzige interaktive LLM-Lehrvisualisierungstool, das durch akademische Peer-Review (EACL TeachNLP) verifiziert wurde.

Kernkompetenzen: Die Kombination aus MIT-Open-Source + reinem Front-End-Betrieb + D3.js/GSAP-Dual-Engine-Animation + wissenschaftlicher Aufsatzunterstützung macht es fast zu keinem direkten Konkurrenten in den universitären NLP-Ausbildungs- und KI-Wissenschaftspopularisierungsszenarien. Die Vorteile der vorberechneten Trajektorienstrategie im Hinblick auf die „Steuerbarkeit des Unterrichts“ (wiederholbare Ergebnisse, keine Abhängigkeit von der Rechenleistung) überwiegen die Verluste (begrenzte Flexibilität) bei weitem und es handelt sich um einen technischen Kompromiss, der sich hervorragend an Bildungsszenarien anpassen lässt.

Wichtige aktuelle Einschränkungen:

1. Fester Demonstrationsinhalt: Benutzer können keine benutzerdefinierten Eingabeaufforderungswörter eingeben oder zwischen verschiedenen Modellen wechseln, was die Anwendung in Lehrszenarien zum „Modellverhaltensvergleich“ einschränkt. Wenn in einer zukünftigen Version Parallelvergleiche zwischen mehreren Sätzen vorberechneter Trajektorien (z. B. die unterschiedliche Leistung desselben Eingabeaufforderungsworts auf GPT-2 und LLaMA) unterstützt werden, wird der Lehrnutzen erheblich erweitert.
2. Sprachbarriere: Die Schnittstelle unterstützt nur Englisch. Für das Unterrichtsszenario chinesischer NLP-Kurse muss der Dozent zusätzliche sprachliche Anleitung geben. Wenn die Community eine chinesische Übersetzung beisteuert oder der Beamte das i18n-Framework bereitstellt, wird die Anpassungsfähigkeit an den chinesischen Markt erheblich verbessert.
3. Geringe Community-Aktivität: Die Community-Größe von 15 Sternen und 0 Forks bedeutet, dass es nur sehr wenige externe Mitwirkende gibt und die langfristige Wartung vollständig von der Freizeit der Hauptautoren abhängt. Wenn der Autor aufgrund einer Verschiebung des akademischen Schwerpunkts die Wartung einstellt, kann das Projekt in den Ruhezustand „verfügbar, aber nicht aktualisiert“ geraten.
4. Aktualität des Modells: Die vorberechneten Trajektorien basieren auf frühen Open-Source-Modellen wie GPT-2 und können die Verhaltensmerkmale zeitgenössischer Modelle (wie LLaMA 3, Mistral, DeepSeek) nicht widerspiegeln. Es hat wenig Einfluss auf die Erklärung „allgemeiner Transformer-Prinzipien“, reicht jedoch nicht aus, um spezifische Komponenten zeitgenössischer Modelle (wie MoE, Grouped Query Attention) zu vermitteln.

Folgebeobachtungspunkte:

• Ob das Projekt mit der TeachNLP 2026-Konferenz (2026) mehr akademische Aufmerksamkeit und Mitwirkende gewinnen wird. – Ob der Autor plant, vorberechnete Trajektorienbibliotheken für weitere Modelle hinzuzufügen und ob Kanäle für die Community geöffnet werden sollen, um Trajektoriendaten beizusteuern. – Ob es weitere aktive Zweigprojekte geben wird, die auf demselben Konzept basieren (z. B. eine Version, die benutzerdefinierte Eingabeaufforderungswörter unterstützt).

Beschaffungs- und Einführungsrisikobewertung:

• Für Hochschuldozenten und Selbstlernende: Das Adoptionsrisiko ist äußerst gering. Es kann sofort und ohne Kosten, ohne Bereitstellung und ohne Registrierung verwendet werden. Auch wenn die Wartung des Projekts eingestellt wird, bleibt der Lehrwert der vorhandenen Funktionen bestehen. Es wird empfohlen, es umgehend in die Lehrmittelbibliothek aufzunehmen.
• Für Bildungseinrichtungen und Online-Bildungsplattformen: Das Risiko ist mittel. Es wird empfohlen, vor der Einführung die folgenden Bewertungen vorzunehmen: (1) Bestätigen Sie die Stabilität des Zugriffs des Campusnetzwerks auf GitHub-Seiten. Wenn es eingeschränkt ist, muss die IT-Abteilung beim Aufbau eines selbst gehosteten Spiegels behilflich sein. (2) Beurteilen Sie die Akzeptanz der englischen Benutzeroberfläche durch den Dozenten und erstellen Sie bei Bedarf ein chinesisches Erklärungsskript. (3) Entwickeln Sie einen Backup-Plan – wenn das Projekt nicht innerhalb von 12 Monaten aktualisiert wird, gibt es ein alternatives Tool oder einen Plan, um auf den traditionellen Folienunterricht zurückzugreifen? Es wird nicht empfohlen, es als einziges Lehrmittel in Kernkursen zu verwenden, sondern eignet sich eher als zusätzliches Demonstrationswerkzeug, das parallel zu bestehenden Unterrichtsplänen verwendet werden kann.
• Für Unternehmen, die für die kommerzielle Produktkommunikation auf LLM-Visualisierungsfunktionen angewiesen sind: Das Risiko ist höher. Als akademisches Open-Source-Projekt bietet AnimatedLLM keinen kommerziellen Support, keine SLA-Verpflichtung und keine Versionskompatibilitätsgarantie. Wenn das kommerzielle Demonstrationsszenario Werkzeugverfügbarkeit und Aktualisierungshäufigkeit erfordert, empfiehlt es sich zu prüfen, ob eine interne Version basierend auf den technischen Ideen von AnimatedLLM (D3.js + GSAP + vorberechnete Trajektorien) entwickelt oder diese als technischer Verifizierungsprototyp verwendet und dann selbst eine individuellere Lösung implementiert werden soll.

Verwandte Tools: github-copilot, cursor

Versionsinfo

• aktuell ：Aktuelle Version. （~2026-07）
• Start ：Produkt geht online. （~2025-09）