이 가이드에서는 선택한 플랫폼의 Vertex AI in Firebase SDK를 사용하여 앱에서 직접 Vertex AI Gemini API를 호출하는 방법을 설명합니다.
기본 요건
이 가이드에서는 독자가 JavaScript를 사용하여 웹 앱을 개발하는 데 익숙하다고 가정합니다. 이 가이드는 프레임워크와 독립적입니다.
개발 환경과 웹 앱이 다음 요구사항을 충족하는지 확인합니다.
- (선택사항) Node.js
- 최신 웹브라우저
(선택사항) 샘플 앱을 확인합니다.
SDK를 빠르게 사용해 보거나, 다양한 사용 사례의 전체 구현을 살펴보거나, 웹 앱이 없는 경우 샘플 앱을 사용할 수 있습니다. 샘플 앱을 사용하려면 Firebase 프로젝트에 연결해야 합니다.
1단계: Firebase 프로젝트 설정 및 Firebase에 앱 연결
이미 Firebase 프로젝트와 Firebase에 연결된 앱이 있는 경우
Firebase 콘솔에서 Gemini로 빌드 페이지로 이동합니다.
Vertex AI in Firebase 카드를 클릭하여 다음 작업을 완료하는 데 도움이 되는 워크플로를 실행합니다.
사용한 만큼만 지불하는 Blaze 요금제를 사용하도록 프로젝트를 업그레이드하세요.
프로젝트에서 필수 API (Vertex AI API 및 Vertex AI in Firebase API)를 사용 설정합니다.
이 가이드의 다음 단계로 진행하여 앱에 SDK를 추가하세요.
아직 Firebase 프로젝트와 Firebase에 연결된 앱이 없는 경우
2단계: SDK 추가
Firebase 프로젝트가 설정되고 앱이 Firebase에 연결되었으면(이전 단계 참조) 이제 Vertex AI in Firebase SDK를 앱에 추가할 수 있습니다.
Vertex AI in Firebase 라이브러리는 Vertex AI Gemini API에 대한 액세스를 제공하며 웹용 Firebase JavaScript SDK의 일부로 포함되어 있습니다.
npm을 사용하여 웹용 Firebase JS SDK를 설치합니다.
npm install firebase
앱에서 Firebase를 초기화합니다.
import { initializeApp } from "firebase/app"; // TODO(developer) Replace the following with your app's Firebase configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize FirebaseApp const firebaseApp = initializeApp(firebaseConfig);
3단계: Vertex AI 서비스 및 생성형 모델 초기화
API 호출을 하려면 먼저 Vertex AI 서비스와 생성 모델을 초기화해야 합니다.
import { initializeApp } from "firebase/app";
import { getVertexAI, getGenerativeModel } from "firebase/vertexai";
// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
// ...
};
// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);
// Initialize the Vertex AI service
const vertexAI = getVertexAI(firebaseApp);
// Initialize the generative model with a model that supports your use case
// Gemini 1.5 models are versatile and can be used with all API capabilities
const model = getGenerativeModel(vertexAI, { model: "gemini-1.5-flash" });
시작 가이드를 완료했다면 Gemini 모델과 사용 사례 및 앱에 적합한 위치 (선택사항)를 선택하는 방법을 알아봅니다.
4단계: Vertex AI Gemini API를 호출합니다.
앱을 Firebase에 연결하고, SDK를 추가하고, Vertex AI 서비스와 생성 모델을 초기화했으므로 이제 Vertex AI Gemini API를 호출할 수 있습니다.
generateContent()
를 사용하여 텍스트 전용 프롬프트 요청에서 텍스트를 생성할 수 있습니다.
import { initializeApp } from "firebase/app";
import { getVertexAI, getGenerativeModel } from "firebase/vertexai";
// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
// ...
};
// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);
// Initialize the Vertex AI service
const vertexAI = getVertexAI(firebaseApp);
// Initialize the generative model with a model that supports your use case
// Gemini 1.5 models are versatile and can be used with all API capabilities
const model = getGenerativeModel(vertexAI, { model: "gemini-1.5-flash" });
// Wrap in an async function so you can use await
async function run() {
// Provide a prompt that contains text
const prompt = "Write a story about a magic backpack."
// To generate text output, call generateContent with the text input
const result = await model.generateContent(prompt);
const response = result.response;
const text = response.text();
console.log(text);
}
run();
가능한 작업
Gemini 모델 자세히 알아보기
다양한 사용 사례에 사용할 수 있는 모델과 할당량 및 가격에 대해 알아보세요.
Gemini API의 다른 기능 사용해 보기
- 응답을 스트리밍하는 방법을 비롯하여 텍스트 전용 프롬프트에서 텍스트를 생성하는 방법을 자세히 알아보세요.
- 멀티모달 프롬프트(텍스트, 이미지, PDF, 동영상, 오디오 포함)에서 텍스트를 생성합니다.
- 멀티턴 대화(채팅)를 빌드합니다.
- 텍스트 및 멀티모달 프롬프트에서 구조화된 출력(예: JSON)을 생성합니다.
- 함수 호출을 사용하여 생성형 모델을 외부 시스템 및 정보에 연결합니다.
콘텐츠 생성을 제어하는 방법 알아보기
- 권장사항, 전략, 예시 프롬프트 등 프롬프트 설계를 이해합니다.
- 강도 및 최대 출력 토큰과 같은 모델 매개변수를 구성합니다.
- 안전 설정을 사용하여 유해한 것으로 간주될 수 있는 응답을 받을 가능성을 조정합니다.
Vertex AI in Firebase 사용 경험에 관한 의견 보내기