Tłumaczenie za pomocą wbudowanej AI

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Thomas Steiner

Alexandra Klepper

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

Objaśnienie	Sieć	Rozszerzenia	Stan Chrome	Intencja
GitHub	Testowanie wersji Origin	Testowanie wersji Origin	Wyświetl	Zamierzasz przeprowadzić eksperyment

Użyj interfejsu Translator API w Chrome, aby przetłumaczyć tekst za pomocą modeli AI dostępnych w przeglądarce.

Być może Twoja witryna zawiera już treści w wielu językach, aby była dostępna dla odbiorców na całym świecie. Dzięki interfejsowi Translator API użytkownicy mogą przyczyniać się do rozwoju usługi w swoim języku ojczystym. Użytkownicy mogą np. prowadzić rozmowy na czacie z zespołem pomocy w swoim języku ojczystym, a Twoja witryna może przetłumaczyć rozmowę na język, którego używają pracownicy zespołu pomocy, zanim rozmowa opuści urządzenie użytkownika. Dzięki temu wszyscy użytkownicy mogą korzystać z naszych usług w sposób płynny, szybki i w pełni dostępny.

Tłumaczenie treści w internecie zwykle wymaga korzystania z usługi w chmurze. Najpierw treści źródłowe są przesyłane na serwer, który przetłumaczy je na język docelowy. Następnie wynikowy tekst jest pobierany i zwracany użytkownikowi. Wykonując tłumaczenie na kliencie, oszczędzasz czas potrzebny na wykonywanie operacji na serwerze oraz koszty hostingu usługi tłumaczenia.

Rozpocznij

Interfejs Translator API jest dostępny od wersji Chrome 138 stabilnej. Najpierw uruchom wykrywanie funkcji, aby sprawdzić, czy przeglądarka obsługuje interfejs Translator API.

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

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

Sprawdzanie obsługi pary języków

Tłumaczenie jest zarządzane za pomocą pakietów językowych, które są pobierane na żądanie. Pakiet językowy to coś jak słownik danego języka.

• sourceLanguage: aktualny język tekstu.
• targetLanguage: język, na który ma zostać przetłumaczony tekst.

Jako ciągów tekstowych używaj krótkich kodów języków zgodnych ze standardem BCP 47. Na przykład 'es' w przypadku hiszpańskiego lub 'fr' w przypadku francuskiego.

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

Funkcja availability() zwraca obietnicę z tymi wartościami:

• "unavailable": implementacja nie obsługuje tłumaczenia ani wykrywania języka w danych językach.
• "downloadable": implementacja obsługuje tłumaczenie lub wykrywanie języka w danych językach, ale do dalszych działań wymagane jest pobranie. Pobrane pliki mogą być modelem przeglądarki.
• "downloading": implementacja obsługuje tłumaczenie lub wykrywanie języka w danych językach. Przeglądarka kończy pobieranie w ramach tworzenia powiązanego obiektu.
• "available": implementacja obsługuje tłumaczenie lub wykrywanie języka w danych językach, a wszystkie wymagane pliki zostały już pobrane.

Postęp pobierania modelu można sprawdzać 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 przestaną się uruchamiać, a obietnica ready zostanie odrzucona.

Tworzenie i uruchamianie tłumacza

Aby utworzyć tłumacza, wywołaj asynchroniczną funkcję create(). Wymaga on 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ż 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 ?"

Tłumaczenia sekwencyjne

Tłumaczenia są przetwarzane po kolei. Jeśli wyślesz duże ilości tekstu do przetłumaczenia, kolejne tłumaczenia będą blokowane, dopóki nie zostaną ukończone wcześniejsze.

Aby uzyskać najlepszą odpowiedź na swoje pytania, połącz je 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żna zobaczyć w sekcji Testowanie interfejsów Translator i Language Detector API.

Standardizacja

Pracujemy nad ujednoliceniem interfejsu Translator API, aby zapewnić kompatybilność z wieloma przeglądarkami.

Nasza propozycja interfejsu API uzyskała wsparcie społeczności i została przeniesiona do grupy społecznościowej W3C Web Incubator w celu dalszych dyskusji. Zespół Chrome poprosił o opinię W3C Technical Architecture Group oraz Mozilla i WebKit o ich stanowisko w sprawie standardów.

Aby wziąć udział w pracach nad standardami, dołącz do grupy społecznościowej Web Incubator.

Podziel się opinią

Chcemy zobaczyć, co tworzysz za pomocą interfejsu Language Detector API. Udostępniaj nam swoje witryny i aplikacje internetowe na X, YouTube i LinkedIn.

Aby przekazać opinię na temat implementacji Chrome, prześlij raport o błędzie lub prośbę o dodanie funkcji.