Neural Network Playground

Baue dein eigenes neuronales Netz

Stell dir eine Kette von Türstehern vor. Der erste schaut sich zwei einfache Merkmale an und entscheidet: drin oder draußen. Der zweite Türsteher bekommt nicht mehr die Originaldaten zu sehen, sondern nur die Entscheidungen der ersten Schicht. Der dritte arbeitet wieder auf den Antworten des zweiten — und so weiter.

Aus simplen Ja/Nein-Bausteinen entsteht so ein erstaunlich differenziertes Urteil. Jede Schicht baut auf den Mustern der vorherigen auf — kombiniert sie, verfeinert sie. Genau deshalb können tiefe Netze auch krumme Datenwolken wie eine Spirale trennen, an denen ein einzelnes Perzeptron scheitert.

Analogie:

Definition:

Mathematisch ist ein neuronales Netz nichts Geheimnisvolles: viele kleine Gleichungen, hintereinander geschaltet. Ein einzelnes Neuron berechnet eine gewichtete Summe seiner Eingaben, addiert einen Bias und schickt das Ergebnis durch eine nichtlineare Aktivierungsfunktion. Eine Schicht macht das für viele Neuronen gleichzeitig; ein Multi-Layer-Perzeptron (MLP) stapelt mehrere solcher Schichten.

Pro Schicht: a⁽ˡ⁾ = σ(W⁽ˡ⁾·a⁽ˡ⁻¹⁾ + b⁽ˡ⁾) — also „Aktivierung der vorherigen Schicht mal Gewichts-Matrix W, Bias b drauf, durch Aktivierungsfunktion σ". Beim Lernen werden W und b mit Backpropagation und Gradient Descent so angepasst, dass der Fehler (Loss) über die Trainingsdaten minimal wird. Der Forward-Pass berechnet die Vorhersage, der Backward-Pass verteilt den Fehler über die Kettenregel rückwärts durch das Netz.

Du hast heute mit ziemlicher Sicherheit schon mehrmals mit einem neuronalen Netz interagiert — meistens ohne es zu merken:

SprachmodelleChatGPT, Claude, Gemini & Co.
Riesige neuronale Netze mit hunderten Milliarden Parametern. Sagen Wort für Wort vorher, was als Nächstes am sinnvollsten ist — gleiche Grundidee wie hier, nur tausendfach größer.
BildverarbeitungSmartphone-Kamera
Gesichtserkennung, Nachtmodus, Portrait-Unschärfe, Auto-Auslöser — alles neuronale Netze, die in Millisekunden direkt auf deinem Gerät entscheiden.
EmpfehlungenSpotify, YouTube, Netflix
„Das könnte dir auch gefallen" — Netze vergleichen dein Verhalten mit dem von Millionen anderen und erkennen Muster, die du selbst nicht beschreiben könntest.
SpracheSprachassistenten & DeepL
Siri, Alexa, automatische Untertitel, maschinelle Übersetzung — Spracherkennung und Übersetzung laufen heute fast ausschließlich über neuronale Netze.
Stille HelferMedizin, Banking, Sicherheit
Krebsfrüherkennung im Röntgenbild, Betrugserkennung bei Banken, Spam-Filter, Qualitätskontrolle in Fabriken — meist besser als jede regelbasierte Lösung.

Alle nutzen die gleiche Grundidee, die du gleich selbst trainierst: viele kleine Rechen-Einheiten („Neuronen") in Schichten gestapelt, die lernen, ein Muster zu erkennen. Was du im Playground in 5 Sekunden trainierst, läuft bei ChatGPT auf tausenden GPUs wochenlang — die Mathematik dahinter ist erstaunlich ähnlich.

Jeder Trainings-Schritt durchläuft drei Phasen. Aus tausenden Wiederholungen entsteht das, was wir „Lernen" nennen:

1
Forward-PassVorhersage berechnen
Die Eingabe wandert vorwärts durch alle Schichten. Jedes Neuron berechnet eine gewichtete Summe seiner Inputs plus Bias und schickt sie durch die Aktivierungsfunktion.
Am Ausgang steht die Vorhersage — hier eine Wahrscheinlichkeit zwischen 0 und 1.
2
Backward-PassFehler verteilen
Vorhersage minus echtes Label = Loss. Per Kettenregel wird der Gradient des Loss bezüglich jedes einzelnen Gewichts rückwärts durch das Netz propagiert.
Jedes Gewicht erfährt so, in welche Richtung es geschoben werden muss, um den Fehler zu verringern.
3
Gradient-DescentGewichte verschieben
Jeder Parameter wird mit w ← w − η·∇w aktualisiert: ein kleiner Schritt in Gradient-Richtung, gewichtet mit der Lernrate η.
Über tausende Mini-Batches schiebt sich das Netz Schritt für Schritt zu einer sauberen Trennfläche.

Die Tiefe des Netzes ist das Geheimnis: jede Schicht baut auf den Mustern der vorherigen auf. Die nichtlinearen Aktivierungen knicken den Eingaberaum so, dass selbst Spirale, Kreise oder XOR trennbar werden — Muster, an denen ein einzelnes Perzeptron scheitert. Achtung: mehr Schichten und Neuronen erlauben kompliziertere Boundaries, brauchen aber auch mehr Daten. Sonst lernt das Netz die Trainingspunkte auswendig (Overfitting).

Was du gleich live ausprobieren kannst

Wie aus einfachen Neuronen durch Schichtung komplexe Muster erkannt werden
Was passiert, wenn du Architektur, Lernrate oder Aktivierung änderst
Warum tiefe Netze Spiralen knacken, an denen ein flaches Modell scheitert
Wann ein Netz Overfitting macht — die Trainingspunkte auswendig lernt statt das Muster

So liest du das Playground

Entscheidungs-Heatmap:Blau = Klasse 0, Orange = Klasse 1. Je satter die Farbe, desto sicherer die Vorhersage. Wo es blass wird, ist das Netz unsicher.
Datenpunkte:Quadrate = Klasse 1, Kreise = Klasse 0. Klick oder Ziehen malt neue Punkte (Shift = Klasse 0). Probier eigene Muster!
Loss-Kurve unten:Fällt = Netz lernt. Spikes = Lernrate zu hoch. Plateau = Netz steckt fest. Loss ist das numerische Maß für „wie falsch" das Netz aktuell liegt.
Architektur-Diagramm:Glühende Neuronen = aktiv. Pulsierende Kanten = Gradient fließt während des Trainings. Graue ✕-Neuronen = ReLU tot (kein Lernsignal mehr).
Zahlen im Kontroll-Panel:Epoche = Anzahl Trainings-Schritte. Loss = aktueller Fehler (kleiner ist besser, 0 = perfekt). Genauigkeit = Anteil richtig klassifizierter Punkte. Parameter = Anzahl der lernbaren Gewichte im Netz.

Was auf dem Feld zu sehen ist

Die Zahlen sagen dir, wie gut das Netz ist — aber nicht, wie seine Entscheidung aussieht. Hier steht, was dir das farbige Bild auf dem Feld zeigt.

Interaktive Demo

Loss: 0.500

Loss-Kurve: fällt sie steil, lernt das Netz schnell. Spitzen oder Plateaus = Lernrate zu hoch oder Netz zu klein.

Tipp: Die Spirale braucht mindestens 2 Schichten mit je 4+ Neuronen

Schichten: 2

Datensatz

Königsklasse: zwei verschlungene Arme. Braucht Tiefe (≥2 Schichten, je ≥4 Neuronen) und Geduld — etwa 1000 Trainingsschritte.

Aktivierung

Rectified Linear Unit: max(0, x). Positive Werte unverändert weiter, negative werden zu 0. Schnell, Default in tiefen Netzen. Vorsicht: einzelne Neuronen können „sterben" (✕ im Diagramm), wenn der Bias zu negativ wird.

Lernrate 0.1

Schrittweite beim Gewichts-Update. Zu hoch = Loss springt; zu niedrig = quälend langsam.

Batch-Größe 16

Wie viele Punkte gleichzeitig in einem Trainingsschritt verarbeitet werden. Größer = stabiler, kleiner = mehr Zufall im Loss.

Rauschen 0.10

Streuung der Datenpunkte: dreh hoch und beobachte, ob die Grenze stabil bleibt — das ist der echte Generalisierungs-Test.

Eingabe-Features

Vor-berechnete Eingaben: x₁², x₁·x₂ usw. Bei flachen Netzen entscheiden sie, was überhaupt trennbar ist. Tiefe Netze lernen das selbst.

Epoche0

Genauigkeit0%

Loss0.500

Parameter37

Score 0

S C X L

Wenn du nur Start klickst, verpasst du das eigentliche Lernen. Diese vier kleinen Aufgaben machen die wichtigsten Konzepte greifbar:

1Wozu eine Aktivierungsfunktion?
1. So stellst du einSpirale + Standard-Preset (2×4). Klicke Start und schau zu, wie das Netz eine kurvige Trennlinie lernt.
2. Das siehst duJetzt schalte alle Hidden-Layer ab (Linear-Preset, 0 Schichten). Egal welche Aktivierung du wählst — du bekommst nur eine Gerade.
3. Die LektionErst die Kombination aus Schicht + Nichtlinearität ermöglicht gekrümmte Trennflächen. Ohne Hidden-Layer kollabiert das Netz mathematisch zu einer einzigen Geraden.
2Magie durch Feature-Engineering
1. So stellst du einKreise + Linear-Preset (0 Hidden). Mit nur x₁ und x₂ als Eingabe scheitert das Perzeptron — ein Ring lässt sich nicht mit einer Geraden trennen.
2. Das siehst duAktiviere zusätzlich x₁² und x₂² in den Eingabe-Features. Plötzlich klappt es!
3. Die LektionDie Quadrate projizieren die Daten in einen Raum, in dem sie linear trennbar werden. Genau das machen tiefe Netze in ihren Hidden-Layern automatisch — sie lernen passende Features selbst.
3Wenn die Lernrate zu hoch ist
1. So stellst du einXOR + Shallow-Preset. Setze die Lernrate auf 0.3 (Maximum) und drücke Start.
2. Das siehst duDer Loss springt wild, die Trennlinie zappelt — das Netz überschießt jedes Mal sein Ziel. Stell die Lernrate auf 0.03 zurück, Reset und Start: sauberes, stabiles Lernen.
3. Die LektionDie richtige Schrittweite ist ein Balanceakt: zu hoch = chaotisch, zu niedrig = quälend langsam. In der Praxis tastet man sich mit Werten zwischen 0.001 und 0.1 ran.
4Overfitting in Echtzeit beobachten
1. So stellst du einSpirale, Noise-Slider auf 0.30, ein dickes Netz (z.B. 3 Schichten × 8 Neuronen). Trainier 1500 Epochen.
2. Das siehst duDie Genauigkeit auf den sichtbaren Punkten geht hoch — aber die Trennlinie wird zerklüftet und macht Beulen um einzelne Ausreißer.
3. Die LektionDas Netz hat verrauschte Punkte memorisiert statt die Spiralform zu lernen. Genau das passiert auch bei großen Modellen mit zu wenig Daten — sie wirken im Training perfekt und versagen draußen in der echten Welt.

Theorie

Pseudocode

Schritt für Schritt

Flussdiagramm

Das Trainings-Rezept

Ein Multi-Layer-Perzeptron lernt nicht in einem grossen Sprung, sondern in tausenden kleinen Schritten. Jeder Schritt besteht aus vier Phasen, die immer in derselben Reihenfolge ablaufen:

Forward-Pass: die Eingabe wandert durch alle Schichten — am Ende steht eine Vorhersage
Loss: Vorhersage vs Label vergleichen, eine Zahl als Fehlermass berechnen
Backward-Pass: per Kettenregel den Gradienten des Loss bzgl. jedes Gewichts ermitteln
Update: jedes Gewicht um einen winzigen Schritt in die richtige Richtung schieben

Warum funktioniert das?

Backpropagation ist im Kern eine effiziente Anwendung der Kettenregel aus der Analysis. Statt für jedes der Tausenden Gewichte einzeln eine Ableitung zu rechnen, propagiert man den Fehler einmal rückwärts durch das Netz und liest dabei alle Gradienten gleichzeitig ab.

Die Nichtlinearität (ReLU, Sigmoid, Tanh) ist das zweite Geheimnis. Ohne sie wäre das Netz egal wie tief mathematisch identisch zu einer einzigen linearen Schicht — und könnte keine gekrümmten Trennflächen lernen.

Eigenschaften

Universell: mit genug Schichten und Daten lassen sich praktisch beliebige Funktionen approximieren
Gradient-basiert: Lernrate η ist der entscheidende Hyperparameter — zu hoch sprengt das Training, zu niedrig wird es endlos langsam
Hungrig: mehr Kapazität braucht mehr Daten — sonst droht Overfitting
Skalierbar: derselbe Algorithmus trainiert ein Spielzeug-Netz mit 50 Parametern und ein Sprachmodell mit Milliarden

Spiele in der Demo! Stell die Lernrate auf 0.3 und schau, wie die Loss-Kurve hüpft. Schalte ReLU auf Sigmoid und beobachte, wie tiefe Netze plötzlich kaum noch lernen — das berüchtigte Vanishing-Gradient-Problem.

Deutsch

                      
                        
                          1
                          # Mini-Batch-Training eines MLP
                        
                      
                        
                          2
                          init: W[l], b[l] für jede Schicht zufällig (He-Init)
                        
                      
                        
                          3
                           
                        
                      
                        
                          4
                          wiederhole bis Konvergenz:
                        
                      
                        
                          5
                              batch = zufallsstichprobe(daten, batch_groesse)
                        
                      
                        
                          6
                           
                        
                      
                        
                          7
                              # 1) Forward-Pass — Vorhersage pro Beispiel
                        
                      
                        
                          8
                              für jedes (x, y) in batch:
                        
                      
                        
                          9
                                  a[0] = x
                        
                      
                        
                          10
                                  für l = 1 .. L:
                        
                      
                        
                          11
                                      z[l] = W[l] · a[l-1] + b[l]
                        
                      
                        
                          12
                                      a[l] = aktivierung(z[l])    # σ am Output
                        
                      
                        
                          13
                           
                        
                      
                        
                          14
                              # 2) Loss — Vorhersage vs Label
                        
                      
                        
                          15
                              loss = BCE(a[L], y)            # binäre Kreuzentropie
                        
                      
                        
                          16
                           
                        
                      
                        
                          17
                              # 3) Backward-Pass — Gradienten rückwärts
                        
                      
                        
                          18
                              delta[L] = a[L] - y           # sigmoid + BCE → einfach
                        
                      
                        
                          19
                              für l = L .. 1:
                        
                      
                        
                          20
                                  ∇W[l] += delta[l] · a[l-1]ᵀ
                        
                      
                        
                          21
                                  ∇b[l] += delta[l]
                        
                      
                        
                          22
                                  delta[l-1] = (W[l]ᵀ · delta[l]) ⊙ σ'(z[l-1])
                        
                      
                        
                          23
                           
                        
                      
                        
                          24
                              # 4) Update — Gradient Descent
                        
                      
                        
                          25
                              für l = 1 .. L:
                        
                      
                        
                          26
                                  W[l] -= η · ∇W[l] / batch_groesse
                        
                      
                        
                          27
                                  b[l] -= η · ∇b[l] / batch_groesse

1 / 6

✨ Initialisierung

Jedes Gewicht startet zufällig — meist mit einer Normalverteilung, deren Streuung von der Schichtgröße abhängt (He- oder Xavier-Init). Gleiche Startwerte würden das Netz symmetrisch machen und das Lernen blockieren. Biases starten typischerweise bei 0.

init: W[l], b[l] für jede Schicht zufällig (He-Init)

Warum braucht man überhaupt eine nichtlineare Aktivierungsfunktion zwischen den Schichten?

Ohne sie kollabiert ein mehrschichtiges Netz mathematisch zu einer einzigen linearen Transformation.

Sie macht das Training schneller.

Sie sorgt dafür, dass die Ausgabe zwischen 0 und 1 bleibt.

Sie ist nur eine Konvention aus historischen Gründen.

1. Warum braucht man überhaupt eine nichtlineare Aktivierungsfunktion zwischen den Schichten?

☐ A) Ohne sie kollabiert ein mehrschichtiges Netz mathematisch zu einer einzigen linearen Transformation.
☐ B) Sie macht das Training schneller.
☐ C) Sie sorgt dafür, dass die Ausgabe zwischen 0 und 1 bleibt.
☐ D) Sie ist nur eine Konvention aus historischen Gründen.

2. Was ist der Hauptunterschied zwischen ReLU und Sigmoid?

☐ A) ReLU ist abschnittsweise linear und sättigt nicht nach oben; Sigmoid quetscht alles in den Bereich (0, 1) und sättigt an beiden Enden.
☐ B) ReLU funktioniert nur mit Bildern, Sigmoid nur mit Text.
☐ C) Sigmoid ist immer schneller als ReLU.
☐ D) Es gibt keinen praktischen Unterschied, nur eine andere Notation.

3. Was passiert typischerweise, wenn du sehr viele Parameter und nur wenige Trainingspunkte hast?

☐ A) Overfitting: das Netz lernt die Trainingsdaten auswendig, generalisiert aber schlecht auf neue Punkte.
☐ B) Das Netz lernt gar nichts mehr, der Loss bleibt konstant.
☐ C) Die Lernrate halbiert sich automatisch.
☐ D) Der Loss fällt zwangsläufig auf 0 und bleibt dort.

4. Wofür ist Backpropagation zuständig?

☐ A) Sie berechnet effizient die Gradienten der Loss-Funktion für alle Gewichte über die Kettenregel.
☐ B) Sie initialisiert die Gewichte des Netzes mit zufälligen Werten.
☐ C) Sie wählt den passenden Datensatz für das Training aus.
☐ D) Sie wandelt Bilder oder Text in numerische Inputs um.

5. Wann hilft Feature-Engineering — also das Hinzufügen von x₁², x₂² oder x₁·x₂ als Inputs — der Netz-Performance am meisten?

☐ A) Bei kleinen Netzen ohne versteckte Schichten: Die richtigen Features verschieben das Problem von 'nicht lösbar' zu 'mit einer Geraden trennbar'.
☐ B) Immer und in jedem Fall — mehr Features bedeuten zwingend bessere Ergebnisse.
☐ C) Nur wenn der Datensatz mindestens 10.000 Punkte hat.
☐ D) Nur bei sehr tiefen Netzen mit 5+ Schichten.

Auflösung: 1) A · 2) A · 3) A · 4) A · 5) A

Neural Network Playground

Was ist ein neuronales Netz?

Analogie:

Definition:

Wo dir neuronale Netze im Alltag begegnen

Wie funktioniert das Training?

Interaktive Demo

Was du gleich live ausprobieren kannst

Was auf dem Feld zu sehen ist

Interaktive Demo

Schichten: 2

Datensatz

Vier Experimente, die du unbedingt probieren solltest