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


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

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

คู่มือนี้จะถือว่าคุณคุ้นเคยกับการใช้ 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 ให้สิทธิ์เข้าถึง 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

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

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
// Gemini 1.5 models are versatile and can be used with all API capabilities
const model = getGenerativeModel(vertexAI, { model: "gemini-1.5-flash" });

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

ขั้นตอนที่ 4: โทรหา Vertex AI Gemini API

เมื่อเชื่อมต่อแอปกับ Firebase, เพิ่ม SDK และเริ่มต้นบริการ Vertex AI และ Generative Model แล้ว คุณก็พร้อมเรียกใช้ Vertex AI Gemini API

คุณสามารถใช้ 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
// 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 in Firebase