Tradução com IA integrada

Thomas Steiner

Alexandra Klepper

Publicado em 13 de novembro de 2024. Última atualização: 20 de maio de 2025

Explicação	Web	Extensões	Status do Chrome	Intenção
MDN	Chrome 138	Chrome 138	Ver	Intenção de envio

Use a API Translator no Chrome para traduzir textos com modelos de IA fornecidos no navegador.

Seu site já pode oferecer conteúdo em vários idiomas para torná-lo acessível a um público global. Com a API Translator, os usuários podem contribuir no idioma materno. Por exemplo, os usuários podem participar de chats de suporte no idioma materno, e seu site pode traduzir para o idioma usado pelos agentes de suporte antes de sair do dispositivo do usuário. Isso cria uma experiência tranquila, rápida e inclusiva para todos os usuários.

A tradução de conteúdo na Web geralmente exige o uso de um serviço de nuvem. Primeiro, o conteúdo de origem é enviado para um servidor, que executa a tradução para um idioma de destino. Em seguida, o texto resultante é baixado e retornado ao usuário. Ao executar a tradução no cliente, você economiza o tempo necessário para viagens do servidor e o custo de hospedagem do serviço de tradução.

Primeiros passos

A API Translator está disponível a partir do Chrome 138 estável. Primeiro, execute a detecção de recursos para verificar se o navegador é compatível com a API Translator.

if ('Translator' in self) {
  // The Translator API is supported.
}

Embora você sempre saiba o idioma de destino das traduções, nem sempre conhece o idioma de origem. Nesses casos, você pode usar a API Language Detector.

Verificar o suporte a pares de idiomas

A tradução é gerenciada com pacotes de idiomas baixados sob demanda. Um pacote de idioma é como um dicionário para um determinado idioma.

• sourceLanguage: o idioma atual do texto.
• targetLanguage: o idioma final para o qual o texto será traduzido.

Use códigos curtos de idioma BCP 47 como strings. Por exemplo, 'es' para espanhol ou 'fr' para francês.

const translatorCapabilities = await Translator.availability({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
});
// 'available'

A função availability() retorna uma promessa com os seguintes valores:

• "unavailable": a implementação não oferece suporte à tradução ou à detecção de idioma dos idiomas especificados.
• "downloadable": a implementação oferece suporte à tradução ou à detecção de idioma dos idiomas especificados, mas é necessário fazer um download para continuar. O download pode ser o modelo do navegador.
• "downloading": a implementação oferece suporte à tradução ou à detecção de idioma dos idiomas especificados. O navegador está concluindo um download em andamento como parte da criação do objeto associado.
• "available": a implementação oferece suporte à tradução ou à detecção de idioma dos idiomas especificados, e todos os downloads necessários já foram concluídos.

Detecte o progresso do download do modelo com o evento downloadprogress:

const translator = await Translator.create({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

Se o download falhar, os eventos downloadprogress serão interrompidos e a promessa ready será rejeitada.

Criar e executar o tradutor

Para criar um tradutor, chame a função assíncrona create(). Ele exige um parâmetro de opções com dois campos, um para o sourceLanguage e outro para o targetLanguage.

// Create a translator that translates from English to French.
const translator = await Translator.create({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
});

Depois de ter um tradutor, chame o translate() assíncrono.

await translator.translate('Where is the next bus stop, please?');
// "Où est le prochain arrêt de bus, s'il vous plaît ?"

Como alternativa, se você precisar lidar com textos mais longos, use a versão de streaming da API e chame translateStreaming().

const stream = translator.translateStreaming(longText);
for await (const chunk of stream) {
  console.log(chunk);
}

Traduções sequenciais

As traduções são processadas sequencialmente. Se você enviar grandes quantidades de texto para serem traduzidas, as traduções subsequentes serão bloqueadas até que as anteriores sejam concluídas.

Para receber a melhor resposta às suas solicitações, agrupe-as e adicione uma interface de carregamento, como um spinner, para indicar que a tradução está em andamento.

Demonstração

Confira a API Translator, usada em combinação com a API Language Detector, no playground da API Translator e Language Detector.

Esforço de padronização

Estamos trabalhando para padronizar a API Translator e garantir a compatibilidade entre navegadores.

Nossa proposta de API recebeu apoio da comunidade e foi transferida para o W3C Web Incubator Community Group para mais discussões. A equipe do Chrome pediu feedback ao Grupo de Arquitetura Técnica do W3C e solicitou à Mozilla e ao WebKit as posições deles sobre padrões.

Para participar do esforço de padronização, entre no Web Incubator Community Group (em inglês).

Compartilhar feedback

Queremos saber o que você está criando com a API Language Detector. Compartilhe seus sites e aplicativos da Web com a gente no X, YouTube e LinkedIn.

Para enviar feedback sobre a implementação do Chrome, registre um relatório de bug ou uma solicitação de recurso.