COCO-SSD

Для работы с моделью COCO-SSD в TensorFlow.js используется пакет @tensorflow-models/coco-ssd. Эта модель позволяет выполнять детекцию объектов на изображениях или видео в браузере или Node.js. Подключение производится через npm:

import * as cocoSsd from '@tensorflow-models/coco-ssd';
import * as tf from '@tensorflow/tfjs';

Инициализация модели выполняется асинхронно методом load():

const model = await cocoSsd.load();

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


Структура и принципы работы модели

COCO-SSD основана на архитектуре Single Shot Multibox Detector (SSD) с предобучением на датасете COCO (Common Objects in Context). Основные принципы работы:

  • Одноэтапная детекция: модель сразу предсказывает координаты ограничивающих рамок и классы объектов без отдельного этапа генерации регионов.
  • Множественные масштабы: SSD обрабатывает изображение на нескольких уровнях с разными масштабами, что улучшает распознавание объектов разных размеров.
  • Предсказание классов и координат: каждая якорная рамка (anchor box) оценивается для вероятности принадлежности к классу и уточнения позиции.

Использование модели для изображений

Для распознавания объектов на изображении используется метод detect():

const img = document.getElementById('image'); // HTMLImageElement
const predictions = await model.detect(img);

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

  • class — название класса объекта (например, “person”, “bottle”).
  • score — уверенность модели в предсказании (значение от 0 до 1).
  • bbox — массив [x, y, width, height], задающий прямоугольную рамку объекта.

Пример визуализации:

predictions.forEach(prediction => {
  const [x, y, width, height] = prediction.bbox;
  console.log(`Объект: ${prediction.class}, уверенность: ${prediction.score}`);
  // можно использовать canvas для отрисовки рамок
});

Детекция объектов на видео

Для работы с видеопотоком используется цикл с асинхронным вызовом detect():

const video = document.getElementById('video'); // HTMLVideoElement

async function detectFrame() {
  const predictions = await model.detect(video);
  drawPredictions(predictions); // функция для визуализации
  requestAnimationFrame(detectFrame);
}

video.onloadedd ata = () => {
  detectFrame();
};

Важно учитывать производительность: детекция на каждом кадре может быть ресурсоемкой. Рекомендуется снижать разрешение видео или уменьшать частоту вызовов detect().


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

Преобразование изображений: для ускорения обработки можно масштабировать входное изображение или конвертировать его в tf.tensor:

const tensor = tf.browser.fromPixels(img).resizeBilinear([300, 300]).expandDims(0);

Порог уверенности: для фильтрации маловероятных предсказаний удобно использовать score:

const threshold = 0.5;
const filteredPredictions = predictions.filter(p => p.score > threshold);

Использование WebGL и WebAssembly: TensorFlow.js автоматически выбирает бэкенд (webgl для ускорения на GPU, wasm для CPU). Можно явно переключать:

await tf.setBackend('webgl');
await tf.ready();

Интеграция с Canvas для визуализации

Для отображения предсказаний используется элемент <canvas>:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function drawPredictions(predictions) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  predictions.forEach(pred => {
    const [x, y, width, height] = pred.bbox;
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 2;
    ctx.strokeRect(x, y, width, height);
    ctx.fillStyle = 'red';
    ctx.font = '16px Arial';
    ctx.fillText(`${pred.class} (${(pred.score*100).toFixed(1)}%)`, x, y > 10 ? y - 5 : y + 15);
  });
}

Эта визуализация позволяет отображать рамки и подписи прямо поверх изображения или видео.


Применение в реальных задачах

COCO-SSD подходит для широкого спектра задач:

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

Модель не требует обучения с нуля, что значительно ускоряет внедрение решений.


Ограничения модели

  • Размер объектов: маленькие объекты иногда распознаются плохо из-за ограничений SSD.
  • Чувствительность к освещению: плохое освещение снижает точность.
  • Фокус на 80 классах COCO: объекты вне датасета не будут распознаны.

Для улучшения результатов возможно сочетание с другими моделями или дополнительное обучение на собственных данных с использованием transfer learning.


Работа с Node.js

TensorFlow.js и COCO-SSD поддерживают Node.js, что позволяет обрабатывать изображения на сервере:

import * as cocoSsd from '@tensorflow-models/coco-ssd';
import * as tf from '@tensorflow/tfjs-node';
import { readFileSync } from 'fs';
import { decodeJpeg } from '@tensorflow/tfjs-node';

const imageBuffer = readFileSync('image.jpg');
const tfImage = decodeJpeg(imageBuffer);
const model = await cocoSsd.load();
const predictions = await model.detect(tfImage);
console.log(predictions);

Серверная обработка особенно полезна при высоком разрешении изображений или необходимости параллельной работы с большим количеством файлов.