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

Thomas Steiner

เผยแพร่เมื่อวันที่ 11 พฤศจิกายน 2024

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

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

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

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

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

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

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

ใช้ 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 หัวข้อย่อย และสรุปแบบยาวคือ 1 ย่อหน้า

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

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

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

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