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

Задача интерактивного сегментирования изображений MediaPipe принимает местоположение на изображении, оценивает границы объекта в этом месте и возвращает сегментацию объекта в виде данных изображения. В этих инструкциях показано, как использовать интерактивный сегментатор изображений для приложений Node и веб-приложений. Для получения дополнительной информации о возможностях, моделях и параметрах конфигурации этой задачи см. раздел «Обзор» .

Пример кода

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

Настраивать

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

пакеты JavaScript

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

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

npm install --save @mediapipe/tasks-vision

Если вы хотите импортировать код задачи через службу сети доставки контента (CDN), добавьте следующий код в файл. тег в вашем HTML-файле:

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

Модель

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

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

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

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

Используйте одну из функций createFrom...() интерактивного сегментатора изображений, чтобы подготовить задачу к выполнению выводов. Используйте функцию createFromModelPath() с относительным или абсолютным путем к файлу обученной модели. Если ваша модель уже загружена в память, вы можете использовать метод createFromModelBuffer() .

Приведённый ниже пример кода демонстрирует использование функции createFromOptions() для настройки задачи. Функция createFromOptions позволяет настраивать интерактивный сегментатор изображений с помощью параметров конфигурации. Дополнительную информацию о параметрах конфигурации см. в разделе «Параметры конфигурации» .

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

async function createSegmenter() {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

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

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

Название варианта	Описание	Диапазон значений	Значение по умолчанию
`outputCategoryMask`	Если установлено значение `True` , выходные данные включают маску сегментации в виде изображения типа uint8, где значение каждого пикселя указывает, является ли пиксель частью объекта, расположенного в интересующей области.	{ `True, False` }	`False`
`outputConfidenceMasks`	Если установлено значение `True` , выходные данные включают маску сегментации в виде изображения с плавающей запятой, где каждое значение с плавающей запятой представляет собой степень уверенности в том, что пиксель является частью объекта, расположенного в интересующей области.	{ `True, False` }	`True`
`displayNamesLocale`	Задает язык меток, используемых для отображаемых имен, указанных в метаданных модели задачи, если таковые имеются. По умолчанию используется английский `en` ). Вы можете добавить локализованные метки в метаданные пользовательской модели, используя API TensorFlow Lite Metadata Writer.	Код локали	эн

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

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

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

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

Интерактивный сегментатор изображений использует метод segment() для запуска вывода результатов. Интерактивный сегментатор изображений возвращает обнаруженные сегменты в виде данных изображения в функцию обратного вызова, которую вы задаете при выполнении вывода результатов для данной задачи.

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

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);