Interfejs Summarizer API pomaga Bright Sites i Terra tworzyć atrakcyjne podsumowania artykułów

Mari Viana
Mari Viana

Data publikacji: 15 maja 2025 r.

Użytkownicy ufają wydawcom wiadomości, którzy informują ich o wydarzeniach lokalnych, krajowych i międzynarodowych, a także dzielą się przemyślanymi opiniami. W dzisiejszym szybko zmieniającym się świecie podsumowania artykułów są kluczową strategią pozwalającą na kondensowanie złożonych informacji w przystępne fragmenty, które zachęcają czytelników do dalszego odkrywania treści. Dowiedz się, jak Bright Sites i Terra wykorzystują tę strategię za pomocą interfejsu Summarizer API.

ObjaśnienieSiećRozszerzenia Stan ChromeIntencja
MDN  Chrome 138  Chrome 138 Wyświetl Intencja dostawy

Interfejs Summarizer API umożliwia generowanie różnych typów streszczeń o zróżnicowanej długości i formatach, np. zdań, akapitów, list wypunktowanych itp. Ten interfejs API, podobnie jak wiele wbudowanych interfejsów AI API, korzysta z dużych modeli językowych do wykonywania wnioskowania. W Chrome używamy modelu Gemini Nano.

Bright Sites dodaje spersonalizowane podsumowania artykułów do The Standard

Bright Sites, najpopularniejsza platforma do publikowania wiadomości, Flow, obsługuje ponad 150 publikacji. Dzięki integracji interfejsu Summarizer API z systemem CMS opartym na AI firma Bright Sites umożliwia The Standard, słynnej londyńskiej gazecie, oferowanie czytelnikom spersonalizowanych podsumowań artykułów. Zachęca to użytkowników do angażowania się w artykuły i wracania do innych artykułów w The Standard.

„Współpraca z Gemini na polu najnowocześniejszych modeli w Chrome łączy 198 lat tradycji The Standard w zakresie dostarczania czytelnikom aktualnych informacji z nowymi innowacjami technicznymi dla zapracowanych odbiorców, którzy cenią sobie możliwość korzystania z wiarygodnych treści dziennikarskich w dowolnym momencie. Umożliwienie czytelnikom szybkiego sprawdzania wiadomości dzięki podsumowaniu na ich urządzeniach to tylko jeden z sposobów, w jaki ulepszamy The Standard i tworzymy nowe produkty dla czytelników, które uwzględniają ich nawyki cyfrowe”.

Jack Riley, Chief Digital Officer, The Standard

Umożliwienie klientom korzystania z podsumowywania przez AI pozwoliło The Standard generować spersonalizowane podsumowania bez ponoszenia dodatkowych kosztów. Wykorzystanie danych po stronie klienta, takich jak styl podsumowania czy lokalizacja, pozwoliłoby użytkownikom kontynuować czytanie nawet po utracie dostępu do internetu. Jest to częste zjawisko w przypadku wielu użytkowników, którzy podróżują londyńskim metrem z laptopem.

Najpierw sprawdzają, czy model i interfejs API są obsługiwane i dostępne.

// 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.",
    }
  }
}

Funkcja poniżej definiuje ogólny moduł podsumowujący, który w przyszłości może używać innego modelu na urządzeniu lub modelu po stronie serwera.

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

Standardowa wersja przechowuje preferencje dotyczące podsumowania w IndexedDB, aby oferować spersonalizowane podsumowanie.

/**
* 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 udostępnia dziennikarzom edytowalne podsumowanie artykułów w języku portugalskim

Terra to jeden z największych portali informacyjnych w Brazylii, który oferuje treści rozrywkowe, wiadomości i informacje sportowe. Co miesiąc odwiedza go ponad 50 milionów unikalnych użytkowników. Firma Terra dodała interfejsy API Summarizer i Translator do swojego systemu zarządzania treścią (CMS), aby pomóc dziennikarzom w błyskawicznym podsumowywaniu wiadomości w języku portugalskim. Następnie dziennikarze mogą wprowadzić kilka poprawek ze względów stylistycznych lub związanych z dokładnością, a potem opublikować wspólnie utworzone podsumowanie, udostępniając je wszystkim czytelnikom.

Chociaż system CMS firmy Terra korzysta już z LLM po stronie serwera, zespół przeanalizował sztuczną inteligencję po stronie klienta jako potencjalnie nowe podejście, które może przynieść nowe korzyści. Okazało się, że interfejs Summarizer API i Gemini Nano w Chrome zapewniają jakość porównywaną z ich implementacją po stronie serwera. Rozwiązanie po stronie klienta przyniosło pozytywne wyniki w połączeniu z interfejsem Translator API.

Terra wdrożyła wbudowaną AI w Chrome ze względu na jej kluczowe zalety. AI po stronie klienta pozwala na oszczędności i uproszczenie zarządzania danymi. Chociaż zespół napotkał pewne problemy, zwłaszcza w zakresie zarządzania ograniczeniami dotyczącymi okna treści w przypadku interfejsu Summarizer API, udało mu się je rozwiązać dzięki starannemu wdrażaniu.

Początkowo firma Terra miała problemy z określeniem, które typy podsumowań i konteksty wspólne najlepiej odpowiadają jej potrzebom. W trakcie eksperymentów okazało się, że przejrzyste i przydatne podsumowania w języku angielskim są kluczowe dla uzyskiwania podobnych wyników w języku portugalskim za pomocą interfejsu Translator API. Wbudowana platforma AI Playground okazała się nieoceniona w pokonywaniu tych wyzwań, ponieważ Terra mogła szybko testować swoje pomysły bez konieczności każdorazowego refaktoryzacji kodu.

Ten przykład pokazuje, jak Terra wywołuje interfejs Summarizer API i ostrzega użytkowników, gdy jest niedostępny.

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

Dodatkowo Terra wykorzystała funkcję podsumowywania w połączeniu z interfejsem Translator API, aby przetłumaczyć tytuł, podtytuł i tekst oryginalnego artykułu w języku portugalskim na język angielski. Ta przetłumaczona wersja jest przetwarzana przez Summarizer API w celu wygenerowania podsumowania, a następnie ponownie przetłumaczona na język portugalski. Dzięki temu użytkownik otrzyma podsumowanie treści w języku aplikacji.

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

Skuteczna integracja wbudowanych interfejsów API AI przez firmę Terra pokazuje, jak duży potencjał ma AI po stronie klienta w ramach usprawniania procesów zarządzania treściami. Dzięki interfejsom API Summarizer i Translator firma Terra zwiększyła wydajność swoich dziennikarzy i zapewnia lepsze wrażenia użytkowników na różnych platformach.

Sprawdzone metody

Jeśli dane wejściowe opinii przekraczają limit tokenów, wykonaj te czynności:

  • Użyj mniejszej próbki (np. 4 najnowszych opinii) w interfejsie API. Pomoże to uzyskać szybsze wyniki. Zapoznaj się ze wskazówkami dotyczącymi skalowania podsumowywania po stronie klienta.
  • QuotaExceededError zawiera więcej informacji o żądanych tokenach w danych wejściowych. Obiekt summarizer ma właściwość inputQuota, która wskazuje limit tokenów interfejsu API. Umożliwia to wyświetlanie informacji zwrotnych w czasie rzeczywistym i wyłączanie funkcji, jeśli dane wejściowe przekraczają limit.

Aby zapewnić wszystkim użytkownikom płynne korzystanie z usługi, możesz rozważyć podejście hybrydowe. Podczas pierwszego wywołania wbudowanego interfejsu API AI przeglądarka musi pobrać model.

  • Miravia używała modelu po stronie serwera, aby wyświetlić wstępne podsumowanie, podczas gdy model był pobierany. Gdy wbudowany model był już gotowy, strona zaczęła wykonywać wnioskowanie po stronie klienta.

Zawsze staraj się tworzyć przyjazne i łatwe w użyciu interfejsy:

  • Wdróż pasek postępu do pobierania modeli i zmniejszania opóźnień odpowiedzi.
  • Zadbaj o przejrzystość dotyczącą pobierania modelu. Bright Sites powiadomiło użytkowników o pobieraniu modelu w celu zapewnienia przejrzystości i uzyskania zgody na wykorzystanie zasobów. Dzięki temu użytkownicy mogliby zaakceptować lub odrzucić prośbę przed kontynuacją.

Wnioski i rekomendacje

Przykłady Bright Sites i Terra pokazują, jak interfejs API Summarizer ułatwia dostęp do treści i zwiększa zaangażowanie czytelników. Dzięki temu interfejsowi API po stronie klienta te platformy poprawiły komfort czytania i personalizację bez dodatkowych kosztów biznesowych i z uproszczonym zarządzaniem danymi. Podobnie jak w przypadku interfejsu Summarizer API, wszystkie wbudowane interfejsy API AI umożliwiają praktyczne stosowanie AI po stronie klienta.

Zastanawiasz się, jak interfejs Summarizer API może Ci pomóc w innych zastosowaniach? Omówiliśmy też, jak interfejs Summarizer API pomaga firmom redBus i Miravia tworzyć przydatne podsumowania opinii użytkowników.

Czy tworzysz coś nowego za pomocą tych interfejsów API? Udostępnij je nam na koncie @ChromiumDev na X lub na stronie Chromium for Developers na LinkedIn.

Zasoby

Podziękowania

Dziękujemy Guilherme MoserowiFernandowi Fischerowi z Terra, Aline Souza z CWI, Brianowi Alfordowi, Kevaldowi Patelowi, Jackowi Rileyowi i zespołowi inżynierów z Brightsites, Swetha Gopalakrishnanowi, Alexandre Klepper, Thomasowi SteinerowiKenji Baheux za pomoc w sporządzeniu i przeanalizowaniu tego dokumentu.