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 pertama mereka, dan situs Anda dapat menerjemahkan pesan mereka ke dalam bahasa pertama 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

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 tersebut, Anda dapat menggunakan Language Detector API.

Download model

Translator API menggunakan model pakar yang dilatih untuk menghasilkan terjemahan berkualitas tinggi. API ini terintegrasi ke dalam Chrome, dan model didownload pertama kali situs 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'

Memproses 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 asinkron create(). Fungsi create() Translator 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 Anda 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 mengirimkan teks dalam jumlah besar untuk diterjemahkan, terjemahan berikutnya akan diblokir hingga terjemahan sebelumnya selesai.

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

Demo

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

Permission Policy, iframe, dan Web Worker

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

Translator API tidak tersedia di Web Workers, karena kompleksitas dalam membuat 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.