Хотя большинство функций ИИ в Интернете зависят от серверов, ИИ на стороне клиента работает непосредственно в браузере пользователя. Это дает множество преимуществ, включая низкую задержку, снижение затрат на стороне сервера, отсутствие требований к ключам 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 раз превышает размер средней веб-страницы.
Вы можете оценить точный размер загрузки моделей, которые планируете использовать, с помощью инструментов разработчика вашего браузера.
Оптимизировать размер модели
- Сравните качество модели и размеры загрузки . Модель меньшего размера может иметь достаточную точность для вашего случая использования, но при этом она намного меньше. Существуют методы точной настройки и сжатия модели, позволяющие значительно уменьшить размер модели при сохранении достаточной точности.
- По возможности выбирайте специализированные модели . Модели, предназначенные для определенной задачи, как правило, меньше по размеру. Например, если вы хотите выполнить конкретные задачи, такие как анализ настроений или токсичности, используйте модели, специализирующиеся на этих задачах, а не общий LLM.
Хотя все эти модели выполняют одну и ту же задачу, с разной точностью, их размеры сильно различаются: от 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 разбивает большую загрузку на более мелкие фрагменты.
Загрузка и подготовка модели
Не блокируйте пользователя
Уделяйте приоритетное внимание удобству взаимодействия с пользователем: позвольте ключевым функциям работать, даже если модель ИИ еще не полностью загружена.
Укажите прогресс
Загружая модель, указывайте завершенный прогресс и оставшееся время.
- Если загрузка модели обрабатывается вашей клиентской библиотекой искусственного интеллекта, используйте статус выполнения загрузки, чтобы отобрази��ь его пользователю. Если эта функция недоступна, рассмотрите возможность создания проблемы, чтобы запросить ее (или внести свой вклад!).
- Если вы обрабатываете загрузку модели в своем собственном коде, вы можете получать модель частями с помощью библиотеки, например fetch-in-chunks , и отображать пользователю ход загрузки.
- Дополнительные советы см. в разделах «Рекомендации по анимированным индикаторам прогресса» и «Проектирование длительного ожидания и перерывов» .
Грамотно справляйтесь с перебоями в сети
Загрузка моделей может занять разное время в зависимости от их размера. Рассмотрим, как обрабатывать перебои в работе сети, если пользователь отключается от сети . По возможности сообщите пользователю о разрыве соединения и продолжите загрузку, когда соединение восстановится.
Ненадежное соединение — еще одна причина загружать частями.
Переложите дорогостоящие задачи веб-работнику
Дорогостоящие задачи, например этапы подготовки модели после загрузки, могут блокировать ваш основной поток, вызывая нервозность у пользова��елей. Передача этих задач веб-работнику помогает.
Н��й��ите демо-версию и полную реализацию на основе веб-воркера:
Во время вывода
Как только модель загружена и готова, вы можете запустить логический вывод. Вывод может быть дорогостоящим в вычислительном отношении.
Переместить вывод в веб-воркер
Если вывод происходит через WebGL, WebGPU или WebNN, он опирается на графический процессор. Это означает, что это происходит в отдельном процессе, который не блокирует пользовательский интерфейс.
Но для реализаций на базе ЦП (таких как Wasm, который может быть запасным вариантом для WebGPU, если WebGPU не поддерживается), перемещение вывода в веб-воркер сохраняет отзывчивость вашей страницы — точно так же, как во время подготовки модели.
Ваша реализация может быть проще, если весь ваш код, связанный с ИИ (выборка модели, подготовка модели, вывод), находится в одном и том же месте. Таким образом, вы можете выбрать веб-работника независимо от того, используется ли графический процессор.
Обработка ошибок
Даже ��сли вы проверили, что модель должна работать на устройстве, пользователь может позже запустить другой процесс, который в дальнейшем будет сильно потреблять ресурсы. Чтобы смягчить это:
- Обработка ошибок вывода . Заключите вывод в блоки
try/catchи обработайте соответствующие ошибки во время выполнения. - Обработка ошибок WebGPU , как неожиданных , так и GPUDevice.lost , которые возникают, когда графический процессор фактически сбрасывается из-за проблем с устройством.
Укажите статус вывода
Если вывод занимает больше времени, чем кажется на первый взгляд , сообщите пользователю, что модель думает. Используйте анимацию, чтобы облегчить ожидание и убедиться, что приложение работает должным образом.
Сделать вывод отменяемым
Позвольте пользователю уточнять свой запрос на лету, при этом система не будет тратить ресурсы на создание ответа, который пользователь никогда не увидит.