Структура проекта и подключение библиотеки

Библиотека ml5.js предназначена для упрощённого взаимодействия с моделями машинного обучения в браузере. Она строится поверх TensorFlow.js, обеспечивая доступ к готовым моделям для классификации изображений, распознавания текста, генерации музыки и другим задачам без глубокого погружения в сложные алгоритмы.

Организация файлов проекта

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

project/
│
├─ index.html
├─ style.css
├─ script.js
└─ assets/
   ├─ images/
   ├─ audio/
   └─ data/

index.html — основной HTML-файл, содержащий разметку страницы и подключение всех скриптов.
style.css — файл стилей, определяющий визуальное оформление элементов интерфейса.
script.js — главный JavaScript-файл, где будет производиться инициализация и работа с ml5.js.
assets/ — папка для хранения медиа-ресурсов и данных, которые могут использоваться моделями.

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

Библиотека может быть подключена двумя основными способами:

Через CDN — быстрый способ, не требующий установки пакетов.

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

Через npm — для проектов с использованием сборщиков типа Webpack или Parcel:

npm install ml5

После установки подключение в коде:

import * as ml5 from 'ml5';

Использование CDN предпочтительно для учебных и небольших проектов, так как позволяет сразу начать работу без настройки сборщика. В профессиональных проектах обычно используется npm для возможности контроля версий и интеграции с современными инструментами разработки.

Инициализация и проверка загрузки

После подключения библиотеки рекомендуется убедиться, что объект ml5 доступен в глобальной области видимости. В script.js можно добавить проверку:

if (ml5) {
  console.log("ml5.js успешно подключена");
} else {
  console.error("Ошибка подключения ml5.js");
}

Подключение моделей

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

ImageClassifier — классификация изображений.
PoseNet — распознавание поз человека.
SoundClassifier — классификация аудиопотока.
TextGenerator — генерация текста на основе обученных моделей.

Пример подключения модели для классификации изображений:

let classifier;

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

function modelReady() {
  console.log('Модель MobileNet загружена');
}

Метод preload используется для предварительной загрузки модели, чтобы избежать ошибок при попытке её использования до полной инициализации.

Работа с мультимедийными ресурсами

ml5.js тесно интегрируется с DOM-элементами, особенно <img>, <video> и <canvas>. Для использования изображений и видео необходимо их корректно загрузить:

<img id="inputImage" src="assets/images/cat.jpg" alt="Example image">
<video id="inputVideo" autoplay muted></video>

Инициализация для классификации изображения через модель:

const image = document.getElementById('inputImage');
classifier.classify(image, (err, results) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(results);
});

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

const video = document.getElementById('inputVideo');
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream;
  });