การแจ้งเตือน AI แบบผสมด้วยตรรกะ AI ของ Firebase

Thomas Steiner

เผยแพร่: 20 พฤษภาคม 2025

หากต้องการตอบสนองความต้องการของผู้ใช้ ไม่ว่าผู้ใช้จะใช้แพลตฟอร์มหรือฮาร์ดแวร์ใด คุณสามารถตั้งค่า การสำรองข้อมูลไปยังระบบคลาวด์ด้วย Firebase AI Logic สำหรับ Prompt API ในตัวได้

สร้างประสบการณ์การใช้งาน AI แบบไฮบริด

AI ในตัวมาพร้อมสิทธิประโยชน์มากมาย ที่สำคัญที่สุดคือ

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

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

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

ดูวิธี สร้างโปรเจ็กต์ Firebase และเพิ่ม Firebase ลงในเว็บแอป

โปรเจ็กต์ Firebase คือโปรเจ็กต์ Google Cloud ที่มีการกำหนดค่าและบริการเฉพาะของ Firebase ดูข้อมูลเพิ่มเติมเกี่ยวกับ Google Cloud และ Firebase

ติดตั้ง SDK

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

  1. ติดตั้ง Firebase JS SDK โดยทำดังนี้

    npm install firebase

  2. เริ่มต้น Firebase ในแอปพลิเคชัน

ตั้งค่าและรักษาความปลอดภัย Firebase AI Logic

  1. ในคอนโซล Firebase ให้ไปที่บริการ AI > ตรรกะ AI

  2. คลิกเริ่มต้นใช้งานเพื่อเปิดเวิร์กโฟลว์การตั้งค่า

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

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

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

    ตั้งแต่ต้นเดือนกรกฎาคม 2026 เป็นต้นไป ขั้นตอนนี้ของเวิร์กโฟลว์จะบังคับใช้ Firebase App Check สำหรับตรรกะ AI โดยอัตโนมัติ ซึ่งเป็นบริการที่สําคัญที่จะช่วยปกป้อง Gemini API เมื่อมีการเข้าถึงโดยตรงจากแอปของคุณ ในขั้นตอนการเริ่มต้นใช้งาน (ดูขั้นตอนในส่วนต่อๆ ไปของคู่มือนี้) คุณจะต้องกําหนดค่าผู้ให้บริการแก้ไขข้อบกพร่องของ App Check สําหรับการพัฒนาในเครื่องเมื่อมีการบังคับใช้ App Check

  5. ไปที่ส่วนถัดไปในคู่มือนี้เพื่อกำหนดค่าผู้ให้บริการแก้ไขข้อบกพร่องของ App Check สำหรับการพัฒนาในเครื่อง จากนั้นส่งคำขอแรกไปยัง Gemini API

กำหนดค่าผู้ให้บริการแก้ไขข้อบกพร่องของ 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

ส่งคำขอไปยัง Gemini API

  1. เริ่มต้นและสร้างอินสแตนซ์

  2. ป้อนพรอมต์โมเดลด้วยข้อความหรืออินพุตหลายรูปแบบ ดูตัวอย่างใน ส่วนย่อยต่อไปนี้ของคู่มือนี้

พรอมต์ข้อความ

คุณใช้ข้อความธรรมดาสำหรับคำสั่งที่ส่งไปยังโมเดลได้ เช่น คุณ อาจขอให้โมเดลเล่าเรื่องตลกให้ฟัง

คุณมีตัวเลือกในการกำหนดเส้นทางคำขอ ดังนี้

  • ใช้ AI ในตัวโดยค่าเริ่มต้นเมื่อพร้อมใช้งานโดยตั้งค่า mode เป็น 'prefer_on_device' ในฟังก์ชัน getGenerativeModel() หากโมเดลในตัวไม่พร้อมใช้งาน คำขอจะเปลี่ยนไปใช้โมเดลในระบบคลาวด์โดยอัตโนมัติ (หากคุณออนไลน์อยู่)

  • ใช้โมเดลระบบคลาวด์โดยค่าเริ่มต้นเมื่อคุณออนไลน์โดยตั้งค่า mode เป็น 'prefer_in_cloud' ในฟังก์ชัน getGenerativeModel() หากคุณออฟไลน์ คำขอจะเปลี่ยนไปใช้ AI ในตัวอย่างราบรื่นเมื่อพร้อมใช้งาน 

// Initialize the Google AI service.
const googleAI = getAI(firebaseApp);

// Create a `GenerativeModel` instance with a model that supports your use case.
const model = getGenerativeModel(googleAI, { mode: 'prefer_on_device' });

const prompt = 'Tell me a joke';

const result = await model.generateContentStream(prompt);

for await (const chunk of result.stream) {
  const chunkText = chunk.text();
  console.log(chunkText);
}
console.log('Complete response', await result.response);

พรอมต์แบบหลายรูปแบบ

นอกจากนี้ คุณยังป้อนพรอมต์ด้วยรูปภาพหรือเสียงได้ด้วย คุณสามารถบอก โมเดลให้บรรยายเนื้อหาของรูปภาพหรือถอดเสียงไฟล์เสียงได้

ต้องส่งรูปภาพเป็นสตริงที่เข้ารหัส Base64 เป็นออบเจ็กต์ FileDataPart ของ Firebase ซึ่งทำได้ด้วยฟังก์ชันตัวช่วย fileToGenerativePart()

// Converts a File object to a `FileDataPart` object.
// https://firebase.google.com/docs/reference/js/vertexai.filedatapart
async function fileToGenerativePart(file) {
    const base64EncodedDataPromise = new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result.split(',')[1]);
      reader.readAsDataURL(file);
    });

    return {
      inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
    };
  }

  const fileInputEl = document.querySelector('input[type=file]');

  fileInputEl.addEventListener('change', async () => {
    const prompt = 'Describe the contents of this image.';

    const imagePart = await fileToGenerativePart(fileInputEl.files[0]);

    // To generate text output, call generateContent with the text and image
    const result = await model.generateContentStream([prompt, imagePart]);

    for await (const chunk of result.stream) {
      const chunkText = chunk.text();
      console.log(chunkText);
    }
    console.log(Complete response: ', await result.response);
  });

สาธิต

ไปที่เดโม Firebase AI Logic ในอุปกรณ์และเบราว์เซอร์ต่างๆ คุณจะเห็นว่าคำตอบของโมเดลมาจากโมเดล AI ในตัวหรือคลาวด์

เมื่อใช้ฮาร์ดแวร์ที่รองรับใน Chrome การสาธิตจะใช้ Prompt API และ Gemini Nano โดยจะมีการส่งคำขอเพียง 3 รายการสำหรับเอกสารหลัก ไฟล์ JavaScript และไฟล์ CSS

ตรรกะ AI ของ Firebase ที่ทำงานใน Chrome โดยใช้ AI API ในตัว

เมื่ออยู่ในเบราว์เซอร์อื่นหรือระบบปฏิบัติการที่ไม่มีการรองรับ AI ในตัว ระบบจะส่งคำขอเพิ่มเติมไปยังปลายทาง Firebase https://firebasevertexai.googleapis.com

ตรรกะ AI ของ Firebase ที่ทำงานใน Safari ซึ่งส่งคำขอไปยังเซิร์ฟเวอร์ Firebase

เข้าร่วมและแชร์ความคิดเห็น

Firebase AI Logic เป็นตัวเลือกที่ยอดเยี่ยมในการผสานรวมความสามารถของ AI เข้ากับเว็บแอป เมื่อ Prompt API ไม่พร้อมใช้งาน SDK จะเปลี่ยนไปใช้ระบบคลาวด์แทน เพื่อให้มั่นใจว่าฟีเจอร์ AI จะเข้าถึงได้ในวงกว้างและมีความน่าเชื่อถือมากขึ้น

โปรดทราบว่าแอปพลิเคชันระบบคลาวด์สร้างความคาดหวังใหม่ๆ เกี่ยวกับความเป็นส่วนตัวและ ฟังก์ชันการทํางาน ดังนั้นจึงควรแจ้งให้ผู้ใช้ทราบว่าระบบประมวลผลข้อมูลของผู้ใช้ที่ใด