Для работы с моделью 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). Основные принципы работы:
Для распознавания объектов на изображении используется метод
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>:
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 подходит для широкого спектра задач:
Модель не требует обучения с нуля, что значительно ускоряет внедрение решений.
Для улучшения результатов возможно сочетание с другими моделями или дополнительное обучение на собственных данных с использованием transfer learning.
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);
Серверная обработка особенно полезна при высоком разрешении изображений или необходимости параллельной работы с большим количеством файлов.