내장된 AI로 요약

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

Thomas Steiner

게시일: 2024년 11월 11일, 최종 업데이트: 2025년 5월 20일

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

사용자에게 긴 기사, 복잡한 문서 또는 활발한 채팅 대화를 간결하고 유용한 요약으로 요약할 수 있는 기능을 제공할 수 있습니다.

Summarizer API를 사용하면 문장, 단락, 글머리기호 목록 등 다양한 길이와 형식의 다양한 유형의 요약을 생성할 수 있습니다. 이 API는 다음과 같은 경우에 유용합니다.

• 도움말 또는 채팅 대화의 핵심 사항을 요약합니다.
• 도움말의 제목과 제목을 제안합니다.
• 긴 텍스트의 간결하고 유익한 요약을 생성합니다.
• 서평을 기반으로 도서 티저를 생성합니다.

시작하기

Summarizer API는 Chrome 138 안정화 버전부터 사용할 수 있습니다.

기능 감지를 실행하여 브라우저가 Summarizer API를 지원하는지 확인합니다.

if ('Summarizer' in self) {
  // The Summarizer API is supported.
}

모델 다운로드

Summarizer API는 고품질 요약을 생성하도록 학습된 모델을 사용합니다. 이 API는 Chrome에 내장되어 있으며 Gemini Nano는 웹사이트에서 이 API를 처음 사용할 때 다운로드되는 모델입니다.

모델을 사용할 준비가 되었는지 확인하려면 비동기 Summarizer.availability() 함수를 호출합니다. 다음 값이 포함된 프로미스를 반환합니다.

• "unavailable"은 구현에서 요청된 옵션을 지원하지 않음을 의미합니다.
• "downloadable"은 구현이 요청된 옵션을 지원하지만 먼저 브라우저가 모델 (Chrome의 경우 Gemini Nano) 또는 모델의 미세 조정과 같은 항목을 다운로드해야 함을 의미합니다.
• "downloading"은 구현이 요청된 옵션을 지원하지만 진행 중인 다운로드를 완료해야 계속 진행할 수 있음을 의미합니다.
• "available"는 구현에서 요청된 옵션을 지원하고 요약 도구가 계속 진행할 수 있음을 의미합니다.

모델 다운로드를 트리거하고 요약 생성기를 만들려면 비동기 Summarizer.create() 함수를 호출합니다. availability()에 대한 응답이 downloadable 또는 downloading인 경우 다운로드 진행 상황을 리슨하는 것이 좋습니다. 이렇게 하면 사용자에게 알리고 요약이 실행되기 전에 다운로드가 완료되는 데 시간이 걸릴 수 있음을 알릴 수 있습니다.

const summarizer = await Summarizer.create({
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  }
});

API 함수

create() 함수를 사용하면 필요에 따라 새 요약 객체를 구성할 수 있습니다. 다음 매개변수를 사용하여 선택적 options 객체를 사용합니다.

• sharedContext: 요약 도구에 도움이 될 수 있는 추가 공유 컨텍스트입니다.
• type: 요약 유형입니다. 허용되는 값은 key-points(기본값), tldr, teaser, headline입니다. 자세한 내용은 다음 표를 참조하세요.
• format: 요약 형식입니다. 허용되는 값은 markdown(기본값) 및 plain-text입니다.
• length: 요약의 길이입니다. 허용되는 값은 short, medium (기본값), long입니다. 이러한 길이의 의미는 요청된 type에 따라 다릅니다. 예를 들어 Chrome 구현에서 짧은 주요 내용 요약은 글머리기호 3개로 구성되며 짧은 요약은 한 문장으로 구성됩니다.

설정된 후에는 파라미터를 변경할 수 없습니다. 매개변수를 수정해야 하는 경우 새 summarizer 객체를 만듭니다.

다음 표에는 다양한 유형의 요약과 해당 길이가 나와 있습니다. 길이는 가능한 최대 값을 나타냅니다. 결과가 더 짧을 수도 있기 때문입니다.

다음 예는 요약 도구를 초기화하는 방법을 보여줍니다.

const options = {
  sharedContext: 'This is a scientific article',
  type: 'key-points',
  format: 'markdown',
  length: 'medium',
};

const availability = await Summarizer.availability();
let summarizer;
if (availability === 'unavailable') {
  // The Summarizer API isn't usable.
  return;
}
if (availability === 'available') {
  // The Summarizer API can be used immediately .
  summarizer = await Summarizer.create(options);
} else {
  // The Summarizer API can be used after the model is downloaded.
  summarizer = await Summarizer.create(options);
  summarizer.addEventListener('downloadprogress', (e) => {
    console.log(`Downloaded ${e.loaded * 100}%`);
  });
  await summarizer.ready;
}

요약 도구 실행

요약 도구를 실행하는 방법에는 스트리밍과 일괄 (스트리밍 아님)의 두 가지가 있습니다.

일괄 요약

일괄 요약을 사용하면 모델이 입력을 전체로 처리한 후 출력을 생성합니다.

일괄 요약을 가져오려면 summarize() 함수를 호출합니다. 첫 번째 인수는 요약할 텍스트입니다. 두 번째 인수(선택사항)는 context 필드가 있는 객체입니다. 이 필드를 사용하면 요약을 개선하는 데 도움이 되는 배경 세부정보를 추가할 수 있습니다.

const longText = document.querySelector('article').innerHTML;
const summary = await summarizer.summarize(longText, {
  context: 'This article is intended for a tech-savvy audience.',
});

스트리밍 요약

스트리밍 요약은 실시간으로 결과를 제공합니다. 입력이 추가되고 조정되면 출력이 계속 업데이트됩니다. 스트리밍 요약을 가져오려면 summarize() 대신 summarizeStreaming()를 호출합니다.

const longText = document.querySelector('article').innerHTML;
const summary = await summarizer.summarizeStreaming(longText, {
  context: 'This article is intended for junior developers.',
});

데모

Summarizer API 플레이그라운드에서 Summarizer API를 사용해 볼 수 있습니다.

표준화 작업

Google은 교차 브라우저 호환성을 보장하기 위해 Summarizer API를 표준화하기 위해 노력하고 있습니다.

Google의 API 제안서는 커뮤니티의 지원을 받아 추가 논의를 위해 W3C 웹 인큐베이터 커뮤니티 그룹으로 이동했습니다. Chrome팀은 W3C 기술 아키텍처 그룹에 의견을 요청하고 Mozilla 및 WebKit에 표준 관련 입장을 요청했습니다.

웹 인큐베이터 커뮤니티 그룹에 가입하여 표준 개발에 참여하세요.

의견 공유

Summarizer API로 빌드하는 내용을 확인하고 싶습니다. X, YouTube, LinkedIn에서 웹사이트와 웹 애플리케이션을 공유하세요.

Chrome 구현에 관한 의견이 있으면 버그 신고 또는 기능 요청을 제출하세요.