1. ก่อนเริ่มต้น
ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีใช้ Firebase Genkit เพื่อผสานรวม Generative AI เข้ากับแอป Firebase Genkit เป็นเฟรมเวิร์กแบบโอเพนซอร์สที่ช่วยให้คุณสร้าง ติดตั้งใช้งาน และตรวจสอบแอปที่ทำงานด้วยระบบ AI ซึ่งพร้อมใช้งานจริง
Genkit ออกแบบมาสำหรับนักพัฒนาแอปเพื่อช่วยให้คุณผสานรวมความสามารถอันทรงพลังของ AI เข้ากับแอปได้อย่างง่ายดายด้วยรูปแบบและกระบวนทัศน์ที่คุ้นเคย ซึ่งพัฒนาโดยทีม Firebase โดยใช้ประโยชน์จากประสบการณ์ในการสร้างเครื่องมือที่ใช้โดยนักพัฒนาแอปหลายล้านคนทั่วโลก
ข้อกำหนดเบื้องต้น
- คุ้นเคยกับ Firestore, Node.js และ TypeScript
สิ่งที่คุณจะได้เรียนรู้
- วิธีสร้างแอปที่ชาญฉลาดยิ่งขึ้นด้วยความสามารถในการค้นหาความคล้ายคลึงของเวกเตอร์ขั้นสูงของ Firestore
- วิธีใช้ Generative AI ในแอปโดยใช้ Firebase Genkit
- เตรียมโซลูชันให้พร้อมสําหรับการติดตั้งใช้งานและการผสานรวม
สิ่งที่ต้องมี
- เบราว์เซอร์ที่คุณเลือก เช่น Google Chrome
- สภาพแวดล้อมการพัฒนาที่มีเครื่องมือแก้ไขโค้ดและเทอร์มินัล
- บัญชี Google สำหรับการสร้างและจัดการโปรเจ็กต์ Firebase
2. ตรวจสอบเว็บแอปและบริการระบบคลาวด์ที่ใช้
ในส่วนนี้ คุณจะได้ตรวจสอบเว็บแอปที่จะสร้างด้วย Codelab นี้ รวมถึงเรียนรู้เกี่ยวกับบริการระบบคลาวด์ที่จะใช้
เว็บแอป
ในโค้ดแล็บนี้ คุณจะได้ทํางานกับโค้ดเบสของแอปชื่อ Compass ซึ่งเป็นแอปวางแผนวันหยุด ผู้ใช้สามารถเลือกจุดหมาย ดูกิจกรรมที่จุดหมาย และสร้างแผนการเดินทางสำหรับทริปของตนได้
ในโค้ดแล็บนี้ คุณจะใช้ฟีเจอร์ใหม่ 2 รายการที่มีไว้เพื่อปรับปรุงการมีส่วนร่วมของผู้ใช้กับหน้าแรกของแอป ฟีเจอร์ทั้ง 2 รายการนี้ทำงานด้วย Generative AI
- ปัจจุบันแอปแสดงรายการปลายทางแบบคงที่ คุณจะต้องเปลี่ยนให้เป็นแบบไดนามิก
- คุณจะใช้แผนการเดินทางที่ระบบสร้างขึ้นโดยอัตโนมัติเพื่อเพิ่มการกลับมาใช้งาน
บริการที่ใช้
ในโค้ดแล็บนี้ คุณจะใช้บริการและฟีเจอร์ Firebase และ Cloud หลายรายการ และเรามีโค้ดเริ่มต้นส่วนใหญ่ไว้ให้แล้ว ตารางต่อไปนี้แสดงบริการที่คุณจะใช้และเหตุผลในการใช้
บริการ | เหตุผลในการใช้งาน |
คุณใช้ Genkit เพื่อนำ Generative AI มาใช้ในแอปพลิเคชัน Node.js / Next.js | |
คุณจัดเก็บข้อมูลไว้ใน Cloud Firestore ซึ่งระบบจะใช้สำหรับการค้นหาความคล้ายคลึงของเวกเตอร์ | |
คุณใช้โมเดลพื้นฐานจาก Vertex AI (เช่น Gemini) เพื่อขับเคลื่อนฟีเจอร์ AI | |
คุณเลือกใช้โฮสติ้งแอป Firebase ที่มีประสิทธิภาพยิ่งขึ้นแบบใหม่เพื่อแสดงเว็บแอป Next.js แบบไดนามิก (เชื่อมต่อกับที่เก็บ GitHub) ได้ |
3. ตั้งค่าสภาพแวดล้อมการพัฒนา
ยืนยันเวอร์ชัน Node.js
- ในเทอร์มินัล ให้ตรวจสอบว่าคุณได้ติดตั้ง Node.js เวอร์ชัน 20.0.0 ขึ้นไปแล้ว โดยทำดังนี้
node -v
- หากไม่มี Node.js เวอร์ชัน 20.0.0 ขึ้นไป ให้ดาวน์โหลดเวอร์ชัน LTS เวอร์ชันล่าสุดและติดตั้ง
รับซอร์สโค้ดของ Codelab
หากคุณมีบัญชี GitHub ให้ทำดังนี้
- สร้างที่เก็บข้อมูลใหม่โดยใช้เทมเพลตของเราจาก github.com/FirebaseExtended/codelab-ai-genkit-rag
- สร้างโคลนที่เก็บ GitHub ของโค้ดแล็บที่คุณเพิ่งสร้างขึ้นในเครื่องโดยทำดังนี้
git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
หากไม่ได้ติดตั้ง Git หรือไม่ต้องการสร้างที่เก็บใหม่ ให้ทำดังนี้
ดาวน์โหลดที่เก็บ GitHub เป็นไฟล์ ZIP
ตรวจสอบโครงสร้างโฟลเดอร์
ค้นหาที่เก็บข้อมูลที่โคลนและตรวจสอบโครงสร้างโฟลเดอร์ในเครื่อง
โฟลเดอร์ | คำอธิบาย |
| เครื่องมือบรรทัดคำสั่งตัวช่วยสำหรับป้อนข้อมูลคอลเล็กชัน Firestore ล่วงหน้าอย่างรวดเร็ว |
*อื่นๆ | โค้ดเว็บแอป Next.js |
โฟลเดอร์รูทจะมีไฟล์ README.md
ที่เสนอการเริ่มต้นใช้งานอย่างรวดเร็วเพื่อเรียกใช้เว็บแอปโดยใช้วิธีการที่มีประสิทธิภาพ อย่างไรก็ตาม หากคุณเป็นมือใหม่ คุณควรทำ Codelab นี้ให้เสร็จ (แทนที่จะใช้การเริ่มต้นใช้งานอย่างรวดเร็ว) เนื่องจาก Codelab มีชุดวิธีการที่ครอบคลุมที่สุด
หากไม่แน่ใจว่าได้นําโค้ดไปใช้อย่างถูกต้องตามวิธีการตลอดทั้งโค้ดแล็บนี้หรือไม่ คุณดูโค้ดโซลูชันได้ในend
สาขา git
ติดตั้ง Firebase CLI
- ตรวจสอบว่าคุณได้ติดตั้ง Firebase CLI แล้ว และเป็นเวอร์ชัน 13.6 ขึ้นไป
firebase --version
- หากคุณติดตั้ง Firebase CLI แล้ว แต่ไม่ใช่เวอร์ชัน 13.6 ขึ้นไป ให้อัปเดตโดยทำดังนี้
npm update -g firebase-tools
- หากยังไม่ได้ติดตั้ง Firebase CLI ให้ทำดังนี้
npm install -g firebase-tools
หากอัปเดตหรือติดตั้ง Firebase CLI ไม่ได้เนื่องจากข้อผิดพลาดเกี่ยวกับสิทธิ์ โปรดดูเอกสารประกอบ npm หรือใช้ตัวเลือกการติดตั้งอื่น
เข้าสู่ระบบ Firebase
- ลงชื่อเข้าใช้ Firebase ในเทอร์มินัลโดยทำดังนี้
หากเทอร์มินัลระบุว่าคุณเข้าสู่ระบบ Firebase อยู่แล้ว ให้ข้ามไปที่ส่วนตั้งค่าโปรเจ็กต์ Firebase ของโค้ดแล็บนี้firebase login
- ในเทอร์มินัล ให้ป้อน
Y
หรือN
โดยขึ้นอยู่กับว่าคุณต้องการให้ Firebase รวบรวมข้อมูลหรือไม่ (ใช้ตัวเลือกใดก็ได้กับ Codelab นี้) - ในเบราว์เซอร์ ให้เลือกบัญชี Google แล้วคลิกอนุญาต
ติดตั้ง gcloud CLI ของ Google Cloud
- ติดตั้ง gcloud CLI
- เข้าสู่ระบบ Google Cloud ในเทอร์มินัลโดยทำดังนี้
gcloud auth login
4. สร้างโปรเจ็กต์ Firebase
ในส่วนนี้ คุณจะต้องตั้งค่าโปรเจ็กต์ Firebase และลงทะเบียนเว็บแอป Firebase ในโปรเจ็กต์ นอกจากนี้ คุณยังเปิดใช้บริการ 2-3 อย่างที่ใช้โดยเว็บแอปตัวอย่างในภายหลังใน Codelab นี้ด้วย
ขั้นตอนทั้งหมดในส่วนนี้ทําในคอนโซล Firebase
สร้างโปรเจ็กต์ Firebase
- ลงชื่อเข้าใช้คอนโซล Firebase โดยใช้บัญชี Google เดียวกับที่ใช้ในขั้นตอนก่อนหน้า
- คลิกสร้างโปรเจ็กต์ แล้วป้อนชื่อโปรเจ็กต์ (เช่น
Compass Codelab
)
จดจํารหัสโปรเจ็กต์ที่ระบบกําหนดให้โปรเจ็กต์ Firebase โดยอัตโนมัติ (หรือคลิกไอคอนแก้ไขเพื่อตั้งรหัสโปรเจ็กต์ที่ต้องการ) คุณต้องใช้รหัสนี้ภายหลังเพื่อระบุโปรเจ็กต์ Firebase ใน Firebase CLI หากลืมรหัส คุณสามารถค้นหารหัสในภายหลังได้ในการตั้งค่าโปรเจ็กต์ - คลิกต่อไป
- หากได้รับข้อความแจ้ง ให้อ่านและยอมรับข้อกําหนดของ Firebase แล้วคลิกต่อไป
- สําหรับโค้ดแล็บนี้ คุณไม่ต้องใช้ Google Analytics ดังนั้นให้ปิดตัวเลือก Google Analytics
- คลิกสร้างโปรเจ็กต์ รอให้โปรเจ็กต์จัดสรร แล้วคลิกดำเนินการต่อ
เพิ่มเว็บแอปลงในโปรเจ็กต์ Firebase
- ไปที่หน้าจอภาพรวมโปรเจ็กต์ในโปรเจ็กต์ Firebase แล้วคลิก
เว็บ
- ในกล่องข้อความชื่อเล่นของแอป ให้ป้อนชื่อเล่นของแอปที่จำง่าย เช่น
My Compass Codelab App
คุณไม่ต้องเลือกช่องทำเครื่องหมายสำหรับตั้งค่า Firebase Hosting เนื่องจากคุณจะตั้งค่าบริการโฮสติ้งในขั้นตอนสุดท้ายของโค้ดแล็บนี้หรือไม่ก็ได้ - คลิกลงทะเบียนแอป > ไปที่คอนโซล
เยี่ยมเลย ตอนนี้คุณลงทะเบียนเว็บแอปในโปรเจ็กต์ Firebase ใหม่แล้ว
อัปเกรดแพ็กเกจราคา Firebase
หากต้องการใช้ Firebase Genkit และ Vertex AI (และบริการระบบคลาวด์ที่เกี่ยวข้อง) โปรเจ็กต์ Firebase ของคุณต้องใช้แพ็กเกจราคาแบบชําระเงินตามการใช้งาน (Blaze) ซึ่งหมายความว่าโปรเจ็กต์จะลิงก์กับบัญชีการเรียกเก็บเงินในระบบคลาวด์
- บัญชีการเรียกเก็บเงินระบบคลาวด์ต้องมีวิธีการชำระเงิน เช่น บัตรเครดิต
- หากเพิ่งเริ่มใช้ Firebase และ Google Cloud ให้ตรวจสอบว่าคุณมีสิทธิ์รับเครดิตมูลค่า$300 และบัญชีการเรียกเก็บเงินระบบคลาวด์แบบทดลองใช้ฟรีหรือไม่
- หากคุณทำ Codelab นี้เป็นส่วนหนึ่งของกิจกรรม โปรดสอบถามผู้จัดว่ามีเครดิต Cloud เหลืออยู่ไหม
ดูข้อมูลเพิ่มเติมเกี่ยวกับราคาของ Vertex AI
หากต้องการอัปเกรดโปรเจ็กต์เป็นแพ็กเกจ Blaze ให้ทำตามขั้นตอนต่อไปนี้
- ในคอนโซล Firebase ให้เลือกอัปเกรดแพ็กเกจ
- เลือกแพ็กเกจ Blaze ทำตามวิธีการบนหน้าจอเพื่อลิงก์บัญชีสำหรับการเรียกเก็บเงินใน Cloud กับโปรเจ็กต์
หากจำเป็นต้องสร้างบัญชีสำหรับการเรียกเก็บเงินใน Cloud เป็นส่วนหนึ่งของการอัปเกรดนี้ คุณอาจต้องกลับไปที่ขั้นตอนการอัปเกรดในคอนโซล Firebase เพื่อดำเนินการอัปเกรดให้เสร็จสมบูรณ์
ตั้งค่า Cloud Firestore
- ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยายสร้าง แล้วเลือกฐานข้อมูล Firestore
- คลิกสร้างฐานข้อมูล
- ตั้งค่ารหัสฐานข้อมูลเป็น
(default)
- เลือกตำแหน่งสำหรับฐานข้อมูล แล้วคลิกถัดไป
สำหรับแอปจริง คุณควรเลือกตำแหน่งที่อยู่ใกล้กับผู้ใช้ - คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎความปลอดภัย
อย่าเผยแพร่หรือแสดงแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสำหรับฐานข้อมูล - คลิกสร้าง
เปิดใช้ Vertex AI
ใช้ gcloud
CLI เพื่อตั้งค่า Vertex AI สำหรับคําสั่งทั้งหมดในหน้านี้ ให้แทนที่ YOUR_PROJECT_ID
ด้วยรหัสโปรเจ็กต์ Firebase
- ในเทอร์มินัล ให้ตั้งค่าโปรเจ็กต์เริ่มต้นสําหรับ Google Cloud SDK โดยทําดังนี้
gcloud config set project YOUR_PROJECT_ID
- หากคุณเห็นข้อความเตือนว่า "คำเตือน: โปรเจ็กต์ที่ใช้งานอยู่ไม่ตรงกับโปรเจ็กต์โควต้าในไฟล์ข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชันบนเครื่อง ซึ่งอาจทำให้เกิดปัญหาโควต้าที่ไม่คาดคิด" จากนั้นเรียกใช้คำสั่งต่อไปนี้เพื่อตั้งค่าโปรเจ็กต์โควต้า
gcloud auth application-default set-quota-project YOUR_PROJECT_ID
- เปิดใช้บริการ Vertex AI ในโปรเจ็กต์
gcloud services enable aiplatform.googleapis.com
5. ตั้งค่าเว็บแอป
หากต้องการเรียกใช้เว็บแอป คุณจะต้องเรียกใช้คําสั่งในเทอร์มินัลและเพิ่มโค้ดในเครื่องมือแก้ไขโค้ด สำหรับคําสั่งทั้งหมดในหน้านี้ ให้แทนที่ YOUR_PROJECT_ID
ด้วยรหัสโปรเจ็กต์ Firebase
กำหนดค่า Firebase CLI ให้กำหนดเป้าหมายโปรเจ็กต์
- ในเทอร์มินัล ให้ไปที่ไดเรกทอรีรูทของโปรเจ็กต์ Codelab
- หากต้องการให้ Firebase CLI เรียกใช้คําสั่งทั้งหมดกับโปรเจ็กต์ Firebase ให้เรียกใช้คําสั่งต่อไปนี้
firebase use YOUR_PROJECT_ID
นําเข้าข้อมูลตัวอย่างไปยัง Firestore
โค้ดแล็บนี้ให้ข้อมูลตัวอย่างที่สร้างขึ้นล่วงหน้าสำหรับ Firestore เพื่อให้คุณเริ่มต้นใช้งานได้อย่างรวดเร็ว
- หากต้องการอนุญาตให้โค้ดเบสในเครื่องเรียกใช้โค้ดที่ปกติจะใช้บัญชีบริการ ให้เรียกใช้คําสั่งต่อไปนี้ในเทอร์มินัล
ซึ่งจะเปิดแท็บใหม่ในเบราว์เซอร์ของคุณ เข้าสู่ระบบโดยใช้บัญชี Google เดียวกับที่ใช้ในขั้นตอนก่อนหน้าgcloud auth application-default login
- หากต้องการนําเข้าข้อมูล Firestore ตัวอย่าง ให้เรียกใช้คําสั่งต่อไปนี้
cd load-firestore-data npm ci node index.js YOUR_PROJECT_ID cd ..
- ยืนยันว่าเพิ่มข้อมูลลงในฐานข้อมูลเรียบร้อยแล้วโดยไปที่ส่วน Firestore ของโปรเจ็กต์ Firebase ในคอนโซล Firebase คุณควรเห็นสคีมาข้อมูลที่นําเข้าและเนื้อหาที่แสดง
เชื่อมต่อเว็บแอปกับโปรเจ็กต์ Firebase
โค้ดเบสของเว็บแอปต้องเชื่อมโยงกับโปรเจ็กต์ Firebase ที่ถูกต้องเพื่อใช้บริการต่างๆ เช่น ฐานข้อมูล โดยคุณต้องเพิ่มการกําหนดค่า Firebase ลงในโค้ดเบสของแอป การกําหนดค่านี้ประกอบด้วยค่าสําคัญ เช่น รหัสโปรเจ็กต์ คีย์ API และรหัสแอปของแอป รวมถึงค่าอื่นๆ ที่ช่วยให้แอปโต้ตอบกับ Firebase ได้
- รับการกําหนดค่า Firebase ของแอป
- ในคอนโซล Firebase ให้ไปที่โปรเจ็กต์ Firebase
- ในแผงด้านซ้าย ให้คลิกไอคอนรูปเฟืองข้างภาพรวมโปรเจ็กต์ แล้วเลือกการตั้งค่าโปรเจ็กต์
- เลือกเว็บแอปในการ์ด "แอปของคุณ"
- ในส่วน "การตั้งค่าและการกําหนดค่า SDK" ให้เลือกตัวเลือกกําหนดค่า
- คัดลอกข้อมูลโค้ด รหัสจะขึ้นต้นด้วย
const firebaseConfig ...
- เพิ่มการกําหนดค่า Firebase ลงในโค้ดเบสของเว็บแอป
- เปิดไฟล์
src/lib/genkit/genkit.config.ts
ในเครื่องมือแก้ไขโค้ด - แทนที่ส่วนที่เกี่ยวข้องด้วยโค้ดที่คุณคัดลอก
- บันทึกไฟล์
- เปิดไฟล์
แสดงตัวอย่างเว็บแอปในเบราว์เซอร์
- ในเทอร์มินัล ให้ติดตั้งข้อกําหนดเบื้องต้น แล้วเรียกใช้เว็บแอป
npm install npm run dev:next
- ในเบราว์เซอร์ ให้ไปที่ URL โฮสติ้งที่โฮสต์ในเครื่องเพื่อดูเว็บแอป เช่น ในกรณีส่วนใหญ่ URL จะเป็น http://localhost:3000/ หรือคล้ายกัน
Compass เป็นแอป Next.js ที่ใช้ React Server Components และหน้านี้เป็นหน้าแรก
คลิกค้นหาทริปในฝัน คุณจะเห็นว่าขณะนี้มีการแสดงข้อมูลแบบฮาร์ดโค้ดสําหรับปลายทางแบบคงที่บางรายการ
โปรดสํารวจ เมื่อพร้อมที่จะดำเนินการต่อ ให้คลิกปุ่มบ้าน (ที่มุมขวาบน)
6. เจาะลึก Generative AI ด้วย Genkit
ตอนนี้คุณก็พร้อมใช้ประโยชน์จากความสามารถของ Generative AI ในแอปพลิเคชันแล้ว ส่วนนี้ของโค้ดแล็บจะแนะนำวิธีใช้ฟีเจอร์ที่แนะนำจุดหมายโดยอิงตามแรงบันดาลใจที่ผู้ใช้ให้ไว้ คุณจะใช้ Firebase Genkit และ Vertex AI ของ Google Cloud เป็นผู้จัดหาโมเดล Generative (คุณจะใช้ Gemini)
Genkit สามารถจัดเก็บสถานะการติดตามและสถานะการทํางาน (ซึ่งช่วยให้คุณตรวจสอบผลลัพธ์ของการดำเนินการเวิร์กโฟลว์ Genkit ได้) ในโค้ดแล็บนี้ คุณจะใช้ Firestore เพื่อจัดเก็บร่องรอยเหล่านี้
ขั้นตอนสุดท้ายในโค้ดแล็บนี้คือการทำให้แอป Genkit ใช้งานได้กับโฮสติ้งแอป Firebase
เชื่อมต่อแอป Genkit กับโปรเจ็กต์ Firebase
เราได้เชื่อมต่อ Genkit กับโปรเจ็กต์ของคุณแล้วโดยการแก้ไข src/lib/genkit/genkit.config.ts
ในขั้นตอนก่อนหน้า
เปิด UI นักพัฒนาซอฟต์แวร์ Genkit
Genkit มาพร้อมกับ UI บนเว็บที่ช่วยให้คุณโต้ตอบกับ LLM, เวิร์กโฟลว์ Genkit, เครื่องมือดึงข้อมูล และคอมโพเนนต์ AI อื่นๆ ได้
ในเทอร์มินัล ให้เรียกใช้คำสั่งต่อไปนี้
npm run dev:genkit
ในเบราว์เซอร์ ให้ไปที่ URL ของ Genkit ที่โฮสต์ในเครื่อง ในกรณีส่วนใหญ่จะเป็น http://localhost:4000/
โต้ตอบกับ Gemini
ตอนนี้คุณใช้ UI สําหรับนักพัฒนาซอฟต์แวร์ของ Genkit เพื่อโต้ตอบกับโมเดลที่รองรับหรือคอมโพเนนต์ AI อื่นๆ เช่น พรอมต์ เครื่องมือดึงข้อมูล และขั้นตอนของ Genkit ได้แล้ว
เช่น ลองขอให้ Gemini แนะนำสถานที่ท่องเที่ยวสำหรับวันหยุด โปรดทราบว่าคุณสามารถใช้วิธีการของระบบเพื่อควบคุมลักษณะการทํางานของโมเดลตามความต้องการเฉพาะของคุณได้อย่างไร ซึ่งวิธีนี้ใช้ได้กับรุ่นที่ไม่รองรับคำสั่งของระบบโดยกำเนิดด้วย
จัดการพรอมต์
Firebase Genkit เปิดตัว Dotprompt ซึ่งเป็นปลั๊กอินและรูปแบบข้อความที่ออกแบบมาเพื่อเพิ่มประสิทธิภาพการสร้างและจัดการพรอมต์ Generative AI แนวคิดหลักที่อยู่เบื้องหลัง Dotprompt คือการจัดการพรอมต์เป็นโค้ด ซึ่งช่วยให้คุณเขียน ดูแลรักษา และควบคุมเวอร์ชันของพรอมต์ควบคู่ไปกับโค้ดแอปพลิเคชันได้
หากต้องการใช้ Dotprompt ให้เริ่มต้นด้วย hello-world ดังนี้
- เปิดไฟล์
prompts/1-hello-world.prompt
ในเครื่องมือแก้ไขโค้ด - เปิด
prompts/1-hello-world
ใน UI ของนักพัฒนาซอฟต์แวร์ Genkit - ใช้ชื่อหรือรหัสภาษาที่คุณคุ้นเคย หรือปล่อยเป็นสตริงว่าง
- คลิกเรียกใช้
- ลองใช้ค่าอื่น โมเดลภาษาขนาดใหญ่เข้าใจพรอมต์ที่ย่อ สะกดผิด หรือไม่สมบูรณ์ในข้อความค้นหาง่ายๆ เช่นนี้ได้ดี
เพิ่มประสิทธิภาพเอาต์พุตด้วย Structured Data
นอกจากการสร้างข้อความธรรมดาแล้ว Genkit ยังช่วยให้คุณจัดโครงสร้างเอาต์พุตเพื่อการแสดงผลและการผสานรวมที่มีประสิทธิภาพยิ่งขึ้นภายใน UI ของแอปได้ด้วย การกําหนดสคีมาช่วยให้คุณสั่งให้ LLM สร้าง Structured Data ที่สอดคล้องกับรูปแบบที่ต้องการได้
การสํารวจสคีมาเอาต์พุต
นอกจากนี้ คุณยังระบุสคีมาเอาต์พุตของการเรียกใช้ LLM ได้ด้วย
- ตรวจสอบไฟล์พรอมต์ในตัวแก้ไขโค้ด โดยทำดังนี้
- เปิดไฟล์
prompts/2-simple-itinerary.prompt
- ตรวจสอบสคีมาอินพุตและเอาต์พุตที่กําหนด
- เปิดไฟล์
- โต้ตอบกับ UI
- ใน UI ของนักพัฒนาแอป Genkit ให้ไปที่ส่วน
prompts/2-simple-itinerary
- ระบุอินพุตโดยป้อนข้อมูลตัวอย่างในช่อง
place
และinterests
{ "interests": [ "Museums" ], "place": "Paris" }
- คลิกเรียกใช้
- ใน UI ของนักพัฒนาแอป Genkit ให้ไปที่ส่วน
ทำความเข้าใจเอาต์พุตที่ขับเคลื่อนโดยสคีมา
โปรดสังเกตว่าเอาต์พุตที่สร้างขึ้นเป็นไปตามสคีมาที่กำหนดไว้อย่างไร การระบุโครงสร้างที่ต้องการเป็นการสั่งให้ LLM ผลิตข้อมูลที่แยกวิเคราะห์และผสานรวมเข้ากับแอปพลิเคชันได้อย่างง่ายดาย Genkit จะตรวจสอบเอาต์พุตกับสคีมาโดยอัตโนมัติเพื่อให้ข้อมูลสมบูรณ์
นอกจากนี้ คุณยังกําหนดค่า Genkit ให้ลองอีกครั้งหรือพยายามซ่อมแซมเอาต์พุตได้หากไม่ตรงกับสคีมา
ข้อดีหลักของสคีมาเอาต์พุต
- การผสานรวมที่ง่ายขึ้น: ใส่ Structured Data ลงในองค์ประกอบ UI ของแอปได้อย่างง่ายดาย
- การตรวจสอบข้อมูล: ตรวจสอบความถูกต้องและความสอดคล้องของเอาต์พุตที่สร้างขึ้น
- การจัดการข้อผิดพลาด: ใช้กลไกเพื่อจัดการกับสคีมาที่จับคู่กันไม่ได้
การใช้สคีมาเอาต์พุตจะช่วยยกระดับประสบการณ์การใช้งาน Genkit ให้คุณสร้าง Structured Data ที่ปรับแต่งให้เหมาะกับผู้ใช้เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่สมบูรณ์ยิ่งขึ้นและเป็นแบบไดนามิก
ใช้อินพุตหลายรูปแบบ
ลองจินตนาการว่าแอปของคุณแนะนําจุดหมายพักร้อนที่ปรับเปลี่ยนในแบบของคุณตามรูปภาพที่ผู้ใช้เห็นว่าน่าดึงดูด Genkit ร่วมกับโมเดล Generative แบบหลายมิติช่วยให้คุณสร้างสรรค์ผลงานตามจินตนาการได้
- ตรวจสอบไฟล์พรอมต์ในตัวแก้ไขโค้ด โดยทำดังนี้
- เปิดไฟล์
prompts/imgDescription.prompt
- โปรดสังเกตว่ามีการใช้
{{media url=this}}
ซึ่งเป็นองค์ประกอบไวยากรณ์ Handlebars ที่ช่วยในการรวมรูปภาพไว้ในพรอมต์
- เปิดไฟล์
- โต้ตอบกับ UI
- เปิดพรอมต์
prompts/imgDescription
ใน UI สําหรับนักพัฒนาซอฟต์แวร์ Genkit - ป้อน URL รูปภาพในช่อง
imageUrls
โดยวาง URL ของรูปภาพ เช่น คุณสามารถใช้ภาพปกจาก Wikipedia ที่แสดงหอไอเฟล{ "imageUrls": [ "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg" ] }
- คลิกเรียกใช้
- เปิดพรอมต์
7. ใช้การดึงข้อมูลด้วยการค้นหาความคล้ายคลึงของเวกเตอร์
แม้ว่าการสร้างเนื้อหาครีเอทีฟโฆษณาด้วยโมเดล AI จะน่าประทับใจ แต่การใช้งานจริงมักต้องอิงตามบริบทที่เฉพาะเจาะจง
ในกรณีของ Codelab นี้ คุณมีฐานข้อมูลของปลายทาง (สถานที่และกิจกรรม) และมีเป้าหมายที่จะตรวจสอบว่าคำแนะนำที่โมเดล Gemini สร้างขึ้นจะอ้างอิงเฉพาะรายการภายในฐานข้อมูลนี้
คุณจะใช้ความสามารถของการค้นหาความคล้ายคลึงของเวกเตอร์ในข้อมูลเชิงลึกที่สร้างขึ้นเพื่อเติมเต็มช่องว่างระหว่างข้อความค้นหาที่ไม่มีโครงสร้างกับเนื้อหาที่เกี่ยวข้อง
ทําความเข้าใจการฝังและลําดับชั้นเวกเตอร์
- เวกเตอร์: เวกเตอร์คือการแสดงจุดข้อมูลที่เป็นตัวเลข ซึ่งมักใช้ในการสร้างแบบจำลองข้อมูลที่ซับซ้อน เช่น ข้อความหรือรูปภาพ มิติข้อมูลแต่ละรายการในเวกเตอร์จะสอดคล้องกับฟีเจอร์ที่เฉพาะเจาะจงของข้อมูล
- โมเดลการฝัง: โมเดล AI เฉพาะทางเหล่านี้จะเปลี่ยนข้อมูลอินพุต เช่น ข้อความ เป็นเวกเตอร์มิติสูง สิ่งที่น่าสนใจคืออินพุตที่คล้ายกันจะได้รับการแมปกับเวกเตอร์ที่อยู่ใกล้กันในพื้นที่มิติสูงนี้
- การค้นหาความคล้ายคลึงของเวกเตอร์: เทคนิคนี้ใช้ประโยชน์จากความใกล้เคียงของเวกเตอร์การฝังเพื่อระบุจุดข้อมูลที่เกี่ยวข้อง เมื่อได้รับคําค้นหาอินพุต ระบบจะค้นหารายการในฐานข้อมูลที่เวกเตอร์การฝังคล้ายกัน ซึ่งบ่งบอกถึงความเกี่ยวข้องเชิงความหมาย
ทำความเข้าใจวิธีการทำงานของกระบวนการดึงข้อมูล
- การฝังคําค้นหา: ระบบจะส่งอินพุตของผู้ใช้ (เช่น "ดินเนอร์โรแมนติกในปารีส") ผ่านโมเดลการฝังเพื่อสร้างเวกเตอร์การค้นหา
- การฝังฐานข้อมูล: คุณควรประมวลผลฐานข้อมูลปลายทางล่วงหน้าเพื่อสร้างเวกเตอร์การฝังสําหรับแต่ละรายการ
- การคํานวณความคล้ายคลึง: ระบบจะเปรียบเทียบเวกเตอร์การค้นหากับเวกเตอร์การฝังแต่ละรายการในฐานข้อมูลโดยใช้เมตริกความคล้ายคลึง (เช่น ความคล้ายคลึงแบบโคไซน์)
- การดึงข้อมูล: ระบบจะดึงข้อมูลรายการที่คล้ายกันที่สุดจากฐานข้อมูลเป็นคำแนะนำที่เกี่ยวข้อง โดยอิงตามระดับความใกล้เคียงกับเวกเตอร์การค้นหา
การใช้กลไกการดึงข้อมูลนี้ในแอปพลิเคชันจะช่วยให้คุณใช้ประโยชน์จากโมเดล Gemini เพื่อสร้างคำแนะนำที่ไม่เพียงแต่จะสร้างสรรค์ แต่ยังอิงตามชุดข้อมูลเฉพาะของคุณอย่างมั่นคง แนวทางนี้ช่วยให้มั่นใจว่าเอาต์พุตที่สร้างขึ้นจะยังคงมีความเกี่ยวข้องตามบริบทและสอดคล้องกับข้อมูลที่มีอยู่ในฐานข้อมูล
เปิดใช้การค้นหาความคล้ายคลึงของเวกเตอร์ใน Firestore
ในขั้นตอนก่อนหน้าของโค้ดแล็บนี้ คุณได้ป้อนข้อมูลสถานที่และกิจกรรมตัวอย่างลงในฐานข้อมูล Firestore รายการสถานที่แต่ละรายการมีknownFor
ฟิลด์ข้อความที่อธิบายแอตทริบิวต์ที่น่าสนใจ พร้อมด้วยช่อง embedding
ที่เกี่ยวข้องซึ่งมีการแสดงผลเวกเตอร์ของคำอธิบายนี้
หากต้องการใช้ประโยชน์จากประสิทธิภาพการค้นหาความคล้ายคลึงของเวกเตอร์ในการฝังเหล่านี้ คุณจะต้องสร้างดัชนี Firestore ดัชนีนี้ช่วยให้ดึงข้อมูลสถานที่ได้อย่างมีประสิทธิภาพโดยอิงตามความคล้ายคลึงของเวกเตอร์การฝังกับคำค้นหาหนึ่งๆ
- ในเทอร์มินัล ให้เรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้งคอมโพเนนต์ alpha เวอร์ชันล่าสุด คุณต้องใช้เวอร์ชัน
2024.05.03
ขึ้นไปgcloud components install alpha
- สร้างดัชนี โดยอย่าลืมแทนที่
YOUR_PROJECT_ID
ด้วยรหัสโปรเจ็กต์gcloud firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config field-path=embedding,vector-config='{"dimension":"768","flat": "{}"}'
- เปิด
retrievers/placesRetriever
ใน UI ของนักพัฒนาซอฟต์แวร์ Genkit - คลิกเรียกใช้ ดูออบเจ็กต์ที่สร้างสคาฟเฟิลด์ซึ่งมีข้อความตัวยึดตําแหน่ง ซึ่งระบุตําแหน่งที่คุณจะใช้ตรรกะการเรียกข้อมูล
- เปิดไฟล์
src/lib/genkit/placesRetriever.ts
ในเครื่องมือแก้ไขโค้ด - เลื่อนลงจนสุดแล้วแทนที่ตัวยึดตําแหน่ง
placesRetriever
ด้วยข้อความต่อไปนี้export const placesRetriever = defineFirestoreRetriever({ name: 'placesRetriever', firestore, collection: 'places', contentField: 'knownFor', vectorField: 'embedding', embedder: textEmbeddingGecko, distanceMeasure: 'COSINE', });
ทดสอบเครื่องมือดึงข้อมูล
- ใน UI สําหรับนักพัฒนาซอฟต์แวร์ Genkit ให้เปิดเครื่องมือดึงข้อมูล
retrievers/placesRetriever
- ระบุคําค้นหาต่อไปนี้
{ "content": [ { "text": "UNESCO" } ] }
- หรือจะระบุตัวเลือกก็ได้ ตัวอย่างเช่น วิธีระบุจํานวนเอกสารที่เครื่องมือดึงข้อมูลควรแสดงมีดังนี้
{ "limit": 4 }
- คลิกเรียกใช้
คุณกรองข้อมูลเพิ่มเติมนอกเหนือจากความคล้ายคลึงได้โดยเพิ่มประโยค where
ลงในตัวเลือก
8. การสร้างข้อความที่เพิ่มประสิทธิภาพการดึงข้อมูล (RAG) ด้วย Genkit
ในส่วนก่อนหน้านี้ คุณได้สร้างพรอมต์แต่ละรายการที่จัดการข้อความ, JSON และรูปภาพได้ รวมถึงสร้างสถานที่ท่องเที่ยวและเนื้อหาอื่นๆ ที่น่าสนใจสําหรับผู้ใช้ นอกจากนี้ คุณยังได้ติดตั้งใช้งานพรอมต์ที่ดึงข้อมูลปลายทางที่เกี่ยวข้องจากฐานข้อมูล Firestore ด้วย ตอนนี้ถึงเวลาจัดระเบียบคอมโพเนนต์เหล่านี้ให้เป็นขั้นตอนการสร้างการค้นหาที่เพิ่มประสิทธิภาพ (RAG) ที่สอดคล้องกัน
ส่วนนี้จะแนะนำแนวคิดที่สำคัญของ Genkit ซึ่งเรียกว่า โฟลว์ โฟลว์คือฟังก์ชันแบบสตรีมที่มีการกำหนดประเภทอย่างเข้มงวด ซึ่งสามารถเรียกใช้ได้ทั้งแบบภายในและระยะไกล โดยสามารถสังเกตการณ์ได้อย่างเต็มที่ คุณจัดการและเรียกใช้โฟลว์ได้จากทั้ง CLI ของ Genkit และ UI ของนักพัฒนาซอฟต์แวร์ Genkit
- ตรวจสอบพรอมต์แผนการเดินทางในตัวแก้ไขโค้ด
- เปิดไฟล์
prompts/itineraryGen.prompt
- โปรดสังเกตว่าพรอมต์ขยายเพื่อรับอินพุตเพิ่มเติมอย่างไร โดยเฉพาะข้อมูลกิจกรรมที่มาจากเครื่องมือดึงข้อมูล
- เปิดไฟล์
- ใน UI สําหรับนักพัฒนา Genkit ให้ดูขั้นตอน Genkit ในไฟล์
src/lib/genkit/itineraryFlow.ts
เคล็ดลับ: หากต้องการเพิ่มประสิทธิภาพการแก้ไขข้อบกพร่อง ให้ลองแบ่งขั้นตอนที่ยาวออกเป็นขั้นตอนเล็กๆ ที่จัดการได้ง่าย - ปรับปรุงขั้นตอนด้วยการผสานรวมขั้นตอน "คำอธิบายรูปภาพ" ดังนี้
- ค้นหาความคิดเห็น
TODO: 2
(ประมาณบรรทัดที่ 81) ซึ่งจะทําเครื่องหมายจุดที่คุณจะต้องปรับปรุงขั้นตอน - แทนที่ตัวยึดตําแหน่ง
imgDescription
ที่ว่างเปล่าด้วยเอาต์พุตที่เกิดจากการเรียกใช้พรอมต์imgDescription
- ค้นหาความคิดเห็น
- ทดสอบขั้นตอน
- ไปที่
flows/itineraryFlow
- ใช้อินพุตต่อไปนี้เพื่อทดสอบการดําเนินการของ
itineraryFlow
ที่ประสบความสําเร็จด้วยขั้นตอนที่เพิ่มใหม่{ "request": "Sightseeing in Paris", "imageUrls": [ "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg" ] }
- คลิกเรียกใช้
- ดูเอาต์พุตที่สร้างขึ้น ซึ่งควรรวมคำอธิบายรูปภาพไว้ในคำแนะนำแผนการเดินทาง
- ไปที่
- หากพบข้อผิดพลาดหรือลักษณะการทำงานที่ไม่คาดคิด ให้ดูรายละเอียดในแท็บตรวจสอบ นอกจากนี้ คุณยังใช้แท็บนี้เพื่อตรวจสอบประวัติการเรียกใช้จาก Trace Store ได้ด้วย
RAG สำหรับเว็บแอปพลิเคชัน
- ตรวจสอบว่าเว็บแอปยังทํางานอยู่โดยไปที่ http://localhost:3000/ ในเบราว์เซอร์
- หากเว็บแอปไม่ทํางานแล้ว ให้เรียกใช้คําสั่งต่อไปนี้ในเทอร์มินัล
npm install npm run dev
- โปรดดูหน้าเว็บแอป Dream Your Vacation (http://localhost:3000/gemini)
- ดูซอร์สโค้ด (
src/app/gemini/page.tsx
) สําหรับตัวอย่างการผสานรวม Next.js
9. ทำให้แอปพลิเคชันใช้งานได้ด้วยโฮสติ้งแอป Firebase
ขั้นตอนสุดท้ายในเส้นทางนี้คือการนำเว็บแอปของคุณไปใช้งาน โดยคุณจะใช้ประโยชน์จากโฮสติ้งแอป Firebase ซึ่งเป็นโซลูชันโฮสติ้งที่รองรับเฟรมเวิร์กซึ่งออกแบบมาเพื่อลดความซับซ้อนในการทำให้แอป Next.js และ Angular ใช้งานได้ในแบ็กเอนด์แบบเซิร์ฟเวอร์เลส
- คอมมิตการเปลี่ยนแปลงไปยังที่เก็บ Git ในพื้นที่ แล้วจึงพุชไปยัง GitHub
- ในคอนโซล Firebase ให้ไปที่โฮสติ้งแอปภายในโปรเจ็กต์ Firebase
- คลิกเริ่มต้นใช้งาน > เชื่อมต่อกับ GitHub
- เลือกบัญชี GitHub และที่เก็บ คลิกถัดไป
- ในการตั้งค่าการนําส่ง > ไดเรกทอรีรูท ให้ใช้ค่าเริ่มต้น
- สำหรับสาขาที่ใช้งานอยู่ ให้เลือกสาขา main ของที่เก็บ GitHub คลิกถัดไป
- ป้อนรหัสสําหรับแบ็กเอนด์ (เช่น
compass
) - เมื่อระบบถามว่าต้องการสร้างหรือเชื่อมโยงเว็บแอป Firebase ให้เลือกเลือกเว็บแอป Firebase ที่มีอยู่ แล้วเลือกแอปที่คุณสร้างในขั้นตอนก่อนหน้าในโค้ดแล็บนี้
- คลิกเสร็จสิ้นและทำให้ใช้งานได้
การตรวจสอบสถานะการติดตั้งใช้งาน
กระบวนการทำให้ใช้งานได้จะใช้เวลา 2-3 นาที คุณติดตามความคืบหน้าได้ในส่วนการโฮสต์แอปของคอนโซล Firebase
ให้สิทธิ์แก่บัญชีบริการ
หากต้องการให้แบ็กเอนด์ Node.js เข้าถึงทรัพยากร Vertex AI ได้ คุณต้องกำหนดบทบาท aiplatform.user
ให้กับบัญชีบริการของแอป โดยทำดังนี้
gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
--member "serviceAccount:firebase-app-hosting-compute@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
--role "roles/aiplatform.user"
เมื่อดำเนินการเสร็จแล้ว ผู้ใช้จะเข้าถึงเว็บแอปของคุณได้
การนำกลับมาใช้งานใหม่โดยอัตโนมัติ
Firebase App Hosting จะช่วยลดความซับซ้อนในการอัปเดตในอนาคต เมื่อใดก็ตามที่คุณพุชการเปลี่ยนแปลงไปยังสาขาหลักของที่เก็บ GitHub Firebase App Hosting จะสร้างและทําให้แอปของคุณใช้งานได้อีกครั้งโดยอัตโนมัติ เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานเวอร์ชันล่าสุดเสมอ
10. บทสรุป
ขอแสดงความยินดีที่ผ่าน Codelab ที่ครอบคลุมนี้
คุณใช้ประโยชน์จาก Firebase Genkit, Firestore และ Vertex AI เพื่อสร้าง "ขั้นตอน" ที่ซับซ้อนซึ่งสร้างคําแนะนําการเดินทางที่ปรับเปลี่ยนในแบบของคุณตามความต้องการและแรงบันดาลใจของผู้ใช้ และทั้งหมดนี้ยังอิงตามข้อมูลของแอปพลิเคชันด้วย
ตลอดเส้นทางนี้ คุณได้รับประสบการณ์จริงเกี่ยวกับรูปแบบวิศวกรรมซอฟต์แวร์ที่จำเป็นซึ่งสําคัญต่อการสร้างแอปพลิเคชัน Generative AI ที่มีประสิทธิภาพ รูปแบบเหล่านี้ ได้แก่
- การจัดการพรอมต์: จัดระเบียบและดูแลรักษาพรอมต์เป็นโค้ดเพื่อการทำงานร่วมกันและการควบคุมเวอร์ชันที่ดียิ่งขึ้น
- เนื้อหาแบบหลายโมดัล: การผสานรวมข้อมูลประเภทต่างๆ เช่น รูปภาพและข้อความ เพื่อปรับปรุงการโต้ตอบกับ AI
- สคีมาอินพุต/เอาต์พุต: การจัดโครงสร้างข้อมูลเพื่อการผสานรวมและการตรวจสอบที่ราบรื่นในแอปพลิเคชัน
- ที่เก็บเวกเตอร์: ใช้ประโยชน์จากการฝังเวกเตอร์เพื่อค้นหาความคล้ายคลึงและดึงข้อมูลที่เกี่ยวข้องได้อย่างมีประสิทธิภาพ
- การดึงข้อมูล: การใช้กลไกในการดึงข้อมูลและรวมข้อมูลจากฐานข้อมูลไว้ในเนื้อหาที่ AI สร้างขึ้น
- Retrieval Augmented Generation (RAG): การรวมเทคนิคการดึงข้อมูลเข้ากับ Generative AI เพื่อให้ได้เอาต์พุตที่มีความเกี่ยวข้องและถูกต้องตามบริบท
- เครื่องมือวัดประสิทธิภาพของโฟลว์: การสร้างและประสานเวิร์กโฟลว์ AI ที่ซับซ้อนเพื่อให้ทำงานได้อย่างราบรื่นและสังเกตได้
เมื่อเข้าใจแนวคิดเหล่านี้และนําไปใช้ในระบบนิเวศ Firebase แล้ว คุณก็พร้อมที่จะผจญภัยในโลก AI ยุคใหม่ สำรวจความเป็นไปได้อันหลากหลาย สร้างแอปพลิเคชันสุดล้ำ และก้าวข้ามขีดจำกัดของสิ่งที่ทำได้ด้วย Generative AI
สำรวจตัวเลือกการติดตั้งใช้งานอื่นๆ
Genkit มีตัวเลือกต่างๆ ในการทำให้ใช้งานได้จริงเพื่อตอบสนองความต้องการเฉพาะของคุณ ซึ่งรวมถึง
- Cloud Functions for Firebase
- Cloud Run
- Next.js
- สภาพแวดล้อม Node.js ใดก็ได้
- Genkit ยังรองรับ Go ด้วย
เพียงเลือกรายการที่เหมาะกับคุณที่สุดโดยเรียกใช้คําสั่งต่อไปนี้ในโฟลเดอร์โหนด (package.json
)
npx genkit init
ขั้นตอนถัดไป
- ลองใช้พรอมต์และใช้ประโยชน์จากกรอบบริบทขนาดใหญ่ใน Google AI Studio หรือ Vertex AI Studio
- ดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหาด้วยระบบการสร้างข้อความเสริม (RAG) ของ AI
- ดูเอกสารอย่างเป็นทางการของ Firebase Genkit
- ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถในการค้นหาความคล้ายคลึงกันใน Firestore และ Cloud SQL สำหรับ PostgreSQL
- เจาะลึกเวิร์กโฟลว์ genAI ด้วยการเรียกใช้ฟังก์ชัน