เริ่มต้นใช้งาน Gemini API โดยใช้ Vertex AI ใน Firebase SDK


คู่มือนี้จะแสดงวิธีเริ่มต้นการเรียกใช้ Vertex AI Gemini API โดยตรงจากแอปโดยใช้ SDK Vertex AI in Firebase สําหรับแพลตฟอร์มที่เลือก

โปรดทราบว่าคุณยังใช้คู่มือนี้เพื่อเริ่มต้นการเข้าถึงImagenโมเดลโดยใช้ Vertex AI in FirebaseSDK ได้ด้วย

ข้อกำหนดเบื้องต้น

คู่มือนี้จะถือว่าคุณคุ้นเคยกับการใช้ 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 ให้สิทธิ์เข้าถึง API สําหรับการโต้ตอบกับโมเดล Gemini และ Imagen ไลบรารีนี้รวมอยู่ใน Firebase JavaScript SDK สําหรับเว็บ

  1. ติดตั้ง Firebase JS SDK สําหรับเว็บโดยใช้ npm

      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 และโมเดล Generative

คุณต้องเริ่มต้นบริการ Vertex AI และโมเดล Generative ก่อนจึงจะเรียก API และแสดงโมเดล Gemini ได้

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
const model = getGenerativeModel(vertexAI, { model: "gemini-2.0-flash" });

หลังจากอ่านคู่มือเริ่มต้นใช้งานนี้จบแล้ว โปรดดูวิธีเลือกโมเดลและ (ไม่บังคับ) ตำแหน่งที่เหมาะสมกับกรณีการใช้งานและแอปของคุณ

ขั้นตอนที่ 4: ส่งคําขอพรอมต์ไปยังโมเดล

เมื่อเชื่อมต่อแอปกับ Firebase, เพิ่ม SDK และเริ่มต้นบริการ Vertex AI และโมเดล Generative แล้ว คุณก็พร้อมส่งคําขอพรอมต์ไปยังโมเดล Gemini

คุณสามารถใช้ 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
const model = getGenerativeModel(vertexAI, { model: "gemini-2.0-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 API

ดูวิธีควบคุมการสร้างเนื้อหา

คุณยังทดสอบพรอมต์และการกําหนดค่ารูปแบบได้โดยใช้ Vertex AI Studio


แสดงความคิดเห็นเกี่ยวกับประสบการณ์การใช้งาน Vertex AI in Firebase