1. ก่อนเริ่มต้น
ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีใช้ Genkit เพื่อผสานรวม Generative AI เข้ากับแอปของคุณ Genkit เป็นเฟรมเวิร์กโอเพนซอร์สที่จะช่วยคุณสร้าง ทำให้ใช้งานได้ และตรวจสอบแอปที่ขับเคลื่อนด้วย AI ซึ่งพร้อมใช้งานจริง
Genkit ออกแบบมาสำหรับนักพัฒนาแอปเพื่อช่วยให้คุณผสานรวมความสามารถของ AI ที่ทรงพลังเข้ากับแอปได้อย่างง่ายดายด้วยรูปแบบและกระบวนทัศน์ที่คุ้นเคย สร้างโดยทีม Firebase โดยใช้ประโยชน์จากประสบการณ์ในการสร้างเครื่องมือที่นักพัฒนาแอปหลายล้านคนทั่วโลกใช้
ข้อกำหนดเบื้องต้น
- คุ้นเคยกับ Firestore, Node.js และ TypeScript
สิ่งที่คุณจะได้เรียนรู้
- วิธีสร้างแอปที่ชาญฉลาดยิ่งขึ้นด้วยความสามารถในการค้นหาความคล้ายคลึงของเวกเตอร์ขั้นสูงของ Firestore
- วิธีนำ Generative AI ไปใช้ในแอปของคุณอย่างเป็นรูปธรรมโดยใช้ Genkit
- เตรียมโซลูชันให้พร้อมสำหรับการติดตั้งใช้งานและการผสานรวม
สิ่งที่ต้องมี
- เบราว์เซอร์ที่คุณเลือก เช่น Google Chrome
- สภาพแวดล้อมในการพัฒนาที่มีเครื่องมือแก้ไขโค้ดและเทอร์มินัล
- บัญชี Google สำหรับการสร้างและการจัดการโปรเจ็กต์ Firebase
2. ตรวจสอบเว็บแอปและบริการระบบคลาวด์ที่ใช้
ในส่วนนี้ คุณจะได้ตรวจสอบเว็บแอปที่จะสร้างด้วยโค้ดแล็บนี้ รวมถึงเรียนรู้เกี่ยวกับบริการระบบคลาวด์ที่จะใช้
เว็บแอป
ในโค้ดแล็บนี้ คุณจะได้ทำงานในโค้ดเบสของแอปชื่อ Compass ซึ่งเป็นแอปวางแผนวันหยุด ผู้ใช้สามารถเลือกจุดหมายปลายทาง ดูกิจกรรมในจุดหมายปลายทาง และสร้างแผนการเดินทางได้
ในโค้ดแล็บนี้ คุณจะได้ใช้ฟีเจอร์ใหม่ 2 รายการซึ่งมีจุดประสงค์เพื่อปรับปรุงการมีส่วนร่วมของผู้ใช้กับหน้าแรกของแอป ฟีเจอร์ทั้ง 2 รายการนี้ทำงานด้วย Generative AI
- ปัจจุบันแอปจะแสดงรายการปลายทางแบบคงที่ คุณจะเปลี่ยนให้เป็นแบบไดนามิก
- คุณจะใช้แผนการเดินทางที่กรอกข้อมูลให้โดยอัตโนมัติเพื่อเพิ่มความเหนียวหนึบ
บริการที่ใช้
ในโค้ดแล็บนี้ คุณจะได้ใช้บริการและฟีเจอร์ต่างๆ ของ Firebase และ Cloud มากมาย และเราจะจัดเตรียมโค้ดเริ่มต้นส่วนใหญ่ให้คุณ ตารางต่อไปนี้แสดงบริการที่คุณจะใช้และเหตุผลในการใช้บริการเหล่านั้น
บริการ | เหตุผลในการใช้งาน |
คุณใช้ Genkit เพื่อนำ Generative AI มาใช้ในแอปพลิเคชัน Node.js / Next.js | |
คุณจัดเก็บข้อมูลใน Cloud Firestore ซึ่งจะใช้สำหรับการค้นหาความคล้ายคลึงของเวกเตอร์ | |
คุณใช้โมเดลพื้นฐานจาก Vertex AI (เช่น Gemini) เพื่อขับเคลื่อนฟีเจอร์ AI | |
คุณเลือกใช้ Firebase App Hosting ที่ปรับปรุงใหม่เพื่อแสดงเว็บแอป 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 ของ Codelab ที่คุณเพิ่งสร้าง
git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
หากไม่ได้ติดตั้ง Git หรือไม่ต้องการสร้างที่เก็บใหม่ ให้ทำดังนี้
ดาวน์โหลดที่เก็บ GitHub เป็นไฟล์ ZIP
ตรวจสอบโครงสร้างโฟลเดอร์
ในเครื่องของคุณ ให้ค้นหารีโปซิโทรีที่โคลนแล้วและตรวจสอบโครงสร้างโฟลเดอร์
โฟลเดอร์ | คำอธิบาย |
| เครื่องมือบรรทัดคำสั่ง Helper เพื่อป้อนข้อมูลล่วงหน้าในคอลเล็กชัน Firestore อย่างรวดเร็ว |
*อื่นๆ | โค้ดเว็บแอป Next.js |
โฟลเดอร์รูทมีไฟล์ README.md
ซึ่งช่วยให้เริ่มต้นเรียกใช้เว็บแอปได้อย่างรวดเร็วโดยใช้คำสั่งที่ปรับปรุงแล้ว อย่างไรก็ตาม หากคุณเป็นผู้เรียนครั้งแรก คุณควรทำ Codelab นี้ (แทนที่จะเป็นคู่มือเริ่มต้นฉบับย่อ) เนื่องจาก 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 ของ Codelab นี้firebase login
- ในเทอร์มินัล ให้ป้อน
Y
หรือN
ขึ้นอยู่กับว่าคุณต้องการให้ Firebase รวบรวมข้อมูลหรือไม่ (ตัวเลือกใดก็ได้สำหรับ Codelab นี้) - ในเบราว์เซอร์ ให้เลือกบัญชี Google แล้วคลิกอนุญาต
ติดตั้ง gcloud CLI ของ Google Cloud
- ติดตั้ง gcloud CLI
- ในเทอร์มินัล ให้เข้าสู่ระบบ Google Cloud โดยทำดังนี้
gcloud auth login
4. ตั้งค่าโปรเจ็กต์ Firebase
ในส่วนนี้ คุณจะตั้งค่าโปรเจ็กต์ Firebase และลงทะเบียน Firebase Web App ในโปรเจ็กต์ นอกจากนี้ คุณยังจะเปิดใช้บริการ 2-3 รายการที่เว็บแอปตัวอย่างใช้ใน Codelab นี้ในภายหลัง
ขั้นตอนทั้งหมดในส่วนนี้จะดำเนินการในคอนโซล Firebase
สร้างโปรเจ็กต์ Firebase
- ลงชื่อเข้าใช้คอนโซล Firebase โดยใช้บัญชี Google เดียวกับที่คุณใช้ในขั้นตอนก่อนหน้า
- คลิกปุ่มเพื่อสร้างโปรเจ็กต์ใหม่ แล้วป้อนชื่อโปรเจ็กต์ (เช่น
Compass Codelab
)
- คลิกต่อไป
- หากได้รับแจ้ง ให้อ่านและยอมรับข้อกำหนดของ Firebase แล้วคลิกต่อไป
- (ไม่บังคับ) เปิดใช้ความช่วยเหลือจาก AI ในคอนโซล Firebase (เรียกว่า "Gemini ใน Firebase")
- สำหรับ Codelab นี้ คุณไม่จำเป็นต้องใช้ Google Analytics ดังนั้นให้ปิดตัวเลือก Google Analytics
- คลิกสร้างโปรเจ็กต์ รอให้ระบบจัดสรรโปรเจ็กต์ แล้วคลิกดำเนินการต่อ
เพิ่มเว็บแอปไปยังโปรเจ็กต์ Firebase
- ไปที่หน้าจอภาพรวมโปรเจ็กต์ในโปรเจ็กต์ Firebase แล้วคลิก
เว็บ
- ในกล่องข้อความชื่อเล่นของแอป ให้ป้อนชื่อเล่นของแอปที่จำง่าย เช่น
My Compass Codelab App
คุณไม่ต้องเลือกช่องทำเครื่องหมายสำหรับการตั้งค่า Firebase Hosting เนื่องจากคุณจะตั้งค่าบริการโฮสติ้งในขั้นตอนสุดท้ายของ Codelab นี้ - คลิกลงทะเบียนแอป > ไปที่คอนโซล
เยี่ยมเลย ตอนนี้คุณได้ลงทะเบียนเว็บแอปในโปรเจ็กต์ Firebase ใหม่แล้ว
อัปเกรดแพ็กเกจราคาของ Firebase
หากต้องการใช้ Genkit และ Vertex AI (รวมถึงบริการระบบคลาวด์ที่เกี่ยวข้อง) โปรเจ็กต์ Firebase ของคุณต้องอยู่ในแพ็กเกจราคาแบบจ่ายตามการใช้งาน (Blaze) ซึ่งหมายความว่าโปรเจ็กต์ต้องลิงก์กับบัญชีการเรียกเก็บเงินใน Cloud
- บัญชีสำหรับการเรียกเก็บเงินของ Cloud ต้องมีวิธีการชำระเงิน เช่น บัตรเครดิต
- หากเพิ่งเริ่มใช้ Firebase และ Google Cloud โปรดตรวจสอบว่าคุณมีสิทธิ์รับเครดิต$300 และบัญชีสำหรับการเรียกเก็บเงินในระบบคลาวด์แบบทดลองใช้ฟรีหรือไม่
- หากคุณกำลังทำ Codelab นี้เป็นส่วนหนึ่งของกิจกรรม โปรดสอบถามผู้จัดว่ามีเครดิต Cloud ให้หรือไม่
ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดราคาสำหรับ Vertex AI
หากต้องการอัปเกรดโปรเจ็กต์เป็นแพ็กเกจ Blaze ให้ทำตามขั้นตอนต่อไปนี้
- ในคอนโซล Firebase ให้เลือกอัปเกรดแพ็กเกจ
- เลือกแพ็กเกจ Blaze ทำตามวิธีการบนหน้าจอเพื่อลิงก์บัญชีสำหรับการเรียกเก็บเงินใน Cloud กับโปรเจ็กต์
หากคุณต้องสร้างบัญชีสำหรับการเรียกเก็บเงินใน Cloud เป็นส่วนหนึ่งของการอัปเกรดนี้ คุณอาจต้องกลับไปที่ขั้นตอนการอัปเกรดใน Firebase Console เพื่อทำการอัปเกรดให้เสร็จสมบูรณ์
ตั้งค่า 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
Codelab นี้มีข้อมูลตัวอย่างที่สร้างไว้ล่วงหน้าสำหรับ 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" ให้เลือกตัวเลือก Config
- คัดลอกข้อมูลโค้ด โดยจะเริ่มต้นด้วย
const firebaseConfig ...
- เพิ่มการกำหนดค่า Firebase ลงในโค้ดเบสของเว็บแอป
- เปิดไฟล์
src/lib/genkit/genkit.config.ts
ในเครื่องมือแก้ไขโค้ด - แทนที่ส่วนที่เกี่ยวข้องด้วยโค้ดที่คุณคัดลอก
- บันทึกไฟล์
- เปิดไฟล์
แสดงตัวอย่างเว็บแอปในเบราว์เซอร์
- ในเทอร์มินัล ให้ติดตั้งการอ้างอิง แล้วเรียกใช้เว็บแอปโดยใช้คำสั่งต่อไปนี้
npm install npm run dev:next
- ในเบราว์เซอร์ ให้ไปที่ URL การโฮสต์ที่โฮสต์ไว้ในเครื่องเพื่อดูเว็บแอป เช่น ในกรณีส่วนใหญ่ URL คือ http://localhost:3000/ หรือ URL ที่คล้ายกัน
Compass เป็นแอป Next.js ที่ใช้ React Server Components และนี่คือหน้าแรก
คลิกค้นหาทริปในฝัน คุณจะเห็นว่าระบบแสดงข้อมูลที่ฮาร์ดโค้ดไว้สำหรับปลายทางที่กำหนดบางแห่ง
คุณสำรวจได้ตามสบาย เมื่อพร้อมที่จะดำเนินการต่อ ให้คลิกปุ่มหน้าแรก (ที่มุมขวาบน)
6. เจาะลึก Generative AI ด้วย Genkit
ตอนนี้คุณก็พร้อมใช้ประโยชน์จากความสามารถของ Generative AI ในแอปพลิเคชันแล้ว ส่วนนี้ของโค้ดแล็บจะแนะนําวิธีใช้ฟีเจอร์ที่แนะนําจุดหมายปลายทางตามแรงบันดาลใจที่ผู้ใช้ระบุ คุณจะใช้ Genkit และ Vertex AI ของ Google Cloud เป็นผู้ให้บริการสำหรับโมเดล Generative (คุณจะใช้ Gemini)
Genkit สามารถจัดเก็บสถานะการติดตามและโฟลว์ (ซึ่งช่วยให้คุณตรวจสอบผลลัพธ์ของการเรียกใช้โฟลว์ Genkit ได้) ใน Codelab นี้ คุณจะได้ใช้ Firestore เพื่อจัดเก็บการติดตามเหล่านี้
ในขั้นตอนสุดท้ายของโค้ดแล็บนี้ คุณจะได้ทำให้แอป Genkit ใช้งานได้ใน App Hosting ของ 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 แนะนำวันหยุดพักผ่อน โปรดทราบว่าคุณจะใช้คำสั่งของระบบเพื่อกำหนดลักษณะการทำงานของโมเดลตามความต้องการเฉพาะของคุณได้อย่างไร นอกจากนี้ วิธีนี้ยังใช้ได้กับโมเดลที่ไม่รองรับคำสั่งของระบบโดยกำเนิดด้วย
จัดการพรอมต์
Genkit ขอแนะนำ Dotprompt ซึ่งเป็นปลั๊กอินและรูปแบบข้อความที่ออกแบบมาเพื่อเพิ่มประสิทธิภาพการสร้างและการจัดการพรอมต์ Generative AI แนวคิดหลักของ Dotprompt คือการถือว่าพรอมต์เป็นโค้ด ซึ่งช่วยให้คุณเขียน บำรุงรักษา และควบคุมเวอร์ชันของพรอมต์ควบคู่ไปกับโค้ดแอปพลิเคชันได้
หากต้องการใช้ Dotprompt ให้เริ่มต้นด้วยข้อความ "Hello World" ดังนี้
- เปิดไฟล์
prompts/1-hello-world.prompt
ในเครื่องมือแก้ไขโค้ด - ใน UI สำหรับนักพัฒนาซอฟต์แวร์ของ Genkit ให้เปิด
prompts/1-hello-world
- ใช้ชื่อหรือรหัสภาษาที่คุณคุ้นเคย หรือปล่อยให้เป็นสตริงว่าง
- คลิกเรียกใช้
- ลองใช้ค่าอื่นๆ โมเดลภาษาขนาดใหญ่มีความสามารถในการทำความเข้าใจพรอมต์ที่ย่อ สะกดผิด หรือไม่สมบูรณ์ในคำค้นหาอย่างง่าย เช่น คำค้นหานี้
ปรับปรุงเอาต์พุตด้วย 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 ให้ลองอีกครั้งหรือพยายามแก้ไขเอาต์พุตได้หากไม่ตรงกับสคีมา
ข้อดีหลักของสคีมาเอาต์พุต
- การผสานรวมที่ง่ายขึ้น: ผสานรวมข้อมูลที่มีโครงสร้างเข้ากับองค์ประกอบ UI ของแอปได้อย่างง่ายดาย
- การตรวจสอบข้อมูล: ตรวจสอบความถูกต้องและความสอดคล้องของเอาต์พุตที่สร้างขึ้น
- การจัดการข้อผิดพลาด: ใช้กลไกเพื่อแก้ไขความไม่ตรงกันของสคีมา
การใช้ประโยชน์จากสคีมาเอาต์พุตจะช่วยยกระดับประสบการณ์การใช้งาน Genkit ทำให้คุณสร้างข้อมูลที่มีโครงสร้างที่ปรับแต่งแล้วเพื่อประสบการณ์ของผู้ใช้ที่สมบูรณ์และไดนามิกยิ่งขึ้นได้
ใช้ประโยชน์จากอินพุตหลายรูปแบบ
ลองนึกภาพแอปของคุณแนะนำจุดหมายปลายทางวันหยุดที่ปรับเปลี่ยนในแบบของคุณโดยอิงตามรูปภาพที่ผู้ใช้เห็นว่าสร้างแรงบันดาลใจ Genkit ร่วมกับโมเดล Generative แบบมัลติโมดัลจะช่วยให้คุณสร้างสรรค์วิสัยทัศน์นี้ให้เป็นจริงได้
- ในตัวแก้ไขโค้ด ให้ตรวจสอบไฟล์พรอมต์
- เปิดไฟล์
prompts/imgDescription.prompt
- โปรดสังเกตการรวม
{{media url=this}}
ซึ่งเป็นองค์ประกอบไวยากรณ์ของ Handlebars ที่ช่วยให้คุณรวมรูปภาพไว้ในพรอมต์ได้
- เปิดไฟล์
- โต้ตอบกับ UI
- ใน UI สำหรับนักพัฒนาแอป Genkit ให้เปิดพรอมต์
prompts/imgDescription
- ป้อน 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" ] }
- คลิกเรียกใช้
- ใน UI สำหรับนักพัฒนาแอป Genkit ให้เปิดพรอมต์
7. ใช้การดึงข้อมูลด้วยการค้นหาความคล้ายคลึงของเวกเตอร์
แม้ว่าการสร้างเนื้อหาครีเอทีฟโฆษณาด้วยโมเดล AI จะน่าประทับใจ แต่การใช้งานจริงมักต้องอิงเอาต์พุตกับบริบทที่เฉพาะเจาะจง
ในกรณีของ Codelab นี้ คุณมีฐานข้อมูลของจุดหมายปลายทาง (สถานที่และกิจกรรม) และมีเป้าหมายที่จะทำให้คำแนะนำที่โมเดล Gemini สร้างขึ้นอ้างอิงเฉพาะรายการภายในฐานข้อมูลนี้
คุณจะใช้ประโยชน์จากการค้นหาความคล้ายคลึงของเวกเตอร์ในการฝังที่สร้างขึ้นเพื่อเชื่อมช่องว่างระหว่างคำค้นหาที่ไม่มีโครงสร้างกับเนื้อหาที่เกี่ยวข้อง
ทำความเข้าใจการฝังและความคล้ายคลึงของเวกเตอร์
- เวกเตอร์: เวกเตอร์คือการแสดงข้อมูลเป็นตัวเลข ซึ่งมักใช้เพื่อสร้างแบบจำลองข้อมูลที่ซับซ้อน เช่น ข้อความหรือรูปภาพ มิติข้อมูลแต่ละรายการในเวกเตอร์จะสอดคล้องกับฟีเจอร์ที่เฉพาะเจาะจงของข้อมูล
- โมเดลการฝัง: โมเดล AI เฉพาะทางเหล่านี้จะแปลงข้อมูลอินพุต เช่น ข้อความ ให้เป็นเวกเตอร์ที่มีมิติสูง สิ่งที่น่าสนใจคืออินพุตที่คล้ายกันจะได้รับการแมปกับเวกเตอร์ที่อยู่ใกล้กันในพื้นที่ที่มีมิติสูงนี้
- การค้นหาความคล้ายกันของเวกเตอร์: เทคนิคนี้ใช้ประโยชน์จากความใกล้เคียงของเวกเตอร์การฝังเพื่อระบุจุดข้อมูลที่เกี่ยวข้อง เมื่อได้รับคำค้นหาอินพุต ระบบจะค้นหารายการในฐานข้อมูลที่มีเวกเตอร์การฝังที่คล้ายกัน ซึ่งบ่งบอกถึงความเกี่ยวข้องเชิงความหมาย
ทำความเข้าใจวิธีการทำงานของกระบวนการดึงข้อมูล
- การฝังคำค้นหา: ระบบจะส่งอินพุตของผู้ใช้ (เช่น "อาหารค่ำสุดโรแมนติกในปารีส") ผ่านโมเดลการฝังเพื่อสร้างเวกเตอร์คำค้นหา
- การฝังฐานข้อมูล: คุณควรประมวลผลฐานข้อมูลของจุดหมายปลายทางล่วงหน้าเพื่อสร้างเวกเตอร์การฝังสำหรับแต่ละรายการ
- การคำนวณความคล้ายคลึงกัน: ระบบจะเปรียบเทียบเวกเตอร์คำค้นหากับเวกเตอร์การฝังแต่ละรายการในฐานข้อมูลโดยใช้เมตริกความคล้ายคลึงกัน (เช่น ความคล้ายคลึงกันของโคไซน์)
- การดึงข้อมูล: ระบบจะดึงข้อมูลรายการที่คล้ายกันมากที่สุดจากฐานข้อมูลตามความใกล้เคียงกับเวกเตอร์คำค้นหาเป็นคำแนะนำที่เกี่ยวข้อง
การผสานกลไกการดึงข้อมูลนี้เข้ากับแอปพลิเคชันจะช่วยให้คุณใช้ประโยชน์จากโมเดล Gemini เพื่อสร้างคำแนะนำที่ไม่เพียงแต่สร้างสรรค์ แต่ยังอิงตามชุดข้อมูลเฉพาะของคุณอย่างมั่นคง แนวทางนี้ช่วยให้มั่นใจได้ว่าเอาต์พุตที่สร้างขึ้นจะยังคงเกี่ยวข้องตามบริบทและสอดคล้องกับข้อมูลที่มีอยู่ในฐานข้อมูล
เปิดใช้การค้นหาความคล้ายคลึงของเวกเตอร์ใน Firestore
ในขั้นตอนก่อนหน้าของ Codelab นี้ คุณได้ป้อนข้อมูลสถานที่และกิจกรรมตัวอย่างลงในฐานข้อมูล Firestore ข้อมูลสถานที่แต่ละรายการจะมีknownFor
ฟิลด์ข้อความที่อธิบายแอตทริบิวต์ที่โดดเด่น พร้อมด้วยembedding
ฟิลด์ที่เกี่ยวข้องซึ่งมีตัวแทนเวกเตอร์ของคำอธิบายนี้
หากต้องการใช้ประโยชน์จากความสามารถในการค้นหาความคล้ายกันของเวกเตอร์ใน Embedding เหล่านี้ คุณจะต้องสร้างดัชนี Firestore ดัชนีนี้ช่วยให้ดึงข้อมูลสถานที่ได้อย่างมีประสิทธิภาพโดยอิงตามความคล้ายคลึงของเวกเตอร์การฝังกับคำค้นหาที่ระบุ
- สร้างดัชนีโดยตรวจสอบว่าได้แทนที่
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(ai, { name: 'placesRetriever', firestore, collection: 'places', contentField: 'knownFor', vectorField: 'embedding', embedder: vertexAI.embedder('text-embedding-005', {outputDimensionality: 768}), distanceMeasure: 'COSINE', });
ทดสอบตัวดึงข้อมูล
- ใน UI สำหรับนักพัฒนาซอฟต์แวร์ของ Genkit ให้เปิดเครื่องมือดึงข้อมูล
retrievers/placesRetriever
- ระบุคำค้นหาต่อไปนี้
{ "content": [ { "text": "UNESCO" } ] }
- คุณยังระบุตัวเลือกได้ด้วย ตัวอย่างเช่น วิธีระบุจำนวนเอกสารที่ Retriever ควรแสดงมีดังนี้
{ "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" ] }
- คลิกเรียกใช้
- สังเกตเอาต์พุตที่สร้างขึ้น ซึ่งควรจะรวมคำอธิบายรูปภาพไว้ในคำแนะนำแผนการเดินทาง
- ไปที่
- หากพบข้อผิดพลาดหรือลักษณะการทำงานที่ไม่คาดคิด ให้ตรวจสอบรายละเอียดในแท็บตรวจสอบ นอกจากนี้ คุณยังใช้แท็บนี้เพื่อตรวจสอบประวัติการดำเนินการจากที่เก็บการติดตามได้ด้วย
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 App Hosting
ขั้นตอนสุดท้ายในเส้นทางนี้คือการทําให้เว็บแอปใช้งานได้ คุณจะใช้ประโยชน์จากโฮสติ้งแอป Firebase ซึ่งเป็นโซลูชันโฮสติ้งที่รับรู้เฟรมเวิร์กซึ่งออกแบบมาเพื่อลดความซับซ้อนในการทําให้แอป Next.js และ Angular ใช้งานได้ในแบ็กเอนด์แบบไร้เซิร์ฟเวอร์
- คอมมิตการเปลี่ยนแปลงไปยังที่เก็บ Git ในเครื่อง แล้วพุชไปยัง GitHub
- ในคอนโซล Firebase ให้ไปที่ App Hosting ภายในโปรเจ็กต์ Firebase
- คลิกเริ่มต้นใช้งาน > เชื่อมต่อกับ GitHub
- เลือกบัญชี GitHub และที่เก็บ คลิกถัดไป
- ในการตั้งค่าการติดตั้งใช้งาน > ไดเรกทอรีราก ให้ใช้ค่าเริ่มต้น
- สำหรับสาขาที่ใช้งานจริง ให้เลือกสาขา main ของที่เก็บ GitHub คลิกถัดไป
- ป้อนรหัสสำหรับแบ็กเอนด์ (เช่น
compass
) - เมื่อระบบถามว่าต้องการสร้างหรือเชื่อมโยงเว็บแอป Firebase หรือไม่ ให้เลือกเลือกเว็บแอป Firebase ที่มีอยู่ แล้วเลือกแอปที่คุณสร้างในขั้นตอนก่อนหน้าในโค้ดแล็บนี้
- คลิกเสร็จสิ้นและทำให้ใช้งานได้
การตรวจสอบสถานะการติดตั้งใช้งาน
กระบวนการติดตั้งใช้งานจะใช้เวลาสักครู่ คุณติดตามความคืบหน้าได้ในส่วน App Hosting ของคอนโซล 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 ที่ครอบคลุมนี้เสร็จสมบูรณ์
คุณใช้ประโยชน์จาก Genkit, Firestore และ Vertex AI ได้อย่างมีประสิทธิภาพเพื่อสร้าง "โฟลว์" ที่ซับซ้อนซึ่งสร้างคำแนะนำวันหยุดที่ปรับเปลี่ยนในแบบของผู้ใช้ตามความชอบและแรงบันดาลใจของผู้ใช้ ขณะเดียวกันก็อิงตามข้อมูลของแอปพลิเคชัน
ตลอดเส้นทางนี้ คุณได้รับประสบการณ์จากการลงมือปฏิบัติจริงเกี่ยวกับรูปแบบวิศวกรรมซอฟต์แวร์ที่จำเป็น ซึ่งมีความสำคัญต่อการสร้างแอปพลิเคชัน Generative AI ที่มีประสิทธิภาพ รูปแบบเหล่านี้ ได้แก่
- การจัดการพรอมต์: จัดระเบียบและดูแลพรอมต์เป็นโค้ดเพื่อการทำงานร่วมกันและการควบคุมเวอร์ชันที่ดีขึ้น
- เนื้อหาแบบหลายโมดัล: การผสานรวมข้อมูลประเภทต่างๆ เช่น รูปภาพและข้อความ เพื่อปรับปรุงการโต้ตอบของ AI
- สคีมาอินพุต/เอาต์พุต: จัดโครงสร้างข้อมูลเพื่อการผสานรวมและการตรวจสอบที่ราบรื่นในแอปพลิเคชัน
- ที่เก็บเวกเตอร์: ใช้ประโยชน์จากการฝังเวกเตอร์เพื่อการค้นหาความคล้ายคลึงและการดึงข้อมูลที่เกี่ยวข้องอย่างมีประสิทธิภาพ
- การดึงข้อมูล: การใช้กลไกเพื่อดึงและรวมข้อมูลจากฐานข้อมูลลงในเนื้อหาที่ AI สร้างขึ้น
- การสร้างแบบดึงข้อมูลเสริม (RAG): การรวมเทคนิคการดึงข้อมูลเข้ากับ Generative AI เพื่อให้ได้เอาต์พุตที่เกี่ยวข้องตามบริบทและถูกต้อง
- การวัดผลโฟลว์: สร้างและจัดระเบียบเวิร์กโฟลว์ AI ที่ซับซ้อนเพื่อให้การดำเนินการเป็นไปอย่างราบรื่นและสังเกตได้
การฝึกฝนแนวคิดเหล่านี้และนำไปใช้ภายในระบบนิเวศของ Firebase จะช่วยให้คุณพร้อมที่จะออกผจญภัยในโลกของ GenAI ด้วยตัวคุณเอง สำรวจความเป็นไปได้อันกว้างใหญ่ สร้างแอปพลิเคชันที่เป็นนวัตกรรมใหม่ และก้าวข้ามขีดจำกัดของสิ่งที่ทำได้ด้วย 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
- ดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหาด้วยการสร้างที่เพิ่มการดึงข้อมูลด้วย AI (RAG)
- ดูเอกสารอย่างเป็นทางการสำหรับ Genkit
- ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถในการค้นหาความคล้ายคลึงใน Firestore และ Cloud SQL สำหรับ PostgreSQL
- เจาะลึกโฟลว์ GenAI ด้วยการเรียกใช้ฟังก์ชัน