Przewodnik umieszczania obrazów w internecie

Zadanie MediaPipe Image Embedder umożliwia przekształcanie danych obrazu w reprezentację numeryczną w celu wykonywania zadań przetwarzania obrazu związanych z uczeniem maszynowym, takich jak porównywanie podobieństwa 2 obrazów. Z tych instrukcji dowiesz się, jak używać narzędzia Image Embedder w przypadku aplikacji Node.js i aplikacji internetowych.

Więcej informacji o możliwościach, modelach i opcjach konfiguracji tego zadania znajdziesz w Przeglądzie.

Przykładowy kod

Przykładowy kod narzędzia do osadzania obrazów zawiera pełną implementację tego zadania w JavaScript. Ten kod pomoże Ci przetestować to zadanie i zacząć tworzyć własną aplikację do osadzania obrazów. Możesz wyświetlać, uruchamiać i edytować przykład osadzania obrazów za pomocą przeglądarki internetowej.

Konfiguracja

W tej sekcji opisujemy najważniejsze kroki konfigurowania środowiska programistycznego i projektów kodu pod kątem korzystania z Image Embedder. Ogólne informacje o konfigurowaniu środowiska programistycznego do korzystania z interfejsu MediaPipe Tasks, w tym wymagania dotyczące wersji platformy, znajdziesz w przewodniku po konfiguracji na potrzeby internetu.

Pakiety JavaScript

Kod Image Embedder jest dostępny w pakiecie MediaPipe @mediapipe/tasks-vision NPM. Te biblioteki możesz znaleźć i pobrać, korzystając z linków podanych w przewodniku po konfiguracji platformy.

Wymagane pakiety możesz zainstalować za pomocą tego kodu w przypadku lokalnego środowiska testowego 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 w 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.mjs"
    crossorigin="anonymous"></script>
</head>

Model

Zadanie MediaPipe Image Embedder wymaga wytrenowanego modelu, który jest z nim zgodny. Więcej informacji o dostępnych wytrenowanych modelach do osadzania obrazów znajdziesz w sekcji Modele w omówieniu zadania.

Wybierz i pobierz model, a następnie zapisz go w katalogu projektu:

<dev-project-root>/app/shared/models/

Tworzenie zadania

Określanie ścieżki modelu

Zadanie z opcjami domyślnymi możesz utworzyć 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ślanie bufora modelu

Jeśli model jest już wczytany 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 skonfigurowania zadania. Funkcja createFromOptions akceptuje wartości opcji konfiguracji. Więcej informacji o opcjach konfiguracji znajdziesz w sekcji Opcje konfiguracji.

Poniższy kod pokazuje, jak utworzyć 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 te opcje konfiguracji aplikacji internetowych:

Nazwa opcji Opis Zakres wartości Wartość domyślna
running_mode Ustawia tryb uruchamiania zadania. Dostępne są 2 tryby:

OBRAZ: tryb dla pojedynczych obrazów.

WIDEO: tryb dla zdekodowanych 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 jeszcze natywnej operacji L2_NORMALIZATION TFLite. W większości przypadków tak jest, więc normalizacja L2 jest osiągana przez wnioskowanie TFLite bez potrzeby używania tej opcji. Boolean False
quantize Określa, czy zwrócony wektor dystrybucyjny ma być skwantyzowany do bajtów za pomocą kwantyzacji skalarnej. Wektory dystrybucyjne są domyślnie normalizowane, więc każda wartość wymiaru mieści się w zakresie [-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. Zadanie to obejmuje też wstępne przetwarzanie danych wejściowych, w tym zmianę rozmiaru, obracanie i normalizację wartości.

Wywołania metod Image Embedder embed() i embedForVideo() działają synchronicznie i blokują wątek interfejsu użytkownika. Jeśli chcesz wyodrębnić wektory cech z klatek filmu, każde osadzanie zablokuje wątek główny. Możesz temu zapobiec, wdrażając procesy robocze, które będą uruchamiać metody embed() i embedForVideo() w innym wątku.

Uruchamianie zadania

Narzędzie do osadzania obrazów wykorzystuje metody embed() (w trybie image) i embedForVideo() (w trybie video) do wywoływania wnioskowań. Interfejs Image Embedder API zwróci wektory osadzania dla obrazu wejściowego.

Poniższy kod pokazuje, jak wykonać 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 przeprowadzeniu wnioskowania zadanie Image Embedder zwraca obiekt ImageEmbedderResult zawierający wektory osadzania dla wejściowego obrazu lub klatki.

Poniżej znajdziesz przykład danych wyjściowych 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 przez umieszczenie tego obrazu:

Średni plan egzotycznego kota

Możesz porównać podobieństwo semantyczne 2 wektorów za pomocą funkcji ImageEmbedder.cosineSimilarity. Przykład znajdziesz w poniższym kodzie.

// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
  imageEmbedderResult.embeddings[0],
  otherEmbedderResult.embeddings[0]);

Przykładowy kod Image Embedder pokazuje, jak wyświetlać wyniki osadzania zwracane przez zadanie. Szczegółowe informacje znajdziesz w przykładzie.