Сегментация персоны на фоне

ml5.js — это библиотека высокого уровня для работы с машинным обучением в браузере на JavaScript. Одной из ключевых возможностей библиотеки является сегментация объектов в реальном времени, включая выделение человека на фоне (person segmentation). Этот инструмент позволяет создавать интерактивные визуальные эффекты, заменять фон, накладывать фильтры и интегрировать компьютерное зрение в веб-приложения без глубокого погружения в TensorFlow.js.

Подключение библиотеки и подготовка окружения

Для работы с ml5.js необходимо подключить библиотеку через CDN:

Использование p5.js обеспечивает удобное управление холстом (canvas) и камерой (video capture).

Создание видеопотока с камеры выполняется через объект createCapture():

let video;

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.size(width, height);
  video.hide();
}

Важно скрывать исходное видео через video.hide(), чтобы работать только с обработанным изображением на холсте.

Инициализация модели сегментации

ml5.js предоставляет модель bodyPix, которая отвечает за сегментацию человека на изображении. Инициализация выполняется с использованием объекта ml5.bodyPix:

let bodypix;

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.size(width, height);
  video.hide();

  bodypix = ml5.bodyPix(video, modelReady);
}

function modelReady() {
  console.log('Модель BodyPix загружена');
}

Ключевые моменты:

  • Модель загружается асинхронно.
  • До завершения загрузки нельзя запускать сегментацию.
  • После загрузки вызывается колбэк modelReady, сигнализирующий о готовности модели к работе.

Настройка параметров сегментации

bodyPix.segment принимает объект с параметрами, влияющими на качество и скорость сегментации. Основные параметры:

  • outputStride — уменьшает детализацию для ускорения работы (8, 16, 32).
  • segmentationThreshold — порог уверенности для распознавания человека (0–1).
  • multiplier — масштаб модели, влияет на скорость и точность (0.50, 0.75, 1.0).

Пример:

const options = {
  flipHorizontal: true,
  internalResolution: 'medium',
  segmentationThreshold: 0.5
};

bodypix.segmentWithParts(video, options, gotResults);

Обработка результатов сегментации

Функция обратного вызова gotResults получает объект с маской сегментации:

function gotResults(error, result) {
  if (error) {
    console.error(error);
    return;
  }
  
  // result — объект с информацией о маске и частях тела
  drawSegmentation(result);
  bodypix.segmentWithParts(video, options, gotResults); // вызов для следующего кадра
}

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

Визуализация сегментации

Для создания эффекта выделения человека на фоне используется маска сегментации, где пиксели человека окрашиваются в один цвет, а фон — в другой:

function drawSegmentation(segmentation) {
  loadPixels();
  const mask = segmentation.data; // массив с маской
  
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const index = (y * width + x) * 4;
      if (mask[y * width + x] === 0) {
        // фон — затемнение
        pixels[index] = pixels[index] * 0.5;
        pixels[index+1] = pixels[index+1] * 0.5;
        pixels[index+2] = pixels[index+2] * 0.5;
      }
      // тело остаётся без изменений
    }
  }
  updatePixels();
}

Особенности визуализации:

  • mask содержит бинарные значения (0 — фон, 1 — человек).
  • Пиксельное редактирование позволяет применять различные эффекты, например, замену фона, размытие или изменение цвета.
  • Для сложной сегментации можно использовать segmentWithParts, чтобы работать с частями тела отдельно (руки, ноги, лицо).

Эффекты и фильтры на основе сегментации

Сегментация открывает множество возможностей для интерактивных приложений:

  1. Размытие фона
if (mask[y * width + x] === 0) {
  // применяем фильтр размытия для пикселей фона
}
  1. Замена фона
  • Загружается новое изображение.
  • Пиксели фона заменяются пикселями из фонового изображения.
  1. Изменение цвета человека
  • Используется маска для выделения человека.
  • Цветовая коррекция применяется только на области человека.

Оптимизация производительности

Для работы в реальном времени на веб-странице важно учитывать нагрузку на CPU/GPU:

  • Использовать меньшее разрешение internalResolution.
  • Увеличивать outputStride для ускорения сегментации.
  • Применять визуальные эффекты не на полном размере видео, а на уменьшенной копии, затем масштабировать на холст.

Совместимость с мобильными устройствами

BodyPix в ml5.js работает в мобильных браузерах, но нужно учитывать:

  • Ограничение на FPS из-за слабого GPU.
  • Возможность снижения качества для плавного отображения.
  • Использование flipHorizontal: true для корректного зеркального отображения камеры.

Пример интеграции с интерактивным интерфейсом

Можно создавать веб-приложения, где пользователь управляет фильтрами через ползунки и кнопки:

let blurSlider;

function setupUI() {
  blurSlider = createSlider(0, 20, 5);
}

function drawSegmentation(segmentation) {
  let blurAmount = blurSlider.value();
  // применяем размытие к фону с использованием blurAmount
}

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

Оглавление