1Beschreibung

Backprop Lab ist ein Simulator für kleine neuronale Netze im Browser. Es klassifiziert Punkte in der Ebene: jeder Punkt hat zwei Koordinaten x₁ und x₂ und gehört zu einer von zwei Klassen. Das Netz soll lernen, die Ebene so einzufärben, dass die Farbe zur Klasse passt.

Gerechnet wird echte Backpropagation mit stochastischem Gradientenabstieg — kein Video, keine Animation, keine vorberechnete Kurve. Jede Epoche geht die Trainingsdaten wirklich durch, bildet Gradienten und ändert die Gewichte. Es steckt keine Bibliothek dahinter; das gesamte Netz sind rund 120 Zeilen JavaScript in einer einzigen HTML-Datei.

Der Zweck ist Anschauung: Man sieht nicht nur die Verlustkurve fallen, sondern jedes einzelne Neuron dabei, wie es sich seinen Teil der Ebene zurechtschneidet.

2Schnellstart

1. Die Seite öffnen. Sie startet mit einem Netz, das bereits 180 Epochen auf dem Datensatz Kreis trainiert hat — links Merkmale, in der Mitte das Netz, rechts das Ergebnis.
2. Zurücksetzen drücken. Die Gewichte werden neu ausgewürfelt, die Fläche ist wieder ein diffuser Fleck.
3. Trainieren drücken und zusehen. Die Fläche zieht sich zum Kreis zusammen, die Verlustkurve fällt, die Trefferquote steigt.
4. Auf das Vorschaubild Spirale klicken und noch einmal trainieren. Dieselbe Architektur scheitert hier.
5. Eine Schicht hinzufügen, die Neuronenzahl erhöhen — oder in der Merkmalsspalte x₁x₂ zuschalten — und es erneut versuchen.

3Die Oberfläche

Oben liegt die Steuerung mit den Kennzahlen, darunter drei Spalten: links die Einstellungen, in der Mitte das Netz, rechts die Auswertung.

Kopfzeile

Sprache

Oben rechts neben den Knöpfen steht ein Paar Schalter, DE und EN. Die Wahl wirkt sofort und mitten im Training: Gewichte, Epochenzähler und Verlustkurve bleiben stehen, nur die Wörter wechseln. Beim ersten Aufruf richtet sich die Seite nach der Sprache des Browsers; danach gilt die zuletzt gewählte. Gespeichert wird sie im lokalen Speicher des Browsers — der einzige Wert, den die Seite überhaupt ablegt.

4Datensätze

Vier Aufgaben, aufsteigend nach Schwierigkeit. Ein Klick auf ein Vorschaubild zieht eine neue Stichprobe und setzt das Netz zurück.

Regler

Rauschen (0 bis 50 %) verschiebt die Punkte zufällig, bevor das Etikett vergeben wird. Bei hohem Rauschen liegen einzelne Punkte auf der falschen Seite — 100 % Trefferquote sind dann nicht mehr erreichbar, und wer es trotzdem erzwingt, lernt das Rauschen auswendig.

Trainingspunkte (100 bis 500) legt fest, wie viele Punkte zum Lernen dienen. Es wird stets die gleiche Menge zusätzlich gezogen und als Testmenge zurückgehalten; das Netz bekommt sie nie zu sehen. Neue Stichprobe würfelt beide Mengen neu.

5Merkmale

Die linke Spalte im Netzdiagramm ist die Eingabe. Nicht nur die rohen Koordinaten stehen zur Wahl, sondern auch fertig ausgerechnete Kombinationen. Ein Klick auf eine Kachel oder ihre Beschriftung schaltet das Merkmal zu oder ab; mindestens eines bleibt immer an.

6Architektur

Über dem Diagramm steht die Zahl der verborgenen Schichten, null bis fünf. Über jeder Schichtspalte sitzt ein eigener Zähler für die Neuronen, eins bis acht. Eine neue Schicht startet mit drei Neuronen.

Ohne verborgene Schicht bleibt ein lineares Modell: die Eingänge gehen direkt auf das Ausgabeneuron. Das reicht für Cluster und, mit den quadratischen Merkmalen, für den Kreis. Jede weitere Schicht faltet den Raum ein weiteres Mal — sichtbar daran, dass die Kacheln in den hinteren Schichten kompliziertere Muster zeigen als in den vorderen.

Das Ausgabeneuron ist immer eines und rechnet immer mit tanh, damit sein Wert zwischen −1 und +1 liegt und direkt mit dem Etikett vergleichbar ist.

7Lernverfahren

Die Aktivierungen im Vergleich

8Das Netzdiagramm lesen

Kacheln

Jedes Neuron trägt ein kleines Bild. Es zeigt nicht seinen Zustand für einen einzelnen Punkt, sondern seine Ausgabe für die gesamte Ebene: Für jeden Bildpunkt wird gefragt, was das Neuron ausgibt, wenn dort ein Datenpunkt läge. So sieht man, worauf ein Neuron reagiert.

Abgeschaltete Merkmale erscheinen gestrichelt und blass und sind mit nichts verbunden.

Verbindungen

Der Mauszeiger auf einer Linie zeigt das Gewicht auf drei Nachkommastellen, auf einem Neuron dessen Bias. Ein Klick auf eine Linie kappt sie, ein zweiter stellt sie wieder her.

9Fläche und Verlustkurve

Entscheidungsfläche

Das große Bild rechts ist die Ausgabe des Netzes über dem Bereich von −6 bis +6 in beiden Richtungen, mit den Datenpunkten darüber. Passt die Farbe unter einem Punkt zu seiner eigenen, liegt das Netz dort richtig.

Die Form eines Punktes sagt, wozu er dient:

Solange nur gefüllte Punkte zu sehen sind, gibt es nichts zu unterscheiden; sobald die Ringe dazukommen, nennt eine Legende unter der Fläche beide Formen. Das ist der schnellste Blick auf Überanpassung: Liegen die Ringe genauso sauber in ihrem Farbbereich wie die gefüllten Punkte, hat das Netz die Regel erfasst und nicht die Stichprobe auswendig gelernt.

Verlustverlauf

Zwei Linien über den Epochen: durchgezogen grün der Testverlust, gestrichelt grau der Trainingsverlust. Die Höhe der Kurve richtet sich nach dem größten Wert der ersten Epochen; die Zahl daneben nennt diesen Maßstab.

Laufen beide Linien zusammen nach unten, lernt das Netz. Fällt die graue weiter, während die grüne wieder steigt, lernt es die Trainingspunkte auswendig — dann helfen weniger Neuronen, mehr Daten oder Regularisierung.

10Netzstatus

11Was gerechnet wird

Die Etiketten sind −1 und +1, gemessen wird der halbe quadratische Fehler. Eine Epoche geht die gemischten Trainingspunkte einmal durch und ändert die Gewichte nach jeweils einem Batch.

Vorwärts   z = b + Σ wᵢ·aᵢ     a = f(z)
Fehler     E = ½ (o − t)²
Rückwärts   ∂E/∂z = ∂E/∂a · f′(z)     ∂E/∂wᵢ = ∂E/∂z · aᵢ
Update     w ← w − η · ⟨∂E/∂w⟩_Batch

Dabei ist f die gewählte Aktivierung, η die Lernrate, o die Netzausgabe und t das Etikett. Die Gradienten werden über den Batch gemittelt, nicht summiert — deshalb ändert die Batch-Größe die nötige Lernrate kaum.

Ist Regularisierung gewählt, kommt vor jedem Schritt ein zusätzlicher Zug in Richtung null hinzu, mit der Stärke λ:

L2   w ← w − η·λ·w        schrumpft alle Gewichte
L1   w ← w − η·λ·sgn(w)    setzt kleine Gewichte auf null

Bei L1 wird ein Gewicht, das über die Null hinausschießen würde, exakt auf null gesetzt statt das Vorzeichen zu wechseln. So bleiben die Linien im Diagramm sauber verschwunden, statt zu flackern.

12Experimente

Warum Nichtlinearität nötig ist

Quadranten wählen, Aktivierung auf linear, drei Schichten mit je acht Neuronen. Trainieren. Es bleibt bei einer geraden Trennlinie, die Trefferquote klebt bei etwa 50 %. Zurück auf tanh — dieselbe Architektur löst die Aufgabe in wenigen Sekunden.

Ein Merkmal ersetzt eine Schicht

Quadranten, alle verborgenen Schichten entfernen, dann x₁x₂ zuschalten. Das Modell hat jetzt drei Gewichte und liegt nach kurzer Zeit fast perfekt.

Überanpassung erzeugen

Kreis, Rauschen auf 50 %, Trainingspunkte auf 100, drei Schichten mit acht Neuronen, alle Merkmale an, Batch-Größe 1. Lange trainieren und die Testpunkte einblenden: Der Trainingsverlust fällt gegen null — jeder Trainingspunkt sitzt —, die Fläche bekommt Zipfel und Inseln um einzelne Punkte, und die grüne Testkurve steigt wieder, nachdem sie ihr Minimum durchlaufen hat.

Das gelingt nicht in jedem Anlauf. In Messungen mit dieser Einstellung stieg der Testverlust nach seinem Minimum in etwa drei von fünf Stichproben deutlich an; bei weniger Trainingspunkten tritt es zuverlässiger auf. Wenn nichts passiert: Neue Stichprobe und noch einmal.

Dann L2 mit Stärke 0.01 zuschalten und weiterlaufen lassen. Der Rand glättet sich, der Testverlust sinkt mindestens auf die Hälfte, die Trefferquote steigt — in drei geprüften Läufen von 94, 90 und 93 % auf 98, 96 und 96 %.

Sterbende ReLU-Neuronen

Aktivierung ReLU, Lernrate 1, trainieren. Einzelne Kacheln werden vollständig neutral und bleiben es: Diese Neuronen geben für jede Eingabe null aus, damit ist auch ihr Gradient null, und sie erholen sich nie wieder.

Die Spirale knacken

Merkmale x₁, x₂, dazu sin x₁ und sin x₂; drei Schichten mit acht, acht und sechs Neuronen; Lernrate 0.03, Batch-Größe 10. Das braucht einige tausend Epochen — laufen lassen und gelegentlich hinsehen.

13Wenn nichts lernt

14Die App für Android

Dieselbe Simulation gibt es als Android-App — kein eingepacktes Webfenster, sondern eine eigene Fassung in Kotlin: Netz, Datensätze und Training sind noch einmal geschrieben, ohne Android-Abhängigkeiten und durch Unit-Tests abgedeckt, die Darstellung läuft über Compose Canvas. Bedient wird sie wie die Weboberfläche, nur mit dem Finger: Merkmal antippen schaltet es um, eine Verbindung antippen kappt sie.

Aufbau

Die App hat vier Ziele, erreichbar über die untere Leiste oder über die Schublade hinter dem Menüzeichen oben links:

Die Schublade führt alle vier Ziele mit vollem Namen und darunter zwei Handgriffe, die sonst weit unten im Laborbildschirm liegen: Neustart würfelt die Gewichte neu, Neue Stichprobe zieht neue Punkte. Beide springen anschließend ins Labor zurück.

Die Einführung beim ersten Start

Beim allerersten Start liegt eine Einführung über der App: fünf Seiten, die erklären, was eine Kachel zeigt, was Farbe und Strichstärke einer Verbindung bedeuten und warum es auf die Ringe ankommt. Die Bilder darin sind keine Zeichnungen, sondern dieselben Zeichenwege wie im Labor — dieselbe Farbskala, dieselbe Art, Punkte und Ringe zu setzen.

Überspringen beendet sie sofort, Los geht’s am Ende ebenso. Danach kommt sie nicht von selbst wieder; unter Hilfe steht am Fuß Einführung erneut anzeigen. Gemerkt wird das wie Sprache und Darstellung, also dauerhaft.

Mit einem Screenreader

Das Netzdiagramm ist eine Zeichenfläche — für sich genommen also stumm. Deshalb trägt es eine Beschreibung, die den aktuellen Stand nennt: wie viele Merkmale an sind, wie die Schichten aussehen, wie viele Verbindungen noch stehen. Dieselbe Auskunft geben Entscheidungsfläche (mit Trefferquote) und Verlustkurve (mit Epoche und beiden Verlusten); die Zahlen wandern mit dem Training mit.

Die sieben Merkmalskacheln liegen zusätzlich als eigene, umschaltbare Elemente über der Zeichnung: TalkBack liest den Namen und sagt ein oder aus, ein Doppeltipp schaltet um. Nur das Kappen einzelner Verbindungen bleibt dem Finger auf der Zeichenfläche vorbehalten — dafür wären zwei Dutzend kaum unterscheidbare Ziele nötig.

Die Knöpfe mit − und + heißen für den Screenreader, was sie tun („Neuron entfernen aus Schicht 1"), und sind in einem Feld von 48 dp zu treffen, auch wenn sie kleiner aussehen.

Wo eine Beschriftung über ihrer Zahl steht — Epoche und 180, Parameter und 25 —, ist beides ein Halt und wird in einem Stück vorgelesen: „Epoche 180". Zwei Halte wären hier nur doppelt so viel Wischen für dieselbe Auskunft. Dasselbe gilt für die Schieber: Sie nennen ihren Namen und ihren Wert zusammen.

Zwei Anordnungen

Welche greift, entscheidet die Fensterbreite — nicht die Geräteklasse. Ein aufgeklapptes Foldable bekommt dieselbe Anordnung wie ein Tablet.

Quer ist nicht die Breite knapp, sondern die Höhe. Deshalb wandern die Knöpfe Trainieren, Schritt und Neustart dort in die sonst halb leere Kopfzeile und bleiben beim Rollen sichtbar; Kennzahlen und Schichtregler stehen einreihig, und die Höhe des Netzdiagramms richtet sich nach dem, was übrig bleibt — auf dem Tablet füllt es die Spalte, quer auf dem Telefon bleibt es beim Mindestmaß, unter dem die sieben Merkmalsplätze nicht mehr nebeneinander passen.

Sprache und Darstellung

Unter Einstellungen steht die Anzeigesprache zur Wahl: Aus System folgt der Spracheinstellung des Geräts, Deutsch und Englisch legen sie fest. Die Wahl wirkt sofort und bleibt über den Neustart der App erhalten.

Auch die Zahlen folgen ihr: Auf Deutsch steht dort 0,021 und 99,0 %, auf Englisch 0.021 und 99.0% — unabhängig davon, wie das Gerät eingestellt ist.

Darunter dasselbe für hell und dunkel: Aus System, Hell, Dunkel. Beim Umschalten werden auch die Kacheln neu eingefärbt — der Nullpunkt der Farbskala liegt auf der Kachelfarbe, und die ist im Dunkeln eine andere.

Umgeschaltet wird ohne Neustart des Bildschirms — auch hier aus einem handfesten Grund: Ein Neustart würde das laufende Training samt Gewichten und Verlaufskurve verlieren. Stattdessen liefert ein eigens konfigurierter Context nur andere Texte, alles andere bleibt stehen.

Was anders ist als im Browser

• Es gibt keine Kurzinfo beim Überfahren: Gewicht und Bias lassen sich ohne Mauszeiger nicht anzeigen. Die Strichstärke bleibt der Anhaltspunkt.
• Die Entscheidungsfläche ist etwas blasser eingefärbt als die Kacheln — sonst verschwände ein oranger Punkt im orangen Feld.
• Hell und dunkel folgen im Browser dem Betriebssystem; nur in der App lässt sich die Darstellung von Hand festlegen. Die Sprache lässt sich in beiden wählen.

15Die App für iPhone, iPad und Mac

Für Apple-Geräte gibt es eine dritte Fassung, wieder kein eingepacktes Webfenster: Netz, Datensätze und Training sind in Swift noch einmal geschrieben, Zeile für Zeile nach der Android-App und mit denselben Tests; gezeichnet wird mit SwiftUI. Ein und dieselbe App läuft auf iPhone und iPad (ab iOS 17) und als echte Mac-App (ab macOS 14). Rechnung, Farben, Texte und Einstellungen sind dieselben wie auf Android — dieser Abschnitt beschreibt nur, was anders ist.

Aufbau

Dieselben vier Ziele wie auf Android — Labor, Einstellungen, Hilfe und Über —, aber ohne Schublade:

Auch hier hält der Wechsel zwischen den Zielen das Training nicht an.

Tastenkürzel auf dem Mac

Das Menü Labor trägt alles, was man während des Trainings braucht. Auf dem iPad mit Tastatur gelten dieselben Kürzel.

Merkmale und Verbindungen werden auf dem Mac angeklickt statt angetippt; die Wirkung ist dieselbe.

Zwei Anordnungen

Die Grenze liegt wie auf Android bei 600 Punkten Breite: darunter eine rollende Spalte (iPhone hoch), darüber zwei Spalten (iPhone quer, iPad, Mac-Fenster), die für sich rollen. Anders als auf Android bleiben Trainieren, Schritt und Neustart auch zweispaltig oben in der linken Spalte. Auf dem Mac richtet sich die Anordnung nach der Fensterbreite — wer das Fenster schmal zieht, bekommt die Telefonansicht.

Mit VoiceOver

Dieselben Beschreibungen wie unter TalkBack: Netzdiagramm, Entscheidungsfläche und Verlustkurve sagen, was zu sehen ist, Beschriftung und Zahl sind ein Halt. Die sieben Merkmalskacheln sind einzeln erreichbar, VoiceOver nennt sie „ausgewählt", solange sie an sind, und ein Doppeltipp schaltet um. Die Knöpfe − und + sind in einem Feld von 44 Punkten zu treffen.

Bewerten, teilen, Rückmeldung

• App bewerten öffnet den Bewertungsdialog des Systems. Apple zeigt ihn höchstens dreimal im Jahr; erscheint nichts, war das Kontingent schon erschöpft.
• App teilen gibt den Satz zur App mit der Adresse dieser Webseite weiter.
• Feedback per E-Mail öffnet einen Entwurf in der Mail-App, in der ersten Zeile mit Fassung, System und Gerätemodell — etwa iOS 26.5 · iPhone17,1 oder macOS 26.0 · Mac16,10.

16Technik und Datenschutz

Die App ist eine einzelne HTML-Datei ohne Framework und ohne Aufbaustufe. Netz, Backpropagation, Datensätze und sämtliche Darstellungen sind handgeschrieben; gezeichnet wird mit Canvas (Kacheln und Flächen) und SVG (Verbindungen).

Jede Kachel ist ein Raster von 64 × 64 Vorwärtsdurchläufen über den Bereich −6 bis +6. Während des Trainings werden die Kacheln aus Rücksicht auf die Bildrate jede zweite Epoche neu gerechnet, die Kennzahlen und die Kurve bei jeder.

Die Android-Fassung teilt keinen Code mit dieser Datei, wohl aber die Rechenwege: gleiche Formeln, gleiche Datensätze, gleiche Farbskala. Sie bringt rund 1,1 MB mit und rechnet ebenfalls vollständig auf dem Gerät.

Die Fassung für iPhone, iPad und Mac ist eine Übertragung der Android-App nach Swift, ohne fremde Bibliothek: dieselbe Rechnung, die Rechentests der Android-App plus Prüfungen für Einstellungen, Adressen und Zahlenformate, Kacheln aus 48 × 48 Vorwärtsdurchläufen wie auf Android. Auf dem Mac läuft sie in Apples Sandbox, ohne irgendein Recht darüber hinaus.

Es läuft alles im Browser. Es gibt keine Konten, keine Werbung, keine Auswertung, und es werden keine Daten übertragen — die einzige Anfrage nach außen holt die Schriftarten. Die Datenpunkte entstehen bei jedem Aufruf neu per Zufallsgenerator. Was die Apps auf dem Gerät ablegen, steht in der Datenschutzerklärung.

17Versionsverlauf