Making-of

Die Technik hinter DrawLa

DrawLa ist ein schnelles Zeichenspiel — dahinter steckt eine vollständige Erkennungspipeline: ein selbst trainiertes neuronales Netz, ein Server, der achtmal pro Sekunde eine Vorhersage liefert, und eine Reihe von Entscheidungen, die alle demselben Ziel folgten: Die Erkennung muss sich sofort anfühlen.

Der Weg eines Strichs

Was passiert, wenn jemand eine Linie zieht? Der Weg ist kurz, und jede Station hat ihre eigene Aufgabe:

  1. Der Client sammelt. Die Oberfläche ist in Flutter gebaut und läuft aus derselben Codebasis im Browser, auf iOS und auf Android. Striche werden als Punktlisten geführt, nicht als Pixel.
  2. Alle 120 Millisekunden geht der Stand raus. Über eine offene WebSocket-Verbindung, nicht per einzelner HTTP-Anfrage — der Verbindungsaufbau würde bei achtmal pro Sekunde mehr kosten als die Berechnung selbst.
  3. Der Server rastert. Die Striche werden zentriert, auf eine einheitliche Größe skaliert und mit zwei Pixeln Linienbreite in ein 96 × 96-Graustufenbild gezeichnet.
  4. Das Netz urteilt. ONNX Runtime rechnet auf der CPU 345 Wahrscheinlichkeiten aus — im einstelligen Millisekundenbereich.
  5. Die fünf besten gehen zurück an alle Mitspieler, die sie als Balken sehen.

Der gesamte Umlauf bleibt deutlich unter der Wahrnehmungsschwelle für „sofort". Das ist der Grund, warum die Erkennung mitzudenken scheint, statt hinterherzulaufen.

Drei Entscheidungen, die den Unterschied machten

Erkennung auf dem Server statt auf dem Gerät. Das Modell wäre mit acht Megabyte klein genug, um lokal zu laufen. Dagegen sprach die Fairness: Alle Mitspieler müssen dieselbe Bewertung sehen, sonst entscheidet die Hardware über den Punktestand. Ein zweiter Grund ist Wartbarkeit — ein neues Modell wird einmal ausgerollt und wirkt sofort für alle, ohne App-Update. Was für den umgekehrten Weg spräche, behandelt Mobile & Edge AI.

Ein CNN statt eines Sequenzmodells. Menschen zeichnen dieselbe Katze in völlig verschiedenen Reihenfolgen. Ein Bildmodell ist gegenüber dieser Reihenfolge blind — und das ist hier ein Vorteil, kein Verlust. Die Abwägung im Einzelnen steht im Vergleich RNN gegen CNN.

Geglättete Vorhersagen. Die erste Fassung zeigte rohe Ausgaben — und flackerte bei jedem Strich zwischen konkurrierenden Begriffen. Es wirkte, als würde das Modell wild raten. Eine exponentielle Glättung über aufeinanderfolgende Vorhersagen behob das vollständig, ohne an der Genauigkeit etwas zu ändern. Eine reine Darstellungsfrage, die das Spielgefühl mehr verbessert hat als jede Modellverbesserung danach.

Das Modell in Zahlen

ArchitekturResNet-artiges CNN, vier Stufen zu je zwei Residual-Blöcken
Eingabe96 × 96 Pixel, ein Graustufenkanal
Parameter2 004 345 (8,0 MB in fp32)
Klassen345
Training40 Epochen, AdamW, Cosine-Schedule, Label Smoothing 0,1
Validierungsgenauigkeit76,3 % Top-1
LaufzeitONNX Runtime, CPU, zwei Threads

76 Prozent klingen zunächst mäßig. Bei 345 Klassen liegt blindes Raten allerdings bei 0,29 Prozent — das Modell ist also rund 260-mal besser als Zufall. Und im Spiel zählt die Top-5-Liste, wo die Trefferquote deutlich höher liegt. Der verbleibende Fehler ist zu einem guten Teil gar nicht behebbar: Eine hastige Schnecke und eine hastige Muschel sind manchmal dasselbe Bild.

Das Spiel drumherum

Die Erkennung ist nur die Hälfte. Der Server hält den gesamten Spielzustand — Runden, Punkte, Timer, Abstimmungen — und ist die einzige Instanz, die ihn ändern darf. Clients schlagen Aktionen vor, entscheiden aber nichts. Diese Aufteilung kostet etwas Latenz und erspart im Gegenzug eine ganze Klasse von Problemen, die entsteht, wenn zwei Geräte unterschiedlicher Meinung darüber sind, wer gewonnen hat.

Räume leben ausschließlich im Arbeitsspeicher. Es gibt keine Datenbank und keine Konten: Zeichnungen existieren, solange die Partie läuft, und sind danach fort. Das war ursprünglich eine Abkürzung und hat sich als die bessere Lösung erwiesen — es macht die Datenschutzerklärung kurz und ehrlich.

Fehlen Mitspieler, füllen Bots auf. Sie zeichnen aufgezeichnete Skizzen aus dem Quick-Draw-Datensatz Strich für Strich nach, statt ein fertiges Bild einzublenden. Dadurch durchlaufen sie dieselbe Erkennung wie Menschen — inklusive der Möglichkeit, dass das Modell sie nicht erkennt.

RNN vs. CNN

RNNs verarbeiten Striche als zeitliche Folge, CNNs eine Skizze als Bild — zwei Wege, dieselbe Zeichnung zu erkennen.

Vergleich lesen →

Quick, Draw!-Datensatz

Googles Datensatz mit über 50 Millionen Skizzen — Formate, Metadaten und die Verzerrungen, die man kennen sollte.

Datensatz erklärt →

Training mit PyTorch

Die vollständige Pipeline: Rasterung, Augmentierung, Architektur, Hyperparameter und ONNX-Export.

Implementierung verstehen →

Google QuickDraw auf GitHub

Googles archiviertes Component-Repo: Web Component, Data API und Self-Hosting-Hinweise für echte Doodles.

Repo einordnen →

Papers & Quellen

Die zentralen Arbeiten zu Sketch-RNN, dem Quick-Draw-Datensatz und ResNet-artigen CNNs.

Paperliste öffnen →

← Zurück zum Spiel