Источники данных: изображения, веб-камера, видеофайлы

Подключение и использование изображений

В ml5.js работа с изображениями является фундаментальной частью для задач классификации, генерации и трансформации визуальных данных. Основные форматы изображений — JPEG и PNG. Для загрузки изображения используется объект HTMLImageElement или тег <img> в HTML, после чего изображение передается в модель ml5.

Пример создания и загрузки изображения для классификации:

let classifier;
let img;

function preload() {
  img = loadImage('path/to/image.jpg');
  classifier = ml5.imageClassifier('MobileNet');
}

function setup() {
  createCanvas(400, 400);
  classifier.classify(img, gotResult);
}

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

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

  • Изображения должны быть доступны по корректному пути или URL.
  • ml5.js автоматически преобразует изображение в формат, необходимый для модели.
  • ml5.imageClassifier может использовать предобученные модели, такие как MobileNet, или пользовательские модели TensorFlow.js.

Работа с веб-камерой

Использование камеры позволяет получать поток изображений в реальном времени. В ml5.js поток захватывается через объект p5.Video, который обеспечивает удобный интерфейс для интеграции с canvas.

Пример захвата видео с камеры и классификации кадров:

let classifier;
let video;

function setup() {
  createCanvas(400, 400);
  video = createCapture(VIDEO);
  video.size(400, 400);
  video.hide();
  classifier = ml5.imageClassifier('MobileNet', video, modelReady);
}

function modelReady() {
  console.log('Модель загружена');
  classifyVideo();
}

function classifyVideo() {
  classifier.classify(gotResult);
}

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

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

Особенности работы с веб-камерой:

  • Метод video.hide() скрывает HTML-элемент видео, оставляя только canvas для отображения.
  • Классификация выполняется в цикле, что обеспечивает непрерывное распознавание объектов на видео.
  • Возможность использовать как предобученные модели, так и кастомные.

Использование видеофайлов

Для анализа готовых видео можно применять createVideo() из библиотеки p5.js. Видео можно воспроизводить в цикле или по кадрам, извлекая отдельные фреймы для обработки ml5.js.

Пример обработки видеофайла:

let classifier;
let video;

function setup() {
  createCanvas(400, 400);
  video = createVideo(['path/to/video.mp4'], videoLoaded);
  video.size(400, 400);
  video.hide();
}

function videoLoaded() {
  classifier = ml5.imageClassifier('MobileNet', video, modelReady);
  video.loop();
}

function modelReady() {
  classifyVideo();
}

function classifyVideo() {
  classifier.classify(gotResult);
}

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

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

Особенности работы с видеофайлами:

  • Видео можно запускать в цикле (loop()) или воспроизводить кадр за кадром с помощью time() и pause().
  • Каждое изображение кадра автоматически конвертируется в формат, совместимый с моделью ml5.js.
  • Видеофайлы требуют корректного кодека и формата, совместимого с браузером.

Преобразование и подготовка данных

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

  • Изменение размера: resize() в p5.js позволяет привести изображения к нужной ширине и высоте.
  • Конвертация цвета: filter(GRAY) или преобразование в RGB при необходимости.
  • Проверка прозрачности и альфа-канала: модели могут некорректно работать с изображениями с альфа-каналом.

Интеграция потоков данных

Мгновенная обработка данных из разных источников требует согласования кадров с моделью:

  • Синхронизация: классификация должна выполняться после загрузки или захвата кадра.
  • Буферизация: для видео и камеры может быть полезно использовать буфер кадров, чтобы избежать пропусков.
  • Асинхронность: методы ml5.js возвращают результаты через колбэки, что важно учитывать при построении интерфейса или визуализации.

Итоговая структура обработки

  1. Загрузка источника — изображение, камера или видео.
  2. Подготовка данных — изменение размера, цвет, нормализация.
  3. Создание модели — предобученная или кастомная.
  4. Классификация/анализ кадра — через classifier.classify().
  5. Обработка результата — вывод на консоль, визуализация или управление интерфейсом.
  6. Повторная классификация (для видео и камеры) — рекурсивно через колбэк gotResult.

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

Оглавление