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


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

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

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

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

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

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

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

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

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

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

  1. ในคอนโซล Firebase ให้ไปที่ส่วน หน้า Build with 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" });

เมื่อคุณอ่านคู่มือเริ่มต้นใช้งานเสร็จแล้ว ให้เรียนรู้วิธีเลือก โมเดล 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" });

// 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