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

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

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

{
  "permissions": ["aiLanguageModelOriginTrial"],
  "trial_tokens": ["GENERATED_TOKEN"],
}

ใช้ 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 ที่ได้จะมีฟิลด์ต่อไปนี้ด้วย

• defaultTopK: ค่าเริ่มต้นของ top-K (ค่าเริ่มต้น: 3)
• maxTopK: ค่าสูงสุดของ K อันดับแรก (8)
• defaultTemperature: อุณหภูมิเริ่มต้น (1.0) โดยอุณหภูมิต้องอยู่ระหว่าง 0.0 ถึง 2.0

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 and 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 ในส่วนขยาย Chrome ได้เลยโดยเข้าร่วมช่วงทดลองใช้จากต้นทางและแชร์ความคิดเห็น ความคิดเห็นของคุณจะส่งผลโดยตรงต่อวิธีที่เราสร้างและใช้งาน API เวอร์ชันอนาคตของ API นี้และ API AI ในตัวทั้งหมด

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