Prompt API ในส่วนขยาย Chrome

Thomas Steiner

เผยแพร่: 11 พฤศจิกายน 2024

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

Prompt API กับส่วนขยาย Chrome มีกรณีการใช้งานมากมาย ตัวอย่างมีดังนี้

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

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

ความพร้อมใช้งาน

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

เข้าร่วมช่วงทดลองใช้จากต้นทาง

หากต้องการใช้ Prompt API ในส่วนขยาย Chrome ให้เพิ่มสิทธิ์ "aiLanguageModelOriginTrial" ลงในไฟล์ manifest.json ตามข้อความต่อไปนี้ พร้อมกับสิทธิ์อื่นๆ ในส่วนขยายที่อาจต้องใช้

หากต้องการลงชื่อสมัครใช้ส่วนขยายเพื่อทดลองใช้แหล่งที่มา ให้ใช้ URL chrome-extension://YOUR_EXTENSION_ID เป็นแหล่งที่มาของเว็บ เช่น chrome-extension://ljjhjaakmncibonnjpaoglbhcjeolhkk

ลงชื่อสมัครใช้ Chrome Origin Trial

ระบบจะสร้างรหัสชิ้นงานแบบไดนามิก เมื่อกําหนดแล้ว คุณสามารถบังคับให้รหัสคงที่ได้โดยเพิ่มพร็อพเพอร์ตี้ key ลงในไฟล์ Manifest

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

{
  "manifest_version": 3,
  "name": "YOUR_EXTENSION_NAME",
  "permissions": ["aiLanguageModelOriginTrial"],
  "trial_tokens": ["GENERATED_TOKEN"],
}

เพิ่มการรองรับ localhost

หากต้องการเข้าถึง Prompt API ใน localhost ในระหว่างช่วงทดลองใช้จากต้นทาง คุณต้องอัปเดต Chrome เป็นเวอร์ชันล่าสุด จากนั้น ดำเนินการตามขั้นตอนเหล่านี้:

  1. เปิด Chrome ในแพลตฟอร์ม Windows, Mac หรือ Linux
  2. ไปที่ chrome://flags/#optimization-guide-on-device-model
  3. เลือก Enabled BypassPerfRequirement
    • ซึ่งจะข้ามการตรวจสอบประสิทธิภาพที่อาจทำให้คุณดาวน์โหลด Gemini Nano ลงในอุปกรณ์ไม่ได้
  4. คลิกเปิดใหม่หรือรีสตาร์ท Chrome

ใช้ Prompt API

เมื่อขอสิทธิ์ใช้ Prompt API แล้ว คุณจะสร้างส่วนขยายได้ ฟังก์ชันส่วนขยายใหม่ 2 รายการที่คุณใช้ได้ในเนมสเปซ chrome.aiOriginTrial.languageModel มีดังนี้

  • capabilities() เพื่อดูความสามารถของโมเดลและดูว่าพร้อมใช้งานหรือไม่
  • create() เพื่อเริ่มเซสชันโมเดลภาษา

การดาวน์โหลดโมเดล

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

หากต้องการตรวจสอบว่าโมเดลพร้อมใช้งานหรือไม่ ให้เรียกใช้ฟังก์ชันแบบแอซิงโครนัส chrome.aiOriginTrial.languageModel.capabilities() โดยจะแสดงผลออบเจ็กต์ AILanguageModelCapabilities ที่มีฟิลด์ available ซึ่งมีค่าที่เป็นไปได้ 3 ค่า ดังนี้

  • 'no': เบราว์เซอร์ปัจจุบันรองรับ Prompt API แต่ยังไม่พร้อมใช้งานในขณะนี้ ซึ่งอาจเกิดจากสาเหตุหลายประการ เช่น พื้นที่ในดิสก์ไม่เพียงพอที่จะดาวน์โหลดโมเดล
  • 'readily': เบราว์เซอร์ปัจจุบันรองรับ Prompt API และสามารถใช้งานได้ทันที
  • 'after-download': เบราว์เซอร์ปัจจุบันรองรับ Prompt API แต่ต้องดาวน์โหลดโมเดลก่อน

หากต้องการเรียกให้ดาวน์โหลดโมเดลและสร้างเซสชันโมเดลภาษา ให้เรียกใช้ฟังก์ชัน chrome.aiOriginTrial.languageModel.create() แบบแอซิงโครนัส หากคําตอบสําหรับ capabilities() คือ 'after-download' แนวทางปฏิบัติแนะนําคือให้ฟังความคืบหน้าของการดาวน์โหลด วิธีนี้จะช่วยให้คุณแจ้งผู้ใช้ได้ในกรณีที่การดาวน์โหลดใช้เวลานาน

const session = await chrome.aiOriginTrial.languageModel.create({
  monitor(m) {
    m.addEventListener("downloadprogress", (e) => {
      console.log(`Downloaded ${e.loaded} of ${e.total} bytes.`);
    });
  },
});

ความสามารถของโมเดล

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

await chrome.aiOriginTrial.languageModel.capabilities();
// {available: 'readily', defaultTopK: 3, maxTopK: 8, defaultTemperature: 1}

สร้างเซสชัน

เมื่อตรวจสอบแล้วว่า Prompt API ทำงานได้ ให้สร้างเซสชันด้วยฟังก์ชัน create() ซึ่งจะช่วยให้คุณแสดงข้อความแจ้งแบบพรอมต์กับแบบจำลองได้ด้วยฟังก์ชัน prompt() หรือ promptStreaming()

ตัวเลือกเซสชัน

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

const capabilities = await chrome.aiOriginTrial.languageModel.capabilities();
// Initializing a new session must either specify both `topK` and
// `temperature` or neither of them.
const slightlyHighTemperatureSession = await chrome.aiOriginTrial.languageModel.create({
  temperature: Math.max(capabilities.defaultTemperature * 1.2, 2.0),
  topK: capabilities.defaultTopK,
});

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

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

const session = await chrome.aiOriginTrial.languageModel.create({
  signal: controller.signal,
})
พรอมต์ของระบบ

พรอมต์ของระบบช่วยให้คุณระบุบริบทบางอย่างให้กับโมเดลภาษาได้

const session = await chrome.aiOriginTrial.languageModel.create({
  systemPrompt: 'You are a helpful and friendly assistant.',
});
await session.prompt('What is the capital of Italy?');
// 'The capital of Italy is Rome.'

พรอมต์เริ่มต้น

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

const session = await chrome.aiOriginTrial.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. [...]' }
  ]
});

ข้อมูลเซสชัน

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

console.log(`${session.tokensSoFar}/${session.maxTokens}
(${session.tokensLeft} left)`);

การเก็บเซสชันไว้

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

const session = await chrome.aiOriginTrial.languageModel.create({
  systemPrompt: '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);

โคลนเซสชัน

หากต้องการประหยัดทรัพยากร คุณสามารถโคลนเซสชันที่มีอยู่ด้วย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 {available, defaultTemperature, defaultTopK, maxTopK } =
  await chrome.aiOriginTrial.languageModel.capabilities();

if (available !== 'no') {
  const session = await chrome.aiOriginTrial.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() ซึ่งช่วยให้คุณแสดงผลลัพธ์บางส่วนได้เมื่อข้อมูลจากโมเดลเข้ามา

const {available, defaultTemperature, defaultTopK, maxTopK } =
  await chrome.aiOriginTrial.languageModel.capabilities();

if (available !== 'no') {
  const session = await chrome.aiOriginTrial.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);
  }
}

promptStreaming() จะแสดงผล ReadableStream ที่มีกลุ่มคำซ้อนทับกัน เช่น "Hello,", "Hello world,", "Hello world I am,", "Hello world I am an AI." ซึ่งไม่ใช่ลักษณะการทำงานที่ต้องการ เราตั้งใจที่จะปรับให้สอดคล้องกับ API สตรีมมิงอื่นๆ ในแพลตฟอร์ม โดยที่แต่ละกลุ่มเป็นชิ้นส่วนที่สอดคล้องกันของสตรีมยาวรายการเดียว ซึ่งหมายความว่าเอาต์พุตจะเป็นลําดับ เช่น "Hello", " world", " I am", " an AI"

ในระหว่างนี้ คุณสามารถใช้วิธีการต่อไปนี้เพื่อให้ได้ลักษณะการทำงานที่ต้องการ ซึ่งใช้ได้กับทั้งลักษณะการทํางานแบบมาตรฐานและแบบไม่มาตรฐาน

let result = '';
let previousChunk = '';

for await (const chunk of stream) {
  const newChunk = chunk.startsWith(previousChunk)
      ? chunk.slice(previousChunk.length) : chunk;
  console.log(newChunk);
  result += newChunk;
  previousChunk = chunk;
}
console.log(result);

หยุดแสดงพรอมต์

ทั้ง 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 unsure
  between a t-shirt and a polo.'
);

สาธิต

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

อินเทอร์เฟซสาธิตสําหรับ Prompt API

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

เริ่มทดสอบ Prompt API ในส่วนขยาย Chrome ได้แล้วโดยเข้าร่วมช่วงทดลองใช้จากต้นทางและแชร์ความคิดเห็น ความคิดเห็นของคุณจะส่งผลโดยตรงต่อวิธีที่เราสร้างและใช้งาน API เวอร์ชันอนาคตของ API นี้และ API AI ในตัวทั้งหมด