เริ่มต้นใช้งาน 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 ให้ไปที่ หน้า Build with Gemini

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

  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

ก่อนจะเริ่มเรียก 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 in Firebase