Vertaling met ingebouwde AI

Thomas Steiner

Alexandra Klepper

Gepubliceerd: 13 november 2024, Laatst bijgewerkt: 20 mei 2025

Gebruik de Translator API in Chrome om tekst te vertalen met behulp van AI-modellen in de browser.

Mogelijk biedt uw website al content in meerdere talen aan. Met de Translator API kunnen gebruikers in hun moedertaal schrijven. Zo kunnen gebruikers bijvoorbeeld deelnemen aan supportchats in hun moedertaal, en uw site kan hun bericht vertalen naar de moedertaal van uw supportmedewerkers voordat het bericht het apparaat van de gebruiker verlaat. Dit zorgt voor een soepele, snelle en inclusieve ervaring voor alle gebruikers.

Vertaling van webcontent vereist doorgaans het gebruik van een cloudservice. Eerst wordt de broncontent geüpload naar een server, die de vertaling naar een doeltaal uitvoert. Vervolgens wordt de resulterende tekst gedownload en teruggestuurd naar de gebruiker. Wanneer de content vluchtig is en niet in een database hoeft te worden opgeslagen, bespaart client-side vertaling tijd en kosten ten opzichte van een gehoste vertaalservice.

Aan de slag

Voer functiedetectie uit om te controleren of de browser de Translator API ondersteunt.

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

Hoewel u altijd de doeltaal van vertalingen kent, weet u mogelijk niet altijd de brontaal. In dergelijke gevallen kunt u de Language Detector API gebruiken.

Model downloaden

De Translator API maakt gebruik van een expertmodel dat is getraind om vertalingen van hoge kwaliteit te genereren. De API is ingebouwd in Chrome en het model wordt gedownload wanneer een website deze API voor het eerst gebruikt.

Om te bepalen of het model klaar is voor gebruik, roept u de asynchrone functie Translator.availability() aan. Als de respons op availability() downloadable is, luister dan naar de downloadvoortgang om de gebruiker hiervan op de hoogte te stellen, aangezien dit enige tijd kan duren.

Controleer de ondersteuning voor taalparen

Vertaling wordt beheerd met taalpakketten die op aanvraag worden gedownload. Een taalpakket is als een woordenboek voor een bepaalde taal.

• sourceLanguage : De huidige taal voor de tekst.
• targetLanguage : De uiteindelijke taal waarin de tekst vertaald moet worden.

Gebruik korte BCP 47 -taalcodes als strings. Bijvoorbeeld 'es' voor Spaans of 'fr' voor Frans.

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

Luister naar de voortgang van het modeldownloaden met de gebeurtenis downloadprogress :

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

Als het downloaden mislukt, stoppen de downloadprogress -gebeurtenissen en wordt de ready -belofte afgewezen.

De vertaler aanmaken en uitvoeren

Om een ​​vertaler aan te maken, controleert u of de gebruiker deze heeft geactiveerd en roept u de asynchrone create() functie aan. De Translator create() -functie vereist een options-parameter met twee velden: één voor de sourceLanguage en één voor de targetLanguage .

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

Zodra u een vertaler hebt, roept u de asynchrone translate() aan.

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

Als alternatief kunt u, als u langere teksten moet verwerken, ook de streamingversie van de API gebruiken en translateStreaming() aanroepen.

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

Sequentiële vertalingen

Vertalingen worden sequentieel verwerkt. Als u grote hoeveelheden tekst te vertalen opstuurt, worden volgende vertalingen geblokkeerd totdat de eerdere vertalingen voltooid zijn.

Voor de beste respons op uw verzoeken kunt u ze samenvoegen en een laadinterface toevoegen, zoals een spinner, om duidelijk te maken dat de vertaling gaande is.

Demonstratie

U kunt de Translator API, gebruikt in combinatie met de Language Detector API, bekijken in de Translator and Language Detector API-speeltuin .

Toestemmingsbeleid, iframes en webworkers

Standaard is de Translator API alleen beschikbaar voor vensters op het hoogste niveau en iframes met dezelfde oorsprong. Toegang tot de API kan worden gedelegeerd aan iframes met meerdere oorsprongen met behulp van het kenmerk allow="" in het machtigingsbeleid :

<!--
  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>

De Translator API is niet beschikbaar in webworkers, omdat het lastig is om voor elke worker een verantwoordelijk document in te stellen om de status van het machtigingsbeleid te controleren.

Feedback delen

We willen graag zien wat je bouwt. Deel je websites en webapplicaties met ons op X , YouTube en LinkedIn .

Voor feedback over de implementatie van Chrome kunt u een bugrapport of een functieverzoek indienen.