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

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

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

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

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

• ความรู้เกี่ยวกับ 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 ของโค้ดแล็บที่คุณเพิ่งสร้างขึ้น

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

หากไม่ได้ติดตั้ง 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. ในเทอร์มินัล ให้ไปที่โฟลเดอร์ 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 2-3 อย่างที่ใช้โดยเว็บแอปตัวอย่างในภายหลังในโค้ดแล็บนี้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตั้งค่า Cloud Firestore

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

ตั้งค่า Cloud Storage for Firebase

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

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

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}/messages
      ในขั้นตอนต่อๆ ไปของโค้ดแล็บนี้ การเพิ่มเอกสารลงในคอลเล็กชันนี้จะทริกเกอร์ส่วนขยายให้เรียกใช้ Gemini API
   3. ในเมนูตำแหน่ง Cloud Functions ให้เลือกตำแหน่งที่ต้องการ (เช่น Iowa (us-central1) หรือตำแหน่งที่คุณระบุไว้ก่อนหน้านี้สำหรับฐานข้อมูล Firestore)
   4. ปล่อยค่าอื่นๆ ทั้งหมดเป็นค่าเริ่มต้น
7. คลิกติดตั้งส่วนขยาย แล้วรอให้ติดตั้งส่วนขยาย

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

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

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

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

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

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

1. ในคอลเล็กชัน messages ให้คลิก เพิ่มเอกสาร
2. ในกล่องข้อความรหัสเอกสาร ให้คลิกรหัสอัตโนมัติ
3. ป้อน prompt ในกล่องข้อความฟิลด์
4. ในกล่องข้อความค่า ให้ป้อน And now, vegetables
5. คลิกบันทึกและรอ 2-3 วินาที ตอนนี้เอกสารที่คุณเพิ่งเพิ่มลงในคอลเล็กชัน 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. หากระบบถามว่าจะให้สิทธิ์ Cloud Storage เข้าถึงบทบาท IAM เพื่อใช้กฎข้ามบริการหรือไม่ ให้ป้อน Y หรือ N (ใช้ตัวเลือกใดก็ได้กับ Codelab นี้)

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

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

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

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

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

   npm install
   npm run dev
   

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

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

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

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

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

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

1. ในเว็บแอปในเบราว์เซอร์ ให้ล้างการสนทนาโดยคลิกปุ่ม "x" สีแดง (ข้างข้อความในประวัติการแชท)
2. เปิดไฟล์ src/app/page.tsx ในเครื่องมือแก้ไขโค้ด
3. เลื่อนลงและแทนที่โค้ดในหรือใกล้กับบรรทัด 77 ที่ระบุว่า 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.

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

โบนัส: เรียกใช้เว็บแอปโดยใช้ Firebase Local Emulator Suite

Firebase Local Emulator Suite ให้คุณทดสอบฟีเจอร์ส่วนใหญ่ของเว็บแอปในเครื่องได้

1. ในเทอร์มินัล ให้ตรวจสอบว่าคุณอยู่ที่รูทของเว็บแอป
2. เรียกใช้คําสั่งต่อไปนี้เพื่อติดตั้งและเรียกใช้ Firebase Local Emulator Suite

   firebase init emulators
   firebase emulators:start
   

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

ส่วนขยาย "งานแบบมัลติโมดัลด้วย Gemini API" จะเรียกใช้ Gemini API ด้วยพรอมต์แบบมัลติโมดัลซึ่งมีพรอมต์ข้อความ รวมถึง URL ไฟล์หรือ URL ของ Cloud Storage ที่รองรับ (โปรดทราบว่าแม้แต่ Gemini API ของ Google AI ก็ยังใช้ URL ของ Cloud Storage เป็นโครงสร้างพื้นฐานของ URL ไฟล์ที่อยู่เบื้องหลัง) นอกจากนี้ ส่วนขยายยังรองรับตัวแปรแฮนเดิลบาร์เพื่อแทนที่ค่าจากเอกสาร 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. ในกล่องข้อความพรอมต์ ให้ป้อน 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 นี้จะโต้ตอบกับส่วนขยาย "Multimodal Tasks with the Gemini API" ผ่านเว็บแอป แต่การเรียนรู้วิธีการทำงานของส่วนขยายโดยการลองใช้ในคอนโซล Firebase ก่อนก็มีประโยชน์เช่นกัน

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

ขั้นแรก ให้อัปโหลดรูปภาพไปยังที่เก็บข้อมูล 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. ในกล่องข้อความ Field ให้ป้อน image ในช่อง Value ให้ป้อน URI Storage location ของรูปภาพที่คุณเพิ่งอัปโหลด
5. คลิกเพิ่มช่อง
6. ในกล่องข้อความ Field ให้ป้อน published ในช่องประเภท ให้เลือก boolean เลือก true ในช่อง Value
7. คลิกบันทึกและรอ 2-3 วินาที

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

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

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

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

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

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

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

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

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

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

   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? ให้เลือกตําแหน่งเริ่มต้นหรือตําแหน่งที่คุณใช้ก่อนหน้านี้ในโค้ดแล็บนี้ จากนั้นกด 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 ให้ไปที่โฮสติ้งแอปภายในโปรเจ็กต์ Firebase
3. คลิกเริ่มต้นใช้งาน > เชื่อมต่อกับ GitHub
4. เลือกบัญชี GitHub และที่เก็บ คลิกถัดไป
5. ในการตั้งค่าการทําให้ใช้งานได้ > ไดเรกทอรีรูท ให้ป้อนชื่อโฟลเดอร์ที่มีซอร์สโค้ด (หาก package.json ไม่ได้อยู่ในไดเรกทอรีรูทของที่เก็บข้อมูล)
6. สำหรับสาขาที่ใช้งานอยู่ ให้เลือกสาขา main ของที่เก็บ GitHub คลิกถัดไป
7. ป้อนรหัสสําหรับแบ็กเอนด์ (เช่น chatbot)
8. คลิกเสร็จสิ้นและทำให้ใช้งานได้

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

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

9. บทสรุป

ยินดีด้วย คุณทําสิ่งต่างๆ ได้มากมายใน Codelab นี้

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

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