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

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

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

Пример кода

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

Настраивать

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

JavaScript-пакеты

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

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

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.js"
    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. Используйте эту опцию, только если модель еще не содержит встроенный L2_NORMALIZATION TFLite Op. В большинстве случаев это уже так, и нормализация L2, таким образом, достигается посредством вывода TFLite без необходимости использования этой опции. Boolean False
quantize Следует ли квантовать возвращенное внедрение в байты посредством скалярного квантования. Неявно предполагается, что вложения имеют единичную норму, и поэтому любое измерение гарантированно имеет значение в [-1.0, 1.0]. Если это не так, используйте опцию l2Normalize. Boolean False

Подготовьте данные

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

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

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

Средство внедрения изображений использует методы 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 демонстрирует, как отображать результаты внедрения, возвращенные из задачи. Подробности см. в примере кода .