Vertaling met ingebouwde AI

Thomas Steiner

Alexandra Klepper

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

Uitlegger	Web	Uitbreidingen	Chrome-status	Intentie
MDN	Chroom 138	Chroom 138	Weergave	Intentie tot verzending

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, zodat deze toegankelijk is voor een wereldwijd publiek. Met de Translator API kunnen gebruikers bijdragen in hun moedertaal. Gebruikers kunnen bijvoorbeeld deelnemen aan supportchats in hun moedertaal, en uw site kan deze vertalen naar de taal die uw supportmedewerkers gebruiken, voordat de content het apparaat van de gebruiker verlaat. Dit zorgt voor een soepele, snelle en inclusieve ervaring voor alle gebruikers.

Het vertalen van content op het web vereiste 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. Door de vertaling op de client uit te voeren, bespaart u de tijd die nodig is voor serverbezoeken en de kosten van het hosten van de vertaalservice.

Aan de slag

De Translator API is beschikbaar in Chrome 138 stable . Voer eerst 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 voor vertalingen kent, weet u mogelijk niet altijd de brontaal. In dergelijke gevallen kunt u de Language Detector API gebruiken.

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'

De functie availability() retourneert een belofte met de volgende waarden:

• "unavailable" : De implementatie ondersteunt geen vertaling of taaldetectie van de opgegeven talen.
• "downloadable" : De implementatie ondersteunt vertaling of taaldetectie van de opgegeven talen, maar een download is vereist om verder te gaan. De download kan het browsermodel zijn.
• "downloading" : De implementatie ondersteunt vertaling of taaldetectie van de opgegeven talen. De browser voltooit een lopende download als onderdeel van het aanmaken van het bijbehorende object.
• "available" : De implementatie ondersteunt vertaling of taaldetectie van de opgegeven talen en alle vereiste downloads zijn al voltooid.

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 te maken, roept u de asynchrone create() functie aan. Deze 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 er een laadinterface aan toevoegen, zoals een spinner, om duidelijk te maken dat de vertaling gaande is.

Demonstratie

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

Standaardisatie-inspanning

We werken eraan om de Translator API te standaardiseren om compatibiliteit met meerdere browsers te garanderen.

Ons API-voorstel kreeg steun van de community en is doorgestuurd naar de W3C Web Incubator Community Group voor verdere bespreking. Het Chrome-team vroeg feedback aan de W3C Technical Architecture Group en vroeg Mozilla en WebKit naar hun standpunten over standaardisatie.

U kunt bijdragen aan het standaardisatieproces door lid te worden van de Web Incubator Community Group .

Feedback delen

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

Als u feedback wilt geven over de implementatie van Chrome, kunt u een bugrapport of een functieverzoek indienen.