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.

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'

La funzione availability() restituisce una promessa con i seguenti valori:

• "unavailable": l'implementazione non supporta la traduzione o il rilevamento della lingua delle lingue specificate.
• "downloadable": l'implementazione supporta la traduzione o il rilevamento della lingua delle lingue specificate, ma è necessario un download per procedere. Il download potrebbe essere il modello del browser.
• "downloading": l'implementazione supporta la traduzione o il rilevamento della lingua delle lingue specificate. Il browser sta completando un download in corso nell'ambito della creazione dell'oggetto associato.
• "available": l'implementazione supporta la traduzione o il rilevamento della lingua delle lingue specificate e tutti i download richiesti sono già stati completati.

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, chiama la funzione asincrona create(). Richiede un parametro options con due campi, uno per sourceLanguage e uno per 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 garantire la compatibilità cross-browser.

La nostra proposta di API ha ricevuto il supporto della community ed è stata trasferita al W3C Web Incubator Community Group per ulteriori discussioni. Il team di Chrome ha richiesto feedback al W3C Technical Architecture Group e ha chiesto a Mozilla e WebKit le loro posizioni sugli standard.

Puoi partecipare all'iniziativa sugli standard unendoti al Web Incubator Community Group.

Condividi feedback

Vogliamo vedere cosa stai creando con l'API Language Detector. 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à.