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

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

Подключение ml5.js

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

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

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

Инициализация MobileNet

Создание экземпляра модели происходит через функцию ml5.imageClassifier. В качестве аргумента передается имя предобученной модели, 'MobileNet', и опционально функция обратного вызова для обработки события готовности модели.

let classifier;

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

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

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

  • Загрузка модели происходит асинхронно, поэтому требуется функция обратного вызова.
  • Объект classifier содержит методы для классификации изображений, включая classify.

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

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

function classifyImage(imgElement) {
  classifier.classify(imgElement, (error, results) => {
    if (error) {
      console.error(error);
      return;
    }
    console.log('Результаты классификации:', results);
  });
}

Особенности работы метода classify:

  • imgElement может быть элементом <img>, <video> или <canvas>.

  • results представляет собой массив объектов с ключами label и confidence.

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

Пример структуры results:

[
  { "label": "Labrador retriever", "confidence": 0.87 },
  { "label": "golden retriever", "confidence": 0.05 },
  { "label": "cocker spaniel", "confidence": 0.03 }
]

Классификация видео в реальном времени

MobileNet может работать с видеопотоком с камеры, что позволяет реализовать распознавание объектов в реальном времени. Для этого используется HTML-элемент <video> и функция classify на каждом кадре.

let video;

function setup() {
  video = createCapture(VIDEO);
  video.size(320, 240);
  video.hide();
  classifier = ml5.imageClassifier('MobileNet', video, videoReady);
}

function videoReady() {
  classifyVideo();
}

function classifyVideo() {
  classifier.classify((error, results) => {
    if (error) {
      console.error(error);
      return;
    }
    console.log('Класс текущего кадра:', results[0].label);
    classifyVideo();
  });
}

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

  • Для непрерывной классификации используется рекурсивный вызов classifyVideo.
  • Модель автоматически обрабатывает текущий кадр видеопотока.

Настройка MobileNet

ml5.js позволяет настраивать параметры MobileNet при инициализации. Например, можно изменить размер модели (version) и разрешение входного изображения (imageSize):

classifier = ml5.imageClassifier('MobileNet', { version: 2, imageSize: 224 }, modelReady);

Возможные параметры:

  • version: 1 или 2. Вторая версия обеспечивает большую точность при минимальной потере скорости.
  • imageSize: 224 или 128. Размер входного изображения влияет на скорость и точность классификации.

Обработка результатов

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

  • Вывод названия класса:
results.forEach(result => {
  console.log(`Класс: ${result.label}, Вероятность: ${(result.confidence * 100).toFixed(2)}%`);
});
  • Фильтрация по порогу вероятности:
const threshold = 0.7;
const topResult = results.find(r => r.confidence > threshold);
if (topResult) {
  console.log('Объект распознан с высокой уверенностью:', topResult.label);
}

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

  • Использовать меньшее разрешение изображений для ускорения работы в реальном времени.
  • Не классифицировать каждый кадр видеопотока, а делать это через заданные интервалы времени (например, каждые 100–200 мс).
  • Для мобильных устройств выбирать версию модели с меньшей нагрузкой (version: 1).

Интеграция с визуализацией

MobileNet можно комбинировать с библиотекой p5.js для отображения результатов на холсте:

function draw() {
  image(video, 0, 0);
  if (results && results[0]) {
    fill(255);
    textSize(24);
    text(results[0].label, 10, height - 20);
  }
}

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

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

Оглавление