หน้านี้ได้รับการแปลโดย Cloud Translation API

การแปลด้วย AI ในตัว

Thomas Steiner

Alexandra Klepper

เผยแพร่: 13 พฤศจิกายน 2024, อัปเดตล่าสุด: 20 พฤษภาคม 2025

Browser Support

ใช้ Translator API ใน Chrome เพื่อแปลข้อความด้วยโมเดล AI ที่มีให้ใน เบราว์เซอร์

เว็บไซต์ของคุณอาจมีเนื้อหาในหลายภาษาอยู่แล้ว ผู้ใช้สามารถเขียนในภาษาแรกของตนเองได้ด้วย Translator API ตัวอย่างเช่น ผู้ใช้ สามารถเข้าร่วมแชทสนับสนุนในภาษาแรกของตน และเว็บไซต์ของคุณสามารถ แปลข้อความของผู้ใช้เป็นภาษาแรกของตัวแทนฝ่ายสนับสนุน ก่อนที่ ข้อความจะออกจากอุปกรณ์ของผู้ใช้ ซึ่งจะช่วยสร้างประสบการณ์การใช้งานที่ราบรื่น รวดเร็ว และครอบคลุม สำหรับผู้ใช้ทุกคน

โดยปกติแล้วการแปลเนื้อหาเว็บจะต้องใช้บริการระบบคลาวด์ โดยขั้นแรก ระบบจะอัปโหลดเนื้อหาต้นฉบับไปยังเซิร์ฟเวอร์ ซึ่งจะทำการแปลเป็น ภาษาเป้าหมาย จากนั้นจะดาวน์โหลดข้อความที่ได้และส่งกลับให้ ผู้ใช้ เมื่อเนื้อหามีอายุสั้นและไม่จำเป็นต้องบันทึกลงในฐานข้อมูล การแปลฝั่งไคลเอ็นต์จะช่วยประหยัดเวลาและค่าใช้จ่ายได้มากกว่าบริการแปลที่โฮสต์

เริ่มต้นใช้งาน

เรียกใช้การตรวจหาฟีเจอร์เพื่อดูว่าเบราว์เซอร์รองรับ Translator API หรือไม่

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

แม้ว่าคุณจะทราบภาษาเป้าหมายสำหรับการแปลเสมอ แต่ก็อาจไม่ทราบภาษาต้นฉบับเสมอไป ในกรณีดังกล่าว คุณสามารถใช้ Language Detector API ได้

การดาวน์โหลดโมเดล

Translator API ใช้โมเดลผู้เชี่ยวชาญที่ได้รับการฝึกฝนเพื่อสร้างคำแปลคุณภาพสูง API นี้มีอยู่ใน Chrome และระบบจะดาวน์โหลดโมเดล เมื่อเว็บไซต์ใช้ API นี้เป็นครั้งแรก

หากต้องการตรวจสอบว่าโมเดลพร้อมใช้งานหรือไม่ ให้เรียกใช้ฟังก์ชันแบบอะซิงโครนัส Translator.availability() หากการตอบกลับ availability() คือ downloadable ให้รอฟังความคืบหน้าในการดาวน์โหลด เพื่อแจ้งให้ผู้ใช้ทราบความคืบหน้า เนื่องจากอาจใช้เวลาสักครู่

ตรวจสอบการรองรับคู่ภาษา

การแปลจะได้รับการจัดการด้วยแพ็กภาษาที่ดาวน์โหลดตามคำขอ แพ็กภาษา ก็เหมือนพจนานุกรมสำหรับภาษาหนึ่งๆ

sourceLanguage: ภาษาปัจจุบันของข้อความ
targetLanguage: ภาษาปลายทางที่ควรแปลข้อความเป็น

ใช้รหัสย่อของภาษา BCP 47 เป็นสตริง เช่น 'es' สำหรับภาษาสเปน หรือ 'fr' สำหรับภาษาฝรั่งเศส

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

ฟังความคืบหน้าการดาวน์โหลดโมเดลด้วยเหตุการณ์ downloadprogress

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

หากดาวน์โหลดไม่สำเร็จ เหตุการณ์ downloadprogress จะหยุดทำงานและ ระบบจะปฏิเสธสัญญา ready

สร้างและเรียกใช้ตัวแปล

หากต้องการสร้างตัวแปล ให้ตรวจสอบ การเปิดใช้งานผู้ใช้ และเรียกใช้ฟังก์ชัน create() แบบไม่พร้อมกัน ฟังก์ชัน create() ของตัวแปลต้องใช้พารามิเตอร์ตัวเลือกที่มี 2 ฟิลด์ ฟิลด์หนึ่งสำหรับ sourceLanguage และอีกฟิลด์หนึ่งสำหรับ targetLanguage

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

เมื่อมีตัวแปลแล้ว ให้เรียกใช้ translate() แบบไม่พร้อมกัน

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

หรือหากต้องการจัดการกับข้อความที่ยาวขึ้น คุณสามารถใช้ API เวอร์ชันสตรีมมิงและเรียก translateStreaming() ได้ด้วย

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

การแปลตามลำดับ

ระบบจะประมวลผลคำแปลตามลำดับ หากคุณส่งข้อความจำนวนมากเพื่อรับการแปล ระบบจะบล็อกการแปลที่ตามมาจนกว่าการแปลก่อนหน้าจะเสร็จสมบูรณ์

เพื่อการตอบสนองต่อคำขอของคุณที่ดีที่สุด ให้รวมคำขอเหล่านั้นเข้าด้วยกันและเพิ่มอินเทอร์เฟซการโหลด เช่น ไอคอนหมุน เพื่อสื่อให้เห็นว่าการแปลกำลังดำเนินการอยู่

สาธิต

คุณดู Translator API ที่ใช้ร่วมกับ Language Detector API ได้ใน สนามทดสอบ Translator และ Language Detector API

นโยบายสิทธิ์, iframe และ Web Worker

โดยค่าเริ่มต้น Translator API จะใช้ได้เฉพาะกับหน้าต่างระดับบนสุดและ iframe ที่มีต้นทางเดียวกัน คุณมอบสิทธิ์การเข้าถึง API ให้กับ iframe แบบข้ามต้นทางได้ โดยใช้แอตทริบิวต์ 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 ไม่พร้อมใช้งานใน Web Worker เนื่องจากความซับซ้อนของ การสร้างเอกสารที่รับผิดชอบสำหรับแต่ละ Worker เพื่อตรวจสอบสถานะ นโยบายสิทธิ์

แชร์ความคิดเห็น

เราอยากเห็นสิ่งที่คุณกำลังสร้าง แชร์เว็บไซต์และเว็บแอปพลิเคชันของคุณกับเราบน X, YouTube และ LinkedIn

หากต้องการส่งความคิดเห็นเกี่ยวกับการใช้งาน Chrome ให้ยื่นรายงานข้อบกพร่อง หรือคำขอฟีเจอร์