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


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

事前準備

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

  • 確認開發環境和網頁應用程式符合下列規定 規定:

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

    下載範例應用程式

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

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

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

  1. 在 Firebase 控制台中,前往 運用 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" });

閱讀完入門指南後,請瞭解如何選擇 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" });

// 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 的使用體驗