Prompt API

Thomas Steiner

Alexandra Klepper

เผยแพร่เมื่อวันที่ 20 พฤษภาคม 2025, อัปเดตล่าสุดเมื่อวันที่ 21 กันยายน 2025

วิดีโออธิบาย	เว็บ	ส่วนขยาย	สถานะ Chrome	ความตั้งใจ
GitHub	Chrome 148	Chrome 138	ดู	ความตั้งใจที่จะเปิดตัว
GitHub	ช่วงทดลองใช้จากต้นทางสำหรับพารามิเตอร์การสุ่มตัวอย่าง	Chrome 148	ดู	ความตั้งใจที่จะทดลอง

Prompt API ช่วยให้คุณส่งคำขอเป็นภาษาธรรมชาติไปยัง Gemini Nano ในเบราว์เซอร์ได้

คุณใช้ Prompt API ได้หลายวิธี เช่น คุณสามารถสร้างสิ่งต่อไปนี้ได้

• การค้นหาที่ทำงานด้วยระบบ AI: ตอบคำถามโดยอิงตามเนื้อหาของหน้าเว็บ
• ข่าวที่คัดสรรมาให้ผู้ใช้โดยเฉพาะ: สร้างฟีดที่จัดหมวดหมู่บทความแบบไดนามิกด้วยหมวดหมู่ต่างๆ และอนุญาตให้ผู้ใช้กรองเนื้อหาดังกล่าวได้
• ตัวกรองเนื้อหาที่กำหนดเอง วิเคราะห์บทความข่าวและเบลอหรือซ่อนเนื้อหาโดยอัตโนมัติตามหัวข้อที่ผู้ใช้กำหนด
• การสร้างกิจกรรมในปฏิทิน พัฒนาส่วนขยาย Chrome ที่ดึงรายละเอียดกิจกรรมจากหน้าเว็บโดยอัตโนมัติ เพื่อให้ผู้ใช้สร้างรายการในปฏิทินได้ในไม่กี่ขั้นตอน
• การดึงข้อมูลติดต่ออย่างราบรื่น สร้างส่วนขยายที่ดึงข้อมูลติดต่อจากเว็บไซต์ เพื่อให้ผู้ใช้ติดต่อธุรกิจหรือเพิ่มรายละเอียดลงในรายชื่อติดต่อได้ง่ายขึ้น

นี่เป็นเพียงตัวอย่างบางส่วน และเราตื่นเต้นที่จะได้เห็นผลงานชิ้นต่อไปของคุณ

ใช้ Prompt API

Prompt API ใช้โมเดล Gemini Nano ใน Chrome แม้ว่า API จะฝังอยู่ใน Chrome แต่ระบบจะดาวน์โหลดโมเดลแยกกันในครั้งแรกที่ต้นทางใช้ API โปรดยอมรับ นโยบายการใช้งานที่ไม่อนุญาตสำหรับ Generative AI ของ Google ก่อนใช้ API นี้

หากต้องการตรวจสอบว่าโมเดลพร้อมใช้งานหรือไม่ ให้เรียก LanguageModel.availability()

const availability = await LanguageModel.availability({
  // The same options in `prompt()` or `promptStreaming()`
});

หากต้องการทริกเกอร์การดาวน์โหลดและสร้างอินสแตนซ์โมเดลภาษา ให้ตรวจสอบ การเปิดใช้งานของผู้ใช้ จากนั้นเรียกฟังก์ชัน create()

const session = await LanguageModel.create({
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

หากการตอบกลับ availability() เป็น downloading ให้ตรวจสอบความคืบหน้าในการดาวน์โหลดและ แจ้งให้ผู้ใช้ทราบ เนื่องจากอาจใช้เวลาสักพักในการดาวน์โหลด

พารามิเตอร์โมเดล

ฟังก์ชัน params() จะแจ้งให้คุณทราบพารามิเตอร์ของโมเดลภาษา โดยออบเจ็กต์จะมีช่องต่อไปนี้

• defaultTopK: ค่า Top-K เริ่มต้น
• maxTopK: ค่า Top-K สูงสุด
• defaultTemperature: อุณหภูมิเริ่มต้น
• maxTemperature: อุณหภูมิสูงสุด

// Only available when using the Prompt API for Chrome Extensions.
await LanguageModel.params();
// {defaultTopK: 3, maxTopK: 128, defaultTemperature: 1, maxTemperature: 2}

สร้างเซสชัน

เมื่อ Prompt API ทำงานได้แล้ว คุณจะสร้างเซสชันด้วยฟังก์ชัน create()

const session = await LanguageModel.create();

สร้างเซสชันด้วย Prompt API สำหรับส่วนขยาย Chrome

เมื่อใช้ Prompt API สำหรับส่วนขยาย Chrome คุณสามารถปรับแต่งแต่ละเซสชันด้วย topK และ temperature ได้โดยใช้ออบเจ็กต์ตัวเลือกที่ไม่บังคับ ระบบจะส่งคืนค่าเริ่มต้นสำหรับพารามิเตอร์เหล่านี้จาก LanguageModel.params()

// Only available when using the Prompt API for Chrome Extensions.
const params = await LanguageModel.params();
// Initializing a new session must either specify both `topK` and
// `temperature` or neither of them.
// Only available when using the Prompt API for Chrome Extensions.
const slightlyHighTemperatureSession = await LanguageModel.create({
  temperature: Math.max(params.defaultTemperature * 1.2, 2.0),
  topK: params.defaultTopK,
});

ออบเจ็กต์ตัวเลือกที่ไม่บังคับของฟังก์ชัน create() ยังมีช่อง signal ซึ่งช่วยให้คุณส่ง AbortSignal เพื่อทำลายเซสชันได้

const controller = new AbortController();
stopButton.onclick = () => controller.abort();

const session = await LanguageModel.create({
  signal: controller.signal,
});

เพิ่มบริบทด้วยพรอมต์เริ่มต้น

พรอมต์เริ่มต้นช่วยให้คุณให้บริบทเกี่ยวกับปฏิสัมพันธ์ก่อนหน้านี้แก่โมเดลภาษาได้ เช่น เพื่ออนุญาตให้ผู้ใช้กลับมาใช้เซสชันที่เก็บไว้หลังจากรีสตาร์ทเบราว์เซอร์

const session = await LanguageModel.create({
  initialPrompts: [
    { role: 'system', content: 'You are a helpful and friendly assistant.' },
    { role: 'user', content: 'What is the capital of Italy?' },
    { role: 'assistant', content: 'The capital of Italy is Rome.' },
    { role: 'user', content: 'What language is spoken there?' },
    {
      role: 'assistant',
      content: 'The official language of Italy is Italian. [...]',
    },
  ],
});

จำกัดการตอบกลับด้วยคำนำหน้า

คุณสามารถเพิ่มบทบาท "assistant" นอกเหนือจากบทบาทก่อนหน้าเพื่อขยายความ การตอบกลับก่อนหน้าของโมเดลได้ เช่น

const followup = await session.prompt([
  {
    role: "user",
    content: "I'm nervous about my presentation tomorrow"
  },
  {
    role: "assistant",
    content: "Presentations are tough!"
  }
]);

ในบางกรณี คุณอาจต้องการ ป้อนข้อความตอบกลับบางส่วนของบทบาท "assistant"- ไว้ล่วงหน้าแทนที่จะขอการตอบกลับใหม่ ซึ่งอาจเป็นประโยชน์ในการแนะนำให้โมเดลภาษาใช้รูปแบบการตอบกลับที่เฉพาะเจาะจง หากต้องการทำเช่นนี้ ให้เพิ่ม prefix: true ลงในข้อความบทบาท "assistant"- ที่ต่อท้าย เช่น

const characterSheet = await session.prompt([
  {
    role: 'user',
    content: 'Create a TOML character sheet for a gnome barbarian',
  },
  {
    role: 'assistant',
    content: '```toml\n',
    prefix: true,
  },
]);

เพิ่มอินพุตและเอาต์พุตที่คาดไว้

Prompt API มีความสามารถในสื่อหลากรูปแบบและ รองรับหลายภาษา ตั้งค่ารูปแบบและภาษา expectedInputs และ expectedOutputs เมื่อสร้างเซสชัน

• type: รูปแบบที่คาดไว้
  • สำหรับ expectedInputs รูปแบบนี้อาจเป็น text, image หรือ audio
  • สำหรับ expectedOutputs Prompt API อนุญาตเฉพาะ text
• languages: อาร์เรย์สำหรับตั้งค่าภาษาที่คาดไว้ Prompt API ยอมรับ "en", "ja" และ "es" โดยเรากำลังพัฒนาการรองรับภาษาอื่นๆ
  • สำหรับ expectedInputs ให้ตั้งค่าภาษาของพรอมต์ระบบและภาษาของพรอมต์ผู้ใช้ที่คาดไว้อย่างน้อย 1 ภาษา
  • ตั้งค่าภาษา expectedOutputs อย่างน้อย 1 ภาษา

const session = await LanguageModel.create({
  expectedInputs: [
    { type: "text", languages: ["en" /* system prompt */, "ja" /* user prompt */] }
  ],
  expectedOutputs: [
    { type: "text", languages: ["ja"] }
  ]
});

คุณอาจได้รับ "NotSupportedError" DOMException หากโมเดลพบ อินพุตหรือเอาต์พุตที่ไม่รองรับ

ความสามารถในสื่อหลากรูปแบบ

ความสามารถเหล่านี้ช่วยให้คุณทำสิ่งต่อไปนี้ได้

• อนุญาตให้ผู้ใช้ถอดเสียงข้อความเสียงที่ส่งในแอปพลิเคชันแชท
• อธิบายรูปภาพที่อัปโหลดไปยังเว็บไซต์เพื่อใช้ในคำบรรยายหรือข้อความแสดงแทน

ดูตัวอย่าง พรอมต์เสียง Mediarecorder สำหรับการใช้ Prompt API กับอินพุตเสียง และตัวอย่าง พรอมต์รูปภาพ Canvas demo สำหรับการใช้ Prompt API กับอินพุตรูปภาพ

Prompt API รองรับอินพุตประเภทต่อไปนี้

• เสียง:
  • AudioBuffer
  • ArrayBufferView
  • ArrayBuffer
  • Blob
• ภาพ:
  • HTMLImageElement
  • SVGImageElement
  • HTMLVideoElement (ใช้เฟรมวิดีโอในตำแหน่งวิดีโอปัจจุบัน)
  • HTMLCanvasElement
  • ImageBitmap
  • OffscreenCanvas
  • VideoFrame
  • Blob
  • ImageData

ข้อมูลโค้ดนี้แสดงเซสชันสื่อหลากรูปแบบที่ประมวลผลภาพ 2 ภาพ (ภาพ Blob 1 ภาพและ HTMLCanvasElement 1 ภาพ) ก่อน และให้ AI เปรียบเทียบภาพทั้ง 2 จากนั้นให้ผู้ใช้ตอบกลับด้วยเสียงที่บันทึกไว้ (เป็น AudioBuffer)

const session = await LanguageModel.create({
  expectedInputs: [
    { type: "text", languages: ["en"] },
    { type: "audio" },
    { type: "image" },
  ],
  expectedOutputs: [{ type: "text", languages: ["en"] }],
});

const referenceImage = await (await fetch("reference-image.jpeg")).blob();
const userDrawnImage = document.querySelector("canvas");

const response1 = await session.prompt([
  {
    role: "user",
    content: [
      {
        type: "text",
        value:
          "Give a helpful artistic critique of how well the second image matches the first:",
      },
      { type: "image", value: referenceImage },
      { type: "image", value: userDrawnImage },
    ],
  },
]);
console.log(response1);

const audioBuffer = await captureMicrophoneInput({ seconds: 10 });

const response2 = await session.prompt([
  {
    role: "user",
    content: [
      { type: "text", value: "My response to your critique:" },
      { type: "audio", value: audioBuffer },
    ],
  },
]);
console.log(response2);

เพิ่มข้อความ

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

แม้ว่า initialPrompts จะมีประโยชน์เมื่อสร้างเซสชัน แต่คุณสามารถใช้วิธี append() นอกเหนือจากวิธี prompt() หรือ promptStreaming() เพื่อให้พรอมต์ตามบริบทเพิ่มเติมหลังจากสร้างเซสชันแล้ว

เช่น

const session = await LanguageModel.create({
  initialPrompts: [
    {
      role: 'system',
      content:
        'You are a skilled analyst who correlates patterns across multiple images.',
    },
  ],
  expectedInputs: [{ type: 'image' }],
});

fileUpload.onchange = async () => {
  await session.append([
    {
      role: 'user',
      content: [
        {
          type: 'text',
          value: `Here's one image. Notes: ${fileNotesInput.value}`,
        },
        { type: 'image', value: fileUpload.files[0] },
      ],
    },
  ]);
};

analyzeButton.onclick = async (e) => {
  analysisResult.textContent = await session.prompt(userQuestionInput.value);
};

สัญญาที่ส่งคืนโดย append() จะสำเร็จเมื่อมีการตรวจสอบพรอมต์ ประมวลผล และเพิ่มลงในเซสชันแล้ว สัญญาจะถูกปฏิเสธหากเพิ่มพรอมต์ไม่ได้

ส่ง JSON Schema

เพิ่มช่อง responseConstraint ลงในวิธี prompt() หรือ promptStreaming() เพื่อส่ง JSON Schema เป็นค่า จากนั้นคุณจะใช้ เอาต์พุตที่มีโครงสร้างกับ Prompt API ได้

ในตัวอย่างต่อไปนี้ JSON Schema จะตรวจสอบว่าโมเดลตอบกลับด้วย true หรือ false เพื่อจัดประเภทว่าข้อความที่กำหนดเกี่ยวข้องกับเครื่องปั้นดินเผาหรือไม่

const session = await LanguageModel.create();

const schema = {
  "type": "boolean"
};

const post = "Mugs and ramen bowls, both a bit smaller than intended, but that
happens with reclaim. Glaze crawled the first time around, but pretty happy
with it after refiring.";

const result = await session.prompt(
  `Is this post about pottery?\n\n${post}`,
  {
    responseConstraint: schema,
  }
);
console.log(JSON.parse(result));
// true

การติดตั้งใช้งานของคุณสามารถรวม JSON Schema หรือนิพจน์ทั่วไปเป็นส่วนหนึ่งของข้อความที่ส่งไปยังโมเดลได้ ซึ่งจะใช้หน้าต่างบริบทบางส่วน คุณสามารถวัดขนาดหน้าต่างบริบทที่จะใช้ได้โดยส่งตัวเลือก responseConstraint ไปยัง session.measureContextUsage()

คุณหลีกเลี่ยงลักษณะการทำงานนี้ได้ด้วยตัวเลือก omitResponseConstraintInput หากทำเช่นนั้น เราขอแนะนำให้คุณใส่คำแนะนำบางอย่างในพรอมต์

const result = await session.prompt(`
  Summarize this feedback into a rating between 0-5. Only output a JSON
  object { rating }, with a single property whose value is a number:
  The food was delicious, service was excellent, will recommend.
`, { responseConstraint: schema, omitResponseConstraintInput: true });

พรอมต์โมเดล

คุณสามารถพรอมต์โมเดลด้วยฟังก์ชัน prompt() หรือ promptStreaming()

เอาต์พุตตามคำขอ

หากคาดว่าผลลัพธ์จะสั้น คุณสามารถใช้ฟังก์ชัน prompt() ที่ส่งคืนการตอบกลับเมื่อพร้อมใช้งาน

// Start by checking if it's possible to create a session based on the
// availability of the model, and the characteristics of the device.
const available = await LanguageModel.availability({
  expectedInputs: [{type: 'text', languages: ['en']}],
  expectedOutputs: [{type: 'text', languages: ['en']}],
});

if (available !== 'unavailable') {
  const session = await LanguageModel.create();

  // Prompt the model and wait for the whole result to come back.
  const result = await session.prompt('Write me a poem!');
  console.log(result);
}

เอาต์พุตแบบสตรีม

หากคาดว่าการตอบกลับจะยาวขึ้น คุณควรใช้ฟังก์ชัน promptStreaming() ซึ่งช่วยให้คุณแสดงผลลัพธ์บางส่วนได้เมื่อได้รับจากโมเดล ฟังก์ชัน promptStreaming() จะส่งคืน ReadableStream

const available = await LanguageModel.availability({
  expectedInputs: [{type: 'text', languages: ['en']}],
  expectedOutputs: [{type: 'text', languages: ['en']}],
});
if (available !== 'unavailable') {
  const session = await LanguageModel.create();

  // Prompt the model and stream the result:
  const stream = session.promptStreaming('Write me an extra-long poem!');
  for await (const chunk of stream) {
    console.log(chunk);
  }
}

หยุดพรอมต์

ทั้ง prompt() และ promptStreaming() ยอมรับพารามิเตอร์ที่ 2 ที่ไม่บังคับซึ่งมีช่อง signal ซึ่งช่วยให้คุณหยุดพรอมต์ที่กำลังทำงานได้

const controller = new AbortController();
stopButton.onclick = () => controller.abort();

const result = await session.prompt('Write me a poem!', {
  signal: controller.signal,
});

การจัดการเซสชัน

แต่ละเซสชันจะติดตามบริบทของการสนทนา ระบบจะพิจารณาการโต้ตอบก่อนหน้านี้สำหรับการโต้ตอบในอนาคตจนกว่าหน้าต่างบริบทของเซสชันจะเต็ม

แต่ละเซสชันมีจำนวนโทเค็นสูงสุดที่ประมวลผลได้ ตรวจสอบความคืบหน้าของคุณเทียบกับขีดจำกัดนี้ด้วยวิธีต่อไปนี้

console.log(`${session.contextUsage}/${session.contextWindow}`);

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

คุณสามารถตรวจหาการล้นดังกล่าวได้โดยการตรวจสอบเหตุการณ์ contextoverflow ในเซสชัน

session.addEventListener("contextoverflow", () => {
  console.log("We've gone past the context window, and some inputs will be dropped!");
});

หากนำโทเค็นออกจากประวัติการสนทนาไม่เพียงพอที่จะประมวลผลพรอมต์ใหม่ การเรียก prompt() หรือ promptStreaming() จะล้มเหลวโดยมีข้อยกเว้น QuotaExceededError และระบบจะไม่นำสิ่งใดออก QuotaExceededError มีพร็อพเพอร์ตี้ต่อไปนี้

• requested: จำนวนโทเค็นที่อินพุตประกอบด้วย
• contextWindow: จำนวนโทเค็นที่พร้อมใช้งาน

ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดการเซสชัน

โคลนเซสชัน

คุณสามารถคัดลอกเซสชันที่มีอยู่ด้วยฟังก์ชัน clone() เพื่อรักษาทรัพยากรไว้ ซึ่งจะสร้างการแยกการสนทนา โดยจะเก็บรักษาบริบทและพรอมต์เริ่มต้นไว้

ฟังก์ชัน clone() ใช้ออบเจ็กต์ตัวเลือกที่ไม่บังคับซึ่งมีช่อง signal ซึ่งช่วยให้คุณส่ง AbortSignal เพื่อทำลายเซสชันที่โคลนได้

const controller = new AbortController();
stopButton.onclick = () => controller.abort();

const clonedSession = await session.clone({
  signal: controller.signal,
});

สิ้นสุดเซสชัน

เรียก destroy() เพื่อเพิ่มทรัพยากรหากคุณไม่ต้องการเซสชันอีกต่อไป เมื่อทำลายเซสชันแล้ว คุณจะไม่สามารถใช้เซสชันนั้นได้อีกต่อไป และระบบจะยกเลิกการดำเนินการที่กำลังดำเนินอยู่ คุณอาจต้องการเก็บเซสชันไว้หากตั้งใจจะพรอมต์โมเดลบ่อยๆ เนื่องจากอาจใช้เวลาสักครู่ในการสร้างเซสชัน

await session.prompt(
  "You are a friendly, helpful assistant specialized in clothing choices."
);

session.destroy();

// The promise is rejected with an error explaining that
// the session is destroyed.
await session.prompt(
  "What should I wear today? It is sunny, and I am choosing between a t-shirt
  and a polo."
);

การสาธิต

เราได้สร้างการสาธิตหลายรายการเพื่อสำรวจกรณีการใช้งานต่างๆ ของ Prompt API การสาธิตต่อไปนี้เป็นเว็บแอปพลิเคชัน

• สนามเด็กเล่น Prompt API
• พรอมต์เสียง Mediarecorder
• พรอมต์รูปภาพ Canvas

หากต้องการทดสอบ Prompt API ในส่วนขยาย Chrome ให้ติดตั้งส่วนขยายการสาธิต ซอร์สโค้ดของส่วนขยาย พร้อมให้บริการบน GitHub

กลยุทธ์ด้านประสิทธิภาพ

เรายังคงพัฒนา Prompt API สำหรับเว็บอยู่ ในระหว่างที่เราสร้าง API นี้ โปรดดูแนวทางปฏิบัติแนะนำเกี่ยวกับการจัดการเซสชัน เพื่อประสิทธิภาพสูงสุด

นโยบายสิทธิ์, iframe และ Web Worker

โดยค่าเริ่มต้น Prompt API จะพร้อมใช้งานสำหรับหน้าต่างระดับบนสุดและ iframe ที่มีต้นทางเดียวกันเท่านั้น คุณสามารถมอบสิทธิ์เข้าถึง API ให้กับ iframe แบบข้ามต้นทางได้ โดยใช้แอตทริบิวต์ของนโยบายสิทธิ์ allow=""

<!--
  The hosting site at https://main.example.com can grant a cross-origin iframe
  at https://cross-origin.example.com/ access to the Prompt API by
  setting the `allow="language-model"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="language-model"></iframe>

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

เข้าร่วมและแชร์ความคิดเห็น

ข้อมูลของคุณสามารถส่งผลโดยตรงต่อวิธีที่เราสร้างและติดตั้งใช้งาน API เวอร์ชันต่อๆ ไป รวมถึง API AI ในตัวทั้งหมด

• หากต้องการแสดงความคิดเห็นเกี่ยวกับการติดตั้งใช้งานของ Chrome โปรดรายงาน ข้อบกพร่อง หรือส่ง คำขอฟีเจอร์
• แชร์ความคิดเห็นเกี่ยวกับรูปร่าง API โดยแสดงความคิดเห็นในปัญหาที่มีอยู่หรือโดย เปิดปัญหาใหม่ใน ที่เก็บ GitHub ของ Prompt API
• เข้าร่วมโปรแกรมทดลองใช้ล่วงหน้า