สร้างฟีเจอร์ Gen AI ที่ขับเคลื่อนโดยข้อมูลของคุณด้วย Firebase Genkit

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 หลายรายการ และเรามีโค้ดเริ่มต้นส่วนใหญ่ไว้ให้แล้ว ตารางต่อไปนี้แสดงบริการที่คุณจะใช้และเหตุผลในการใช้

3. ตั้งค่าสภาพแวดล้อมการพัฒนา

ยืนยันเวอร์ชัน Node.js

1. ในเทอร์มินัล ให้ตรวจสอบว่าคุณได้ติดตั้ง Node.js เวอร์ชัน 20.0.0 ขึ้นไปแล้ว โดยทำดังนี้

   node -v
   

2. หากไม่มี Node.js เวอร์ชัน 20.0.0 ขึ้นไป ให้ดาวน์โหลดเวอร์ชัน LTS เวอร์ชันล่าสุดและติดตั้ง

รับซอร์สโค้ดของ Codelab

หากคุณมีบัญชี GitHub ให้ทำดังนี้

1. สร้างที่เก็บข้อมูลใหม่โดยใช้เทมเพลตของเราจาก github.com/FirebaseExtended/codelab-ai-genkit-rag
2. สร้างโคลนที่เก็บ GitHub ของโค้ดแล็บที่คุณเพิ่งสร้างขึ้นในเครื่องโดยทำดังนี้

   git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
   

หากไม่ได้ติดตั้ง Git หรือไม่ต้องการสร้างที่เก็บใหม่ ให้ทำดังนี้

ดาวน์โหลดที่เก็บ GitHub เป็นไฟล์ ZIP

ตรวจสอบโครงสร้างโฟลเดอร์

ค้นหาที่เก็บข้อมูลที่โคลนและตรวจสอบโครงสร้างโฟลเดอร์ในเครื่อง

โฟลเดอร์รูทจะมีไฟล์ README.md ที่เสนอการเริ่มต้นใช้งานอย่างรวดเร็วเพื่อเรียกใช้เว็บแอปโดยใช้วิธีการที่มีประสิทธิภาพ อย่างไรก็ตาม หากคุณเป็นมือใหม่ คุณควรทำ Codelab นี้ให้เสร็จ (แทนที่จะใช้การเริ่มต้นใช้งานอย่างรวดเร็ว) เนื่องจาก Codelab มีชุดวิธีการที่ครอบคลุมที่สุด

หากไม่แน่ใจว่าได้นําโค้ดไปใช้อย่างถูกต้องตามวิธีการตลอดทั้งโค้ดแล็บนี้หรือไม่ คุณดูโค้ดโซลูชันได้ในendสาขา git

ติดตั้ง Firebase CLI

1. ตรวจสอบว่าคุณได้ติดตั้ง Firebase CLI แล้ว และเป็นเวอร์ชัน 13.6 ขึ้นไป

   firebase --version
   

2. หากคุณติดตั้ง Firebase CLI แล้ว แต่ไม่ใช่เวอร์ชัน 13.6 ขึ้นไป ให้อัปเดตโดยทำดังนี้

   npm update -g firebase-tools
   

3. หากยังไม่ได้ติดตั้ง Firebase CLI ให้ทำดังนี้

   npm install -g firebase-tools
   

หากอัปเดตหรือติดตั้ง Firebase CLI ไม่ได้เนื่องจากข้อผิดพลาดเกี่ยวกับสิทธิ์ โปรดดูเอกสารประกอบ npm หรือใช้ตัวเลือกการติดตั้งอื่น

เข้าสู่ระบบ Firebase

1. ลงชื่อเข้าใช้ Firebase ในเทอร์มินัลโดยทำดังนี้

   firebase login
   

   หากเทอร์มินัลระบุว่าคุณเข้าสู่ระบบ Firebase อยู่แล้ว ให้ข้ามไปที่ส่วนตั้งค่าโปรเจ็กต์ Firebase ของโค้ดแล็บนี้
2. ในเทอร์มินัล ให้ป้อน Y หรือ N โดยขึ้นอยู่กับว่าคุณต้องการให้ Firebase รวบรวมข้อมูลหรือไม่ (ใช้ตัวเลือกใดก็ได้กับ Codelab นี้)
3. ในเบราว์เซอร์ ให้เลือกบัญชี Google แล้วคลิกอนุญาต

ติดตั้ง gcloud CLI ของ Google Cloud

1. ติดตั้ง gcloud CLI
2. เข้าสู่ระบบ Google Cloud ในเทอร์มินัลโดยทำดังนี้

   gcloud auth login
   

4. สร้างโปรเจ็กต์ Firebase

ในส่วนนี้ คุณจะต้องตั้งค่าโปรเจ็กต์ Firebase และลงทะเบียนเว็บแอป Firebase ในโปรเจ็กต์ นอกจากนี้ คุณยังเปิดใช้บริการ 2-3 อย่างที่ใช้โดยเว็บแอปตัวอย่างในภายหลังใน Codelab นี้ด้วย

ขั้นตอนทั้งหมดในส่วนนี้ทําในคอนโซล Firebase

สร้างโปรเจ็กต์ Firebase

1. ลงชื่อเข้าใช้คอนโซล Firebase โดยใช้บัญชี Google เดียวกับที่ใช้ในขั้นตอนก่อนหน้า
2. คลิกสร้างโปรเจ็กต์ แล้วป้อนชื่อโปรเจ็กต์ (เช่น Compass Codelab)
   จดจํารหัสโปรเจ็กต์ที่ระบบกําหนดให้โปรเจ็กต์ Firebase โดยอัตโนมัติ (หรือคลิกไอคอนแก้ไขเพื่อตั้งรหัสโปรเจ็กต์ที่ต้องการ) คุณต้องใช้รหัสนี้ภายหลังเพื่อระบุโปรเจ็กต์ Firebase ใน Firebase CLI หากลืมรหัส คุณสามารถค้นหารหัสในภายหลังได้ในการตั้งค่าโปรเจ็กต์
3. คลิกต่อไป
4. หากได้รับข้อความแจ้ง ให้อ่านและยอมรับข้อกําหนดของ Firebase แล้วคลิกต่อไป
5. สําหรับโค้ดแล็บนี้ คุณไม่ต้องใช้ Google Analytics ดังนั้นให้ปิดตัวเลือก Google Analytics
6. คลิกสร้างโปรเจ็กต์ รอให้โปรเจ็กต์จัดสรร แล้วคลิกดำเนินการต่อ

เพิ่มเว็บแอปลงในโปรเจ็กต์ Firebase

1. ไปที่หน้าจอภาพรวมโปรเจ็กต์ในโปรเจ็กต์ Firebase แล้วคลิก เว็บ
2. ในกล่องข้อความชื่อเล่นของแอป ให้ป้อนชื่อเล่นของแอปที่จำง่าย เช่น My Compass Codelab App คุณไม่ต้องเลือกช่องทำเครื่องหมายสำหรับตั้งค่า Firebase Hosting เนื่องจากคุณจะตั้งค่าบริการโฮสติ้งในขั้นตอนสุดท้ายของโค้ดแล็บนี้หรือไม่ก็ได้
   
3. คลิกลงทะเบียนแอป > ไปที่คอนโซล

เยี่ยมเลย ตอนนี้คุณลงทะเบียนเว็บแอปในโปรเจ็กต์ Firebase ใหม่แล้ว

อัปเกรดแพ็กเกจราคา Firebase

หากต้องการใช้ Firebase Genkit และ Vertex AI (และบริการระบบคลาวด์ที่เกี่ยวข้อง) โปรเจ็กต์ Firebase ของคุณต้องใช้แพ็กเกจราคาแบบชําระเงินตามการใช้งาน (Blaze) ซึ่งหมายความว่าโปรเจ็กต์จะลิงก์กับบัญชีการเรียกเก็บเงินในระบบคลาวด์

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับราคาของ Vertex AI

หากต้องการอัปเกรดโปรเจ็กต์เป็นแพ็กเกจ Blaze ให้ทำตามขั้นตอนต่อไปนี้

1. ในคอนโซล Firebase ให้เลือกอัปเกรดแพ็กเกจ
2. เลือกแพ็กเกจ Blaze ทำตามวิธีการบนหน้าจอเพื่อลิงก์บัญชีสำหรับการเรียกเก็บเงินใน Cloud กับโปรเจ็กต์
   หากจำเป็นต้องสร้างบัญชีสำหรับการเรียกเก็บเงินใน Cloud เป็นส่วนหนึ่งของการอัปเกรดนี้ คุณอาจต้องกลับไปที่ขั้นตอนการอัปเกรดในคอนโซล Firebase เพื่อดำเนินการอัปเกรดให้เสร็จสมบูรณ์

ตั้งค่า Cloud Firestore

1. ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยายสร้าง แล้วเลือกฐานข้อมูล Firestore
2. คลิกสร้างฐานข้อมูล
3. ตั้งค่ารหัสฐานข้อมูลเป็น (default)
4. เลือกตำแหน่งสำหรับฐานข้อมูล แล้วคลิกถัดไป
   สำหรับแอปจริง คุณควรเลือกตำแหน่งที่อยู่ใกล้กับผู้ใช้
5. คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎความปลอดภัย
   อย่าเผยแพร่หรือแสดงแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสำหรับฐานข้อมูล
6. คลิกสร้าง

เปิดใช้ Vertex AI

ใช้ gcloud CLI เพื่อตั้งค่า Vertex AI สำหรับคําสั่งทั้งหมดในหน้านี้ ให้แทนที่ YOUR_PROJECT_ID ด้วยรหัสโปรเจ็กต์ Firebase

1. ในเทอร์มินัล ให้ตั้งค่าโปรเจ็กต์เริ่มต้นสําหรับ Google Cloud SDK โดยทําดังนี้

   gcloud config set project YOUR_PROJECT_ID
   

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

   gcloud auth application-default set-quota-project YOUR_PROJECT_ID
   

3. เปิดใช้บริการ Vertex AI ในโปรเจ็กต์

   gcloud services enable aiplatform.googleapis.com
   

5. ตั้งค่าเว็บแอป

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

กำหนดค่า Firebase CLI ให้กำหนดเป้าหมายโปรเจ็กต์

1. ในเทอร์มินัล ให้ไปที่ไดเรกทอรีรูทของโปรเจ็กต์ Codelab
2. หากต้องการให้ Firebase CLI เรียกใช้คําสั่งทั้งหมดกับโปรเจ็กต์ Firebase ให้เรียกใช้คําสั่งต่อไปนี้

   firebase use YOUR_PROJECT_ID
   

นําเข้าข้อมูลตัวอย่างไปยัง Firestore

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

1. หากต้องการอนุญาตให้โค้ดเบสในเครื่องเรียกใช้โค้ดที่ปกติจะใช้บัญชีบริการ ให้เรียกใช้คําสั่งต่อไปนี้ในเทอร์มินัล

   gcloud auth application-default login
   

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

   cd load-firestore-data
   npm ci
   node index.js YOUR_PROJECT_ID
   cd ..
   

3. ยืนยันว่าเพิ่มข้อมูลลงในฐานข้อมูลเรียบร้อยแล้วโดยไปที่ส่วน Firestore ของโปรเจ็กต์ Firebase ในคอนโซล Firebase คุณควรเห็นสคีมาข้อมูลที่นําเข้าและเนื้อหาที่แสดง

เชื่อมต่อเว็บแอปกับโปรเจ็กต์ Firebase

โค้ดเบสของเว็บแอปต้องเชื่อมโยงกับโปรเจ็กต์ Firebase ที่ถูกต้องเพื่อใช้บริการต่างๆ เช่น ฐานข้อมูล โดยคุณต้องเพิ่มการกําหนดค่า Firebase ลงในโค้ดเบสของแอป การกําหนดค่านี้ประกอบด้วยค่าสําคัญ เช่น รหัสโปรเจ็กต์ คีย์ API และรหัสแอปของแอป รวมถึงค่าอื่นๆ ที่ช่วยให้แอปโต้ตอบกับ Firebase ได้

1. รับการกําหนดค่า Firebase ของแอป
   1. ในคอนโซล Firebase ให้ไปที่โปรเจ็กต์ Firebase
   2. ในแผงด้านซ้าย ให้คลิกไอคอนรูปเฟืองข้างภาพรวมโปรเจ็กต์ แล้วเลือกการตั้งค่าโปรเจ็กต์
   3. เลือกเว็บแอปในการ์ด "แอปของคุณ"
   4. ในส่วน "การตั้งค่าและการกําหนดค่า SDK" ให้เลือกตัวเลือกกําหนดค่า
   5. คัดลอกข้อมูลโค้ด รหัสจะขึ้นต้นด้วย const firebaseConfig ...
2. เพิ่มการกําหนดค่า Firebase ลงในโค้ดเบสของเว็บแอป
   1. เปิดไฟล์ src/lib/genkit/genkit.config.ts ในเครื่องมือแก้ไขโค้ด
   2. แทนที่ส่วนที่เกี่ยวข้องด้วยโค้ดที่คุณคัดลอก
   3. บันทึกไฟล์

แสดงตัวอย่างเว็บแอปในเบราว์เซอร์

1. ในเทอร์มินัล ให้ติดตั้งข้อกําหนดเบื้องต้น แล้วเรียกใช้เว็บแอป

   npm install
   npm run dev:next
   

2. ในเบราว์เซอร์ ให้ไปที่ 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 ดังนี้

1. เปิดไฟล์ prompts/1-hello-world.prompt ในเครื่องมือแก้ไขโค้ด
2. เปิด prompts/1-hello-world ใน UI ของนักพัฒนาซอฟต์แวร์ Genkit
3. ใช้ชื่อหรือรหัสภาษาที่คุณคุ้นเคย หรือปล่อยเป็นสตริงว่าง
4. คลิกเรียกใช้
5. ลองใช้ค่าอื่น โมเดลภาษาขนาดใหญ่เข้าใจพรอมต์ที่ย่อ สะกดผิด หรือไม่สมบูรณ์ในข้อความค้นหาง่ายๆ เช่นนี้ได้ดี

เพิ่มประสิทธิภาพเอาต์พุตด้วย Structured Data

นอกจากการสร้างข้อความธรรมดาแล้ว Genkit ยังช่วยให้คุณจัดโครงสร้างเอาต์พุตเพื่อการแสดงผลและการผสานรวมที่มีประสิทธิภาพยิ่งขึ้นภายใน UI ของแอปได้ด้วย การกําหนดสคีมาช่วยให้คุณสั่งให้ LLM สร้าง Structured Data ที่สอดคล้องกับรูปแบบที่ต้องการได้

การสํารวจสคีมาเอาต์พุต

นอกจากนี้ คุณยังระบุสคีมาเอาต์พุตของการเรียกใช้ LLM ได้ด้วย

1. ตรวจสอบไฟล์พรอมต์ในตัวแก้ไขโค้ด โดยทำดังนี้
   1. เปิดไฟล์ prompts/2-simple-itinerary.prompt
   2. ตรวจสอบสคีมาอินพุตและเอาต์พุตที่กําหนด
2. โต้ตอบกับ UI
   1. ใน UI ของนักพัฒนาแอป Genkit ให้ไปที่ส่วน prompts/2-simple-itinerary
   2. ระบุอินพุตโดยป้อนข้อมูลตัวอย่างในช่อง place และ interests

      {
          "interests": [
              "Museums"
          ],
          "place": "Paris"
      }
      

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

ทำความเข้าใจเอาต์พุตที่ขับเคลื่อนโดยสคีมา

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

นอกจากนี้ คุณยังกําหนดค่า Genkit ให้ลองอีกครั้งหรือพยายามซ่อมแซมเอาต์พุตได้หากไม่ตรงกับสคีมา

ข้อดีหลักของสคีมาเอาต์พุต

• การผสานรวมที่ง่ายขึ้น: ใส่ Structured Data ลงในองค์ประกอบ UI ของแอปได้อย่างง่ายดาย
• การตรวจสอบข้อมูล: ตรวจสอบความถูกต้องและความสอดคล้องของเอาต์พุตที่สร้างขึ้น
• การจัดการข้อผิดพลาด: ใช้กลไกเพื่อจัดการกับสคีมาที่จับคู่กันไม่ได้

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

ใช้อินพุตหลายรูปแบบ

ลองจินตนาการว่าแอปของคุณแนะนําจุดหมายพักร้อนที่ปรับเปลี่ยนในแบบของคุณตามรูปภาพที่ผู้ใช้เห็นว่าน่าดึงดูด Genkit ร่วมกับโมเดล Generative แบบหลายมิติช่วยให้คุณสร้างสรรค์ผลงานตามจินตนาการได้

1. ตรวจสอบไฟล์พรอมต์ในตัวแก้ไขโค้ด โดยทำดังนี้
   1. เปิดไฟล์ prompts/imgDescription.prompt
   2. โปรดสังเกตว่ามีการใช้ {{media url=this}} ซึ่งเป็นองค์ประกอบไวยากรณ์ Handlebars ที่ช่วยในการรวมรูปภาพไว้ในพรอมต์
2. โต้ตอบกับ UI
   1. เปิดพรอมต์ prompts/imgDescription ใน UI สําหรับนักพัฒนาซอฟต์แวร์ Genkit
   2. ป้อน 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"
          ]
      }
      

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

7. ใช้การดึงข้อมูลด้วยการค้นหาความคล้ายคลึงของเวกเตอร์

แม้ว่าการสร้างเนื้อหาครีเอทีฟโฆษณาด้วยโมเดล AI จะน่าประทับใจ แต่การใช้งานจริงมักต้องอิงตามบริบทที่เฉพาะเจาะจง

ในกรณีของ Codelab นี้ คุณมีฐานข้อมูลของปลายทาง (สถานที่และกิจกรรม) และมีเป้าหมายที่จะตรวจสอบว่าคำแนะนำที่โมเดล Gemini สร้างขึ้นจะอ้างอิงเฉพาะรายการภายในฐานข้อมูลนี้

คุณจะใช้ความสามารถของการค้นหาความคล้ายคลึงของเวกเตอร์ในข้อมูลเชิงลึกที่สร้างขึ้นเพื่อเติมเต็มช่องว่างระหว่างข้อความค้นหาที่ไม่มีโครงสร้างกับเนื้อหาที่เกี่ยวข้อง

ทําความเข้าใจการฝังและลําดับชั้นเวกเตอร์

• เวกเตอร์: เวกเตอร์คือการแสดงจุดข้อมูลที่เป็นตัวเลข ซึ่งมักใช้ในการสร้างแบบจำลองข้อมูลที่ซับซ้อน เช่น ข้อความหรือรูปภาพ มิติข้อมูลแต่ละรายการในเวกเตอร์จะสอดคล้องกับฟีเจอร์ที่เฉพาะเจาะจงของข้อมูล
• โมเดลการฝัง: โมเดล AI เฉพาะทางเหล่านี้จะเปลี่ยนข้อมูลอินพุต เช่น ข้อความ เป็นเวกเตอร์มิติสูง สิ่งที่น่าสนใจคืออินพุตที่คล้ายกันจะได้รับการแมปกับเวกเตอร์ที่อยู่ใกล้กันในพื้นที่มิติสูงนี้
• การค้นหาความคล้ายคลึงของเวกเตอร์: เทคนิคนี้ใช้ประโยชน์จากความใกล้เคียงของเวกเตอร์การฝังเพื่อระบุจุดข้อมูลที่เกี่ยวข้อง เมื่อได้รับคําค้นหาอินพุต ระบบจะค้นหารายการในฐานข้อมูลที่เวกเตอร์การฝังคล้ายกัน ซึ่งบ่งบอกถึงความเกี่ยวข้องเชิงความหมาย

ทำความเข้าใจวิธีการทำงานของกระบวนการดึงข้อมูล

1. การฝังคําค้นหา: ระบบจะส่งอินพุตของผู้ใช้ (เช่น "ดินเนอร์โรแมนติกในปารีส") ผ่านโมเดลการฝังเพื่อสร้างเวกเตอร์การค้นหา
2. การฝังฐานข้อมูล: คุณควรประมวลผลฐานข้อมูลปลายทางล่วงหน้าเพื่อสร้างเวกเตอร์การฝังสําหรับแต่ละรายการ
3. การคํานวณความคล้ายคลึง: ระบบจะเปรียบเทียบเวกเตอร์การค้นหากับเวกเตอร์การฝังแต่ละรายการในฐานข้อมูลโดยใช้เมตริกความคล้ายคลึง (เช่น ความคล้ายคลึงแบบโคไซน์)
4. การดึงข้อมูล: ระบบจะดึงข้อมูลรายการที่คล้ายกันที่สุดจากฐานข้อมูลเป็นคำแนะนำที่เกี่ยวข้อง โดยอิงตามระดับความใกล้เคียงกับเวกเตอร์การค้นหา

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

เปิดใช้การค้นหาความคล้ายคลึงของเวกเตอร์ใน Firestore

ในขั้นตอนก่อนหน้าของโค้ดแล็บนี้ คุณได้ป้อนข้อมูลสถานที่และกิจกรรมตัวอย่างลงในฐานข้อมูล Firestore รายการสถานที่แต่ละรายการมีknownForฟิลด์ข้อความที่อธิบายแอตทริบิวต์ที่น่าสนใจ พร้อมด้วยช่อง embedding ที่เกี่ยวข้องซึ่งมีการแสดงผลเวกเตอร์ของคำอธิบายนี้

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

1. ในเทอร์มินัล ให้เรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้งคอมโพเนนต์ alpha เวอร์ชันล่าสุด คุณต้องใช้เวอร์ชัน 2024.05.03 ขึ้นไป

   gcloud components install alpha
   

2. สร้างดัชนี โดยอย่าลืมแทนที่ 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": "{}"}'
   

3. เปิด retrievers/placesRetriever ใน UI ของนักพัฒนาซอฟต์แวร์ Genkit
4. คลิกเรียกใช้ ดูออบเจ็กต์ที่สร้างสคาฟเฟิลด์ซึ่งมีข้อความตัวยึดตําแหน่ง ซึ่งระบุตําแหน่งที่คุณจะใช้ตรรกะการเรียกข้อมูล
5. เปิดไฟล์ src/lib/genkit/placesRetriever.ts ในเครื่องมือแก้ไขโค้ด
6. เลื่อนลงจนสุดแล้วแทนที่ตัวยึดตําแหน่ง placesRetriever ด้วยข้อความต่อไปนี้

   export const placesRetriever = defineFirestoreRetriever({
     name: 'placesRetriever',
     firestore,
     collection: 'places',
     contentField: 'knownFor',
     vectorField: 'embedding',
     embedder: textEmbeddingGecko,
     distanceMeasure: 'COSINE',
   });
   

ทดสอบเครื่องมือดึงข้อมูล

1. ใน UI สําหรับนักพัฒนาซอฟต์แวร์ Genkit ให้เปิดเครื่องมือดึงข้อมูล retrievers/placesRetriever
2. ระบุคําค้นหาต่อไปนี้

   {
       "content": [
           {
               "text": "UNESCO"
           }
       ]
   }
   

3. หรือจะระบุตัวเลือกก็ได้ ตัวอย่างเช่น วิธีระบุจํานวนเอกสารที่เครื่องมือดึงข้อมูลควรแสดงมีดังนี้

   {
       "limit": 4
   }
   

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

คุณกรองข้อมูลเพิ่มเติมนอกเหนือจากความคล้ายคลึงได้โดยเพิ่มประโยค where ลงในตัวเลือก

8. การสร้างข้อความที่เพิ่มประสิทธิภาพการดึงข้อมูล (RAG) ด้วย Genkit

ในส่วนก่อนหน้านี้ คุณได้สร้างพรอมต์แต่ละรายการที่จัดการข้อความ, JSON และรูปภาพได้ รวมถึงสร้างสถานที่ท่องเที่ยวและเนื้อหาอื่นๆ ที่น่าสนใจสําหรับผู้ใช้ นอกจากนี้ คุณยังได้ติดตั้งใช้งานพรอมต์ที่ดึงข้อมูลปลายทางที่เกี่ยวข้องจากฐานข้อมูล Firestore ด้วย ตอนนี้ถึงเวลาจัดระเบียบคอมโพเนนต์เหล่านี้ให้เป็นขั้นตอนการสร้างการค้นหาที่เพิ่มประสิทธิภาพ (RAG) ที่สอดคล้องกัน

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

1. ตรวจสอบพรอมต์แผนการเดินทางในตัวแก้ไขโค้ด
   1. เปิดไฟล์ prompts/itineraryGen.prompt
   2. โปรดสังเกตว่าพรอมต์ขยายเพื่อรับอินพุตเพิ่มเติมอย่างไร โดยเฉพาะข้อมูลกิจกรรมที่มาจากเครื่องมือดึงข้อมูล
2. ใน UI สําหรับนักพัฒนา Genkit ให้ดูขั้นตอน Genkit ในไฟล์ src/lib/genkit/itineraryFlow.ts
   เคล็ดลับ: หากต้องการเพิ่มประสิทธิภาพการแก้ไขข้อบกพร่อง ให้ลองแบ่งขั้นตอนที่ยาวออกเป็นขั้นตอนเล็กๆ ที่จัดการได้ง่าย
3. ปรับปรุงขั้นตอนด้วยการผสานรวมขั้นตอน "คำอธิบายรูปภาพ" ดังนี้
   1. ค้นหาความคิดเห็น TODO: 2 (ประมาณบรรทัดที่ 81) ซึ่งจะทําเครื่องหมายจุดที่คุณจะต้องปรับปรุงขั้นตอน
   2. แทนที่ตัวยึดตําแหน่ง imgDescription ที่ว่างเปล่าด้วยเอาต์พุตที่เกิดจากการเรียกใช้พรอมต์ imgDescription
4. ทดสอบขั้นตอน
   1. ไปที่ flows/itineraryFlow
   2. ใช้อินพุตต่อไปนี้เพื่อทดสอบการดําเนินการของ 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"
          ]
      }
      

   3. คลิกเรียกใช้
   4. ดูเอาต์พุตที่สร้างขึ้น ซึ่งควรรวมคำอธิบายรูปภาพไว้ในคำแนะนำแผนการเดินทาง
5. หากพบข้อผิดพลาดหรือลักษณะการทำงานที่ไม่คาดคิด ให้ดูรายละเอียดในแท็บตรวจสอบ นอกจากนี้ คุณยังใช้แท็บนี้เพื่อตรวจสอบประวัติการเรียกใช้จาก Trace Store ได้ด้วย

RAG สำหรับเว็บแอปพลิเคชัน

1. ตรวจสอบว่าเว็บแอปยังทํางานอยู่โดยไปที่ http://localhost:3000/ ในเบราว์เซอร์
2. หากเว็บแอปไม่ทํางานแล้ว ให้เรียกใช้คําสั่งต่อไปนี้ในเทอร์มินัล

   npm install
   npm run dev
   

3. โปรดดูหน้าเว็บแอป Dream Your Vacation (http://localhost:3000/gemini)
4. ดูซอร์สโค้ด (src/app/gemini/page.tsx) สําหรับตัวอย่างการผสานรวม Next.js

9. ทำให้แอปพลิเคชันใช้งานได้ด้วยโฮสติ้งแอป Firebase

ขั้นตอนสุดท้ายในเส้นทางนี้คือการนำเว็บแอปของคุณไปใช้งาน โดยคุณจะใช้ประโยชน์จากโฮสติ้งแอป Firebase ซึ่งเป็นโซลูชันโฮสติ้งที่รองรับเฟรมเวิร์กซึ่งออกแบบมาเพื่อลดความซับซ้อนในการทำให้แอป Next.js และ Angular ใช้งานได้ในแบ็กเอนด์แบบเซิร์ฟเวอร์เลส

1. คอมมิตการเปลี่ยนแปลงไปยังที่เก็บ Git ในพื้นที่ แล้วจึงพุชไปยัง GitHub
2. ในคอนโซล Firebase ให้ไปที่โฮสติ้งแอปภายในโปรเจ็กต์ Firebase
3. คลิกเริ่มต้นใช้งาน > เชื่อมต่อกับ GitHub
4. เลือกบัญชี GitHub และที่เก็บ คลิกถัดไป
5. ในการตั้งค่าการนําส่ง > ไดเรกทอรีรูท ให้ใช้ค่าเริ่มต้น
6. สำหรับสาขาที่ใช้งานอยู่ ให้เลือกสาขา main ของที่เก็บ GitHub คลิกถัดไป
7. ป้อนรหัสสําหรับแบ็กเอนด์ (เช่น compass)
8. เมื่อระบบถามว่าต้องการสร้างหรือเชื่อมโยงเว็บแอป Firebase ให้เลือกเลือกเว็บแอป Firebase ที่มีอยู่ แล้วเลือกแอปที่คุณสร้างในขั้นตอนก่อนหน้าในโค้ดแล็บนี้
9. คลิกเสร็จสิ้นและทำให้ใช้งานได้

การตรวจสอบสถานะการติดตั้งใช้งาน

กระบวนการทำให้ใช้งานได้จะใช้เวลา 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 ด้วยการเรียกใช้ฟังก์ชัน