การสรุปใน Chrome ที่มี AI ในตัว

Thomas Steiner

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

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

คุณสามารถใช้ Summarizer API เพื่อสร้างสรุปประเภทต่างๆ ในความยาวและรูปแบบที่หลากหลาย เช่น ประโยค ย่อหน้า รายการหัวข้อ และอื่นๆ เราเชื่อว่า API นี้จะมีประโยชน์ในสถานการณ์ต่อไปนี้

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

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

ลงชื่อสมัครทดลองใช้จากต้นทาง

หากต้องการเริ่มใช้ Summarizer API ให้ทำตามขั้นตอนต่อไปนี้

  1. รับทราบนโยบายการใช้งานที่ไม่อนุญาตสำหรับ Generative AI ของ Google
  2. ไปที่ช่วงทดลองใช้ Summarizer API จากต้นทาง
  3. คลิกลงทะเบียน แล้วกรอกแบบฟอร์ม
    • ในช่องต้นทางของเว็บ ให้ระบุต้นทางหรือรหัสส่วนขยาย chrome-extension://YOUR_EXTENSION_ID
  4. คลิกลงทะเบียนเพื่อส่งข้อมูล
  5. คัดลอกโทเค็นที่ระบุ แล้วเพิ่มลงในหน้าเว็บทุกหน้าในต้นทางหรือไฟล์ของส่วนขยายที่คุณต้องการเปิดใช้ช่วงทดลองใช้
  6. เริ่มใช้ Summarizer API

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีเริ่มต้นใช้งานการทดสอบต้นทาง

ข้อจำกัดระหว่างช่วงทดลองใช้ต้นทาง

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

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

หากต้องการเข้าถึง Summarizer API ใน localhost ในระหว่างช่วงทดลองใช้จากต้นทาง คุณต้องมี Chrome Canary จากนั้นทำตามขั้นตอนต่อไปนี้

  1. เปิด Chrome Canary บนแพลตฟอร์ม Windows, Mac หรือ Linux
  2. ไปที่ chrome://flags/#summarization-api-for-gemini-nano
  3. เลือกเปิดใช้
  4. คลิกเปิดใหม่หรือรีสตาร์ท Chrome

ใช้ Summarizer API

ก่อนอื่น ให้เรียกใช้การตรวจหาฟีเจอร์เพื่อดูว่าเบราว์เซอร์รองรับ Summarizer API หรือไม่

if ('ai' in self && 'summarizer' in self.ai) {
  // The Summarizer API is supported.
}

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

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

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

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

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

const summarizer = await ai.summarizer.create({
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded} of ${e.total} bytes.`);
    });
  }
});

ฟังก์ชัน API

ฟังก์ชัน create() ช่วยให้คุณกําหนดค่าออบเจ็กต์สรุปใหม่ได้ตามต้องการ โดยจะใช้ออบเจ็กต์ options (ไม่บังคับ) ที่มีพารามิเตอร์ต่อไปนี้

  • sharedContext: บริบทเพิ่มเติมที่แชร์ซึ่งช่วยสรุปได้
  • type: ประเภทของข้อมูลสรุปซึ่งมีค่าที่อนุญาตคือ key-points (ค่าเริ่มต้น), tl;dr, teaser และ headline
  • format: รูปแบบของข้อมูลสรุปซึ่งมีค่าที่อนุญาตคือ markdown (ค่าเริ่มต้น) และ plain-text
  • length: ความยาวของการสรุป โดยมีค่าที่อนุญาตคือ short, medium (ค่าเริ่มต้น) และ long ความหมายของความยาวเหล่านี้จะแตกต่างกันไปโดยขึ้นอยู่กับ type ที่ขอ ตัวอย่างเช่น ในการใช้งานของ Chrome สรุปประเด็นสำคัญแบบสั้นประกอบด้วยหัวข้อย่อย 3 หัวข้อ และสรุปแบบสั้นคือ 1 ประโยค ส่วนสรุปประเด็นสำคัญแบบยาวประกอบด้วยหัวข้อย่อย 7 หัวข้อ และสรุปแบบยาวคือย่อหน้า

ตัวอย่างต่อไปนี้แสดงวิธีเริ่มต้นใช้งานเครื่องมือสรุป

const options = {
  sharedContext: 'This is a scientific article',
  type: 'key-points',
  format: 'markdown',
  length: 'medium',
};

const available = (await self.ai.summarizer.capabilities()).available;
let summarizer;
if (available === 'no') {
  // The Summarizer API isn't usable.
  return;
}
if (available === 'readily') {
  // The Summarizer API can be used immediately .
  summarizer = await self.ai.summarizer.create(options);
} else {
  // The Summarizer API can be used after the model is downloaded.
  summarizer = await self.ai.summarizer.create(options);
  summarizer.addEventListener('downloadprogress', (e) => {
    console.log(e.loaded, e.total);
  });
  await summarizer.ready;
}

เรียกใช้เครื่องมือสรุป

เรียกใช้เครื่องมือสรุปได้ 2 วิธี ได้แก่ สตรีมมิงและไม่สตรีม

การสรุปแบบไม่สตรีม

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

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

const longText = document.querySelector('article').innerHTML;
const summary = await summarizer.summarize(longText, {
  context: 'This article is intended for a tech-savvy audience.',
});

การสรุปข้อมูลสตรีมมิง

สรุปสตรีมมิงจะแสดงผลลัพธ์แบบเรียลไทม์ เอาต์พุตจะอัปเดตอย่างต่อเนื่องเมื่อมีการเพิ่มและปรับอินพุต

หากต้องการดูข้อมูลสรุปสตรีมมิง ให้เรียกใช้summarizeStreaming() ฟังก์ชันของเครื่องมือสรุป จากนั้นวนผ่านกลุ่มข้อความที่มีอยู่ในสตรีม

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);

summarizeStreaming() จะแสดงผลเป็น ReadableStream โดยที่แต่ละส่วนของคำตอบจะต่อจากกัน ซึ่งหมายความว่าคำตอบแต่ละรายการจะมีสรุปทั้งหมดที่สร้างขึ้นจนถึงจุดนั้น ไม่ใช่แค่ส่วนถัดไป ซึ่งไม่ใช่ลักษณะการทำงานที่ต้องการ

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

let result = '';
let previousLength = 0;
for await (const segment of stream) {
  const newContent = segment.slice(previousLength);
  console.log(newContent);
  previousLength = segment.length;  
  result += newContent;
}
console.log(result);

สาธิต

คุณสามารถลองใช้ Summarizer API ใน Summarizer API Playground

ความพยายามในการทำให้มาตรฐาน

เรากําลังพยายามทำให้ Summarizer API เป็นมาตรฐานเดียวกัน เพื่อให้ใช้งานร่วมกันได้กับเบราว์เซอร์ต่างๆ

ข้อเสนอ API ของเราได้รับการสนับสนุนจากชุมชนและได้ย้ายไปยังกลุ่มชุมชน Web Incubator ของ W3C เพื่อพูดคุยกันต่อ ทีม Chrome ได้ขอความคิดเห็นจากกลุ่มสถาปัตยกรรมทางเทคนิคของ W3C และสอบถามMozilla และ WebKit เกี่ยวกับจุดยืนด้านมาตรฐาน

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

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