Представляем LiteRT : высокопроизводительную среду выполнения Google для искусственного интеллекта на устройстве, ранее известную как TensorFlow Lite. Узнать больше

Эта страница переведена с помощью Cloud Translation API.

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

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

Пример кода

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

Настраивать

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

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

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

Создать задачу

Используйте одну из функций createFrom...() Image Segmenter, чтобы подготовить задачу к выполнению выводов. Используйте функцию 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();

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

Варианты конфигурации

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

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

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

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

Вызовы методов сегментации segment() изображений и segmentForVideo() выполняются синхронно и блокируют поток пользовательского интерфейса. Если вы сегментируете объекты в кадрах видео с камеры устройства, каждая задача сегментации блокирует основной поток. Вы можете предотвратить это, внедрив веб-воркеры для запуска 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();
  });
}

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

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

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

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

Категория доверия

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

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

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

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

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

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

Пример кода

Настраивать

JavaScript-пакеты

npm install --save @mediapipe/tasks-vision

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

Модель

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

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

Создать задачу

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

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

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

Варианты конфигурации

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

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

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

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

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

Изображение

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

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

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

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

Категория доверия

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

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

Пример кода

Настраивать

JavaScript-пакеты

npm install --save @mediapipe/tasks-vision

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

Модель

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

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

Создать задачу

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

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

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

Варианты конфигурации

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

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

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

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

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

Изображение

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

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

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

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

Категория доверия

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

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

Пример кода

Настраивать

JavaScript-пакеты

npm install --save @mediapipe/tasks-vision

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

Модель

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

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

Создать задачу

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

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

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

Варианты конфигурации

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

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

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

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

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

Изображение

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

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

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

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

Категория доверия

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

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