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

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

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

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

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

   firebase use YOUR_PROJECT_ID
   

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

Codelab นี้มีข้อมูลตัวอย่างที่สร้างไว้ล่วงหน้าสำหรับ 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. ในเทอร์มินัล ให้ติดตั้งทรัพยากร Dependency แล้วเรียกใช้เว็บแอปด้วยคำสั่งต่อไปนี้

   npm install
   npm run dev
   

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

Compass เป็นแอป Next.js ที่ใช้ React Server Components และนี่คือหน้าแรก

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

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

6. ใช้ประโยชน์จาก Generative AI ด้วย Genkit

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

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

ขั้นตอนสุดท้ายในโค้ดแล็บนี้คือการทำให้แอป Genkit ใช้งานได้กับโฮสติ้งแอป Firebase

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

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

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

เปิด UI นักพัฒนาซอฟต์แวร์ Genkit

Genkit มาพร้อมกับ UI บนเว็บที่ช่วยให้คุณโต้ตอบกับ LLM, เวิร์กโฟลว์ Genkit, เครื่องมือดึงข้อมูล และคอมโพเนนต์ AI อื่นๆ ได้

1. เปิด UI นักพัฒนาซอฟต์แวร์ Genkit
   1. เปิดหน้าต่างเทอร์มินัลใหม่
   2. ไปที่รูทของไดเรกทอรี genkit-functions
   3. เรียกใช้คําสั่งต่อไปนี้เพื่อเริ่ม UI สําหรับนักพัฒนาซอฟต์แวร์ของ Genkit

      cd genkit-functions
      npx genkit start
      

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

โต้ตอบกับ Gemini

ตอนนี้คุณสามารถใช้ UI สำหรับนักพัฒนาซอฟต์แวร์ Genkit เพื่อโต้ตอบกับโมเดลที่รองรับหรือคอมโพเนนต์ AI อื่นๆ เช่น พรอมต์ รีทรีฟเวอร์ และขั้นตอน Genkit

เช่น ลองขอให้ Gemini แนะนำวันหยุดพักผ่อน โปรดทราบว่าคุณสามารถใช้วิธีการของระบบเพื่อควบคุมลักษณะการทํางานของโมเดลตามความต้องการเฉพาะของคุณได้อย่างไร ซึ่งวิธีนี้ยังเหมาะสำหรับโมเดลที่ไม่รองรับคำสั่งของระบบตั้งแต่ต้นด้วย

จัดการพรอมต์

Firebase Genkit เปิดตัว Dotprompt ซึ่งเป็นปลั๊กอินและรูปแบบข้อความที่ออกแบบมาเพื่อเพิ่มประสิทธิภาพการสร้างและจัดการพรอมต์ Generative AI แนวคิดหลักของ Dotprompt คือถือว่าข้อความแจ้งเป็นโค้ด ซึ่งช่วยให้คุณเขียน ดูแลรักษา และควบคุมเวอร์ชันควบคู่กับโค้ดของแอปพลิเคชัน

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

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

เพิ่มคุณภาพเอาต์พุตด้วยข้อมูลที่มีโครงสร้าง

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

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

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

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

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

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

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

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

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

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

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

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

ใช้อินพุตแบบหลายโมดัล

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

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

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

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

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

   gcloud components install alpha
   

2. สร้างดัชนี โดยแทนที่ YOUR_PROJECT_ID ด้วยรหัสโปรเจ็กต์ของคุณ

   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 ของนักพัฒนาซอฟต์แวร์ Genkit
4. คลิกเรียกใช้ สังเกตวัตถุที่มีรอยต่อที่มีข้อความตัวยึดตำแหน่ง ซึ่งระบุตำแหน่งที่คุณจะใช้ตรรกะรีทรีฟเวอร์
5. เปิดไฟล์ genkit-functions/src/lib/placesRetriever.ts ในตัวแก้ไขโค้ด
6. เลื่อนลงจนสุดแล้วแทนที่ตัวยึดตําแหน่ง placesRetriever ด้วยข้อความต่อไปนี้

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

ทดสอบรีทรีฟเวอร์

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

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

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

   {
       "limit": 4
   }
   

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

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

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

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

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

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

การตรวจสอบสถานะการทำให้ใช้งานได้

กระบวนการทำให้ใช้งานได้จะใช้เวลาไม่กี่นาที คุณสามารถติดตามความคืบหน้าได้ในส่วนโฮสติ้งแอปของคอนโซล 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
• ดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหา Augmented Generation (RAG) ด้วย AI
• ดูเอกสารอย่างเป็นทางการสำหรับ Firebase Genkit
• ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถในการค้นหาความคล้ายคลึงกันใน Firestore และ Cloud SQL สำหรับ PostgreSQL
• เจาะลึกเวิร์กโฟลว์ genAI ด้วยการเรียกใช้ฟังก์ชัน