Transformers.js v4: como rodar IA local no navegador (e até no Node) com WebGPU

Se você quer colocar IA 100% local no seu site/app sem depender de API paga, o preview do Transformers.js v4 é uma das novidades mais práticas do momento: novo runtime WebGPU reescrito em C++, mais modelos suportados e uma base melhor para performance.

Fonte principal

Este guia foi baseado no anúncio oficial da Hugging Face: Transformers.js v4 Preview: Now Available on NPM!

O que mudou no v4 (o que importa na prática)

Novo runtime WebGPU (reescrito em C++): foco pesado em performance e cobertura de operadores.
Mesmo código em mais ambientes: dá para usar em browser e também em runtimes JS do lado do servidor (Node/Bun/Deno) com aceleração WebGPU quando disponível.
Melhor experiência offline: cache local de arquivos WASM, permitindo uso sem internet depois do primeiro carregamento.
Build mais leve e rápido: migração para esbuild (bundle menor e builds muito mais rápidos).

Passo a passo: instalando o preview do Transformers.js v4

No seu projeto JS, instale a versão next:

npm i @huggingface/transformers@next

Dica rápida: se você estiver construindo algo para usuários finais, trate o v4 como preview. Trave versões (package-lock) e teste em alguns navegadores/GPUs antes de colocar em produção.

3 insights aplicáveis (para você usar hoje)

1) Use WebGPU como “turbo”, mas planeje fallback

WebGPU não está igualmente disponível/estável em todos os dispositivos. O caminho seguro é: detectar suporte, usar WebGPU quando der e ter um fallback (ex.: WASM/CPU) para não quebrar a experiência.

2) Pense em cache como parte do produto (não como detalhe técnico)

O v4 destaca suporte offline via cache local de WASM. Na prática, isso reduz latência e custo de banda, e deixa o app “instantâneo” depois do primeiro uso. Se você publica PWA ou app web, isso é ouro para retenção.

3) Separe tokenização da inferência quando fizer sentido

A Hugging Face também trouxe um pacote de tokenização separado (@huggingface/tokenizers) focado em ser leve e tipado. Isso pode simplificar projetos que só precisam do tokenizer (ou que querem controlar melhor o pipeline).

Mini-checklist para colocar em um projeto real

Escolha 1 caso de uso simples (ex.: embeddings, classificação, resumo curto) e valide performance.
Teste em pelo menos 2 classes de hardware (notebook + celular) e 2 navegadores.
Meça: tempo do 1º carregamento vs. tempo após cache.
Deixe claro para o usuário quando a IA roda localmente (e o que é baixado).

Pergunta para você

Você usaria IA local no navegador para qual tarefa primeiro: embeddings, chat, resumo ou extração de dados?

FRI – Ficando Rico Com [IA]