Совместная работа с p5.js

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

Подключение библиотек

Для работы необходимо подключить обе библиотеки через <script> в HTML:

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

p5.js инициирует среду с функциями setup() и draw(), где создаются канвас и базовая логика визуализации. ml5.js загружается асинхронно и предоставляет модели машинного обучения для классификации, генерации и регрессии.

Создание canvas и подключение камеры

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

let video;

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

Метод createCapture() инициирует поток с камеры, который можно передавать в ml5.js модели. video.hide() скрывает стандартный элемент <video>, оставляя только рендер через p5.js.

Использование моделей ml5.js с p5.js

Классификация изображений с помощью MobileNet:

let classifier;
let label = "";

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

    classifier = ml5.imageClassifier('MobileNet', video, modelReady);
}

function modelReady() {
    console.log('Model Loaded!');
    classifyVideo();
}

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

function gotResult(error, results) {
    if (error) {
        console.error(error);
        return;
    }
    label = results[0].label;
    classifyVideo();
}

function draw() {
    image(video, 0, 0, width, height);
    fill(255);
    textSize(32);
    text(label, 10, height - 20);
}

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

  • Модель MobileNet автоматически обучена для распознавания объектов.
  • classifier.classify() работает асинхронно, возвращая результаты через callback.
  • Повторный вызов classifyVideo() обеспечивает непрерывную классификацию кадров.

Обработка аудио с p5.js и ml5.js

p5.js позволяет обрабатывать звук с помощью p5.AudioIn() и p5.Amplitude(). ml5.js предоставляет модели для классификации аудио, например SoundClassifier:

let soundClassifier;
let label = "";

function setup() {
    noCanvas();
    let options = { probabilityThreshold: 0.7 };
    soundClassifier = ml5.soundClassifier('SpeechCommands', options, modelReady);
}

function modelReady() {
    soundClassifier.classify(gotResult);
}

function gotResult(error, results) {
    if (error) {
        console.error(error);
        return;
    }
    label = results[0].label;
    console.log(label);
}

Особенности интеграции:

  • noCanvas() отключает визуализацию, если требуется только звук.
  • Порог вероятности probabilityThreshold фильтрует слабые предсказания.
  • p5.js предоставляет удобный доступ к микрофону и обработке аудио потоков.

Создание интерактивных визуализаций

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

let handpose;
let video;
let predictions = [];

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

    handpose = ml5.handpose(video, () => console.log('Handpose Model Loaded'));
    handpose.on('predict', results => predictions = results);
}

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

    for (let i = 0; i < predictions.length; i++) {
        let landmarks = predictions[i].landmarks;
        for (let j = 0; j < landmarks.length; j++) {
            fill(0, 255, 0);
            noStroke();
            ellipse(landmarks[j][0], landmarks[j][1], 10, 10);
        }
    }
}

Заметные моменты:

  • handpose.on('predict', callback) отслеживает новые предсказания модели.
  • Положения ключевых точек руки (landmarks) можно использовать для управления визуальными элементами или интерактивными объектами.

Синхронизация цикла p5.js и асинхронных моделей

Важный принцип — не блокировать draw() длительными вычислениями модели. Все вызовы ml5.js выполняются асинхронно, поэтому вывод модели нужно интегрировать через callback или промисы, а p5.js будет непрерывно перерисовывать canvas с обновлёнными данными.

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

ml5.js позволяет обучать модели на собственных изображениях или данных. Использование p5.js упрощает сбор данных через интерактивные элементы:

let featureExtractor;
let classifier;

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

    featureExtractor = ml5.featureExtractor('MobileNet', modelReady);
    classifier = featureExtractor.classification(video);
}

function modelReady() {
    console.log('Feature Extractor Loaded');
}

// Добавление данных для обучения
function addExample(label) {
    classifier.addImage(video, label);
}

// Обучение модели
function trainModel() {
    classifier.train(loss => {
        if (loss === null) {
            console.log('Training Complete');
            classifier.classify(gotResult);
        }
    });
}

Важные моменты:

  • featureExtractor.classification(video) создаёт на основе MobileNet пользовательский классификатор.
  • Данные можно добавлять интерактивно через события p5.js (например, нажатие кнопок).
  • Метод train() выполняется асинхронно и возвращает значение ошибки на каждом шаге.

Реакция на события и взаимодействие

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

Оглавление