Оптимизация для мобильных устройств

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

Выбор модели и её размера

Вес модели напрямую влияет на производительность.

  • Использование моделей с меньшим числом параметров сокращает время загрузки и ускоряет инференс.
  • Для задач классификации изображений можно выбирать варианты MobileNet вместо более тяжелых ResNet или Inception.
  • Для генеративных моделей, таких как StyleTransfer или GAN, стоит подбирать версии с оптимизацией под веб (например, предварительно уменьшенные или квантизированные модели).

Совет: загружать модели асинхронно через ml5.loadModel() и показывать индикатор загрузки, чтобы избежать подвисаний интерфейса.

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

Мобильные устройства обладают ограниченной производительностью при обработке видеопотока.

  • Снижение разрешения видеопотока: уменьшение ширины и высоты видео до 224–320 пикселей значительно ускоряет инференс.
  • Использование createCapture() с параметрами качества: позволяет ограничить частоту кадров и размер изображения, снижая нагрузку на процессор.

Пример настройки видеопотока:

let video = createCapture({
  video: {
    width: 320,
    height: 240,
    frameRate: 15
  }
});
video.hide();
  • Буферизация кадров: можно обрабатывать не каждый кадр, а, например, каждый третий или пятый, чтобы уменьшить нагрузку.

Асинхронная обработка и Web Workers

Для предотвращения блокировки интерфейса на мобильных устройствах необходимо выполнять инференс асинхронно.

  • Все функции ml5.js, возвращающие результаты предсказаний, поддерживают колбэки или промисы (predict().then(...)).
  • Для сложных моделей можно использовать Web Workers, чтобы перенести вычисления в отдельный поток, оставляя основной интерфейс отзывчивым.

Пример с промисами:

classifier.classify(video).then(results => {
  console.log(results[0].label, results[0].confidence);
});

Оптимизация памяти

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

  • Удаление неиспользуемых объектов: освобождать старые тензоры с помощью tf.dispose(tensor) после завершения работы с ними.
  • Минимизация кэширования: хранение промежуточных изображений и данных в ограниченном объёме.
  • Использование tf.tidy(): автоматически освобождает все тензоры, созданные внутри блока, кроме возвращаемых.

Пример:

tf.tidy(() => {
  const resized = tf.browser.fromPixels(video).resizeNearestNeighbor([224, 224]);
  const predictions = model.predict(resized.expandDims(0));
  // Результаты используются здесь
});

Уменьшение частоты предсказаний

Мобильные устройства не всегда способны выполнять предсказания с высокой частотой кадров.

  • Использовать интервалы между предсказаниями (например, каждые 200–500 мс).
  • Совмещать события с анимацией интерфейса через requestAnimationFrame для плавной работы.

Пример с интервалом:

setInterval(() => {
  classifier.classify(video, (err, results) => {
    if (!err) {
      console.log(results[0].label);
    }
  });
}, 300);

Кэширование и ленивое подключение моделей

  • Загружать модели только тогда, когда они действительно необходимы, а не при инициализации страницы.
  • Использовать ленивую загрузку: для отдельных функций, например, распознавания объектов или перевода стиля, инициировать загрузку модели после взаимодействия пользователя.
  • Кэшировать модели в IndexedDB через TensorFlow.js, чтобы при повторном использовании не требовалась повторная загрузка.

Энергопотребление и батарея

Интенсивные вычисления на мобильных устройствах приводят к быстрому расходу заряда.

  • Снижать частоту инференса и разрешение кадров, как описано выше.
  • При длительных сессиях добавлять возможность остановки/возобновления обработки.
  • Использовать lightweight модели и избегать сложных генеративных процессов без необходимости.

Совместимость с браузерами

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

  • На старых версиях Android и iOS может не поддерживаться WebGL, что замедляет вычисления.
  • Для улучшения производительности на таких устройствах рекомендуется использовать CPU backend, настроив TensorFlow.js через tf.setBackend('cpu'), хотя это замедлит инференс по сравнению с WebGL.

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

Оглавление