Benutzerdefinierte Webanwendung zur Objekterkennung mit MediaPipe erstellen

1. Hinweis

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

Die Objekterkennung ist eine von mehreren ML-Vision-Aufgaben, die MediaPipe Solutions bietet. 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 in Bildern und in einem Live-Webcam-Video zu erkennen.

Lerninhalte

• Informationen zum Einbinden einer Objekterkennungsaufgabe in eine Webanwendung mit MediaPipe Tasks

Aufgaben

• Eine Webanwendung, die die Anwesenheit von Hunden erkennt. Mit dem MediaPipe-Modell-Maker können Sie ein Modell auch so anpassen, dass eine Objektklasse Ihrer Wahl erkannt wird.

Voraussetzungen

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

2. Einrichten

In diesem Codelab wird Ihr Code in CodePen ausgeführt, einer sozialen Entwicklungsumgebung, in der Sie Code im Browser schreiben und die Ergebnisse während der Entwicklung prüfen können.

So richten Sie die Funktion ein:

1. Rufen Sie in Ihrem CodePen-Konto CodePen auf. Sie verwenden diesen Code als Ausgangspunkt, um Ihren eigenen Objektdetektor zu erstellen.
2. Klicken Sie unten in CodePen im Navigationsmenü auf Fork, um eine Kopie des Starter-Codes zu erstellen.

3. Klicken Sie auf dem Tab JS auf den Erweiterungspfeil  und wählen Sie dann JavaScript-Editor maximieren aus. In diesem Codelab bearbeiten Sie das Werk nur auf dem Tab JS. Die Tabs HTML und CSS sind daher nicht sichtbar.

Start-App ansehen

1. Im Vorschaubereich sehen Sie zwei Bilder von Hunden und eine Option zum Starten der Webcam. Das in dieser Anleitung verwendete Modell wurde mit den drei Hunden auf den beiden Bildern trainiert.

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

2. Auf dem Tab JS sehen Sie, dass im Code mehrere Kommentare vorhanden sind. In Zeile 15 finden Sie beispielsweise den folgenden Kommentar:

// 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";

In diesem Code wird das Skypack Content Delivery Network (CDN) zum Importieren des Pakets verwendet. Weitere Informationen zur Verwendung von Skypack mit CodePen finden Sie unter Skypack + CodePen.

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

2. Deklarieren Sie Variablen für den Objekt-Detektor und den Betriebsmodus:

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

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

4. Objekterkennung initialisieren

• Fügen Sie auf dem Tab JS nach dem entsprechenden Kommentar den folgenden Code hinzu, um den Objektdetektor zu initialisieren:

// 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();

Mit der FilesetResolver.forVisionTasks()-Methode wird der Speicherort des WebAssembly-Binärprogramms (Wasm) für die Aufgabe angegeben.

Mit der Methode ObjectDetector.createFromOptions() wird der Objektdetektor instanziiert. Sie müssen einen Pfad zum Modell angeben, das für die Erkennung verwendet wird. In diesem Fall wird das Modell zur Hundeerkennung in Cloud Storage gehostet.

Hinweis:Wenn Sie ein allgemeineres Objekterkennungsmodell verwenden möchten, lesen Sie den Hilfeartikel Modelle.

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

Die Eigenschaft 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

• Wenn Sie Vorhersagen für Bilder ausführen möchten, rufen Sie die Funktion handleClick() auf und fügen Sie dem Funktionskörper den folgenden Code hinzu:

// 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 });
  }

Mit diesem Code wird ermittelt, ob der Objektdetektor initialisiert ist, und dafür gesorgt, dass der Ausführungsmodus für Bilder festgelegt ist.

Objekte erkennen

• Wenn Sie Objekte in Bildern erkennen möchten, fügen Sie dem Body der Funktion handleClick() den folgenden Code hinzu:

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

Hinweis:Die Methode objectDetector.detect() ist blockierend und blockiert daher 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 handleClick()-Funktionskörpers die displayImageDetections()-Funktion auf:

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

2. Fügen Sie im Body 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);
  }

Mit dieser Funktion werden Begrenzungsrahmen um die in den Bildern erkannten Objekte angezeigt. Dabei werden alle vorherigen Markierungen entfernt und dann <p>-Tags erstellt und angezeigt, um jedes erkannte Objekt hervorzuheben.

App testen

Wenn Sie in CodePen Änderungen an Ihrem Code vornehmen, wird der Vorschaubereich beim Speichern automatisch aktualisiert. Wenn die automatische Speicherung aktiviert ist, wurde Ihre App wahrscheinlich bereits aktualisiert. Es empfiehlt sich jedoch, sie noch einmal zu aktualisieren.

So testen Sie die App:

1. Klicken Sie im Vorschaubereich auf die einzelnen Bilder, um die Vorhersagen zu sehen. In einem Begrenzungsrahmen wird der Name des Hundes mit dem Konfidenzniveau des Modells angezeigt.
2. Wenn kein Begrenzungsrahmen vorhanden ist, öffnen Sie die Chrome-Entwicklertools und prüfen Sie dann im Bereich Konsole auf Fehler. Sie können auch die vorherigen Schritte noch einmal durchgehen, um sicherzugehen, dass Sie nichts übersehen haben.

6. Vorhersagen für ein Live-Webcamvideo 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 dem Funktionskörper den folgenden Code hinzu:

// 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);

Für die Objekterkennung in Videos werden dieselben Methoden verwendet, unabhängig davon, ob Sie die Inferenz auf Streamingdaten oder ein vollständiges Video anwenden. Die Methode detectForVideo() ähnelt der Methode detect(), die für Fotos verwendet wird, enthält aber einen zusätzlichen Parameter für den Zeitstempel, der mit dem aktuellen Frame verknüpft ist. Die Funktion führt die Erkennung live durch. Daher geben Sie die aktuelle Uhrzeit als Zeitstempel an.

Vorhersagen verarbeiten und anzeigen

• Wenn Sie die Erkennungsergebnisse verarbeiten und anzeigen möchten, rufen Sie die Funktion displayVideoDetections() auf und fügen Sie dem Funktionskörper den folgenden Code hinzu:

//  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 werden alle vorherigen Markierungen entfernt und dann <p>-Tags erstellt und angezeigt, um jedes erkannte Objekt hervorzuheben.

App testen

Für den Test der Live-Objekterkennung ist es hilfreich, ein Bild eines der Hunde zu haben, mit dem das Modell trainiert wurde.

So testen Sie die App:

1. Laden Sie eines der Fotos des Hundes auf Ihr Smartphone herunter.
2. Klicken Sie im Vorschaufenster auf Webcam aktivieren.
3. Wenn Sie in Ihrem Browser aufgefordert werden, Zugriff auf die Webcam zu gewähren, gewähren Sie die Berechtigung.
4. Halten Sie das Bild des Hundes auf Ihrem Smartphone vor die Webcam. In einem Begrenzungsrahmen werden der Name des Hundes und der Konfidenzgrad des Modells angezeigt.
5. Wenn kein Begrenzungsrahmen vorhanden ist, öffnen Sie die Chrome-Entwicklertools und prüfen Sie dann im Bereich Konsole auf Fehler. Sie können auch die vorherigen Schritte noch einmal durchgehen, um sicherzugehen, dass Sie nichts übersehen haben.

7. Glückwunsch

Glückwunsch! Sie haben eine Webanwendung erstellt, die Objekte in Bildern erkennt. Weitere Informationen finden Sie in der fertigen Version der App auf CodePen.

Weitere Informationen

• Objekterkennung für das Web
• MediaPipe Studio
• MediaPipe Model Maker
• Eigenes Modell für die Objekterkennung mit dem MediaPipe-Modell-Maker trainieren
• Benutzerdefinierte Objekterkennung im Browser mit TensorFlow.js