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

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

Пример кода

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

Настраивать

В этом разделе описаны ключевые шаги по настройке среды разработки и проектов кода специально для использования Image Segmenter. Общую информацию о настройке среды разработки для использования задач 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/

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

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

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

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

runningMode = "IMAGE";

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

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

Более подробную информацию о создании задачи сегментации изображений см. в примере кода .

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

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

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

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

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

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

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

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

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

Изображение 

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

Видео 

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Более подробную информацию о реализации задачи сегментации изображений см. в примере .

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

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

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

Уверенность в категории

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

Две девочки едут верхом на лошади, и одна девочка идёт рядом с лошадью.Маска изображения, которая обрисовывает контуры девушек и лошади с предыдущей фотографии. Левая половина контура изображения захвачена, а правая половина — нет.

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

Значение категории

На следующих изображениях представлена ​​визуализация результатов выполнения задачи для маски значений категорий. Диапазон маски категорий — [0, 255] , и каждое значение пикселя представляет собой индекс выигрышной категории в выходных данных модели. Индекс выигрышной категории — это категория с наивысшим баллом среди категорий, которые модель может распознать.

Две девочки едут верхом на лошади, и одна девочка идёт рядом с лошадью.Маска изображения, которая обрисовывает контуры девочек и лошади с предыдущего изображения. Контуры всех трех девочек и лошади точно отображены с помощью маски.

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

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