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 ดู Intent to Ship

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

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

Flow ซึ่งเป็นแพลตฟอร์มการเผยแพร่ข่าวชั้นนําของ Bright Sites ขับเคลื่อนสื่อเผยแพร่มากกว่า 150 รายการ การผสานรวม Summarizer API เข้ากับ CMS ที่ทำงานด้วยระบบ AI ช่วยให้ Bright Sites ช่วยให้ 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.',
  )
}

โดย 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 และ Gemini Nano ใน 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')

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

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

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

  • ใช้ตัวอย่างที่น้อยกว่า (เช่น รีวิว 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 ที่ช่วยเขียนและตรวจสอบเอกสารนี้