Tradução com IA integrada

Thomas Steiner

Alexandra Klepper

Publicado em 13 de novembro de 2024 e atualizado pela última vez em 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 materno, e seu site pode traduzir a mensagem para o idioma materno dos agentes de suporte, antes que a mensagem 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 é temporário e não justifica o salvamento em um banco de dados, a tradução do lado do cliente economiza tempo e custo em relação a um serviço de tradução hospedado.

Primeiros passos

Execute a detecção de recursos para saber se o navegador oferece suporte à API Translator.

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

Embora você sempre saiba o idioma de destino das traduções, nem sempre é possível saber o idioma de origem. Nesses casos, use a API Language Detector.

Download do modelo

A API Translator usa um modelo de especialista 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, detecte o progresso do download para informar o usuário sobre o progresso, já que isso 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 idiomas é como um dicionário para um determinado idioma.

• sourceLanguage: o idioma atual do texto.
• targetLanguage: o idioma final para o qual o texto precisa 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 requer um parâmetro de opções com dois campos, um para sourceLanguage e outro para 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, também poderá usar a versão de streaming da API e chamar 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 tradução, as traduções subsequentes serão bloqueadas até que as anteriores sejam concluídas.

Para 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.

Idiomas compatíveis

Os idiomas a seguir são compatíveis com a implementação da API Translator do Chrome.

Demonstração

Você pode conferir 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 só está disponível 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 Política de Permissões allow="":

<!--
  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, a fim de 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 conosco no X, YouTube, e LinkedIn.

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