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

Для работы с ml5.js требуется подключение библиотеки через CDN или локальный пакет. Наиболее простой способ — использование

После подключения создается объект модели. Например, для классификации изображений с помощью ImageClassifier:

let classifier;

function setup() {
  classifier = ml5.imageClassifier('MobileNet', modelReady);
}

function modelReady() {
  console.log('Модель загружена и готова к использованию');
}

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

Получение данных с камеры

Для отображения результатов в реальном времени часто используется веб-камера. Подключение камеры через p5.js выглядит следующим образом:

let video;

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.size(640, 480);
  video.hide();
}

video.hide() скрывает поток камеры, чтобы управлять отрисовкой через canvas и накладывать визуализацию поверх видео.

Предсказание в реальном времени

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

function modelReady() {
  classifyVideo();
}

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

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

  console.log(results); // массив с предсказаниями
  classifyVideo(); // следующий цикл предсказания
}

Особенность: такой подход обеспечивает непрерывную работу модели без блокировки основного потока, создавая эффект реального времени.

Отображение результатов на canvas

Для визуализации предсказаний используют метод draw в p5.js. Это позволяет накладывать текст или графические элементы поверх видеопотока:

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

  if (results && results[0]) {
    fill(255, 0, 0);
    textSize(32);
    text(results[0].label, 10, height - 20);
    textSize(16);
    text('Уверенность: ' + nf(results[0].confidence, 0, 2), 10, height - 40);
  }
}

Пояснение ключевых функций:

  • fill() — задает цвет текста.
  • textSize() — размер шрифта.
  • nf() — форматирование числа для отображения с заданным количеством десятичных знаков.

Оптимизация производительности

Для повышения плавности отображения в реальном времени можно использовать следующие методы:

  1. Уменьшение размера видео: чем меньше кадр, тем быстрее обработка.

    video.size(320, 240);

  2. Регулировка частоты предсказаний: вместо вызова classifyVideo() каждый кадр, можно делать предсказания через определенные интервалы:

    setInterval(() => classifier.classify(video, gotResult), 200);

    Это снижает нагрузку на процессор и повышает стабильность отображения.

  3. Использование асинхронных функций: позволяет избежать задержек из-за блокирующих вызовов.

Визуальные эффекты для предсказаний

Реализация динамических визуализаций помогает сразу видеть изменения в результатах:

function draw() {
  image(video, 0, 0);
  
  if (results && results[0]) {
    let confidence = results[0].confidence * 100;
    fill(0, 255, 0, confidence * 2.55);
    noStroke();
    ellipse(width / 2, height / 2, confidence * 3, confidence * 3);
    
    fill(255);
    textSize(24);
    text(results[0].label, 10, 30);
  }
}

Эффект: размер и прозрачность графики зависят от уверенности модели, что делает визуализацию интуитивной.

Поддержка нескольких предсказаний

Модель возвращает массив результатов с разной уверенностью. Для отображения нескольких вариантов:

function draw() {
  image(video, 0, 0);
  
  if (results) {
    for (let i = 0; i < min(3, results.length); i++) {
      let label = results[i].label;
      let confidence = nf(results[i].confidence, 0, 2);
      text(`${i + 1}. ${label}: ${confidence}`, 10, 30 + i * 20);
    }
  }
}

Это позволяет создать более информативный интерфейс для анализа работы модели в реальном времени.

Интеграция с пользовательским интерфейсом

Можно добавлять HTML-элементы для отображения предсказаний:

let resultDiv;

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.hide();

  resultDiv = createDiv('');
  resultDiv.style('font-size', '18px');
}

function gotResult(error, results) {
  if (!error && results) {
    resultDiv.html(`Предсказание: ${results[0].label} (уверенность: ${nf(results[0].confidence, 0, 2)})`);
    classifyVideo();
  }
}

Преимущество: текстовые блоки HTML можно легко стилизовать и позиционировать независимо от canvas.

Расширение функционала

  • Объединение нескольких моделей: можно параллельно использовать классификацию изображений и распознавание позы (poseNet) для сложных интерактивных приложений.
  • Сохранение данных: результаты предсказаний можно логировать в массивы или отправлять на сервер для анализа.
  • Обработка событий: например, при распознавании определенного объекта запускать анимацию или звук.
Оглавление