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 zwykle wymaga użycia 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

Interfejsy Language Detector i Translator API działają w Chrome na komputerze. Nie działają na urządzeniach mobilnych.

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ęzyków

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 interfejsu API do przesyłania strumieniowego i wywołać funkcję translateStreaming().

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

Tłumaczenia sekwencyjne

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

Aby uzyskać najlepszą odpowiedź na 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.

Obsługiwane języki

Implementacja interfejsu Translator API w Chrome obsługuje te języki:

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 ramkach 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ść ustalania odpowiedzialnego dokumentu dla każdego workera w celu sprawdzenia stanu zgodności z zasadami dotyczącymi uprawnień.

Podziel się opinią

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

Jeśli chcesz przesłać opinię na temat implementacji Chrome, zgłoś błąd lub poproś o dodanie funkcji.