Terjemahan dengan AI bawaan

Thomas Steiner

Alexandra Klepper

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

Penjelasan	Web	Ekstensi	Status Chrome	Intent
MDN	Chrome 138	Chrome 138	View	Maksud untuk Mengirim

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, agar dapat diakses oleh audiens global. Dengan Translator API, pengguna dapat berkontribusi dalam bahasa utama mereka. Misalnya, pengguna dapat berpartisipasi dalam chat dukungan dalam bahasa pertama mereka, dan situs Anda dapat menerjemahkannya ke dalam bahasa yang digunakan agen dukungan Anda, sebelum meninggalkan perangkat pengguna. Hal ini menciptakan pengalaman yang lancar, cepat, dan inklusif bagi semua pengguna.

Terjemahan konten di 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 kepada pengguna. Dengan menjalankan terjemahan di klien, Anda menghemat waktu yang diperlukan oleh perjalanan server dan biaya hosting layanan terjemahan.

Mulai

Translator API tersedia mulai dari Chrome 138 versi stabil. Pertama, 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 yang dilatih untuk membuat ringkasan berkualitas tinggi. API ini dibuat ke dalam Chrome, dan model pakar 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.

const availability = await Translator.availability();

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 iframe yang memiliki origin yang sama. Akses ke API dapat didelegasikan ke iframe lintas origin menggunakan atribut allow="" Kebijakan Izin:

<!--
  The hosting site at 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 belum tersedia di Web Workers untuk saat ini, karena kompleksitas menetapkan dokumen yang bertanggung jawab untuk setiap pekerja guna memeriksa status kebijakan izin.

Upaya standardisasi

Kami sedang berupaya menstandardisasi Translator API untuk kompatibilitas lintas browser.

Translator API dan Language Detector API telah diadopsi oleh W3C WebML Working Group. Kami telah meminta Mozilla dan WebKit untuk memberikan posisi standar mereka.

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.