Benutzerdefinierte Webanwendung zur Objekterkennung mit MediaPipe erstellen

1. Hinweis

Mit MediaPipe Solutions können Sie Machine-Learning-Lösungen (ML) in Ihren Apps einsetzen. Es bietet ein Framework, mit dem Sie vorgefertigte Verarbeitungspipelines konfigurieren können, die Nutzern sofort ansprechende und nützliche Ergebnisse liefern. Sie können diese Lösungen sogar mit Model Maker anpassen, um die Standardmodelle zu aktualisieren.

Die Objekterkennung ist eine von mehreren ML-Aufgaben für die Bildverarbeitung, 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

• Wie Sie mit MediaPipe Tasks eine Objekterkennungsaufgabe in eine Webanwendung einbinden.

Aufgaben

• Eine Webanwendung, die das Vorhandensein von Hunden erkennt. Mit MediaPipe Model Maker können Sie auch ein Modell anpassen, um eine Objektklasse Ihrer Wahl zu erkennen.

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 alles ein:

1. Rufen Sie in Ihrem CodePen-Konto diesen 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 Startcodes zu erstellen.

3. Klicken Sie auf dem Tab JS auf den Pfeil zum Erweitern und wählen Sie dann Maximize JavaScript editor aus. In diesem Codelab bearbeiten Sie nur die Arbeit auf dem Tab JS, sodass Sie die Tabs HTML oder CSS nicht benötigen.

Starter-App überprüfen

1. Im Vorschaubereich sehen Sie zwei Bilder von Hunden und eine Option zum Ausführen Ihrer Webcam. Das Modell, das Sie in diesem Codelab verwenden, wurde mit den drei Hunden trainiert, die auf den beiden Bildern zu sehen sind.

Hinweis: Wenn Sie in diesem Codelab lieber eine Webanwendung mit einem allgemeineren Objektdetektor erstellen möchten, finden Sie weitere Informationen unter Modelle.

2. Auf dem Tab JS sehen Sie mehrere Kommentare im Code. Beispielsweise finden Sie in Zeile 15 den folgenden Kommentar:

// Import the required package.

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

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

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

// 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 + CodePen.

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

2. Variablen für den Objektdetektor und den Ausführungsmodus deklarieren:

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

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

4. Objektdetektor initialisieren

• Fügen Sie nach dem entsprechenden Kommentar auf dem Tab JS 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();

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

Die Methode ObjectDetector.createFromOptions() instanziiert den Objektdetektor. 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, finden Sie weitere Informationen unter Modelle.

Die Eigenschaft scoreThreshold ist auf den Wert 0.3 gesetzt. Das bedeutet, dass das Modell Ergebnisse für alle Objekte zurückgibt, die mit einem Konfidenzniveau von mindestens 30% erkannt wurden. Sie können diesen Schwellenwert an die Anforderungen Ihrer App anpassen.

Die Eigenschaft runningMode wird bei der Initialisierung des Objekts ObjectDetector festgelegt. Sie können diese und andere Optionen später nach 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 dann den folgenden Code in den Funktionskörper ein:

// 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 wurde, und sorgt dafür, dass der Ausführungsmodus für Bilder festgelegt ist.

Objekte erkennen

• Wenn Sie Objekte in Bildern erkennen möchten, fügen Sie den folgenden Code in den Funktionskörper von handleClick() ein:

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

Hinweis:Die Methode objectDetector.detect() ist blockierend. Daher wird die Benutzeroberfläche blockiert, 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 Funktionskörpers von handleClick() die Funktion displayImageDetections() auf:

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

2. Fügen Sie im Funktionskörper von 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 Objekten an, die in den Bildern erkannt wurden. Alle vorherigen Hervorhebungen werden entfernt und dann <p> Tags erstellt und angezeigt, um jedes erkannte Objekt hervorzuheben.

Anwendung 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 aufzurufen. Ein Begrenzungsrahmen zeigt den Namen des Hundes mit dem Konfidenzniveau des Modells.
2. Wenn kein Begrenzungsrahmen vorhanden ist, öffnen Sie die Chrome-Entwicklertools und prüfen Sie im Bereich Konsole auf Fehler. Alternativ können Sie die vorherigen Schritte noch einmal 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 dann den folgenden Code in den Funktionskörper 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);

Bei der Objekterkennung für Videos werden unabhängig davon, ob Sie Inferenz für Streamingdaten oder ein vollständiges Video ausführen, dieselben Methoden verwendet. Die Methode detectForVideo() ähnelt der Methode detect(), die für Fotos verwendet wird. Sie enthält jedoch einen zusätzlichen Parameter für den Zeitstempel, der mit dem aktuellen Frame verknüpft ist. Die Erkennung wird live ausgeführt. Daher übergeben Sie die aktuelle Zeit als Zeitstempel.

Vorhersagen verarbeiten und anzeigen

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

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

Dieser Code entfernt alle vorherigen Hervorhebungen und erstellt und zeigt dann <p> Tags an, um jedes erkannte Objekt hervorzuheben.

Anwendung testen

Wenn Sie die Live-Objekterkennung testen möchten, ist es hilfreich, ein Bild eines der Hunde zu haben, mit denen das Modell trainiert wurde.

So testen Sie die App:

1. Laden Sie eines der Hundefotos auf Ihr 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.
5. Wenn kein Begrenzungsrahmen vorhanden ist, öffnen Sie die Chrome-Entwicklertools und prüfen Sie im Bereich Konsole auf Fehler. Alternativ können Sie die vorherigen Schritte noch einmal durchgehen, um sicherzustellen, dass Sie nichts übersehen haben.

7. Glückwunsch

Glückwunsch! Sie haben eine Webanwendung erstellt, die Objekte in Bildern erkennt. Eine vollständige Version der App finden Sie auf CodePen.

Weitere Informationen

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