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.

Download do modelo

A API Translator usa um modelo treinado para gerar resumos de alta qualidade. A API é integrada ao Chrome, e um modelo especializado é baixado na primeira vez que um site usa essa API.

Para determinar se o modelo está pronto para uso, chame a função assíncrona Translator.availability(). Se a resposta a availability() for downloadable, aguarde o progresso do download para informar o usuário, já que pode levar algum tempo.

const availability = await Translator.availability();

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'

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, verifique a ativação do usuário e chame a função assíncrona create(). A função create() do Translator 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.

Política de permissões, iframes e Web Workers

Por padrão, a API Translator está disponível apenas para janelas de nível superior e para os iframes de mesma origem. O acesso à API pode ser delegado a iframes de origem cruzada usando o atributo allow="" da política de permissões:

<!--
  The hosting site at https://main.example.com can grant a cross-origin iframe
  at https://cross-origin.example.com/ access to the Translator API by
  setting the `allow="translator"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="translator"></iframe>

No momento, a API Translator não está disponível em Web Workers devido à complexidade de estabelecer um documento responsável para cada worker e verificar o status da política de permissões.

Esforço de padronização

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

A API Translator e a API Language Detector foram adotadas pelo Grupo de trabalho WebML do W3C. Pedimos à Mozilla e ao WebKit as posições deles sobre padrões.

Compartilhar feedback

Queremos saber o que você está criando. 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.