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

Thomas Steiner

Alexandra Klepper

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

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

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

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

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

API ตรวจหาภาษาและ API แปลภาษาทำงานใน Chrome บนเดสก์ท็อป API เหล่านี้ไม่ทำงานบนอุปกรณ์เคลื่อนที่

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

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

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

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

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

หากต้องการตรวจสอบว่าโมเดลพร้อมใช้งานหรือไม่ ให้เรียกใช้ฟังก์ชันTranslator.availability()แบบอะซิงโครนัส หากการตอบกลับเป็น downloadable ให้รอฟังความคืบหน้าในการดาวน์โหลด เพื่อแจ้งให้ผู้ใช้ทราบความคืบหน้า เนื่องจากอาจใช้เวลาสักครู่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 ของ Chrome รองรับภาษาต่อไปนี้

สาธิต

คุณดู 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 โปรดรายงานข้อบกพร่อง หรือส่งคำขอฟีเจอร์