CocoSsd: принцип работы и реализация в ml5.js

CocoSsd — это модель для объектного детектирования, основанная на архитектуре Single Shot Multibox Detector (SSD) с использованием датасета COCO. Модель позволяет находить и классифицировать объекты на изображениях и видеопотоках в реальном времени. В библиотеке ml5.js CocoSsd реализован с упрощённым API, что делает его удобным для использования в веб-приложениях на JavaScript.


Архитектура и принцип работы

Модель SSD выполняет детектирование объектов без предварительного сканирования изображения с помощью регионов (region proposals). Основные компоненты работы CocoSsd:

  1. Фиксированные рамки (anchors) Для каждого участка изображения модель использует набор предопределённых прямоугольных рамок разных размеров и соотношений сторон. Эти рамки позволяют покрыть весь объектный пространственный диапазон.

  2. Особенности на разных масштабах (multi-scale feature maps) Слой свёрточной сети извлекает признаки изображения на разных уровнях разрешения. Это позволяет детектировать объекты различных размеров — от маленьких до больших.

  3. Регрессия и классификация Каждая рамка проходит через два предсказательных блока: один отвечает за координаты рамки (регрессия), другой — за вероятность принадлежности к определённому классу (классификация).

  4. Non-Maximum Suppression (NMS) Для устранения дублирующихся рамок применяется алгоритм NMS, который оставляет только рамку с наибольшей вероятностью для каждого объекта.


Инициализация CocoSsd в ml5.js

Для работы с CocoSsd необходимо подключить библиотеку ml5.js и использовать объект ml5.objectDetector. Инициализация выглядит следующим образом:

let detector;

function setup() {
  createCanvas(640, 480);
  detector = ml5.objectDetector('cocossd', modelReady);
}

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

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

  • Метод ml5.objectDetector создаёт экземпляр модели с предустановленными параметрами.
  • Колбэк modelReady уведомляет о завершении загрузки модели.
  • По умолчанию используется стандартная версия модели CocoSsd, оптимизированная для браузера.

Детектирование объектов на изображении

После инициализации модели можно передавать изображения, видеопотоки или canvas для обнаружения объектов.

function detectObjects(img) {
  detector.detect(img, function(err, results) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(results);
    drawResults(results);
  });
}

function drawResults(results) {
  for (let i = 0; i < results.length; i++) {
    let object = results[i];
    stroke(0, 255, 0);
    strokeWeight(2);
    noFill();
    rect(object.x, object.y, object.width, object.height);
    noStroke();
    fill(0, 255, 0);
    textSize(16);
    text(object.label + ' ' + nf(object.confidence * 100, 2, 1) + '%', object.x + 5, object.y + 20);
  }
}

Пояснения к коду:

  • detector.detect принимает изображение или видео и возвращает массив объектов с координатами и вероятностями.

  • Каждый объект содержит следующие свойства:

    • label — название класса объекта;
    • confidence — вероятность принадлежности к классу;
    • x, y, width, height — координаты ограничивающего прямоугольника.
  • Функция drawResults визуализирует результаты на canvas с помощью методов библиотеки p5.js.


Обработка видеопотока в реальном времени

Для работы с веб-камерой используется объект createCapture из p5.js. Обнаружение объектов выполняется циклически, чтобы обработка происходила в реальном времени:

let video;

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.size(640, 480);
  video.hide();
  detector = ml5.objectDetector('cocossd', modelReady);
}

function modelReady() {
  detectVideo();
}

function detectVideo() {
  detector.detect(video, function(err, results) {
    if (err) {
      console.error(err);
      return;
    }
    drawVideoResults(results);
    detectVideo();
  });
}

function drawVideoResults(results) {
  image(video, 0, 0);
  for (let i = 0; i < results.length; i++) {
    let object = results[i];
    stroke(255, 0, 0);
    strokeWeight(2);
    noFill();
    rect(object.x, object.y, object.width, object.height);
    noStroke();
    fill(255, 0, 0);
    textSize(16);
    text(object.label + ' ' + nf(object.confidence * 100, 2, 1) + '%', object.x + 5, object.y + 20);
  }
}

Особенности обработки видео:

  • Вызов detectVideo рекурсивно создаёт непрерывный поток детектирования.
  • Производительность модели позволяет обрабатывать кадры с частотой до 10–15 fps на слабых устройствах и выше на мощных.
  • Скрытие видео с помощью video.hide() позволяет визуализировать вывод только через canvas, улучшая контроль над графикой.

Настройка параметров и оптимизация

  • Минимальная вероятность (minConfidence) Для фильтрации ложных срабатываний можно задавать минимальную вероятность распознавания объектов:

    detector.detect(video, {scoreThreshold: 0.5}, callback);
  • Обработка больших изображений Модель SSD требует больше ресурсов при высоком разрешении. Рекомендуется масштабировать изображение или видео до 640x480 или аналогичного размера для оптимальной производительности.

  • Асинхронная обработка Ml5.js поддерживает промисы:

    detector.detect(video).then(results => drawVideoResults(results));

    Это позволяет интегрировать детектирование с современными потоками данных без блокировки интерфейса.


Совместимость с другими моделями ml5.js

CocoSsd можно комбинировать с другими библиотеками и моделями ml5.js, например:

  • PoseNet — для определения поз человека и отслеживания объектов в связке с движением.
  • FaceApi — для распознавания лиц и детектирования их в кадре, вместе с объектами CocoSsd.
  • Image Classification — для уточнения класса объектов, найденных CocoSsd, при необходимости более точной классификации.

Практические сценарии применения

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

CocoSsd в ml5.js обеспечивает баланс между точностью и производительностью, что делает его эффективным инструментом для веб-разработки с машинным обучением.