Criando um Mini Chat com IA no Navegador usando Transformers.js

Rodando Modelos de IA no navegador

A Biblioteca Transformers, , criada pela Hugging Face, revolucionou o uso de inteligência artificial em linguagem natural. Com ela, qualquer desenvolvedor pode acessar modelos poderosos como BERT, GPT_2, T5, WHISPER e muitos outros, todos prontos para tarefas como geração de texto, tradução, sumarização, classificação e até reconhecimento de fala.

Por exemplo, com poucas linhas em Python, já é possível gerar texto com o GPT-2:

from transformers import pipeline


gerador = pipeline("text-generation", model="gpt2")
resposta = gerador("Hoje o dia está", max_new_tokens=30)
print(resposta[0]["generated_text"])

Esse código roda um modelo de linguagem pré-treinado que continua a frase com base em padrões aprendidos em grandes quantidades de texto.

Mas até pouco tempo atrás, isso só era possível com python, normalmente em servidores com GPU ou ambientes de nuvem. Agora, graças à biblioteca Transformers.js, essa mesma tecnologia chegou ao Javascript, e o melhor:

Você pode rodar modelos diretamente no navegador, sem backend, sem servidor e sem Python.

O que é o Transformers.js

A Hugging Face lançou a biblioteca Transformers.js, que traz os mesmos modelos da versão python para o javascript. Ele utiliza WebAssembly (WASM) e WebGPU para rodar modelos de IA de texto, imagem e áudio localmente, tudo no navegador.

Isso significa que agora é possível criar aplicações que:

rodam 100% localmente, com privacidade total;
funcionam offline (após o modelo ser carregado uma vez);
e podem ser compartilhadas facilmente, pois tudo está em HTML, CSS e JS.

Chat com IA no navegador

Vamos criar um mini chat com IA, onde o modelo responde mensagens digitadas pelo usuário.

Tudo será feito com HTML, CSS e Javascript puro.

É importante que você rode o projeto usando a extensão Live Server no visual studio code para evitar alguns problemas que podem surgir na hora de carregar o modelo LLM.

Vamos começar criando uma tela simples de chat no nosso index.html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <title>Chat com Transformers.js</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="chat-container">
      <div class="chat-header">
          <h1>Chat</h1>
      </div>
      <div id="chatOutput"></div>
      <div class="input-area">
          <input id="userInput" placeholder="Digite sua mensagem..." />
          <button id="sendBtn">Enviar</button>
      </div>      
  </div> 
  <script type="module" src="script.js"></script>
</body>
</html>

Agora vamos adicionar um pouco de estilo para deixar o chat mais agradável. No nosso style.css coloque o seguinte código:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}


.chat-container {
  background: white;
  border-radius: 15px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 600px;
  height: 600px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


.chat-header {
  background: #007bff;
  color: white;
  padding: 20px;
  text-align: center;
}


.header h1 {
  font-size: 24px;
  margin-bottom: 5px;
}


#chatOutput {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f5f5f5;
}


.input-area {
  padding: 20px;
  background: white;
  border-top: 1px solid #e0e0e0;
  display: flex;
  gap: 10px;
}


#userInput {
  flex: 1;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}


#userInput:focus {
  border-color: #4f46e5;
}


#sendBtn {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.2, opacity 0.2;
}


#sendBtn:hover {
  background: #0056b3;
  transform: translateY(-2px);
}


#sendBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


.message {
  margin-bottom: 15px;
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 80%;
  word-wrap: break-word;
}


.message.user {
  background: #007bff;
  color: white;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}


.message.bot {
  background: white;
  color: #333;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

Agora vem a parte mais interessante. Vamos criar um pequeno chat que usa o modelo DistilGPT2 para gerar respostas simples. Primeiro iremos importar a função pipeline diretamente do CDN da Xenova no nosso script.js:

import { pipeline } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.0";

Essa função é a principal porta de entrada da biblioteca, ela permite carregar modelos já treinados da Hugging Face e usá-los com poucas linhas de código

const chat = await pipeline('text-generation', 'Xenova/distilgpt2');

O pipeline prepara um modelo de geração de texto usando o DistilGPT2, uma versão compacta do GPT-2.

O modelo é carregado e convertido automaticamente para um formato compatível com o navegador (via WebAssembly).

Depois disso, podemos usar a variável chat como uma função que recebe texto e devolve texto gerado.

const response = await chat(userMessage, { max_new_tokens: 100, temperature: 0.8, top_p: 0.9, repetition_penalty: 1.2 });

max_new_tokens: número máximo de tokens gerados.
temperature: aumenta a criatividade (valores maiores = respostas mais variadas).
top_p: controla a diversidade da saída.
repetition_penalty: evita repetições de palavras.

O nosso código completo fica assim:

import { pipeline } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.0";


const chat = await pipeline('text-generation', 'Xenova/distilgpt2');


const input = document.getElementById('userInput');
const output = document.getElementById('chatOutput');
const button = document.getElementById('sendBtn');


button.addEventListener('click', async () => {
const userMessage = input.value;
const user = document.createElement('div');
user.className = 'message user';
user.textContent = userMessage;
output.appendChild(user);


const response = await chat(userMessage, { max_new_tokens: 100, temperature: 0.8, top_p: 0.9, repetition_penalty: 1.2 });
const bot = document.createElement('div');
bot.className = 'message bot';
bot.textContent = response[0].generated_text;
output.appendChild(bot);


input.value = '';
});

Conclusão

O transformers.js abre uma nova era para quem quer experimentar inteligência artificial sem depender de servidores.

Agora é possível criar chats, tradutores, analisadores de texto e muito mais, diretamente no navegador, usando apenas javascript.

Se antes a IA era restrita a quem tinha GPU e infraestrutura pesada, agora qualquer desenvolvedor pode explorar modelos de linguagem localmente e até offline.