Mit der MediaPipe-Aufgabe „Image Embedder“ können Sie Bilddaten in eine numerische Darstellung umwandeln, um ML-bezogene Bildverarbeitungsaufgaben auszuführen, z. B. den Vergleich der Ähnlichkeit zweier Bilder. In dieser Anleitung wird gezeigt, wie Sie den Bild-Embedder für Node- und Webanwendungen verwenden.
Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.
Codebeispiel
Der Beispielcode für den Image Embedder enthält eine vollständige Implementierung dieser Aufgabe in JavaScript. 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 für den Image Embedder ganz einfach in Ihrem Webbrowser aufrufen, ausführen und bearbeiten.
Einrichtung
In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung und Codeprojekte beschrieben, die speziell für die Verwendung des Bild-Embedders vorgesehen sind. Allgemeine Informationen zum Einrichten Ihrer Entwicklungsumgebung für die Verwendung von MediaPipe-Aufgaben, einschließlich Anforderungen an die Plattformversion, finden Sie im Einrichtungsleitfaden für das Web.
JavaScript-Pakete
Der Code für den Bild-Embedder ist über das @mediapipe/tasks-vision MediaPipe-NPM-Paket verfügbar. Sie finden diese Bibliotheken und können sie über die Links im Einrichtungsleitfaden herunterladen.
Sie können die erforderlichen Pakete mit dem folgenden Code für die lokale Bereitstellung mit dem folgenden Befehl installieren:
npm install @mediapipe/tasks-vision
Wenn Sie den Aufgabencode über ein Content Delivery Network (CDN) importieren möchten, fügen Sie in Ihrer HTML-Datei im Tag den folgenden Code hinzu:
<!-- 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
Für die MediaPipe-Aufgabe „Image Embedder“ ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu verfügbaren trainierten Modellen für den Bild-Embedder finden Sie in der Aufgabenübersicht im Abschnitt „Modelle“.
Wählen Sie ein Modell aus, laden Sie es herunter und speichern Sie es 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 Ihr 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
Für die MediaPipe-Aufgabe „Image Embedder“ wird die Funktion createFromOptions verwendet, um die Aufgabe einzurichten. Die Funktion createFromOptions akzeptiert Werte für Konfigurationsoptionen. Weitere Informationen zu den Konfigurationsoptionen finden Sie unter Konfigurationsoptionen.
Im folgenden Code wird gezeigt, wie die Aufgabe mit benutzerdefinierten Optionen erstellt und konfiguriert wird:
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
Für diese Aufgabe sind die folgenden Konfigurationsoptionen für Webanwendungen verfügbar:
| Option | Beschreibung | Wertebereich | Standardwert |
|---|---|---|---|
running_mode |
Legt den Ausführungsmodus für die Aufgabe fest. Es gibt zwei Modi: IMAGE: Der Modus für einzelne Bildeingaben. VIDEO: Der Modus für decodierte Frames eines Videos oder eines Livestreams von Eingabedaten, z. B. von einer Kamera. |
{IMAGE, VIDEO} |
IMAGE |
l2Normalize |
Gibt an, ob der zurückgegebene Feature-Vektor mit der L2-Norm normalisiert werden soll. Verwenden Sie diese Option nur, wenn das Modell noch keine native TFLite-Operation vom Typ „L2_NORMALIZATION“ enthält. In den meisten Fällen ist das bereits der Fall und die L2-Normalisierung wird durch TFLite-Inferenz erreicht, sodass diese Option nicht erforderlich ist. | Boolean |
False |
quantize |
Gibt an, ob die zurückgegebene Einbettung über die Skalarquantisierung in Bytes quantisiert werden soll. Für Einbettungen wird implizit davon ausgegangen, dass sie normiert sind. Daher hat jede Dimension garantiert einen Wert im Bereich [−1,0; 1,0]. Verwenden Sie andernfalls die Option „l2Normalize“. | Boolean |
False |
Daten vorbereiten
Mit dem Bild-Embedder können Bilder in jedem Format eingebettet werden, das vom Host-Browser unterstützt wird. Die Aufgabe umfasst auch die Vorverarbeitung der Dateneingabe, einschließlich Größenänderung, Drehung und Wertnormalisierung.
Aufrufe der Methoden embed() und embedForVideo() des Bild-Embeddings werden synchron ausgeführt und blockieren den Benutzeroberflächen-Thread. Wenn Sie Merkmalsvektoren aus Videoframes extrahieren möchten, blockiert jedes Einbetten den Hauptthread.
Sie können dies verhindern, indem Sie Webworker implementieren, um die embed()- und embedForVideo()-Methoden in einem anderen Thread auszuführen.
Aufgabe ausführen
Der Bild-Embedder verwendet die Methoden embed() (mit Ausführungsmodus image) und embedForVideo() (mit Ausführungsmodus video), um Inferenzen auszulösen. Die Image Embedder API gibt die Einbettungsvektoren für das Eingabebild zurück.
Im folgenden Code wird gezeigt, 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
Nach der Ausführung der Inferenz gibt die Aufgabe „Image Embedder“ ein ImageEmbedderResult-Objekt zurück, das die Einbettungsvektoren für das Eingabebild oder den Eingabeframe enthält.
Im Folgenden finden 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 das Einbetten des folgenden Bildes erzielt:
Mit der Funktion ImageEmbedder.cosineSimilarity können Sie die semantische Ähnlichkeit von zwei Einbettungen vergleichen. Im folgenden Code finden Sie ein Beispiel.
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
Im Beispielcode für den Bild-Embedder wird gezeigt, wie die vom Task zurückgegebenen Embedder-Ergebnisse angezeigt werden. Weitere Informationen finden Sie im Codebeispiel.