Pubblicato il 13 novembre 2024, ultimo aggiornamento: 20 maggio 2025
| Spiegazione | Web | Estensioni | Stato di Chrome | Intenzione |
|---|---|---|---|---|
| MDN |  Chrome 138 |
Chrome 138 |
Visualizza | Intento di partecipare a un esperimento |
Utilizza l'API Translator in Chrome per tradurre il testo con i modelli di IA forniti nel browser.
Il tuo sito web potrebbe già offrire contenuti in più lingue per renderlo accessibile a un pubblico globale. Con l'API Translator, gli utenti possono contribuire nella loro lingua madre. Ad esempio, gli utenti possono partecipare alle chat di assistenza nella loro lingua madre e il tuo sito può tradurla nella lingua utilizzata dagli agenti dell'assistenza prima che esca dal dispositivo dell'utente. Ciò crea un'esperienza fluida, rapida e inclusiva per tutti gli utenti.
In genere, la traduzione dei contenuti sul web 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 le chiamate al server e il costo di hosting del servizio di traduzione.
Inizia
L'API Translator è disponibile da Chrome 138 stabile. Innanzitutto, esegui il rilevamento delle funzionalità per verificare se il browser supporta l'API Traduttore.
if ('Translator' in self) {
// The Translator API is supported.
}
Sebbene tu conosca sempre la lingua di destinazione per le traduzioni, potresti non conoscere sempre la lingua di origine. In questi casi, puoi utilizzare l'API Language Detector.
Esamina i requisiti hardware
Le API Language Detector e Translator funzionano su computer solo in Chrome.
Le API Prompt, Summarizer, Writer e Rewriter funzionano in Chrome quando vengono soddisfatte le seguenti condizioni:
- Sistema operativo: Windows 10 o 11; macOS 13 o versioni successive (da Ventura in poi); o Linux. Chrome per Android, iOS e ChromeOS non è ancora supportato dalle nostre API basate su Gemini Nano.
- Spazio di archiviazione: almeno 22 GB sul volume contenente il tuo profilo Chrome.
- GPU: almeno 4 GB di VRAM.
- Rete: dati illimitati o una connessione senza limiti di traffico.
Questi requisiti sono previsti per te nel processo di sviluppo e per gli utenti che lavorano con le funzionalità che crei.
Controllare il supporto delle coppie di lingue
La traduzione viene gestita con i pacchetti di lingue, scaricati su richiesta. Un pacchetto di lingue è 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 per procedere è necessario un download. 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 vengono interrotti e la promessa ready viene rifiutata.
Crea ed esegui il traduttore
Per creare un traduttore, chiama la funzione create()
asincrona. Richiede un parametro opzioni 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 translate() asincrono.
await translator.translate('Where is the next bus stop, please?');
// "Où est le prochain arrêt de bus, s'il vous plaît ?"
Traduzioni sequenziali
Le traduzioni vengono elaborate in sequenza. Se invii grandi quantità di testo da tradurre, le traduzioni successive vengono bloccate fino al completamento di quelle precedenti.
Per una risposta ottimale alle tue richieste, raggruppale e aggiungi un'interfaccia di caricamento, come una rotellina, per comunicare che la traduzione è in corso.
Demo
Puoi visualizzare l'API Translator, utilizzata in combinazione con l'API Language Detector, nel sandbox dell'API Translator e Language Detector.
Impegno di standardizzazione
Stiamo lavorando per standardizzare l'API Translator, in modo da garantire la compatibilità tra 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 un feedback al W3C Technical Architecture Group e a Mozilla e WebKit per conoscere le loro opinioni sugli standard.
Puoi partecipare allo sviluppo degli standard unendoti al gruppo della community Web Incubator.
Condividi feedback
Vogliamo vedere cosa stai creando con l'API Language Detector. Condividi con noi i tuoi siti web e le tue applicazioni web su X, YouTube e LinkedIn.
Per inviare feedback sull'implementazione di Chrome, invia una segnalazione di bug o una richiesta di funzionalità.