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


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

หน้านี้อธิบายวิธี เริ่มต้นใช้งาน Client SDK รวมถึงแสดง ตัวเลือกการกำหนดค่าและความสามารถเพิ่มเติม เช่น เอาต์พุตที่มีโครงสร้าง

โปรดทราบว่าระบบรองรับการอนุมานในอุปกรณ์สำหรับเว็บแอปที่ทำงานใน Chrome บนเดสก์ท็อป

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

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

กรณีการใช้งานที่แนะนำ

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

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

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

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

ก่อนเริ่มต้น

ข้อควรทราบมีดังนี้

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

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

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

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

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

    • chrome://flags/#prompt-api-for-gemini-nano-multimodal-input
  3. รีสตาร์ท Chrome

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

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

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

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

  2. ในFirebase Console ให้ไปที่หน้า Firebase AI Logic

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

  4. ตั้งค่าโปรเจ็กต์ให้ใช้ผู้ให้บริการ "Gemini API"

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

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

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

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

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

ไลบรารี Firebase ให้สิทธิ์เข้าถึง API สำหรับการโต้ตอบกับโมเดล Generative ไลบรารีนี้รวมอยู่ใน 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);
    

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

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

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

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

  2. สร้างอินสแตนซ์ GenerativeModel โปรดทำดังนี้

    1. เรียกใช้ getGenerativeModel หลังจากหรือเมื่อมีการโต้ตอบของผู้ใช้ปลายทาง (เช่น การคลิกปุ่ม) นี่คือข้อกำหนดเบื้องต้นสำหรับ inferenceMode

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

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

      • ONLY_ON_DEVICE: ใช้โมเดลในอุปกรณ์หากมี มิฉะนั้น throw an exception

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

      • ONLY_IN_CLOUD: ใช้โมเดลที่โฮสต์ในระบบคลาวด์หากมี มิฉะนั้น throw an exception

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
// Call `getGenerativeModel` after or on an end-user interaction
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

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

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

หากต้องการสร้างเอาต์พุตที่มีโครงสร้าง (เช่น 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();

โปรดทราบว่า 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 {
    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) ด้วย

อนุญาตให้ผู้ใช้ปลายทางทดลองใช้ฟีเจอร์ของคุณ

หากต้องการให้ผู้ใช้ปลายทางลองใช้ฟีเจอร์ในแอป คุณต้องลงทะเบียนใน Chrome Origin Trials โปรดทราบว่าการทดลองใช้เหล่านี้มีระยะเวลาและการใช้งานแบบจำกัด

  1. ลงทะเบียนเพื่อเข้าร่วมช่วงทดลองใช้ Prompt API จากต้นทางของ Chrome คุณจะได้รับโทเค็น

  2. ระบุโทเค็นในทุกหน้าเว็บที่คุณต้องการเปิดใช้ฟีเจอร์ทดลอง ใช้ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

    • ระบุโทเค็นเป็นเมตาแท็กในแท็ก <head> ดังนี้ <meta http-equiv="origin-trial" content="TOKEN">

    • ระบุโทเค็นเป็นส่วนหัว HTTP ดังนี้ Origin-Trial: TOKEN

    • ระบุโทเค็นแบบเป็นโปรแกรม

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

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

ตั้งค่าโหมดการอนุมาน

ตัวอย่างในการตั้งค่าทั่วไปใช้โหมด PREFER_ON_DEVICE แต่โหมดนี้เป็นเพียงหนึ่งในสี่โหมดการอนุมานที่มีให้ใช้งาน เท่านั้น

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

    const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });
    
  • ONLY_ON_DEVICE: ใช้โมเดลในอุปกรณ์หากมี มิฉะนั้น throw an exception

    const model = getGenerativeModel(ai, { mode: InferenceMode.ONLY_ON_DEVICE });
    
  • PREFER_IN_CLOUD: ใช้โมเดลที่โฮสต์ในระบบคลาวด์หากมี มิฉะนั้น ให้กลับไปใช้โมเดลในอุปกรณ์

    const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_IN_CLOUD });
    
  • ONLY_IN_CLOUD: ใช้โมเดลที่โฮสต์ในระบบคลาวด์หากมี มิฉะนั้น throw an exception

    const model = getGenerativeModel(ai, { mode: InferenceMode.ONLY_IN_CLOUD });
    

พิจารณาว่าใช้การอนุมานบนอุปกรณ์หรือในระบบคลาวด์

หากคุณใช้โหมดการอนุมาน PREFER_ON_DEVICE หรือ PREFER_IN_CLOUD คุณอาจต้องทราบว่าใช้โหมดใดสำหรับคำขอที่กำหนด inferenceSourceพร็อพเพอร์ตี้ของการตอบกลับแต่ละรายการ (พร้อมใช้งานตั้งแต่ JS SDK v12.5.0) จะให้ข้อมูลนี้

เมื่อเข้าถึงพร็อพเพอร์ตี้นี้ ค่าที่แสดงผลจะเป็น ON_DEVICE หรือ IN_CLOUD

// ...

console.log('You used: ' + result.response.inferenceSource);

console.log(result.response.text());

ลบล้างโมเดลสำรองเริ่มต้น

โมเดลที่โฮสต์ในระบบคลาวด์เริ่มต้นคือ gemini-2.5-flash-lite (เริ่มจาก JS SDK v12.8.0)

โมเดลนี้เป็นโมเดลสำรองที่โฮสต์บนระบบคลาวด์เมื่อคุณใช้โหมด PREFER_ON_DEVICE นอกจากนี้ยังเป็นโมเดลเริ่มต้นเมื่อคุณใช้โหมด ONLY_IN_CLOUD หรือโหมด PREFER_IN_CLOUD

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

const model = getGenerativeModel(ai, {
  mode: InferenceMode.INFERENCE_MODE,
  inCloudParams: {
    model: "GEMINI_MODEL_NAME"
  }
});

ค้นหาชื่อโมเดลสำหรับ โมเดล Gemini ที่รองรับทั้งหมด

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

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

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

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

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

const model = getGenerativeModel(ai, {
  mode: InferenceMode.INFERENCE_MODE,
  inCloudParams: {
    model: "GEMINI_MODEL_NAME"
    temperature: 0.8,
    topK: 10
  }
});

ตั้งค่าสำหรับโมเดลในอุปกรณ์

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

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

const model = getGenerativeModel(ai, {
  mode: InferenceMode.INFERENCE_MODE,
  onDeviceParams: {
    createOptions: {
      temperature: 0.8,
      topK: 8
    }
  }
});

กำหนดค่าสำหรับเอาต์พุตที่มีโครงสร้าง (เช่น JSON)

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

สําหรับการอนุมานแบบไฮบริด ให้ใช้ทั้ง 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: InferenceMode.INFERENCE_MODE,
  inCloudParams: {
    model: "gemini-2.5-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

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

  • นับโทเค็น

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

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


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