การแปลด้วย 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 ได้

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

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

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

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

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

ฟังก์ชัน availability() จะแสดงผล Promise ที่มีค่าต่อไปนี้

• "unavailable": การใช้งานไม่รองรับการแปลหรือการตรวจหาภาษา ของภาษาที่ระบุ
• "downloadable": การติดตั้งใช้งานรองรับการแปลหรือการตรวจหาภาษาของภาษาที่ระบุ แต่ต้องดาวน์โหลดก่อนจึงจะดำเนินการต่อได้ การดาวน์โหลดอาจเป็นโมเดลเบราว์เซอร์
• "downloading": การติดตั้งใช้งานรองรับการแปลหรือการตรวจหาภาษา ของภาษาที่ระบุ เบราว์เซอร์กำลังดาวน์โหลดที่ดำเนินการอยู่ให้เสร็จสมบูรณ์ ซึ่งเป็นส่วนหนึ่ง ของการสร้างออบเจ็กต์ที่เชื่อมโยง
• "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() ฟังก์ชันแบบอะซิงโครนัส โดยต้องใช้พารามิเตอร์ตัวเลือกที่มีฟิลด์ 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

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

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

ข้อเสนอ API ของเราได้รับการสนับสนุนจากชุมชนและย้ายไปที่กลุ่มชุมชน Web Incubator ของ W3C เพื่อพูดคุยกันต่อไป ทีม Chrome ได้ขอความคิดเห็นจาก กลุ่มสถาปัตยกรรมทางเทคนิคของ W3C และขอให้ Mozilla และ WebKit ระบุ จุดยืนด้านมาตรฐาน

คุณสามารถเข้าร่วมการกำหนดมาตรฐานได้โดยเข้าร่วมกลุ่มชุมชน Web Incubator

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

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

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