Задача 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 смотрите в примере кода .
Варианты конфигурации
Эта задача имеет следующие параметры конфигурации для веб-приложений:
| Название опции | Описание | Диапазон значений | Значение по умолчанию |
|---|---|---|---|
runningMode | Устанавливает режим выполнения задачи. Есть два режима: ИЗОБРАЖЕНИЕ: Режим для ввода одного изображения. ВИДЕО: режим для декодированных кадров видео или прямой трансляции входных данных, например с камеры. | { IMAGE, VIDEO } | IMAGE |
outputCategoryMask | Если установлено значение True , выходные данные включают маску сегментации в виде изображения uint8, где каждое значение пикселя указывает значение выигрышной категории. | { True, False } | False | outputConfidenceMasks | Если установлено значение True , выходные данные включают маску сегментации в виде изображения значения с плавающей запятой, где каждое значение с плавающей запятой представляет карту оценки достоверности категории. | { True, False } | True |
displayNamesLocale | Задает язык меток, которые будут использоваться для отображаемых имен, представленных в метаданных модели задачи, если они доступны. По умолчанию en английский язык. Вы можете добавить локализованные метки к метаданным пользовательской модели с помощью API записи метаданных TensorFlow Lite. | Код региона | ru |
Подготовьте данные
Image Segmenter может сегментировать объекты на изображениях в любом формате, поддерживаемом хост-браузером. Задача также выполняет предварительную обработку входных данных, включая изменение размера, поворот и нормализацию значений.
Вызовы методов сегментации изображений segment() и segmentForVideo() выполняются синхронно и блокируют поток пользовательского интерфейса. Если вы сегментируете объекты в кадрах видео с камеры устройства, каждая задача сегментации блокирует основной поток. Вы можете предотвратить это, внедрив веб-воркеры для запуска segment() и segmentForVideo() в другом потоке.
Запустить задачу
Сегментатор изображений использует метод segment() в режиме изображения и метод segmentForVideo() в режиме video для запуска логических выводов. Сегментатор изображений возвращает обнаруженные сегменты в виде данных изображения в функцию обратного вызова, которую вы установили при выполнении вывода для задачи.
Следующий код демонстрирует, как выполнить обработку с помощью модели задачи:
Изображение
const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);
Video
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 .
Пример кода сегментатора изображений демонстрирует, как отображать результаты сегментации, возвращенные из задачи. Подробности см. в примере кода .