Genkit ที่มี Cloud Functions สำหรับ Firebase

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

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

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

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

   2. ติดตั้ง Firebase CLI

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

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

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. จัดเก็บคีย์ API ใน Cloud Secret Manager

      firebase functions:secrets:set GOOGLE_GENAI_API_KEY
      

      ขั้นตอนนี้สำคัญในการป้องกันไม่ให้คีย์ API รั่วไหลโดยไม่ตั้งใจ ซึ่งเป็นการให้สิทธิ์เข้าถึงบริการที่อาจมีการตรวจวัด

      โปรดดูหัวข้อจัดเก็บและเข้าถึงข้อมูลการกำหนดค่าที่ละเอียดอ่อน สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการจัดการข้อมูลลับ

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

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

      จากนั้นในคําจํากัดความของโฟลว์ ให้ประกาศว่าฟังก์ชันระบบคลาวด์ต้องการ เข้าถึงค่าข้อมูลลับนี้:

      export const menuSuggestionFlow = onFlow(
        {
          name: "menuSuggestionFlow",
          // ...
          httpsOptions: {
            secrets: [googleAIapiKey],  // Add this line.
          },
        },
        async (subject) => {
          // ...
        }
      );
      

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

   Gemini (Vertex AI)

   1. ใน Cloud Console เปิดใช้ Vertex AI API สำหรับโปรเจ็กต์ Firebase

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

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

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

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

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

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

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

      Gemini (AI ของ Google)

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

      export GOOGLE_GENAI_API_KEY=<your API key>
      

      Gemini (Vertex AI)

      ตั้งค่าตัวแปรสภาพแวดล้อมเพิ่มเติมและใช้ เครื่องมือ gcloud สำหรับตั้งค่า ข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชันในเครื่อง:

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

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

      cd $PROJECT_ROOT/functions
      genkit start
      

   3. ใน 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 หรือที่คล้ายกัน เนื่องจากขั้นตอน นโยบายการให้สิทธิ์ ไปที่ส่วนถัดไปเพื่อดูวิธีรักษาความปลอดภัย เข้าถึงโฟลว์ได้

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

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