HAW Hamburg Department Design 09.11. – 13.11.2020
- Intro
- Getting Started
- Tag 1 – Zufallsmaler, Fußballsimulator, Image Classification
- Tag 2 – NoseNet Clown
- Tag 3 – Teachable Machine Video Call
- Tag 4 – Neural Network
- Tag 5 – Open Workshop
Im Rahmen des Kurses »Artifical Intelligence und Design | aiXdesign« beschäftigen wir uns mit der Frage, wie Künstliche Intelligenz, das Design, sowie den Beruf der Designschaffenden verändern wird. Dazu wollen wir nicht nur forschend tätig sein und schauen, was es schon gibt. Sondern auch selber mit den Möglichkeiten der Künstlichen Intelligenz im speziellen des Machine Learnings experimentieren. In insgesamt drei verschiedenen Workshops, erkunden wir unterschiedliche Tools. In diesem geht es um die JavaScript Library ml5.js. Auf dieser Seite findest du vor allem den Code der einzelnen Projekte. Dieser ist kommentiert und wird so erklärt. Um dem Code runterzuladen, klicke auf den grünen Button Code, ganz oben und dann auf Download ZIP.
ml5.js ist eine JavaScript Library, das sich zur Aufgabe gemacht hat »Friendly Machine Learning for the Web« bereitzustellen. Mit ml5 soll es kreativen Codern einfach gemacht werden, ohne viel Vorwissen Machine Learning Modelle anzusprechen, sie zu verbessern oder zu trainieren. Es sind einige Grundlagen in JavaScript nötig, die wir zu Beginn des Workshops anreißen werden. ml5 basiert dabei auf einer anderer Library mit dem Namen p5.js, welches im Department Design schon häufig in unterschiedlichsten Projekten zum Einsatz kam. Es richtet sich ähnlich wie ml5.js an Kreative, die keine großen Vorerfahrungen mit Code haben, aber trotzdem digitale Projekte umsetzen wollen. Das tolle an beiden Librarys, ist das sie einfach direkt im Browser laufen und beide nicht viel Software brauchen. Es reicht ein Code Editor um direkt loszulegen. Viele Beispiele basieren in diesem Workshop auf den Projekten von Dan Shiffmann besonders seine YouTube Reihe über ml5.js sei hier erwähnt: Link
Willkommen zu Tag 1, wir wollen heute loslegen, indem wir uns das nötige Setup einrichten und verstehen was wir alles brauchen.
- Code-Editor
- Browser
- Link zu p5.js & ml5.js
Für das Programmieren kann jeder Code-Editor der Welt genutzt werden, es könnte sogar alles in TextEdit oder Word programmiert werden. Ein guter Code-Editor gibt uns allerdings zugriff auf viele vereinfachende Funktionen. Ich nutze für diesen Workshop den Editor Visual Studio Code von Microsoft. Dieser ist weiterverbreitet und es gibt eine große Anzahl an Extensions, die wir nutzen können um uns das Leben noch einfacher zu machen.
Visual Studio Code könnt ihr hier kostenlos für euer Betriebssystem herunterladen: Link
Als nächstes braucht ihr einen Browser, hier funktioniert eigentlich alles was Up-to-Date ist. Es macht auch immer mal Sinn Sachen in unterschiedlichen Browsern auszuprobieren, deshalb empfehle ich, dass ihr mindestens entweder Chrome oder Firefox habt.
Um p5.js bzw. ml5.js nutzen zu können, müssen wir nichts weiter herunterladen. Wir müssen diese nur in unser Projekt verlinken. Wir machen es uns aber noch einfacher, denn Visual Studio Code bietet sogar eine p5.js Extension an, diese beinhaltet auch ml5.js.
Dazu öffnen wir Visual Studio Code und klicken in der linken Spalte auf die vier Quadrate(1.), in das Suchfeld tippen wir »p5.js«(2.). Öffnet die Extension p5.vscode von Sam Lavigne und klickt Install(3.) Jetzt haben wir alles was wir brauchen!
Wie schon erwähnt basiert ml5.js auf p5.js. Deshalb wollen wir uns dies zu erst anschauen, um dort die Grundlagen kennenzulernen.
Um in Visual Studio eine installierte Extension zu nutzen, müssen wir die Command Palette aufrufen. Drückt dazu die Tasten command-shift-p auf dem Mac bzw. ctrl-shift-p bei Windows. In das Suchfeld tippt ihr p5.js ein. Es sollten zwei Sachen vorgeschlagen werden Install p5.js Contributor Library, das brauchen wir später und Create p5.js Library das klicken wir an.
Jetzt öffnet sich über File-Browser, wo ihr einen neuen Ordner erstellt, in dem das Projekt liegen soll. Mit einem klick auf Fertig werden für euch in diesem Ordner alle wichtigen Dateien erstellt, die wir brauchen. Jetzt haben wir den Standardaufbau eines p5.js Projekts erstellt. Um auch ml5.js ansprechen zu können, öffnen wir wieder die Command Palette (Mac: command-shift-p Windows: ctrl-shift-p) und such wieder nach p5.js, dieses Mal wählen wir Install p5.js Contributor Library und suchen nach ml5 über Enter und dann nochmal Enter auf Install ml5.js installieren wir auch ml5.js.
Um zu überprüfen ob alles geklappt hat, öffnen wir auf der linken Seite die Datei index.html. Wenn wir dort folgenden Code finden hat alles geklappt:
<script src="libraries/p5.min.js"></script>
<script src="libraries/p5.sound.min.js"></script>
<script src="libraries/ml5.min.js"></script>
Wir wollen mit unserem ersten p5.js Projekt starten, dies hat noch nichts mit Machine Learning zu tun, zeigt uns aber die Grundlagen wie der Code und p5.js funktioniert. Wie ihr oben auf dem GIF seht, wollen wir dieses wunderbaren Zufallsmaler bauen. Mit der Maus bewegen wir den Pinsel, durch ein klick wird zufällig eine neue Farbe ausgewählt. Den Code dazu findest du hier auf GitHub, klick einfach ganz oben auf den Gründen Button Code und lade dir die Dateien als ZIP herunter.
Zusammenfassend lernen wir in diesem Beispiel:
- Grundstruktur von p5.js
- Was sind Variablen
- Was sind Funktionen
- Was ist if/else
Nun wollen wir diesen packenden Fußballsimulator bauen. Dieser vertieft noch einmal einige Konzepte und gibt uns die Sicherheit im nächsten Beispiel mit Machine Learning zu beginnen. Den Code dazu findest du hier auf GitHub, klick einfach ganz oben auf den Gründen Button Code und lade dir die Dateien als ZIP herunter.
Zusammenfassend lernen wir in diesem Beispiel:
- Was ist die Konsole
- Wie lädt man ein Bild?
- Grundstruktur von p5.js? (vertiefen)
- Was sind Variablen? (vertiefen)
- Was sind Funktionen? (vertiefen)
In diesem Beispiel wollen wir uns erste Schritte mit ml5.js gehen. Dafür lernen wir wie man einzelne Aspekte der Library anspricht. Wie man ein geladenes Bild klassifiziert und die Resultate dann versteht und ausgibt.
Zusammenfassend lernen wir in diesem Beispiel:
- Was ist ein Callback?
- Wie funktioniert ml5.js?
- Wie lesen wir die Ergebnisse aus einem Object?
- Wie geben wir die Ergebnisse aus?
Heute ist der 10.11.2020 noch ein Tag bis Karneval und da durch Corona dieses Jahr wahrscheinlich eher weniger geht, holen wir uns den Karneval auf unsere Webcam und erstellen uns eine tolle Clownsnase, die unserer echten Nase folgt. Und für alle die keine Lust auf Karneval haben, erstellen wir auch gleichzeitig eine niedlich Rudolf Nase für Weihnachten. Das ganze läuft im Browser und als Hardware braucht ihr nur eine Webcam. Den Code findet ihr wie immer hier Github ganz oben auf dem grünen Button Code und dann Download ZIP.
Zusammenfassend lernen wir in diesem Beispiel:
- Wie lädt man PoseNet?
- Wie lädt man das Webcam Bild?
- Wie lesen wir die Ergebnisse aus einem Object? (Vertiefen)
- Wie geben wir die Ergebnisse aus? (Vertiefen)
In der heutigen Lektion starten wir nicht direkt im Code, sondern trainieren erstmal unser eigenes ML Model. Dafür nutzen wir die von Google bereitgestellte Plattform Teachable Machine. Dort können wir mit unsere Webcam nutzen um mehrere Klassen zu erstellen. Für unser Beispiel erstellen wir eine Klasse Person ist da, dort machen wir Bilder von uns und Person ist weg, da machen wir Bilder vom Hintergrund ohne uns. Wir exportieren das Model und können es dann in unseren Code einbinden. Den Code findet ihr wie immer über den grünen Code Button ganz oben auf dieser Seite. In diesem Beispiel vertiefen wir bekannte Konzepte und wenden diese neu an.
Heute wollen wir unser eigenes Neuronales Netzwerk in ml5.js trainieren. Die Lektion ist stark beeinflusst von den Videos des Coding Trains bei YouTube, wir schauen uns auch heute nur einen kleine Teil dieses Projekts an. Bei Interesse schaut gerne den Rest hier. Wir wollen ein Netzwerk trainieren, dafür sammeln wir zu erst Daten in Form von Labels mit einer X/Y-Koordinate. Trainieren unser Model und fragen dieses dann wenn wir eine neue Koordinate eingeben, welches Label dies wohl hat.
Zusammenfassend lernen wir in diesem Beispiel:
- Grundzüge eines Neuronalen-Netzwerkes
- Was ist ein Epoch?
- Was ist Loss?
Am letzten Tag öffnen wir unseren Workshop und jeder kann frei experimentieren. Nachfolgend findet ihr einige der Ergebnisses des Workshops:
Friderike Höft — Klorollenkönigin (0501)
Benjamin Bertram — Corona App 2.0 (0502)
Charleen König — Hau Rein! (0503)
Danke an alle Beteiligten!