Summarizer API membantu Bright Sites dan Terra membuat ringkasan artikel yang menarik

Mari Viana
Mari Viana
LinkedIn
Thierno Thiam

Dipublikasikan: 15 Mei 2025

Publik mengandalkan penayang berita untuk memberi tahu mereka tentang peristiwa lokal, nasional, dan internasional, serta membagikan perspektif mereka yang mendalam. Dalam lingkungan yang serba cepat saat ini, ringkasan artikel adalah strategi utama untuk meringkas informasi yang kompleks menjadi cuplikan yang mudah diakses, sehingga mendorong pembaca untuk mempelajarinya lebih lanjut. Pelajari cara Bright Sites dan Terra menggunakan strategi ini menggunakan Summarizer API.

PenjelasanWebEkstensi Status ChromeIntent
MDN Chrome 138 Chrome 138 View Intent to Ship

Summarizer API memungkinkan Anda membuat berbagai jenis ringkasan dalam berbagai panjang dan format, seperti kalimat, paragraf, daftar poin, dan lainnya. API ini, seperti banyak API AI bawaan, menggunakan model bahasa besar untuk melakukan inferensi. Di Chrome, model kami adalah Gemini Nano.

Bright Sites menambahkan ringkasan artikel yang dipersonalisasi ke The Standard

Platform publikasi berita terkemuka Bright Sites, Flow, mendukung lebih dari 150 publikasi. Dengan mengintegrasikan Summarizer API ke dalam CMS yang didukung AI, Bright Sites memungkinkan The Standard, merek berita ikonik London, untuk menawarkan ringkasan artikel yang dipersonalisasi kepada pembacanya. Hal ini mendorong pengguna untuk berinteraksi dengan artikel dan kembali ke artikel lain di The Standard.

"Dengan menggunakan model canggih Gemini di Chrome, The Standard dapat menggabungkan warisan 198 tahun kami dalam memberi pembaca informasi terbaru dengan inovasi teknis baru untuk audiens kami yang sibuk dan menghargai jurnalisme tepercaya kami yang dapat diakses dengan mudah. Memungkinkan pembaca memeriksa berita dengan cepat menggunakan ringkasan yang dibuat di perangkat mereka sendiri hanyalah salah satu cara kami untuk mengubah The Standard dan membuat produk baru yang berfokus pada pembaca berdasarkan kebiasaan digital mereka."

— Jack Riley, Chief Digital Officer, The Standard

Dengan menawarkan ringkasan AI sisi klien, The Standard dapat membuat ringkasan yang dipersonalisasi tanpa menimbulkan biaya bisnis tambahan. Dengan melakukannya sisi klien, menggunakan titik data seperti gaya ringkasan atau lokasi, pengguna dapat terus membaca meskipun kehilangan akses internet. Hal ini sering terjadi bagi banyak pengguna yang bepergian di London Underground dengan laptop mereka.

Pertama, mereka memeriksa dukungan dan ketersediaan model serta 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.",
    }
  }
}

Fungsi berikut menentukan ringkasan umum yang, pada masa mendatang, dapat menggunakan model di perangkat lain atau model sisi server.

/**
* 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.',
  )
}

Standar menyimpan preferensi ringkasan pembaca di IndexedDB untuk menawarkan ringkasan yang dipersonalisasi.

/**
* 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 menyediakan ringkasan yang dapat diedit untuk artikel dalam bahasa Portugis kepada jurnalis

Terra adalah salah satu portal konten terbesar dari Brasil, yang menawarkan hiburan, berita, dan olahraga dengan lebih dari 50 juta pengunjung unik per bulan. Terra menambahkan Summarizer API dan Translator API ke sistem pengelolaan konten (CMS) mereka untuk membantu jurnalis merangkum artikel berita dalam bahasa Portugis secara instan. Kemudian, jurnalis dapat melakukan beberapa pengeditan untuk tujuan gaya atau akurasi dan memublikasikan ringkasan yang dibuat bersama, sehingga ringkasan tersebut dapat diakses oleh semua pembaca.

Meskipun CMS Terra sudah menggunakan LLM sisi server, tim ini mengeksplorasi AI sisi klien sebagai pendekatan yang berbeda dengan potensi manfaat baru. Mereka menemukan bahwa Summarizer API dan Gemini Nano di Chrome memberikan kualitas yang sebanding dengan implementasi sisi server mereka. Solusi sisi klien memberikan hasil positif saat digunakan bersama dengan Translator API.

Terra mengadopsi penerapan AI bawaan Chrome karena keunggulan utamanya. AI sisi klien menawarkan penghematan biaya dan tata kelola data yang disederhanakan. Meskipun tim mengalami beberapa tantangan, terutama terkait pengelolaan batasan periode konten dengan Summarizer API, mereka dapat mengatasinya melalui praktik implementasi yang cermat.

Awalnya, Terra menghadapi tantangan dalam menentukan jenis ringkasan dan konteks bersama yang paling sesuai untuk memenuhi kebutuhan mereka. Melalui eksperimen, mereka menemukan bahwa ringkasan bahasa Inggris yang jelas dan berguna sangat penting untuk menghasilkan output berkualitas serupa dalam bahasa Portugis dengan Translator API. Panggung AI bawaan berperan penting dalam mengatasi tantangan ini, karena Terra dapat dengan cepat menguji idenya tanpa memfaktorkan ulang kode setiap saat.

Contoh berikut menunjukkan cara Terra memanggil Summarizer API dan memberi tahu pengguna saat tidak tersedia.

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
  }
}

Selain itu, Terra menggunakan pembuat ringkasan bersama dengan Translator API, untuk menerjemahkan judul, subtitel, dan teks isi artikel Portugis asli ke bahasa Inggris. Versi terjemahan ini diproses oleh Summarizer API untuk menghasilkan ringkasan, lalu diterjemahkan kembali ke dalam bahasa Portugis. Hal ini memastikan pengguna menerima konten ringkasan dalam bahasa aplikasi.

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

Integrasi API AI bawaan Terra yang berhasil menunjukkan potensi signifikan AI sisi klien untuk meningkatkan alur kerja pengelolaan konten. Dengan Summarizer dan Translator API, Terra telah memberdayakan jurnalisnya, meningkatkan efisiensi, dan berada dalam posisi yang baik untuk memberikan pengalaman pengguna yang lebih baik di seluruh platform.

Praktik terbaik

Jika input ulasan melebihi batas token, ikuti mitigasi berikut:

  • Gunakan sampel yang lebih kecil (seperti 4 ulasan terbaru) ke API. Hal ini membantu menghasilkan hasil yang lebih cepat. Lihat panduan kami tentang menskalakan ringkasan sisi klien.
  • QuotaExceededError memberikan informasi selengkapnya tentang token yang diminta dalam input. Objek summarizer memiliki properti inputQuota yang menunjukkan batas token API. Hal ini memungkinkan masukan real-time dan menonaktifkan fungsi jika input melebihi batas.

Sebaiknya pertimbangkan pendekatan campuran, untuk memastikan pengalaman yang lancar bagi semua pengguna. Saat pertama kali AI API bawaan dipanggil, browser harus mendownload model.

  • Miravia menggunakan model sisi server untuk memberikan ringkasan awal, saat model didownload. Setelah model bawaan siap, situs beralih untuk melakukan inferensi sisi klien.

Anda harus selalu berusaha membuat antarmuka yang mudah digunakan dan komunikatif:

  • Terapkan status progres untuk download model dan mitigasi keterlambatan respons.
  • Pertimbangkan transparansi tentang download model. Bright Sites memberi tahu pengguna tentang download model untuk memungkinkan transparansi dan izin penggunaan resource. Dengan demikian, pengguna dapat menyetujui atau menolak sebelum melanjutkan.

Kesimpulan dan rekomendasi

Contoh Bright Sites dan Terra menunjukkan nilai Summarizer API dalam meningkatkan aksesibilitas konten dan interaksi pembaca. Dengan menggunakan API sisi klien ini, platform ini meningkatkan pengalaman membaca dan personalisasi, tanpa biaya bisnis tambahan dan dengan tata kelola data yang disederhanakan. Sama seperti Summarizer API, semua API AI bawaan mengaktifkan AI sisi klien yang praktis.

Ingin tahu cara Summarizer API dapat membantu kasus penggunaan lainnya? Kami juga telah membagikan cara Summarizer API membantu redBus dan Miravia membuat ringkasan ulasan pengguna yang bermanfaat.

Apakah Anda membuat sesuatu yang baru dengan API ini? Bagikan kepada kami di @ChromiumDev di X atau Chromium for Developers di LinkedIn.

Resource

Ucapan terima kasih

Terima kasih kepada Guilherme Moser dan Fernando Fischer dari Terra, Aline Souza dari CWI, Brian Alford, Keval Patel, Jack Riley, dan tim Engineering Brightsites, Swetha Gopalakrishnan, Alexandra Klepper, Thomas Steiner, dan Kenji Baheux karena telah membantu menulis dan meninjau dokumen ini.