Создание собственного классификатора на основе Teachable Machine

Библиотека ml5.js предоставляет высокоуровневый интерфейс для работы с моделями машинного обучения в браузере. Одним из удобных способов создания собственного классификатора является использование Teachable Machine, который позволяет обучать модели без глубоких знаний в области машинного обучения и экспортировать их для работы в JavaScript.

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

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

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

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

Экспорт модели из Teachable Machine

После обучения модели в Teachable Machine необходимо экспортировать её в формате, подходящем для веб-приложений. В интерфейсе Teachable Machine доступна опция «Export Model → Upload», после чего появляется ссылка на JSON-модель и веса, которые можно подключить к ml5.js.

Пример структуры экспорта:

model.json
metadata.json
weights.bin

Эти файлы размещаются на сервере или локально для загрузки через JavaScript.

Загрузка модели и создание классификатора

В ml5.js используется функция imageClassifier для работы с изображениями. Поддерживается загрузка модели через URL:

let classifier;

function preload() {
  classifier = ml5.imageClassifier('https://your-server.com/model/model.json');
}

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

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

Для работы с камерой подключается объект createCapture:

let video;

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

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

  classifier.classify(video, gotResult);
}

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

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

  • Метод classify асинхронный, возвращает результаты через колбэк.
  • results содержит массив объектов с полями label и confidence, где label — имя класса, confidence — вероятность принадлежности изображения к классу.

Настройка точности и порогов

Для улучшения качества классификации полезно использовать порог уверенности:

const threshold = 0.8;

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

  const topResult = results[0];
  if (topResult.confidence > threshold) {
    console.log(`Определён класс: ${topResult.label}`);
  } else {
    console.log('Неопределённый класс');
  }
}

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

Обработка пользовательских изображений

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

const inputImage = document.getElementById('inputImage');

inputImage.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const img = createImg(URL.createObjectURL(file), () => {
    classifier.classify(img, (error, results) => {
      if (error) console.error(error);
      else console.log(results);
    });
  });
});

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

  • Функция createImg из p5.js упрощает работу с DOM-изображениями.
  • Использование URL.createObjectURL позволяет загружать локальные файлы без сервера.

Интеграция с интерактивными элементами

Можно использовать результаты классификации для управления интерфейсом. Например, изменение цвета фона в зависимости от распознанного объекта:

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

  const label = results[0].label;

  switch (label) {
    case 'Кошка':
      background(255, 200, 200);
      break;
    case 'Собака':
      background(200, 255, 200);
      break;
    default:
      background(220);
  }
}

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

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

После обучения и настройки модель Teachable Machine может быть переиспользована в других проектах:

  • Размещение на CDN или собственном сервере для многократной загрузки.
  • Использование в мобильных приложениях через веб-просмотр.
  • Подключение к другим библиотекам JavaScript для визуализации данных.

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

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

  1. Использовать меньшее разрешение видеопотока через createCapture(VIDEO, { width: 320, height: 240 }).
  2. Ограничивать частоту классификации с помощью таймеров или setInterval.
  3. Удалять предыдущие объекты изображений, чтобы не перегружать память.

Это особенно важно при интеграции с веб-страницами, где видеопоток и обработка изображений могут занимать значительные ресурсы.

Работа с различными типами данных

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

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

Оглавление