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.
Revisar os requisitos de hardware
Os desenvolvedores e usuários que operam recursos usando essas APIs no Chrome precisam atender aos seguintes requisitos. Outros navegadores podem ter requisitos operacionais diferentes.
As APIs Language Detector e Translator funcionam no Chrome em computadores. Essas APIs não funcionam em dispositivos móveis. As APIs Prompt, Summarizer, Writer e Rewriter funcionam no Chrome quando as seguintes condições são atendidas:
- Sistema operacional: Windows 10 ou 11, macOS 13 ou mais recente (Ventura e versões posteriores) ou Linux. O Chrome para Android, iOS e ChromeOS ainda não é compatível com as APIs que usam o Gemini Nano.
- Armazenamento: pelo menos 22 GB no volume que contém seu perfil do Chrome.
- GPU: mais de 4 GB de VRAM.
- Rede: dados ilimitados ou uma conexão ilimitada.
O tamanho exato do Gemini Nano pode variar um pouco. Para encontrar o tamanho atual, acesse
chrome://on-device-internals e clique em Status do modelo.
Abra o Caminho do arquivo listado para determinar o tamanho do modelo.
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 ?"
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.