Prompt API

Thomas Steiner
Alexandra Klepper
Alexandra Klepper
GitHub Bluesky

เผยแพร่เมื่อ: 20 พฤษภาคม 2025, อัปเดตล่าสุด: 19 พฤษภาคม 2026

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

Prompt API ช่วยให้คุณส่งคำขอเป็นภาษาธรรมชาติไปยังโมเดลพื้นฐานใน Chrome ได้

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

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

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

ตรวจสอบข้อกำหนดของฮาร์ดแวร์

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

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

Prompt API, Summarizer API, Writer API, Rewriter API และ Proofreader API ทำงานใน Chrome เมื่อเป็นไปตามเงื่อนไขต่อไปนี้

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

ขนาดที่แน่นอนของ Gemini Nano อาจแตกต่างกันไปเมื่อเบราว์เซอร์อัปเดตโมเดล หากต้องการทราบขนาดปัจจุบัน โปรดไปที่ chrome://on-device-internals

ใช้ Prompt API

Prompt API ใช้โมเดล Gemini Nano ใน Chrome แม้ว่า API จะฝังอยู่ใน Chrome แต่ระบบจะดาวน์โหลดโมเดลแยกกันในครั้งแรกที่ต้นทางใช้ 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() จะแจ้งให้คุณทราบพารามิเตอร์ของโมเดลภาษา ออบเจ็กต์มีช่องต่อไปนี้

// 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", "de" และ "fr" เรากำลังพัฒนาการรองรับภาษาเพิ่มเติม
    • สำหรับ 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 Audio Prompt สำหรับการใช้ Prompt API กับอินพุตเสียง และการสาธิต Canvas Image Prompt demo สำหรับการใช้ Prompt API กับอินพุตรูปภาพ

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

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