Genkit ที่มี Firebase Cloud Functions

Firebase Genkit มีปลั๊กอินที่ช่วยให้คุณทำให้ขั้นตอนใช้งานได้กับ Firebase Cloud Functions หน้านี้เป็นตัวอย่างที่จะแนะนำคุณตลอดขั้นตอนการทำให้โฟลว์ตัวอย่างเริ่มต้นใช้งานได้ใน Firebase

ทำให้โฟลว์ใช้งานได้เป็น Cloud Function

1. ติดตั้งเครื่องมือที่จำเป็น

   1. ตรวจสอบว่าคุณใช้ Node.js เวอร์ชัน 20 ขึ้นไป (เรียกใช้ node --version เพื่อตรวจสอบ)

   2. ติดตั้ง Firebase CLI

2. สร้างโปรเจ็กต์ Firebase ใหม่โดยใช้คอนโซล Firebase หรือเลือกโปรเจ็กต์ที่มีอยู่

   อัปเกรดโปรเจ็กต์เป็นแพ็กเกจ Blaze ซึ่งจำเป็นสำหรับการทำให้ Cloud Functions ใช้งานได้

3. ลงชื่อเข้าสู่ระบบด้วย Firebase CLI

   firebase login
   firebase login --reauth # alternative, if necessary
   firebase login --no-localhost # if running in a remote shell
   

4. สร้างไดเรกทอรีโปรเจ็กต์ใหม่:

   export PROJECT_ROOT=~/tmp/genkit-firebase-project1
   mkdir -p $PROJECT_ROOT
   

5. เริ่มต้นโปรเจ็กต์ Firebase ด้วย Genkit ในโฟลเดอร์

   cd $PROJECT_ROOT
   firebase init genkit
   

   • เลือกโปรเจ็กต์ที่คุณสร้างไว้ก่อนหน้านี้
   • เลือกผู้ให้บริการโมเดลที่ต้องการใช้

   ยอมรับค่าเริ่มต้นสำหรับข้อความแจ้งที่เหลือ เครื่องมือ genkit จะสร้างตัวอย่างไฟล์ต้นฉบับบางส่วนเพื่อช่วยคุณเริ่มต้นพัฒนาขั้นตอน AI ของคุณเอง แต่สำหรับส่วนที่เหลือของบทแนะนำนี้ คุณเพียงแค่ทำให้ขั้นตอนตัวอย่างใช้งานได้

6. ทำให้ข้อมูลเข้าสู่ระบบ API พร้อมใช้งานสำหรับ Cloud Function ทำอย่างใดอย่างหนึ่งต่อไปนี้ โดยขึ้นอยู่กับผู้ให้บริการโมเดลที่คุณเลือก

   Gemini (AI ของ Google)

   1. ตรวจสอบว่า AI ของ Google พร้อมใช้งานในภูมิภาคของคุณ

   2. สร้างคีย์ API สำหรับ Gemini API โดยใช้ Google AI Studio

   3. ตั้งค่าตัวแปรสภาพแวดล้อม GOOGLE_GENAI_API_KEY เป็นคีย์ของคุณ

      export GOOGLE_GENAI_API_KEY=<your API key>
      

   4. แก้ไข src/index.ts และเพิ่มข้อมูลต่อไปนี้หลังจากการนำเข้าที่มีอยู่

   import {defineSecret} from "firebase-functions/params";
   defineSecret("GOOGLE_GENAI_API_KEY");
   

   ตอนนี้เมื่อคุณทำให้ฟังก์ชันนี้ใช้งานได้ ระบบจะจัดเก็บคีย์ API ไว้ใน Cloud Secret Manager และพร้อมใช้งานจากสภาพแวดล้อม Cloud Functions

   Gemini (Vertex AI)

   1. ในคอนโซล Cloud ให้เปิดใช้ Vertex AI API สำหรับโปรเจ็กต์ Firebase ของคุณ

   2. ในหน้า IAM ให้ตรวจสอบว่าบัญชีบริการการประมวลผลเริ่มต้นได้รับบทบาทผู้ใช้ Vertex AI

   3. ไม่บังคับ: หากต้องการเรียกใช้โฟลว์ภายในเครื่องเหมือนในขั้นตอนถัดไป ให้ตั้งค่าตัวแปรสภาพแวดล้อมเพิ่มเติมและใช้เครื่องมือ gcloud เพื่อตั้งค่าข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชัน

      export GCLOUD_PROJECT=<your project ID>
      export GCLOUD_LOCATION=us-central1
      gcloud auth application-default login
      

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

7. หากคุณเข้าถึงขั้นตอนจากเว็บแอป (ซึ่งจะทำในส่วนถัดไป) ให้ตั้งค่านโยบาย CORS ในพารามิเตอร์ httpsOptions ดังนี้

   export const menuSuggestionFlow = onFlow(
     {
       name: "menuSuggestionFlow",
       // ...
       httpsOptions: {cors: true}, // Add this line.
     },
     async (subject) => {
       // ...
     }
   );
   

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

8. ไม่บังคับ: ลองดำเนินการตามขั้นตอนใน UI ของนักพัฒนาซอฟต์แวร์ ดังนี้

   1. เริ่มต้น UI ด้วยคำสั่งต่อไปนี้

      cd $PROJECT_ROOT/functions
      genkit start
      

   2. ใน UI ของนักพัฒนาซอฟต์แวร์ (http://localhost:4000/) ให้เรียกใช้ขั้นตอนดังนี้

      1. คลิก MenuSuggestionFlow

      2. ในแท็บ Input JSON ให้ระบุหัวเรื่องสำหรับโมเดล ดังนี้

         "AI app developers"
         

      3. ในแท็บ Auth JSON ให้ระบุออบเจ็กต์การตรวจสอบสิทธิ์จำลอง ดังนี้

         {
           "uid": 0,
           "email_verified": true
         }
         

      4. คลิกเรียกใช้

9. หากทุกอย่างทำงานตามที่คาดไว้ คุณสามารถใช้ขั้นตอนดังต่อไปนี้

   cd $PROJECT_ROOT
   firebase deploy --only functions
   

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

ลองใช้ขั้นตอนที่ทำให้ใช้งานได้แล้ว

จำเป็นอย่างยิ่งที่ทุกๆ ขั้นตอนที่คุณใช้งานจะกำหนดนโยบายการให้สิทธิ์ หากไม่มี Generative AI อาจมีค่าใช้จ่ายสูงก็คงต้องเรียกใช้ได้

ขั้นตอนตัวอย่างเริ่มต้นมีนโยบายการให้สิทธิ์ดังต่อไปนี้

firebaseAuth((user) => {
  if (!user.email_verified) {
    throw new Error('Verified email required to run flow');
  }
});

นโยบายนี้ใช้ตัวช่วย firebaseAuth() เพื่ออนุญาตการเข้าถึงเฉพาะผู้ใช้ที่ลงทะเบียนของแอปของคุณซึ่งมีอีเมลที่ยืนยันแล้ว ในฝั่งไคลเอ็นต์ คุณจะต้องตั้งค่าส่วนหัว Authorization: Bearer เป็นโทเค็นรหัส Firebase ที่เป็นไปตามนโยบาย SDK ของไคลเอ็นต์ Cloud Functions มีเมธอดฟังก์ชันที่เรียกใช้ได้ที่ทำให้การดำเนินการนี้เป็นแบบอัตโนมัติ

หากต้องการลองใช้ปลายทางของโฟลว์ คุณทำให้เว็บแอปตัวอย่างขนาดเล็กต่อไปนี้ใช้งานได้

1. ในส่วนการตั้งค่าโปรเจ็กต์ของคอนโซล Firebase ให้เพิ่มเว็บแอปใหม่ เลือกตัวเลือกเพื่อตั้งค่าโฮสติ้งด้วย

2. ในส่วนการตรวจสอบสิทธิ์ของคอนโซล Firebase ให้เปิดใช้ผู้ให้บริการ Google ซึ่งคุณจะใช้ในตัวอย่างนี้

3. ตั้งค่าโฮสติ้งของ Firebase ในไดเรกทอรีโปรเจ็กต์ ซึ่งคุณจะทำให้แอปตัวอย่างใช้งานได้ ดังนี้

   cd $PROJECT_ROOT
   firebase init hosting
   

   ยอมรับค่าเริ่มต้นสำหรับข้อความแจ้งทั้งหมด

4. ให้แทนที่ public/index.html ด้วยข้อมูลต่อไปนี้

   <!doctype html>
   <html>
     <head>
       <title>Genkit demo</title>
     </head>
     <body>
       <div id="signin" hidden>
         <button id="signinBtn">Sign in with Google</button>
       </div>
       <div id="callGenkit" hidden>
         Subject: <input type="text" id="subject" />
         <button id="suggestMenuItem">Suggest a menu theme</button>
         <p id="menuItem"></p>
       </div>
       <script type="module">
         import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.10.0/firebase-app.js';
         import {
           getAuth,
           onAuthStateChanged,
           GoogleAuthProvider,
           signInWithPopup,
         } from 'https://www.gstatic.com/firebasejs/10.10.0/firebase-auth.js';
         import {
           getFunctions,
           httpsCallable,
         } from 'https://www.gstatic.com/firebasejs/10.10.0/firebase-functions.js';
   
         const firebaseConfig = await fetch('/__/firebase/init.json');
         initializeApp(await firebaseConfig.json());
   
         async function generateMenuItem() {
           const menuSuggestionFlow = httpsCallable(
             getFunctions(),
             'menuSuggestionFlow'
           );
           const subject = document.querySelector('#subject').value;
           const response = await menuSuggestionFlow(subject);
           document.querySelector('#menuItem').innerText = response.data;
         }
   
         function signIn() {
           signInWithPopup(getAuth(), new GoogleAuthProvider());
         }
   
         document
           .querySelector('#signinBtn')
           .addEventListener('click', signIn);
         document
           .querySelector('#suggestMenuItem')
           .addEventListener('click', generateMenuItem);
   
         const signinEl = document.querySelector('#signin');
         const genkitEl = document.querySelector('#callGenkit');
   
         onAuthStateChanged(getAuth(), (user) => {
           if (!user) {
             signinEl.hidden = false;
             genkitEl.hidden = true;
           } else {
             signinEl.hidden = true;
             genkitEl.hidden = false;
           }
         });
       </script>
     </body>
   </html>
   

5. ทำให้เว็บแอปและ Cloud Function ใช้งานได้ด้วยคำสั่งต่อไปนี้

   cd $PROJECT_ROOT
   firebase deploy
   

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

การพัฒนาโดยใช้ Firebase Local Emulator Suite

Firebase มีชุดโปรแกรมจำลองสำหรับการพัฒนาในพื้นที่ซึ่งคุณใช้กับ Genkit ได้

หากต้องการใช้ Genkit กับชุดโปรแกรมจำลอง Firebase ให้เริ่มโปรแกรมจำลอง Firebase ดังนี้

GENKIT_ENV=dev firebase emulators:start --inspect-functions

การดำเนินการนี้จะเรียกใช้โค้ดในโปรแกรมจำลองและเรียกใช้เฟรมเวิร์ก Genkit ในโหมดการพัฒนา ซึ่งจะเปิดและแสดง Genkit Reflection API (แต่ไม่ใช่ Dev UI)

จากนั้นเปิด Genkit Dev UI ด้วยตัวเลือก --attach เพื่อเชื่อมต่อกับโค้ดของคุณที่ทำงานอยู่ในโปรแกรมจำลอง Firebase โดยทำดังนี้

genkit start --attach http://localhost:3100 --port 4001

หากต้องการดูการติดตามจาก Firestore ใน UI สำหรับนักพัฒนาซอฟต์แวร์ ให้ไปที่แท็บ "ตรวจสอบ" และสลับสวิตช์ "Dev/Prod" เมื่อสลับเป็น "prod" ระบบจะโหลดการติดตามจาก Firestore