Melhore a performance e a UX da IA do lado do cliente

Maud Nalpas
Maud Nalpas

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 atributo? 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, 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 de vários fatores. 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 uma quebra precisa de caracteres em idiomas asiáticos, tem apenas 9,4 KB com GZip. 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.

No painel "Network" do Chrome DevTools, é o tamanho do download do modelo de detecção de idioma do MediaPipe. Demonstração.
No painel de rede do Chrome DevTools, o tamanho do download para modelos de IA genéricos: Gemma 2B (LLM pequeno), DistilBERT (NLP pequeno / LLM muito pequeno).

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. Modelos adaptados a uma determinada tarefa tendem a ser menores. Por exemplo, se você quiser realizar tarefas específicas, como análises de sentimento ou toxicidade, use modelos especializados nessas tarefas em vez de um LLM genérico.
Seletor de modelo para uma demonstração de transcrição baseada em IA do lado do cliente por j0rd1smit.

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, confira o que você pode fazer agora:

  • 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. É possível atenuar isso incluindo seu 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 imprecisos intencionalmente para impedir o uso de técnicas de impressão digital, mas ainda podem ajudar a eliminar dispositivos que parecem muito insuficientes.

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 o 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 apenas 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 tranquila do usuário: permita que os principais recursos funcionem mesmo que o modelo de IA ainda não esteja totalmente carregado.

Garanta que os usuários ainda possam postar.
Os usuários ainda podem postar a avaliação, mesmo quando o recurso de IA do lado do cliente ainda não estiver pronto. Demonstração de @maudnals.

Indicar progresso

Ao fazer o download do modelo, indique o progresso concluído e o tempo restante.

Exibição do progresso do download do modelo. Implementação personalizada com fetch-in-chunks. Demonstração de @tomayac.

Processar interrupções de rede de maneira adequada

Os downloads de modelos podem levar diferentes períodos, dependendo do tamanho. Pense em 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 fragmentada é outro motivo para fazer downloads em partes.

Transferir tarefas caras para um worker da Web

Tarefas caras, como etapas de preparação do modelo 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 web worker ajuda.

Encontre uma demonstração e uma implementação completa com base em um web worker:

Trace de desempenho no Chrome DevTools.
Parte de cima: com um worker da Web. Embaixo: nenhum 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 modelo, preparação de modelo, 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:

  • Como lidar com 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, sinalize 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.

Exemplo de animação durante a inferência.
Demonstração de @maudnals e @argyleink

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.