게시일: 2025년 5월 20일
내장 Prompt API는 Chrome 138 안정화 버전부터 Windows, macOS, Linux의 Chrome 확장 프로그램에서 사용할 수 있습니다. 이 API는 곧 Chrome의 오리진 트라이얼에서 사용할 수 있습니다.
이 API는 다른 브라우저, ChromeOS 또는 모바일 운영체제(예: Android 또는 iOS)에서 지원되지 않습니다. 브라우저에서 이 API를 지원하더라도 충족되지 않은 하드웨어 요구사항으로 인해 실행할 수 없을 수 있습니다.
Firebase AI 로직을 사용하여 클라우드로 대체하는 옵션을 설정하면 사용자가 사용하는 플랫폼이나 하드웨어와 관계없이 사용자의 요구사항을 충족할 수 있습니다.
하이브리드 AI 환경 빌드
기본 제공되는 AI에는 다음과 같은 다양한 이점이 있습니다.
- 민감한 정보의 로컬 처리: 민감한 정보를 다루는 경우 엔드 투 엔드 암호화를 통해 사용자에게 AI 기능을 제공할 수 있습니다.
- 오프라인 AI 사용: 사용자가 오프라인 상태이거나 연결이 끊긴 경우에도 AI 기능에 액세스할 수 있습니다.
이러한 이점은 클라우드 애플리케이션에는 적용되지 않지만, 내장 AI에 액세스할 수 없는 사용자에게 원활한 환경을 제공할 수 있습니다.
Firebase 시작하기
먼저 Firebase 프로젝트를 만들고 웹 앱을 등록합니다. Firebase 문서를 사용하여 Firebase JavaScript SDK 설정을 계속합니다.
SDK 설치
이 워크플로에서는 npm을 사용하고 모듈 번들러 또는 JavaScript 프레임워크 도구가 필요합니다. Firebase AI 로직은 사용하지 않는 코드를 제거하고 (트리 쉐이킹) SDK 크기를 줄이기 위해 모듈 번들러와 연동되도록 최적화되었습니다.
npm install firebase@eap-ai-hybridinference
Firebase AI Logic 사용
Firebase가 설치되면 SDK를 초기화하여 Firebase 서비스를 시작합니다.
Firebase 앱 구성 및 초기화
Firebase 프로젝트에는 여러 Firebase 앱을 포함할 수 있습니다. Firebase 앱은 일반적인 구성을 저장하고 Firebase 서비스 간에 인증을 공유하는 컨테이너와 유사한 객체입니다.
Firebase 앱은 하이브리드 AI 기능의 클라우드 부분 역할을 합니다.
import { initializeApp } from 'firebase/app';
import { getAI, getGenerativeModel } from 'firebase/vertexai';
// TODO: Replace the following with your app's Firebase project configuration.
const firebaseConfig = {
apiKey: '',
authDomain: '',
projectId: '',
storageBucket: '',
messagingSenderId: '',
appId: '',
};
// Initialize `FirebaseApp`.
const firebaseApp = initializeApp(firebaseConfig);
모델 프롬프트
초기화되면 텍스트 또는 멀티모달 입력으로 모델에 프롬프트를 제공할 수 있습니다.
텍스트 프롬프트
모델에 대한 안내에는 일반 텍스트를 사용할 수 있습니다. 예를 들어 모델에게 농담을 들려 달라고 요청할 수 있습니다.
getGenerativeModel
함수에서 사용 가능한 경우 기본 제공 AI가 사용되도록 하려면 mode
를 prefer_on_device
로 설정합니다.
// Initialize the Google AI service.
const googleAI = getAI(firebaseApp);
// Create a `GenerativeModel` instance with a model that supports your use case.
const model = getGenerativeModel(googleAI, { mode: 'prefer_on_device' });
const prompt = 'Tell me a joke';
const result = await model.generateContentStream(prompt);
for await (const chunk of result.stream) {
const chunkText = chunk.text();
console.log(chunkText);
}
console.log('Complete response', await result.response);
멀티모달 프롬프트
텍스트 외에도 이미지나 오디오를 프롬프트로 사용할 수도 있습니다. 모델에 이미지의 콘텐츠를 설명하거나 오디오 파일의 스크립트를 작성하도록 지시할 수 있습니다.
이미지는 base64 인코딩된 문자열로 Firebase FileDataPart
객체로 전달되어야 하며, 이는 도우미 함수 fileToGenerativePart()
를 사용하여 수행할 수 있습니다.
// Converts a File object to a `FileDataPart` object.
// https://firebase.google.com/docs/reference/js/vertexai.filedatapart
async function fileToGenerativePart(file) {
const base64EncodedDataPromise = new Promise((resolve) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result.split(',')[1]);
reader.readAsDataURL(file);
});
return {
inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
};
}
const fileInputEl = document.querySelector('input[type=file]');
fileInputEl.addEventListener('change', async () => {
const prompt = 'Describe the contents of this image.';
const imagePart = await fileToGenerativePart(fileInputEl.files[0]);
// To generate text output, call generateContent with the text and image
const result = await model.generateContentStream([prompt, imagePart]);
for await (const chunk of result.stream) {
const chunkText = chunk.text();
console.log(chunkText);
}
console.log(Complete response: ', await result.response);
});
데모
다양한 기기와 브라우저에서 Firebase AI 로직 데모를 방문하세요. 내장된 AI 모델 또는 클라우드에서 모델 응답이 어떻게 오는지 확인할 수 있습니다.
Chrome에서 지원되는 하드웨어를 사용하는 경우 데모는 Prompt API와 Gemini Nano를 사용합니다. 기본 문서, JavaScript 파일, CSS 파일에 대한 요청은 3개뿐입니다.
AI 지원이 내장되지 않은 다른 브라우저나 운영체제에서는 Firebase 엔드포인트 https://firebasevertexai.googleapis.com
에 대한 추가 요청이 발생합니다.
참여 및 의견 공유
Firebase AI 로직은 웹 앱에 AI 기능을 통합하는 데 적합한 옵션입니다. Prompt API를 사용할 수 없는 경우 클라우드로 대체 경로를 제공함으로써 SDK는 AI 기능의 접근성과 안정성을 더욱 넓힙니다.
클라우드 애플리케이션은 개인 정보 보호 및 기능에 대한 새로운 기대감을 조성하므로 사용자에게 데이터가 처리되는 위치를 알리는 것이 중요합니다.