Руководство по встраиванию изображений для Интернета

Задача MediaPipe Image Embedder позволяет преобразовывать данные изображения в числовое представление для выполнения задач обработки изображений, связанных с машинным обучением, например, для сравнения сходства двух изображений. В этих инструкциях показано, как использовать Image Embedder для Node и веб-приложений.

Для получения более подробной информации о возможностях, моделях и параметрах конфигурации этой задачи см. раздел «Обзор» .

Пример кода

Пример кода для Image Embedder представляет собой полную реализацию этой задачи на JavaScript для вашего ознакомления. Этот код поможет вам протестировать задачу и начать создавать собственное приложение для встраивания изображений. Вы можете просматривать, запускать и редактировать пример Image Embedder, используя только веб-браузер.

Настраивать

В этом разделе описаны ключевые шаги по настройке среды разработки и проектов кода специально для использования Image Embedder. Общую информацию о настройке среды разработки для использования задач MediaPipe, включая требования к версии платформы, см. в руководстве по настройке для веб-версии .

пакеты JavaScript

Код для встраивания изображений доступен через NPM- пакет MediaPipe @mediapipe/tasks-vision . Вы можете найти и загрузить эти библиотеки по ссылкам, указанным в руководстве по настройке платформы.

Для локальной установки необходимых пакетов используйте следующий код, выполнив следующую команду:

npm install @mediapipe/tasks-vision

Если вы хотите импортировать код задачи через службу сети доставки контента (CDN), добавьте следующий код в файл. тег в вашем 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>

Модель

Для выполнения задачи MediaPipe Image Embedder требуется обученная модель, совместимая с данной задачей. Дополнительную информацию о доступных обученных моделях для Image Embedder см. в разделе «Модели» обзора задачи.

Выберите и скачайте модель, а затем сохраните её в каталоге вашего проекта:

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

Создайте задачу

Укажите путь к модели

Вы можете создать задачу с параметрами по умолчанию, используя метод 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`
    },
  });

Укажите буфер модели

Если ваша модель уже загружена в память, вы можете использовать метод 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(...)
);

Укажите пользовательские параметры

Задача MediaPipe Image Embedder использует функцию createFromOptions для настройки задачи. Функция createFromOptions принимает значения для параметров конфигурации. Дополнительную информацию о параметрах конфигурации см. в разделе «Параметры конфигурации» .

Приведенный ниже код демонстрирует, как создать и настроить задачу с пользовательскими параметрами:

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
    });

Параметры конфигурации

Данная задача имеет следующие параметры конфигурации для веб-приложений:

Название варианта Описание Диапазон значений Значение по умолчанию
running_mode Задает режим выполнения задачи. Доступны два режима:

ИЗОБРАЖЕНИЕ: Режим для ввода одного изображения.

ВИДЕО: Режим декодирования кадров видео или потока входных данных в реальном времени, например, с камеры.		 { IMAGE, VIDEO } IMAGE
l2Normalize Следует ли нормализовать возвращаемый вектор признаков с помощью L2-нормы. Используйте этот параметр только в том случае, если модель еще не содержит встроенную операцию TFLite L2_NORMALIZATION. В большинстве случаев это уже так, и L2-нормализация, таким образом, достигается посредством вывода TFLite без необходимости использования этого параметра. Boolean False
quantize Следует ли квантовать возвращаемое векторное представление в байты с помощью скалярного квантования. Предполагается, что векторные представления имеют единичную норму, поэтому гарантируется, что любое измерение будет иметь значение в диапазоне [-1.0, 1.0]. Если это не так, используйте опцию l2Normalize. Boolean False

Подготовка данных

Image Embedder может встраивать изображения в любом формате, поддерживаемом браузером. Задача также обрабатывает предварительную обработку входных данных, включая изменение размера, поворот и нормализацию значений.

Вызовы методов embed() и embedForVideo() модуля Image Embedder выполняются синхронно и блокируют поток пользовательского интерфейса. Если вы хотите извлечь векторные признаки из видеокадров, каждое встраивание будет блокировать основной поток. Этого можно избежать, реализовав веб-воркеры для выполнения методов embed() и embedForVideo() в отдельном потоке.

Запустите задачу

Компонент Image Embedder использует методы embed() (для image в режиме реального времени) и embedForVideo() (для video в режиме реального времени) для запуска вывода данных. API Image Embedder возвращает векторы встраивания для входного изображения.

Следующий код демонстрирует, как выполнить обработку с использованием модели задач:

Изображение 

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);

Обработка и отображение результатов

После выполнения операции вывода задача Image Embedder возвращает объект ImageEmbedderResult , содержащий векторы встраивания для входного изображения или кадра.

Ниже приведён пример выходных данных, полученных в результате выполнения этой задачи:

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

Этот результат был получен путем встраивания следующего изображения:

Средний план экзотической кошки.

Вы можете сравнить семантическое сходство двух векторных представлений, используя функцию ImageEmbedder.cosineSimilarity . Пример приведен в следующем коде. 

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

Пример кода Image Embedder демонстрирует, как отобразить результаты встраивания изображений, полученные в результате выполнения задачи; подробности см. в примере .