หน้านี้ได้รับการแปลโดย Cloud Translation API

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

เวอร์ชันทดลอง: การใช้ SDK ของ Firebase AI Logic เพื่อสร้างประสบการณ์แบบผสมเป็นฟีเจอร์เวอร์ชันทดลอง ซึ่งหมายความว่าจะไม่อยู่ภายใต้นโยบาย SLA หรือนโยบายการเลิกใช้งานใดๆ และอาจมีการเปลี่ยนแปลงในแบบที่เข้ากันไม่ได้กับเวอร์ชันก่อน

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

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

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

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

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

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

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

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

การสร้างเนื้อหาแบบครั้งเดียว สตรีมมิง และแบบไม่สตรีมมิง
การสร้างข้อความจากอินพุตที่เป็นข้อความเท่านั้น
การสร้างข้อความจากอินพุตข้อความและรูปภาพ โดยเฉพาะอินพุตรูปภาพประเภท JPEG และ PNG
การสร้างเอาต์พุตที่มีโครงสร้าง รวมถึง JSON และการแจงนับ

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

คู่มือนี้แสดงวิธีเริ่มต้นใช้งาน Firebase AI Logic SDK สำหรับ เว็บเพื่อทำการอนุมานแบบไฮบริด

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

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

ดาวน์โหลดบิลด์ Chrome เบต้า ล่าสุด

การอนุมานในอุปกรณ์พร้อมใช้งานใน Chrome v138 ขึ้นไป
เปิดใช้ Prompt API สำหรับอินสแตนซ์ Chrome โดยตั้งค่าฟีเจอร์ต่อไปนี้
- chrome://flags/#optimization-guide-on-device-model: ตั้งค่าเป็นเปิดใช้
- chrome://flags/#prompt-api-for-gemini-nano: ตั้งค่าเป็นเปิดใช้
ดูข้อมูลเพิ่มเติมเกี่ยวกับ การใช้ API ใน localhost ได้ในเอกสารประกอบของ Chrome หรือจะเข้าร่วมโปรแกรมทดลองใช้รุ่นแรก (EPP) ของ Chrome เพื่อแสดงความคิดเห็นก็ได้
เปิดใช้โมเดลมัลติโมดัลในอุปกรณ์โดยตั้งค่าสถานะต่อไปนี้
- chrome://flags/#prompt-api-for-gemini-nano-multimodal-input: ตั้งค่าเป็นเปิดใช้
ยืนยัน API ในเครื่องโดยทำดังนี้
1. รีสตาร์ท Chrome
2. เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ > คอนโซล
3. เรียกใช้คำสั่งต่อไปนี้
```
await LanguageModel.availability();
```
4. ตรวจสอบว่าเอาต์พุตเป็น available, downloading หรือ downloadable .
5. หากเอาต์พุตเป็น downloadable คุณจะเริ่มดาวน์โหลดโมเดลได้โดย เรียกใช้ await LanguageModel.create(); ไม่เช่นนั้น คำขอแรก สำหรับการอนุมานในอุปกรณ์จะเริ่มดาวน์โหลดโมเดลในเบื้องหลัง ซึ่งอาจใช้เวลาหลายนาที

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

ลงชื่อเข้าใช้คอนโซล Firebase แล้วเลือกโปรเจ็กต์ Firebase
หากยังไม่มีโปรเจ็กต์ Firebase

หากยังไม่มีโปรเจ็กต์ Firebase ให้คลิกสร้างโปรเจ็กต์ แล้ว ใช้ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้
- ตัวเลือกที่ 1: สร้างโปรเจ็กต์ Firebase ใหม่ทั้งหมด (และโปรเจ็กต์พื้นฐาน Google Cloudโดยอัตโนมัติ) โดยป้อนชื่อโปรเจ็กต์ใหม่ใน ขั้นตอนแรกของเวิร์กโฟลว์ "สร้างโปรเจ็กต์"
- ตัวเลือกที่ 2: "เพิ่ม Firebase" ลงในโปรเจ็กต์ Google Cloud ที่มีอยู่โดย เลือกชื่อโปรเจ็กต์ Google Cloud จากเมนูแบบเลื่อนลงใน ขั้นตอนแรกของเวิร์กโฟลว์ "สร้างโปรเจ็กต์"
โปรดทราบว่าเมื่อได้รับแจ้ง คุณไม่จำเป็นต้องตั้งค่า Google Analytics เพื่อใช้ Firebase AI Logic SDK
ในFirebase Console ให้ไปที่หน้า Firebase AI Logic
คลิกเริ่มต้นใช้งานเพื่อเปิดเวิร์กโฟลว์แบบมีคำแนะนำที่จะช่วยคุณตั้งค่า API ที่จำเป็น และทรัพยากรสำหรับโปรเจ็กต์
เลือกผู้ให้บริการ "Gemini API" ที่ต้องการใช้กับ SDK ของ Firebase AI Logic คุณตั้งค่าและใช้ผู้ให้บริการ API รายอื่นได้ทุกเมื่อในภายหลัง หากต้องการ
- Gemini Developer API — การเรียกเก็บเงินเป็นทางเลือก (พร้อมใช้งานในแพ็กเกจราคา Spark แบบไม่มีค่าใช้จ่าย และคุณสามารถอัปเกรดในภายหลังได้หาก ต้องการ)
  คอนโซลจะเปิดใช้ API ที่จำเป็นและสร้างGeminiคีย์ API ในโปรเจ็กต์
  อย่าเพิ่มGeminiคีย์ API นี้ลงในโค้ดเบสของแอป ดูข้อมูลเพิ่มเติม
- Vertex AI Gemini API — ต้องมีการเรียกเก็บเงิน (ต้องใช้แพ็กเกจราคา Blaze แบบจ่ายตามการใช้งาน)
  คอนโซลจะช่วยคุณตั้งค่าการเรียกเก็บเงินและเปิดใช้ API ที่จำเป็นในโปรเจ็กต์
หากได้รับแจ้งในเวิร์กโฟลว์ของคอนโซล ให้ทำตามวิธีการบนหน้าจอเพื่อ ลงทะเบียนแอปและเชื่อมต่อกับ Firebase
ทําตามขั้นตอนถัดไปในคู่มือนี้เพื่อเพิ่ม SDK ลงในแอป

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

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

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

ฟีเจอร์ไฮบริดจะเผยแพร่ภายใต้แท็ก npm อื่น ดังนั้นโปรดตรวจสอบว่าได้ รวมไว้ในคำสั่งการติดตั้งแล้ว
```
npm install firebase@eap-ai-hybridinference
```

เริ่มต้น 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 เพื่อดูเนื้อหาและโค้ดของผู้ให้บริการนั้นๆ ในหน้านี้

ก่อนส่งพรอมต์ไปยังโมเดล Gemini ให้เริ่มต้นบริการสำหรับ ผู้ให้บริการ API ที่คุณเลือกและสร้างอินสแตนซ์ GenerativeModel

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

prefer_on_device: กำหนดค่า SDK ให้ใช้โมเดลในอุปกรณ์หากมี หรือเปลี่ยนไปใช้โมเดลที่โฮสต์ในระบบคลาวด์
only_on_device: กำหนดค่า SDK ให้ใช้โมเดลในอุปกรณ์หรือส่งข้อยกเว้น
only_in_cloud: กำหนดค่า SDK ไม่ให้ใช้โมเดลในอุปกรณ์

โดยค่าเริ่มต้นเมื่อใช้ prefer_on_device หรือ only_in_cloud โมเดลที่โฮสต์ในระบบคลาวด์จะเป็น gemini-2.0-flash-lite แต่คุณลบล้างค่าเริ่มต้นได้

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend } 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 to use on-device model when possible
const model = getGenerativeModel(ai, { mode: "prefer_on_device" });

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

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

สร้างข้อความจากอินพุตที่เป็นข้อความเท่านั้น
สร้างข้อความจากอินพุตข้อความและรูปภาพ (มัลติโมดัล)

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

สร้างข้อความจากอินพุตข้อความและรูปภาพ (มัลติโมดัล)

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

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

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

ใช้โหมดการอนุมานทางเลือก

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

ใช้โหมด only_on_device เพื่อให้ SDK ใช้ได้เฉพาะโมเดลในอุปกรณ์ ในการกำหนดค่านี้ API จะแสดงข้อผิดพลาดหากโมเดลในอุปกรณ์ ไม่พร้อมใช้งาน
```
const model = getGenerativeModel(ai, { mode: "only_on_device" });
```
ใช้only_in_cloudโหมดเพื่อให้ SDK ใช้ได้เฉพาะโมเดลที่โฮสต์ในระบบคลาวด์
```
const model = getGenerativeModel(ai, { mode: "only_in_cloud" });
```

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

เมื่อคุณใช้โหมด prefer_on_device SDK จะเปลี่ยนไปใช้โมเดลที่โฮสต์ในระบบคลาวด์หากโมเดลในอุปกรณ์ไม่พร้อมใช้งาน โมเดลสำรองที่โฮสต์ในระบบคลาวด์เริ่มต้นคือ gemini-2.0-flash-lite โมเดลที่โฮสต์บนระบบคลาวด์นี้ยังเป็นค่าเริ่มต้นเมื่อคุณใช้โหมดonly_in_cloudด้วย

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

const model = getGenerativeModel(ai, {
  mode: 'prefer_on_device',
  inCloudParams: {
    model: "gemini-2.5-flash"
  }
});

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

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

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

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

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

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

const model = getGenerativeModel(ai, {
  mode: 'prefer_on_device',
  inCloudParams: {
    model: "gemini-2.5-flash"
    temperature: 0.8,
    topK: 10
  }
});

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

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

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

const model = getGenerativeModel(ai, {
  mode: 'prefer_on_device',
  onDeviceParams: {
    createOptions: {
      temperature: 0.8,
      topK: 8
    }
  }
});

ตั้งค่าเอาต์พุตที่มีโครงสร้าง

ระบบรองรับการสร้างเอาต์พุตที่มีโครงสร้าง (เช่น 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: 'prefer_on_device',
  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
- โปรดทราบว่า Firebase AI Logicไคลเอ็นต์ SDK สำหรับเว็บ ไม่รองรับแม้แต่โมเดลที่โฮสต์ในระบบคลาวด์
การเรียกใช้ฟังก์ชัน
- พร้อมใช้งานเร็วๆ นี้
นับโทเค็น
- แสดงข้อผิดพลาดเสมอ จำนวนจะแตกต่างกันระหว่างโมเดลที่โฮสต์ในระบบคลาวด์และโมเดลในอุปกรณ์ จึงไม่มีการเปลี่ยนไปใช้โมเดลอื่นโดยอัตโนมัติ
การตรวจสอบ AI ในคอนโซล Firebase สำหรับการอนุมานในอุปกรณ์
- โปรดทราบว่าการอนุมานใดๆ ที่ใช้โมเดลที่โฮสต์ในระบบคลาวด์จะได้รับการตรวจสอบเช่นเดียวกับการอนุมานอื่นๆ ที่ใช้ Firebase AI LogicSDK ของไคลเอ็นต์สำหรับเว็บ

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