Mit der MediaPipe-Bildeinbettungsaufgabe können Sie Bilddaten in eine numerische Darstellung umwandeln, um ML-bezogene Bildverarbeitungsaufgaben auszuführen, z. B. die Ähnlichkeit von zwei Bildern zu vergleichen. In dieser Anleitung erfahren Sie, wie Sie den Bildeinbetter für Node- und Web-Apps verwenden.
Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.
Codebeispiel
Der Beispielcode für Image Embedder bietet eine vollständige Implementierung dieser Aufgabe in JavaScript als Referenz. Mit diesem Code können Sie diese Aufgabe testen und mit dem Erstellen Ihrer eigenen App zum Einbetten von Bildern beginnen. Sie können den Beispielcode des Image Embedder mithilfe Ihres Webbrowsers aufrufen, ausführen und bearbeiten.
Einrichtung
In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung und Codeprojekte speziell für die Verwendung von Image Embedder beschrieben. Allgemeine Informationen zum Einrichten der Entwicklungsumgebung für die Verwendung von MediaPipe-Aufgaben, einschließlich der Anforderungen an die Plattformversion, finden Sie im Einrichtungsleitfaden für das Web.
JavaScript-Pakete
Der Code für das Einbetten von Bildern ist über das @mediapipe/tasks-vision
NPM-Paket von MediaPipe erhältlich. Sie können diese Bibliotheken über die Links im Einrichtungsleitfaden für die Plattform herunterladen.
Mit dem folgenden Befehl können Sie die erforderlichen Pakete mit dem folgenden Code für das lokale Staging installieren:
npm install @mediapipe/tasks-vision
Wenn Sie den Aufgabencode über einen Content Delivery Network-Dienst (CDN) importieren möchten, fügen Sie den folgenden Code in das Tag in Ihrer HTML-Datei ein:
<!-- You can replace jsDelivr with your preferred CDN -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Modell
Die MediaPipe-Bildeinbettungsaufgabe erfordert ein trainiertes Modell, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu verfügbaren trainierten Modellen für Bildeinbetter finden Sie 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
Modellpfad angeben
Mit der Methode createFromModelPath() können Sie eine Aufgabe mit den Standardoptionen erstellen:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(vision, {
baseOptions: {
modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_embedder/mobilenet_v3_small/float32/1/mobilenet_v3_small.tflite`
},
});
Modellpuffer angeben
Wenn das Modell bereits in den Arbeitsspeicher geladen ist, können Sie die Methode createFromModelBuffer() verwenden:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = ImageEmbedder.createFromModelBuffer(
vision,
new Uint8Array(...)
);
Benutzerdefinierte Optionen angeben
Die Aufgabe „MediaPipe-Bildeinbettung“ verwendet die Funktion createFromOptions, um die Aufgabe einzurichten. Die Funktion createFromOptions akzeptiert Werte für Konfigurationsoptionen. Weitere Informationen zu Konfigurationsoptionen finden Sie unter Konfigurationsoptionen.
Der folgende Code zeigt, wie Sie die Aufgabe mit benutzerdefinierten Optionen erstellen und konfigurieren:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "model.tflite"
},
quantize: true
});
Konfigurationsoptionen
Diese Aufgabe bietet die folgenden Konfigurationsoptionen für Webanwendungen:
| Option | Beschreibung | Wertebereich | Standardwert |
|---|---|---|---|
running_mode |
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 eines Videos oder in einem Livestream mit Eingabedaten, z. B. von einer Kamera. |
{IMAGE, VIDEO} |
IMAGE |
l2Normalize |
Gibt an, ob der zurückgegebene Featurevektor mit der L2-Norm normalisiert werden soll. Verwenden Sie diese Option nur, wenn das Modell noch keinen nativen L2_NORMALIZATION TFLite-Vorgang enthält. In den meisten Fällen ist dies bereits der Fall und die L2-Normalisierung wird daher durch TFLite-Inferenz erreicht, ohne dass diese Option erforderlich ist. | Boolean |
False |
quantize |
Gibt an, ob die zurückgegebene Einbettung über eine skalare Quantisierung in Byte quantisiert werden soll. Bei Einbettungen wird implizit davon ausgegangen, dass es sich um eine Einheitsnorm handelt. Daher hat jede Dimension garantiert einen Wert bei [-1,0, 1,0]. Wenn dies nicht der Fall ist, verwenden Sie die Option „l2Normalize“. | Boolean |
False |
Daten vorbereiten
Der Bildeinbetter kann Bilder in jedem Format einbetten, das vom Hostbrowser unterstützt wird. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation und Wertenormalisierung.
Aufrufe der Methoden embed() und embedForVideo() des Bildeinbetters werden synchron ausgeführt und blockieren den Thread der Benutzeroberfläche. Wenn Sie Featurevektoren aus Videoframes extrahieren möchten, blockiert jede Einbettung den Hauptthread.
Sie können dies verhindern, indem Sie Web-Worker implementieren, um die Methoden embed() und embedForVideo() in einem anderen Thread auszuführen.
Task ausführen
Der Bildeinbetter verwendet die Methoden embed() (mit dem Ausführungsmodus image) und embedForVideo() (mit dem Ausführungsmodus video), um Inferenzen auszulösen. Die Image Embedder API gibt die Einbettungsvektoren für das Eingabebild zurück.
Der folgende Code zeigt, wie die Verarbeitung mit dem Aufgabenmodell ausgeführt wird:
Bild
const image = document.getElementById("image") as HTMLImageElement;
const imageEmbedderResult = imageEmbedder.embed(image);
Video
const video = document.getElementById("webcam");
const startTimeMs = performance.now();
const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);
Ergebnisse verarbeiten und anzeigen
Beim Ausführen der Inferenz gibt die Aufgabe zur Bildeinbettung ein ImageEmbedderResult-Objekt zurück, das die Einbettungsvektoren für das Eingabebild oder den Eingabeframe enthält.
Im Folgenden sehen Sie ein Beispiel für die Ausgabedaten dieser Aufgabe:
ImageEmbedderResult:
Embedding #0 (sole embedding head):
float_embedding: {0.0, 0.0, ..., 0.0, 1.0, 0.0, 0.0, 2.0}
head_index: 0
Dieses Ergebnis wurde durch Einbetten des folgenden Bildes erzielt:
Mit der Funktion ImageEmbedder.cosineSimilarity können Sie die semantische Ähnlichkeit von zwei Einbettungen vergleichen. Im folgenden Code sehen Sie ein Beispiel.
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
Der Beispielcode des Bildeinbetters zeigt, wie die von der Aufgabe zurückgegebenen Einbettungsergebnisse angezeigt werden. Weitere Informationen finden Sie im Codebeispiel.