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

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

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

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

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

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

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

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

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

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

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

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

เว็บแอป

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

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

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

d54f2043af908fb.png

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

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

บริการ

เหตุผลในการใช้งาน

Genkit

คุณใช้ Genkit เพื่อนำ Generative AI มาใช้ในแอปพลิเคชัน Node.js / Next.js

Cloud Firestore

คุณจัดเก็บข้อมูลใน Cloud Firestore ซึ่งจะใช้สำหรับการค้นหาความคล้ายคลึงของเวกเตอร์

Vertex AI ของ Google Cloud

คุณใช้โมเดลพื้นฐานจาก Vertex AI (เช่น Gemini) เพื่อขับเคลื่อนฟีเจอร์ AI

Firebase App Hosting

คุณเลือกใช้ Firebase App Hosting ที่ปรับปรุงใหม่เพื่อแสดงเว็บแอป Next.js แบบไดนามิก (เชื่อมต่อกับที่เก็บ GitHub) ได้

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-rag65ef006167d600ab.png
  2. สร้างโคลนในเครื่องของที่เก็บ GitHub ของ Codelab ที่คุณเพิ่งสร้าง
    git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag

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

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

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

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

โฟลเดอร์

คำอธิบาย

load-firestore-data

เครื่องมือบรรทัดคำสั่ง Helper เพื่อป้อนข้อมูลล่วงหน้าในคอลเล็กชัน Firestore อย่างรวดเร็ว

*อื่นๆ

โค้ดเว็บแอป Next.js

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

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

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

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

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

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

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

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

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

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

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

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

ตั้งค่า 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

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 คุณควรเห็นสคีมาข้อมูลที่นําเข้าและเนื้อหาที่แสดงข้อมูลตัวอย่าง Compass ในคอนโซล Firebase

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

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

  1. รับการกำหนดค่า Firebase ของแอป
    1. ในคอนโซล Firebase ให้ไปที่โปรเจ็กต์ Firebase
    2. ในแผงด้านซ้าย ให้คลิกไอคอนรูปเฟืองข้างภาพรวมโปรเจ็กต์ แล้วเลือกการตั้งค่าโปรเจ็กต์
    3. เลือกเว็บแอปในการ์ด "แอปของคุณ"
    4. ในส่วน "การตั้งค่าและการกำหนดค่า SDK" ให้เลือกตัวเลือก Config
    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/ หรือ URL ที่คล้ายกัน

หน้าจอหลักของแอปเข็มทิศ

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

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

ค้นหาหน้าจอ &quot;ทริปในฝัน&quot;

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

6. เจาะลึก Generative AI ด้วย Genkit

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

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

ในขั้นตอนสุดท้ายของโค้ดแล็บนี้ คุณจะได้ทำให้แอป Genkit ใช้งานได้ใน App Hosting ของ 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 แนะนำวันหยุดพักผ่อน โปรดทราบว่าคุณจะใช้คำสั่งของระบบเพื่อกำหนดลักษณะการทำงานของโมเดลตามความต้องการเฉพาะของคุณได้อย่างไร นอกจากนี้ วิธีนี้ยังใช้ได้กับโมเดลที่ไม่รองรับคำสั่งของระบบโดยกำเนิดด้วย

การโต้ตอบกับโมเดล Gemini ใน UI ของนักพัฒนาแอป Genkit

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

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

หากต้องการใช้ Dotprompt ให้เริ่มต้นด้วยข้อความ "Hello World" ดังนี้

  1. เปิดไฟล์ prompts/1-hello-world.prompt ในเครื่องมือแก้ไขโค้ด
  2. ใน UI สำหรับนักพัฒนาซอฟต์แวร์ของ Genkit ให้เปิด prompts/1-hello-world
  3. ใช้ชื่อหรือรหัสภาษาที่คุณคุ้นเคย หรือปล่อยให้เป็นสตริงว่าง
  4. คลิกเรียกใช้การใช้ Dotprompt เพื่อสร้างคำทักทายในภาษาสวีเดน
  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. คลิกเรียกใช้

การใช้ Dotprompt เพื่อระบุสคีมาเอาต์พุต

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

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

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

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

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

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

ใช้ประโยชน์จากอินพุตหลายรูปแบบ

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

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

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

  1. สร้างดัชนีโดยตรวจสอบว่าได้แทนที่ 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": "{}"}'
  2. เปิด retrievers/placesRetriever ใน UI สำหรับนักพัฒนาซอฟต์แวร์ Genkit
  3. คลิกเรียกใช้ สังเกตออบเจ็กต์ที่สร้างขึ้นพร้อมข้อความตัวยึดตำแหน่ง ซึ่งระบุตำแหน่งที่คุณจะใช้ตรรกะของเครื่องมือดึงข้อมูล
  4. เปิดไฟล์ src/lib/genkit/placesRetriever.ts ในเครื่องมือแก้ไขโค้ด
  5. เลื่อนลงจนสุดแล้วแทนที่ตัวยึดตำแหน่ง placesRetriever ด้วยข้อความต่อไปนี้
    export const placesRetriever = defineFirestoreRetriever(ai, {
  name: 'placesRetriever',
  firestore,
  collection: 'places',
  contentField: 'knownFor',
  vectorField: 'embedding',
  embedder: vertexAI.embedder('text-embedding-005', {outputDimensionality: 768}),
  distanceMeasure: 'COSINE',
});

ทดสอบตัวดึงข้อมูล

  1. ใน UI สำหรับนักพัฒนาซอฟต์แวร์ของ Genkit ให้เปิดเครื่องมือดึงข้อมูล retrievers/placesRetriever
  2. ระบุคำค้นหาต่อไปนี้
    {
    "content": [
        {
            "text": "UNESCO"
        }
    ]
}
  3. คุณยังระบุตัวเลือกได้ด้วย ตัวอย่างเช่น วิธีระบุจำนวนเอกสารที่ Retriever ควรแสดงมีดังนี้
    {
    "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. หากพบข้อผิดพลาดหรือลักษณะการทำงานที่ไม่คาดคิด ให้ตรวจสอบรายละเอียดในแท็บตรวจสอบ นอกจากนี้ คุณยังใช้แท็บนี้เพื่อตรวจสอบประวัติการดำเนินการจากที่เก็บการติดตามได้ด้วย

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

1e626124e09e04e9.pngb059decb53c249a1.pnge31f6acf87a98cb2.png19c0c9459d5e1601.png

9. ทําให้แอปพลิเคชันใช้งานได้ด้วย Firebase App Hosting

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

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

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

กระบวนการติดตั้งใช้งานจะใช้เวลาสักครู่ คุณติดตามความคืบหน้าได้ในส่วน App Hosting ของคอนโซล 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 ที่ครอบคลุมนี้เสร็จสมบูรณ์

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

ตลอดเส้นทางนี้ คุณได้รับประสบการณ์จากการลงมือปฏิบัติจริงเกี่ยวกับรูปแบบวิศวกรรมซอฟต์แวร์ที่จำเป็น ซึ่งมีความสำคัญต่อการสร้างแอปพลิเคชัน Generative AI ที่มีประสิทธิภาพ รูปแบบเหล่านี้ ได้แก่

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

การฝึกฝนแนวคิดเหล่านี้และนำไปใช้ภายในระบบนิเวศของ Firebase จะช่วยให้คุณพร้อมที่จะออกผจญภัยในโลกของ GenAI ด้วยตัวคุณเอง สำรวจความเป็นไปได้อันกว้างใหญ่ สร้างแอปพลิเคชันที่เป็นนวัตกรรมใหม่ และก้าวข้ามขีดจำกัดของสิ่งที่ทำได้ด้วย Generative AI ต่อไป

การสำรวจตัวเลือกการติดตั้งใช้งานอื่นๆ

Genkit มีตัวเลือกการติดตั้งใช้งานที่หลากหลายเพื่อให้เหมาะกับความต้องการเฉพาะของคุณ ซึ่งรวมถึงตัวเลือกต่อไปนี้

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

npx genkit init

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