Benutzerdefinierte Webanwendung zur Objekterkennung mit MediaPipe erstellen

1. Hinweis

Mit MediaPipe Solutions können Sie Lösungen für maschinelles Lernen (ML) auf Ihre Anwendungen anwenden. Er bietet ein Framework, mit dem Sie vordefinierte Verarbeitungspipelines konfigurieren können, die den Nutzern eine sofortige, ansprechende und nützliche Ausgabe liefern. Sie können diese Lösungen sogar mit Model Maker anpassen, um die Standardmodelle zu aktualisieren.

Die Objekterkennung ist eine von mehreren ML-Visionsaufgaben von MediaPipe Solutions. MediaPipe Tasks ist für Android, Python und das Web verfügbar.

In diesem Codelab fügen Sie einer Webanwendung die Objekterkennung hinzu, um Hunde auf Bildern und in einem Live-Webcam-Video zu erkennen.

Lerninhalte

• Objekterkennungsaufgabe in eine Web-App mit MediaPipe Tasks einbinden

Aufgaben

• Eine Webanwendung, die die Anwesenheit von Hunden erkennt. Mit dem MediaPipe Model Maker können Sie ein Modell auch so anpassen, dass es eine Klasse von Objekten Ihrer Wahl erkennt.

Voraussetzungen

• Ein CodePen-Konto
• Ein Gerät mit einem Webbrowser
• Grundkenntnisse in JavaScript, CSS und HTML

2. Einrichten

In diesem Codelab wird der Code in CodePen ausgeführt, einer sozialen Entwicklungsumgebung, in der Sie Code im Browser schreiben und die Ergebnisse beim Erstellen überprüfen können.

Gehen Sie zur Einrichtung folgendermaßen vor:

1. Rufe in deinem CodePen-Konto CodePen auf. Sie verwenden diesen Code als Basis, um Ihren eigenen Objektdetektor zu erstellen.
2. Klicken Sie unten im Navigationsmenü von CodePen auf Fork, um eine Kopie des Startcodes zu erstellen.

3. Klicken Sie auf dem Tab JS auf den Erweiterungspfeil und wählen Sie dann JavaScript-Editor maximieren aus. Für dieses Codelab bearbeiten Sie die Angaben nur auf dem Tab JS. Die Tabs HTML und CSS sind also nicht erforderlich.

Start-App prüfen

1. Beachten Sie, dass im Vorschaufenster zwei Bilder von Hunden und eine Option zum Aktivieren Ihrer Webcam angezeigt werden. Das Modell, das Sie in dieser Anleitung verwenden, wurde mit den drei Hunden trainiert, die auf den beiden Bildern angezeigt werden.

Hinweis: Wenn Sie in dieser Anleitung eine Webanwendung mit einem allgemeineren Objektdetektor erstellen möchten, lesen Sie den Abschnitt Modelle.

2. Auf dem Tab „JS“ sind im Code mehrere Kommentare zu sehen. Sie können beispielsweise den folgenden Kommentar in Zeile 15 finden:

// Import the required package.

Diese Kommentare geben an, wo Sie Code-Snippets einfügen müssen.

3. MediaPipe-Paket „tasks-vision“ importieren und die erforderlichen Variablen hinzufügen

1. Importieren Sie auf dem Tab JS das MediaPipe-Paket tasks-vision:

// Import the required package.
​​import { ObjectDetector, FilesetResolver, Detection } from "https://cdn.skypack.dev/@mediapipe/tasks-vision@latest";

Dieser Code verwendet das Skypack Content Delivery Network (CDN), um das Paket zu importieren. Weitere Informationen zur Verwendung von Skypack mit CodePen finden Sie unter Skypack und CodePen.

In Ihren Projekten können Sie Node.js mit npm, dem Paketmanager oder CDN Ihrer Wahl verwenden. Weitere Informationen zu dem erforderlichen Paket, das Sie installieren müssen, finden Sie unter JavaScript-Pakete.

2. Deklarieren Sie Variablen für die Objekterkennung und den Ausführungsmodus:

// Create required variables.
let objectDetector = null;
let runningMode = "IMAGE";

Die Variable runningMode ist ein String, der auf einen "IMAGE"-Wert gesetzt wird, wenn Sie Objekte in Bildern erkennen, oder auf einen "VIDEO"-Wert, wenn Sie Objekte in Videos erkennen.

4. Objektdetektor initialisieren

• Fügen Sie zum Initialisieren des Objektdetektors auf dem Tab JS nach dem entsprechenden Kommentar den folgenden Code ein:

// Initialize the object detector.
async function initializeObjectDetector() {
  const visionFilesetResolver = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );
  objectDetector = await ObjectDetector.createFromOptions(visionFilesetResolver, {
    baseOptions: {
      modelAssetPath: "https://storage.googleapis.com/mediapipe-assets/dogs.tflite"
    },
    scoreThreshold: 0.3,
    runningMode: runningMode
  });
}
initializeObjectDetector();

Die Methode FilesetResolver.forVisionTasks() gibt den Speicherort der Binärdatei WebAssembly (Wasm) für die Aufgabe an.

Die Methode ObjectDetector.createFromOptions() instanziiert den Objektdetektor. Sie müssen einen Pfad zu dem Modell angeben, das für die Erkennung verwendet wird. In diesem Fall wird das Hundeerkennungsmodell in Cloud Storage gehostet.

Hinweis:Wenn Sie ein allgemeineres Modell zur Objekterkennung verwenden möchten, lesen Sie den Abschnitt Modelle.

Das Attribut scoreThreshold ist auf einen 0.3-Wert festgelegt. Das bedeutet, dass das Modell Ergebnisse für alle erkannten Objekte mit einem Konfidenzniveau von mindestens 30% zurückgibt. Sie können diesen Grenzwert an die Anforderungen Ihrer App anpassen.

Das Attribut runningMode wird bei der Initialisierung des ObjectDetector-Objekts festgelegt. Sie können diese und andere Optionen später bei Bedarf ändern.

5. Vorhersagen für Bilder ausführen

• Rufen Sie die Funktion handleClick() auf und fügen Sie den folgenden Code in den Funktionstext ein, um Vorhersagen für Bilder auszuführen:

// Verify object detector is initialized and choose the correct running mode.
if (!objectDetector) {
    alert("Object Detector still loading. Please try again");
    return;
  }

  if (runningMode === "VIDEO") {
    runningMode = "IMAGE";
    await objectDetector.setOptions({ runningMode: runningMode });
  }

Dieser Code bestimmt, ob der Objektdetektor initialisiert wird, und stellt sicher, dass der Ausführungsmodus für Bilder festgelegt ist.

Objekte erkennen

• Fügen Sie dem Text der Funktion handleClick() den folgenden Code hinzu, um Objekte in Bildern zu erkennen:

// Run object detection.
  const detections = objectDetector.detect(event.target);

Hinweis:Die Methode objectDetector.detect() blockiert die Benutzeroberfläche, wenn sie im Hauptthread ausgeführt wird.

Das folgende Code-Snippet enthält ein Beispiel für die Ausgabedaten dieser Aufgabe:

ObjectDetectionResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : aci
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : tikka

Vorhersagen verarbeiten und anzeigen

1. Rufen Sie am Ende des Funktionstexts handleClick() die Funktion displayImageDetections() auf:

// Call the displayImageDetections() function.
displayImageDetections(detections, event.target);

2. Fügen Sie im Hauptteil der Funktion displayImageDetections() den folgenden Code hinzu, um die Ergebnisse der Objekterkennung anzuzeigen:

// Display object detection results.
  
  const ratio = resultElement.height / resultElement.naturalHeight;

  for (const detection of result.detections) {
    // Description text
    const p = document.createElement("p");
    p.setAttribute("class", "info");
    p.innerText =
      detection.categories[0].categoryName +
      " - with " +
      Math.round(parseFloat(detection.categories[0].score) * 100) +
      "% confidence.";
    // Positioned at the top-left of the bounding box.
    // Height is that of the text.
    // Width subtracts text padding in CSS so that it fits perfectly.
    p.style =
      "left: " +
      detection.boundingBox.originX * ratio +
      "px;" +
      "top: " +
      detection.boundingBox.originY * ratio +
      "px; " +
      "width: " +
      (detection.boundingBox.width * ratio - 10) +
      "px;";
    const highlighter = document.createElement("div");
    highlighter.setAttribute("class", "highlighter");
    highlighter.style =
      "left: " +
      detection.boundingBox.originX * ratio +
      "px;" +
      "top: " +
      detection.boundingBox.originY * ratio +
      "px;" +
      "width: " +
      detection.boundingBox.width * ratio +
      "px;" +
      "height: " +
      detection.boundingBox.height * ratio +
      "px;";

    resultElement.parentNode.appendChild(highlighter);
    resultElement.parentNode.appendChild(p);
  }

Diese Funktion zeigt Begrenzungsrahmen über den in den Bildern erkannten Objekten. Dabei werden alle vorherigen Markierungen entfernt. Anschließend werden <p>-Tags erstellt und angezeigt, um jedes erkannte Objekt hervorzuheben.

App testen

Wenn Sie in CodePen Änderungen an Ihrem Code vornehmen, wird das Vorschaufenster beim Speichern automatisch aktualisiert. Wenn das automatische Speichern aktiviert ist, wurde Ihre App wahrscheinlich bereits aktualisiert. Es ist jedoch ratsam, die App noch einmal zu aktualisieren.

So testen Sie die App:

1. Klicken Sie im Vorschaubereich auf die einzelnen Bilder, um die Vorhersagen aufzurufen. Ein Begrenzungsrahmen zeigt den Namen des Hundes mit dem Konfidenzniveau des Modells an.
2. Wenn kein Begrenzungsrahmen angezeigt wird, öffnen Sie die Chrome-Entwicklertools und prüfen Sie den Bereich Console auf Fehler. Sie können auch die vorherigen Schritte durchgehen, um sicherzustellen, dass Sie nichts übersehen haben.

6. Vorhersagen für ein Live-Webcam-Video ausführen

Objekte erkennen

• Wenn Sie Objekte in einem Live-Webcam-Video erkennen möchten, rufen Sie die Funktion predictWebcam() auf und fügen Sie den folgenden Code in den Funktionstext ein:

// Run video object detection.
  // If image mode is initialized, create a classifier with video runningMode.
  if (runningMode === "IMAGE") {
    runningMode = "VIDEO";
    await objectDetector.setOptions({ runningMode: runningMode });
  }
  let nowInMs = performance.now();

  // Detect objects with the detectForVideo() method.
  const result = await objectDetector.detectForVideo(video, nowInMs);

  displayVideoDetections(result.detections);

Die Objekterkennung für Videos verwendet dieselben Methoden, unabhängig davon, ob Sie eine Inferenz für Streamingdaten oder ein vollständiges Video ausführen. Die Methode detectForVideo() ähnelt der für Fotos verwendete Methode detect(), enthält jedoch einen zusätzlichen Parameter für den Zeitstempel, der dem aktuellen Frame zugeordnet ist. Die Funktion führt die Erkennung live durch, sodass Sie die aktuelle Zeit als Zeitstempel übergeben.

Vorhersagen verarbeiten und anzeigen

• Rufen Sie die Funktion displayVideoDetections() auf und fügen Sie den folgenden Code in den Funktionstext ein, um die Erkennungsergebnisse zu verarbeiten und anzuzeigen:

//  Display video object detection results.
  for (let child of children) {
    liveView.removeChild(child);
  }
  children.splice(0);

  // Iterate through predictions and draw them to the live view.
  for (const detection of result.detections) {
    const p = document.createElement("p");
    p.innerText =
      detection.categories[0].categoryName +
      " - with " +
      Math.round(parseFloat(detection.categories[0].score) * 100) +
      "% confidence.";
    p.style =
      "left: " +
      (video.offsetWidth -
        detection.boundingBox.width -
        detection.boundingBox.originX) +
      "px;" +
      "top: " +
      detection.boundingBox.originY +
      "px; " +
      "width: " +
      (detection.boundingBox.width - 10) +
      "px;";

    const highlighter = document.createElement("div");
    highlighter.setAttribute("class", "highlighter");
    highlighter.style =
      "left: " +
      (video.offsetWidth -
        detection.boundingBox.width -
        detection.boundingBox.originX) +
      "px;" +
      "top: " +
      detection.boundingBox.originY +
      "px;" +
      "width: " +
      (detection.boundingBox.width - 10) +
      "px;" +
      "height: " +
      detection.boundingBox.height +
      "px;";

    liveView.appendChild(highlighter);
    liveView.appendChild(p);

    // Store drawn objects in memory so that they're queued to delete at next call.
    children.push(highlighter);
    children.push(p);
  }
}

Mit diesem Code wird die vorherige Markierung entfernt. Anschließend werden <p>-Tags erstellt und angezeigt, um jedes erkannte Objekt hervorzuheben.

App testen

Zum Testen der Live-Objekterkennung ist es hilfreich, ein Bild von einem der Hunde zu haben, auf dem das Modell trainiert wurde.

So testen Sie die App:

1. Lade eines der Hundefotos auf dein Smartphone herunter.
2. Klicken Sie im Vorschaubereich auf Webcam aktivieren.
3. Wenn Ihr Browser ein Dialogfeld anzeigt, in dem Sie aufgefordert werden, den Zugriff auf die Webcam zu gewähren, erteilen Sie die Berechtigung.
4. Halten Sie das Bild des Hundes auf Ihrem Smartphone vor die Webcam. Ein Begrenzungsrahmen zeigt den Namen des Hundes und das Konfidenzniveau des Modells an.
5. Wenn kein Begrenzungsrahmen angezeigt wird, öffnen Sie die Chrome-Entwicklertools und prüfen Sie den Bereich Console auf Fehler. Sie können auch die vorherigen Schritte durchgehen, um sicherzustellen, dass Sie nichts übersehen haben.

7. Glückwunsch

Glückwunsch! Sie haben eine Webanwendung erstellt, mit der Objekte in Bildern erkannt werden. Weitere Informationen finden Sie in der vollständigen Version der App auf CodePen.

Weitere Informationen

• Objekterkennung für das Web
• MediaPipe Studio
• MediaPipe-Modellerstellung
• Benutzerdefiniertes Objekterkennungsmodell mit MediaPipe Model Maker trainieren
• Benutzerdefinierte Objekterkennung im Browser mit TensorFlow.js