ล่าม

ฟีเจอร์บนเว็บ: โปรแกรมแปลภาษา

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

สิ่งที่ต้องดำเนินการก่อนและข้อกำหนด

แพลตฟอร์ม API และขอบเขตรวมทั้งหมด

  • บังคับ: เข้าถึง Translator API ผ่านอินเทอร์เฟซ Translator ส่วนกลาง (window.Translator / self.Translator) เท่านั้น
  • อย่าใช้หรือตรวจสอบเนมสเปซ window.ai.translator ที่เลิกใช้งานแล้ว

การรองรับเบราว์เซอร์

  • Chrome: เวอร์ชัน 138 ขึ้นไป (เดสก์ท็อปเท่านั้น)
  • Edge: เวอร์ชัน 148 ขึ้นไป (เดสก์ท็อปเท่านั้น)
  • ไม่รองรับ: อุปกรณ์เคลื่อนที่ (Android/iOS), Firefox, Safari

ข้อกำหนดเกี่ยวกับฮาร์ดแวร์

หากต้องการเรียกใช้ Gemini Nano และโมเดลที่เกี่ยวข้อง ระบบต้องมีสิ่งต่อไปนี้

  • ระบบปฏิบัติการ: Windows 10/11, macOS 13 ขึ้นไป, Linux หรือ ChromeOS (Chromebook Plus)
  • พื้นที่เก็บข้อมูล: มีพื้นที่ว่างอย่างน้อย 22 GB ในวอลุ่มโปรไฟล์
  • หน่วยความจำ/CPU: RAM 16 GB ขึ้นไปและ CPU 4 คอร์ขึ้นไป
  • GPU: VRAM ขนาด 4 GB ขึ้นไป (จำเป็นสำหรับ Prompt API ที่มีเสียง)
  • เครือข่าย: จำเป็นสำหรับการดาวน์โหลดแพ็กภาษา/โมเดลครั้งแรกเท่านั้น

การติดตั้งใช้งานและตัวอย่างโค้ด

1. การตรวจสอบความพร้อมใช้งานและการจัดการโมเดล

การส่งออบเจ็กต์ตัวเลือกที่จำเป็น: คุณต้องส่งออบเจ็กต์ตัวเลือกการกำหนดค่าที่เหมือนกันซึ่งมี sourceLanguage และ targetLanguage ไปยังทั้ง Translator.availability(options) และ Translator.create(options)

การตรวจสอบความคืบหน้าที่แนะนำ: คุณควรใช้การตรวจสอบความคืบหน้าในการดาวน์โหลดโมเดลโดยระบุ Callback monitor(m) ไปยัง Translator.create() และเพิ่ม Listener สำหรับเหตุการณ์ downloadprogress เพื่อให้ผู้ใช้เห็นความคืบหน้าในการดาวน์โหลดโมเดล

ข้อกำหนดเกี่ยวกับท่าทางผู้ใช้: เมื่อการเรียก availability(options) แสดงผลเป็น 'downloadable' หรือ 'downloading' การเรียก Translator.create() จะทริกเกอร์การดาวน์โหลดแพ็กภาษาและกำหนดให้ต้องมีท่าทางผู้ใช้อย่างเคร่งครัด (เช่น การคลิกปุ่ม) เพื่อป้องกัน NotAllowedError

Translator.availability(options) แสดงผลสถานะสตริง 1 ใน 4 สถานะต่อไปนี้

  • 'available': ดาวน์โหลดโมเดลคู่ภาษาลงในอุปกรณ์แล้วและพร้อมสำหรับการแปลทันที
  • 'downloadable': ระบบรองรับคู่ภาษา แต่ต้องดาวน์โหลดโมเดล ต้องใช้ท่าทางผู้ใช้เพื่อเริ่มต้น Translator.create()
  • 'downloading': กำลังดาวน์โหลดแพ็กภาษา การเรียกใช้ Translator.create() ด้วยท่าทางผู้ใช้จะแนบไปกับการดาวน์โหลด
  • 'unavailable': ไม่รองรับคู่ภาษาหรืออุปกรณ์ ใช้กลยุทธ์สำรอง
// Language pair options passed to both availability() and create()
const options = {
  sourceLanguage: 'es', // Example BCP 47 language code
  targetLanguage: 'fr', // Example BCP 47 language code
};

// 1. Check availability for the language pair
const availability = await Translator.availability(options);

if (availability === 'available') {
  // Model is ready immediately on device
  const translator = await Translator.create(options);
} else if (availability === 'downloadable' || availability === 'downloading') {
  // User gesture is strictly required before create() triggers or attaches to download
  document.getElementById('start-translation-btn').addEventListener('click', async () => {
    const translator = await Translator.create({
      ...options,
      monitor(m) {
        m.addEventListener('downloadprogress', (e) => {
          console.log(`Downloaded ${Math.round(e.loaded * 100)}%`);
        });
      },
    });
  });
} else if (availability === 'unavailable') {
  // Language pair or hardware unsupported; execute fallback
  console.warn('Translation model is unavailable on this device.');
}

2. การแปล

API รองรับทั้งการตอบกลับแบบคงที่และแบบสตรีมมิง รวมการตรวจสอบความคืบหน้าในการดาวน์โหลดเสมอเมื่อสร้างอินสแตนซ์ของโปรแกรมแปลภาษา

การแปลแบบมาตรฐาน

// Default to including a progress monitor when creating translator
const translator = await Translator.create({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${Math.round(e.loaded * 100)}%`);
    });
  },
});

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

การแปลแบบสตรีมมิง (สำหรับข้อความยาว):

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

ภาษาที่รองรับ

API รองรับรหัสภาษา BCP 47 ที่หลากหลาย โดยภาษาที่รองรับโดยการติดตั้งใช้งาน Translator API ของ Chrome มีดังนี้

  • ar: อาหรับ
  • bg: บัลแกเรีย
  • bn: เบงกอล
  • cs: เช็ก
  • da: เดนมาร์ก
  • de: เยอรมัน
  • el: กรีก
  • en: English
  • es: Spanish
  • fi: ฟินแลนด์
  • fr: French
  • hi: ฮินดี
  • hr: โครเอเชีย
  • hu: ฮังการี
  • id: อินโดนีเซีย
  • it: อิตาลี
  • he: ฮีบรู
  • ja: ญี่ปุ่น
  • kn: กันนาดา
  • ko: เกาหลี
  • lt: ลิทัวเนีย
  • mr: มราฐี
  • nl: ดัตช์
  • no: นอร์เวย์
  • pl: โปแลนด์
  • pt: โปรตุเกส
  • ro: โรมาเนีย
  • ru: รัสเซีย
  • sk: สโลวัก
  • sl: สโลวีเนีย
  • sv: Swedish
  • ta: ทมิฬ
  • te: เตลูกู
  • th: ไทย
  • tr: ตุรกี
  • uk: ยูเครน
  • vi: เวียดนาม
  • zh: จีน
  • zh-Hant: ภาษาจีน (ตัวเต็ม)

ความปลอดภัยและประสิทธิภาพ

  • นโยบายสิทธิ์: iframe แบบข้ามต้นทางต้องได้รับสิทธิ์อย่างชัดแจ้ง

    <iframe src="https://example.com/" allow="translator"></iframe>

  • Web Worker: ปัจจุบันไม่รองรับเนื่องจากความซับซ้อนของนโยบายสิทธิ์

  • ความเป็นส่วนตัว: ระบบจะไม่ส่งข้อมูลไปยังเซิร์ฟเวอร์ของ Google ในระหว่างกระบวนการแปลเมื่อดาวน์โหลดโมเดลแล้ว

กลยุทธ์สำรอง

ก่อนใช้งาน ให้ตรวจสอบว่าออบเจ็กต์ Translator พร้อมใช้งานในขอบเขตส่วนกลางหรือไม่ โดยทำดังนี้

if ('Translator' in self) {
  // The Translator API is supported.
} else {
  // Execute fallback strategy (do not fall back to window.ai.translator).
}

หากระบบไม่รองรับ Translator API หรือการตรวจสอบความพร้อมใช้งานแสดงผลเป็น 'unavailable' คุณต้องเปลี่ยนกลับอย่างราบรื่น

ตัวเลือกที่แนะนำมีดังนี้

  1. Remote API Fallback: เปลี่ยนเส้นทางคำขอแปลภาษาไปยังปลายทางเซิร์ฟเวอร์หรือ API ระยะไกลในระบบคลาวด์ (เช่น Vertex AI Gemini API) เพื่อให้บริการฟังก์ชันการแปลภาษา
  2. การลดลงอย่างค่อยเป็นค่อยไป: ปิดใช้องค์ประกอบหรือปุ่มควบคุมการแปลด้วยภาพขณะแสดงหมายเหตุที่เข้าใจง่ายสำหรับผู้ใช้ปลายทาง (เช่น "Client-side translation is currently unsupported in this browser") อย่าอนุญาตให้มีข้อยกเว้นที่ไม่ได้จัดการ
  3. Polyfill Fallback: คุณสามารถใช้ Polyfill ที่ชุมชนดูแลรักษา เช่น built-in-ai-task-apis-polyfills หรือ prompt-api-polyfill เพื่อจำลองแพลตฟอร์ม API โดยใช้บริการระยะไกลได้

ผลกระทบด้านความเป็นส่วนตัวและค่าใช้จ่าย: Polyfill เหล่านี้อาจส่งคำขอพร็อกซีไปยังเซิร์ฟเวอร์ระยะไกล (เช่น Gemini API ผ่านระบบคลาวด์) แม้ว่าการประมวลผลในเครื่องจะเป็นตัวเลือกหนึ่งด้วยเช่นกัน การประมวลผลระยะไกลจะลบล้างการรับประกันความเป็นส่วนตัวในอุปกรณ์ของ Built-in AI API แบบเนทีฟโดยสิ้นเชิง และมักจะทำให้เกิดค่าใช้จ่ายในการใช้งาน API ฝั่งเซิร์ฟเวอร์