Mit der MediaPipe Image Embedder-Aufgabe 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 Image Embedder 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 enthält eine vollständige Implementierung dieser Aufgabe in JavaScript. Mit diesem Code können Sie diese Aufgabe testen und mit der Entwicklung Ihrer eigenen App für Bildeinbettungen beginnen. Sie können das Beispiel für Image Embedder einfach in Ihrem Webbrowser aufrufen, ausführen und bearbeiten.
Einrichtung
In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung und Ihrer Codeprojekte für die Verwendung von Image Embedder beschrieben. Allgemeine Informationen zum Einrichten Ihrer 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 Image Embedder ist über das MediaPipe-@mediapipe/tasks-vision-NPM-Paket verfügbar. Sie können diese Bibliotheken über die Links im Einrichtungsleitfaden der Plattform aufrufen und herunterladen.
Sie können die erforderlichen Pakete mit dem folgenden Code für das lokale Staging mit dem folgenden Befehl installieren:
npm install @mediapipe/tasks-vision
Wenn Sie den Aufgaben-Code über einen CDN-Dienst (Content Delivery Network) importieren möchten, fügen Sie den folgenden Code in das <code><head></code>-Tag 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.mjs"
crossorigin="anonymous"></script>
</head>
Modell
Für die MediaPipe Image Embedder-Aufgabe ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu den verfügbaren trainierten Modellen für Image 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
Sie können einen Task mit den Standardoptionen mit der Methode createFromModelPath() 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 wurde, 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 Image Embedder-Aufgabe wird die Funktion createFromOptions verwendet, 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
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 keinen nativen TFLite-Vorgang für die L2-NORMALISIERUNG enthält. In den meisten Fällen ist dies bereits der Fall und die L2-Normalisierung wird daher durch die TFLite-Inferenz erreicht, ohne dass diese Option erforderlich ist. | Boolean |
False |
quantize |
Gibt an, ob die zurückgegebene Einbettung über die skalare Quantisierung in Bytes quantisiert werden soll. Für Embeddings wird implizit angenommen, dass sie eine Einheitsnorm haben. Daher hat jede Dimension garantiert einen Wert im Bereich [-1,0, 1,0]. Verwenden Sie die Option „l2Normalize“, wenn dies nicht der Fall ist. | Boolean |
False |
Daten vorbereiten
Mit Image Embedder können Bilder in jedem Format eingebettet werden, das vom Hostbrowser unterstützt wird. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Drehung und Wertnormalisierung.
Aufrufe der Image Embedder-Methoden embed() und embedForVideo() werden synchron ausgeführt und blockieren den Thread der Benutzeroberfläche. Wenn Sie Feature-Vektoren aus Videoframes extrahieren möchten, blockiert jedes Embedding den Hauptthread.
Sie können dies verhindern, indem Sie Web-Worker implementieren, um die Methoden embed() und embedForVideo() in einem anderen Thread auszuführen.
Aufgabe ausführen
Der Image Embedder verwendet die Methoden embed() (mit dem Ausführungsmodus image) und embedForVideo() (mit dem Ausführungsmodus video), um Inferenzvorgänge 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
Bei der Ausführung der Inferenz gibt die Image Embedder-Aufgabe 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. Sehen Sie sich den folgenden Code als Beispiel an.
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
Der Beispielcode für Image Embedder zeigt, wie die vom Task zurückgegebenen Embedder-Ergebnisse angezeigt werden. Weitere Informationen finden Sie im Beispiel.