Получение ограничивающих рамок (bounding boxes)

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

Детекция объектов с помощью objectDetector

ml5.js включает метод objectDetector, который упрощает использование предобученных моделей детекции объектов, например, COCO-SSD.

Пример создания детектора:

let objectDetector;
let img;

function preload() {
  img = loadImage('image.jpg');
  objectDetector = ml5.objectDetector('cocossd');
}

function setup() {
  createCanvas(640, 480);
  objectDetector.detect(img, gotResults);
}

function gotResults(error, results) {
  if (error) {
    console.error(error);
    return;
  }
  console.log(results);
}

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

  • Метод ml5.objectDetector('cocossd') возвращает объект детектора.

  • Метод detect принимает изображение или видео и функцию обратного вызова.

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

    • label — название класса объекта.
    • confidence — вероятность детекции (от 0 до 1).
    • x, y, width, height — координаты и размеры bounding box.

Структура объекта bounding box

Каждый элемент массива results имеет следующую структуру:

{
  "label": "person",
  "confidence": 0.98,
  "x": 34,
  "y": 50,
  "width": 120,
  "height": 260
}

Пояснения:

  • (x, y) — координаты верхнего левого угла рамки на изображении.
  • width и height — размеры рамки.
  • label помогает классифицировать объект.
  • confidence позволяет фильтровать низкокачественные детекции.

Визуализация ограничивающих рамок

Для отображения bounding box на canvas используется комбинация методов rect() и text():

function drawBoundingBoxes(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(255);
    textSize(16);
    text(object.label + " " + nf(object.confidence * 100, 2, 1) + "%", object.x + 5, object.y + 20);
  }
}

Особенности:

  • stroke() задаёт цвет рамки.
  • noFill() делает рамку прозрачной внутри.
  • text() выводит название объекта и вероятность детекции.
  • nf() форматирует число до нужного количества знаков после запятой.

Детекция объектов в реальном времени на видео

ml5.js позволяет использовать веб-камеру для live-детекции:

let video;
let objectDetector;
let detections = [];

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

function modelReady() {
  console.log('Model Loaded!');
  detectObjects();
}

function detectObjects() {
  objectDetector.detect(video, function(error, results) {
    if (error) {
      console.error(error);
      return;
    }
    detections = results;
    detectObjects(); // рекурсивный вызов для непрерывной детекции
  });
}

function draw() {
  image(video, 0, 0);
  drawBoundingBoxes(detections);
}

Принцип работы:

  • Метод createCapture(VIDEO) создаёт поток с веб-камеры.
  • Функция detectObjects() выполняет рекурсивное определение объектов.
  • Массив detections обновляется каждую итерацию и используется для отрисовки рамок.

Оптимизация и фильтрация

  • Для уменьшения нагрузки на браузер можно уменьшить размер видео потока с помощью video.size().
  • Фильтровать объекты по confidence:
let confidentObjects = detections.filter(obj => obj.confidence > 0.6);
  • Можно сортировать объекты по размеру рамки или вероятности:
detections.sort((a, b) => b.confidence - a.confidence);

Дополнительные возможности

  • ml5.js поддерживает работу с другими моделями, включая YOLO через ml5.objectDetector('yolo').
  • Комбинация с p5.js позволяет создавать интерактивные визуализации, такие как игры, приложения дополненной реальности и системы аналитики видео.
  • Bounding boxes можно использовать для последующей обработки, например, для отслеживания движения объекта или подсчёта количества объектов.

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

Оглавление