В работе с ml5.js при создании интерактивных приложений на JavaScript
часто возникает необходимость контролировать частоту
предсказаний модели. Особенно это важно при использовании
моделей реального времени, таких как poseNet,
objectDetector или imageClassifier, когда
поток данных от камеры или сенсоров может быть очень быстрым. Без
регулировки система может испытывать перегрузку, а интерфейс —
тормоза.
Оптимизация производительности Постоянные вызовы функции предсказания создают нагрузку на основной поток выполнения JavaScript. Throttling позволяет вызывать функцию через фиксированные интервалы времени, уменьшая частоту вычислений и снижая потребление ресурсов.
Сглаживание данных Часто предсказания моделей подвержены шуму. Если обрабатывать все кадры камеры без ограничений, результаты могут быть нестабильными. Ограничение частоты предсказаний помогает формировать более стабильный поток данных.
Предотвращение блокировки интерфейса В браузере JavaScript работает в однопоточном режиме. Без контроля частоты предсказаний пользовательский интерфейс может «замерзнуть» при тяжелых вычислениях модели.
setInterval или setTimeoutПростейший способ — запускать функцию предсказания через регулярные интервалы времени:
let video;
let classifier;
let predicting = false;
function setup() {
createCanvas(640, 480);
video = createCapture(VIDEO);
video.hide();
classifier = ml5.imageClassifier('MobileNet', video, modelReady);
setInterval(() => {
if (!predicting) {
predicting = true;
classifier.predict(video, gotResult);
}
}, 200); // вызов каждые 200 мс
}
function modelReady() {
console.log('Model Loaded!');
}
function gotResult(error, results) {
predicting = false;
if (error) {
console.error(error);
return;
}
console.log(results[0].label, results[0].confidence);
}
Пояснение:
predicting предотвращает наложение
предсказаний.Lodash предоставляет готовую функцию throttle, которая
удобно ограничивает частоту вызова функции:
const throttledPredict = _.throttle(() => {
classifier.predict(video, gotResult);
}, 300); // вызов не чаще одного раза в 300 мс
function draw() {
image(video, 0, 0);
throttledPredict();
}
Преимущества метода:
Иногда нужно привязать предсказания к рендерингу кадра на холсте
p5.js:
let lastPredictionTime = 0;
const interval = 250; // мс
function draw() {
image(video, 0, 0);
const now = millis();
if (now - lastPredictionTime > interval) {
classifier.predict(video, gotResult);
lastPredictionTime = now;
}
}
Преимущество:
Для приложений с изменяющейся нагрузкой полезно адаптировать интервал вызова в зависимости от текущего времени обработки модели:
let lastPredictionTime = 0;
let dynamicInterval = 200;
function draw() {
image(video, 0, 0);
const now = millis();
if (now - lastPredictionTime > dynamicInterval) {
const start = performance.now();
classifier.predict(video, (err, results) => {
const duration = performance.now() - start;
dynamicInterval = Math.max(100, duration * 2); // подстраиваем частоту
lastPredictionTime = now;
if (err) {
console.error(err);
return;
}
console.log(results[0].label, results[0].confidence);
});
}
}
Особенности подхода:
Регулировка частоты предсказаний — ключевой инструмент для создания плавных и отзывчивых интерактивных приложений на ml5.js, позволяющий балансировать между производительностью модели и удобством пользователя.