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

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

Пример кода

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

Настраивать

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

JavaScript-пакеты

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

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

npm install --save @mediapipe/tasks-vision

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

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

Модель

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

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

<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.	Код региона	ru

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

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

Вызовы методов сегментации 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);

Более полную реализацию запуска задачи Interactive Image Segmenter смотрите в примере кода .

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

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

В следующих разделах дополнительно объясняются выходные данные этой задачи:

Маска категории

На следующих изображениях показана визуализация результатов задачи для маски значений категории с указанием интересующей области. Каждый пиксель представляет собой значение uint8 , указывающее, является ли пиксель частью объекта, расположенного в интересующей области. Черно-белый кружок на втором изображении указывает выбранную область интереса.

Вывод исходного изображения и маски категории. Исходное изображение из набора данных Pascal VOC 2012 .

Маска уверенности

Выходные данные маски доверия содержат значения с плавающей запятой между [0, 1] для каждого входного канала изображения. Более высокие значения указывают на более высокую уверенность в том, что пиксель изображения является частью объекта, расположенного в интересующей области.

Пример кода интерактивного сегментатора изображений демонстрирует, как отображать результаты классификации, возвращенные из задачи. Подробности см. в примере кода .