Zadanie MediaPipe Image Embedder umożliwia konwertowanie danych obrazu na postać liczbową, aby wykonywać zadania związane z przetwarzaniem obrazu za pomocą uczenia maszynowego, np. porównywać podobieństwo 2 obrazów. Z tych instrukcji dowiesz się, jak używać narzędzia do wklejania obrazów w przypadku aplikacji Node i internetowych.
Więcej informacji o możliwościach, modelach i opcjach konfiguracji związanych z tym zadaniem znajdziesz w sekcji Omówienie.
Przykładowy kod
Przykładowy kod modułu do wklejania obrazów zawiera kompletną implementację tego zadania w JavaScript. Ten kod pomoże Ci przetestować to zadanie i rozpocząć tworzenie własnej aplikacji do umieszczania obrazów. Możesz wyświetlać, uruchamiać i edytować przykładowy kod Image Embedder za pomocą przeglądarki.
Konfiguracja
W tej sekcji opisaliśmy kluczowe kroki konfigurowania środowiska programistycznego i projektów kodu w celu korzystania z wtyczki Image Embedder. Ogólne informacje o konfigurowaniu środowiska programistycznego na potrzeby korzystania z zadań MediaPipe, w tym wymagania dotyczące wersji platformy, znajdziesz w przewodniku konfiguracji dla sieci.
Pakiety JavaScript
Kod Image Embedder jest dostępny w pakiecie @mediapipe/tasks-vision
NPM MediaPipe. Te biblioteki znajdziesz i pobierzesz, klikając linki podane w przewodniku po konfiguracji platformy.
Wymagające pakiety możesz zainstalować za pomocą tego kodu do lokalnego publikowania: za pomocą tego polecenia:
npm install @mediapipe/tasks-vision
Jeśli chcesz zaimportować kod zadania za pomocą usługi sieci dystrybucji treści (CDN), dodaj ten kod do tagu w pliku HTML:
<!-- 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>
Model
Zadanie MediaPipe Image Embedder wymaga wytrenowanego modelu, który jest zgodny z tym zadaniem. Więcej informacji o dostępnych wytrenowanych modelach usługi Image Embedder znajdziesz w sekcji Modele w omówieniu zadania.
Wybierz i pobierz model, a potem zapisz go w katalogu projektu:
<dev-project-root>/app/shared/models/
Tworzenie zadania
Określanie ścieżki modelu
Za pomocą metody createFromModelPath()możesz utworzyć zadanie z domyślnymi opcjami:
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`
},
});
Określanie bufora modelu
Jeśli model jest już załadowany do pamięci, możesz użyć metody createFromModelBuffer():
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(...)
);
Określanie opcji niestandardowych
Zadanie MediaPipe Image Embedder używa funkcji createFromOptions do konfiguracji zadania. Funkcja createFromOptions przyjmuje wartości opcji konfiguracji. Więcej informacji o opcjach konfiguracji znajdziesz w artykule Opcje konfiguracji.
Poniższy kod pokazuje, jak utworzyć i skonfigurować zadanie za pomocą opcji niestandardowych:
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
});
Opcje konfiguracji
W tym zadaniu dostępne są te opcje konfiguracji aplikacji internetowych:
| Nazwa opcji | Opis | Zakres wartości | Wartość domyślna |
|---|---|---|---|
running_mode |
Ustawia tryb działania zadania. Dostępne są 2 tryby: IMAGE (Obraz): tryb dla pojedynczych obrazów wejściowych. VIDEO: tryb dekodowanych klatek filmu lub transmisji na żywo danych wejściowych, np. z kamery. |
{IMAGE, VIDEO} |
IMAGE |
l2Normalize |
Określa, czy zwrócony wektor cech ma być znormalizowany za pomocą normy L2. Używaj tej opcji tylko wtedy, gdy model nie zawiera już natywnej operacji TFLite L2_NORMALIZATION. W większości przypadków tak jest już w ogóle, więc normalizacja L2 jest osiągana przez wnioskowanie TFLite bez potrzeby stosowania tej opcji. | Boolean |
False |
quantize |
Określa, czy zwrócony wektor dystrybucyjny ma być zaokrąglony do bajtów za pomocą kwantyzacji skalarnej. Zakłada się, że wektory mają długość jednostkową, dlatego wartość dowolnego wymiaru musi mieścić się w zakresie [-1,0, 1,0]. W przeciwnym razie użyj opcji l2Normalize. | Boolean |
False |
Przygotuj dane
Narzędzie do umieszczania obrazów może umieszczać obrazy w dowolnym formacie obsługiwanym przez przeglądarkę hosta. Zadanie to obejmuje też wstępną obróbkę danych wejściowych, w tym ich zmianę rozmiaru, obrót i normalizację wartości.
Wywołania metod embed() i embedForVideo() modułu osadzania obrazów są wykonywane synchronicznie i blokują wątek interfejsu użytkownika. Jeśli chcesz wyodrębnić wektory cech z ramek wideo, każde wstawienie spowoduje zablokowanie wątku głównego.
Możesz temu zapobiec, wdrażając web workery, aby uruchamiać metody embed() i embedForVideo() w innym wątku.
Uruchamianie zadania
Do wywoływania wnioskowań moduł osadzania obrazu używa metod embed() (w trybie wykonywania image) i embedForVideo() (w trybie wykonywania video). Interfejs API Image Embedder zwróci wektory osadzania dla obrazu wejściowego.
Poniższy kod pokazuje, jak wykonać przetwarzanie za pomocą modelu zadania:
const image = document.getElementById("image") as HTMLImageElement; const imageEmbedderResult = imageEmbedder.embed(image);
const video = document.getElementById("webcam"); const startTimeMs = performance.now(); const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);
Obsługa i wyświetlanie wyników
Po przeprowadzeniu wnioskowania zadanie Image Embedder zwraca obiekt ImageEmbedderResult, który zawiera wektory embeddingu dla wejściowego obrazu lub klatki.
Poniżej znajdziesz przykład danych wyjściowych z tego zadania:
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
Ten wynik został uzyskany dzięki umieszczeniu tego obrazu:
Za pomocą funkcji ImageEmbedder.cosineSimilarity możesz porównać podobieństwo semantyczne 2 wkładów. Przykładowy kod znajdziesz poniżej.
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
Przykładowy kod modułu Image Embedder pokazuje, jak wyświetlać wyniki zwrócone przez moduł z zadania. Szczegółowe informacje znajdziesz w przykładowym kodzie.