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


คู่มือนี้จะแสดงวิธีเริ่มต้นเรียกใช้ Vertex AI Gemini API จากแอปของคุณโดยตรงโดยใช้ SDK ของ Vertex AI สำหรับ Firebase

สิ่งที่ต้องดำเนินการก่อน

คู่มือนี้จะถือว่าคุณคุ้นเคยกับการใช้ JavaScript เพื่อพัฒนาเว็บแอป คู่มือนี้ไม่เกี่ยวข้องกับเฟรมเวิร์ก

  • ตรวจสอบว่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์และเว็บแอปเป็นไปตามข้อกำหนดต่อไปนี้

    • (ไม่บังคับ) Node.js
    • เว็บเบราว์เซอร์สมัยใหม่

  • (ไม่บังคับ) ดูแอปตัวอย่าง

    ดาวน์โหลดแอปตัวอย่าง

    คุณจะลองใช้ SDK ได้อย่างรวดเร็ว ดูการใช้งานกรณีการใช้งานที่หลากหลาย หรือใช้แอปตัวอย่างหากไม่มีเว็บแอปของตัวเอง หากต้องการใช้แอปตัวอย่าง คุณจะต้อง เชื่อมต่อกับโปรเจ็กต์ Firebase

ขั้นตอนที่ 1: สร้างโปรเจ็กต์ Firebase และเชื่อมต่อแอปกับ Firebase

หากคุณมีโปรเจ็กต์ Firebase และแอปที่เชื่อมต่อกับ Firebase อยู่แล้ว

  1. ในคอนโซล Firebase ให้ไปที่หน้าสร้างด้วย Gemini แล้วคลิกการ์ดใบที่ 2 เพื่อเปิดเวิร์กโฟลว์ที่ช่วยให้คุณทำงานต่อไปนี้ได้ หากคุณเห็นแท็บในคอนโซลสำหรับ Vertex AI แสดงว่างานเหล่านี้เสร็จสมบูรณ์แล้ว

  2. ทำขั้นตอนถัดไปในคู่มือนี้เพื่อเพิ่ม SDK ลงในแอป

หากคุณยังไม่มีโปรเจ็กต์ Firebase และแอปที่เชื่อมต่อกับ Firebase


ขั้นตอนที่ 2: เพิ่ม SDK

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

ไลบรารี Vertex AI สำหรับ Firebase ให้สิทธิ์เข้าถึง Vertex AI Gemini API และรวมอยู่ใน 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

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

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 และโมเดล Generative แล้ว คุณก็พร้อมที่จะเรียกใช้ 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 สำหรับ Firebase