Firebase Genkit มีปลั๊กอินที่ช่วยให้คุณทำให้ขั้นตอนใช้งานได้กับ Firebase Cloud Functions หน้านี้เป็นตัวอย่างที่จะแนะนำคุณตลอดขั้นตอนการทำให้โฟลว์ตัวอย่างเริ่มต้นใช้งานได้ใน Firebase
ทำให้โฟลว์ใช้งานได้เป็น Cloud Function
ติดตั้งเครื่องมือที่จำเป็น
ตรวจสอบว่าคุณใช้ Node.js เวอร์ชัน 20 ขึ้นไป (เรียกใช้
node --version
เพื่อตรวจสอบ)ติดตั้ง Firebase CLI
สร้างโปรเจ็กต์ Firebase ใหม่โดยใช้คอนโซล Firebase หรือเลือกโปรเจ็กต์ที่มีอยู่
อัปเกรดโปรเจ็กต์เป็นแพ็กเกจ Blaze ซึ่งจำเป็นสำหรับการทำให้ Cloud Functions ใช้งานได้
ลงชื่อเข้าสู่ระบบด้วย Firebase CLI
firebase login
firebase login --reauth # alternative, if necessary
firebase login --no-localhost # if running in a remote shell
สร้างไดเรกทอรีโปรเจ็กต์ใหม่:
export PROJECT_ROOT=~/tmp/genkit-firebase-project1
mkdir -p $PROJECT_ROOT
เริ่มต้นโปรเจ็กต์ Firebase ด้วย Genkit ในโฟลเดอร์
cd $PROJECT_ROOT
firebase init genkit
- เลือกโปรเจ็กต์ที่คุณสร้างไว้ก่อนหน้านี้
- เลือกผู้ให้บริการโมเดลที่ต้องการใช้
ยอมรับค่าเริ่มต้นสำหรับข้อความแจ้งที่เหลือ เครื่องมือ
genkit
จะสร้างตัวอย่างไฟล์ต้นฉบับบางส่วนเพื่อช่วยคุณเริ่มต้นพัฒนาขั้นตอน AI ของคุณเอง แต่สำหรับส่วนที่เหลือของบทแนะนำนี้ คุณเพียงแค่ทำให้ขั้นตอนตัวอย่างใช้งานได้ทำให้ข้อมูลเข้าสู่ระบบ API พร้อมใช้งานสำหรับ Cloud Function ทำอย่างใดอย่างหนึ่งต่อไปนี้ โดยขึ้นอยู่กับผู้ให้บริการโมเดลที่คุณเลือก
Gemini (AI ของ Google)
ตรวจสอบว่า AI ของ Google พร้อมใช้งานในภูมิภาคของคุณ
สร้างคีย์ API สำหรับ Gemini API โดยใช้ Google AI Studio
ตั้งค่าตัวแปรสภาพแวดล้อม
GOOGLE_GENAI_API_KEY
เป็นคีย์ของคุณexport GOOGLE_GENAI_API_KEY=<your API key>
แก้ไข
src/index.ts
และเพิ่มข้อมูลต่อไปนี้หลังจากการนำเข้าที่มีอยู่
import {defineSecret} from "firebase-functions/params"; defineSecret("GOOGLE_GENAI_API_KEY");
ตอนนี้เมื่อคุณทำให้ฟังก์ชันนี้ใช้งานได้ ระบบจะจัดเก็บคีย์ API ไว้ใน Cloud Secret Manager และพร้อมใช้งานจากสภาพแวดล้อม Cloud Functions
Gemini (Vertex AI)
ในคอนโซล Cloud ให้เปิดใช้ Vertex AI API สำหรับโปรเจ็กต์ Firebase ของคุณ
ในหน้า IAM ให้ตรวจสอบว่าบัญชีบริการการประมวลผลเริ่มต้นได้รับบทบาทผู้ใช้ Vertex AI
ไม่บังคับ: หากต้องการเรียกใช้โฟลว์ภายในเครื่องเหมือนในขั้นตอนถัดไป ให้ตั้งค่าตัวแปรสภาพแวดล้อมเพิ่มเติมและใช้เครื่องมือ
gcloud
เพื่อตั้งค่าข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชันexport GCLOUD_PROJECT=<your project ID>
export GCLOUD_LOCATION=us-central1
gcloud auth application-default login
ข้อมูลลับเดียวที่คุณต้องตั้งค่าสำหรับบทแนะนำนี้คือสำหรับผู้ให้บริการโมเดล แต่โดยทั่วไปแล้ว คุณจะต้องดำเนินการที่คล้ายกันสำหรับบริการแต่ละบริการที่กระบวนการของคุณใช้
หากคุณเข้าถึงขั้นตอนจากเว็บแอป (ซึ่งจะทำในส่วนถัดไป) ให้ตั้งค่านโยบาย CORS ในพารามิเตอร์
httpsOptions
ดังนี้export const menuSuggestionFlow = onFlow( { name: "menuSuggestionFlow", // ... httpsOptions: {cors: true}, // Add this line. }, async (subject) => { // ... } );
คุณน่าจะต้องการนโยบายที่เข้มงวดมากขึ้นสำหรับแอปเวอร์ชันที่ใช้งานจริง แต่วิธีนี้จะเหมาะกับบทแนะนำนี้
ไม่บังคับ: ลองดำเนินการตามขั้นตอนใน UI ของนักพัฒนาซอฟต์แวร์ ดังนี้
เริ่มต้น UI ด้วยคำสั่งต่อไปนี้
cd $PROJECT_ROOT/functions
genkit start
ใน UI ของนักพัฒนาซอฟต์แวร์ (http://localhost:4000/) ให้เรียกใช้ขั้นตอนดังนี้
คลิก MenuSuggestionFlow
ในแท็บ Input JSON ให้ระบุหัวเรื่องสำหรับโมเดล ดังนี้
"AI app developers"
ในแท็บ Auth JSON ให้ระบุออบเจ็กต์การตรวจสอบสิทธิ์จำลอง ดังนี้
{ "uid": 0, "email_verified": true }
คลิกเรียกใช้
หากทุกอย่างทำงานตามที่คาดไว้ คุณสามารถใช้ขั้นตอนดังต่อไปนี้
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 มีเมธอดฟังก์ชันที่เรียกใช้ได้ที่ทำให้การดำเนินการนี้เป็นแบบอัตโนมัติ
หากต้องการลองใช้ปลายทางของโฟลว์ คุณทำให้เว็บแอปตัวอย่างขนาดเล็กต่อไปนี้ใช้งานได้
ในส่วนการตั้งค่าโปรเจ็กต์ของคอนโซล Firebase ให้เพิ่มเว็บแอปใหม่ เลือกตัวเลือกเพื่อตั้งค่าโฮสติ้งด้วย
ในส่วนการตรวจสอบสิทธิ์ของคอนโซล Firebase ให้เปิดใช้ผู้ให้บริการ Google ซึ่งคุณจะใช้ในตัวอย่างนี้
ตั้งค่าโฮสติ้งของ Firebase ในไดเรกทอรีโปรเจ็กต์ ซึ่งคุณจะทำให้แอปตัวอย่างใช้งานได้ ดังนี้
cd $PROJECT_ROOT
firebase init hosting
ยอมรับค่าเริ่มต้นสำหรับข้อความแจ้งทั้งหมด
ให้แทนที่
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>
ทำให้เว็บแอปและ 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