Leitfaden zur Bildklassifizierung für das Web

Mit der Aufgabe „MediaPipe Image Classifier“ können Sie Bilder klassifizieren. Sie können Aufgabe zu identifizieren, was ein Bild aus einer Reihe von definierten Kategorien darstellt während der Trainingsphase. In dieser Anleitung erfahren Sie, wie Sie den Bildklassifikator verwenden. für Node.js- und Webanwendungen.

Sie können diese Aufgabe in Aktion sehen, indem Sie die Demo ansehen. Weitere Informationen zu Funktionen, Modellen und Konfigurationsoptionen Sehen Sie sich die Übersicht an.

Codebeispiel

Der Beispielcode für den Bildklassifikator bietet eine vollständige Implementierung dieses in JavaScript ausführen. Mit diesem Code können Sie diese Aufgabe testen und und beginnen Sie mit der Entwicklung Ihrer eigenen App zur Bildklassifizierung. Sie können Daten abrufen, ausführen und bearbeiten Beispielcode für Bildklassifikator ganz einfach in Ihrem Webbrowser.

Einrichtung

In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung und für die Verwendung des Image Classifier. Allgemeine Informationen zu Einrichten Ihrer Entwicklungsumgebung für die Verwendung von MediaPipe-Aufgaben, einschließlich Plattformversionsanforderungen finden Sie in der Einrichtungsleitfaden für das Web

JavaScript-Pakete

Der Bildklassifikatorcode ist über MediaPipe @mediapipe/tasks-vision verfügbar NPM-Paket. Sie können Sie können diese Bibliotheken über die auf der Plattform bereitgestellten Links finden und herunterladen. Leitfaden für die Einrichtung

<ph type="x-smartling-placeholder">

Sie können die erforderlichen Pakete mit dem folgenden Code für das lokale Staging installieren mit dem folgenden Befehl:

npm install @mediapipe/tasks-vision

Wenn Sie den Aufgabencode über ein Content Delivery Network (CDN) importieren möchten fügen Sie folgenden Code in das Tag in Ihrer HTML-Datei ein:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Modell

Für die Aufgabe „MediaPipe Image Classifier“ ist ein trainiertes Modell erforderlich, das mit dieser für die Aufgabe. Weitere Informationen zu verfügbaren trainierten Modellen für den Bildklassifikator finden Sie unter in der Aufgabenübersicht im Abschnitt „Modelle“.

Wählen Sie ein Modell aus, laden Sie es herunter und speichern Sie es dann in Ihrem Projektverzeichnis:

<dev-project-root>/app/shared/models/

Aufgabe erstellen

Verwenden Sie eine der createFrom...()-Funktionen für Bildklassifikatoren, um die Aufgabe für die Ausführung von Inferenzen vorbereiten. createFromModelPath() verwenden mit einem relativen oder absoluten Pfad zur trainierten Modelldatei. Wenn Ihr Modell bereits in den Arbeitsspeicher geladen wurde, können Sie den createFromModelBuffer()-Methode.

Im Codebeispiel unten wird gezeigt, wie Sie mit der Funktion createFromOptions() die Aufgabe eingerichtet haben. Mit der Funktion createFromOptions können Sie die Bildklassifikator mit Konfigurationsoptionen. Weitere Informationen zur Konfiguration finden Sie unter Konfigurationsoptionen.

Der folgende Code zeigt, wie Sie die Aufgabe mit benutzerdefinierten Optionen:

async function createImageClassifier {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  imageClassifier = await ImageClassifier.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_classifier/efficientnet_lite0/float32/1/efficientnet_lite0.tflite`
    },
  });
}

Konfigurationsoptionen

Diese Aufgabe bietet die folgenden Konfigurationsoptionen für Webanwendungen:

Option Beschreibung Wertebereich Standardwert
runningMode Legt den Ausführungsmodus für die Task fest. Es gibt zwei Modi:

IMAGE: Der Modus für Einzelbildeingaben.

VIDEO: Der Modus für decodierte Frames einer Video oder in einem Livestream mit Eingabedaten, etwa von einer Kamera.		 {IMAGE, VIDEO} IMAGE
displayNamesLocale Legt die Sprache der Labels fest, die für Anzeigenamen in der Metadaten des Aufgabenmodells, falls verfügbar. Standardwert ist en für Englisch. Sie können den Metadaten eines benutzerdefinierten Modells lokalisierte Labels hinzufügen mit der TensorFlow Lite Metadata Writer API Gebietsschemacode de
maxResults Legt die optionale maximale Anzahl der am besten bewerteten Klassifizierungsergebnisse fest auf zurückgeben. Wenn < 0 setzen, werden alle verfügbaren Ergebnisse zurückgegeben. Beliebige positive Zahlen -1
scoreThreshold Legt den Schwellenwert für die Vorhersagepunktzahl fest, der den Wert in die Modellmetadaten (falls vorhanden). Ergebnisse unter diesem Wert werden abgelehnt. Beliebiger Gleitkommawert Nicht festgelegt
categoryAllowlist Legt die optionale Liste der zulässigen Kategorienamen fest. Wenn das Feld nicht leer ist, Klassifizierungsergebnisse, deren Kategoriename nicht in dieser Gruppe enthalten ist, werden herausgefiltert. Doppelte oder unbekannte Kategorienamen werden ignoriert. Diese Option schließt sich mit categoryDenylist gegenseitig aus und verwendet führt beides zu einem Fehler. Alle Strings Nicht festgelegt
categoryDenylist Legt die optionale Liste der unzulässigen Kategorienamen fest. Wenn nicht leer ist, werden Klassifizierungsergebnisse gefiltert, deren Kategoriename in diesem Satz enthalten ist. aus. Doppelte oder unbekannte Kategorienamen werden ignoriert. Diese Option ausschließlich mit categoryAllowlist und die Verwendung beider führt zu einem Fehler. Alle Strings Nicht festgelegt
resultListener Legt den Ergebnis-Listener so fest, dass er die Klassifizierungsergebnisse empfängt asynchron, wenn sich der Bildklassifikator im Livestream befindet . Kann nur verwendet werden, wenn der Ausführungsmodus auf LIVE_STREAM festgelegt ist – Nicht festgelegt

Daten vorbereiten

Mit dem Bildklassifikator können Objekte in Bildern in jedem vom Host-Browser. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation und Wertnormalisierung.

Aufrufe der Methoden des Bildklassifikators classify() und classifyForVideo() werden ausgeführt und den Benutzeroberflächen-Thread blockieren. Wenn Sie Objekte in von der Kamera eines Geräts teilen, blockiert jede Klassifizierung die wichtigsten Diskussions-Thread. Sie können dies verhindern, indem Sie Web Worker so implementieren, classify() und classifyForVideo() in einem anderen Thread.

Aufgabe ausführen

Der Bildklassifikator verwendet die Methode classify() mit dem Bildmodus und Methode classifyForVideo() mit dem Modus video zum Auslösen von Rückschlüsse. Die Image Classifier API gibt die möglichen Kategorien für die Objekte im Eingabebild.

Der folgende Code zeigt, wie die Verarbeitung mit dem Aufgabenmodell ausgeführt wird:

Bild

const image = document.getElementById("image") as HTMLImageElement;
const imageClassifierResult = imageClassifier.classify(image);

Video

const video = document.getElementById("video");
await imageClassifier.setOptions({ runningMode: "VIDEO" });

const timestamp = performance.now();
const classificationResult = await imageClassifier.classifyForVideo(
    video,
    timestamp
  );

Eine ausführlichere Implementierung der Ausführung einer Bildklassifikatoraufgabe finden Sie in der Codebeispiel) an.

Ergebnisse verarbeiten und anzeigen

Beim Ausführen der Inferenz gibt die Bildklassifikatoraufgabe eine ImageClassifierResult-Objekt, das die Liste der möglichen Kategorien enthält für die Objekte im Eingabebild oder -frame.

Im Folgenden sehen Sie ein Beispiel für die Ausgabedaten dieser Aufgabe:

ImageClassifierResult:
 Classifications #0 (single classification head):
  head index: 0
  category #0:
   category name: "/m/01bwb9"
   display name: "Passer domesticus"
   score: 0.91406
   index: 671
  category #1:
   category name: "/m/01bwbt"
   display name: "Passer montanus"
   score: 0.00391
   index: 670

Dieses Ergebnis erhalten Sie mit dem Vogelklassifikator. am:

Der Beispielcode für den Bildklassifikator veranschaulicht, wie die Klassifizierung angezeigt wird. der Aufgabe zurückgegebene Ergebnisse finden Sie in der Codebeispiel .