透過 Vertex AI for Firebase SDK 開始使用 Gemini API


本指南將說明如何使用 Vertex AI for Firebase SDK，直接在應用程式中呼叫 Vertex AI Gemini API。

先備知識

本指南假設您已熟悉如何使用 JavaScript 開發網頁應用程式。本指南與架構無關。

  • 請確認您的開發環境和網頁應用程式符合下列要求：

    • (選用) Node.js
    • 新式網路瀏覽器

  • (選用) 查看範例應用程式。

    下載範例應用程式

    您可以快速試用 SDK，查看各種用途的完整實作方式，如果沒有自己的網頁應用程式，則可使用範例應用程式。如要使用範例應用程式，請將 SDK 連結至 Firebase 專案。

步驟 1：設定 Firebase 專案並將應用程式連結至 Firebase

如果您已經有 Firebase 專案，且有一個應用程式連結至 Firebase

  1. 在 Firebase 控制台中，前往「Build with Gemini」(使用 Gemini 建構) 頁面，然後按一下第二張資訊卡來啟動工作流程，協助您完成下列工作。如果您在控制台中看到 Vertex AI 的分頁，表示這些工作已完成。

  2. 請繼續進行本指南的下一步驟，將 SDK 加入應用程式。

如果您尚未有 Firebase 專案，且有一個應用程式連結至 Firebase


步驟 2：新增 SDK

設定好 Firebase 專案，並將應用程式連結至 Firebase 後 (請查看上一步)，即可將 Vertex AI for Firebase SDK 新增至應用程式。

Vertex AI for Firebase 程式庫提供 Vertex AI Gemini API 的存取權，並隨附於 Firebase JavaScript SDK 網頁版。

  1. 使用 npm 安裝 Firebase JS SDK for Web：

    npm install firebase

  2. 在應用程式中初始化 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-preview";

// 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-preview-0514" });

完成入門指南後，請瞭解如何選擇 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-preview";

// 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-preview-0514" });

// 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 的其他功能

瞭解如何控管內容生成功能

您也可以使用 Vertex AI Studio 測試提示和模型設定。


針對 Vertex AI for Firebase 使用體驗提供意見回饋