Polyfill เวอร์ชันทดลองสำหรับ Prompt API

Thomas Steiner

เผยแพร่: 14 พฤษภาคม 2026

Prompt API ใน Chrome ช่วยให้คุณโต้ตอบกับ LLM ได้โดยใช้ API ของเบราว์เซอร์ระดับสูงใน window.LanguageModel อย่างไรก็ตาม เรายังคงรองรับการใช้งานนี้ในวงจำกัด และการติดตั้งใช้งานเป็นกระบวนการที่ซับซ้อน

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

โซลูชัน

ด้วยเหตุนี้ เราจึงเปิดตัว Prompt API polyfill ที่สอดคล้องกับข้อกำหนดเวอร์ชันทดลอง (ดูซอร์สโค้ดใน GitHub) ซึ่งใช้ Prompt API อย่างถูกต้องบนผู้ให้บริการแบ็กเอนด์ระบบคลาวด์ที่กำหนดค่าได้ รวมถึงบนผู้ให้บริการแบ็กเอนด์ในเครื่องในรูปแบบของ Transformers.js

ใช้ Polyfill

หากต้องการใช้ Polyfill ให้ทำดังนี้

1. ดาวน์โหลด polyfill จาก npm

   npm install prompt-api-polyfill
   

2. เลือกว่าคุณต้องการใช้ผู้ให้บริการแบ็กเอนด์ระบบคลาวด์หรือผู้ให้บริการแบ็กเอนด์ในพื้นที่

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

แบ็กเอนด์ระบบคลาวด์

เลือกแบ็กเอนด์ระบบคลาวด์และรับคีย์ API (และข้อมูลเข้าสู่ระบบเพิ่มเติม) สำหรับผู้ให้บริการแบ็กเอนด์

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

{
  "apiKey": "y0ur-Api-k3Y",
  "modelName": "model-name"
}

แบ็กเอนด์ในเครื่อง

หากตัดสินใจเลือกผู้ให้บริการแบ็กเอนด์ในพื้นที่ที่อิงตาม Transformers.js คุณจะต้องมีคีย์ API แบบจำลองเท่านั้น อย่างไรก็ตาม คุณสามารถกำหนดค่าอุปกรณ์ที่ Transformers.js ควรใช้ได้ เลือก "webgpu" เพื่อประสิทธิภาพสูงสุด และ "wasm" เพื่อความเข้ากันได้สูงสุด คุณจะเปลี่ยนการตั้งค่าเริ่มต้นหรือไม่ก็ได้ เลือกโมเดลอื่นจากแคตตาล็อกโมเดลที่เข้ากันได้ของ Hugging Face สำหรับบางโมเดล คุณสามารถเลือกการหาปริมาณที่แตกต่างกันได้โดยใช้พารามิเตอร์ dtype

{
  "apiKey": "dummy",
  "device": "webgpu",
  "dtype": "q4f16",
  "modelName": "onnx-community/gemma-3-1b-it-ONNX-GQA"
};

กำหนดค่า Polyfill

เมื่อมีไฟล์การกำหนดค่าแล้ว คุณก็เริ่มใช้ Polyfill ในแอปได้

1. นําเข้าไฟล์การกําหนดค่าและกําหนดให้กับตัวแปรส่วนกลางที่มีชื่อเหมาะสม โดยที่ $BACKEND คือแบ็กเอนด์ที่คุณเลือก window.$BACKEND_CONFIG
2. ใช้การนำเข้าแบบไดนามิกเพื่อโหลด Polyfill เฉพาะเมื่อเบราว์เซอร์พื้นฐานไม่รองรับ
3. เรียกใช้ฟังก์ชัน Prompt API

import config from './.env.json' with { type: 'json' };

// Set $BACKEND_CONFIG to select a backend
window.$BACKEND_CONFIG = config;

if (!('LanguageModel' in window)) {
  await import('prompt-api-polyfill');
}

const session = await LanguageModel.create({
  expectedInputs: [{type: 'text', languages: ['en']}],
  expectedOutputs: [{type: 'text', languages: ['en']}],
});
await session.prompt('Tell me a joke!');

Polyfill รองรับเอาต์พุตที่มีโครงสร้าง (ยกเว้นแบ็กเอนด์ Transformers.js) จัดการอินพุตหลายรูปแบบ (ยกเว้นแบ็กเอนด์ OpenAI ที่ไม่รองรับเสียงและรูปภาพพร้อมกัน แต่รองรับแยกกัน) และผ่านการทดสอบกับชุดการทดสอบแพลตฟอร์มเว็บที่สมบูรณ์สำหรับ LanguageModel

ดูข้อมูลเบื้องหลังและข้อมูลการใช้งานแบบละเอียด รวมถึงซอร์สโค้ดได้ในไฟล์ README ในที่เก็บข้อมูล GitHub

ความแตกต่างจาก Prompt API ของเบราว์เซอร์

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

window.addEventListener("offline", (e) => {
  console.log("offline");
});

window.addEventListener("online", (e) => {
  console.log("online");
});

หากการอนุมาน AI ทำงานกับโมเดลในระบบคลาวด์ ก็จะไม่มีโมเดลในเครื่องให้ดาวน์โหลด Polyfill จะจำลองเหตุการณ์ downloadprogress ดังนั้นแอปของคุณจะเห็นว่ามีการดาวน์โหลดโมเดลในตัวแล้ว ซึ่งหมายความว่าจะมีเหตุการณ์ 2 รายการ รายการหนึ่งมีค่า loaded เป็น 0 และอีกรายการหนึ่งมีค่า 1 ซึ่งเป็นสิ่งที่ข้อกำหนดต้องการ

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

const COST_PER_TOKEN = 123;
const COST_LIMIT = 456;

let costSoFar = 0;

const session = await LanguageModel.create(options);

/…/

if (costSoFar < COST_LIMIT) {
  await session.prompt('Tell me a joke.');
  costSoFar = session.contextUsage * COST_PER_TOKEN;
} else {
  // Show premium AI plan promo.
}

เมื่อคุณเรียกใช้ Cloud API โดยตรงจากแอปบนอุปกรณ์เคลื่อนที่หรือเว็บแอป (เช่น API ที่อนุญาตให้เข้าถึงโมเดล Generative AI) คีย์ API จะมีความเสี่ยงต่อการถูกไคลเอ็นต์ที่ไม่ได้รับอนุญาตนำไปใช้ในทางที่ผิด หากใช้ Firebase AI Logic Hybrid SDK คุณควรใช้ Firebase App Check เพื่อยืนยันว่าการเรียก API ขาเข้าทั้งหมดมาจากแอปจริงของคุณ เพื่อช่วยปกป้อง API เหล่านี้ นอกจากนี้ คุณยังบังคับใช้การตรวจสอบต้นทางอย่างเข้มงวดเพื่อให้แน่ใจว่าเฉพาะเว็บไซต์ที่ได้รับอนุญาตเท่านั้นที่ใช้ API ได้ด้วยผู้ให้บริการระบบคลาวด์บางราย เช่น Google

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

สร้างแบ็กเอนด์ของคุณเอง

หากต้องการเพิ่มผู้ให้บริการแบ็กเอนด์ของคุณเอง ให้ทำตามขั้นตอนต่อไปนี้

ขยายคลาสแบ็กเอนด์พื้นฐาน

สร้างไฟล์ใหม่ในไดเรกทอรี backends/ เช่น backends/custom-backend.js คุณต้องขยายคลาส PolyfillBackend และใช้เมธอดหลักที่ตรงกับอินเทอร์เฟซที่คาดไว้

import PolyfillBackend from './base.js';
import { DEFAULT_MODELS } from './defaults.js';

export default class CustomBackend extends PolyfillBackend {
  constructor(config) {
    // config typically comes from a window global (e.g., window.CUSTOM_CONFIG)
    super(config.modelName || DEFAULT_MODELS.custom.modelName);
  }

  // Check if the backend is configured (e.g., API key is present), if given
  // combinations of modelName and options are supported, or, for local model,
  // if the model is available.
  static availability(options) {
    return window.CUSTOM_CONFIG?.apiKey ? 'available' : 'unavailable';
  }

  // Initialize the underlying SDK or API client. With local models, use
  // monitorTarget to report model download progress to the polyfill.
  createSession(options, sessionParams, monitorTarget) {
    // Return the initialized session or client instance
  }

  // Non-streaming prompt execution
  async generateContent(contents) {
    // contents: Array of { role: 'user'|'model', parts: [{ text: string }] }
    // Return: { text: string, usage: number }
  }

  // Streaming prompt execution
  async generateContentStream(contents) {
    // Return: AsyncIterable yielding chunks
  }

  // Token counting for quota/usage tracking
  async countTokens(contents) {
    // Return: total token count (number)
  }
}

ลงทะเบียนแบ็กเอนด์

Polyfill ใช้กลยุทธ์ "ลำดับความสำคัญของการจับคู่ครั้งแรก" ตามการกำหนดค่าส่วนกลาง คุณต้องลงทะเบียนแบ็กเอนด์ในไฟล์ prompt-api-polyfill.js โดยเพิ่มลงในอาร์เรย์ #backends แบบคงที่

// prompt-api-polyfill.js
static #backends = [
  // ... existing backends
  {
    config: 'CUSTOM_CONFIG', // The global object to look for on `window`
    path: './backends/custom-backend.js',
  },
];

ตั้งค่าโมเดลเริ่มต้น

กำหนดข้อมูลประจำตัวของโมเดลสำรองใน backends/defaults.js ใช้เมื่อผู้ใช้เริ่มต้นเซสชันโดยไม่ได้ระบุ modelName ที่เฉพาะเจาะจง

// backends/defaults.js
export const DEFAULT_MODELS = {
  // ...
  custom: 'custom-model-pro-v1',
};

เปิดใช้การพัฒนาและการทดสอบในเครื่อง

โปรเจ็กต์ใช้สคริปต์การค้นพบ (scripts/list-backends.js) เพื่อสร้างเมทริกซ์การทดสอบ หากต้องการรวมแบ็กเอนด์ใหม่ไว้ในโปรแกรมเรียกใช้การทดสอบ ให้สร้างไฟล์ .env-[name].json (เช่น .env-custom.json) ในไดเรกทอรีราก

{
  "apiKey": "your-api-key-here",
  "modelName": "custom-model-pro-v1"
}

ยืนยันด้วยการทดสอบแพลตฟอร์มเว็บ (WPT)

ขั้นตอนสุดท้ายคือการตรวจสอบการปฏิบัติตามข้อกำหนด เนื่องจาก Polyfill ขับเคลื่อนด้วยข้อกำหนด แบ็กเอนด์ใหม่จึงควรผ่านการทดสอบแพลตฟอร์มเว็บอย่างเป็นทางการ (หรือแบบทดลอง) ดังนี้

npm run test:wpt

ขั้นตอนการยืนยันนี้ช่วยให้มั่นใจได้ว่าแบ็กเอนด์จะจัดการสิ่งต่างๆ เช่น AbortSignal, พรอมต์ของระบบ และการจัดรูปแบบประวัติ ตรงตามที่ข้อกำหนดของ Prompt API คาดหวังไว้

บทสรุป

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

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