Traduzione con IA integrata

Thomas Steiner

Alexandra Klepper

Data di pubblicazione: 13 novembre 2024, ultimo aggiornamento: 20 maggio 2025

Spiegazione	Web	Estensioni	Stato di Chrome	Intenzione
MDN	Chrome 138	Chrome 138	Visualizza	Intenzione di spedizione

Utilizza l'API Translator in Chrome per tradurre il testo con i modelli di AI forniti nel browser.

Il tuo sito web potrebbe già offrire contenuti in più lingue per renderli accessibili a un pubblico globale. Con l'API Translator, gli utenti possono contribuire nella loro lingua principale. Ad esempio, gli utenti possono partecipare alle chat di assistenza nella loro lingua principale e il tuo sito può tradurla nella lingua utilizzata dai tuoi agenti dell'assistenza prima che lasci il dispositivo dell'utente. In questo modo si crea un'esperienza fluida, rapida e inclusiva per tutti gli utenti.

La traduzione dei contenuti sul web in genere richiede l'utilizzo di un servizio cloud. Innanzitutto, i contenuti di origine vengono caricati su un server, che esegue la traduzione in una lingua di destinazione, quindi il testo risultante viene scaricato e restituito all' utente. Eseguendo la traduzione sul client, risparmi il tempo necessario per i viaggi del server e il costo dell'hosting del servizio di traduzione.

Inizia

L'API Translator è disponibile a partire dalla versione stabile di Chrome 138. Per prima cosa, esegui il rilevamento delle funzionalità per verificare se il browser supporta l'API Translator.

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

Anche se conosci sempre la lingua di destinazione delle traduzioni, potresti non conoscere sempre la lingua di origine. In questi casi, puoi utilizzare l'API Language Detector.

Download modello

L'API Translator utilizza un modello addestrato per generare riepiloghi di alta qualità. L'API è integrata in Chrome e un modello esperto viene scaricato la prima volta che un sito web la utilizza.

Per determinare se il modello è pronto per l'uso, chiama la funzione asincrona Translator.availability(). Se la risposta a availability() è downloadable, ascolta l'avanzamento del download per informare l'utente, poiché potrebbe richiedere del tempo.

const availability = await Translator.availability();

Controllare il supporto delle coppie di lingue

La traduzione viene gestita con i language pack, scaricati on demand. Un pacchetto linguistico è come un dizionario per una determinata lingua.

• sourceLanguage: La lingua corrente del testo.
• targetLanguage: la lingua finale in cui deve essere tradotto il testo.

Utilizza i codici brevi delle lingue BCP 47 come stringhe. Ad esempio, 'es' per lo spagnolo o 'fr' per il francese.

const translatorCapabilities = await Translator.availability({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
});
// 'available'

Ascolta l'avanzamento del download del modello con l'evento downloadprogress:

const translator = await Translator.create({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

Se il download non va a buon fine, gli eventi downloadprogress si interrompono e la promessa ready viene rifiutata.

Crea ed esegui il traduttore

Per creare un traduttore, verifica l'attivazione dell'utente e chiama la funzione asincrona create(). La funzione Translator create() richiede un parametro options con due campi, uno per la sourceLanguage e uno per la targetLanguage.

// Create a translator that translates from English to French.
const translator = await Translator.create({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
});

Una volta trovato un traduttore, chiama il numero asincrono translate().

await translator.translate('Where is the next bus stop, please?');
// "Où est le prochain arrêt de bus, s'il vous plaît ?"

In alternativa, se devi gestire testi più lunghi, puoi anche utilizzare la versione di streaming dell'API e chiamare translateStreaming().

const stream = translator.translateStreaming(longText);
for await (const chunk of stream) {
  console.log(chunk);
}

Traduzioni sequenziali

Le traduzioni vengono elaborate in sequenza. Se invii grandi quantità di testo da tradurre, le traduzioni successive vengono bloccate finché non vengono completate quelle precedenti.

Per ottenere la risposta migliore alle tue richieste, raggruppale e aggiungi un'interfaccia di caricamento, ad esempio una rotellina, per comunicare che la traduzione è in corso.

Demo

Puoi vedere l'API Translator, utilizzata in combinazione con l'API Language Detector, nel playground dell'API Translator e Language Detector.

Impegno di standardizzazione

Stiamo lavorando per standardizzare l'API Translator per la compatibilità cross-browser.

L'API Translator e l'API Language Detector sono state adottate dal W3C WebML Working Group. Abbiamo chiesto a Mozilla e WebKit le loro posizioni sugli standard.

Condividi feedback

Vogliamo vedere cosa stai creando. Condividi i tuoi siti web e applicazioni web con noi su X, YouTube e LinkedIn.

Per inviare feedback sull'implementazione di Chrome, compila una segnalazione di bug o una richiesta di funzionalità.