本指南將說明如何使用所選平台的 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 服務和生成式模型
您必須先初始化 Vertex AI 服務和生成式模型,才能發出 API 呼叫。
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 Studio 測試提示和模型設定。提供使用 Vertex AI in Firebase 的意見回饋