Vertaler

Webfuncties: Vertaler

Met de Translator API kunnen ontwikkelaars tekstvertaling aan de clientzijde uitvoeren met ingebouwde AI-modellen in Chrome en Edge. Met deze aanpak zijn cloudgebaseerde vertaalservices voor tijdelijke content niet meer nodig. Dit verlaagt de kosten en verbetert de privacy omdat gegevens op het apparaat van de gebruiker blijven.

Vereisten

API-platform en globaal bereik

  • VERPLICHT: Open de Translator API uitsluitend via de algemene Translator-interface (window.Translator / self.Translator).
  • Gebruik of check de beëindigde naamruimte window.ai.translator NIET.

Browserondersteuning

  • Chrome: versie 138 of hoger (alleen desktop).
  • Edge: versie 148+ (alleen desktop).
  • Niet ondersteund: Mobiel (Android/iOS), Firefox, Safari.

Hardwarevereisten

Het systeem heeft het volgende nodig om Gemini Nano en bijbehorende modellen uit te voeren:

  • Besturingssysteem: Windows 10/11, macOS 13+, Linux of ChromeOS (Chromebook Plus).
  • Opslag: Minimaal 22 GB vrij op het profielvolume.
  • Geheugen/CPU: 16+ GB RAM en 4+ CPU-kernen.
  • GPU: 4 GB+ VRAM (verplicht voor Prompt API met audio).
  • Netwerk: Alleen vereist voor de eerste download van taalpakketten/modellen.

Implementatie en codevoorbeelden

1. Beschikbaarheid en modelbeheer controleren

Verplichte opties doorgeven: Je moet het identieke configuratieoptieobject met sourceLanguage en targetLanguage doorgeven aan zowel Translator.availability(options) als Translator.create(options).

Aanbevolen voortgangscontrole: Implementeer een controle voor de voortgang van de modeldownload door een monitor(m)-callback te geven aan Translator.create() en een listener toe te voegen voor de downloadprogress-gebeurtenis, zodat de gebruiker de voortgang van de modeldownload kan zien.

Vereiste voor gebruikersactivatie: Als het aanroepen van availability(options) 'downloadable' of 'downloading' retourneert, wordt de download van het taalpakket geactiveerd door Translator.create() aan te roepen. Hiervoor is strikt een gebruikersactivatie vereist (zoals een klik op een knop) om een NotAllowedError te voorkomen.

Translator.availability(options) retourneert een van de 4 tekenreeksstatussen:

  • 'available': Het model voor het talenpaar is al gedownload op het apparaat en is klaar voor onmiddellijke vertaling.
  • 'downloadable': Het taalpaar wordt ondersteund, maar het model moet worden gedownload. Er is een gebruikersactivatie vereist om Translator.create() te starten.
  • 'downloading': Het taalpakket wordt op dit moment gedownload. Als je Translator.create() aanroept met een gebruikersactivatie, wordt deze aan de download gekoppeld.
  • 'unavailable': Het talenpaar of apparaat wordt niet ondersteund. Voer uw reservestrategie uit.
// Language pair options passed to both availability() and create()
const options = {
  sourceLanguage: 'es', // Example BCP 47 language code
  targetLanguage: 'fr', // Example BCP 47 language code
};

// 1. Check availability for the language pair
const availability = await Translator.availability(options);

if (availability === 'available') {
  // Model is ready immediately on device
  const translator = await Translator.create(options);
} else if (availability === 'downloadable' || availability === 'downloading') {
  // User gesture is strictly required before create() triggers or attaches to download
  document.getElementById('start-translation-btn').addEventListener('click', async () => {
    const translator = await Translator.create({
      ...options,
      monitor(m) {
        m.addEventListener('downloadprogress', (e) => {
          console.log(`Downloaded ${Math.round(e.loaded * 100)}%`);
        });
      },
    });
  });
} else if (availability === 'unavailable') {
  // Language pair or hardware unsupported; execute fallback
  console.warn('Translation model is unavailable on this device.');
}

2. Vertalingen uitvoeren

De API ondersteunt zowel statische als streaming reacties. Neem altijd de controle van de downloadvoortgang op als je de vertaler instantiëert.

Standard Translation:

// Default to including a progress monitor when creating translator
const translator = await Translator.create({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${Math.round(e.loaded * 100)}%`);
    });
  },
});

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

Streaming Translation (voor lange tekst):

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

Ondersteunde talen

De API ondersteunt een groot aantal BCP 47-taalcodes. Dit zijn de talen die worden ondersteund door de implementatie van de Translator API in Chrome:

  • ar: Arabisch
  • bg: Bulgaars
  • bn: Bengaals
  • cs: Tsjechisch
  • da: Deens
  • de: Duits
  • el: Grieks
  • en: Engels
  • es: Spaans
  • fi: Fins
  • fr: Frans
  • hi: Hindi
  • hr: Kroatisch
  • hu: Hongaars
  • id: Indonesisch
  • it: Italiaans
  • he: Hebreeuws
  • ja: Japans
  • kn: Kannada
  • ko: Koreaans
  • lt: Litouws
  • mr: Marathi
  • nl: Nederlands
  • no: Noors
  • pl: Pools
  • pt: Portugees
  • ro: Roemeens
  • ru: Russisch
  • sk: Slowaaks
  • sl: Sloveens
  • sv: Zweeds
  • ta: Tamil
  • te: Telugu
  • th: Thai
  • tr: Turks
  • uk: Oekraïens
  • vi: Vietnamees
  • zh: Chinees
  • zh-Hant: Chinees (Traditioneel)

Beveiliging en prestaties

  • Beleid voor rechten: Cross-origin-iframes vereisen expliciete rechten.

    <iframe src="https://example.com/" allow="translator"></iframe>
    
  • Web Workers: Wordt op dit moment niet ondersteund vanwege de complexiteit van het rechtenbeleid.

  • Privacy: Er worden geen gegevens naar de servers van Google gestuurd tijdens het vertaalproces nadat het model is gedownload.

Reservestrategie

Check vóór gebruik of het Translator-object beschikbaar is in het algemene bereik:

if ('Translator' in self) {
  // The Translator API is supported.
} else {
  // Execute fallback strategy (do not fall back to window.ai.translator).
}

Als de Translator API niet wordt ondersteund of als beschikbaarheidscontroles 'unavailable' retourneren, moet je op een correcte manier terugvallen.

Aanbevolen opties:

  1. Remote API Fallback: Stuur het vertaalverzoek door naar een servereindpunt of externe cloud-API (zoals de Vertex AI Gemini API) om vertaalfuncties te bieden.
  2. Graceful degradation: Zet visueel de bedieningselementen of knoppen voor vertaling uit en toon een gebruiksvriendelijke opmerking (bijv. "Client-side translation is currently unsupported in this browser"). Sta geen onverwerkte uitzonderingen toe.
  3. Polyfill-fallback: Je kunt door de community onderhouden polyfills zoals built-in-ai-task-apis-polyfills of prompt-api-polyfill gebruiken om het API-oppervlak te emuleren met externe services.

Privacy- en kostengevolgen: Deze polyfills sturen verzoeken mogelijk door naar externe servers (zoals de Gemini API via de cloud), hoewel lokale verwerking ook een optie is. Verwerking op afstand maakt de privacygaranties op het apparaat van de systeemeigen ingebouwde AI-API's volledig ongeldig en brengt vaak kosten met zich mee voor het gebruik van de API aan de serverzijde.