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

1. ก่อนเริ่มต้น

ใน Codelab นี้ คุณจะได้เรียนรู้วิธีใช้ Firebase Genkit ซึ่งเป็นเฟรมเวิร์กโอเพนซอร์สสำหรับการผสานรวม Generative AI เข้ากับแอป โดยคุณจะใช้ Genkit กับทักษะการพัฒนาแอปและเครื่องมือมากมายที่คุณคุ้นเคยอยู่แล้วได้ เช่น Firestore

สิ่งที่ต้องดำเนินการก่อน

• มีความคุ้นเคยกับ Firestore, Node.js และ TypeScript

สิ่งที่คุณจะได้เรียนรู้

• สำรวจวิธีใหม่ๆ ในการสร้างด้วย Firestore โดยใช้การค้นหาความคล้ายคลึงกันของเวกเตอร์
• ทำความเข้าใจ Generative AI และทำให้ Generative AI นำไปใช้ได้จริงสำหรับการพัฒนาแอป "ในชีวิตประจำวัน" โดยใช้ Genkit
• เตรียมโซลูชันสำหรับการผสานรวมและทำให้ใช้งานได้

สิ่งที่ต้องมี

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

2. ตรวจสอบเว็บแอปและบริการระบบคลาวด์ที่ใช้

ในส่วนนี้ คุณจะได้ตรวจสอบเว็บแอปที่คุณจะสร้างด้วย Codelab นี้ รวมถึงเรียนรู้เกี่ยวกับบริการระบบคลาวด์ที่คุณจะใช้

เว็บแอป

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

แอปต้องปรับปรุงการมีส่วนร่วมกับหน้าแรกของแอป ดังนั้นใน Codelab นี้ คุณจะได้นำแนวคิด 2 อย่างที่ต้องอาศัย Generative AI (หรือ GenAI) ไปใช้ ดังนี้

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

บริการที่ใช้

ใน Codelab นี้ คุณจะต้องใช้บริการและฟีเจอร์ของ 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 ของ Codelab ที่คุณเพิ่งสร้าง:

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

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

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

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

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

โฟลเดอร์รากจะมีไฟล์ README.md ที่ให้การเริ่มต้นอย่างรวดเร็วในการเรียกใช้เว็บแอป โดยใช้วิธีการที่มีประสิทธิภาพ แต่หากคุณเป็นผู้เรียนรู้เป็นครั้งแรก คุณควรทำ Codelab นี้ให้เสร็จสิ้น (ไม่ใช่การเริ่มต้นอย่างรวดเร็ว) เนื่องจาก 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 ของ Codelab นี้
2. ในเทอร์มินัล ให้กรอก Y หรือ N โดยขึ้นอยู่กับว่าคุณต้องการให้ Firebase รวบรวมข้อมูล (เลือกแบบใดแบบหนึ่งก็ได้สำหรับ Codelab นี้)
3. ในเบราว์เซอร์ ให้เลือกบัญชี Google แล้วคลิกอนุญาต

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

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

   gcloud auth login
   

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

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

ขั้นตอนทั้งหมดในส่วนนี้ดำเนินการในคอนโซล Firebase

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

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

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

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

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

อัปเกรดแผนการเรียกเก็บเงินของ Firebase

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

และโปรดทราบว่าหากเปิดใช้การเรียกเก็บเงินในโปรเจ็กต์ Firebase ระบบจะเรียกเก็บค่าโทรสำหรับการโทรที่ Genkit ทำกับ Gemini API ดูข้อมูลเพิ่มเติมเกี่ยวกับราคาสำหรับ Vertex AI

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

1. ไปที่แผนการเรียกเก็บเงินของ Firebase ในโปรเจ็กต์ Firebase
2. ในกล่องโต้ตอบแพ็กเกจการเรียกเก็บเงินของ Firebase ให้เลือกแพ็กเกจ Blaze แล้วซื้อ

เปิดใช้ Cloud Firestore

1. ไปที่ Firestore โดยใช้แผงการนำทางด้านซ้าย
2. คลิกสร้างฐานข้อมูล > เริ่มต้นในโหมดทดสอบ > ถัดไป
3. เลือกตำแหน่ง Cloud Firestore ที่ต้องการ (หรือปล่อยไว้เป็นค่าเริ่มต้น)
4. คลิกเปิดใช้

เปิดใช้ Vertex AI

1. ในเทอร์มินัล ให้ลิงก์ gcloud CLI กับโปรเจ็กต์ Firebase:

   gcloud config set project YOUR_PROJECT_ID
   

2. เปิดใช้บริการ Vertex AI:

   gcloud services enable aiplatform.googleapis.com
   

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

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

ตั้งค่า Firebase CLI เพื่อทำงานกับโปรเจ็กต์ Firebase

ในเทอร์มินัล ให้บอก CLI ให้ใช้โปรเจ็กต์ Firebase โดยเรียกใช้คำสั่งต่อไปนี้

firebase use YOUR_PROJECT_ID

โหลดข้อมูล Firestore

Codebase ของ Codelab นี้มีข้อมูลตัวอย่างที่สร้างขึ้นสำหรับคุณอยู่แล้ว

1. หากต้องการนำเข้าข้อมูลไปยังอินสแตนซ์ Firestore ให้เรียกใช้คำสั่งนี้ในเทอร์มินัล

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

2. ในคอนโซล Firebase ให้ไปที่ Firestore ในโปรเจ็กต์ Firebase คุณจะเห็นสคีมาที่นำเข้า

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

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

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

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

1. ในเทอร์มินัล ให้ติดตั้งทรัพยากร Dependency แล้วเรียกใช้เว็บแอปด้วยคำสั่งต่อไปนี้

   npm install
   npm run dev
   

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

หน้าเว็บควรโหลดดังนี้

Compass เป็นแอป Next.js ที่ใช้คอมโพเนนต์ของ React Server ซึ่งเป็นหน้าแรก

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

สำรวจได้เลย เมื่อพร้อมที่จะดำเนินการต่อแล้ว ให้คลิกปุ่มหน้าแรก (ที่มุมบนขวา)

6. เริ่มใช้ Firebase Genkit

ตอนนี้คุณพร้อมก้าวเข้าสู่ความก้าวหน้าของ GenAI แล้ว ในส่วนนี้ของ Codelab คุณจะได้ใช้ฟีเจอร์ที่แนะนำปลายทางตามแรงบันดาลใจที่ผู้ใช้ให้ไว้

โดยจะใช้ Firebase Genkit ที่จับคู่กับ Vertex AI ของ Google Cloud เป็นผู้ให้บริการโมเดล Generative (Gemini) เพื่อบรรลุเป้าหมายนี้ ซึ่งคุณจะใช้ Firebase เป็นที่เก็บการติดตามและโฟลว์สถานะ (โดยใช้ Firestore) คุณยังใช้ Firebase เพื่อทำให้โค้ด Genkit ใช้งานได้โดยใช้โฮสติ้งแอปของ Firebase

Genkit มี "UI สำหรับนักพัฒนาซอฟต์แวร์" เพื่อให้การใช้งานเครื่องมือเป็นภาพและใช้งานง่ายยิ่งขึ้น

1. เปิดเครื่อง UI สำหรับนักพัฒนาซอฟต์แวร์ Genkit โดยเรียกใช้คำสั่งนี้ในหน้าต่างเทอร์มินัลใหม่:

   cd genkit-functions
   npx genkit start
   

2. ในเบราว์เซอร์ ให้ไปที่ URL ของ Genkit ที่โฮสต์ไว้ในเครื่อง โดยทั่วไป URL จะเป็น http://localhost:4000/

ผสานรวมโมเดล Gemini

Firebase Genkit มีปลั๊กอิน Dotprompt และรูปแบบข้อความเพื่อช่วยคุณเขียนและจัดระเบียบพรอมต์ Generative AI

Dotprompt ได้รับการออกแบบมารอบๆ พื้นที่ที่ข้อความแจ้งเป็นโค้ด จากนั้นเขียนและเก็บรักษาพรอมต์ในไฟล์ที่มีรูปแบบพิเศษที่เรียกว่าไฟล์ .comtprompt ติดตามการเปลี่ยนแปลงของพรอมต์โดยใช้ระบบควบคุมเวอร์ชันเดียวกันกับที่คุณใช้สำหรับโค้ด และทำให้ใช้งานได้พร้อมกับโค้ดที่เรียกใช้โมเดล Generative AI

หากต้องการใช้ Dotprompt ให้เริ่มต้นด้วย Hello-world:

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

กำหนดสคีมา JSON

แต่หากไม่ต้องการแสดงหน้าต่างข้อความขึ้นมาใน UI ของแอป คุณอาจต้องจัดรูปแบบข้อความที่สร้างขึ้นอย่างดี

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

1. เปิดไฟล์ genkit-functions/prompts/2-simple-itinerary.prompt ในตัวแก้ไขโค้ด
   คุณจะเห็นว่ามีอินพุตและสคีมาเอาต์พุต
2. เปิด dotprompt/2-simple-itinerary ใน UI ของ Firebase Genkit
3. กรอกช่องสถานที่และความสนใจ ดังนี้

   {
       "place": "paris",
       "interests": [
           "diner"
       ]
   }
   

4. คลิก Run

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

อินพุตในหลายโมดัล

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

1. เปิดไฟล์ genkit-functions/prompts/imgDescription.prompt ในตัวแก้ไขโค้ด
   โปรดสังเกตไวยากรณ์แฮนเดิลของ {{media url=this}}
2. เปิด dotprompt/imgDescription ใน UI ของ Firebase Genkit
3. ใช้ภาพขนาดย่อจาก Wikipedia ในช่องป้อนข้อมูล imageUrls ดังนี้

   {
       "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" ]
   }
   

4. คลิก Run

7. ใช้การดึงข้อมูล

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

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

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

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

ใน Firestore คุณจะมีรายการสถานที่ และแต่ละสถานที่จะมีช่องข้อความระบุสถานที่ที่เป็นที่รู้จักมากที่สุด

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

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

   gcloud components install alpha
   

2. สร้างดัชนี:

   gcloud alpha firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config=vector-config='{"dimension":"768","flat": "{}"}',field-path=embedding
   

3. เปิด placesRetriever ใน UI ของ Firebase Genkit จากนั้นเรียกใช้
   ผลลัพธ์คือวัตถุนั่งร้านที่มีข้อความ TODO คุณต้องใช้รีทรีฟเวอร์ในขั้นตอนถัดไป
4. เปิดไฟล์ genkit-functions/src/lib/placesRetriever.ts ในตัวแก้ไขโค้ด
5. เลื่อนลงจนสุดและแทนที่ตัวยึดตำแหน่ง placesRetriever ด้วยรายการต่อไปนี้

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

ตอนนี้ ให้ทดลองค้นหา:

1. เปิด placesRetriever ใน UI ของ Firebase Genkit
2. ระบุคำค้นหาต่อไปนี้

   {
       "content": [
           {
               "text": "new orleans"
           }
       ]
   }
   

3. เปลี่ยนตัวเลือกบางอย่าง (ไม่บังคับ) เช่น ขีดจำกัด
4. คลิก Run

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

8. การดึงข้อมูล Augmented Generation (RAG)

ในแอปนี้ คุณมีพรอมต์หลายรายการที่นำข้อความ, JSON และ/หรือรูปภาพ มาสร้างจุดหมายปลายทางสำหรับวันหยุดพักผ่อนและสิ่งอื่นๆ ที่น่าสนใจสำหรับผู้ใช้

คุณยังมีพรอมต์ที่แสดงปลายทางที่เกี่ยวข้องซึ่งอยู่ในฐานข้อมูล (Firestore) อีกด้วย

ถึงเวลาที่จะนำมารวมกันสู่ขั้นตอน Augmented Generation (RAG) ในการดึงข้อมูลครั้งแรกแล้ว

1. เปิดไฟล์ genkit-functions/prompts/itineraryGen.prompt ในตัวแก้ไขโค้ด
2. ตรวจดูว่าข้อความแจ้งแผนการเดินทางแบบง่ายก่อนหน้านี้ได้ปรับเปลี่ยนให้ยอมรับอินพุตเพิ่มเติม ซึ่งรวมถึง activities ที่รีทรีฟเวอร์แสดงหรือไม่
3. เปิดไฟล์ genkit-functions/src/lib/itineraryFlow.ts ในตัวแก้ไขโค้ด ไฟล์นี้มีฟีเจอร์ของ Firebase Genkit ที่เรียกว่าขั้นตอน
   
   • โฟลว์เป็นฟังก์ชันที่มีลักษณะเฉพาะเพิ่มเติมบางอย่าง เช่น มีการพิมพ์แบบชัดเจน สตรีมได้ เรียกใช้ได้ในพื้นที่และจากระยะไกล และสังเกตได้โดยสมบูรณ์ Genkit มีเครื่องมือ UI ของนักพัฒนาซอฟต์แวร์และ CLI เพื่อดำเนินการกับโฟลว์ (การทำงาน การแก้ไขข้อบกพร่อง ฯลฯ)
   • คุณควรแบ่งโฟลว์ที่ยาวออกเป็นหลายขั้นตอนเพื่อช่วยแก้ไขข้อบกพร่อง
4. มองหา TODO: 2 รอบๆ เส้น 70 นี่คือตัวอย่างวิธีเพิ่มขั้นตอนลงในขั้นตอนที่มีอยู่ ในที่นี้คุณจะต้องแทนที่ imgDescription ที่ว่างเปล่าด้วยผลลัพธ์ของพรอมต์สร้างการเรียกใช้ imgDescription
5. เปิด itineraryFlow ใน UI ของ Firebase Genkit
6. ใช้อินพุตต่อไปนี้เพื่อทดสอบการดำเนินการของ itineraryFlow ที่สำเร็จด้วยขั้นตอนที่เพิ่มมาใหม่:

   {
       "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. คลิก Run
8. หากคุณพบข้อผิดพลาดหรือลักษณะการทำงานที่ไม่คาดคิด ให้ดูรายละเอียดในแท็บตรวจสอบ คุณยังใช้แท็บนี้เพื่อตรวจสอบประวัติการดำเนินการจาก Trace Store ได้อีกด้วย

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

ดูตัวอย่างการผสานรวม Next.js ในหน้าเว็บเว็บแอปฝันในวันหยุด (http://localhost:3000/gemini) และซอร์สโค้ด (src/app/gemini/page.tsx)

9. ทำให้แอปพลิเคชันของคุณใช้งานได้

และตอนนี้เป็นขั้นตอนสุดท้าย คือการปรับใช้เว็บแอป

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

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

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

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

10. บทสรุป

ยินดีด้วย คุณประสบความสำเร็จมากมายใน Codelab นี้

คุณใช้ Firebase Genkit, Firestore และ Vertex AI เพื่อสร้าง "โฟลว์" สำหรับวันหยุดพักผ่อนตามความต้องการ ซึ่งจะแนะนำโดยอิงตามความชอบและแรงบันดาลใจของผู้ใช้ รวมถึงนำข้อมูลของแอปมาพิจารณา

และคุณได้เรียนรู้รูปแบบวิศวกรรมซอฟต์แวร์ที่สำคัญหลายอย่างที่ต้องใช้เมื่อสร้างแอป GenAI ดังนี้

• การจัดการพรอมต์
• เนื้อหาหลายรูปแบบ
• สคีมาอินพุต/เอาต์พุต
• ที่เก็บเวกเตอร์
• การดึงข้อมูล
• การดึงข้อมูล Augmented Generation (RAG)
• การวัดคุม "โฟลว์"

โปรดทราบว่า Firebase Genkit มีตัวเลือกการติดตั้งใช้งานหลายรายการที่ไม่ได้อธิบายไว้ใน Codelab นี้

• Firebase Cloud Functions
• Cloud Run
• Next.js
• สภาพแวดล้อม Node.js ทั้งหมด

เพียงเลือกรายการที่เหมาะกับคุณที่สุดโดยเรียกใช้คำสั่งต่อไปนี้ภายในโฟลเดอร์โหนด (package.json)

npx genkit init

ขั้นตอนถัดไป

• ทดลองใช้พรอมต์และใช้ประโยชน์จากหน้าต่างบริบทขนาดใหญ่ใน Google AI Studio หรือ Vertex AI Studio
• ดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหา Augmented Generation (RAG) ด้วย AI
• ดูเอกสารอย่างเป็นทางการสำหรับ Firebase Genkit
• ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถในการค้นหาความคล้ายคลึงกันใน Firestore และ Cloud SQL สำหรับ PostgreSQL
• เจาะลึกการทำงานของ GenAI ด้วยการเรียกใช้ฟังก์ชัน