CocoSsd — это модель для объектного детектирования, основанная на архитектуре Single Shot Multibox Detector (SSD) с использованием датасета COCO. Модель позволяет находить и классифицировать объекты на изображениях и видеопотоках в реальном времени. В библиотеке ml5.js CocoSsd реализован с упрощённым API, что делает его удобным для использования в веб-приложениях на JavaScript.
Модель SSD выполняет детектирование объектов без предварительного сканирования изображения с помощью регионов (region proposals). Основные компоненты работы CocoSsd:
Фиксированные рамки (anchors) Для каждого участка изображения модель использует набор предопределённых прямоугольных рамок разных размеров и соотношений сторон. Эти рамки позволяют покрыть весь объектный пространственный диапазон.
Особенности на разных масштабах (multi-scale feature maps) Слой свёрточной сети извлекает признаки изображения на разных уровнях разрешения. Это позволяет детектировать объекты различных размеров — от маленьких до больших.
Регрессия и классификация Каждая рамка проходит через два предсказательных блока: один отвечает за координаты рамки (регрессия), другой — за вероятность принадлежности к определённому классу (классификация).
Non-Maximum Suppression (NMS) Для устранения дублирующихся рамок применяется алгоритм NMS, который оставляет только рамку с наибольшей вероятностью для каждого объекта.
Для работы с 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 уведомляет о завершении загрузки
модели.После инициализации модели можно передавать изображения, видеопотоки или 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 рекурсивно создаёт непрерывный поток
детектирования.video.hide() позволяет
визуализировать вывод только через canvas, улучшая контроль над
графикой.Минимальная вероятность
(minConfidence) Для фильтрации ложных срабатываний
можно задавать минимальную вероятность распознавания объектов:
detector.detect(video, {scoreThreshold: 0.5}, callback);Обработка больших изображений Модель SSD требует больше ресурсов при высоком разрешении. Рекомендуется масштабировать изображение или видео до 640x480 или аналогичного размера для оптимальной производительности.
Асинхронная обработка Ml5.js поддерживает промисы:
detector.detect(video).then(results => drawVideoResults(results));
Это позволяет интегрировать детектирование с современными потоками данных без блокировки интерфейса.
CocoSsd можно комбинировать с другими библиотеками и моделями ml5.js, например:
CocoSsd в ml5.js обеспечивает баланс между точностью и производительностью, что делает его эффективным инструментом для веб-разработки с машинным обучением.