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

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

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

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

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

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

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

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

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

  • การใช้ข้อเสนอที่มีฟังก์ชันการทำงานแบบไฮบริด

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

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

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

นอกจากนี้ คุณยังสร้างเอาต์พุตที่มีโครงสร้างได้ด้วย ซึ่งรวมถึง JSON และการแจงนับ

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

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

เริ่มต้นใช้งาน 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คอนโซล ให้ไปที่บริการ AI > ตรรกะ AI

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

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

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

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

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

    ตั้งแต่ต้นเดือนกรกฎาคม 2026 เป็นต้นไป ขั้นตอนนี้ของเวิร์กโฟลว์จะบังคับใช้ 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, DebugProvider } 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);

ขั้นตอนที่ 3: กําหนดค่าผู้ให้บริการแก้ไขข้อบกพร่อง App Check สําหรับการพัฒนาในเครื่อง

ตั้งแต่ต้นเดือนกรกฎาคม 2026 เป็นต้นไป ในขั้นตอนการตั้งค่าที่แนะนำสำหรับ 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(app, { /* 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อย่างเป็นทางการ

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

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

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

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

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

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

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

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

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

คุณต้องเรียกใช้ 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}%`)
);

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

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

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

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

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

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

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

เนื่องจากเป็นรุ่นตัวอย่าง ความสามารถบางอย่างของ 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 และการอ้างอิงกับ Google Maps)

  • นับโทเค็น

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

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

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


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