Prompt API

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

คำอธิบาย เว็บ ส่วนขยาย สถานะของ Chrome ความตั้งใจ
GitHub ช่วงทดลองใช้จากต้นทาง ในช่วงทดลองใช้ Origin Chrome 138 ดู ความตั้งใจที่จะทดลอง

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

คุณใช้ Prompt API ในเว็บแอปพลิเคชันหรือเว็บไซต์ได้หลายวิธี ตัวอย่างเช่น คุณสามารถสร้างสิ่งต่อไปนี้ได้

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

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

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

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

API ตรวจหาภาษาและ API แปลภาษาใช้งานได้ใน Chrome บนเดสก์ท็อป API เหล่านี้ใช้ไม่ได้ใน อุปกรณ์เคลื่อนที่ Prompt API, Summarizer API, Writer API และ Rewriter API จะทำงานใน Chrome เมื่อเป็นไปตามเงื่อนไขต่อไปนี้

  • ระบบปฏิบัติการ: Windows 10 หรือ 11, macOS 13 ขึ้นไป (Ventura ขึ้นไป), Linux หรือ ChromeOS (ตั้งแต่แพลตฟอร์ม 16389.0.0 ขึ้นไป) ในอุปกรณ์ [Chromebook Plus](https://www.google.com/chromebook/chromebookplus/) Chrome สำหรับ Android, iOS และ ChromeOS ในอุปกรณ์ที่ไม่ใช่ Chromebook Plus ยังไม่รองรับ API ที่ใช้ Gemini Nano
  • พื้นที่เก็บข้อมูล: มีพื้นที่ว่างอย่างน้อย 22 GB ในวอลุ่มที่มี โปรไฟล์ Chrome
  • GPU: VRAM มากกว่า 4 GB เท่านั้น
  • เครือข่าย: อินเทอร์เน็ตแบบไม่จำกัดหรือการเชื่อมต่อแบบไม่จำกัดปริมาณ

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

ใช้ Prompt API

Prompt API ใช้โมเดล Gemini Nano ใน Chrome แม้ว่า API จะฝังอยู่ใน Chrome แต่ระบบจะดาวน์โหลดโมเดลแยกกันในครั้งแรกที่ต้นทางใช้ API

หากต้องการดูว่าโมเดลพร้อมใช้งานหรือไม่ ให้เรียกใช้ LanguageModel.availability() หากการตอบกลับ availability() คือ downloadable ให้ฟัง ความคืบหน้าการดาวน์โหลดและแจ้งให้ผู้ใช้ทราบ เนื่องจากอาจใช้เวลาสักครู่

const availability = await LanguageModel.availability();

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

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

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

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

await LanguageModel.params();
// {defaultTopK: 3, maxTopK: 128, defaultTemperature: 1, maxTemperature: 2}

สร้างเซสชัน

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

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

const params = await LanguageModel.params();
// Initializing a new session must either specify both `topK` and
// `temperature` or neither of them.
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"-role บางส่วนไว้ล่วงหน้าแทนที่จะขอคำตอบใหม่ ซึ่งอาจเป็นประโยชน์ในการ แนะนํารูปแบบภาษาให้ใช้รูปแบบการตอบกลับที่เฉพาะเจาะจง โดยเพิ่ม 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,
  },
]);

ผนวกข้อความ

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

แม้ว่า 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);
};

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

ความต่อเนื่องและขีดจํากัดของเซสชัน

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

const session = await LanguageModel.create({
  initialPrompts: [
    {
      role: 'system',
      content:
        'You are a friendly, helpful assistant specialized in clothing choices.',
    },
  ],
});

const result1 = await session.prompt(
  'What should I wear today? It is sunny. I am unsure between a t-shirt and a polo.',
);
console.log(result1);

const result2 = await session.prompt(
  'That sounds great, but oh no, it is actually going to rain! New advice?',
);
console.log(result2);

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

console.log(`${session.inputUsage}/${session.inputQuota}`);

ส่ง 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.measureInputUsage()

คุณหลีกเลี่ยงลักษณะการทำงานนี้ได้ด้วย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 });

โคลนเซสชัน

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

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

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

พรอมต์โมเดล

คุณสามารถแจ้งโมเดลด้วยฟังก์ชัน 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 { defaultTemperature, maxTemperature, defaultTopK, maxTopK } =
  await LanguageModel.params();

const available = await LanguageModel.availability();

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 { defaultTemperature, maxTemperature, defaultTopK, maxTopK } =
  await LanguageModel.params();

const available = await LanguageModel.availability();
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,
});

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

โทรหา 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 จากต้นทางรองรับอินพุตเสียงและรูปภาพ API จะแสดงผลข้อความ

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

  • อนุญาตให้ผู้ใช้ถอดเสียงข้อความเสียงที่ส่งในแอปพลิเคชันแชท
  • อธิบายรูปภาพที่อัปโหลดไปยังเว็บไซต์เพื่อใช้ในคำบรรยายแทนเสียงหรือข้อความแสดงแทน
const session = await LanguageModel.create({
  // { type: 'text' } only required when including expected input languages.
  expectedInputs: [{ type: 'audio' }, { type: 'image' }],
});

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 an artistic critique of how well the second image matches the first:',
      },
      { type: 'image', value: referenceImage },
      { type: 'image', value: userDrawnImage },
    ],
  },
]);

console.log(response1);

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

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

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

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

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

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

โดยค่าเริ่มต้น Prompt API จะพร้อมใช้งานเฉพาะในหน้าต่างระดับบนสุดและ iframe ที่มีแหล่งที่มาเดียวกัน คุณมอบสิทธิ์เข้าถึง API ให้กับ iframe แบบข้ามต้นทางได้ โดยใช้แอตทริบิวต์ Permission Policy 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 ในตัวทั้งหมด