Загрузка пользовательской модели из Google Teachable Machine

Библиотека ml5.js предоставляет удобный интерфейс для работы с моделями машинного обучения в браузере, упрощая интеграцию пользовательских моделей, созданных с помощью Google Teachable Machine. Процесс работы с такими моделями состоит из нескольких этапов: экспорт модели, подключение к проекту, загрузка модели и использование её для предсказаний.

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

  1. Создание модели. В Teachable Machine создаются категории, загружаются изображения или аудио, и производится обучение. Каждая категория должна быть репрезентативной, чтобы повысить точность предсказаний.

  2. Экспорт модели. После обучения нужно перейти в раздел «Export Model» и выбрать опцию TensorFlow.js. Teachable Machine создаёт папку с файлами модели:

    • model.json — конфигурация и структура сети.
    • metadata.json — информация о классах и метаданных.
    • weights.bin — веса нейронной сети.

  3. Размещение файлов. Для использования модели в веб-приложении необходимо разместить эти файлы на сервере или использовать статическую папку проекта.

Подключение ml5.js к проекту

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

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

При использовании модульной структуры можно подключать ml5 через npm:

npm install ml5

Загрузка модели

ml5.js предоставляет объект imageClassifier для классификации изображений. Загрузка пользовательской модели осуществляется следующим образом:

let classifier;

function preload() {
    const modelURL = 'path/to/your/model.json';
    classifier = ml5.imageClassifier(modelURL);
}
  • modelURL — путь к файлу model.json.
  • При передаче URL ml5 автоматически загружает необходимые файлы весов и метаданных.

Особенности загрузки:

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

Работа с изображениями

После загрузки модели классификация производится методом classify():

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

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

  • results — массив объектов, где каждый объект содержит:

    • label — название категории,
    • confidence — вероятность предсказания.

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

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

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

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

let video;

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

    const modelURL = 'path/to/your/model.json';
    classifier = ml5.imageClassifier(modelURL, video, modelReady);
}

function modelReady() {
    classifyVideo();
}

function classifyVideo() {
    classifier.classify(video, (error, results) => {
        if (error) {
            console.error(error);
            return;
        }
        console.log(results[0].label, results[0].confidence);
        classifyVideo(); // непрерывная классификация
    });
}
  • В этом режиме модель классифицирует каждый кадр в реальном времени.
  • Необходимо вызывать classifyVideo() рекурсивно, чтобы получить непрерывное предсказание.

Поддержка нескольких форматов моделей

Teachable Machine позволяет экспортировать модели в разных форматах, но ml5.js поддерживает только TensorFlow.js модели (model.json + веса). При использовании других форматов необходимо конвертировать их через TensorFlow.js конвертеры.

Настройка точности и производительности

  • Снижение разрешения входного изображения уменьшает нагрузку на GPU/CPU и ускоряет классификацию.
  • Использование async/await позволяет избежать вложенных callback-функций:
async function classifyAsync(image) {
    try {
        const results = await classifier.classify(image);
        console.log(results);
    } catch (error) {
        console.error(error);
    }
}
  • Для потокового видео рекомендуется ограничить частоту предсказаний с помощью таймера или requestAnimationFrame.

Работа с пользовательскими метаданными

Файл metadata.json содержит названия категорий, что позволяет отображать их в интерфейсе приложения без ручного прописывания. Доступ к метаданным:

console.log(classifier.model.labels);

Это особенно полезно при динамическом формировании элементов интерфейса для каждой категории.

Возможные ошибки при загрузке

  • 404 при загрузке model.json — путь к файлу указан неверно.
  • Несовпадение версии TensorFlow.js — необходимо использовать совместимую версию ml5.js.
  • Асинхронность — попытка классификации до завершения загрузки модели вызывает ошибки. Решение: использовать preload() или событие modelReady.

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

Оглавление