Mit der Aufgabe „MediaPipe Image Embedder“ können Sie Bilddaten in eine numerische Darstellung konvertieren, um ML-bezogene Bildverarbeitungsaufgaben wie den Vergleich der Ähnlichkeit von zwei Bildern auszuführen. In dieser Anleitung erfahren Sie, wie Sie den Bildeinbetter verwenden. für Node.js- und Webanwendungen.
Weitere Informationen zu Funktionen, Modellen und Konfigurationsoptionen Sehen Sie sich die Übersicht an.
Codebeispiel
Der Beispielcode für den Bildeinbetter bietet eine vollständige Implementierung dieses in JavaScript ausführen. Mit diesem Code können Sie diese Aufgabe testen und Erstellen Sie Ihre eigene App zum Einbetten von Bildern. Sie können Daten abrufen, ausführen, und bearbeiten Sie die Beispielcode für Bildeinbettungen ganz einfach in Ihrem Webbrowser.
Einrichtung
In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung und Codeprojekte für die Verwendung von Bildeinbetter erstellen. 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 Code zum Einbetten von Bildern 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
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 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 Aufgabe „MediaPipe Image Embedder“ ist ein trainiertes Modell erforderlich, für die Aufgabe. Weitere Informationen zu verfügbaren trainierten Modellen für den Bildeinbetter findest du 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
Modellpfad angeben
Sie können Aufgaben mit den Standardoptionen über die 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`
},
});
Modellzwischenspeicher angeben
Wenn Ihr Modell bereits in den Arbeitsspeicher geladen wurde, können Sie den
createFromModelBuffer()-Methode:
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 Image Embedder“ legt mithilfe der Funktion createFromOptions
die Aufgabe zu erledigen. Die Funktion createFromOptions akzeptiert Werte für
Konfigurationsoptionen. Weitere Informationen zu
finden Sie unter Konfigurationsoptionen.
Der folgende Code zeigt, wie Sie die Aufgabe mit benutzerdefinierten Optionen:
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 einer Video oder in einem Livestream mit Eingabedaten, etwa 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 keine native L2_NORMALIZATION TFLite Op. In den meisten Fällen ist dies bereits der Fall und Die L2-Normalisierung wird somit über TFLite-Inferenz ohne Notwendigkeit erreicht. für diese Option. | Boolean |
False |
quantize |
Ob die zurückgegebene Einbettung in Byte quantisiert werden soll mithilfe von eine skalare Quantisierung. Bei Einbettungen wird implizit angenommen, Daher hat jede Dimension garantiert einen Wert in [-1,0; 1,0]. Verwenden Sie die Option „l2Normalize“ verwenden, wenn dies nicht der Fall ist. | Boolean |
False |
Daten vorbereiten
Der Bildeinbetter kann Bilder in jedem Format einbetten, das vom Host-Browser. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation und Wertnormalisierung.
Aufrufe der Methoden embed() und embedForVideo() des Bildeinbetters
und den Benutzeroberflächen-Thread blockieren. Wenn Sie Daten aus einer
aus Videoframes verwenden, blockiert jede Einbettung den Hauptthread.
Sie können dies verhindern, indem Sie Web Worker zur Ausführung von embed() und
embedForVideo()-Methoden in einem anderen Thread.
Aufgabe ausführen
Der Bildeinbetter verwendet embed() (mit Ausführungsmodus image) und
embedForVideo() (mit Ausführungsmodus video) zum Auslösen von Methoden
Rückschlüsse. Die Image Embedder API gibt die Einbettungsvektoren für den
Eingabebild.
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 zum Einbinden von Bildern ein
ImageEmbedderResult-Objekt, das die Einbettungsvektoren für die Eingabe enthält
Bild oder Rahmen.
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 erhalten:
Sie können die semantische Ähnlichkeit zweier Einbettungen mit der Funktion
ImageEmbedder.cosineSimilarity. Im folgenden Code finden Sie eine
Beispiel.
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
Der Beispielcode für den Bildeinbetter zeigt, wie der Einbettungscode angezeigt wird. der Aufgabe zurückgegebene Ergebnisse finden Sie in der Codebeispiel .