RAG no navegador custa 23 MB de download: como eu decidiria entre WebGPU e backend

Montei uma busca semântica que roda inteira no navegador, e o servidor de inferência saiu da arquitetura. O preço apareceu em outro lugar: 23 MB de modelo baixados no primeiro clique, ou cerca de 45 MB quando a GPU está disponível. RAG on-device é isso, trocar custo de servidor por download e pelo aparelho de quem usa.

O que a demo faz

É o terceiro item da série Frontend com IA: 03-on-device-ai, em TypeScript estrito. A página só carrega o modelo Xenova/all-MiniLM-L6-v2, via transformers.js, quando a pessoa clica. Depois gera embeddings de doze textos curtos, compara a consulta com cosseno em memória e devolve os três mais próximos, com o tempo de cada etapa. Este link já abre com a consulta “vector search without a server”.

A decisão que importa está em poucas linhas de src/embed.ts (trecho resumido, sem as mensagens de progresso):

if (await hasWebGPU()) {
  try {
    return await create(pipeline, 'webgpu', 'fp16', onProgress);
  } catch (error) {
    console.warn('WebGPU falhou, vou para WASM.', error);
  }
}
return create(pipeline, 'wasm', 'q8', onProgress);

Com WebGPU, o modelo roda na GPU com pesos fp16. Sem WebGPU, ou se a GPU falhar, ele cai para WASM na CPU com pesos q8. No repositório do modelo no Hugging Face, esses arquivos têm cerca de 45 MB e 23 MB. O MDN ainda marca WebGPU como disponibilidade limitada, então o fallback faz parte do produto.

Os três ganhos, e onde cada um cobra

Privacidade. A consulta não sai do aparelho: a demo mostra zero requisições ao servidor na busca. Mas o modelo veio do Hugging Face na primeira carga, e os documentos precisam estar no cliente. Se cada usuário só pode ver parte deles, o problema virou autorização.

Custo de inferência. Cada busca roda na máquina de quem usa, então a conta não cresce com o uso. Mas o custo mudou de lugar: download, memória e bateria do usuário.

Latência. Com o modelo em cache, a busca não paga rede. Mas a primeira vez paga o download inteiro, e um celular em WASM fica mais lento do que uma GPU. A demo mostra na tela o backend que rodou e os tempos, então dá para ver no seu aparelho em vez de confiar no meu.

Pera. Tem uma limitação que pesa mais do que as três. Esse modelo foi treinado em inglês, por isso os textos da demo estão em inglês. E o card do modelo avisa que entrada acima de 256 word pieces é truncada. Para um produto em português, eu trocaria de modelo e mediria tudo de novo.

Como eu decidiria

Penso nisso como levar marmita. Sai mais barato e ninguém vê o que você come, mas alguém carrega o peso e o cardápio é curto.

Eu colocaria no navegador quando o conjunto é pequeno e já pode estar no cliente (ajuda do produto, catálogo público, dados do próprio usuário), quando a privacidade da consulta pesa e quando a busca se repete muito.

Eu manteria no backend quando o índice é grande ou muda toda hora, quando há permissão por documento, quando a qualidade exige um modelo maior ou multilíngue, ou quando o público tem aparelho fraco e rede ruim na primeira carga.

O README da demo diz que cosseno em memória, com vetores normalizados, chega para um conjunto pequeno. Doze textos é pouco. Eu não testei com milhares, então não afirmaria nada além disso.

Onde isso vira plataforma de IA

Quando parte do RAG roda no cliente, a plataforma precisa tratar o modelo de embedding como contrato. Vetor gerado por um modelo não se compara com vetor de outro, então modelo, versão e índice andam juntos. Também precisa decidir de onde o modelo é baixado e registrar o backend que realmente rodou. A demo já mostra webgpu / fp16 ou wasm / q8 na tela. Em produção, eu mandaria isso para a telemetria antes de discutir custo.

Antes de subir um serviço de embeddings, eu faria uma pergunta ao time: quantos documentos o usuário realmente precisa buscar? Se a resposta cabe no aparelho, abra a demo no seu e veja qual backend rodou. O código está no repositório frontend-ia-demos, e as outras demos da série estão em eliseu.dev/projects.

Fontes

• Código da demo 03-on-device-ai, repositório frontend-ia-demos
• Demo no ar com a consulta do post
• Arquivos ONNX do Xenova/all-MiniLM-L6-v2 e card do all-MiniLM-L6-v2, Hugging Face
• Mapeamento de dtype do transformers.js (q8 usa o arquivo _quantized)
• WebGPU API, MDN