Классификация статичного изображения

Для работы с библиотекой ml5.js необходимо подключить саму библиотеку и, при необходимости, библиотеку p5.js для упрощённой работы с графикой и DOM-элементами. Подключение осуществляется через CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ml5/0.12.2/ml5.min.js"></script>

После подключения создаётся элемент <canvas> для отображения изображения или <img> для загрузки статичного изображения. Важно убедиться, что изображение загружено перед передачей в модель, иначе классификация не будет выполнена корректно.

Загрузка предобученной модели

ml5.js предоставляет удобный интерфейс для работы с предобученными моделями через ml5.imageClassifier. Наиболее часто используются модели:

  • MobileNet — компактная и быстрая модель для общего распознавания объектов.
  • DarkNet/YOLO — для задач с более точным распознаванием и локализацией объектов.
  • Custom модели — обученные через Teachable Machine или TensorFlow.js.

Пример загрузки модели MobileNet:

let classifier;

function preload() {
  classifier = ml5.imageClassifier('MobileNet');
}

Использование preload() гарантирует, что модель будет полностью загружена до выполнения кода, связанного с классификацией.

Загрузка и подготовка изображения

Для корректной работы классификатора изображение должно быть передано как DOM-элемент или объект p5.Image. Пример загрузки через p5.js:

let img;

function preload() {
  img = loadImage('image.jpg');
}

function setup() {
  createCanvas(400, 400);
  image(img, 0, 0, width, height);
}

Важно учитывать масштабирование: некоторые модели требуют, чтобы изображение имело определённый размер или пропорции. MobileNet автоматически масштабирует изображение до 224x224 пикселей.

Выполнение классификации

Классификация вызывается методом classify, который принимает изображение и функцию обратного вызова:

function classifyImage() {
  classifier.classify(img, (error, results) => {
    if (error) {
      console.error(error);
      return;
    }
    console.log(results);
  });
}

Результат results представляет собой массив объектов с полями:

  • label — название класса, определённого моделью.
  • confidence — вероятность принадлежности изображения этому классу (от 0 до 1).

Пример обработки результатов:

results.forEach(result => {
  console.log(`Класс: ${result.label}, вероятность: ${(result.confidence * 100).toFixed(2)}%`);
});

Визуализация результатов

Для наглядного представления результатов можно выводить название класса и вероятность прямо на канвасе:

function draw() {
  image(img, 0, 0, width, height);
  if (results) {
    fill(255, 0, 0);
    textSize(20);
    textAlign(LEFT, TOP);
    text(`${results[0].label} (${(results[0].confidence * 100).toFixed(2)}%)`, 10, 10);
  }
}

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

Использование пользовательских моделей

ml5.js поддерживает загрузку моделей, обученных через Teachable Machine или экспортированных из TensorFlow.js. Пошаговый процесс:

  1. Обучение модели на выбранных изображениях.
  2. Экспорт модели в формате model.json и соответствующих весов.
  3. Загрузка модели через ml5.imageClassifier с указанием пути:
classifier = ml5.imageClassifier('model/model.json', modelLoaded);

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

Использование кастомной модели позволяет классифицировать специфические объекты или ситуации, которые не входят в стандартный набор MobileNet.

Обработка ошибок и отладка

При работе с ml5.js важно учитывать следующие аспекты:

  • Проверка загрузки изображения и модели перед классификацией.
  • Обработка ошибок через блоки if (error) в callback-функциях.
  • Убедиться, что изображение имеет корректный формат (jpg, png) и не повреждено.
  • Для больших изображений использовать уменьшенные копии, чтобы ускорить классификацию.

Асинхронная версия с async/await

Для современного JavaScript рекомендуется использовать асинхронные функции, что позволяет сделать код более читаемым:

async function classifyAsync() {
  try {
    const results = await classifier.classify(img);
    console.log(results);
  } catch (error) {
    console.error(error);
  }
}

Такой подход избавляет от вложенных callback-функций и упрощает обработку ошибок.

Вывод вероятностей всех классов

Для анализа модели полезно выводить все возможные классы с вероятностями:

results.forEach(result => {
  console.log(`${result.label}: ${(result.confidence * 100).toFixed(2)}%`);
});

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

Настройка пользовательских параметров

Некоторые модели ml5.js позволяют задавать опции при создании классификатора, например:

  • topk — количество топ-классов, которые возвращает метод classify.
  • version — версия модели MobileNet (1.0, 2.0).

Пример:

classifier = ml5.imageClassifier('MobileNet', { topk: 5 });

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

Оглавление