Chrome 확장 프로그램의 Prompt API

Thomas Steiner

게시일: 2024년 11월 11일

이제 확장 프로그램용 Prompt API를 오리진 트라이얼에서 사용할 수 있으므로 브라우저에서 가장 효율적인 언어 모델인 Gemini Nano를 사용하는 Chrome 확장 프로그램을 빌드할 수 있습니다.

Chrome 확장 프로그램에서 Prompt API를 사용하는 사용 사례는 다양합니다. 예를 들면 다음과 같습니다.

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

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

가용성

  • Chrome 131~136에서 실행되는 Prompt API 오리진 트라이얼에 참여하여 이 API로 확장 프로그램을 만드세요. 시작 버전 체험판을 처음 사용하는 경우, 이 프로그램은 모든 개발자에게 제공되는 기간 한정 프로그램으로 실험용 플랫폼 기능을 사전 체험할 수 있습니다. 개발자는 테스트하고, 사용자 의견을 수집하고, 향후 출시를 위해 반복할 수 있습니다.
    • 사용량 제한이 있을 수 있지만 실시간 테스트 및 사용자 의견 수집을 위해 이러한 기능을 통합할 수 있습니다. Google은 더 많은 사용자에게 이 API를 제공하기 위해 노력하고 있으며, 이 과정에서 향후 이 API의 버전에 관한 정보를 제공하는 것이 목표입니다.
  • 사전 미리보기 프로그램에 참여하여 새로운 기본 제공 AI API를 미리 살펴보고 메일링 리스트에 참여하여 토론에 참여하세요.

오리진 트라이얼 참여

Chrome 확장 프로그램에서 Prompt API를 사용하려면 다음 발췌 내용에 따라 manifest.json 파일에 "aiLanguageModelOriginTrial" 권한과 확장 프로그램에 필요한 기타 권한을 추가합니다.

원본 체험판을 위한 확장 프로그램을 가입하려면 URL chrome-extension://YOUR_EXTENSION_ID를 웹 출처로 사용합니다. 예로 chrome-extension://ljjhjaakmncibonnjpaoglbhcjeolhkk를 들 수 있습니다.

Chrome Origin 체험판 가입

확장 프로그램 ID는 동적으로 생성되지만 ID가 할당되면 매니페스트에 key 속성을 추가하여 ID가 안정적으로 유지되도록 강제할 수 있습니다.

원래 무료 체험에 가입하면 생성된 토큰이 전송되며, 이 토큰은 매니페스트의 trial_tokens 필드 값으로 배열을 전달해야 합니다. 스니펫을 예로 참고하세요.

{
  "permissions": ["aiLanguageModelOriginTrial"],
  "trial_tokens": ["GENERATED_TOKEN"],
}

localhost에 지원 추가

오리진 트라이얼 중에 localhost에서 Prompt API에 액세스하려면 Chrome을 최신 버전으로 업데이트해야 합니다. 그런 다음 아래 단계를 따르세요.

  1. Windows, Mac 또는 Linux 중 하나의 플랫폼에서 Chrome을 엽니다.
  2. chrome://flags/#optimization-guide-on-device-model 페이지로 이동합니다.
  3. Enabled BypassPerfRequirement를 선택합니다.
    • 이렇게 하면 성능 검사가 건너뛰어지므로 기기에 Gemini Nano를 다운로드하지 못할 수 있습니다.
  4. 다시 실행을 클릭하거나 Chrome을 다시 시작합니다.

Prompt API 사용

Prompt API 사용 권한을 요청한 후 확장 프로그램을 빌드할 수 있습니다. chrome.aiOriginTrial.languageModel 네임스페이스에서 사용할 수 있는 두 가지 새로운 확장 함수가 있습니다.

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

모델 다운로드

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

모델을 사용할 준비가 되었는지 확인하려면 비동기 chrome.aiOriginTrial.languageModel.capabilities() 함수를 호출합니다. 다음 세 가지 값을 사용할 수 있는 available 필드가 있는 AILanguageModelCapabilities 객체를 반환합니다.

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

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

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

모델 기능

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

  • defaultTopK: 기본 top-K 값입니다 (기본값: 3).
  • maxTopK: 최대 상위 K개 값 (8)입니다.
  • defaultTemperature: 기본 온도(1.0). 온도는 0.0~2.0 사이여야 합니다.
await chrome.aiOriginTrial.languageModel.capabilities();
// {available: 'readily', defaultTopK: 3, maxTopK: 8, defaultTemperature: 1}

세션 만들기

Prompt API를 실행할 수 있는지 확인한 후 create() 함수로 세션을 만듭니다. 그러면 prompt() 또는 promptStreaming() 함수로 모델에 프롬프트를 표시할 수 있습니다.

세션 옵션

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

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

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

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

const session = await chrome.aiOriginTrial.languageModel.create({
  signal: controller.signal,
})
시스템 메시지

시스템 프롬프트를 사용하면 언어 모델에 컨텍스트를 제공할 수 있습니다.

const session = await chrome.aiOriginTrial.languageModel.create({
  systemPrompt: 'You are a helpful and friendly assistant.',
});
await session.prompt('What is the capital of Italy?');
// 'The capital of Italy is Rome.'

초기 프롬프트

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

const session = await chrome.aiOriginTrial.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 chrome.aiOriginTrial.languageModel.create({
  systemPrompt: 'You are a friendly, helpful assistant specialized in clothing choices.'
});

const result1 = await session.prompt(
  'What should I wear today? It is sunny and 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 chrome.aiOriginTrial.languageModel.capabilities();

if (available !== 'no') {
  const session = await chrome.aiOriginTrial.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 chrome.aiOriginTrial.languageModel.capabilities();

if (available !== 'no') {
  const session = await chrome.aiOriginTrial.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의 데모 인터페이스

참여 및 의견 공유

오리진 트라이얼에 참여하여 Chrome 확장 프로그램에서 Prompt API 테스트를 시작하고 의견을 공유해 주세요. 보내 주시는 의견은 향후 이 API 버전과 모든 내장 AI API를 빌드하고 구현하는 방식에 직접적인 영향을 미칠 수 있습니다.