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

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

หน้านี้อธิบายวิธีเริ่มต้นใช้งาน 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 เวอร์ชัน 139 ขึ้นไป

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. คุณสามารถใช้ Callback 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 Cloud (ที่ด้านล่างของหน้า) ในขั้นตอนแรกของเวิร์กโฟลว์ ให้เริ่มป้อนชื่อโปรเจ็กต์ของโปรเจ็กต์ที่มีอยู่ แล้วเลือกโปรเจ็กต์จากรายการที่แสดง

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

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. ค้นหาแอปของคุณ คลิกเมนูรายการเพิ่มเติม (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 {
    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) ด้วย

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• นับโทเค็น

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

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

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

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