Komponenten-Galerie
Alle interaktiven Lektions-Komponenten mit ihren Storybook-artigen Demo-Zuständen. Alle Daten sind simuliert — noch kein Modell verbunden.
<Duel />
Vor dem Ausführen
Der Startzustand: Aufgabe, Editor, Live-Token-Zähler und die gesperrte Modell-Spur.
Bring das Modell dazu, „Canberra.“ zu antworten — mit so wenigen Prompt-Tokens wie möglich. Höflichkeit ist teuer.
Nach dem Lauf (Sieg)
Ein bestandener, günstigerer Versuch: Ein-Satz-Verdikt, Differenz, beide Belege, leiser Delta.
Bring das Modell dazu, „Canberra.“ zu antworten — mit so wenigen Prompt-Tokens wie möglich. Höflichkeit ist teuer.
Die Enthüllung (offen)
Der Lehr-Höhepunkt: der annotierte optimale Versuch, Stellen fokussierbar, Notizen in einer Live-Region.
Bring das Modell dazu, „Canberra.“ zu antworten — mit so wenigen Prompt-Tokens wie möglich. Höflichkeit ist teuer.
Checker nicht bestanden (freundlich)
Der Versuch verfehlte die Anforderung; der Beleg erklärt was, nicht nur ein rotes Kreuz.
Bring das Modell dazu, „Canberra.“ zu antworten — mit so wenigen Prompt-Tokens wie möglich. Höflichkeit ist teuer.
Kaltstart — ausgeschlossen
Ein Kaltstart-Beleg wird als ausgeschlossen markiert; er zählt weder für Verlauf noch Verdikt.
Bring das Modell dazu, „Canberra.“ zu antworten — mit so wenigen Prompt-Tokens wie möglich. Höflichkeit ist teuer.
Fähigkeit fehlt → Replay
Dem verbundenen Modell fehlt eine nötige Fähigkeit, daher läuft der Versuch aus einer Replay-Aufzeichnung.
Bring das Modell dazu, „Canberra.“ zu antworten — mit so wenigen Prompt-Tokens wie möglich. Höflichkeit ist teuer.
Diese Lektion braucht Fähigkeiten, die das verbundene Modell nicht hat — dein Versuch läuft aus einer Replay-Aufzeichnung.
Kein Modell verbunden
Ohne Client kann der Lernende schreiben, aber nicht ausführen; der Zustand sagt das ehrlich.
Bring das Modell dazu, „Canberra.“ zu antworten — mit so wenigen Prompt-Tokens wie möglich. Höflichkeit ist teuer.
Kein Modell verbunden — verbinde eines, um deinen Versuch auszuführen.
<Duel · authored fixture />
Autorisierte Vorlage — m1-l2 (enthüllt)
Die echte m1-l2-Token-Ökonomie-Duellaufgabe, mit abgeschlossenem Versuch und offener Enthüllung — die Anmerkungen stammen aus der Vorlage.
Bring das Modell dazu, „The train is late.“ ins Französische zu übersetzen. Es muss „retard“ enthalten. Dann schaffe es mit weniger Tokens als der optimale Prompt des Modells.
<ReceiptHistory />
Annähernder Verlauf
Sechs Duelle, die von Modell-Siegen zu Lernenden-Siegen tendieren, mit Basislinien-Wechsel beim Modell-Upgrade.
Deine Annäherung
Token-Abstand zum Modell, Duell für Duell. Unter der Linie bist du günstiger als das Modell.
Leerer Zustand
Vor jedem Duell — der leere Zustand zeigt, was der Verlauf werden wird.
Deine Annäherung
Token-Abstand zum Modell, Duell für Duell. Unter der Linie bist du günstiger als das Modell.
Noch keine Duelle
Führe dein erstes Duell aus und dieser Verlauf zeichnet sich selbst — ein Punkt pro Versuch, der zeigt, wie sich dein Abstand zum Modell schließt.
<Receipt />
Einfacher Verbrauchs-Beleg
Die leichte Form, die Playground und ParamCompare zeigen — nur Tokens rein/raus, kein Modell, keine Latenz.
Duell-Beleg — bestanden
Ein vollständiger Duell-Beleg: Bestanden-Marke, Verdikt, Begründung, Modell + Version, Generierungs-Latenz, aufklappbar.
bestandenDein Versuch:14 Eingabe · 20 Ausgabe Tokens— Du gewinnst um 12 TokensDetails ▾
Duell-Beleg — nicht bestanden (freundlich)
Der Checker war nicht bestanden; die Begründung erklärt, was fehlte — nie nur ein rotes Kreuz.
nicht bestandenDein Versuch:9 Eingabe · 5 Ausgabe TokensDetails ▾
Kaltstart — ausgeschlossen
Ein Kaltstart-Beleg wird sichtbar markiert und aus Verlauf und Verdikt ausgeschlossen (ADR-027).
Modell-Versuch:14 Eingabe · 18 Ausgabe TokensDetails ▾
Mit geschätzten kommerziellen Kosten
Lokale Inferenz ist kostenlos; eine kommerzielle Zahl erscheint nur als markierte Schätzung daneben, nie vermischt.
Modell-Versuch:512 Eingabe · 256 Ausgabe TokensDetails ▾
<Playground />
Leerer Chat
Frischer Playground mit Parameter-Reglern, simulierte Antworten.
Vorbelegte Konversation
Startet mitten im Gespräch, mit System-Prompt und Zuglimit 3.
Ohne Parameter-Regler
Minimale Chat-Oberfläche für frühe Lektionen.
Verbrauchs-Beleg & Live-Zähler
Vorbelegter Prompt, Live-Token-Schätzung beim Tippen, Verbrauchs-Beleg nach jeder Antwort, Übungsziel.
- Kürze den Prompt auf ≤ 15 Tokens
💡 Der Zähler unter dem Eingabefeld ist dein Schiedsrichter.
<TokenizerViz />
Leer
Startet leer — Skeleton während der Tokenizer lädt, Live-Zählung beim Tippen.
Englischer Satz
Editierbarer Text, IDs sichtbar, führende Leerzeichen als ␣ — die Standard-Konfiguration in Lektionen.
Langes deutsches Kompositum
Ein einzelnes deutsches Kompositum zerfällt in Subwort-Tokens; verglichen mit der englischen Übersetzung samt Differenz.
💡 Gleiche Bedeutung, völlig unterschiedliche Token-Zahlen.
Emoji
Emoji werden als UTF-8-Byte-Stücke kodiert — ein Zeichen kann mehrere Tokens kosten, Teil-Bytes erscheinen als �.
💡 Das Familien-Emoji besteht aus mehreren Codepoints mit unsichtbaren Bindezeichen — zähl sie.
JSON-Daten
Strukturierte Daten sind token-dicht: jede Klammer, jedes Anführungszeichen, jeder Schlüssel kostet Tokens.
Mit ausgewerteten Zielen
Ziele werden live gegen die Eingabe geprüft und rasten ein; sind alle erfüllt, erscheint der Erfolgszustand.
- ☐Ein Wort ≥ 5 Tokens
- ☐≥ 20 Zeichen ≤ 2 Tokens
Vorberechnete Tokens
Zeigt vom Lektionsautor gelieferte Tokens — es wird gar kein Tokenizer geladen.
<ContextMeter />
Viel Platz
Eine kurze Konversation in einem 128k-Fenster.
Fast voll
Ein 8k-Fenster bei 92 % — der Warnzustand.
Kontext fast voll — älteste Historie wird bald abgeschnitten.
Überlauf
Mehr Tokens als das Fenster fasst — der Fehlerzustand.
Kontextfenster überschritten!
<ParamCompare />
Temperatur-Spektrum
Derselbe Prompt bei Temperatur 0, 0,8 und 1,5.
Beschreibe Regen in einem Satz.
Regen ist Wasser, das in Tropfen aus Wolken fällt.
Regen trommelt leise auf Dächer und verwandelt Straßen in Spiegel.
Regen: der Himmel probt sein silbernes Klavier über einer Stadt aus Regenschirmen.
Prompt-Kosten-Vergleich
Varianten mit eigenen Prompts, verglichen über den Verbrauchs-Beleg statt der Ausgabe.
Die Hauptstadt Australiens ist Canberra.
Canberra.
💡 Gleiche Frage, gleiche Antwort — vergleiche die Eingabe-Tokens.
Zweier-Vergleich
Zwei Varianten nebeneinander, mit angezeigtem Top-p.
Nenne eine plausible Startup-Idee.
Ein Terminplanungs-Tool für kleine Zahnarztpraxen.
Abo-Gewächshäuser, die dir schreiben, wenn deine Tomaten einsam sind.
<ToolCallDemo />
Einzelner Tool-Aufruf
Das klassische Wetter-Beispiel: Frage → Aufruf → Ergebnis → Antwort.
- Nutzer
Wie ist das Wetter in Hamburg?
Verkettete Tool-Aufrufe
Zwei abhängige Aufrufe: Wetter abrufen, dann Einheiten umrechnen.
- Nutzer
Wetter in Berlin, bitte in Fahrenheit.
- Assistent ruft auf get_weather({"city":"Berlin"})
- get_weather liefert: {"tempC": 22}
- Assistent ruft auf convert_units({"value":22,"to":"F"})
- convert_units liefert: {"value": 71.6}
- Assistent
In Berlin sind es aktuell 71,6 °F (22 °C).
<Terminal />
Schreibgeschützte Mitschrift
Zeigt eine abgeschlossene Sitzung, z. B. einen API-Aufruf mit curl.
Interaktiv mit vorgegebenen Befehlen
Lernende können tippen; eine kleine Befehlstabelle antwortet. Probiere „tokens --count 'hello world'“.
<Quiz />
Quiz zu Token-Grundlagen
Zwei Fragen mit Erklärungen zu jeder Antwort.
Was verarbeitet ein Sprachmodell tatsächlich?
Einzelfrage
Das kleinstmögliche Quiz — eine Frage inline in einer Lektion.
Höhere Temperatur bedeutet…