Terjemahan dengan AI bawaan

Thomas Steiner

Alexandra Klepper

Dipublikasikan: 13 November 2024, Terakhir diperbarui: 20 Mei 2025

Gunakan Translator API di Chrome untuk menerjemahkan teks dengan model AI yang disediakan di browser.

Situs Anda mungkin sudah menawarkan konten situs dalam beberapa bahasa. Dengan Translator API, pengguna dapat menulis dalam bahasa utama mereka. Misalnya, pengguna dapat berpartisipasi dalam chat dukungan dalam bahasa utama mereka, dan situs Anda dapat menerjemahkan pesan mereka ke dalam bahasa utama agen dukungan Anda, sebelum pesan tersebut keluar dari perangkat pengguna. Hal ini menciptakan pengalaman yang lancar, cepat, dan inklusif bagi semua pengguna.

Terjemahan konten web biasanya memerlukan penggunaan layanan cloud. Pertama, konten sumber diupload ke server, yang menjalankan terjemahan ke bahasa target, lalu teks yang dihasilkan didownload dan dikembalikan ke pengguna. Jika konten bersifat sementara dan tidak perlu disimpan ke database, terjemahan sisi klien akan menghemat waktu dan biaya dibandingkan layanan terjemahan yang dihosting.

Mulai

Language Detector dan Translator API berfungsi di Chrome di desktop. API ini tidak berfungsi di perangkat seluler.

Jalankan deteksi fitur untuk melihat apakah browser mendukung Translator API.

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

Meskipun Anda selalu mengetahui bahasa target untuk terjemahan, Anda mungkin tidak selalu mengetahui bahasa sumber. Dalam kasus seperti itu, Anda dapat menggunakan Language Detector API.

Download model

Translator API menggunakan model ahli yang dilatih untuk menghasilkan terjemahan berkualitas tinggi. API ini dibuat ke dalam Chrome, dan modelnya didownload saat situs pertama kali menggunakan API ini.

Untuk menentukan apakah model siap digunakan, panggil fungsi asinkron Translator.availability(). Jika respons terhadap availability() adalah downloadable, dengarkan progres download untuk memberi tahu pengguna tentang progresnya, karena mungkin memerlukan waktu.

Memeriksa dukungan pasangan bahasa

Terjemahan dikelola dengan paket bahasa, yang didownload sesuai permintaan. Paket bahasa seperti kamus untuk bahasa tertentu.

• sourceLanguage: Bahasa saat ini untuk teks.
• targetLanguage: Bahasa akhir yang akan digunakan untuk menerjemahkan teks.

Gunakan kode singkat bahasa BCP 47 sebagai string. Misalnya, 'es' untuk bahasa Spanyol atau 'fr' untuk bahasa Prancis.

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

Dengarkan progres download model dengan peristiwa downloadprogress:

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

Jika download gagal, peristiwa downloadprogress akan berhenti dan promise ready akan ditolak.

Membuat dan menjalankan penerjemah

Untuk membuat penerjemah, periksa aktivasi pengguna dan panggil fungsi create() asinkron. Fungsi create() Penerjemah memerlukan parameter opsi dengan dua kolom, satu untuk sourceLanguage dan satu untuk targetLanguage.

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

Setelah memiliki penerjemah, panggil translate() asinkron.

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

Atau, jika Anda perlu menangani teks yang lebih panjang, Anda juga dapat menggunakan versi streaming API dan memanggil translateStreaming().

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

Terjemahan berurutan

Terjemahan diproses secara berurutan. Jika Anda mengirim teks dalam jumlah besar untuk diterjemahkan, terjemahan berikutnya akan diblokir hingga terjemahan sebelumnya selesai.

Untuk mendapatkan respons terbaik terhadap permintaan Anda, gabungkan permintaan tersebut dan tambahkan antarmuka pemuatan , seperti pemutar, untuk menyampaikan bahwa terjemahan sedang berlangsung.

Bahasa yang didukung

Bahasa berikut didukung oleh penerapan Translator API di Chrome.

Demo

Anda dapat melihat Translator API, yang digunakan bersama dengan Language Detector API, di playground Translator dan Language Detector API.

Kebijakan Izin, iframe, dan Web Worker

Secara default, Translator API hanya tersedia untuk jendela tingkat atas dan iframe asal yang sama. Akses ke API dapat didelegasikan ke iframe lintas origin menggunakan atribut Kebijakan Izin 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>

Translator API tidak tersedia di Web Worker, karena kompleksitas pembuatan dokumen yang bertanggung jawab untuk setiap pekerja, guna memeriksa status Kebijakan Izin.

Berikan masukan

Kami ingin melihat apa yang Anda buat. Bagikan situs dan aplikasi web Anda kepada kami di X, YouTube, dan LinkedIn.

Untuk memberikan masukan tentang penerapan Chrome, ajukan laporan bug atau permintaan fitur.