透過 Firebase SDKs 的 Vertex AI AI 開始使用 Gemini'API


本指南將說明如何使用所選平台的 Vertex AI in Firebase SDK,直接從應用程式呼叫 Vertex AI Gemini API

事前準備

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

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

    • (選用) Node.js
    • 新式網路瀏覽器
  • (選用) 查看範例應用程式。

    下載範例應用程式

    您可以快速試用 SDK、查看各種用途的完整實作方式,或在沒有自有網頁應用程式時使用範例應用程式。如要使用範例應用程式,您必須將其連結至 Firebase 專案

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

如果您擁有 Firebase 專案和已連結至 Firebase 的應用程式

  1. Firebase 主控台中,前往「使用 Gemini 進行建構」頁面

  2. 按一下 Vertex AI in Firebase 資訊卡來啟動工作流程,協助您完成以下工作:

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

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


步驟 2:新增 SDK

設定 Firebase 專案並將應用程式連結至 Firebase 後 (請查看上一步),您可以將 Vertex AI in Firebase SDK 新增至應用程式。

Vertex AI in Firebase 程式庫可讓您存取 Vertex AI Gemini API,並包含在 Firebase JavaScript SDK 網頁版中。

  1. 使用 npm 安裝適用於網頁的 Firebase JS SDK:

      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";

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

瞭解如何控管內容產生

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


提供使用 Vertex AI in Firebase 的意見回饋