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, aby tłumaczyć tekst 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. Na przykład użytkownicy mogą uczestniczyć w czatach pomocy w swoim języku, a Twoja witryna może tłumaczyć ich wiadomości na język pracowników zespołu pomocy, zanim wiadomość opuści urządzenie użytkownika. Dzięki temu wszyscy użytkownicy mogą korzystać z usług w sposób płynny, szybki i inkluzywny.

Tłumaczenie treści internetowych zwykle wymaga korzystania z usługi w chmurze. Najpierw treści źródłowe są przesyłane na serwer, który tłumaczy je na język docelowy. Następnie przetłumaczony tekst jest pobierany i zwracany użytkownikowi. Gdy treści są krótkotrwałe i nie wymagają 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 używa modelu eksperckiego wytrenowanego do generowania wysokiej jakości tłumaczeń. Interfejs API jest wbudowany w Chrome, a model jest pobierany, gdy witryna po raz pierwszy używa tego interfejsu API.

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

Sprawdź obsługę 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 dla 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 create() tłumacza wymaga parametru options 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ż tłumacza, 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 przesyłanej strumieniowo interfejsu API 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 do przetłumaczenia duże ilości tekstu, kolejne tłumaczenia zostaną zablokowane do czasu zakończenia wcześniejszych.

Aby uzyskać najlepszą odpowiedź na swoje prośby, podziel je na części i dodaj interfejs wczytywania, np. spinner, 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ć w piaskownicy interfejsów Translator API i Language Detector API.

Zasady dotyczące uprawnień, ramki iframe i Web Workers

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ć do ramek iframe z innych domen za pomocą atrybutu Zasady dotyczące uprawnień 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 Web Workers ze względu na złożoność ustalania odpowiedniego dokumentu dla każdego worker, aby sprawdzić stan zgodności z zasadami dotyczącymi uprawnień.

Podziel się opinią

Chcemy zobaczyć, co tworzysz. Udostępnij nam swoje witryny i aplikacje internetowe na X, YouTube i LinkedIn.

Jeśli chcesz przesłać opinię o implementacji w Chrome, zgłoś błąd lub prześlij prośbę o dodanie funkcji.