Tradução com IA integrada

Thomas Steiner

Alexandra Klepper

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

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. Com a API Translator, os usuários podem escrever no idioma materno. Por exemplo, os usuários podem participar de chats de suporte no idioma principal deles, e seu site pode traduzir a mensagem para o idioma principal dos agentes de suporte antes que ela saia 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 da 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. Quando o conteúdo é efêmero e não precisa ser salvo em um banco de dados, a tradução do lado do cliente economiza tempo e custos em comparação com um serviço de tradução hospedado.

Primeiros passos

Execute a detecção de recursos para saber 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 especializado treinado para gerar traduções de alta qualidade. A API é integrada ao Chrome, e o modelo é 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.

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 vão parar 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 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 host site 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>

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.

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.