Tłumaczenie za pomocą wbudowanej AI

Thomas Steiner

Alexandra Klepper

Data publikacji: 13 listopada 2024 r., ostatnia aktualizacja: 20 maja 2025 r.

Używaj interfejsu Translator API w Chrome do tłumaczenia tekstu za pomocą modeli AI dostępnych w przeglądarce.

Twoja witryna może już oferować treści w wielu językach. Dzięki interfejsowi Translator API użytkownicy mogą pisać w swoim języku. Użytkownicy mogą na przykład uczestniczyć w czatach pomocy w swoim języku, a Twoja witryna może tłumaczyć ich wiadomości na język agentów pomocy, zanim opuszczą one urządzenie użytkownika. Zapewnia to wszystkim użytkownikom płynne, szybkie i dostępne doświadczenie.

Tłumaczenie treści internetowych wymaga zwykle korzystania z usługi w chmurze. Najpierw treść źródłowa jest przesyłana na serwer, który tłumaczy ją na język docelowy. Następnie przetłumaczony tekst jest pobierany i zwracany użytkownikowi. Gdy treść jest ulotna i nie wymaga zapisywania w bazie danych, tłumaczenie po stronie klienta pozwala zaoszczędzić czas i pieniądze w porównaniu z hostowaną usługą tłumaczenia.

Rozpocznij

Uruchom wykrywanie funkcji, aby sprawdzić, czy przeglądarka obsługuje interfejs Translator API.

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

Zawsze znasz język docelowy tłumaczeń, ale nie zawsze znasz język źródłowy. W takich przypadkach możesz użyć interfejsu Language Detector API.

Pobieranie modelu

Interfejs Translator API korzysta z modelu eksperckiego wytrenowanego do generowania wysokiej jakości tłumaczeń. Interfejs API jest wbudowany w Chrome, a model jest pobierany, gdy witryna używa tego interfejsu API po raz pierwszy.

Aby sprawdzić, czy model jest gotowy do użycia, wywołaj asynchroniczną funkcję Translator.availability(). Jeśli odpowiedź na availability() to downloadable, nasłuchuj postępu pobierania, aby informować użytkownika o jego przebiegu, ponieważ może to zająć trochę czasu.

Sprawdzanie obsługi par językowych

Tłumaczenie jest zarządzane za pomocą pakietów językowych pobieranych na żądanie. Pakiet językowy jest jak słownik danego języka.

• sourceLanguage: bieżący język tekstu.
• targetLanguage: język docelowy, na który ma zostać przetłumaczony tekst.

Używaj krótkich kodów języków BCP 47 jako ciągów znaków. Na przykład 'es' w przypadku języka hiszpańskiego lub 'fr' w przypadku języka francuskiego.

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

Nasłuchuj postępu pobierania modelu za pomocą zdarzenia downloadprogress:

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

Jeśli pobieranie się nie powiedzie, zdarzenia downloadprogress zostaną zatrzymane, a obietnica ready zostanie odrzucona.

Tworzenie i uruchamianie tłumacza

Aby utworzyć tłumacza, sprawdź aktywację użytkownika i wywołaj asynchroniczną funkcję create(). Funkcja Tłumacz create() wymaga parametru opcji z 2 polami: jednym dla sourceLanguage i jednym dla targetLanguage.

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

Gdy masz już translator, wywołaj asynchroniczną funkcję translate().

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

Jeśli musisz przetwarzać dłuższe teksty, możesz też użyć wersji strumieniowej interfejsu API i wywołać translateStreaming().

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

Tłumaczenia sekwencyjne

Tłumaczenia są przetwarzane po kolei. Jeśli wyślesz do przetłumaczenia duże ilości tekstu, kolejne tłumaczenia zostaną zablokowane do czasu ukończenia poprzednich.

Aby uzyskać najlepszą odpowiedź na swoje prośby, podziel je na części i dodaj interfejs wczytywania, np. wskaźnik postępu, aby poinformować użytkownika, że tłumaczenie jest w toku.

Prezentacja

Interfejs Translator API, używany w połączeniu z interfejsem Language Detector API, możesz zobaczyć na platformie testowej interfejsów Translator API i Language Detector API.

Zasady dotyczące uprawnień, elementy iframe i skrypty Web Worker

Domyślnie interfejs Translator API jest dostępny tylko w oknach najwyższego poziomu i w elementach iframe z tej samej domeny. Dostęp do interfejsu API można delegować na elementy iframe z innych domen za pomocą atrybutu Permissions Policy:allow=""

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

Interfejs Translator API nie jest dostępny w przypadku Web Workers ze względu na złożoność procesu ustalania odpowiedzialnego dokumentu dla każdego pracownika w celu sprawdzenia stanu zasad dotyczących uprawnień.

Podziel się opinią

Chcemy zobaczyć, co tworzysz. Podziel się z nami swoimi witrynami i aplikacjami internetowymi na X, YouTube i LinkedIn.

Jeśli chcesz przesłać opinię na temat implementacji Chrome, prześlij raport o błędzie lub prośbę o dodanie funkcji.