Bitte warten …
Sommersemester 2025
Ziehe ein Bild hierher oder klicke zum Hochladen.
Die Qualität der Klassifikation hängt stark davon ab, ob die abgebildeten Objekte in den Trainingsdaten des Modells enthalten waren. Das verwendete ml5.js-Framework basiert auf einem vortrainierten MobileNet-Modell, dessen Klassen aus dem ImageNet-Datensatz stammen. So konnte zum Beispiel ein Flamingo und ein Roter Panda korrekt erkannt werden, da diese Tierarten explizit im Trainingsset enthalten sind. Besonders gut funktioniert die Erkennung,wenn das Objekt zentral im Bild positioniert und visuell dominant ist.
Umgekehrt wurden ein Wellensittich und eine Giraffe nicht richtig klassifiziert – vermutlich, weil diese nicht zu den gelernten Klassen gehören. Die Klassifikation wird zusätzlich erschwert, wenn der Hintergrund unruhig ist oder das Zielobjekt nur teilweise zu sehen ist.
Ein auffälliges Beispiel für Fehlklassifikation ist das Bild eines Babys auf einer Couch, bei dem fälschlicherweise ein "Nippel" erkannt wurde. Dieser Fehler ist zwar kurios, lässt sich jedoch auf die Trainingsdaten zurückführen, in denen vermutlich viele Bilder säugender Babys enthalten waren. Dadurch kann das Modell Muster erkennen, die statistisch häufig vorkommen, aber im konkreten Bild gar nicht vorhanden sind.
Insgesamt zeigt sich, dass die Erkennungsgenauigkeit eng mit den gelernten Klassen und der Klarheit des Bildinhalts zusammenhängt.
ml5.js: Dieses Framework wurde für die einfache Einbindung vortrainierter Modelle wie MobileNet verwendet. Es abstrahiert TensorFlow.js und erlaubt uns, mit wenigen Zeilen Code Bilder zu klassifizieren. Besonders hilfreich war die eingebaute Methode imageClassifier.
p5.js: Dieses kreative Coding-Framework wurde vorrangig zur Darstellung und Manipulation von Bildern genutzt. Es erleichtert das Laden und Anzeigen von Bildern im Canvas-Umfeld, wurde hier jedoch nur indirekt über ml5 verwendet.
Foundation Sites: Dieses CSS- und JS-Framework wurde zur Strukturierung der Seite in Tabs verwendet. Durch die einfache Initialisierung via $(document).foundation() konnten wir die Benutzeroberfläche klar gliedern und gezielt Inhalte pro Tab laden.
Chart.js: Zur Visualisierung der Klassifikationsergebnisse diente Chart.js. Es zeigt die drei wahrscheinlichsten Klassen in einem übersichtlichen Kreisdiagramm an. Besonders nützlich war die Möglichkeit, alte Charts per destroy() zurückzusetzen.
Zusätzlich wurde nativ JavaScript (DOM-Manipulation, Event-Handling) genutzt, um dynamisch Bilder pro Tab zu laden und Events wie Datei-Uploads zu behandeln.
Die Logik des Klassifikators basiert auf dem Ansatz, pro Tab jeweils drei Bilder zu laden und diese beim erstmaligen Anzeigen zu klassifizieren. Dies reduziert initiale Ladezeiten und erlaubt Animationen gezielt einzusetzen.
Ein zentrales Element der Lösung ist die Initialisierung des MobileNet-Klassifikators über ml5.js. Sobald dieser geladen ist, wird die Benutzeroberfläche vorbereitet und erste Bilder (z. B. im „Korrekt“-Tab) werden klassifiziert.
Die Implementierung achtet darauf, dass Bilder nur bei Bedarf klassifiziert werden, was durch das Foundation-Tab-Event change.zf.tabs gesteuert wird.
Der Einsatz von Chart.js erlaubt eine intuitive Darstellung der Konfidenzwerte, was die Nachvollziehbarkeit der Klassifikation unterstützt.
Besonderer Wert wurde auf Nutzererfahrung gelegt: Während der Klassifikator geladen wird, erscheinen Ladehinweise. Auch beim Dateiupload wird ein Bild sofort angezeigt und analysiert – dies geschieht ohne Neuladen der Seite.
Die Klassifikation basiert auf einem vortrainierten ImageNet-Modell (MobileNet). Dies erklärt, warum nur bestimmte Kategorien erkannt werden können. Quellen und Klassennamen sind unter anderem im ImageNet-Synset Mapping dokumentiert.
Die Lösung zeigt, dass moderne JavaScript-Frameworks wie ml5 und Chart.js auch ohne tiefes Machine Learning-Know-how leistungsstarke Ergebnisse ermöglichen, wenn sie durch eine sinnvolle UI-Struktur begleitet werden.