Prompt API

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

설명 동영상 확장 프로그램 Chrome 상태 인텐트
GitHub 실험용 EPP에서 Chrome 베타 Chrome 137 베타 View 실험 의도

Prompt API를 사용하면 브라우저에서 Gemini Nano에 자연어 요청을 보낼 수 있습니다.

Chrome 확장 프로그램에서 Prompt API를 사용하는 방법은 여러 가지가 있습니다. 예를 들면 다음과 같습니다.

  • 즉시 캘린더 일정 사용자가 몇 단계만 거치면 캘린더 항목을 만들 수 있도록 웹페이지에서 일정 세부정보를 자동으로 추출하는 Chrome 확장 프로그램을 개발합니다.
  • 원활한 연락처 추출 웹사이트에서 연락처 정보를 추출하는 확장 프로그램을 빌드하여 사용자가 비즈니스에 연락하거나 연락처 목록에 세부정보를 더 쉽게 추가할 수 있도록 합니다.
  • 동적 콘텐츠 필터링 뉴스 기사를 분석하고 사용자 정의 주제에 따라 콘텐츠를 자동으로 흐리게 처리하거나 숨기는 Chrome 확장 프로그램을 만듭니다.

위의 예는 몇 가지 예시일 뿐입니다. 여러분이 어떤 결과물을 만들어 내실지 기대됩니다.

확장 프로그램에서 Prompt API 사용

LanguageModel 네임스페이스에서 사용할 수 있는 확장 함수는 두 가지입니다.

  • availability()를 사용하여 모델의 기능과 사용 가능 여부를 확인합니다.
  • create()를 사용하여 언어 모델 세션을 시작합니다.

모델 다운로드

Prompt API는 Chrome에서 Gemini Nano 모델을 사용합니다. API는 Chrome에 내장되어 있지만 확장 프로그램에서 API를 처음 사용할 때 모델은 별도로 다운로드됩니다.

모델을 사용할 준비가 되었는지 확인하려면 비동기 LanguageModel.availability() 함수를 호출합니다. 그러면 다음 응답 중 하나가 반환됩니다.

  • 'no': 브라우저에서 Prompt API를 지원하지만 현재 사용할 수 없습니다. 모델을 다운로드할 수 있는 디스크 공간이 부족한 등 여러 가지 이유로 발생할 수 있습니다.
  • 'readily': 브라우저에서 Prompt API를 지원하며 즉시 사용할 수 있습니다.
  • 'after-download': 브라우저가 Prompt API를 지원하지만 먼저 모델을 다운로드해야 합니다.

모델 다운로드를 트리거하고 언어 모델 세션을 만들려면 비동기 LanguageModel.availability() 함수를 호출합니다. availability()에 대한 응답이 'after-download'인 경우 다운로드 진행 상황을 리슨하는 것이 좋습니다. 이렇게 하면 다운로드하는 데 시간이 걸리는 경우 사용자에게 알릴 수 있습니다.

const session = await LanguageModel.create({
  monitor(m) {
    m.addEventListener("downloadprogress", (e) => {
      console.log(`Downloaded ${e.loaded} of ${e.total} bytes.`);
    });
  },
});

모델 기능

availability() 함수는 언어 모델의 기능도 알려줍니다. 객체에는 available 외에도 다음 필드가 있습니다.

  • defaultTopK: 기본 top-K 값입니다(기본값: 3).
  • maxTopK: 최대 상위 K개 값 (8)입니다.
  • defaultTemperature: 기본 온도(1.0). 온도 값은 0.02.0 사이여야 합니다.
await LanguageModel.availability();
// {available: 'readily', defaultTopK: 3, maxTopK: 8, defaultTemperature: 1}

세션 만들기

Prompt API를 실행할 수 있게 되면 create() 함수로 세션을 만듭니다. prompt() 또는 promptStreaming() 함수를 사용하여 모델에 프롬프트를 표시할 수 있습니다.

세션 맞춤설정

각 세션은 선택적 옵션 객체를 사용하여 topKtemperature로 맞춤설정할 수 있습니다. 이러한 매개변수의 기본값은 LanguageModel.availability()에서 반환됩니다.

const capabilities = await LanguageModel.availability();
// Initializing a new session must either specify both `topK` and
// `temperature` or neither of them.
const slightlyHighTemperatureSession = await LanguageModel.create({
  temperature: Math.max(availability.defaultTemperature * 1.2, 2.0),
  topK: capabilities.defaultTopK,
});

create() 함수의 선택적 옵션 객체는 signal 필드도 가져옵니다. 이를 통해 AbortSignal를 전달하여 세션을 소멸할 수 있습니다.

const controller = new AbortController();
stopButton.onclick = () => controller.abort();

const session = await LanguageModel.create({
  signal: controller.signal,
})

초기 프롬프트

초기 프롬프트를 사용하면 언어 모델에 이전 상호작용에 관한 컨텍스트를 제공할 수 있습니다. 예를 들어 사용자가 브라우저를 다시 시작한 후 저장된 세션을 재개할 수 있도록 할 수 있습니다.

const session = await LanguageModel.create({
  initialPrompts: [
    { role: 'system', content: 'You are a helpful and friendly assistant.' },
    { role: 'user', content: 'What is the capital of Italy?' },
    { role: 'assistant', content: 'The capital of Italy is Rome.'},
    { role: 'user', content: 'What language is spoken there?' },
    { role: 'assistant', content: 'The official language of Italy is Italian. [...]' }
  ]
});

세션 제한

특정 언어 모델 세션에는 처리할 수 있는 최대 토큰 수가 있습니다. 세션 객체에서 다음 속성을 사용하여 사용량과 한도 달성 진행 상황을 확인할 수 있습니다.

console.log(`${session.tokensSoFar}/${session.maxTokens}
(${session.tokensLeft} left)`);

세션 지속성

각 세션은 대화의 컨텍스트를 추적합니다. 이전 상호작용은 세션의 컨텍스트 창이 가득 찰 때까지 향후 상호작용에 고려됩니다.

const session = await LanguageModel.create({
  initialPrompts: [{
    role: "system",
    content: "You are a friendly, helpful assistant specialized in clothing choices."
  }]
});

const result1 = await session.prompt(
  "What should I wear today? It is sunny. I am unsure between a t-shirt and a polo."
);
console.log(result1);

const result2 = await session.prompt(
  "That sounds great, but oh no, it is actually going to rain! New advice?"
);
console.log(result2);

세션 클론

리소스를 보존하려면 clone() 함수로 기존 세션을 클론하면 됩니다. 대화 컨텍스트는 재설정되지만 초기 프롬프트는 그대로 유지됩니다. clone() 함수는 signal 필드가 있는 선택적 옵션 객체를 사용합니다. 이 옵션 객체를 사용하면 클론된 세션을 소멸하기 위해 AbortSignal를 전달할 수 있습니다.

const controller = new AbortController();
stopButton.onclick = () => controller.abort();

const clonedSession = await session.clone({
  signal: controller.signal,
});

모델 프롬프트

prompt() 또는 promptStreaming() 함수를 사용하여 모델에 프롬프트를 표시할 수 있습니다.

비스트리밍 출력

짧은 결과가 예상되는 경우 응답이 제공되면 응답을 반환하는 prompt() 함수를 사용할 수 있습니다.

// Start by checking if it's possible to create a session based on the
// availability of the model, and the characteristics of the device.
const {available, defaultTemperature, defaultTopK, maxTopK } =
  await LanguageModel.availability();

if (available !== 'no') {
  const session = await LanguageModel.create();

  // Prompt the model and wait for the whole result to come back.
  const result = await session.prompt("Write me a poem!");
  console.log(result);
}

스트리밍 출력

응답이 더 길 것으로 예상되는 경우 모델에서 들어오는 부분 결과를 표시할 수 있는 promptStreaming() 함수를 사용해야 합니다.

const {available, defaultTemperature, defaultTopK, maxTopK } =
  await LanguageModel.availability();

if (available !== 'no') {
  const session = await LanguageModel.create();

  // Prompt the model and stream the result:
  const stream = session.promptStreaming('Write me an extra-long poem!');
  for await (const chunk of stream) {
    console.log(chunk);
  }
}

promptStreaming()는 청크가 서로 연속적으로 빌드되는 ReadableStream를 반환합니다. 예를 들면 "Hello,", "Hello world,", "Hello world I am,", "Hello world I am an AI."입니다. 이는 의도된 동작이 아닙니다. YouTube는 청크가 하나의 긴 스트림의 연속된 부분인 플랫폼의 다른 스트리밍 API와 조화를 이루고자 합니다. 즉, 출력은 "Hello", " world", " I am", " an AI"와 같은 시퀀스입니다.

지금은 의도한 동작을 실행하려면 다음을 구현하면 됩니다. 이는 표준 동작과 비표준 동작 모두에서 작동합니다.

let result = '';
let previousChunk = '';

for await (const chunk of stream) {
  const newChunk = chunk.startsWith(previousChunk)
      ? chunk.slice(previousChunk.length) : chunk;
  console.log(newChunk);
  result += newChunk;
  previousChunk = chunk;
}
console.log(result);

프롬프트 실행 중지

prompt()promptStreaming() 모두 프롬프트 실행을 중지할 수 있는 signal 필드가 있는 선택적 두 번째 매개변수를 허용합니다.

const controller = new AbortController();
stopButton.onclick = () => controller.abort();

const result = await session.prompt(
  'Write me a poem!',
  { signal: controller.signal }
);

세션 종료

더 이상 세션이 필요하지 않으면 destroy()를 호출하여 리소스를 해제합니다. 세션이 소멸되면 더 이상 사용할 수 없으며 진행 중인 실행이 중단됩니다. 세션을 만드는 데 시간이 걸릴 수 있으므로 모델에 자주 메시지를 표시하려는 경우 세션을 유지하는 것이 좋습니다.

await session.prompt(
  "You are a friendly, helpful assistant specialized in clothing choices."
);

session.destroy();

// The promise is rejected with an error explaining that
// the session is destroyed.
await session.prompt(
  "What should I wear today? It is sunny, and I am unsure between a
  t-shirt and a polo."
);

데모

Chrome 확장 프로그램에서 Prompt API를 테스트하려면 데모 확장 프로그램을 설치하세요. 확장 프로그램 소스 코드는 GitHub에서 확인할 수 있습니다.

Prompt API의 데모 인터페이스

참여 및 의견 공유

보내 주시는 의견은 향후 이 API 버전과 모든 내장 AI API를 빌드하고 구현하는 방식에 직접적인 영향을 미칠 수 있습니다.