게시: 2025년 5월 20일, 최종 업데이트: 2025년 7월 21일
설명 | 웹 | 확장 프로그램 | Chrome 상태 | 의도 |
---|---|---|---|---|
GitHub | View | 실험 의도 |
프롬프트 API를 사용하면 브라우저에서 Gemini Nano에 자연어 요청을 보낼 수 있습니다.
웹 애플리케이션이나 웹사이트에서 프롬프트 API를 사용하는 방법은 다양합니다. 예를 들어 다음과 같은 앱을 빌드할 수 있습니다.
- AI 기반 검색: 웹페이지의 콘텐츠를 기반으로 질문에 답변합니다.
- 맞춤 뉴스 피드: 카테고리로 기사를 동적으로 분류하는 피드를 빌드하고 사용자가 해당 콘텐츠를 필터링하도록 허용합니다.
이것은 몇 가지 가능성일 뿐이며, 여러분이 만들 콘텐츠가 기대됩니다.
하드웨어 요구사항 검토
Chrome에서 이러한 API를 사용하여 기능을 작동하는 개발자와 사용자에게는 다음 요구사항이 적용됩니다. 다른 브라우저에는 다른 운영 요구사항이 있을 수 있습니다.
Language Detector API와 Translator API는 데스크톱의 Chrome에서 작동합니다. 이러한 API는 휴대기기에서 작동하지 않습니다. 다음 조건을 충족하는 경우 Chrome에서 Prompt API, Summarizer API, Writer API, Rewriter API가 작동합니다.
- 운영체제: Windows 10 또는 11, macOS 13 이상 (Ventura 이상), Linux Android, iOS, ChromeOS용 Chrome은 아직 Gemini Nano를 사용하는 API에서 지원되지 않습니다.
- 저장소: Chrome 프로필이 포함된 볼륨에 22GB 이상의 여유 공간이 있어야 합니다.
- GPU: VRAM이 4GB보다 커야 합니다.
- 네트워크: 무제한 데이터 또는 무제한 연결
브라우저에서 모델을 업데이트하면 Gemini Nano의 정확한 크기가 달라질 수 있습니다. 현재 크기를 확인하려면 chrome://on-device-internals
로 이동하여 모델 상태를 확인하세요. 나열된 파일 경로를 열어 모델 크기를 확인합니다.
Prompt API 사용
이 API를 사용하기 전에 Google의 생성형 AI에 관한 금지된 사용 정책을 확인하세요.
LanguageModel
네임스페이스에는 다음 두 가지 함수를 사용할 수 있습니다.
availability()
를 사용하여 모델의 기능을 확인하고 사용 가능한지 확인합니다.create()
를 사용하여 언어 모델 세션을 시작합니다.
모델 다운로드
Prompt API는 Chrome의 Gemini Nano 모델을 사용합니다. API는 Chrome에 내장되어 있지만 모델은 출처가 API를 처음 사용할 때 별도로 다운로드됩니다.
모델을 사용할 준비가 되었는지 확인하려면 비동기 LanguageModel.availability()
함수를 호출합니다. 그러면 다음 응답 중 하나가 반환됩니다.
"unavailable"
는 구현이 요청된 옵션을 지원하지 않거나 언어 모델 프롬프트를 전혀 지원하지 않음을 의미합니다."downloadable"
는 구현이 요청된 옵션을 지원하지만 이러한 옵션을 사용하여 세션을 만들기 전에 무언가 (예: 언어 모델 자체 또는 미세 조정)를 다운로드해야 함을 의미합니다."downloading"
는 구현이 요청된 옵션을 지원하지만 이러한 옵션을 사용하여 세션을 만들기 전에 진행 중인 다운로드 작업을 완료해야 함을 의미합니다."available"
는 구현이 새로운 다운로드 없이 요청된 옵션을 지원한다는 의미입니다.
모델 다운로드를 트리거하고 언어 모델 세션을 만들려면 비동기 LanguageModel.create()
함수를 호출하세요. availability()
에 대한 응답이 'downloadable'
인 경우 다운로드 진행률을 수신하는 것이 좋습니다. 이렇게 하면 다운로드에 시간이 걸리는 경우 사용자에게 알릴 수 있습니다.
const session = await LanguageModel.create({
monitor(m) {
m.addEventListener('downloadprogress', (e) => {
console.log(`Downloaded ${e.loaded * 100}%`);
});
},
});
모델 기능
params()
함수는 언어 모델의 매개변수를 알려줍니다. 객체에는 다음 필드가 포함됩니다.
defaultTopK
: 기본 상위 K 값(기본값:3
)입니다.maxTopK
: 최대 상위 K 값 (8
)입니다.defaultTemperature
: 기본 온도(1.0
)입니다. 온도 값은0.0
~2.0
사이여야 합니다.maxTemperature
: 최대 온도입니다.
await LanguageModel.params();
// {defaultTopK: 3, maxTopK: 8, defaultTemperature: 1, maxTemperature: 2}
세션 만들기
프롬프트 API를 실행할 수 있게 되면 create()
함수로 세션을 만듭니다.
prompt()
또는 promptStreaming()
함수를 사용하여 모델에 프롬프트를 표시할 수 있습니다.
세션 맞춤설정
각 세션은 선택적 옵션 객체를 사용하여 topK
및 temperature
로 맞춤설정할 수 있습니다. 이러한 매개변수의 기본값은 LanguageModel.params()
에서 반환됩니다.
const params = await LanguageModel.params();
// Initializing a new session must either specify both `topK` and
// `temperature` or neither of them.
const slightlyHighTemperatureSession = await LanguageModel.create({
temperature: Math.max(params.defaultTemperature * 1.2, 2.0),
topK: params.defaultTopK,
});
create()
함수의 선택적 옵션 객체는 세션을 소멸하는 AbortSignal
를 전달할 수 있는 signal
필드도 사용합니다.
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. [...]',
},
],
});
접두사를 제공하여 대답 제한하기
이전 역할 외에 새 "assistant"
역할을 추가하여 모델의 이전 대답을 자세히 설명할 수 있습니다. 예를 들면 다음과 같습니다.
const followup = await session.prompt([
{
role: "user",
content: "I'm nervous about my presentation tomorrow"
},
{
role: "assistant"
content: "Presentations are tough!"
}
]);
경우에 따라 새 대답을 요청하는 대신 "assistant"
역할 응답 메시지의 일부를 미리 채우고 싶을 수 있습니다. 이는 언어 모델이 특정 응답 형식을 사용하도록 안내하는 데 유용할 수 있습니다. 이렇게 하려면 후행 "assistant"
역할 메시지에 prefix: true
를 추가합니다. 예를 들면 다음과 같습니다.
const characterSheet = await session.prompt([
{
role: 'user',
content: 'Create a TOML character sheet for a gnome barbarian',
},
{
role: 'assistant',
content: '```toml\n',
prefix: true,
},
]);
프롬프트 없이 메시지 추가
특히 멀티모달 입력으로 프롬프트를 작성하는 경우 추론에 시간이 걸릴 수 있습니다. 모델이 미리 처리할 수 있도록 세션을 채우기 위해 미리 정해진 프롬프트를 미리 보내는 것이 유용할 수 있습니다.
initialPrompts
는 세션 생성 시 유용하지만 append()
메서드는 prompt()
또는 promptStreaming()
메서드와 함께 사용하여 세션이 생성된 후 추가 컨텍스트 프롬프트를 제공할 수 있습니다.
예를 들면 다음과 같습니다.
const session = await LanguageModel.create({
initialPrompts: [
{
role: 'system',
content:
'You are a skilled analyst who correlates patterns across multiple images.',
},
],
expectedInputs: [{ type: 'image' }],
});
fileUpload.onchange = async () => {
await session.append([
{
role: 'user',
content: [
{
type: 'text',
value: `Here's one image. Notes: ${fileNotesInput.value}`,
},
{ type: 'image', value: fileUpload.files[0] },
],
},
]);
};
analyzeButton.onclick = async (e) => {
analysisResult.textContent = await session.prompt(userQuestionInput.value);
};
프롬프트가 검증되고 처리되어 세션에 추가되면 append()
에서 반환된 프라미스가 처리됩니다. 프롬프트를 추가할 수 없는 경우 프라미스가 거부됩니다.
세션 제한
특정 언어 모델 세션에서 처리할 수 있는 최대 토큰 수가 있습니다. 세션 객체에서 다음 속성을 사용하여 사용량과 한도 도달 진행 상황을 확인할 수 있습니다.
console.log(`${session.inputUsage}/${session.inputQuota}`);
세션 지속성
각 세션은 대화의 컨텍스트를 추적합니다. 세션의 컨텍스트 윈도우가 가득 찰 때까지 이전 상호작용이 향후 상호작용에 고려됩니다.
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);
JSON 스키마 전달
모델이 요청된 JSON 스키마를 준수하도록 하려면 JSON 스키마를 prompt()
또는 promptStreaming()
메서드의 옵션 객체에 responseConstraint
필드의 값으로 전달해야 합니다.
다음은 모델이 true
또는 false
로 응답하여 이 Mastodon 게시물과 같은 메시지가 도자기에 관한 것인지 분류하도록 하는 매우 기본적인 JSON 스키마 예시입니다.
const session = await LanguageModel.create();
const schema = {
"type": "boolean"
};
const post = "Mugs and ramen bowls, both a bit smaller than intended- but that's
how it goes with reclaim. Glaze crawled the first time around, but pretty happy
with it after refiring.";
const result = await session.prompt(
`Is this post about pottery?\n\n${post}`,
{
responseConstraint: schema,
}
);
console.log(JSON.parse(result));
// true
기본적으로 구현은 기본 언어 모델에 전송되는 메시지의 일부로 스키마 또는 정규 표현식을 포함할 수 있습니다. 이 경우 입력 할당량이 일부 사용됩니다. responseConstraint
옵션을 session.measureInputUsage()
에 전달하여 사용할 입력 할당량을 측정할 수 있습니다.
이 동작을 방지하려면 omitResponseConstraintInput
옵션을 사용하세요. 이러한 경우 프롬프트에 몇 가지 안내를 포함하는 것이 좋습니다.
const result = await session.prompt(`
Summarize this feedback into a rating between 0-5, only outputting a JSON
object { rating }, with a single property whose value is a number:
The food was delicious, service was excellent, will recommend.
`, { responseConstraint: schema, omitResponseConstraintInput: true });
세션 클론
리소스를 보존하려면 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 { defaultTemperature, maxTemperature, defaultTopK, maxTopK } =
await LanguageModel.params();
const available = await LanguageModel.availability();
if (available !== 'unavailable') {
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()
함수를 사용해야 합니다. promptStreaming()
함수는 ReadableStream
를 반환합니다.
const { defaultTemperature, maxTemperature, defaultTopK, maxTopK } =
await LanguageModel.params();
const available = await LanguageModel.availability();
if (available !== 'unavailable') {
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);
}
}
프롬프트 실행 중지
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."
);
멀티모달 기능
Prompt API는 로컬 실험을 위해 Chrome 138 Canary에서 오디오 및 이미지 입력을 지원합니다. API는 텍스트 출력을 반환합니다.
이러한 기능을 사용하면 다음 작업을 할 수 있습니다.
- 사용자가 채팅 애플리케이션에서 전송된 오디오 메시지를 텍스트로 변환하도록 허용합니다.
- 캡션이나 대체 텍스트에 사용할 웹사이트에 업로드된 이미지를 설명해 줘.
const session = await LanguageModel.create({
// { type: "text" } is not necessary to include explicitly, unless
// you also want to include expected input languages for text.
expectedInputs: [{ type: 'audio' }, { type: 'image' }],
});
const referenceImage = await (await fetch('/reference-image.jpeg')).blob();
const userDrawnImage = document.querySelector('canvas');
const response1 = await session.prompt([
{
role: 'user',
content: [
{
type: 'text',
value:
'Give a helpful artistic critique of how well the second image matches the first:',
},
{ type: 'image', value: referenceImage },
{ type: 'image', value: userDrawnImage },
],
},
]);
console.log(response1);
const audioBlob = await captureMicrophoneInput({ seconds: 10 });
const response2 = await session.prompt([
{
role: 'user',
content: [
{ type: 'text', value: 'My response to your critique:' },
{ type: 'audio', value: audioBlob },
],
},
]);
멀티모달 데모
오디오 입력과 함께 프롬프트 API를 사용하는 방법은 Mediarecorder 오디오 프롬프트 데모를, 이미지 입력과 함께 프롬프트 API를 사용하는 방법은 캔버스 이미지 프롬프트 데모를 참고하세요.
실적 전략
웹용 프롬프트 API는 아직 개발 중입니다. 이 API를 빌드하는 동안 최적의 성능을 위해 세션 관리에 관한 권장사항을 참고하세요.
의견
의견은 이 API의 향후 방향과 Gemini Nano 개선에 도움이 됩니다. 전용 작업 API (예: 오디오 텍스트 변환 또는 이미지 설명용 API)가 제공되어 Google에서 개발자의 요구사항과 사용자의 요구사항을 충족할 수 있습니다.
참여하고 의견 공유하기
귀하의 의견은 향후 버전의 이 API와 모든 내장 AI API를 빌드하고 구현하는 방식에 직접적인 영향을 미칠 수 있습니다.
- 사전 체험 프로그램에 참여하세요.
- Chrome 구현에 관한 의견이 있으면 버그 신고 또는 기능 요청을 제출하세요.
- 기존 문제에 댓글을 달거나 프롬프트 API GitHub 저장소에서 새 문제를 열어 API 모양에 관한 의견을 공유하세요.
- Web Incubator Community Group에 가입하여 표준 작업에 참여하세요.