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

Thomas Steiner

Alexandra Klepper

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

คำอธิบาย	เว็บ	ส่วนขยาย	สถานะของ Chrome	ความตั้งใจ
MDN	Chrome 138	Chrome 138	ดู	ความตั้งใจที่จะจัดส่ง

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

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

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

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

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

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

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

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

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

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

const availability = await Translator.availability();

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

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

• 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 แบบข้ามต้นทางได้ โดยใช้แอตทริบิวต์ Permission Policy allow="" ดังนี้

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

ความพยายามในการกำหนดมาตรฐาน

เรากำลังดำเนินการเพื่อกำหนดมาตรฐาน Translator API เพื่อให้เข้ากันได้กับเบราว์เซอร์ต่างๆ

กลุ่มงาน WebML ของ W3C ได้นำ Translator API และ Language Detector API ไปใช้ เราได้สอบถามMozilla และ WebKit เกี่ยวกับ จุดยืนด้านมาตรฐานของทั้ง 2 องค์กร

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

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

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