Embora a maioria dos recursos de IA na Web dependa de servidores, a IA do lado do cliente é executada diretamente no navegador do usuário. Isso oferece benefícios como baixa latência, redução de custos do lado do servidor, sem requisitos de chave de API, maior privacidade do usuário e acesso off-line. É possível implementar a IA do lado do cliente que funciona em vários navegadores com bibliotecas JavaScript, como TensorFlow.js, Transformers.js e MediaPipe GenAI.
A IA do lado do cliente também apresenta desafios de desempenho: os usuários precisam fazer o download de mais arquivos, e o navegador precisa trabalhar mais. Para que funcione bem, considere:
- Seu caso de uso. A IA do lado do cliente é a escolha certa para seu recurso? Seu recurso está em uma jornada ideal do usuário? Se sim, você tem uma alternativa?
- Práticas recomendadas para download e uso de modelos. Continue lendo para saber mais.
Antes do download do modelo
Biblioteca de modelos e tamanho do modelo
Para implementar a IA do lado do cliente, você vai precisar de um modelo e, geralmente, de uma biblioteca. Ao escolher a biblioteca, avalie o tamanho dela como faria com qualquer outra ferramenta.
O tamanho do modelo também é importante. O que é considerado grande para um modelo de IA depende. 5 MB pode ser uma regra geral útil: é também o percentil 75 do tamanho médio da página da Web. Um número mais flexível seria 10 MB.
Confira algumas considerações importantes sobre o tamanho do modelo:
- Muitos modelos de IA específicos para tarefas podem ser muito pequenos. Um modelo como o BudouX, para divisão precisa de caracteres em idiomas asiáticos, tem apenas 9,4 KB compactados. O modelo de detecção de idioma do MediaPipe é de 315 KB.
- Até mesmo modelos de visão podem ter um tamanho razoável. O modelo Handpose e todos os recursos relacionados totalizam 13,4 MB. Embora seja muito maior do que a maioria dos pacotes de front-end minimizados, ele é comparável à página da Web média, que é de 2,2 MB (2,6 MB no computador).
- Os modelos de IA generativa podem exceder o tamanho recomendado para recursos da Web. O DistilBERT, que é considerado um LLM muito pequeno ou um modelo simples de NLP (as opiniões variam), pesa 67 MB. Mesmo LLMs pequenos, como Gemma 2B, podem chegar a 1,3 GB. Isso é mais de 100 vezes o tamanho da página da Web média.
É possível avaliar o tamanho exato de download dos modelos que você planeja usar com as ferramentas para desenvolvedores dos navegadores.
Otimizar o tamanho do modelo
- Compare a qualidade do modelo e os tamanhos de download. Um modelo menor pode ter precisão suficiente para seu caso de uso, mesmo sendo muito menor. O ajuste fino e as técnicas de redução de modelo existem para reduzir significativamente o tamanho de um modelo, mantendo a precisão suficiente.
- Escolha modelos especializados sempre que possível. Os modelos adaptados a uma determinada tarefa tendem a ser menores. Por exemplo, se você quiser realizar tarefas específicas, como análise de sentimento ou toxicidade, use modelos especializados nessas tarefas em vez de um LLM genérico.
Embora todos esses modelos realizem a mesma tarefa, com precisão variável, os tamanhos deles variam muito: de 3 MB a 1,5 GB.
Verificar se o modelo pode ser executado
Nem todos os dispositivos podem executar modelos de IA. Mesmo dispositivos com especificações de hardware suficientes podem ter problemas se outros processos caros estiverem em execução ou forem iniciados enquanto o modelo estiver em uso.
Até que uma solução esteja disponível, faça o seguinte:
- Confira se há suporte para a WebGPU. Várias bibliotecas de IA do lado do cliente, incluindo Transformers.js versão 3 e MediaPipe, usam a WebGPU. No momento, algumas dessas bibliotecas não usam automaticamente o Wasm se o WebGPU não tiver suporte. Para evitar isso, inclua o código relacionado à IA em uma verificação de detecção de recursos da WebGPU, se você souber que a biblioteca de IA do lado do cliente precisa da WebGPU.
- Eliminar dispositivos com pouca energia. Use Navigator.hardwareConcurrency, Navigator.deviceMemory e a API Compute Pressure para estimar os recursos e a pressão do dispositivo. Essas APIs não têm suporte em todos os navegadores e são intencionalmente imprecisas para evitar a impressão digital, mas ainda podem ajudar a descartar dispositivos que parecem ter pouca potência.
Indicar downloads grandes
Para modelos grandes, avise os usuários antes do download. Os usuários de computadores têm mais probabilidade
de aceitar downloads grandes do que os usuários de dispositivos móveis. Para detectar dispositivos móveis, use
mobile
da API User Agent Client Hints (ou a string User-Agent se a UA-CH não for
compatível).
Limitar downloads grandes
- Faça o download apenas do necessário. Faça o download do modelo apenas quando tiver certeza razoável de que os recursos de IA serão usados, especialmente se ele for grande. Por exemplo, se você tiver um recurso de IA de sugestão de digitação, faça o download somente quando o usuário começar a usar os recursos de digitação.
- Armazene o modelo em cache de forma explícita no dispositivo usando a API Cache para evitar o download dele em cada visita. Não confie apenas no cache do navegador HTTP implícito.
- Divida o download do modelo. O fetch-in-chunks divide um download grande em partes menores.
Download e preparação do modelo
Não bloquear o usuário
Priorize uma experiência do usuário tranquila: permita que os principais recursos funcionem mesmo que o modelo de IA ainda não esteja totalmente carregado.
Indicar progresso
Ao fazer o download do modelo, indique o progresso concluído e o tempo restante.
- Se os downloads de modelos forem processados pela biblioteca de IA do lado do cliente, use o status de progresso do download para mostrar ao usuário. Se esse recurso não estiver disponível, abra um problema para solicitar (ou contribuir com ele).
- Se você processa downloads de modelos no seu próprio código, é possível buscar o modelo em
fragmentos usando uma biblioteca, como
fetch-in-chunks,
e mostrar o progresso do download para o usuário.
- Para mais conselhos, consulte Práticas recomendadas para indicadores de progresso animados e Design para esperas e interrupções longas.
Processar interrupções de rede de maneira adequada
Os downloads de modelos podem levar tempos diferentes, dependendo do tamanho. Considere como lidar com interrupções de rede se o usuário ficar off-line. Quando possível, informe ao usuário que a conexão está interrompida e continue o download quando a conexão for restabelecida.
A conectividade instável é outro motivo para fazer o download em partes.
Transferir tarefas caras para um worker da Web
Tarefas caras, como etapas de preparação de modelos após o download, podem bloquear a linha de execução principal, causando uma experiência instável para o usuário. Transferir essas tarefas para um worker da Web ajuda.
Encontre uma demonstração e uma implementação completa com base em um worker da Web:
Durante a inferência
Depois que o modelo for transferido por download e estiver pronto, será possível executar a inferência. A inferência pode ser computacionalmente cara.
Mover a inferência para um worker da Web
Se a inferência ocorrer pelo WebGL, WebGPU ou WebNN, ela vai depender da GPU. Isso significa que ocorre em um processo separado que não bloqueia a interface.
No entanto, para implementações baseadas em CPU, como Wasm, que pode ser um substituto para WebGPU, se ela não tiver suporte, mover a inferência para um worker da Web mantém a página responsiva, assim como durante a preparação do modelo.
Sua implementação pode ser mais simples se todo o código relacionado à IA (busca de modelos, preparação de modelos, inferência) estiver no mesmo lugar. Portanto, você pode escolher um worker da Web, independentemente de a GPU estar em uso ou não.
Solucionar erros
Mesmo que você tenha verificado que o modelo precisa ser executado no dispositivo, o usuário pode iniciar outro processo que consome recursos extensivamente mais tarde. Para mitigar isso:
- Processe erros de inferência. Encapsule a inferência em blocos
try
/catch
e processe os erros de execução correspondentes. - Processar erros da WebGPU, inesperados e GPUDevice.lost, que ocorre quando a GPU é redefinida porque o dispositivo tem problemas.
Indicar o status da inferência
Se a inferência levar mais tempo do que o imediato, indique ao usuário que o modelo está pensando. Use animações para facilitar a espera e garantir ao usuário que o aplicativo está funcionando conforme o esperado.
Cancelar a inferência
Permita que o usuário refine a consulta em tempo real, sem que o sistema desperdice recursos gerando uma resposta que o usuário nunca vai ver.