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

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

หน้านี้อธิบายวิธีเริ่มต้นใช้งาน SDK ของไคลเอ็นต์ หลังจากตั้งค่ามาตรฐานนี้เสร็จแล้ว ให้ดูตัวเลือกและความสามารถในการกำหนดค่าเพิ่มเติม

โปรดทราบว่าระบบรองรับการอนุมานในอุปกรณ์ผ่าน Firebase AI Logic สำหรับเว็บแอปที่ใช้ Firebase AI Logic SDK เวอร์ชัน 12.5.0 ขึ้นไป และทำงานบน Chrome บนเดสก์ท็อป (เวอร์ชัน 139 ขึ้นไป)

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

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

คุณสามารถใช้ประโยชน์จากข้อดีหลายประการของประสบการณ์การใช้งานในอุปกรณ์หรือแบบผสมได้ ทั้งนี้ขึ้นอยู่กับกรณีการใช้งานของแอป

  • ประโยชน์ของการใช้โมเดลในอุปกรณ์สำหรับการอนุมานมีดังนี้

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

  • ประโยชน์ของการใช้แนวทางแบบผสม

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

ความสามารถในการอนุมานในอุปกรณ์ที่รองรับ

การอนุมานในอุปกรณ์รองรับเฉพาะการสร้างข้อความแบบเทิร์นเดียว (ไม่ใช่แชท) (ที่มีเอาต์พุตแบบสตรีมมิงหรือไม่สตรีมมิง) โดยเฉพาะความสามารถต่อไปนี้

อย่าลืมตรวจสอบรายการฟีเจอร์ที่ยังไม่รองรับสำหรับการอนุมานแบบไฮบริดหรือในอุปกรณ์ที่ด้านล่างของหน้านี้

API และแพลตฟอร์มที่รองรับ

ส่วนต่อไปนี้จะอธิบาย API ที่รองรับ รวมถึงแพลตฟอร์มและเบราว์เซอร์ที่รองรับ

API ที่รองรับสำหรับการอนุมานในระบบคลาวด์เทียบกับการอนุมานในอุปกรณ์

  • การอนุมานในระบบคลาวด์จะใช้ผู้ให้บริการ Gemini API ที่คุณเลือก (Gemini Developer API หรือ Agent Platform Gemini API (formerly Vertex AI))

  • การอนุมานในอุปกรณ์จะใช้ Prompt API จาก Chrome

แพลตฟอร์มและเบราว์เซอร์ที่รองรับ

สำหรับการอนุมานในอุปกรณ์ (ซึ่งใช้ Prompt API จาก Chrome) ผู้ใช้ปลายทางของแอปต้องใช้ Chrome บนเดสก์ท็อป (เวอร์ชัน 139 ขึ้นไป) ดูข้อมูลเพิ่มเติมในเอกสารประกอบของ Chrome

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

ขั้นตอนการเริ่มต้นใช้งานเหล่านี้จะอธิบายการตั้งค่าทั่วไปที่จำเป็นสำหรับคำขอพรอมต์ที่รองรับซึ่งคุณต้องการส่ง

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ API บน Localhost ได้ในเอกสารประกอบของ Chrome

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

  1. ตรวจสอบว่าคุณใช้ Chrome เวอร์ชันล่าสุดอยู่ อัปเดตใน chrome://settings/help
    การอนุมานในอุปกรณ์พร้อมใช้งานตั้งแต่ Chrome v139 ขึ้นไป

  2. เปิดใช้โมเดลหลายรูปแบบในอุปกรณ์โดยตั้งค่าแฟล็กต่อไปนี้เป็นเปิดใช้

    • chrome://flags/#prompt-api-for-gemini-nano-multimodal-input

  3. รีสตาร์ท Chrome

  4. (ไม่บังคับ) ดาวน์โหลดโมเดลในอุปกรณ์ก่อนส่งคำขอแรก

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

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

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

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

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

  4. หากได้รับข้อความแจ้ง ให้ทำตามวิธีการบนหน้าจอเพื่อลงทะเบียนแอปและเพิ่มการกำหนดค่า Firebase ลงในแอป

  5. เมื่อระบบขอให้เลือก "ผู้ให้บริการ Gemini API" เราขอแนะนำให้เลือก Gemini Developer API ซึ่งจะช่วยให้คุณเริ่มต้นใช้งานได้อย่างรวดเร็วโดยไม่มีค่าใช้จ่าย

    คุณสามารถตั้งค่า Agent Platform Gemini API (formerly Vertex AI) (และข้อกำหนดสำหรับการเรียกเก็บเงิน) ได้ทุกเมื่อในภายหลัง

  6. ดำเนินการต่อในเวิร์กโฟลว์เพื่อตั้งค่า API ที่จำเป็นและบริการที่เกี่ยวข้องสำหรับ Firebase AI Logic

    ขั้นตอนนี้ของเวิร์กโฟลว์จะบังคับใช้ Firebase App Check สำหรับ AI Logic โดยอัตโนมัติ ซึ่งเป็นบริการที่สำคัญในการช่วยปกป้อง Gemini API เมื่อมีการเข้าถึงโดยตรงจากแอปของคุณ ในการเริ่มต้นใช้งาน (ดูขั้นตอนต่อไปในคู่มือนี้) คุณจะต้องกำหนดค่าผู้ให้บริการแก้ไขข้อบกพร่อง App Check สำหรับการพัฒนาในเครื่องเมื่อมีการบังคับใช้ App Check

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

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

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

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

    npm install firebase

  2. เริ่มต้น Firebase ในแอปโดยทำดังนี้

    import { initializeApp } from "firebase/app";
import { initializeAppCheck } from "firebase/app-check";

// 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: กำหนดค่าผู้ให้บริการแก้ไขข้อบกพร่อง App Check สำหรับการพัฒนาในเครื่อง

ในขั้นตอนการตั้งค่าที่แนะนำสำหรับ AI Logic ในคอนโซล ระบบจะบังคับใช้ Firebase App Check โดยอัตโนมัติเพื่อปกป้อง Gemini API สำหรับการพัฒนาในเครื่อง คุณต้องกำหนดค่าApp Checkผู้ให้บริการแก้ไขข้อบกพร่องเพื่อข้ามการรับรองในขณะที่ยังคงบังคับใช้ App Check อยู่

วิธีใช้ผู้ให้บริการแก้ไขข้อบกพร่องขณะเรียกใช้แอปจาก localhost แบบอินเทอร์แอกทีฟ (เช่น ระหว่างการพัฒนาในเครื่อง) มีดังนี้

  1. ในบิลด์การแก้ไขข้อบกพร่อง ให้เปิดใช้โหมดแก้ไขข้อบกพร่องโดยตั้งค่า self.FIREBASE_APPCHECK_DEBUG_TOKEN เป็น true ก่อนเริ่มต้น App Check เช่น

    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
initializeAppCheck(firebaseApp, { /* App Check options */ });

  2. ไปที่เว็บแอปในเครื่องและเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ ในคอนโซลดีบัก คุณจะเห็นโทเค็นการแก้ไขข้อบกพร่อง ดังนี้

    AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
You will need to safelist it in the Firebase console for it to work.

  3. ลงทะเบียนโทเค็นการแก้ไขข้อบกพร่องกับ App Check โดยทำดังนี้

    1. ในคอนโซล Firebase ให้ไปที่ความปลอดภัย > App Check > แท็บแอป

    2. ค้นหาแอปของคุณ คลิกเมนูรายการเพิ่มเติม () แล้วเลือกจัดการโทเค็นการแก้ไขข้อบกพร่อง

    3. ทำตามวิธีการบนหน้าจอเพื่อลงทะเบียนโทเค็นการแก้ไขข้อบกพร่อง

ดูรายละเอียดเกี่ยวกับผู้ให้บริการแก้ไขข้อบกพร่อง (รวมถึงวิธีรับโทเค็นการแก้ไขข้อบกพร่องใหม่) ได้ที่เอกสารประกอบอย่างเป็นทางการของ App Check

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

คลิกผู้ให้บริการ Gemini API เพื่อดูเนื้อหาและโค้ดเฉพาะของผู้ให้บริการในหน้านี้

ตั้งค่าต่อไปนี้ก่อนส่งคำขอพรอมต์ไปยังโมเดล

  1. เริ่มต้นบริการสำหรับผู้ให้บริการ API ที่คุณเลือก

  2. สร้างอินสแตนซ์ GenerativeModel ตรวจสอบว่าได้ตั้งค่า mode เป็นค่าใดค่าหนึ่งต่อไปนี้

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

    • ONLY_ON_DEVICE: ใช้โมเดลในอุปกรณ์หากมี มิฉะนั้นให้แสดงข้อยกเว้น

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

    • ONLY_IN_CLOUD: ใช้โมเดลที่โฮสต์ในระบบคลาวด์หากมี มิฉะนั้นให้แสดงข้อยกเว้น

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend, InferenceMode } 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, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

ขั้นตอนที่ 6: เริ่มต้นโมเดลในอุปกรณ์

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

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend, InferenceMode } 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, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

// `initializeDeviceModel` must be called:
// (1) after or on an end-user page interaction such as a button click
// and
// (2) before any queries to the model (such as `generateContent()`)
// You may want to `await` this promise if using `ONLY_ON_DEVICE` (see note below).
model.initializeDeviceModel((val) =>
  // Example: "Download progress: 72.62%""
  console.log(`Download progress: ${Math.round(val*10000) / 100}%`)
);

ขั้นตอนที่ 7: ส่งคำขอพรอมต์ไปยังโมเดล

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

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

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

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

คุณสามารถใช้ 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();

โปรดทราบว่า Firebase AI Logic ยังรองรับการสตรีมคำตอบแบบข้อความโดยใช้ generateContentStream (แทน generateContent) ด้วย

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

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

คุณสามารถใช้ 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 {
    type: "inlineData",
    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();

โปรดทราบว่า Firebase AI Logic ยังรองรับการสตรีมคำตอบแบบข้อความโดยใช้ generateContentStream (แทน generateContent) ด้วย

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

คุณสามารถใช้ตัวเลือกและความสามารถในการกำหนดค่าเพิ่มเติมต่างๆ สำหรับประสบการณ์การใช้งานแบบผสมได้ดังนี้

ฟีเจอร์ที่ยังไม่รองรับ

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

ฟีเจอร์ที่ยังไม่รองรับสำหรับการติดตั้งใช้งานแบบผสม

ฟีเจอร์ต่อไปนี้ใช้กับการใช้งานแบบผสมไม่ได้ (ทั้งในอุปกรณ์และผ่านการสำรองข้อมูลในระบบคลาวด์)

  • Gemini Live API: ไม่รองรับการสตรีมแบบเรียลไทม์ 2 ทิศทาง

  • เทมเพลตพรอมต์ของเซิร์ฟเวอร์: ระบบไม่รองรับเทมเพลตพรอมต์ของเซิร์ฟเวอร์ที่มีการจัดการ

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

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

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

  • กำลังสร้างรูปภาพโดยใช้โมเดล Gemini Nano Banana

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

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

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

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

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

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

  • แชทแบบต่อเนื่อง

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

  • การจัดหาเครื่องมือให้โมเดลเพื่อช่วยสร้างคำตอบ (เช่น การเรียกใช้ฟังก์ชัน, การเรียกใช้โค้ด, บริบท URL, การอ้างอิงข้อมูลใน Google Search และการอ้างอิงข้อมูลใน Google Maps)

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

ข้อจำกัดเพิ่มเติม

นอกเหนือจากที่กล่าวมาข้างต้นแล้ว การอนุมานในอุปกรณ์ยังมีข้อจำกัดต่อไปนี้

  • ผู้ใช้ปลายทางของแอปต้องใช้ Chrome บนเดสก์ท็อป (เวอร์ชัน 139 ขึ้นไป) โดยเปิดใช้ Flag ที่จำเป็น

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


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