4. Experiment 4: [Objekt Erkennung mit Tensorflow.js und React]

Datum: [16.05.2024] Thema: [Objekt Erkennung mit Tensorflow.js und React]

4.1. Einleitung

Unser viertes Experiment befasst sich mit einer echtzeit Objekterkennung mittels Tensorflow.js und React.

4.2. Motivation

In vergangenen Vorlesungen haben wir schon häufiger Kontakt mit Tensorflow gehabt, haben allerdings noch nie praktische Erfahrung sammeln können. Mit diesem Projekt wollen wir also Erfahrung mit Tensorflow sammeln und mit unseren bisherigen Kentnissen in React kombinieren.

4.3. Aufgabenstellung

  1. Finden eines geeigneten Modells

  2. Aufsetzen des React Projeks

  3. Implementierung der Anwendung

  4. Testen der Anwendung mit verschiedenen Motiven

  5. Hosten der Anwendung auf dem Rechenzentrum

4.4. Durchführung

  1. Finden eines geeigneten Modells

    Der ursprüngliche Plan für dieses Projekt war, die Anwendung mit einem eigens Trainierten Modell umzusetzen. Dieser Ansatz hat sich aber als komplizierter als erwartet herausgestellt, weshalb wir am Ende ein vortrainiertes Modell nutzen. Hierfür kommt das von Tensorflow speziell für Objekterkennung zur verfügung gestellte Modell „coco-ssd“ zum Einsatz.

  2. Aufsetzen des React Projekts

    Um die Grundstruktur der React Anwendung aufzusetzen wurde das Tool „vite“ von nodeJS genutzt. Dieses erlaubt es, sehr schnell und simpel projekte für verschiedene JavaScript Frameworks zu erstellen. Der Befehl dafür lautet

  3. Implementierung der Anwendung

    Für die Implementierung der Anwendung wurde neben Tensorflow.js auch das modul react-webcam genutzt, um zugriff auf die Kamera des Systems zu erhalten. Das Modul ermöglicht es die Kamera als ein standard JSX Modul zu verwenden.

    Gestartet wird die gesammte Anwendung durch die Funktion runNet(). Diese wird beim Laden des Browserfensters durch einen useEffect hook von React ausgeführt. Die Funktion lädt das Modell und führt anschließend in einem intervall von 100ms die Funktion detect() aus.

    Die Funktion detect() prüft, ob die Webcam verfügbar ist und holt Breite und Höhe der Kamera um die Canvas auf der die Erkennungen gezeigt werden zu konfigurieren.

    Als letztes wird die Funktion drawBox() aufgerufen, welche mit den Ergebnissen des Modells die jeweiligen Bounding boxes auf die Canvas malt.

  4. Testen der Anwendung mit verschiedenen Motiven

    Zum testen der Anwendung wurde die Liste an Klassen welche coco-ssd erkennen kann genutzt. Da von den 80 Klassen welche das Modell erkennen kann viele nicht einfach testbar waren, wurden nur eine begrenzte anzahl der Klassen getestet.

  5. Hosten der Anwendung auf dem Rechenzentrum

    Um die Anwendung letztendlich auf dem Rechenzentrum selber zu hosten wurde die Anwendung in normales html, css und JavaScript compiled. Der Befehl dazu lautet:

    Die fertige Anwendung lässt sich nun unter https://tha.de/homes/luismues/dva nutzen.