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.