Traduzione con IA integrata

Thomas Steiner

Alexandra Klepper

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

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. Con l'API Translator, gli utenti possono scrivere nella loro lingua principale. Ad esempio, gli utenti possono partecipare alle chat di assistenza nella loro lingua principale e il tuo sito può tradurre il loro messaggio nella lingua principale degli agenti dell'assistenza prima che il messaggio lasci il dispositivo dell'utente. In questo modo, l'esperienza è fluida, veloce e inclusiva per tutti gli utenti.

La traduzione dei contenuti 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. Quando i contenuti sono effimeri e non richiedono il salvataggio in un database, la traduzione lato client consente di risparmiare tempo e costi rispetto a un servizio di traduzione ospitato.

Inizia

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 esperto addestrato per generare traduzioni di alta qualità. L'API è integrata in Chrome e il modello 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.

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.

Norme relative alle autorizzazioni, iframe e web worker

Per impostazione predefinita, l'API Translator è disponibile solo per le finestre di primo livello e per gli iframe con la stessa origine. L'accesso all'API può essere delegato agli iframe multiorigine utilizzando l'attributo Permissions Policy 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>

L'API Translator non è disponibile nei web worker a causa della complessità di stabilire un documento responsabile per ogni worker, al fine di controllare lo stato della Permissions Policy.

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