Хотя большинство функций ИИ в Интернете зависят от серверов, ИИ на стороне клиента работает непосредственно в браузере пользователя. Это дает такие преимущества, как низкая задержка, снижение затрат на стороне сервера, отсутствие требований к ключам 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 , которые возникают, когда графический процессор фактически сбрасывается из-за проблем с устройством.
Укажите статус вывода
Если вывод занимает больше времени, чем кажется на первый взгляд , сообщите пользователю, что модель думает. Используйте анимацию, чтобы облегчить ожидание и убедиться, что приложение работает должным образом.
Сделать вывод отменяемым
Позвольте пользователю уточнять свой запрос на лету, при этом система не будет тратить ресурсы на создание ответа, который пользователь никогда не увидит.
,
Хотя большинство функций ИИ в Интернете зависят от серверов, ИИ на стороне клиента работает непосредственно в браузере пользователя. Это дает такие преимущества, как низкая задержка, снижение затрат на стороне сервера, отсутствие требований к ключам 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 , которые возникают, когда графический процессор фактически сбрасывается из-за проблем с устройством.
Укажите статус вывода
Если вывод занимает больше времени, чем кажется на первый взгляд , сообщите пользователю, что модель думает. Используйте анимацию, чтобы облегчить ожидание и убедиться, что приложение работает должным образом.
Сделать вывод отменяемым
Позвольте пользователю уточнять свой запрос на лету, при этом система не будет тратить ресурсы на создание ответа, который пользователь никогда не увидит.