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


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

事前準備

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

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

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

    下載範例應用程式

    您可以快速試用 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 for Web 的一部分。

  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-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 使用體驗提供意見回饋