Data publikacji: 13 listopada 2024 r., ostatnia aktualizacja: 20 maja 2025 r.
Wyjaśnienie | Sieć | Rozszerzenia | Stan Chrome | Intencja |
---|---|---|---|---|
MDN | Wyświetl | Zamiar wysłania |
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, aby były dostępne dla odbiorców na całym świecie. Dzięki interfejsowi Translator API użytkownicy mogą przesyłać treści 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ć je na język używany przez Twoich agentów pomocy, zanim opuszczą one urządzenie użytkownika. Dzięki temu wszyscy użytkownicy mogą korzystać z usługi w prosty, szybki i wygodny sposób.
Tłumaczenie treści w internecie zwykle wymaga 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. Dzięki tłumaczeniu po stronie klienta oszczędzasz czas potrzebny na przesyłanie danych do serwera i koszty hostingu usługi tłumaczeniowej.
Rozpocznij
Interfejs Translator API jest dostępny w stabilnej wersji Chrome 138. Najpierw 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.
Sprawdzanie wymagań sprzętowych
Deweloperzy i użytkownicy, którzy korzystają z funkcji używających tych interfejsów API w Chrome, muszą spełniać te wymagania. Inne przeglądarki mogą mieć inne wymagania dotyczące działania.
Interfejsy Language Detector API i Translator API działają w Chrome na komputerze. Te interfejsy API nie działają na urządzeniach mobilnych. Interfejsy Prompt API, Summarizer API, Writer API i Rewriter API działają w Chrome, gdy spełnione są te warunki:
- System operacyjny: Windows 10 lub 11, macOS 13 lub nowszy (Ventura i nowsze) lub Linux. Interfejsy API, które korzystają z Gemini Nano, nie są jeszcze obsługiwane w Chrome na Androida, iOS i ChromeOS.
- Miejsce na dane: co najmniej 22 GB na woluminie zawierającym profil Chrome.
- GPU: co najmniej 4 GB pamięci VRAM.
- Sieć: nieograniczona transmisja danych lub połączenie bez limitu.
Dokładny rozmiar Gemini Nano może się nieznacznie różnić. Aby sprawdzić aktualny rozmiar, otwórz stronę chrome://on-device-internals
i kliknij Stan modelu.
Otwórz podaną ścieżkę do pliku, aby określić rozmiar modelu.
Sprawdzanie obsługi pary 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'
Funkcja availability()
zwraca obietnicę z tymi wartościami:
"unavailable"
: implementacja nie obsługuje tłumaczenia ani wykrywania języka w przypadku podanych języków."downloadable"
: implementacja obsługuje tłumaczenie lub wykrywanie języka w przypadku podanych języków, ale aby kontynuować, musisz pobrać odpowiednie pliki. Pobrany plik może być modelem przeglądarki."downloading"
: implementacja obsługuje tłumaczenie lub wykrywanie języka w przypadku podanych języków. Przeglądarka kończy pobieranie w ramach tworzenia powiązanego obiektu."available"
: implementacja obsługuje tłumaczenie lub wykrywanie języka w przypadku podanych języków, a wszystkie wymagane pobierania zostały już zakończone.
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, wywołaj asynchroniczną funkcję create()
. 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ż 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 duże ilości tekstu do przetłumaczenia, 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 wczytywania, 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.
Działania na rzecz standaryzacji
Pracujemy nad ujednoliceniem interfejsu Translator API, aby zapewnić zgodność z różnymi przeglądarkami.
Nasza propozycja interfejsu API zyskała poparcie społeczności i została przekazana do grupy społecznościowej W3C Web Incubator w celu dalszego omówienia. Zespół Chrome poprosił o opinię grupę W3C Technical Architecture Group oraz Mozilla i WebKit o ich stanowiska w sprawie standardów.
Możesz wziąć udział w pracach nad standardami, dołączając do grupy społecznościowej Web Incubator Community Group.
Podziel się opinią
Chcemy zobaczyć, co tworzysz za pomocą interfejsu Language Detector API. Podziel się z nami swoimi stronami 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.