สร้างเว็บแอปที่ทำงานด้วยระบบ AI ด้วย Firebase Extensions สำหรับ Gemini API

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

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

ใน Codelab นี้ คุณจะได้เรียนรู้วิธีสร้างเว็บแอปที่ทำงานด้วยระบบ AI ซึ่งมอบประสบการณ์การใช้งานที่น่าสนใจด้วย Firebase Extensions

ข้อกำหนดเบื้องต้น

• มีความรู้เกี่ยวกับ Node.js, Next.js และ TypeScript

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

• วิธีใช้ Firebase Extensions สำหรับ Gemini API เพื่อประมวลผลภาษา
• วิธีใช้ Cloud Functions for Firebase เพื่อเขียนบริบทเสริมสำหรับโมเดลภาษา
• วิธีใช้ JavaScript เพื่อเข้าถึงเอาต์พุตที่สร้างโดย Firebase Extensions

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

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

2. ตรวจสอบเว็บแอป บริการ Firebase และส่วนขยาย

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

เว็บแอป

ใน Codelab นี้ คุณจะได้สร้างเว็บแอปชื่อ Friendly Conf

เจ้าหน้าที่ของ Friendly Conference ตัดสินใจใช้ AI เพื่อสร้างประสบการณ์การใช้งานที่น่าพึงพอใจและปรับเปลี่ยนในแบบของผู้ใช้สำหรับผู้เข้าร่วมประชุม แอปการประชุมที่เสร็จสมบูรณ์แล้วจะมอบแชทบอท AI แบบสนทนาแก่ผู้เข้าร่วม ซึ่งขับเคลื่อนโดยโมเดล Generative AI แบบมัลติโมดัล (หรือที่เรียกว่าโมเดลภาษาขนาดใหญ่หรือ LLM) และสามารถตอบคำถามเกี่ยวกับหัวข้อทั่วไปที่ปรับให้เหมาะกับกำหนดการและหัวข้อของการประชุมได้ แชทบอทมีบริบทในอดีตและความรู้เกี่ยวกับวันที่/เวลาปัจจุบัน รวมถึงหัวข้อและกำหนดการของ Friendly Conf ดังนั้นคำตอบจึงพิจารณาบริบททั้งหมดนี้ได้

บริการของ Firebase

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

Firebase Extensions

ส่วนขยาย Firebase ที่คุณจะใช้ในโค้ดแล็บนี้ ได้แก่

• สร้างแชทบ็อตด้วย Gemini API
• งานหลายรูปแบบด้วย Gemini API

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

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-gemini-api-extensions
2. โคลนที่เก็บ GitHub ของ Codelab ที่คุณเพิ่งสร้าง

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

หากไม่ได้ติดตั้ง 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. ในเทอร์มินัล ให้ไปที่โฟลเดอร์ codelab-gemini-api-extensions แล้วเข้าสู่ระบบ Firebase

   cd codelab-gemini-api-extensions
   firebase login
   

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

4. ตั้งค่าโปรเจ็กต์ Firebase

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

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

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

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

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

หากต้องการใช้ Firebase Extensions (และบริการระบบคลาวด์ที่เกี่ยวข้อง) รวมถึง Cloud Storage for Firebase โปรเจ็กต์ Firebase ของคุณต้องอยู่ในแพ็กเกจราคาแบบจ่ายเมื่อใช้ (Blaze) ซึ่งหมายความว่าโปรเจ็กต์ต้องลิงก์กับบัญชีสำหรับการเรียกเก็บเงินใน Cloud

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

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

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

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

เพิ่มเว็บแอปไปยังโปรเจ็กต์ Firebase

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

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

ตั้งค่าการตรวจสอบสิทธิ์ Firebase

1. ไปที่การตรวจสอบสิทธิ์โดยใช้แผงการนำทางด้านซ้าย
2. คลิกเริ่มต้นใช้งาน
3. ในคอลัมน์ผู้ให้บริการเพิ่มเติม ให้คลิก Google > เปิดใช้
4. ในกล่องข้อความชื่อที่เปิดเผยต่อสาธารณะของโปรเจ็กต์ ให้ป้อนชื่อที่มีประโยชน์ เช่น My AI Extensions Codelab
5. เลือกอีเมลของคุณในเมนูอีเมลสนับสนุนสำหรับโปรเจ็กต์
6. คลิกบันทึก

ตั้งค่า Cloud Firestore

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

ตั้งค่า Cloud Storage for Firebase

1. ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยายสร้าง แล้วเลือก Storage
2. คลิกเริ่มต้นใช้งาน
3. เลือกตำแหน่งสำหรับ Bucket ของ Storage เริ่มต้น
   Bucket ใน US-WEST1, US-CENTRAL1 และ US-EAST1 จะใช้ประโยชน์จากระดับ"ใช้งานฟรีเสมอ" สำหรับ Google Cloud Storage ได้ Bucket ในตำแหน่งอื่นๆ ทั้งหมดจะใช้ราคาและการใช้งาน Google Cloud Storage
4. คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎความปลอดภัย
   ในภายหลังใน Codelab นี้ คุณจะเพิ่มกฎความปลอดภัยเพื่อรักษาความปลอดภัยของข้อมูล อย่าเผยแพร่หรือแสดงแอปต่อสาธารณะโดยไม่ได้เพิ่มกฎความปลอดภัยสำหรับที่เก็บข้อมูล
5. คลิกสร้าง

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

5. ตั้งค่าส่วนขยาย "สร้างแชทบอทด้วย Gemini API"

ติดตั้งส่วนขยาย "สร้างแชทบ็อตด้วย Gemini API"

1. ไปที่ส่วนขยาย "สร้างแชทบ็อตด้วย Gemini API"
2. คลิกติดตั้งในคอนโซล Firebase
3. เลือกโปรเจ็กต์ Firebase แล้วคลิกถัดไป
4. ในส่วนตรวจสอบว่าเปิดใช้ API และสร้างทรัพยากรแล้ว ให้คลิกเปิดใช้ข้างบริการที่ระบบแนะนำ แล้วคลิกถัดไป
5. สำหรับสิทธิ์ที่ระบบแนะนำ ให้เลือกให้สิทธิ์ แล้วคลิกถัดไป
6. กําหนดค่าส่วนขยาย ดังนี้
   1. ในเมนูผู้ให้บริการ Gemini API ให้เลือกว่าต้องการใช้ Gemini API จาก AI ของ Google หรือ Vertex AI สำหรับนักพัฒนาแอปที่ใช้ Firebase เราขอแนะนำให้ใช้ Vertex AI
   2. ในกล่องข้อความเส้นทางคอลเล็กชัน Firestore ให้ป้อน users/{uid}/discussion/{discussionId}/messages
      ในขั้นตอนถัดไปของ Codelab นี้ การเพิ่มเอกสารลงในคอลเล็กชันนี้จะทริกเกอร์ส่วนขยายให้เรียกใช้ Gemini API
   3. ในเมนูตำแหน่ง Cloud Functions ให้เลือกตำแหน่งที่ต้องการ (เช่น Iowa (us-central1) หรือตำแหน่งที่คุณระบุไว้ก่อนหน้านี้สำหรับฐานข้อมูล Firestore)
   4. ปล่อยให้ค่าอื่นๆ ทั้งหมดเป็นค่าเริ่มต้น
7. คลิกติดตั้งส่วนขยาย แล้วรอให้ส่วนขยายติดตั้ง

ลองใช้ส่วนขยาย "สร้างแชทบอทด้วย Gemini API"

แม้ว่าเป้าหมายของ Codelab นี้คือการโต้ตอบกับส่วนขยาย "สร้างแชทบอทด้วย Gemini API" ผ่านเว็บแอป แต่การเรียนรู้วิธีการทำงานของส่วนขยายโดยลองใช้ใน Firebase Console ก่อนก็เป็นประโยชน์เช่นกัน

ส่วนขยายจะทริกเกอร์เมื่อใดก็ตามที่มีการสร้างเอกสาร Firestore ภายใต้คอลเล็กชัน users/{uid}/discussion/{discussionId}/messages ซึ่งคุณสามารถทำได้ในคอนโซล Firebase

1. ในคอนโซล Firebase ให้ไปที่ Firestore แล้วคลิกเริ่มคอลเล็กชันในคอลัมน์แรก
2. ในกล่องข้อความรหัสคอลเล็กชัน ให้ป้อน users แล้วคลิกถัดไป
3. ในกล่องข้อความรหัสเอกสาร ให้คลิกรหัสอัตโนมัติ แล้วคลิกบันทึก
4. ในคอลเล็กชัน users ให้คลิกเริ่มคอลเล็กชัน
5. ในกล่องข้อความรหัสคอลเล็กชัน ให้ป้อน messages แล้วคลิกถัดไป
   1. ในกล่องข้อความรหัสเอกสาร ให้คลิกรหัสอัตโนมัติ
   2. ในกล่องข้อความ Field ให้ป้อน prompt
   3. ในกล่องข้อความ Value ให้ป้อน Tell me 5 random fruits
6. คลิกบันทึกแล้วรอสักครู่

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

เรียกใช้ส่วนขยายอีกครั้งโดยเพิ่มเอกสารอื่นลงในคอลเล็กชัน messages

1. ในคอลเล็กชัน messages ให้คลิก เพิ่มเอกสาร
2. ในกล่องข้อความรหัสเอกสาร ให้คลิกรหัสอัตโนมัติ
3. ในกล่องข้อความ Field ให้ป้อน prompt
4. ในกล่องข้อความ Value ให้ป้อน And now, vegetables
5. คลิกบันทึกแล้วรอสักครู่ เอกสารที่คุณเพิ่งเพิ่มลงในคอลเล็กชัน messages มีresponseสำหรับคำค้นหาของคุณแล้ว
   
   เมื่อสร้างคำตอบนี้ โมเดล Gemini ที่อยู่เบื้องหลังจะใช้ความรู้ในอดีตจากคำค้นหาก่อนหน้าของคุณ

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

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

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

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

firebase use YOUR_PROJECT_ID

ทําให้กฎความปลอดภัยสําหรับ Firestore และ Cloud Storage ใช้งานได้

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

1. หากต้องการติดตั้งใช้งานกฎความปลอดภัย ให้เรียกใช้คำสั่งนี้ในเทอร์มินัล

   firebase deploy --only firestore:rules,storage
   

2. หากระบบถามว่าจะให้บทบาท IAM แก่ Cloud Storage เพื่อใช้กฎข้ามบริการหรือไม่ ให้ป้อน Y หรือ N (ตัวเลือกใดก็ได้สำหรับ Codelab นี้)

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

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

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

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

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

   npm install
   npm run dev
   

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

ใช้แชทบ็อตของเว็บแอป

1. ในเบราว์เซอร์ ให้กลับไปที่แท็บที่มีเว็บแอป Friendly Conf ที่ทำงานในเครื่อง
2. คลิกลงชื่อเข้าใช้ด้วย Google แล้วเลือกบัญชี Google หากจำเป็น
3. หลังจากลงชื่อเข้าใช้แล้ว คุณจะเห็นหน้าต่างแชทว่างเปล่า
4. พิมพ์คำทักทาย (เช่น hi) แล้วคลิกส่ง
5. รอให้แชทบอทตอบกลับสักครู่

แชทบอทในแอปจะตอบกลับด้วยคำตอบทั่วไป

ปรับแต่งแชทบ็อตให้เหมาะกับแอป

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

1. ในเว็บแอปในเบราว์เซอร์ ให้ล้างการสนทนาโดยคลิกปุ่ม "x" สีแดง (ข้างข้อความในประวัติการแชท)
2. เปิดไฟล์ src/app/page.tsx ในเครื่องมือแก้ไขโค้ด
3. เลื่อนลงและแทนที่โค้ดในบรรทัดที่ 93 หรือใกล้เคียงซึ่งระบุว่า prompt: userMsg ด้วยโค้ดต่อไปนี้
   prompt: preparePrompt(userMsg, messages),
4. บันทึกไฟล์
5. กลับไปที่เว็บแอปที่ทำงานในเบราว์เซอร์
6. พิมพ์คำทักทาย (เช่น hi) อีกครั้ง แล้วคลิกส่ง
7. รอให้แชทบอทตอบกลับสักครู่

แชทบ็อตจะตอบกลับด้วยความรู้ที่อิงตามบริบทที่ระบุใน src/app/lib/context.md แม้ว่าคุณจะไม่ได้พิมพ์คำขอที่เฉพาะเจาะจง แต่โมเดล Gemini พื้นฐานจะสร้างคำแนะนำที่ปรับเปลี่ยนในแบบของคุณโดยอิงตามบริบทนี้ รวมถึงวันที่/เวลาปัจจุบัน ตอนนี้คุณสามารถระบุคำถามติดตามผลและเจาะลึกได้แล้ว

บริบทที่ขยายนี้มีความสำคัญต่อแชทบอท แต่คุณไม่ควรแสดงต่อผู้ใช้เว็บแอป วิธีซ่อนมีดังนี้

1. เปิดไฟล์ src/app/page.tsx ในเครื่องมือแก้ไขโค้ด
2. เลื่อนลงและแทนที่โค้ดในบรรทัดที่ 56 หรือใกล้เคียงที่ระบุว่า ...doc.data(), ด้วยโค้ดต่อไปนี้
   ...prepareMessage(doc.data()),
3. บันทึกไฟล์
4. กลับไปที่เว็บแอปที่ทำงานในเบราว์เซอร์
5. โหลดหน้าเว็บซ้ำ

นอกจากนี้ คุณยังลองใช้ความสามารถในการสนทนากับแชทบอทโดยใช้บริบทในอดีตได้ด้วย

1. ในกล่องข้อความพิมพ์ข้อความ ให้ถามคำถาม เช่น Any other interesting talks about AI?แชทบอทจะตอบกลับ
2. ในกล่องข้อความพิมพ์ข้อความ ให้ถามคำถามติดตามผลที่เกี่ยวข้องกับคำถามก่อนหน้า Give me a few more details about the last one.

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

7. ตั้งค่าส่วนขยาย "งานมัลติโมดัลด้วย Gemini API"

ส่วนขยาย "งานแบบมัลติโมดัลด้วย Gemini API" จะเรียกใช้ Gemini API ด้วยพรอมต์แบบมัลติโมดัลที่มีพรอมต์ข้อความ รวมถึง URL ของไฟล์ที่รองรับหรือ URL ของ Cloud Storage (โปรดทราบว่าแม้แต่ Google AI Gemini API ก็ใช้ URL ของ Cloud Storage เป็นโครงสร้างพื้นฐานของ URL ของไฟล์) นอกจากนี้ ส่วนขยายยังรองรับตัวแปร Handlebars เพื่อแทนที่ค่าจากเอกสาร Cloud Firestore สำหรับการปรับแต่งพรอมต์ข้อความด้วย

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

ติดตั้งส่วนขยาย "งานมัลติโมดัลด้วย Gemini API"

1. ไปที่ส่วนขยาย "งานมัลติโมดัลด้วย Gemini API"
2. คลิกติดตั้งในคอนโซล Firebase
3. เลือกโปรเจ็กต์ Firebase
4. คลิกถัดไป > ถัดไป > ถัดไป จนกว่าจะถึงส่วนกำหนดค่าส่วนขยาย
   1. ในเมนูผู้ให้บริการ Gemini API ให้เลือกว่าต้องการใช้ Gemini API จาก AI ของ Google หรือ Vertex AI สำหรับนักพัฒนาแอปที่ใช้ Firebase เราขอแนะนำให้ใช้ Vertex AI
   2. ในกล่องข้อความเส้นทางคอลเล็กชัน Firestore ให้ป้อน gallery
   3. ในกล่องข้อความ Prompt ให้ป้อน Please describe the provided image; if there is no image, say "no image"
   4. ในกล่องข้อความฟิลด์รูปภาพ ให้ป้อน image
   5. ในเมนูตำแหน่ง Cloud Functions ให้เลือกตำแหน่งที่ต้องการ (เช่น Iowa (us-central1) หรือตำแหน่งที่คุณระบุไว้ก่อนหน้านี้สำหรับฐานข้อมูล Firestore)
   6. ปล่อยให้ค่าอื่นๆ ทั้งหมดเป็นค่าเริ่มต้น
5. คลิกติดตั้งส่วนขยาย แล้วรอให้ส่วนขยายติดตั้ง

ลองใช้ส่วนขยาย "งานมัลติโมดัลด้วย Gemini API"

แม้ว่าเป้าหมายของ Codelab นี้คือการโต้ตอบกับส่วนขยาย "งานมัลติโมดัลด้วย Gemini API" ผ่านเว็บแอป แต่การเรียนรู้วิธีการทำงานของส่วนขยายโดยลองใช้ในคอนโซล Firebase ก่อนก็เป็นประโยชน์เช่นกัน

ส่วนขยายจะทริกเกอร์เมื่อใดก็ตามที่มีการสร้างเอกสาร Firestore ภายใต้คอลเล็กชัน users/{uid}/gallery ซึ่งคุณสามารถทำได้ในคอนโซล Firebase จากนั้นส่วนขยายจะใช้ URL ของรูปภาพ Cloud Storage ในเอกสาร Cloud Firestore และส่งเป็นส่วนหนึ่งของพรอมต์มัลติโมดอลในการเรียกใช้ Gemini API

ก่อนอื่น ให้อัปโหลดรูปภาพไปยัง Bucket ของ Cloud Storage โดยทำดังนี้

1. ไปที่พื้นที่เก็บข้อมูลภายในโปรเจ็กต์ Firebase
2. คลิกสร้างโฟลเดอร์
3. ในกล่องข้อความชื่อโฟลเดอร์ ให้ป้อน gallery
4. คลิกเพิ่มโฟลเดอร์
5. ในโฟลเดอร์ gallery ให้คลิกอัปโหลดไฟล์
6. เลือกไฟล์รูปภาพ JPEG ที่จะอัปโหลด

จากนั้นเพิ่ม URL ของ Cloud Storage สำหรับรูปภาพลงในเอกสาร Firestore (ซึ่งเป็นทริกเกอร์สำหรับส่วนขยาย)

1. ไปที่ Firestore ภายในโปรเจ็กต์ Firebase
2. คลิกเริ่มการรวบรวมในคอลัมน์แรก
3. ในกล่องข้อความรหัสคอลเล็กชัน ให้ป้อน gallery แล้วคลิกถัดไป
4. วิธีเพิ่มเอกสารลงในคอลเล็กชัน
   1. ในกล่องข้อความรหัสเอกสาร ให้คลิกรหัสอัตโนมัติ
   2. ในกล่องข้อความฟิลด์ ให้ป้อน image ในช่องค่า ให้ป้อน URI ตำแหน่งที่จัดเก็บของรูปภาพที่คุณเพิ่งอัปโหลด
5. คลิกเพิ่มช่อง
6. ในกล่องข้อความฟิลด์ ให้ป้อน published ในช่องประเภท ให้เลือกบูลีน เลือก true ในช่องค่า
7. คลิกบันทึกแล้วรอสักครู่

ตอนนี้คอลเล็กชัน gallery มีเอกสารที่มีคำตอบสำหรับคำค้นหาของคุณแล้ว

ใช้แกลเลอรีรูปภาพของเว็บแอป

1. ในเบราว์เซอร์ ให้กลับไปที่แท็บที่มีเว็บแอป Friendly Conf ที่ทำงานในเครื่อง
2. คลิกแท็บการนำทางแกลเลอรี
3. คุณจะเห็นแกลเลอรีรูปภาพที่อัปโหลดและคำอธิบายที่ AI สร้างขึ้น โดยควรมีรูปภาพที่คุณอัปโหลดไว้ก่อนหน้านี้ในโฟลเดอร์ gallery ใน Bucket ของ Storage
4. คลิกปุ่มเพื่อ "อัปโหลด" แล้วเลือกรูปภาพ JPEG อื่น
5. รอสักครู่เพื่อให้รูปภาพแสดงในแกลเลอรี หลังจากนั้นไม่นาน ระบบจะแสดงรายละเอียดที่ AI สร้างขึ้นสำหรับรูปภาพที่อัปโหลดใหม่ด้วย

หากต้องการทำความเข้าใจโค้ดสำหรับวิธีติดตั้งใช้งาน ให้ดู src/app/gallery/page.tsx ในโค้ดเบสของเว็บแอป

8. โบนัส: ทำให้แอปพลิเคชันใช้งานได้

Firebase มีหลายวิธีในการติดตั้งใช้งานเว็บแอปพลิเคชัน สำหรับ Codelab นี้ ให้เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

• ตัวเลือกที่ 1: โฮสติ้งของ Firebase - ใช้ตัวเลือกนี้หากคุณตัดสินใจไม่สร้างที่เก็บ GitHub ของคุณเอง (และมีเพียงซอร์สโค้ดที่จัดเก็บไว้ในเครื่องของคุณ)
• ตัวเลือกที่ 2: Firebase App Hosting - ใช้ตัวเลือกนี้หากต้องการให้ระบบทำการติดตั้งใช้งานโดยอัตโนมัติทุกครั้งที่คุณพุชการเปลี่ยนแปลงไปยังที่เก็บ GitHub ของคุณเอง บริการ Firebase ใหม่นี้สร้างขึ้นมาเพื่อตอบโจทย์ความต้องการของแอปพลิเคชัน Next.js และ Angular แบบไดนามิกโดยเฉพาะ

ตัวเลือกที่ 1: ทำให้ใช้งานได้โดยใช้ โฮสติ้งของ Firebase

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

1. ในเทอร์มินัล ให้เริ่มต้นใช้งานโฮสติ้งของ Firebase โดยเรียกใช้คำสั่งต่อไปนี้

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. สำหรับพรอมต์ Detected an existing Next.js codebase in your current directory, should we use this? ให้กด Y
3. สำหรับพรอมต์ In which region would you like to host server-side content, if applicable? ให้เลือกตำแหน่งเริ่มต้นหรือสถานที่ตั้งที่คุณใช้ก่อนหน้านี้ใน Codelab นี้ จากนั้นกด Enter (หรือ return ใน macOS)
4. สำหรับพรอมต์ Set up automatic builds and deploys with GitHub? ให้กด N
5. ทำให้เว็บแอปใช้งานได้ในโฮสติ้งโดยเรียกใช้คำสั่งนี้

   firebase deploy --only hosting
   

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

ตัวเลือกที่ 2: ติดตั้งใช้งานโดยใช้ Firebase App Hosting

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

1. คอมมิตการเปลี่ยนแปลงไปยัง GitHub
2. ในคอนโซล Firebase ให้ไปที่ App Hosting ภายในโปรเจ็กต์ Firebase
3. คลิกเริ่มต้นใช้งาน > เชื่อมต่อกับ GitHub
4. เลือกบัญชี GitHub และที่เก็บ คลิกถัดไป
5. ในการตั้งค่าการติดตั้งใช้งาน > ไดเรกทอรีราก ให้ป้อนชื่อโฟลเดอร์ที่มีซอร์สโค้ด (หาก package.json ไม่ได้อยู่ในไดเรกทอรีรากของที่เก็บ)
6. สำหรับกิ่งก้านสด ให้เลือกกิ่งก้าน main ของที่เก็บ GitHub คลิกถัดไป
7. ป้อนรหัสสำหรับแบ็กเอนด์ (เช่น chatbot)
8. คลิกเสร็จสิ้นและทำให้ใช้งานได้

ระบบจะใช้เวลาสักครู่เพื่อให้การทำให้ใช้งานได้ใหม่พร้อมใช้งาน คุณสามารถตรวจสอบสถานะการทำให้ใช้งานได้ในส่วน App Hostingของคอนโซล Firebase

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

9. บทสรุป

ยินดีด้วย คุณทำได้ดีมากใน Codelab นี้

การติดตั้งและกำหนดค่าส่วนขยาย

คุณใช้คอนโซล Firebase เพื่อกำหนดค่าและติดตั้งส่วนขยาย Firebase ต่างๆ ที่ใช้ Generative AI การใช้ Firebase Extensions นั้นสะดวกเนื่องจากคุณไม่จำเป็นต้องเรียนรู้และเขียนโค้ด Boilerplate จำนวนมากเพื่อจัดการการตรวจสอบสิทธิ์กับบริการของ Google Cloud หรือตรรกะ Cloud Functions ของแบ็กเอนด์เพื่อฟังและโต้ตอบกับ Firestore รวมถึงบริการและ API ของ Google Cloud

ลองใช้ส่วนขยายโดยใช้คอนโซล Firebase

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

การสร้างเว็บแอปที่ทำงานด้วยระบบ AI

คุณสร้างเว็บแอปที่ทำงานด้วยระบบ AI ซึ่งใช้ Firebase Extensions เพื่อเข้าถึงความสามารถเพียงไม่กี่อย่างของโมเดล Gemini

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

นอกจากนี้ เว็บแอปยังใช้ส่วนขยาย "งานมัลติโมดัลด้วย Gemini API" เพื่อสร้างคำอธิบายรูปภาพสำหรับรูปภาพที่อัปโหลดโดยอัตโนมัติ

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

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