Zadanie MediaPipe Image Embedder pozwala przekształcić dane obrazu na reprezentację liczbową w celu wykonania zadań przetwarzania obrazu związanych z systemami uczącymi się, takich jak porównywanie podobieństwa 2 obrazów. W tych instrukcjach pokazujemy, jak używać kreatora obrazów w węzłach i w aplikacjach internetowych.
Więcej informacji o możliwościach, modelach i opcjach konfiguracji tego zadania znajdziesz w sekcji Omówienie.
Przykładowy kod
Przykładowy kod narzędzia do umieszczania obrazów prezentuje pełną implementację tego zadania w JavaScript do celów referencyjnych. 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 do umieszczania obrazów w witrynie za pomocą przeglądarki.
Konfiguracja
W tej sekcji znajdziesz opis kluczowych kroków, które należy wykonać, aby skonfigurować środowisko programistyczne i projekty kodu z myślą o korzystaniu z kreatora obrazów. Ogólne informacje o konfigurowaniu środowiska programistycznego na potrzeby zadań MediaPipe, w tym o wymaganiach dotyczących wersji platformy, znajdziesz w przewodniku konfiguracji dla aplikacji internetowych.
Pakiety JavaScript
Kod do umieszczania obrazów jest dostępny w pakiecie MediaPipe @mediapipe/tasks-vision
NPM. Te biblioteki możesz znaleźć i pobrać za pomocą linków dostępnych w przewodniku po konfiguracji platformy.
Wymagane pakiety możesz zainstalować za pomocą tego polecenia na potrzeby lokalnego środowiska wykonawczego, korzystając z tego polecenia:
npm install @mediapipe/tasks-vision
Jeśli chcesz zaimportować kod zadania przez usługę sieci dostarczania 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 do umieszczania obrazów MediaPipe wymaga wytrenowanego modelu zgodnego z tym zadaniem. Więcej informacji o dostępnych wytrenowanych modelach do umieszczania obrazów znajdziesz w sekcji poświęconej modelom na stronie z omówieniem zadań.
Wybierz i pobierz model, a następnie zapisz go w katalogu projektu:
<dev-project-root>/app/shared/models/
Tworzenie zadania
Podaj ścieżkę modelu
Możesz utworzyć zadanie z opcjami domyślnymi za pomocą metody createFromModelPath()
:
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śl bufor 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śl opcje niestandardowe
Zadanie do umieszczania obrazów MediaPipe korzysta z funkcji createFromOptions
do konfigurowania zadania. Funkcja createFromOptions
akceptuje wartości opcji konfiguracji. Więcej informacji o opcjach konfiguracji znajdziesz w artykule Opcje konfiguracji.
Poniższy kod pokazuje, jak skompilować i skonfigurować zadanie z opcjami niestandardowymi:
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
To zadanie ma następujące opcje konfiguracji aplikacji internetowych:
Nazwa opcji | Opis | Zakres wartości | Wartość domyślna |
---|---|---|---|
running_mode |
Ustawia tryb działania zadania. Są 2 tryby: IMAGE: tryb wprowadzania pojedynczych obrazów. WIDEO: tryb dla zdekodowanych klatek filmu lub strumienia danych wejściowych na żywo, np. z kamery. |
{IMAGE, VIDEO } |
IMAGE |
l2Normalize |
Określa, czy znormalizować zwrócony wektor cech z normą L2. Użyj tej opcji tylko wtedy, gdy model nie zawiera jeszcze natywnej operacji L2_NORMALIZATION TFLite. W większości przypadków tak się dzieje i w ten sposób można uzyskać normalizację L2 za pomocą wnioskowania TFLite bez potrzeby użycia tej opcji. | Boolean |
False |
quantize |
Określa, czy zwrócone umieszczenie ma zostać poddane kwantyzacji do liczby bajtów za pomocą kwantyzacji skalarnej. Osadzone elementy są domyślnie uznawane za normę jednostki, dlatego każdy wymiar na pewno ma wartość [-1,0, 1,0]. Jeśli tak nie jest, 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. Zadaniem tego zadania jest również wstępne przetwarzanie danych wejściowych, w tym zmiana rozmiaru, rotacja i normalizacja wartości.
Wywołania metod embed()
i embedForVideo()
kreatora obrazów embed()
są uruchamiane synchronicznie i blokują wątek interfejsu użytkownika. Jeśli chcesz wyodrębniać wektory funkcji z klatek wideo, każde umieszczenie spowoduje zablokowanie wątku głównego.
Aby temu zapobiec, zaimplementuj instancje robocze, które uruchamiają metody embed()
i embedForVideo()
w innym wątku.
Uruchamianie zadania
Do aktywowania wnioskowania narzędzie do umieszczania obrazów korzysta z metod embed()
(w trybie uruchamiania image
) i embedForVideo()
(w trybie uruchamiania video
). Interfejs Image Embedder API zwraca wektory dystrybucyjne obrazu wejściowego.
Ten kod pokazuje, jak wykonywać przetwarzanie za pomocą modelu zadań:
Obraz
const image = document.getElementById("image") as HTMLImageElement; const imageEmbedderResult = imageEmbedder.embed(image);
Wideo
const video = document.getElementById("webcam"); const startTimeMs = performance.now(); const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);
Obsługa i wyświetlanie wyników
Po uruchomieniu wnioskowania zadanie umieszczania obrazów zwraca obiekt ImageEmbedderResult
, który zawiera wektory dystrybucyjne obrazu wejściowego lub ramki.
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
Uzyskano taki wynik przez umieszczenie następującego obrazu:
Możesz porównać semantyczne podobieństwo 2 wektorów dystrybucyjnych za pomocą funkcji ImageEmbedder.cosineSimilarity
. Oto przykładowy kod.
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
Przykładowy kod do umieszczania obrazów pokazuje, jak wyświetlać wyniki umieszczania zwrócone przez zadanie. Więcej informacji znajdziesz w przykładowym kodzie.