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 die in de browser beschikbaar zijn.

Uw website biedt mogelijk al content in meerdere talen aan. Met de Translator API kunnen gebruikers in hun eigen taal schrijven. Gebruikers kunnen bijvoorbeeld in hun eigen taal deelnemen aan supportchats, waarna uw website hun bericht vertaalt naar de moedertaal van uw supportmedewerkers, nog voordat het bericht het apparaat van de gebruiker verlaat. Dit zorgt voor een soepele, snelle en inclusieve ervaring voor alle gebruikers.

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

Aan de slag

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

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

While you always know the target language for translations, you may not always know the source language. In such cases, you can use the Language Detector API .

Model downloaden

De Translator API maakt gebruik van een expertmodel dat is getraind om hoogwaardige vertalingen te genereren. De API is ingebouwd in Chrome en het model wordt gedownload de eerste keer dat een website deze API gebruikt.

Om te bepalen of het model klaar is voor gebruik, roept u de asynchrone functie Translator.availability() aan. Als het antwoord op availability() is dat het downloadable is, luistert u naar de voortgang van de download om de gebruiker hierover te informeren, aangezien dit enige tijd kan duren.

Controleer de ondersteuning voor taalparen.

Vertalingen worden beheerd met behulp van taalpakketten, die op aanvraag kunnen worden gedownload. Een taalpakket is als een woordenboek voor een bepaalde taal.

• sourceLanguage : The current language for the text.
• targetLanguage : De uiteindelijke taal waarin de tekst vertaald moet worden.

Gebruik de BCP 47- taalkortcodes als tekenreeksen. Bijvoorbeeld 'es' voor Spaans of 'fr' voor Frans.

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

Volg de voortgang van het downloaden van het model met de downloadprogress -gebeurtenis:

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

Als de download mislukt, stoppen downloadprogress events en wordt de ready -promise afgewezen.

Maak en start de vertaler

Om een ​​vertaler te maken, controleer je of de gebruiker is geactiveerd en roep je de asynchrone functie create() aan. De functie create() van de vertaler vereist een parameter options 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 je een vertaler hebt, roep je 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 met langere teksten te maken hebt, 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 ter vertaling aanbiedt, worden volgende vertalingen geblokkeerd totdat de eerdere vertalingen zijn voltooid.

Voor de beste respons op uw verzoeken kunt u ze het beste groeperen en een laadindicator , zoals een spinner, toevoegen om aan te geven dat de vertaling bezig is.

Ondersteunde talen

De volgende talen worden ondersteund door de implementatie van de Translator API in Chrome.

Demo

Je kunt de Translator API, in combinatie met de Language Detector API, bekijken in de Translator and Language Detector API playground .

Toestemmingsbeleid, iframes en webworkers

By default, the Translator API is only available to top-level windows and to same-origin iframes. Access to the API can be delegated to cross-origin iframes using the Permissions Policy allow="" attribute:

<!--
  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 Web Workers, vanwege de complexiteit van het opstellen van een verantwoordelijk document voor elke worker om de status van het machtigingsbeleid te controleren.

Deel feedback

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

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