Grundlagen Maschinen trainieren mit p5.js und ml5.js

Ziele

• Sie lernen Grundlagen der Programmierung an einfachen Beispielen.
• Sie bereiten sich vor, komplexere Programme zu lesen und zu schreiben.
• Sie trainieren ein Handmodell mit p5js.

Beispielhaftes Handmodell

ml5js ist eine Erweiterung der Programmierumgebung p5js. Darin gibt es auch ein Handmodell, das in dieser Einheit eine zentrale Rolle spielt.

Einführung

Wie Sie oben in der animierten Abbildungen sehen können, geht es darum, eine bestimmte Anzahl von Markern der Hand zu visualisieren.

Sie können das mit Ihrem eigenen Rechner ausprobieren, wenn Sie das Beispiel direkt im Online-Editor von p5.js öffnen und den Play-Button klicken.

Bewegen Sie Ihre Hand vor der Kamera und beobachten Sie die Konstellation der Punkte.

Ganz unterhaltsam, aber auf Dauer langweilig. Daher stellen Sie sich folgende Frage:

Wie kann es gelingen, bestimmte Handgesten zu identifizieren?

Erste Antwort: Ihr Computer muss lernen, bestimmte Gesten zu erkennen, genaugenommen, bestimmte Konstellationen der 21 Punkte zu erkennen und noch genauer, aus den sich ständig bewegenden Koordinaten der 21 Handmarker Ähnlichkeiten zu den Konstellationen zu erkennen, die Sie ihm beigebracht haben. Die Frage ist also:

Wie bringen Sie Ihrem Computer bei, bestimmte Gesten zu lernen?

Zuerst: Das Ergebnis “Schere, Stein, Papier”

Bevor Sie anfangen, Ihrem Computer bestimmte Gesten beizubringen, können Sie sich anschauen, was am Ende dabei herauskommt. Auf der Seite von ml5.js gibt es ein fertiges Beispiel “NeuralNetwork Load Model”, dass Sie sich jetzt anschauen können. Hier geht’s direkt in den Online-Editor von p5.js.

Wenn das Beispiel korrekt läuft, kann Ihr Computer die Handgesten “Schere, Stein, Papier” identifizieren. Aber warum?

Öffnen Sie die Seitenleiste des Online-Editors. Dort sehen Sie im Ordner model drei Dateien, die das trainierte Modell für dieses Beispiel speichern:

1model.json
2model.weights.bin
3model_meta.json

Im folgenden Schritt werden Sie das Modell für “Schere, Stein, Papier” selbst trainieren und anschließend überprüfen.

Das Modell trainieren

Auch für das Training ist bei ml5.js ein eigenes Skript vorbereitet. Sie finden es bei den Beispielen unter dem Namen “NeuralNetwork Train and Save und hier direkt im Online-Editor.

Halten Sie Ihre Hand in der gewünschten Geste vor die Kamera und klicken Sie wiederholt auf den zugehörigen Button. Das Programm speichert die Daten der Punkte-Konstellation im Moment des Klickens, sodass immer mehr Varianten Ihrer Geste zum Datensatz hinzugefügt werden. Es gilt: Je mehr Varianten Sie fürs Training aufnehmen, umso besser wird das Modell später die Gesten erkennen.

Trainieren Sie nun das Modell, nachdem Sie für jede Geste Daten aufgezeichnet haben.

Das Modell evaluieren

Nach dem Training wird Ihnen angeboten, die drei schon zuvor genannten Dateien zu speichern. Machen Sie das.

Öffnen Sie noch einmal das erste Skript mit dem Ergebnis. Ersetzen Sie die drei vorhandenen Modell-Dateien nun durch Ihre und evaluieren Sie das Ergebnis.

Mit dem Code spielen

Wenn alles geklappt hat, sehen Sie sich nun den Code des Beispiels “NeuralNetwork Load Model” genauer an. Einige Anregungen zum Rumspielen:

• Wie erreichen Sie, dass andere Label für die Gesten angezeigt werden, also nicht “Paper, Scissor, Rock”?
• Was müssen Sie machen, um diese Gesten zu trainieren und erkennen zu lassen?
• Was für Einsatzszenarien für diese Gestenerkennung fallen Ihnen ein?

Weiterlernen

Dan Shiffman hat eine wunderbare Reihe von Erklärvideos rund um Processing und p5.js.

Ein sehr ausführliches und detailreiches Video zum Trainieren eines ähnlichen Modells PoseNet finden Sie auf YouTube.