Улучшите производительность и UX для ИИ на стороне клиента.

Мод Налпас
Maud Nalpas

Хотя большинство функций ИИ в Интернете зависят от серверов, ИИ на стороне клиента работает непосредственно в браузере пользователя. Это дает такие преимущества, как низкая задержка, снижение затрат на стороне сервера, отсутствие требований к ключам API, повышенная конфиденциальность пользователей и автономный доступ. Вы можете реализовать ИИ на стороне клиента, который работает во всех браузерах, с помощью библиотек JavaScript, таких как TensorFlow.js , Transformers.js и MediaPipe GenAI .

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

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

Перед загрузкой модели

Библиотека разума и размер модели

Для реализации ИИ на стороне клиента вам понадобится модель и обычно библиотека. Выбирая библиотеку, оцените ее размер, как и любой другой инструмент.

Размер модели тоже имеет значение. То, что считается большим для модели ИИ, зависит от этого. 5 МБ могут быть полезным эмпирическим правилом: это также 75-й процентиль среднего размера веб-страницы . Мягкое число будет 10 МБ .

Вот несколько важных соображений относительно размера модели:

  • Многие модели ИИ, ориентированные на конкретные задачи, могут быть очень маленькими . Такая модель, как BudouX , для точного разбиения символов на азиатских языках, имеет размер GZIP всего 9,4 КБ. Модель определения языка MediaPipe составляет 315 КБ.
  • Даже модели машинного зрения могут иметь разумные размеры . Модель Handpose и все связанные с ней ресурсы занимают общий размер 13,4 МБ. Хотя это намного больше, чем у большинства уменьшенных пакетов внешнего интерфейса, он сопоставим со средним размером веб-страницы, который составляет 2,2 МБ ( 2,6 МБ на настольном компьютере).
  • Модели Gen AI могут превышать рекомендуемый размер веб-ресурсов . DistilBERT , который считается либо очень маленьким LLM, либо простой моделью НЛП (мнения разнятся), весит 67 МБ. Даже небольшие LLM, такие как Gemma 2B , могут достигать 1,3 ГБ. Это более чем в 100 раз превышает размер средней веб-страницы.

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

На панели «Сеть Chrome DevTools» укажите размер загрузки для модели определения языка MediaPipe. Демо.
На панели Chrome DevTools Network укажите размер загрузки для моделей Gen AI: Gemma 2B (маленький LLM), DistilBERT (маленький NLP/очень маленький LLM).

Оптимизировать размер модели

  • Сравните качество модели и размеры загрузки . Модель меньшего размера может иметь достаточную точность для вашего случая использования, но при этом она намного меньше. Существуют методы точной настройки и сжатия модели, позволяющие значительно уменьшить размер модели при сохранении достаточной точности.
  • По возможности выбирайте специализированные модели . Модели, предназначенные для определенной задачи, как правило, меньше по размеру. Например, если вы хотите выполнить конкретные задачи, такие как анализ настроений или токсичности, используйте модели, специализирующиеся на этих задачах, а не общий LLM.
Селектор моделей для демонстрации транскрипции на основе искусственного интеллекта на стороне клиента от j0rd1smit .

Хотя все эти модели выполняют одну и ту же задачу, с разной точностью, их размеры сильно различаются: от 3 МБ до 1,5 ГБ.

Проверьте, может ли модель работать

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

Пока решение не найдено, вот что вы можете сделать сегодня:

  • Проверьте поддержку WebGPU . Несколько клиентских библиотек искусственного интеллекта, включая Transformers.js версии 3 и MediaPipe, используют WebGPU. На данный момент некоторые из этих библиотек не переходят на Wasm автоматически, если WebGPU не поддерживается. Вы можете смягчить это, включив свой код, связанный с ИИ, в проверку обнаружения функции WebGPU , если вы знаете, что вашей клиентской библиотеке ИИ требуется WebGPU.
  • Исключите устройства с недостаточной мощностью . Используйте Navigator.hardwareConcurrency , Navigator.deviceMemory и API Compute Pressure для оценки возможностей и нагрузки устройства. Эти API поддерживаются не во всех браузерах и намеренно неточны , чтобы предотвратить снятие отпечатков пальцев, но они все равно могут помочь исключить устройства, которые кажутся очень маломощными.

Сигнализировать о больших загрузках

Для больших моделей предупреждайте пользователей перед загрузкой. Пользователи настольных компьютеров с большей вероятностью согласятся с большими загрузками, чем пользователи мобильных устройств. Чтобы обнаружить мобильные устройства, используйте mobile из API User-Agent Client Hints (или строку User-Agent, если UA-CH не поддерживается).

Ограничьте большие загрузки

  • Скачивайте только то, что необходимо . Особенно если модель большая, загружайте ее только тогда, когда есть достаточная уверенность в том, что функции ИИ будут использоваться. Например, если у вас есть функция искусственного интеллекта, предлагающая опережающий ввод, загружайте ее только тогда, когда пользователь начинает использовать функции набора текста.
  • Явно кэшируйте модель на устройстве с помощью Cache API , чтобы не загружать ее при каждом посещении. Не полагайтесь только на неявный HTTP-кеш браузера.
  • Чанк загрузки модели . fetch-in-chunks разбивает большую загрузку на более мелкие фрагменты.

Загрузка и подготовка модели

Не блокируйте пользователя

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

Убедитесь, что пользователи по-прежнему могут публиковать сообщения.
Пользователи по-прежнему могут публиковать свои отзывы, даже если функция искусственного интеллекта на стороне клиента еще не готова. Демо от @maudnals .

Укажите прогресс

Загружая модель, указывайте завершенный прогресс и оставшееся время.

Отображение прогресса загрузки модели. Пользовательская реализация с выборкой по частям . Демо от @tomayac .

Грамотно справляйтесь с перебоями в сети

Загрузка моделей может занять разное время в зависимости от их размера. Рассмотрим, как обрабатывать перебои в работе сети, если пользователь отключается от сети . По возможности сообщите пользователю о разрыве соединения и продолжите загрузку, когда соединение восстановится.

Ненадежное соединение — еще одна причина загружать частями.

Переложите дорогостоящие задачи веб-работнику

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

Найдите демо-версию и полную реализацию на основе веб-воркера:

Трассировка производительности в Chrome DevTools.
Вверху: с веб-работником. Внизу: нет веб-работника.

Во время вывода

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

Переместить вывод в веб-воркер

Если вывод происходит через WebGL, WebGPU или WebNN, он опирается на графический процессор. Это означает, что это происходит в отдельном процессе, который не блокирует пользовательский интерфейс.

Но для реализаций на базе ЦП (таких как Wasm, который может быть запасным вариантом для WebGPU, если WebGPU не поддерживается), перемещение вывода в веб-воркер сохраняет отзывчивость вашей страницы — точно так же, как во время подготовки модели.

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

Обработка ошибок

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

  • Обработка ошибок вывода . Заключите вывод в блоки try / catch и обработайте соответствующие ошибки во время выполнения.
  • Обработка ошибок WebGPU , как неожиданных , так и GPUDevice.lost , которые возникают, когда графический процессор фактически сбрасывается из-за проблем с устройством.

Укажите статус вывода

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

Пример анимации во время вывода.
Демо от @maudnals и @argyleink

Сделать вывод отменяемым

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