สร้างประสบการณ์แบบผสมด้วยโมเดลในอุปกรณ์และโมเดลที่โฮสต์ในระบบคลาวด์

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

สร้างแอปและฟีเจอร์ที่ทำงานด้วยระบบ AI ด้วยการอนุมานแบบผสมโดยใช้ Firebase AI Logic การอนุมานแบบผสมช่วยให้สามารถเรียกใช้การอนุมานโดยใช้โมเดลในอุปกรณ์ได้หากมี และถอยกลับไปใช้โมเดลที่โฮสต์ในระบบคลาวด์ได้อย่างราบรื่น

เวอร์ชันนี้ช่วยให้ใช้การอนุมานแบบผสมได้โดยใช้ Firebase AI LogicSDK ของไคลเอ็นต์สําหรับเว็บที่รองรับการอนุมานในอุปกรณ์สําหรับ Chrome บนเดสก์ท็อป

ข้ามไปยังตัวอย่างโค้ด

กรณีการใช้งานที่แนะนำและความสามารถที่รองรับ

Use Case ที่แนะนํา:

• การใช้โมเดลในอุปกรณ์สําหรับข้อเสนอการอนุมาน

  • ความเป็นส่วนตัวที่เพิ่มขึ้น
  • บริบทเฉพาะรายการ
  • การทำนายโดยไม่มีค่าใช้จ่าย
  • ฟังก์ชันการทำงานแบบออฟไลน์

• การใช้ข้อเสนอฟังก์ชันการทำงานแบบผสมผสาน

  • เข้าถึงกลุ่มเป้าหมาย 100% ไม่ว่าจะมีรุ่นอุปกรณ์ใดก็ตาม

ความสามารถและฟีเจอร์ที่รองรับสำหรับการอนุมานในอุปกรณ์

• การสร้างเนื้อหาแบบเทิร์นเดียว สตรีมมิง และไม่สตรีม
• การสร้างข้อความจากอินพุตที่เป็นข้อความเท่านั้น
• การสร้างข้อความจากอินพุตข้อความและรูปภาพ โดยเฉพาะรูปภาพประเภท JPEG และ PNG
• การสร้างเอาต์พุตที่มีโครงสร้าง ซึ่งรวมถึง JSON และลิสต์แบบจำกัด

เริ่มต้นใช้งาน

คู่มือนี้จะแสดงวิธีเริ่มต้นใช้งาน Firebase AI LogicSDK สําหรับเว็บเพื่อดําเนินการอนุมานแบบผสม

การอนุมานโดยใช้โมเดลในอุปกรณ์จะใช้ Prompt API จาก Chrome ส่วนการอนุมานโดยใช้โมเดลที่โฮสต์ในระบบคลาวด์จะใช้Gemini APIผู้ให้บริการที่คุณเลือก (Gemini Developer API หรือ Vertex AI Gemini API)

ขั้นตอนที่ 1: ตั้งค่า Chrome และ Prompt API สําหรับการอนุมานในอุปกรณ์

1. ดาวน์โหลดบิลด์ Chrome Dev เวอร์ชันล่าสุด

   การอนุมานในอุปกรณ์พร้อมใช้งานใน Chrome เวอร์ชัน 138 ขึ้นไป

2. เปิดใช้ Prompt API สําหรับอินสแตนซ์ Chrome โดยตั้งค่า Flag ต่อไปนี้

   • chrome://flags/#optimization-guide-on-device-model: ตั้งค่าเป็นเปิดใช้
   • chrome://flags/#prompt-api-for-gemini-nano: ตั้งค่าเป็นเปิดใช้

   ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ API ใน localhost ในเอกสารประกอบของ Chrome (ไม่บังคับ) เข้าร่วมโปรแกรมทดลองใช้ก่อนเปิดตัว (EPP) ของ Chrome เพื่อแสดงความคิดเห็น

3. เปิดใช้โมเดลมัลติโมดัลในอุปกรณ์โดยตั้งค่า Flag ต่อไปนี้

   • chrome://flags/#prompt-api-for-gemini-nano-multimodal-input: ตั้งค่าเป็นเปิดใช้

4. ยืนยัน API ในเครื่องโดยทำดังนี้

   1. รีสตาร์ท Chrome

   2. เปิดเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ > คอนโซล

   3. เรียกใช้คำสั่งต่อไปนี้

      await LanguageModel.availability();
      

   4. ตรวจสอบว่าเอาต์พุตคือ available, downloading หรือ downloadable .

   5. หากเอาต์พุตคือ downloadable คุณสามารถเริ่มดาวน์โหลดโมเดลได้โดยเรียกใช้ await LanguageModel.create(); ไม่เช่นนั้น คำขอแรกสําหรับการอนุมานในอุปกรณ์จะเริ่มการดาวน์โหลดโมเดลในเบื้องหลัง ซึ่งอาจใช้เวลาหลายนาที

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

1. ลงชื่อเข้าใช้คอนโซล Firebase แล้วเลือกโปรเจ็กต์ Firebase

   หากยังไม่มีโปรเจ็กต์ Firebase

   หากยังไม่มีโปรเจ็กต์ Firebase ให้คลิกสร้างโปรเจ็กต์ แล้วใช้ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

   • ตัวเลือกที่ 1: สร้างโปรเจ็กต์ Firebase ใหม่ทั้งหมด (และโปรเจ็กต์Google Cloudที่เกี่ยวข้องโดยอัตโนมัติ) โดยป้อนชื่อโปรเจ็กต์ใหม่ในขั้นตอนแรกของเวิร์กโฟลว์ "สร้างโปรเจ็กต์"

   • ตัวเลือกที่ 2: "เพิ่ม Firebase" ลงในโปรเจ็กต์ Google Cloud ที่มีอยู่โดยเลือกชื่อโปรเจ็กต์ Google Cloud จากเมนูแบบเลื่อนลงในขั้นตอนแรกของเวิร์กโฟลว์ "สร้างโปรเจ็กต์"

   โปรดทราบว่าเมื่อได้รับข้อความแจ้ง คุณไม่จําเป็นต้องตั้งค่า Google Analytics เพื่อใช้ Firebase AI Logic SDK

2. ในคอนโซล Firebase ให้ไปที่หน้า Firebase AI Logic

3. คลิกเริ่มต้นใช้งานเพื่อเปิดเวิร์กโฟลว์แบบมีคําแนะนําซึ่งจะช่วยคุณตั้งค่าAPI ที่จําเป็นและแหล่งข้อมูลสําหรับโปรเจ็กต์

4. เลือกผู้ให้บริการ "Gemini API" ที่ต้องการใช้กับ Firebase AI LogicSDK คุณตั้งค่าและใช้ผู้ให้บริการ API รายอื่นในภายหลังได้เสมอ หากต้องการ

   • Gemini Developer API — การเรียกเก็บเงินไม่บังคับ (มีให้ใช้งานในแพ็กเกจราคาแบบไม่มีค่าใช้จ่ายของ Spark)
     คอนโซลจะเปิดใช้ API ที่จำเป็นและสร้างGeminiคีย์ API ในโปรเจ็กต์
     อย่าเพิ่มคีย์ Gemini API นี้ลงในโค้ดเบสของแอป ดูข้อมูลเพิ่มเติม

     คุณตั้งค่าการเรียกเก็บเงินในภายหลังได้หากต้องการอัปเกรดแพ็กเกจราคา

   • Vertex AI Gemini API — ต้องมีการเรียกเก็บเงิน (ต้องใช้แพ็กเกจราคาแบบชําระเงินตามการใช้งาน Blaze)
     คอนโซลจะช่วยคุณตั้งค่าการเรียกเก็บเงินและเปิดใช้ API ที่จําเป็นในโปรเจ็กต์

5. หากได้รับข้อความแจ้งในเวิร์กโฟลว์ของคอนโซล ให้ทําตามวิธีการบนหน้าจอเพื่อลงทะเบียนแอปและเชื่อมต่อกับ Firebase

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

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

ไลบรารี Firebase ให้สิทธิ์เข้าถึง API สําหรับการโต้ตอบกับโมเดล Generative ไลบรารีนี้รวมอยู่ใน Firebase JavaScript SDK สําหรับเว็บ

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

   ฟีเจอร์แบบผสมจะเผยแพร่ภายใต้แท็ก npm อื่น ดังนั้นโปรดตรวจสอบว่าได้รวมไว้ในคำสั่งการติดตั้งแล้ว

   npm install firebase@eap-ai-hybridinference
   

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);
   

ขั้นตอนที่ 4: เริ่มต้นบริการและสร้างอินสแตนซ์โมเดล

ก่อนส่งพรอมต์ไปยังโมเดล Gemini ให้เริ่มต้นบริการสําหรับผู้ให้บริการ API ที่เลือกและสร้างอินสแตนซ์ GenerativeModel

ตั้งค่า mode เป็นค่าใดค่าหนึ่งต่อไปนี้

• prefer_on_device: กําหนดค่า SDK ให้ใช้โมเดลในอุปกรณ์หากมี หรือเปลี่ยนไปใช้โมเดลที่โฮสต์ในระบบคลาวด์

• only_on_device: กําหนดค่า SDK ให้ใช้รูปแบบในอุปกรณ์หรือยกเว้นข้อยกเว้น

• only_in_cloud: กําหนดค่า SDK ไม่ให้ใช้โมเดลในอุปกรณ์

โดยค่าเริ่มต้นเมื่อคุณใช้ prefer_on_device หรือ only_in_cloud รูปแบบที่โฮสต์ในระบบคลาวด์จะเป็น gemini-2.0-flash-lite แต่คุณลบล้างค่าเริ่มต้นได้

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend } from "firebase/ai";

// 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 Gemini Developer API backend service
const ai = getAI(firebaseApp, { backend: new GoogleAIBackend() });

// Create a `GenerativeModel` instance
// Set the mode, for example to use on-device model when possible
const model = getGenerativeModel(ai, { mode: "prefer_on_device" });

ส่งคําขอพรอมต์ไปยังโมเดล

ส่วนนี้จะแสดงตัวอย่างวิธีส่งอินพุตประเภทต่างๆ เพื่อสร้างเอาต์พุตประเภทต่างๆ ซึ่งรวมถึง

• สร้างข้อความจากอินพุตที่เป็นข้อความเท่านั้น
• สร้างข้อความจากอินพุตแบบข้อความและรูปภาพ (มัลติโมดัล)

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

สร้างข้อความจากอินพุตที่เป็นข้อความเท่านั้น

คุณสามารถใช้ generateContent() เพื่อสร้างข้อความจากพรอมต์ที่มีข้อความ ดังนี้

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// 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();

สร้างข้อความจากอินพุตแบบข้อความและรูปภาพ (หลายรูปแบบ)

คุณสามารถใช้ generateContent() เพื่อสร้างข้อความจากพรอมต์ที่มีไฟล์ข้อความและรูปภาพ โดยระบุ mimeType ของไฟล์อินพุตแต่ละไฟล์และไฟล์นั้นๆ

ประเภทรูปภาพอินพุตที่รองรับสำหรับการอนุมานบนอุปกรณ์ ได้แก่ PNG และ JPEG

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Converts a File object to a Part object.
async function fileToGenerativePart(file) {
  const base64EncodedDataPromise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
    reader.readAsDataURL(file);
  });
  return {
    inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
  };
}

async function run() {
  // Provide a text prompt to include with the image
  const prompt = "Write a poem about this picture:";

  const fileInputEl = document.querySelector("input[type=file]");
  const imagePart = await fileToGenerativePart(fileInputEl.files[0]);

  // To generate text output, call `generateContent` with the text and image
  const result = await model.generateContent([prompt, imagePart]);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();

คุณทำอะไรได้อีกบ้าง

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

ใช้โหมดการอนุมานอื่น

ตัวอย่างข้างต้นใช้โหมด prefer_on_device เพื่อกําหนดค่า SDK ให้ใช้โมเดลในอุปกรณ์หากมี หรือเปลี่ยนไปใช้โมเดลที่โฮสต์ในระบบคลาวด์ SDK มีโหมดการอนุมานทางเลือก 2 แบบ ได้แก่ only_on_device และ only_in_cloud

• ใช้โหมด only_on_device เพื่อให้ SDK ใช้โมเดลในอุปกรณ์ได้เท่านั้น ในการกำหนดค่านี้ API จะแสดงข้อผิดพลาดหากไม่มีรูปแบบในอุปกรณ์

  const model = getGenerativeModel(ai, { mode: "only_on_device" });
  

• ใช้โหมด only_in_cloud เพื่อให้ SDK ใช้โมเดลที่โฮสต์ในระบบคลาวด์ได้เท่านั้น

  const model = getGenerativeModel(ai, { mode: "only_in_cloud" });
  

ลบล้างรูปแบบสำรองเริ่มต้น

เมื่อคุณใช้โหมด prefer_on_device SDK จะเปลี่ยนไปใช้โมเดลที่โฮสต์ในระบบคลาวด์หากโมเดลในอุปกรณ์ไม่พร้อมใช้งาน รูปแบบเริ่มต้นที่โฮสต์ในระบบคลาวด์คือ gemini-2.0-flash-lite โมเดลที่โฮสต์บนระบบคลาวด์นี้ยังเป็นโมเดลเริ่มต้นเมื่อคุณใช้โหมดonly_in_cloud ด้วย

คุณสามารถใช้ตัวเลือกการกําหนดค่า inCloudParams เพื่อระบุรูปแบบที่โฮสต์ในระบบคลาวด์เริ่มต้นอื่นได้ ดังนี้

const model = getGenerativeModel(ai, {
  mode: 'prefer_on_device',
  inCloudParams: {
    model: "gemini-2.0-flash"
  }
});

ดูชื่อรุ่นของรุ่น Gemini ที่รองรับทั้งหมด

ใช้การกําหนดค่าโมเดลเพื่อควบคุมคําตอบ

ในคําขอแต่ละรายการที่ส่งไปยังโมเดล คุณสามารถส่งการกําหนดค่าโมเดลไปด้วยเพื่อควบคุมวิธีสร้างคําตอบของโมเดล รุ่นที่โฮสต์ในระบบคลาวด์และรุ่นในอุปกรณ์มีตัวเลือกการกำหนดค่าที่แตกต่างกัน

การกำหนดค่าจะคงอยู่ตลอดอายุการใช้งานของอินสแตนซ์ หากต้องการใช้การกําหนดค่าอื่น ให้สร้างอินสแตนซ์ GenerativeModel ใหม่โดยใช้การกําหนดค่านั้น

ตั้งค่าการกําหนดค่าสําหรับโมเดลที่โฮสต์บนระบบคลาวด์

ใช้ตัวเลือก inCloudParams เพื่อกําหนดค่าโมเดล Gemini ที่โฮสต์บนระบบคลาวด์ ดูข้อมูลเกี่ยวกับพารามิเตอร์ที่ใช้ได้

const model = getGenerativeModel(ai, {
  mode: 'prefer_on_device',
  inCloudParams: {
    model: "gemini-2.0-flash"
    temperature: 0.8,
    topK: 10
  }
});

ตั้งค่าการกําหนดค่าสําหรับรูปแบบในอุปกรณ์

โปรดทราบว่าการอนุมานโดยใช้โมเดลในอุปกรณ์จะใช้ Prompt API จาก Chrome

ใช้ตัวเลือก onDeviceParams เพื่อกําหนดค่าโมเดลในอุปกรณ์ ดูข้อมูลเกี่ยวกับพารามิเตอร์ที่ใช้ได้

const model = getGenerativeModel(ai, {
  mode: 'prefer_on_device',
  onDeviceParams: {
    createOptions: {
      temperature: 0.8,
      topK: 8
    }
  }
});

ตั้งค่าการกําหนดค่าสําหรับเอาต์พุตที่มีโครงสร้าง

ระบบรองรับการสร้างเอาต์พุตที่มีโครงสร้าง (เช่น JSON และลิสต์แบบจำกัด) สําหรับการอนุมานโดยใช้ทั้งโมเดลที่โฮสต์บนระบบคลาวด์และในอุปกรณ์

สําหรับการอนุมานแบบผสม ให้ใช้ทั้ง inCloudParams และ onDeviceParams เพื่อกําหนดค่าโมเดลให้ตอบกลับด้วยเอาต์พุตที่มีโครงสร้าง สำหรับโหมดอื่นๆ ให้ใช้เฉพาะการกำหนดค่าที่เกี่ยวข้อง

• สําหรับ inCloudParams: ระบุ responseMimeType ที่เหมาะสม (ในตัวอย่างนี้คือ application/json) รวมถึง responseSchema ที่ต้องการให้โมเดลใช้

• สําหรับ onDeviceParams: ระบุ responseConstraint ที่ต้องการให้โมเดลใช้

เอาต์พุต JSON

ตัวอย่างต่อไปนี้ปรับตัวอย่างเอาต์พุต JSON ทั่วไปสําหรับการอนุมานแบบผสม

import {
  getAI,
  getGenerativeModel,
  Schema
} from "firebase/ai";

const jsonSchema = Schema.object({
 properties: {
    characters: Schema.array({
      items: Schema.object({
        properties: {
          name: Schema.string(),
          accessory: Schema.string(),
          age: Schema.number(),
          species: Schema.string(),
        },
        optionalProperties: ["accessory"],
      }),
    }),
  }
});

const model = getGenerativeModel(ai, {
  mode: 'prefer_on_device',
  inCloudParams: {
    model: "gemini-2.0-flash"
    generationConfig: {
      responseMimeType: "application/json",
      responseSchema: jsonSchema
    },
  }
  onDeviceParams: {
    promptOptions: {
      responseConstraint: jsonSchema
    }
  }
});

เอาต์พุต Enum

เช่นเดียวกับด้านบน แต่ปรับเอกสารประกอบเกี่ยวกับเอาต์พุต enum สำหรับการอนุมานแบบผสม

// ...

const enumSchema = Schema.enumString({
  enum: ["drama", "comedy", "documentary"],
});

const model = getGenerativeModel(ai, {

// ...

    generationConfig: {
      responseMimeType: "text/x.enum",
      responseSchema: enumSchema
    },

// ...

ฟีเจอร์ยังไม่พร้อมใช้งานสำหรับการอนุมานในอุปกรณ์

เนื่องจากเป็นรุ่นทดลอง ความสามารถบางอย่างของ Web SDK จึงใช้ไม่ได้กับการอนุมานในอุปกรณ์ ฟีเจอร์ต่อไปนี้ยังไม่รองรับการอนุมานในอุปกรณ์ (แต่มักจะรองรับการอนุมานบนระบบคลาวด์)

• การสร้างข้อความจากประเภทอินพุตไฟล์รูปภาพอื่นๆ นอกเหนือจาก JPEG และ PNG

  • สามารถใช้โมเดลที่โฮสต์บนระบบคลาวด์ได้ แต่โหมด only_on_device จะแสดงข้อผิดพลาด

• การสร้างข้อความจากอินพุตเสียง วิดีโอ และเอกสาร (เช่น PDF)

  • สามารถใช้โมเดลที่โฮสต์บนระบบคลาวด์ได้ แต่โหมด only_on_device จะแสดงข้อผิดพลาด

• การสร้างรูปภาพโดยใช้โมเดล Gemini หรือ Imagen

  • สามารถใช้โมเดลที่โฮสต์บนระบบคลาวด์ได้ แต่โหมด only_on_device จะแสดงข้อผิดพลาด

• การส่งไฟล์โดยใช้ URL ในคำขอแบบหลายรูปแบบ คุณต้องส่งไฟล์เป็นข้อมูลในบรรทัดไปยังโมเดลในอุปกรณ์

• แชทแบบหลายรอบ

  • สามารถใช้โมเดลที่โฮสต์บนระบบคลาวด์ได้ แต่โหมด only_on_device จะแสดงข้อผิดพลาด

• สตรีมแบบ 2 ทิศทางด้วย Gemini Live API

  • โปรดทราบว่าFirebase AI Logic SDK ของไคลเอ็นต์สําหรับเว็บไม่รองรับการดำเนินการนี้ แม้แต่ในรุ่นที่โฮสต์ในระบบคลาวด์

• การเรียกใช้ฟังก์ชัน

  • พร้อมใช้งานเร็วๆ นี้

• นับโทเค็น

  • แสดงข้อผิดพลาดเสมอ จํานวนจะแตกต่างกันระหว่างรูปแบบที่โฮสต์ในระบบคลาวด์กับในอุปกรณ์ จึงไม่มีการแสดงผลสำรองที่ใช้งานง่าย

• การตรวจสอบ AI ในคอนโซล Firebase สําหรับการอนุมานในอุปกรณ์

  • โปรดทราบว่าสามารถตรวจสอบการอนุมานโดยใช้โมเดลที่โฮสต์ในระบบคลาวด์ได้เช่นเดียวกับการอนุมานอื่นๆ โดยใช้ Firebase AI LogicSDK ของไคลเอ็นต์สําหรับเว็บ

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