Summarizer API ช่วยให้ Bright Sites และ Terra สร้างสรุปบทความที่น่าสนใจ

Mari Viana
Mari Viana
LinkedIn
Thierno Thiam

เผยแพร่เมื่อ: 15 พฤษภาคม 2025

สาธารณชนพึ่งพาผู้เผยแพร่ข่าวเพื่อแจ้งให้ทราบถึงเหตุการณ์ในท้องถิ่น ระดับประเทศ และระดับนานาชาติ รวมถึงแชร์มุมมองที่รอบคอบ ในสภาพแวดล้อมที่เปลี่ยนแปลงอย่างรวดเร็วในปัจจุบัน สรุปบทความจึงเป็นกลยุทธ์สำคัญในการย่อข้อมูลที่ซับซ้อนให้เป็นข้อมูลย่อยที่เข้าถึงได้ง่าย ซึ่งจะกระตุ้นให้ผู้อ่านสำรวจเพิ่มเติม ดูวิธีที่ Bright Sites และ Terra ใช้กลยุทธ์นี้โดยใช้ Summarizer API

วิดีโออธิบายเว็บส่วนขยาย สถานะ Chromeความตั้งใจ
MDN Chrome 138 Chrome 138 ดู ความตั้งใจที่จะเปิดตัว

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

Bright Sites เพิ่มสรุปบทความที่ปรับเปลี่ยนในแบบของผู้ใช้ลงใน The Standard

Flow ซึ่งเป็นแพลตฟอร์มการเผยแพร่ข่าวชั้นนำของ Bright Sites ขับเคลื่อนการเผยแพร่มากกว่า 150 รายการ Bright Sites ได้ผสานรวม Summarizer API เข้ากับ CMS ที่ขับเคลื่อนด้วย AI, เพื่อให้ The Standard ซึ่งเป็นแบรนด์ข่าวที่โดดเด่นของลอนดอน สามารถนำเสนอสรุปบทความที่ปรับเปลี่ยนในแบบของผู้ใช้ให้แก่ผู้อ่าน ซึ่งจะกระตุ้นให้ผู้ใช้มีส่วนร่วมกับบทความและหมุนเวียนไปยังบทความอื่นๆ ใน The Standard

"การทำงานร่วมกับโมเดลที่ล้ำสมัยของ Gemini ใน Chrome ได้นำมรดก 198 ปีของ The Standard ในการแจ้งให้ผู้อ่านทราบข้อมูลต่างๆ มารวมเข้ากับนวัตกรรมทางเทคนิคใหม่ๆ สำหรับกลุ่มเป้าหมายที่ยุ่งของเราซึ่งให้ความสำคัญกับการเข้าถึงข่าวสารที่เชื่อถือได้ของเราได้ทุกเมื่อ การช่วยให้ผู้อ่านตรวจสอบข่าวสารได้อย่างรวดเร็วโดยใช้สรุปที่สร้างขึ้นในอุปกรณ์ของตนเองเป็นเพียงวิธีหนึ่งที่เรากำลังปรับโฉม The Standard และสร้างผลิตภัณฑ์ใหม่ๆ ที่มุ่งเน้นผู้อ่านตามพฤติกรรมดิจิทัลของผู้อ่าน"

— Jack Riley, ประธานเจ้าหน้าที่ฝ่ายดิจิทัล, The Standard

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

ขั้นแรก ทีมจะตรวจสอบการรองรับและความพร้อมใช้งานของโมเดลและ API

// Check if the device supports built-in AI
// Trigger the model download if not yet available, on capable devices
export const deviceCheck = async () => {
  const availability = await Summarizer.availability();
  if (!availability || availability === 'unavailable') {
    return {
      summarizationAvailable: false,
      message:
        "AI summarization tools are not supported on this device" +
        "or the appropriate permissions are not set.",
    }
  }
  if (availability === 'downloadable') {
    const shouldDownload = window.confirm(
      `This page contains an AI summary, using an AI model provided by your
      browser. Downloading the model, which could be multiple gigabytes in size,
      is required to view the summary. Would you like to download the model?`);

    if (!shouldDownload) {
      return {
        summarizationAvailable: false,
        message: "User declined installation.",
      }
    }

    // Trigger an installation
    Summarizer.create();
    return {
      summarizationAvailable: false,
      message: "Installing in the background. This may take a few minutes...",
    }
  }

  if (availability === 'available') {
    return {
      summarizationAvailable: true,
      message: "Ready for use.",
    }
  }
}

ฟังก์ชันต่อไปนี้กำหนดตัวสรุปทั่วไปที่ในอนาคตอาจใช้โมเดลอื่นในอุปกรณ์หรือโมเดลฝั่งเซิร์ฟเวอร์

/**
* Define the summarizer.
**/
export const aiSummarize = async (textToSummarize, options) => {
  const availableSummarizationTools = getAvailableAiSummarizationTools()

  if (availableSummarizationTools.has('builtInAi') && options?.builtInAI) {
    // Generate the built-in AI summarizer and abort signal
    const summarizer = await createBuiltInAISummarizer(options.builtInAi.options)
    return await summarizer.summarize(textToSummarize, {
      signal: options.builtInAi.signal,
    })
  }
  throw new Error(
    'AI summarization tools are not supported on this device or browser.',
  )
}

The Standard จัดเก็บค่ากำหนดสรุปของผู้อ่านใน IndexedDB เพื่อนำเสนอสรุปที่ปรับเปลี่ยนในแบบของผู้ใช้

/**
* Log preferences in IndexDB for personalization
**/
abortController.current = new AbortController()
const preferencesDB = new PreferencesDB()
const summarization = await aiSummarize(articleContent, {
 clientSideAI: {
   options: await preferencesDB.getCreatesummarizerPreferences(),
   signal: abortController.current.signal,
 },
})

Terra มอบสรุปที่แก้ไขได้สำหรับบทความในภาษาโปรตุเกสให้แก่นักข่าว

Terra เป็นหนึ่งในพอร์ทัลเนื้อหาที่ใหญ่ที่สุดจาก บราซิล โดยนำเสนอความบันเทิง ข่าวสาร และกีฬาที่มีผู้เข้าชมที่ไม่ซ้ำกันมากกว่า 50 ล้าน คนต่อเดือน Terra ได้เพิ่ม Summarizer API และ Translator API ลงในระบบจัดการเนื้อหา (CMS) เพื่อช่วยให้นักข่าวสรุปข่าวสารในภาษาโปรตุเกสได้ทันที จากนั้นนักข่าวสามารถทำการแก้ไขเล็กน้อยเพื่อวัตถุประสงค์ด้านสไตล์หรือความถูกต้อง และเผยแพร่สรุปที่สร้างร่วมกัน ซึ่งจะทำให้ผู้อ่านทุกคนเข้าถึงได้ง่าย

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

Terra เลือกใช้การติดตั้งใช้งาน AI ในตัวของ Chrome เนื่องจากข้อดีที่สำคัญ AI ฝั่งไคลเอ็นต์ช่วยประหยัดค่าใช้จ่ายและทำให้การกำกับดูแลข้อมูลง่ายขึ้น แม้ว่าทีมงานจะพบความท้าทายบางอย่าง โดยเฉพาะอย่างยิ่งเกี่ยวกับการจัดการข้อจำกัดของหน้าต่างเนื้อหาด้วย Summarizer API แต่ก็สามารถเอาชนะความท้าทายเหล่านี้ได้ด้วยแนวทางปฏิบัติในการติดตั้งใช้งานอย่างรอบคอบ

ในตอนแรก Terra พบความท้าทายในการพิจารณาว่า สรุปประเภทใดและบริบทที่แชร์ใดเหมาะสมที่สุดในการตอบสนองความต้องการ จากการทดลอง ทีมงานพบว่าสรุปภาษาอังกฤษที่ชัดเจนและเป็นประโยชน์มีความสำคัญอย่างยิ่งต่อการสร้างผลลัพธ์ที่มีคุณภาพคล้ายกันในภาษาโปรตุเกสด้วย Translator API สนามเด็กเล่น AI ในตัว มีบทบาทสำคัญในการรับมือกับความท้าทายเหล่านี้ เนื่องจาก Terra สามารถทดสอบ แนวคิดได้อย่างรวดเร็วโดยไม่ต้องปรับโครงสร้างโค้ดใหม่ทุกครั้ง

ตัวอย่างต่อไปนี้แสดงวิธีที่ Terra เรียกใช้ Summarizer API และแจ้งเตือนผู้ใช้เมื่อ API ไม่พร้อมใช้งาน

async function summarizerByBuiltInAI(text) {
  if (!(Summarizer)) {
    //Alert users in Portuguese that "Summarizer API is not available"
    cms_alert(ALERT_TYPE_ERROR, "Summarizer API não está disponível.")
    return null
  }

  try {
    const availability = await Summarizer.availability();
    if (availability !== 'available') {
      cms_alert(ALERT_TYPE_ERROR, "Summarizer API não está disponível.")
      return null 
    }

    const summaryContext = "Avoid jargon, use correct grammar, focus on clarity," +
    "and ensure the user can grasp the articles purpose," +
    "without needing to open the original content.";

    const options = {
      sharedContext: summaryContext,
      type: 'teaser',
      format: 'plain-text',
      length: 'long',
    }

    if (availability === 'available') {
      const summarizer = await Summarizer.create(options);
      return await summarizer.summarize(text, {
        context: summaryContext
      })
    }
    // return the download of the Summarizer Model
    if(availability === 'downloadable'){
      return await Summarizer.create();
    }
  } catch (error) {
    //EN: "Error using the Summarizer API"
    cms_alert(ALERT_TYPE_ERROR, "Erro ao usar o Summarizer API.");
    console.error("Erro ao usar o Summarizer API:", error);
    return null
  }
}

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

async function translateTextByBuiltInAI(text, sourceLanguage, targetLanguage) {
  if (!('translation' in self && 'createTranslator' in self.translation)) {
    return null
  }

  try {
    const translator = await Translator.create({
      sourceLanguage,
      targetLanguage,
    })
    return await translator.translate(text)
  } catch (error) {
    throw error
  }
}
const text = `Title: ${contentTitle};\n\n Sub-title: ${contentSubtitle};\n\n Article content: ${plainText}.`;

const canTranslate = await Translator.availability({
  sourceLanguage: 'pt',
  targetLanguage: 'en',
})

if (canTranslate !== 'available') {
  if (canTranslate === 'downloadable') {
    try {
      await Translator.create({
        sourceLanguage: 'pt',
        targetLanguage: 'en',
      })
      //EN: "Language download completed successfully."
      cms_alert(ALERT_TYPE_OK, "Download do idioma concluído com sucesso.");
    } catch (downloadError) {
      //EN: "Error downloading the language required for translation."
      cms_alert(ALERT_TYPE_ERROR, "Erro ao realizar download do idioma necessário para tradução.");
      return
    }
  } else {
    //EN: "Translation is not available or not ready."
    cms_alert(ALERT_TYPE_ERROR, "A tradução não está disponível ou não está pronta.");
    return
  }
}

const translatedText = await translateTextByBuiltInAI(text, 'pt', 'en') 
const summarizedText = await summarizerByBuiltInAI(translatedText) 
const translatedBackText = await translateTextByBuiltInAI(summarizedText, 'en', 'pt')

การผสานรวม AI API ในตัวของ Terra ได้สำเร็จแสดงให้เห็นถึงศักยภาพที่สำคัญของ AI ฝั่งไคลเอ็นต์ในการปรับปรุงเวิร์กโฟลว์การจัดการเนื้อหา Summarizer และ Translator API ช่วยให้ Terra เพิ่มศักยภาพให้นักข่าว ปรับปรุงประสิทธิภาพ และพร้อมที่จะมอบประสบการณ์การใช้งานที่ดียิ่งขึ้นในทุกแพลตฟอร์ม

แนวทางปฏิบัติแนะนำ

หากข้อมูลรีวิวมีจำนวนโทเค็นเกินขีดจำกัด ให้ทำตามวิธีลดผลกระทบต่อไปนี้

  • ใช้ตัวอย่างที่เล็กลง (เช่น รีวิว 4 รายการล่าสุด) กับ API ซึ่งจะช่วยสร้างผลลัพธ์ได้เร็วขึ้น โปรดดูคำแนะนำเกี่ยวกับ การปรับขนาดการสรุปฝั่งไคลเอ็นต์
  • QuotaExceededError ให้ข้อมูลเพิ่มเติมเกี่ยวกับโทเค็นที่ขอในอินพุต ออบเจ็กต์ summarizer มีพร็อพเพอร์ตี้ inputQuota ที่ระบุขีดจำกัดโทเค็นของ API ซึ่งช่วยให้แสดงความคิดเห็นแบบเรียลไทม์และปิดใช้ฟังก์ชันได้หากอินพุตเกินขีดจำกัด

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

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

คุณควรพยายามสร้างอินเทอร์เฟซที่ใช้งานง่ายและสื่อสารได้ดีเสมอ โดยทำดังนี้

  • ใช้แถบความคืบหน้า สำหรับการดาวน์โหลดโมเดลและลดความล่าช้าในการตอบสนอง
  • พิจารณาความโปร่งใสเกี่ยวกับการดาวน์โหลดโมเดล Bright Sites แจ้งให้ผู้ใช้ทราบเกี่ยวกับการดาวน์โหลดโมเดลเพื่อให้เกิดความโปร่งใสและได้รับความยินยอมในการใช้ทรัพยากร ด้วยวิธีนี้ ผู้ใช้จะยอมรับหรือปฏิเสธก่อนดำเนินการต่อได้

บทสรุปและคําแนะนํา

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

สงสัยไหมว่า Summarizer API จะช่วยใน Use Case อื่นๆ ได้อย่างไร นอกจากนี้ เรายังได้ แชร์วิธีที่ Summarizer API ช่วย redBus และ Miravia สร้างสรุปรีวิวของผู้ใช้ที่เป็นประโยชน์

คุณกำลังสร้างสิ่งใหม่ๆ ด้วย API เหล่านี้อยู่ใช่ไหม แชร์กับเราได้ที่ @ChromiumDev บน X หรือ Chromium for Developers บน LinkedIn

แหล่งข้อมูล

คำขอบคุณ

ขอขอบคุณ Guilherme Moser และ Fernando Fischer จาก Terra, Aline Souza จาก CWI, Brian Alford, Keval Patel, Jack Riley และทีมวิศวกรรมของ Brightsites' , Swetha Gopalakrishnan, Alexandra Klepper, Thomas Steiner และ Kenji Baheux ที่ช่วยเขียนและ ตรวจสอบเอกสารนี้