Przewodnik umieszczania obrazów w internecie

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.