Первый запуск: проверка работоспособности

Для начала работы с библиотекой ml5.js необходимо подключить её в проект. Наиболее простой способ — использование CDN. В HTML-файле добавляется следующий тег в секцию <head>:

<script src="https://cdn.jsdelivr.net/npm/ml5@latest/dist/ml5.min.js"></script>

После этого библиотека становится доступной через объект ml5 в JavaScript. Проверка успешного подключения производится простой командой в консоли:

console.log(ml5.version);

Если версия библиотеки отображается корректно, подключение выполнено успешно.

Для запуска проектов удобно использовать локальный сервер. В браузере напрямую из файловой системы некоторые функции ml5.js, например работа с камерой или загрузка моделей, могут быть ограничены политиками безопасности. Локальный сервер можно поднять с помощью Live Server в VS Code или командой python -m http.server в терминале.

Проверка доступности функций

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

if (ml5.imageClassifier) {
    console.log("Классический классификатор изображений доступен");
}

Аналогично можно проверить другие модели, такие как poseNet, handpose, textGenerator или soundClassifier. Это помогает убедиться, что библиотека загружена полностью и готова к использованию.

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

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

let classifier;

function setup() {
    noCanvas(); // Вспомогательная функция библиотеки p5.js
    classifier = ml5.imageClassifier('MobileNet', modelReady);
}

function modelReady() {
    console.log('Модель загружена и готова к работе');
    const img = document.getElementById('testImage');
    classifier.classify(img, gotResult);
}

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

В этом примере происходит:

  • Инициализация классификатора с использованием предобученной модели MobileNet.
  • Проверка готовности модели через обратный вызов modelReady.
  • Классификация изображения и вывод результатов в консоль.

Проверка работы с веб-камерой

ml5.js позволяет использовать камеру для работы с моделями в реальном времени. Для проверки работоспособности достаточно создать простую демонстрацию, используя Video и imageClassifier:

let video;
let classifier;

function setup() {
    createCanvas(640, 480);
    video = createCapture(VIDEO);
    video.hide();
    classifier = ml5.imageClassifier('MobileNet', video, modelReady);
}

function modelReady() {
    console.log('Модель для камеры готова');
    classifyVideo();
}

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

function gotResult(error, results) {
    if (error) {
        console.error(error);
        return;
    }
    console.log(results);
    classifyVideo(); // Постоянная классификация каждого кадра
}

Здесь важные моменты:

  • Используется объект video, полученный через createCapture.
  • Видео скрывается (video.hide()), чтобы выводить только результат классификации.
  • Функция classifyVideo рекурсивно вызывает классификацию для каждого кадра.

Проверка ошибок и отладка

При работе с ml5.js важно учитывать возможные ошибки:

  • Ошибка загрузки модели: часто связана с отсутствием интернета или неправильным названием модели.
  • Ошибка доступа к камере: требуется разрешение в браузере и запуск на безопасном протоколе (https:// или localhost).
  • Конфликты с другими библиотеками: при использовании p5.js и ml5.js следует соблюдать порядок подключения скриптов, чтобы ml5 имел доступ к функциям p5.js.

Для диагностики ошибок используются консольные сообщения и проверка объектов перед вызовом функций:

if (!classifier) {
    console.error("Классификатор не инициализирован");
}

Проверка версий и совместимости

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

<script src="https://cdn.jsdelivr.net/npm/ml5@0.12.2/dist/ml5.min.js"></script>

Также стоит проверять совместимость с p5.js, особенно если используется визуализация или видео. Например, версии p5.js 1.x полностью поддерживаются ml5.js последних версий.

Итоговые тестовые операции

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

  1. Вывести версию ml5.js в консоль.
  2. Инициализировать любую модель (imageClassifier, poseNet, soundClassifier).
  3. Протестировать классификацию изображения или работу камеры.
  4. Обрабатывать ошибки и выводить результаты в консоль.

Такая последовательность гарантирует, что библиотека подключена корректно и готова к дальнейшей разработке.

Оглавление