Um ein Bild zu Klassifizieren gibt es auf der Webseite 3 verschiedene Möglichkeiten:
1. Eines der oberen 8 Bilder auswählen
2. Per Drag and Drop ein eigenes Bild hinzufügen
3. Per Upload-Funktion ein eigenes Bild hochladen
Nach Erfolg einer dieser 3 Interaktionen wird das Bild automatisch Klassifiziert und das Ergebnis in Form eines Graphen angezeigt. Zur Besseren Übersicht wurde auf eine Nachkommastelle gerundet. Für die Anzeige des genaueren Werts wurde zusätzlich eine Tabelle erstellt welche mehr Nachkommastellen anzeigt.
Die Idee bei der Auswahl der Testbilder liegt darin, ein richtig und ein falsch klassifiziertes Bild von der selben Art auszuwählen. Ein normaler Mensch könnte die falsch klassifizierten Bilder problemlos erkennen, die ml5-Bilderkennung jedoch nicht.
Die Erstellung der Diagramme erfolgte ohne externe Bibliotheken, es wurden nur einfache HTML, CSS, Javascript befehle verwendet. (= Plain HTML,CSS,Javascript)
Für eine bessere Usability, wurde außerdem eine kontextsensitive Hilfe in Form eines Tooltips implementiert. Klickt der User auf das Fragezeichen-Symbol erscheint die Hilfe. Auch wurde eine Transparent eingefügt beim rüberhovern über die Testbilder damit der User bemerkt das hier eine Interaktion erfolgen kann.
Die Webseite läuft über einen Cloudflare-Webserver und nimmt sich die Daten aus einen erstellten GitHub Repository.
Die Erstellung erfolgt über CSS HTML Javascript und der Visual Studio Code IDE
Für die nächsten zukünftigen Einsendeaufgaben wurde außerdem, eine Navigationsleiste angelegt, diese funktionieren zum gegenwärtigen Zeitpunkt noch nicht und werden mit den nächsten ESAs verlinkt.
Für die Klassifizierung von den Bildern wurde das ml5 Framework verwendet mit dem Mobilenet Classifier
Freie kommerzielle Nutzung ohne Bildnachweis über Pixabay
Bilderkennung mit ml5