Сбор обучающих примеров через веб-камеру

Библиотека ml5.js предоставляет высокоуровневый интерфейс для работы с машинным обучением в браузере, используя возможности TensorFlow.js. Один из ключевых этапов создания моделей — сбор и подготовка данных. В веб-приложениях наиболее удобным источником данных может быть веб-камера, которая позволяет динамически собирать изображения для обучения моделей классификации, распознавания поз или жестов.

Инициализация веб-камеры

Для работы с камерой используется класс p5.js — createCapture(). Он позволяет получить поток видео и выводить его на холст. Пример инициализации:

let video;

function setup() {
    createCanvas(640, 480);
    video = createCapture(VIDEO);
    video.size(640, 480);
    video.hide(); // скрывает видео для рисования на canvas
}

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

  • Метод createCapture(VIDEO) возвращает объект p5.MediaElement, который можно использовать для передачи данных в ml5.
  • Размер видео желательно задавать явно для совместимости с моделями, которые требуют фиксированные входные размеры изображений.

Создание классификатора изображений

Ml5.js предоставляет ImageClassifier и KNNImageClassifier. Для интерактивного сбора данных чаще используется KNN-классификатор, так как он позволяет добавлять новые метки и примеры «на лету», без переобучения модели с нуля.

let knnClassifier = ml5.KNNImageClassifier(video, () => {
    console.log('KNN Classifier готов к сбору данных');
});

Пояснения:

  • При передаче видео в конструктор классификатора ml5.js автоматически извлекает из него тензоры изображений для обучения.
  • KNNImageClassifier использует внутренние функции извлечения признаков (feature extractor) на основе предобученной модели MobileNet.

Добавление обучающих примеров

После инициализации классификатора можно добавлять примеры для каждой метки. Важно собирать достаточное количество изображений для стабильного распознавания.

function addExample(label) {
    knnClassifier.addImage(video, label);
    console.log(`Добавлен пример для метки: ${label}`);
}

Рекомендации:

  • Стараться собирать данные при различном освещении и с разных углов, чтобы повысить устойчивость модели.
  • Использовать несколько десятков примеров на каждую метку как минимум. Для KNN-модели увеличение количества примеров напрямую улучшает точность.

Визуализация потока и обратной связи

Для удобства часто создается визуальный интерфейс, отображающий видео и количество примеров для каждой метки.

function draw() {
    image(video, 0, 0);
    fill(255);
    textSize(16);
    text(`Примеры "рука": ${knnClassifier.getCount('рука') || 0}`, 10, height - 40);
    text(`Примеры "стоп": ${knnClassifier.getCount('стоп') || 0}`, 10, height - 20);
}

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

  • Метод getCount(label) возвращает количество примеров, добавленных для конкретной метки.
  • Визуальная обратная связь помогает контролировать баланс классов и избегать недостатка данных для одной метки.

Предварительная обработка данных

Встроенный feature extractor автоматически нормализует изображения и преобразует их в тензоры, но при необходимости можно добавлять собственную обработку:

  • Изменение размеров изображений (resize).
  • Преобразование в оттенки серого.
  • Удаление фоновых шумов с использованием пороговой фильтрации или сегментации.

Интерактивная работа с метками

Веб-приложение может предоставлять кнопки для добавления примеров и выбора меток:

document.getElementById('addHand').addEventListener('click', () => addExample('рука'));
document.getElementById('addStop').addEventListener('click', () => addExample('стоп'));

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

Особенности и ограничения

  • Производительность: обработка видео в реальном времени требует оптимизации, особенно на слабых устройствах. Для снижения нагрузки можно уменьшить размер кадров (video.size(320, 240)).
  • Качество данных: чем разнообразнее изображения (разные позиции, освещение, фон), тем устойчивее классификатор.
  • Сохранение модели: ml5.js позволяет экспортировать собранные данные и метки, чтобы использовать их позже без повторного сбора.
knnClassifier.save('myKNNData.json');
  • Загрузка ранее сохраненных данных:
knnClassifier.load('myKNNData.json', () => {
    console.log('Данные загружены');
});

Итоговая схема сбора данных через веб-камеру

  1. Подключение и инициализация видеопотока.
  2. Создание KNN-классификатора с feature extractor.
  3. Добавление примеров для каждой метки.
  4. Визуализация текущего состояния и обратной связи.
  5. Сохранение и загрузка обучающих данных для повторного использования.
  6. При необходимости — дополнительная предварительная обработка изображений для повышения качества модели.

Эта структура позволяет создавать интерактивные приложения для распознавания жестов, объектов или поз, полностью работая в браузере и используя возможности ml5.js для быстрого прототипирования.

Оглавление