Введение

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

Когда фронтенд‑разработчик слышит о машинном обучении в браузере, первое, что приходит ему на ум, это вопрос: «Как это может быть применено? Мы же работаем в браузере на JS, который, как известно, медленный (по сравнению с компилируемыми языками)».

Преимущества машинного обучения в браузере

Обеспечение ускорения расчетов машинного обучения в браузере имеет множество преимуществ и важных причин.

Во-первых, вычисления происходят быстро. Благодаря тому что вычисления происходят на устройстве клиента, данные никуда не отправляются. Соответственно нет задержек передачи данных.

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

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

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

Наконец, это позволяет создавать интерактивные и персонализированные приложения. Ускорение вычислений в браузере позволяет анализировать данные и обучать модели непосредственно на устройстве пользователя, создавая более персонализированные и интерактивные пользовательские интерфейсы.

Библиотека TensorFlow.js

История TensorFlow.js

TensorFlow.js - это JavaScript библиотека для обучения и выполнения моделей машинного обучения на стороне клиента в браузере. Она была представлена в феврале 2018 года командой Google Brain и TensorFlow. Это позволило разработчикам создавать и обучать модели машинного обучения непосредственно в браузере, что открывает широкие возможности для создания интерактивных приложений, использующих искусственный интеллект.

Применение TensorFlow.js

Вот несколько примеров реальных проектов, выполненных с использованием TensorFlow.js:

Teachable Machine: Этот проект позволяет создавать модели машинного обучения непосредственно в браузере, без необходимости использования облачного сервера. Пользователи могут обучать модели на основе изображений, аудио или видео непосредственно на своих устройствах.

https://teachablemachine.withgoogle.com/

PoseNet: Библиотека PoseNet позволяет определять позы человека на основе изображения с помощью нейронной сети. Это может быть использовано, например, для разработки приложений управления жестами или фитнес-приложений.

https://storage.googleapis.com/tfjs-models/demos/pose-detection/index.html?model=movenet

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

https://justadudewhohacks.github.io/face-api.js/docs/index.html#live-demos

Magenta.js: Magenta.js разрабатывается командой Google Brain и предоставляет инструмент для создания и воспроизведения музыкальных произведений с использованием нейронных сетей.

https://magenta.tensorflow.org/js-announce

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

https://deepdreamgenerator.com/

DeepDream: Обнаружение пользовательских объектов в браузере с помощью TensorFlow.js

https://codepen.io/hchiam/full/WNaOJVO

WebLLM : модель большого языка и чат-бота на основе LLM в веб-браузеры. Все работает внутри браузера без поддержки сервера и ускоряется с помощью WebGPU

https://webllm.mlc.ai/

Совместимость с другими языками

TensorFlow.js позволяет использовать модели, обученные на любом языке, совместимым с TensorFlow, например, Python. Это обеспечивает возможность обучить модель на одной платформе (например, на сервере с использованием Python), а затем использовать эту модель на стороне клиента с помощью TensorFlow.js в браузере.

TensorFlow.js Lite

TensorFlow Lite - это легкая и оптимизированная версия TensorFlow.js, специально разработанная для использования на мобильных устройствах и других ресурсоограниченных платформах. Вот основные отличия между TensorFlow Lite и полной версией TensorFlow.js:

Скорость и легкость: TensorFlow Lite оптимизирован для работы на мобильных устройствах с ограниченными ресурсами. Модели в нем легче и быстрее исполняются.
Поддержка мобильных платформ: TensorFlow Lite предоставляет инструменты для конвертации и оптимизации моделей для мобильных платформ. Это позволяет снизить потребление ресурсов и повысить производительность.
Аппаратное ускорение: TensorFlow Lite хорошо интегрируется с аппаратным ускорением мобильных устройств, таким как GPU и DSP. Это повышает производительность обработки моделей.
Поддержка различных форматов моделей: TensorFlow Lite поддерживает различные форматы моделей, такие как FlatBuffers или собственный формат моделей. Это упрощает развертывание моделей на разных платформах.
Оптимизированные операции: TensorFlow Lite предоставляет оптимизированные операции для классических задач машинного обучения, таких как классификация и обнаружение объектов.
Удобная интеграция: TensorFlow Lite легко интегрируется с мобильными приложениями на платформах Android и iOS, а также с веб-приложениями.

Способы ускорения

JavaScript (JS) - это интерпретируемый язык, что ограничивает его производительность в сравнении с нативными языками, такими как C++. Поэтому его использование в машинном обучении имеет свои ограничения.

К счастью, библиотека TensorFlow.js предлагает несколько способов ускорения расчетов машинного обучения в браузере. Термин "бэкенд" или "серверная часть" относится к способу выполнения операций машинного обучения. TensorFlow.js поддерживает несколько бэкендов, включая WebAssembly, WebGL и WebGPU.

Бэкенд определяет, где и как выполняются операции нейронной сети: на графическом процессоре (GPU), центральном процессоре (CPU) или других устройствах. Выбор определенного бэкенда может повлиять на производительность и скорость обучения модели в TensorFlow.js. В большинстве случаев TensorFlow.js автоматически выбирает для вас лучший бэкэнд с учетом текущей среды, также можно указывать необходимый "бэкенд" для расчета.

WebAssembly - это низкоуровневая виртуальная машина, предназначенная для исполнения кода на более низком уровне, чем JavaScript. При использовании WebAssembly, код TensorFlow.js может быть скомпилирован в более эффективный машинный код, что помогает ускорить вычисления.

Когда мне следует использовать WASM?

WASM - отличный выбор, когда модели имеют небольшой размер или вам нужна поддержка устройств, которые не поддерживают WebGL или имеют менее мощные графические процессоры. В таблице ниже показано время вывода Chrome на MacBook Pro 2018 года для 5 официально поддерживаемых моделей в WebGL, WASM и серверных модулях CPU:

В таблице, приведенной выше, показано, что WASM работает в 10-30 раз быстрее, чем простой серверный процессор JS, для различных моделей, и конкурирует с WebGL для более мелких моделей, таких как BlazeFace. BlazeFace имеет небольшой размер (400 КБ) и приличное количество операций (~140), но все же работает быстрее на WASM, чем на WebGL. Это объясняется тем, что программы WebGL имеют фиксированные накладные расходы на выполнение каждой операции, что объясняет, почему такие модели, как BlazeFace, работают быстрее на WASM.

WebGL

WebGL - это JavaScript API для создания интерактивной 2D и 3D графики в браузере. TensorFlow.js может использовать WebGL для ускорения выполнения графических вычислений, таких как операции с тензорами и обучение моделей. WebGL предоставляет доступ к шейдерам видеокарты, которые используются для параллельных вычислений, что может значительно увеличить производительность выполнения операций.

Что такое шейдеры?

Шейдеры - это небольшие программы, выполняемые на графическом процессоре. WebGL поддерживает два типа шейдеров: вершинный и пиксельный. Вершинный шейдер отвечает за положение каждой вершины трехмерной сетки 3D-объекта, а пиксельный - за цвет каждого пикселя 3D-сцены.

Представим себе анимацию на веб-сайте с разрешением экрана 1280 на 960 пикселей. Если посчитать общее количество пикселей, то получим 1 228 800. Столько раз нужно выполнить расчет пиксельного шейдера для отображения одного кадра, и умножим это число, например, на 60 (частота обновления кадров анимации в секунду). Не правда ли, цифра впечатляет?

Все это происходит на GPU во множестве параллельных потоков. На центральном процессоре подобные вычисления заняли бы гораздо больше времени. Однако в отличие от обособленных ядер ЦП, каждый шейдер может рассчитывать только одну программу.

Вернемся к машинному обучению. Как происходит расчет машинного обучения в библиотеке TensorFlow на WebGL. Процесс можно разделить на несколько этапов. Данные преобразуются в изображение, изображение загружается в графический процессор как текстура, выполняется расчет в пиксельном шейдере. Результат вычислений мы имеем в виде набора пикселей на <canvas>, и мы должны прочитать его синхронно с getPixelsData, для преобразования обратно в данные.

При передаче данных из центрального процессора (из js) на видеокарту и обратно после вычислений появляются накладные расходы эта операция требует некоторого времени. Этим объясняется почему некоторые модели ML на WASM работают быстрее чем на WebGL и WebGPU. Теоретически мы можем не возвращать данные обратно в js, а можем их выводить прямо в шейдере (если результат вычислений это позволяет).

WebGPU

WebGPU - это новый низкоуровневый API для работы с 2D и 3D графикой в браузере. Он обеспечивает высокую производительность в веб-приложениях и открывает новые возможности для реализации алгоритмов машинного обучения в браузере.

WebGPU - это результат совместных усилий группы сообщества W3C "GPU for the Web", в которую входят такие крупные компании, как Mozilla, Apple, Intel и Microsoft. WebGPU доступен в Chrome начиная с версии 113, а поддержка Firefox и Safari на момент написания статьи находится в стадии разработки (следите за обновлением тут). WebGPU скоро станет доступен во всех основных браузерах и предоставит единое API для отображения 3D графики (это еще один шаг к стандартизации графических API, таких как Direct3D 12 от Microsoft, Metal от Apple и Vulkan от Khronos Group), а также возможности вычислений на GPU.

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

В чем отличие WebGPU?

API который представляет WebGPU для вычислений (compute shaders) имеет несколько отличий которые на первый взгляд мало значительны, но при детальном рассмотрении дают разработчику новые возможности.

Данные не нужно преобразовывать в текстуру
Вычисление выполняется асинхронно и не блокирует главный поток JS
Не нужен элемент canvas и связанные с его размером ограничения, вычисления производятся в памяти
Не нужно выполнять дорогой и синхронный getPixelsData
Не нужно конвертировать полученные значения пикселей в данные
Улучшен вывод ошибок при компиляции шейдеров
Прирост скорости вычислений

Результаты производительности

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

Ожидаемо, из-за отсутствия необходимости в создании текстур и чтения данных с canvas накладные расходы на инициализацию у WebGPU значительно ниже, а быстродействие выше и с ростом объема вычислений эта разница только растет.

Портативность

Одним из наиболее интересных аспектов WebGPU является тот факт, что он предназначен не только для Интернета. По сути, существует три способа использования WebGPU: Одним из наиболее интересных аспектов WebGPU является тот факт, что он предназначен не только для Интернета. По сути, существует три способа использования WebGPU:

1. API JavaScript в браузереAPI JavaScript в браузере

2. АРІ Rust/C++ внутри веб-сборки в браузереAPI Rust/C++ внутри веб-сборки в браузере

3. АРІ Rust/С++ в автономном приложении вне браузера.API Rust/C++ в автономном приложении вне браузера.

Примечательно, что не только API-интерфейсы Javascript и Rust по существу идентичны друг другу, но и API-интерфейсы Rust/C++ для работы в браузере и вне браузера также по существу идентичны друг другу.

Обеспечивает огромные преимущества переносимости. Например, графическое приложение, запущенное на сервере с использованием WebGL, может быть легко перенесено в браузер без каких-либо изменений кода. Аналогично, код WebGPU, запущенный в Windows с использованием Direct3D, даст те же результаты, что и код WebGPU, запущенный в Android с использованием Vulkan.

В некотором смысле WebGPU является скорее новым кроссплатформенным стандартом вычислений на базе графического процессора, чем просто API на основе браузера.

Заключение

Ускорение вычислений машинного обучения в браузере с помощью WASM, WebGL и WebGPU открывает новые возможности для создания мощных и эффективных веб-приложений. Благодаря этим технологиям разработчики могут создавать приложения, работающие быстрее, потребляющие меньше ресурсов и обеспечивающие большую конфиденциальность.

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

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

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

Машинное обучение в браузере