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

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

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

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

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

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

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

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

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

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

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

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

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

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

• การสร้างข้อความจากอินพุตข้อความและรูปภาพ โดยเฉพาะ รูปภาพอินพุตประเภท JPEG และ PNG

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

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

โปรดทราบข้อมูลต่อไปนี้

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

• หน้านี้อธิบายวิธีเริ่มต้นพัฒนาโดยใช้ localhost (ดูข้อมูล เพิ่มเติมเกี่ยวกับการ ใช้ API ใน localhost ได้ในเอกสารประกอบของ Chrome)

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

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

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

ขั้นตอนที่ 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 แต่โมเดลในอุปกรณ์จะไม่พร้อมใช้งานโดยค่าเริ่มต้น หากคุณยังไม่ได้ดาวน์โหลดโมเดลก่อนส่งคำขอแรกสำหรับการอนุมานในอุปกรณ์ คำขอจะเริ่มดาวน์โหลดโมเดลในเบื้องหลังโดยอัตโนมัติ

   ดูวิธีการดาวน์โหลดโมเดลในอุปกรณ์

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

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

      await LanguageModel.availability();
      

   3. ตรวจสอบว่าเอาต์พุตเป็น available, downloading หรือ downloadable

   4. หากเอาต์พุตเป็น downloadable ให้เริ่มดาวน์โหลดโมเดลโดยเรียกใช้คำสั่งต่อไปนี้

      await LanguageModel.create();
      

   5. คุณสามารถใช้การเรียกกลับ monitor ต่อไปนี้เพื่อฟังความคืบหน้าในการดาวน์โหลดและตรวจสอบว่าโมเดล available ก่อนส่งคำขอ

      const session = await LanguageModel.create({
        monitor(m) {
          m.addEventListener("downloadprogress", (e) => {
            console.log(`Downloaded ${e.loaded * 100}%`);
          });
        },
      });
      

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

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

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

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

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

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

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

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

   ตั้งแต่ต้นเดือนกรกฎาคม 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 } 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 สำหรับการพัฒนาในเครื่อง

ตั้งแต่ต้นเดือนกรกฎาคม 2026 เป็นต้นไป ระบบจะบังคับใช้ Firebase App Check โดยอัตโนมัติเพื่อปกป้อง Gemini API ซึ่งเป็นส่วนหนึ่งของเวิร์กโฟลว์การตั้งค่าแบบมีคำแนะนำสำหรับ AI Logic ในคอนโซล สำหรับการพัฒนาในเครื่อง คุณต้องกำหนดค่า 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. ค้นหาแอป คลิกเมนูรายการเพิ่มเติม (more_vert) แล้วเลือก จัดการโทเค็นการแก้ไขข้อบกพร่อง

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

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

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

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

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

เธอทำอะไรได้อีกบ้าง

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

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

• ลบล้างโมเดลสำรองที่โฮสต์ในระบบคลาวด์เริ่มต้น

• ใช้การกำหนดค่าโมเดลเพื่อควบคุมคำตอบ (เช่น อุณหภูมิ)

• สร้างเอาต์พุตที่มีโครงสร้าง (เช่น JSON)

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

ความสามารถบางอย่างของ 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 Logic Client SDK สำหรับเว็บ

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