Summarizer API를 사용하면 Bright Sites와 Terra에서 흥미로운 기사 요약을 만들 수 있습니다.

Mari Viana
Mari Viana

게시: 2025년 5월 15일

대중은 뉴스 매체를 통해 지역, 국내, 국제 사건에 대한 정보를 얻고 사려 깊은 관점을 공유합니다. 오늘날의 빠른 속도의 환경에서 기사 요약은 복잡한 정보를 액세스 가능한 스니펫으로 압축하여 독자가 더 자세히 살펴보도록 유도하는 중요한 전략입니다. Bright Sites와 Terra가 Summarizer API를 사용하여 이 전략에 접근하는 방법을 알아보세요.

설명 동영상확장 프로그램 Chrome 상태인텐트
MDN Chrome 138 Chrome 138 View 배송 의도

Summarizer API를 사용하면 문장, 단락, 글머리기호 목록 등 다양한 길이와 형식의 다양한 유형의 요약을 생성할 수 있습니다. 이 API는 많은 기본 제공 AI API와 마찬가지로 대규모 언어 모델을 사용하여 추론을 실행합니다. Chrome의 모델은 Gemini Nano입니다.

Bright Sites가 The Standard에 맞춤형 기사 요약 추가

Bright Sites의 대표적인 뉴스 게시 플랫폼인 Flow는 150개가 넘는 매체를 지원합니다. Bright Sites는 Summarizer API를 AI 기반 CMS에 통합하여 런던의 대표적인 뉴스 브랜드인 The Standard가 독자에게 맞춤형 기사 요약을 제공할 수 있도록 지원합니다. 이를 통해 사용자가 기사에 참여하고 The Standard의 다른 기사로 재순환하도록 유도할 수 있습니다.

'Chrome에서 Gemini의 최신 모델을 사용하면 독자에게 최신 정보를 제공해 온 The Standard의 198년 전통과 신뢰할 수 있는 저널리즘을 손쉽게 이용하는 것을 중시하는 바쁜 시청자를 위한 새로운 기술 혁신을 결합할 수 있습니다. 독자가 자신의 기기에 구축된 요약을 사용하여 뉴스를 빠르게 확인할 수 있도록 지원하는 것은 The Standard를 재구상하고 독자의 디지털 습관을 중심으로 새로운 독자 중심 제품을 구축하는 방법 중 하나일 뿐입니다."

잭 라일리, 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.',
  )
}

표준은 맞춤설정된 요약을 제공하기 위해 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는 엔터테인먼트, 뉴스, 스포츠를 제공하는 브라질 최대 콘텐츠 포털 중 하나로, 월간 순 방문자 수가 5천만 명이 넘습니다. Terra는 언론인이 포르투갈어로 뉴스 기사를 즉시 요약할 수 있도록 콘텐츠 관리 시스템 (CMS)에 Summarizer API와 Translator API를 추가했습니다. 그러면 언론인이 스타일이나 정확성을 위해 몇 가지 수정을 거친 후 공동으로 작성된 요약을 게시하여 모든 독자가 쉽게 이용할 수 있도록 할 수 있습니다.

Terra의 CMS는 이미 서버 측 LLM을 사용하고 있지만, 팀은 새로운 이점을 제공할 수 있는 고유한 접근 방식으로 클라이언트 측 AI를 살펴봤습니다. Chrome의 Summarizer API와 Gemini Nano가 서버 측 구현과 비슷한 품질을 제공하는 것으로 확인되었습니다. 클라이언트 측 솔루션은 Translator API와 함께 사용했을 때 긍정적인 결과를 얻었습니다.

Terra는 주요 이점 때문에 Chrome의 내장 AI 구현을 채택했습니다. 클라이언트 측 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')

Terra에서 기본 제공 AI API를 성공적으로 통합한 사례는 콘텐츠 관리 워크플로를 개선하는 데 클라이언트 측 AI가 가진 상당한 잠재력을 보여줍니다. Terra는 Summarizer API와 Translator API를 사용하여 언론인의 역량을 강화하고 효율성을 개선했으며, 여러 플랫폼에서 향상된 사용자 환경을 제공할 수 있는 유리한 위치에 있습니다.

권장사항

검토 입력이 토큰 한도를 초과하는 경우 다음 완화 조치를 따르세요.

  • API에 더 적은 수의 샘플 (예: 최근 4개 리뷰)을 사용합니다. 이렇게 하면 결과를 더 빠르게 생성할 수 있습니다. 클라이언트 측 요약 확장에 관한 가이드를 참고하세요.
  • QuotaExceededError는 입력에서 요청된 토큰에 관한 추가 정보를 제공합니다. summarizer 객체에는 API의 토큰 한도를 나타내는 inputQuota 속성이 있습니다. 이를 통해 입력이 한도를 초과하면 실시간 피드백을 제공하고 기능을 사용 중지할 수 있습니다.

모든 사용자에게 원활한 환경을 제공하기 위해 하이브리드 접근 방식을 고려해 볼 수 있습니다. 내장 AI API가 처음 호출되면 브라우저가 모델을 다운로드해야 합니다.

  • Miravia는 모델이 다운로드되는 동안 서버 측 모델을 사용하여 초기 요약을 제공했습니다. 내장 모델이 준비되면 사이트가 클라이언트 측에서 추론을 실행하도록 전환되었습니다.

항상 친근하고 소통이 가능한 인터페이스를 만들기 위해 노력해야 합니다.

  • 모델 다운로드에 진행률 표시줄을 구현하고 응답 지연을 완화합니다.
  • 모델 다운로드에 관한 투명성을 고려하세요. Bright Sites는 리소스 사용의 투명성과 동의를 위해 사용자에게 모델 다운로드에 관해 알렸습니다. 이렇게 하면 사용자가 계속하기 전에 수락하거나 거부할 수 있습니다.

결론 및 권장사항

Bright Sites 및 Terra의 예는 콘텐츠 접근성 및 독자 참여도 향상에 Summarizer API가 얼마나 중요한지 보여줍니다. 이러한 플랫폼은 이 클라이언트 측 API를 사용하여 추가 비용 없이 간소화된 데이터 거버넌스로 독서 환경과 맞춤설정을 개선했습니다. Summarizer API와 마찬가지로 모든 내장 AI API는 실용적인 클라이언트 측 AI를 사용 설정합니다.

Summarizer API가 다른 사용 사례에 어떻게 도움이 될 수 있는지 궁금하신가요? 또한 Summarizer API가 redBus와 Miravia에서 유용한 사용자 리뷰 요약을 만드는 데 어떻게 도움이 되는지도 공유했습니다.

이러한 API로 새로운 것을 구축하고 있나요? X의@ChromiumDev 또는 LinkedIn의 개발자용 Chromium에서 공유해 주세요.

리소스

감사의 말씀

이 문서 작성 및 검토에 도움을 주신 Terra의 Guilherme MoserFernando Fischer, CWI의 Aline Souza, Brian Alford, Keval Patel, Jack Riley, Brightsites 엔지니어링팀, Swetha Gopalakrishnan, Alexandra Klepper, Thomas Steiner, Kenji Baheux님께 감사드립니다.