פיתוח תכונות של AI גנרטיבי שמבוססות על הנתונים שלכם באמצעות Firebase Genkit

1. לפני שמתחילים

בקודלאב הזה תלמדו איך להשתמש ב-Firebase Genkit כדי לשלב בינה מלאכותית גנרטיבית באפליקציה שלכם. Firebase Genkit הוא מסגרת קוד פתוח שבעזרתה אפשר ליצור, לפרוס ולנטר אפליקציות מבוססות-AI שיהיו מוכנות לייצור.

Genkit מיועד למפתחי אפליקציות, ומאפשר לכם לשלב בקלות יכולות AI מתקדמות באפליקציות שלכם באמצעות דפוסים ותבניות מוכרים. הוא נוצר על ידי צוות Firebase, תוך ניצול הניסיון שלנו ביצירת כלים שמשמשים מיליוני מפתחים ברחבי העולם.

דרישות מוקדמות

  • היכרות עם Firestore , Node.js ו-TypeScript.

מה תלמדו

  • איך לפתח אפליקציות חכמות יותר עם היכולות המתקדמות של Firestore לחיפוש באמצעות דמיון וקטורי.
  • איך להטמיע בפועל AI גנרטיבי באפליקציות באמצעות Firebase Genkit.
  • מכינים את הפתרון לפריסה ולשילוב.

מה צריך להכין

  • דפדפן לבחירתך, כגון Google Chrome
  • סביבת פיתוח עם עורך קוד וטרמינל
  • חשבון Google ליצירה ולניהול של פרויקט Firebase

2. בדיקה של אפליקציית האינטרנט ושירותי הענן שבהם נעשה שימוש

בקטע הזה נסביר על אפליקציית האינטרנט שתבנו באמצעות Codelab הזה, וגם נסביר על שירותי הענן שבהם תשתמשו.

אפליקציית אינטרנט

ב-Codelab הזה תעבוד ב-codebase של אפליקציה שנקראת Compass – אפליקציה לתכנון חופשות. המשתמשים יכולים לבחור יעד, לעיין בפעילויות היעד וליצור מסלול נסיעה לנסיעה.

ב-Codelab הזה תטמיעו שתי תכונות חדשות שנועדו לשפר את התעניינות המשתמשים בדף הבית של האפליקציה. שתי התכונות האלה מבוססות על AI גנרטיבי:

  • נכון לעכשיו, באפליקציה מוצגת רשימה סטטית של יעדים. הוא ישתנה לדינמי!
  • אתם תטמיעו מסלול נסיעה שמאוכלס באופן אוטומטי כדי לשפר את הנאמנות.

d54f2043af908fb.png

השירותים שבהם נעשה שימוש

ב-Codelab הזה נעשה שימוש בתכונות ובשירותים רבים של Firebase ו-Cloud, ורוב הקוד לתחילת העבודה עבורם יסופק לכם. בטבלה הבאה מפורטים השירותים שבהם תשתמשו והסיבות לשימוש בהם.

שירות

הסיבה לשימוש

Firebase Genkit

אתם משתמשים ב-Genkit כדי לשלב בינה מלאכותית גנרטיבית לאפליקציה של Node.js או Next.js.

Cloud Firestore

אתם מאחסנים נתונים ב-Cloud Firestore, ולאחר מכן משתמשים בהם לחיפוש דמיון בין וקטורים.

Vertex AI של Google Cloud

אתם משתמשים במודלים בסיסיים מ-Vertex AI (כמו Gemini) כדי להפעיל את תכונות ה-AI.

אירוח אפליקציות ב-Firebase

אפשר גם להשתמש בגרסה החדשה והיעילה של אירוח האפליקציות ב-Firebase כדי להציג את אפליקציית האינטרנט של 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. יוצרים עותק מקומי (clone) של מאגר GitHub של הקודלמאב שיצרתם:
    git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag

אם לא התקנתם את git או שאתם מעדיפים לא ליצור מאגר חדש:

מורידים את מאגר GitHub כקובץ zip.

בדיקת מבנה התיקיות

במכונה המקומית, מחפשים את המאגר המשובץ ובודקים את מבנה התיקיות:

תיקייה

תיאור

genkit-functions

קוד Genkit העורפי

load-firestore-data

כלי שורת הפקודה של העוזר הדיגיטלי לאכלוס מראש במהירות את האוסף ב-Firestore

*כל השאר

קוד של אפליקציית האינטרנט Next.js

תיקיית הבסיס כוללת קובץ README.md שמאפשר להתחיל להריץ את אפליקציית האינטרנט במהירות, באמצעות הוראות פשוטות. עם זאת, אם אתם לומדים את הנושא בפעם הראשונה, כדאי להשלים את הקודלהב הזה (במקום המדריך למתחילים) כי הוא מכיל את קבוצת ההוראות המקיפות ביותר.

אם אתם לא בטוחים שהטמעתם את הקוד בצורה נכונה לפי ההוראות במהלך הקודלאב הזה, תוכלו למצוא את קוד הפתרון בהסתעפות end ב-Git.

התקנת ה-CLI של Firebase

  1. מוודאים ש-Firebase CLI מותקן ושגרסתו היא 13.6 ואילך:
    firebase --version
  2. אם התקנתם את Firebase CLI אבל הגרסה שלו היא לא 13.6 ואילך, עליכם לעדכן אותו:
    npm update -g firebase-tools
  3. אם ה-CLI של Firebase לא מותקן, מתקינים אותו:
    npm install -g firebase-tools

אם אתם לא מצליחים לעדכן או להתקין את Firebase CLI בגלל שגיאות הרשאה, תוכלו לעיין במסמכי התיעוד של npm או להשתמש באפשרות התקנה אחרת.

כניסה ל-Firebase

  1. בטרמינל, מתחברים ל-Firebase:
    firebase login
    אם במסוף מוצגת ההודעה שכבר נכנסתם ל-Firebase, תוכלו לדלג לקטע הגדרת פרויקט Firebase בקודלאב הזה.
  2. במסוף, בהתאם לאפשרות איסוף הנתונים ב-Firebase, מזינים Y או N. (אחת מהאפשרויות פועלת ב-Codelab הזה)
  3. בדפדפן, בוחרים את חשבון Google ולוחצים על אישור.

התקנת ה-CLI של gcloud ב-Google Cloud

  1. מתקינים את ה-CLI של gcloud.
  2. נכנסים ל-Google Cloud במסוף:
    gcloud auth login

4. הגדרת פרויקט Firebase

בקטע הזה צריך להגדיר פרויקט Firebase ולרשום בו אפליקציית אינטרנט של Firebase. בהמשך, ב-Codelab הזה, יופעלו גם כמה שירותים שמשמשים את אפליקציית האינטרנט לדוגמה.

כל השלבים בקטע הזה מתבצעים במסוף Firebase.

יוצרים פרויקט Firebase

  1. נכנסים למסוף Firebase עם אותו חשבון Google שבו השתמשתם בשלב הקודם.
  2. לוחצים על Create a project (יצירת פרויקט) ומזינים שם פרויקט (לדוגמה, Compass Codelab).
    חשוב לזכור את מזהה הפרויקט שהוקצה באופן אוטומטי לפרויקט ב-Firebase (או ללחוץ על הסמל Edit (עריכה) כדי להגדיר את מזהה הפרויקט המועדף). המזהה הזה ישמש אתכם מאוחר יותר כדי לזהות את פרויקט Firebase ב-CLI של Firebase. אם תשכחו את המזהה, תוכלו למצוא אותו מאוחר יותר בקטע הגדרות הפרויקט.
  3. לוחצים על המשך.
  4. אם מופיעה בקשה, קוראים את התנאים של Firebase ומאשרים אותם, ואז לוחצים על המשך.
  5. לצורך השימוש ב-Codelab הזה, לא צריך את Google Analytics, לכן משביתים את האפשרות של Google Analytics.
  6. לוחצים על יצירת פרויקט, ממתינים עד להקצאת הפרויקט ולאחר מכן לוחצים על המשך.

הוספת אפליקציית אינטרנט לפרויקט Firebase

  1. עוברים למסך Project Overview (סקירה כללית של הפרויקט) בפרויקט Firebase ולוחצים על סמל עם סוגריים זוויתיים פותחים, קו נטוי וסוגריים זוויתיים סוגרים, שמייצג אפליקציית אינטרנט Web (אינטרנט).הלחצן &#39;אינטרנט&#39; בחלק העליון של &#39;סקירה כללית של הפרויקט&#39; במסוף Firebase
  2. בתיבת הטקסט App nickname (כינוי לאפליקציה), מזינים כינוי לאפליקציה שקל לזכור, כמו My Compass Codelab App. אתם יכולים להשאיר את תיבת הסימון להגדרת אירוח ב-Firebase לא מסומנת, כי תוכלו להגדיר שירות אירוח אופציונלי בשלב האחרון של הקודלה.
    רישום אפליקציית האינטרנט
  3. לוחצים על רישום האפליקציה > המשך למסוף.

מעולה! רשמתם עכשיו אפליקציית אינטרנט בפרויקט Firebase החדש.

שדרוג תוכנית התמחור והתשלומים ב-Firebase

כדי להשתמש ב-Firebase Genkit וב-Vertex AI (ובשירותי הענן הבסיסיים שלהם), הפרויקט ב-Firebase צריך להיות בתוכנית תשלום לפי שימוש (Blaze). כלומר, הוא מקושר לחשבון לחיוב ב-Cloud.

  • כדי להשתמש בחשבון לחיוב ב-Cloud, צריך להוסיף אמצעי תשלום, למשל כרטיס אשראי.
  • אם אתם משתמשים חדשים ב-Firebase וב-Google Cloud, כדאי לבדוק אם אתם זכאים לקרדיט בסך 300$ ולחשבון לחיוב ב-Cloud בתקופת ניסיון בחינם.
  • אם אתם מבצעים את הקודלאב הזה כחלק מאירוע, כדאי לשאול את המארגן אם יש זיכויים ב-Cloud שזמינים.

מידע נוסף על התמחור של Vertex AI

כדי לשדרג את הפרויקט לתוכנית Blaze:

  1. במסוף Firebase, בוחרים באפשרות שדרוג התוכנית.
  2. בוחרים את תוכנית Blaze. פועלים לפי ההוראות במסך כדי לקשר חשבון לחיוב ב-Cloud לפרויקט.
    אם נדרשת יצירת חשבון לחיוב ב-Cloud כחלק מהשדרוג, יכול להיות שתצטרכו לחזור לתהליך השדרוג במסוף Firebase כדי להשלים את השדרוג.

הגדרת Cloud Firestore

  1. בחלונית הימנית של מסוף Firebase, מרחיבים את Build ובוחרים באפשרות Firestore database.
  2. לוחצים על Create dataset.
  3. משאירים את הערך (default) בשדה Database ID.
  4. בוחרים מיקום למסד הנתונים ולוחצים על הבא.
    באפליקציה אמיתית, כדאי לבחור מיקום קרוב למשתמשים.
  5. לוחצים על הפעלה במצב בדיקה. קוראים את כתב הוויתור לגבי כללי האבטחה.
    לא מפיצים או חושפים אפליקציה באופן ציבורי בלי להוסיף כללי אבטחה למסד הנתונים.
  6. לוחצים על יצירה.

הפעלה של Vertex AI

משתמשים ב-CLI של gcloud כדי להגדיר את Vertex AI. בכל הפקודות בדף הזה, חשוב להחליף את YOUR_PROJECT_ID במזהה של פרויקט Firebase.

  1. במסוף, מגדירים את פרויקט ברירת המחדל ל-Google Cloud SDK:
    gcloud config set project YOUR_PROJECT_ID
  2. אם מופיעה הודעת האזהרה "WARNING: Your active project does not match the quota project in your local Application Default Credentials file. כתוצאה מכך, יכולות להיות בעיות בלתי צפויות במכסות", ולאחר מכן מריצים את הפקודה הבאה כדי להגדיר את פרויקט המכסה:
    gcloud auth application-default set-quota-project YOUR_PROJECT_ID
  3. מפעילים את שירות Vertex AI בפרויקט:
    gcloud services enable aiplatform.googleapis.com

5. הגדרת אפליקציית האינטרנט

כדי להריץ את אפליקציית האינטרנט, צריך להריץ פקודות בטרמינל ולהוסיף קוד בעורך הקוד. בכל הפקודות בדף הזה, חשוב להחליף את YOUR_PROJECT_ID במזהה של פרויקט Firebase.

הגדרת ה-CLI של Firebase לטירגוט הפרויקט

  1. בטרמינל, עוברים לספריית הבסיס (root) של פרויקט Codelab.
  2. כדי לגרום ל-CLI של Firebase להפעיל את כל הפקודות בפרויקט Firebase, מריצים את הפקודה הבאה:
    firebase use YOUR_PROJECT_ID

ייבוא נתונים לדוגמה ל-Firestore

כדי שתוכלו להתחיל לעבוד במהירות, ה-Codelab הזה מספק לכם נתונים לדוגמה שנוצרו מראש עבור Firestore.

  1. כדי לאפשר ל-codebase המקומי להריץ קוד שבדרך כלל משתמש בחשבון שירות, מריצים את הפקודה הבאה בטרמינל:
    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, כמו מסד הנתונים, קוד האפליקציה שלכם לאפליקציית האינטרנט צריך להיות משויך לפרויקט Firebase הנכון. כדי לעשות זאת, צריך להוסיף את הגדרות Firebase לקוד של האפליקציה. ההגדרות האישיות האלה כוללות ערכים חיוניים כמו מזהה הפרויקט, מפתח ה-API ומזהה האפליקציה של האפליקציה, וגם ערכים אחרים שמאפשרים לאפליקציה לקיים אינטראקציה עם Firebase.

  1. מקבלים את הגדרת Firebase של האפליקציה:
    1. במסוף Firebase, עוברים אל פרויקט Firebase.
    2. בחלונית הימנית, לוחצים על סמל גלגל השיניים לצד סקירה כללית של הפרויקט ובוחרים באפשרות הגדרות הפרויקט.
    3. בכרטיס 'האפליקציות שלך', בוחרים את אפליקציית האינטרנט הרצויה.
    4. בקטע 'הגדרה והגדרה של SDK', בוחרים באפשרות הגדרה.
    5. העתק את הקוד. הוא מתחיל ב-const firebaseConfig ....
  2. מוסיפים את ההגדרה של Firebase ל-codebase של אפליקציית האינטרנט:
    1. בעורך הקוד, פותחים את הקובץ src/lib/genkit/genkit.config.ts.
    2. מחליפים את הקטע הרלוונטי בקוד שהעתקתם.
    3. שומרים את הקובץ.

הצגת תצוגה מקדימה של אפליקציית האינטרנט בדפדפן

  1. בטרמינל, מתקינים את יחסי התלות ומריצים את אפליקציית האינטרנט:
    npm install
npm run dev
  2. בדפדפן, עוברים אל כתובת ה-URL של אירוח שמתארחת באופן מקומי כדי להציג את אפליקציית האינטרנט. לדוגמה, ברוב המקרים, כתובת ה-URL היא http://localhost:3000/ או משהו דומה.

מסך הבית של אפליקציית המצפן

Compass היא אפליקציית Next.js שמשתמשת ב-React Server Components, ודף הבית שלה נראה כך.

לוחצים על חיפוש הנסיעה של החלומות שלי. אפשר לראות שכרגע מוצגים בו נתונים שהוגדרו מראש ליעדים קבועים מסוימים:

איפה מוצאים את מסך הטיול החלומי

אתם מוזמנים להתנסות. כשהכול מוכן, לוחצים על הלחצן הראשי בית (בפינה השמאלית העליונה).

6. התנסות ב-AI גנרטיבי עם Genkit

עכשיו הכול מוכן ואפשר להתחיל להשתמש ביכולות של ה-AI הגנרטיבי באפליקציה שלכם! בקטע הזה של הקודלהב נסביר איך מטמיעים תכונה שמציעה יעדים על סמך השראה שהמשתמשים מספקים. תשתמשו ב-Firebase Genkit וב-Vertex AI של Google Cloud כספק של המודל הגנרטיבי (תשתמשו ב-Gemini).

Genkit יכול לאחסן את מצב המעקב ומצב הזרימה (כדי לאפשר לכם לבדוק את התוצאה של ביצוע תהליכים של Genkit). ב-codelab הזה נשתמש ב-Firestore כדי לאחסן את הנתונים האלה.

בשלב האחרון ב-Codelab הזה, צריך לפרוס את אפליקציית Genkit באירוח אפליקציות ב-Firebase.

חיבור אפליקציית Genkit לפרויקט Firebase

כדי שתוכלו להפעיל את Genkit, צריך לשייך את ה-codebase שלכם לפרויקט Firebase הנכון כדי להשתמש בשירותים שלו, כמו מסד הנתונים. כדי לעשות זאת, צריך להוסיף את ההגדרה של Firebase ל-codebase של אפליקציית Genkit. ההגדרות האישיות האלה כוללות ערכים חיוניים כמו מזהה הפרויקט, מפתח ה-API ומזהה האפליקציה של האפליקציה, וגם ערכים אחרים שמאפשרים לאפליקציה לקיים אינטראקציה עם Firebase.

  1. מקבלים את הגדרת Firebase של האפליקציה:
    1. במסוף Firebase, עוברים אל פרויקט Firebase.
    2. בחלונית הימנית, לוחצים על סמל גלגל השיניים שלצד הקטע סקירה כללית של הפרויקט ובוחרים באפשרות הגדרות הפרויקט.
    3. בכרטיס 'האפליקציות שלך', בוחרים את אפליקציית האינטרנט הרצויה.
    4. בקטע 'הגדרה והגדרה של SDK', בוחרים באפשרות הגדרה.
    5. העתק את הקוד. הוא מתחיל ב-const firebaseConfig ....
  2. מוסיפים את הגדרת Firebase של האפליקציה ל-codebase של אפליקציית Genkit:
    1. בעורך הקוד, פותחים את הקובץ genkit-functions/src/lib/genkit.config.ts.
    2. מחליפים את הקטע הרלוונטי בקוד שהעתקתם.
    3. שומרים את הקובץ.

הפעלת ממשק המשתמש למפתחים של Genkit

Genkit כולל ממשק משתמש מבוסס-אינטרנט שמאפשר ליצור אינטראקציה עם מודלים גדולים של שפה, תהליכים של Genkit , רטריבר ורכיבי AI אחרים.

  1. פותחים את ממשק המשתמש למפתחים של Genkit:
    1. פותחים חלון טרמינל חדש.
    2. עוברים לרמה הבסיסית (root) של ספריית genkit-functions.
    3. מריצים את הפקודה הבאה כדי להפעיל את ממשק המשתמש למפתחים של Genkit:
      cd genkit-functions
npx genkit start
  2. בדפדפן, עוברים לכתובת ה-URL של Genkit שמתארחת באופן מקומי. ברוב המקרים, הכתובת היא http://localhost:4000/.

אינטראקציה עם Gemini

עכשיו אפשר להשתמש בממשק המשתמש למפתחים של Genkit כדי לבצע אינטראקציה עם כל אחד מהמודלים הנתמכים או עם כל אחד מרכיבי ה-AI האחרים, כמו ההנחיות, רטריבר ותהליכים של Genkit.

לדוגמה, אפשר לבקש מ-Gemini להציע חופשה לחג. שימו לב איך אפשר להשתמש בהוראות המערכת כדי לקבוע את התנהגות המודל בהתאם לצרכים הספציפיים שלכם. מקשי הקיצור האלה פועלים גם בדגמים שלא תומכים בהוראות המערכת במקור.

אינטראקציה עם מודל Gemini בממשק המשתמש של Genkit למפתחים

ניהול ההנחיות

Firebase Genkit מציג את Dotprompt, פלאגין ופורמט טקסט שנועדו לייעל את היצירה והניהול של ההנחיות של ה-AI הגנרטיבי. הרעיון העיקרי שעומד מאחורי Dotprompt הוא התייחסות להנחיות כמו קוד, שמאפשר לכתוב אותן, לתחזק אותן ולשלוט בהן בגרסאות לצד קוד האפליקציה שלכם.

כדי להשתמש ב-Dotprompt, מתחילים עם hello-world:

  1. פותחים את הקובץ genkit-functions/prompts/1-hello-world.prompt בכלי לעריכת קוד.
  2. בממשק המשתמש של Genkit Developer, פותחים את dotprompt/1-hello-world.
  3. אפשר להשתמש בשם או בקוד שפה שאתם מכירים, או להשאיר אותם כמחרוזת ריקה.
  4. לוחצים על הפעלה.שימוש ב-Dotprompt ליצירת פתיח בשוודית
  5. אפשר לנסות כמה ערכים שונים. מודלים גדולים של שפה (LLM) מבינים היטב הנחיות מקוצרות, עם שגיאות כתיב או חלקיות בשאילתות פשוטות כמו זו.

העשרת הפלט באמצעות נתונים מובְנים

מעבר ליצירת טקסט פשוט, Genkit מאפשר לכם לבנות את הפלט כדי לשפר את המצגת והשילוב בתוך ממשק המשתמש של האפליקציה. הגדרת סכימה מאפשרת לכם להורות ל-LLM ליצור נתונים מובְנים שתואמים לפורמט הרצוי.

סקירה כללית של סכימות פלט

אפשר גם לציין את הסכימה של הפלט של קריאה ל-LLM.

  1. בעורך הקוד, בודקים את קובץ ההנחיות:
    1. פותחים את הקובץ dotprompt/2-simple-itinerary.
    2. בודקים את הסכימות שהוגדרו לקלט ולפלט.
  2. אינטראקציה עם ממשק המשתמש:
    1. בממשק המשתמש של Genkit למפתחים, עוברים לקטע dotprompt/2-simple-itinerary.
    2. כדי לספק קלט, צריך לאכלס את השדות place ו-interests בנתונים לדוגמה:
      {
    "interests": [
        "Museums"
    ],
    "place": "Paris"
}
    3. לוחצים על Run.

שימוש ב-Dotprompt כדי לציין את סכימת הפלט

הסבר על פלט מבוסס-סכימה

שימו לב איך הפלט שנוצר תואם לסכימה שהוגדרה. כשמציינים את המבנה הרצוי, מורים ל-LLM ליצור נתונים שקל לנתח ולשלב באפליקציה. Genkit מאמת את הפלט באופן אוטומטי בהתאם לסכימה, כדי להבטיח את תקינות הנתונים.

אפשר גם להגדיר את Genkit לנסות שוב או לנסות לתקן את הפלט אם הוא לא תואם לסכימה.

היתרונות העיקריים של סכימות פלט

  • שילוב פשוט יותר: אפשר לשלב בקלות נתונים מובְנים ברכיבי ממשק המשתמש של האפליקציה.
  • אימות נתונים: מוודאים את הדיוק והעקביות של הפלט שנוצר.
  • טיפול בשגיאות: הטמעת מנגנונים לטיפול בחוסר התאמה בין סכימות.

השימוש בסכימות פלט ישפר את חוויית השימוש ב-Genkit, ויאפשר לך ליצור נתונים מובְנים מותאמים אישית לחוויית משתמש עשירה ודינמית יותר.

שימוש בקלט במגוון דרכים

נניח שהאפליקציה שלכם מציעה יעדים מותאמים אישית לחופשה על סמך תמונות שהמשתמשים שלכם מוצאים מעוררות השראה. Genkit, בשילוב עם מודל גנרטיבי רב-מודלי, מאפשר לכם להפוך את החזון הזה למציאות.

  1. בעורך הקוד, בודקים את קובץ ההנחיות:
    1. פותחים את הקובץ genkit-functions/prompts/imgDescription.prompt.
    2. שימו לב להכללה של {{media url=this}}, שהוא רכיב התחביר של סרגלי כלים שמאפשר לשלב תמונות בהנחיה.
  2. אינטראקציה עם ממשק המשתמש:
    1. בממשק המשתמש של Genkit למפתחים, פותחים את ההנחיה dotprompt/imgDescription.
    2. מזינים כתובת URL של תמונה בשדה imageUrls על ידי הדבקת כתובת URL של תמונה. לדוגמה, אפשר להשתמש בתמונה ממוזערת מתוך ויקיפדיה, שמציגה את מגדל אייפל:
      {
    "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. לוחצים על Run.

7. הטמעת אחזור עם חיפוש דמיון וקטורי

יצירת תוכן יצירתי באמצעות מודלים של AI היא מרשים, אבל במקרים רבים אפליקציות מעשיות מצריכות ביסוס הפלט בהקשר ספציפי.

במקרה של ה-Codelab הזה, יש לכם מסד נתונים של יעדים (מקומות ופעילויות) ואתם רוצים לוודא שההצעות שנוצרות במודל Gemini מתייחסות רק לרשומות במסד הנתונים הזה.

כדי לגשר על הפער בין שאילתות לא מובנות לבין תוכן רלוונטי, תוכלו להשתמש ביכולות של חיפוש דמיון בין וקטורים על הטמעות (embeddings) שנוצרו.

הסבר על הטמעות ועל דמיון בין וקטורים

  • ווקטורים: וקטורים הם ייצוגים מספריים של נקודות נתונים, שמשמשים לרוב ליצירת מודלים של מידע מורכב כמו טקסט או תמונות. כל מאפיין בווקטור מתאים לתכונה מסוימת של הנתונים.
  • מודלים להטמעה (Embedding): מודלים מיוחדים של AI שממירים נתוני קלט, כמו טקסט, לווקטורים בממדים גבוהים. ההיבט המרתק הוא שקלט דומה ממופה לווקטורים שקרובים זה לזה במרחב המתקדם הזה.
  • חיפוש דמיון וקטורי: בשיטה הזו נעשה שימוש בקרבה של ווקטורים מוטמעים כדי לזהות נקודות נתונים רלוונטיות. כשנותנים לה שאילתה של קלט, היא מוצאת במסד הנתונים רשומות עם וקטורי הטמעה דומים, שמעידים על קשרים סמנטיים.

הבנת האופן שבו פועל תהליך האחזור

  1. הטמעת השאילתה: הקלט של המשתמש (לדוגמה, 'ארוחת ערב רומנטית בפריז') מועבר דרך מודל הטמעה, ויוצר וקטור של שאילתה.
  2. הטמעות של מסדי נתונים: באופן אידיאלי, ביצעת עיבוד מראש של מסד הנתונים של היעדים ויצירת וקטורים של הטמעה לכל רשומה.
  3. חישוב הדמיון: וקטור השאילתה מושווה לכל וקטור הטמעה במסד הנתונים באמצעות מדד דמיון (למשל, דמיון קוסינוס).
  4. אחזור: הרשומות הדומות ביותר ממסד הנתונים, על סמך הקרבה שלהן לווקטור השאילתה, מאוחזרות כהצעות רלוונטיות.

שילוב מנגנון האחזור הזה באפליקציה מאפשר לכם להשתמש במודל Gemini כדי ליצור הצעות שהן לא רק יצירתיות, אלא גם מבוססות היטב על מערך הנתונים הספציפי שלכם. הגישה הזו מבטיחה שהפלט שנוצר יישאר רלוונטי בהקשר ותואם למידע שזמין במסד הנתונים שלכם.

הפעלת חיפוש דמיון וקטורי ב-Firestore

בשלב קודם ב-Codelab הזה, אכלסת את מסד הנתונים של Firestore עם מקומות ופעילויות לדוגמה. כל רשומה של מקום כוללת שדה טקסט knownFor שמתאר את המאפיינים הבולטים שלו, יחד עם שדה embedding תואם שמכיל את ייצוג הווקטור של התיאור הזה.

כדי לנצל את היתרונות של חיפוש דמיון וקטורי בהטמעות האלה, צריך ליצור אינדקס ב-Firestore. האינדקס הזה מאפשר אחזור יעיל של מקומות על סמך הדמיון של וקטורי הטמעת הנתונים שלהם לשאילתה נתונה.

  1. בטרמינל, מריצים את הפקודה הבאה כדי להתקין את רכיב אלפא העדכני ביותר. נדרשת גרסה 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. בממשק המשתמש של Genkit Developer, פותחים את placesRetriever.
  4. לוחצים על Run. צפו באובייקט העמוד באמצעות טקסט placeholder, שמציין את המיקום שבו תטמיעו את לוגיקת הרטריבר.
  5. פותחים את הקובץ genkit-functions/src/lib/placesRetriever.ts בכלי לעריכת קוד.
  6. גוללים למטה עד הסוף ומחליפים את ה-placeholder placesRetriever בערך הבא:
    export const placesRetriever = defineFirestoreRetriever({
  name: 'placesRetriever',
  firestore,
  collection: 'places',
  contentField: 'knownFor',
  vectorField: 'embedding',
  embedder: textEmbeddingGecko,
  distanceMeasure: 'COSINE',
});

בדיקת האחזור

  1. בממשק המשתמש של Genkit למפתחים, פותחים את האחזור placesRetriever.
  2. מזינים את השאילתה הבאה:
    {
    "content": [
        {
            "text": "UNESCO"
        }
    ]
}
  3. אפשר גם לספק אפשרויות. לדוגמה, כך מציינים כמה מסמכים האחזור צריך להחזיר:
    {
    "limit": 4
}
  4. לוחצים על Run.

אפשר לבצע סינון נוסף של הנתונים מעבר לדמיון, על ידי הוספת סעיפי where לאפשרויות.

8. אחזור של יצירה מורחבת (RAG) באמצעות Genkit

בחלקים הקודמים, פיתחתם הנחיות נפרדות שמסוגלות לטפל בטקסט, בקובץ JSON ובתמונות, וליצור יעדי חופשה ותוכן מעניין אחר עבור המשתמשים שלכם. הטמעתם גם הנחיה שמאחזרת את היעדים הרלוונטיים ממסד הנתונים של Firestore. עכשיו הגיע הזמן לתזמור את הרכיבים האלה לתהליך אחזור משולב (RAG) עקבי.

בקטע הזה נסביר על מושג חשוב ב-Genkit שנקרא תהליכים. זרועות הן פונקציות עם הקלדה חזקה, שניתן להפעיל אותן בסטרימינג באופן מקומי וגם מרחוק, עם ניראות (observability) מלאה. אפשר לנהל ולהפעיל תהליכים גם מה-CLI של Genkit וגם מממשק המשתמש של Genkit למפתחים.

  1. בעורך הקוד, בודקים את ההנחיה של מסלול הנסיעה:
    1. פותחים את הקובץ genkit-functions/prompts/itineraryGen.prompt.
    2. שימו לב איך ההנחיה הורחבה כדי לקבל קלטים נוספים, במיוחד את הנתונים של הפעילויות שמקורם בשליפה.
  2. בממשק המשתמש של Genkit למפתחים, אפשר להציג תהליך של Genkit בקובץ genkit-functions/src/lib/itineraryFlow.ts.
    טיפ: כדי לייעל את תהליך ניפוי הבאגים, כדאי לפרק תהליכים ארוכים לשלבים קטנים יותר שניתן לנהל.
  3. משפרים את התהליך באמצעות שילוב שלב של 'תיאור תמונה':
    1. מחפשים את התגובה TODO: 2 (בשורה 70). זהו המקום שבו תשתפרו את התהליך.
    2. מחליפים את ה-placeholder הריק של 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. לוחצים על Run.
    4. חשוב לצפות בפלט שנוצר, שבו צריך לשלב את תיאור התמונה בהצעה למסלול.
  5. אם נתקלים בשגיאות או בהתנהגויות לא צפויות, אפשר לעיין בכרטיסייה בדיקה לקבלת פרטים. אפשר להשתמש בכרטיסייה הזו גם כדי לעיין בהיסטוריית ההפעלות מחנות נתוני המעקב.

RAG לאפליקציית האינטרנט שלכם

  1. יש לוודא שאפליקציית האינטרנט עדיין פועלת. לשם כך, נכנסים אל http://localhost:3000/ בדפדפן.
  2. אם אפליקציית האינטרנט לא פועלת יותר, מריצים את הפקודות הבאות בטרמינל:
    npm install
npm run dev
  3. אפשר לעיין בדף של אפליקציית האינטרנט Dream Your Vacation (http://localhost:3000/gemini).
  4. כדי לראות דוגמה לשילוב של Next.js, אפשר לעיין בקוד המקור שלו (src/app/gemini/page.tsx).

1e626124e09e04e9.pngb059decb53c249a1.pnge31f6acf87a98cb2.png19c0c9459d5e1601.png

9. פריסה של האפליקציה באמצעות Firebase App Hosting

השלב האחרון בתהליך הוא פריסת אפליקציית האינטרנט. תשתמשו ב-Firebase App Hosting, פתרון אירוח שמותאם למסגרות, שנועד לפשט את הפריסה של אפליקציות Next.js ו-Angular לקצה עורפי ללא שרת.

  1. שומרים את השינויים במאגר ה-git המקומי ומבצעים push ל-GitHub.
  2. במסוף Firebase, עוברים אל אירוח אפליקציות בפרויקט Firebase.
  3. לוחצים על Get started (תחילת העבודה) > Connect to GitHub.
  4. בוחרים את GitHub account ואת Repository. לוחצים על Next.
  5. בקטע Deployment settings > Root library (הגדרת Deployment > ספריית Root) משאירים את ערך ברירת המחדל.
  6. בשדה Live branch, בוחרים את ההסתעפות main במאגר ב-GitHub. לוחצים על הבא.
  7. צריך להזין מזהה לקצה העורפי (לדוגמה, compass).
  8. כשמוצגת השאלה אם יצירה או שיוך של אפליקציית אינטרנט ב-Firebase, בוחרים באפשרות בחירה של אפליקציית אינטרנט קיימת ב-Firebase ואז בוחרים את האפליקציה שיצרתם בשלב מוקדם יותר ב-Codelab הזה.
  9. לוחצים על Finish and Deploy (סיום ופריסה).

מעקב אחר סטטוס הפריסה

תהליך הפריסה יימשך כמה דקות. אפשר לעקוב אחרי ההתקדמות בקטע 'אירוח אפליקציות' במסוף 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 מאפשר לבצע עדכונים עתידיים בצורה יעילה יותר. בכל פעם שדוחפים שינויים בהסתעפות הראשית של מאגר GitHub שלכם, אירוח אפליקציות ב-Firebase יבנה ותפרס מחדש את האפליקציה שלכם באופן אוטומטי, כדי להבטיח שהמשתמשים תמיד יחוו את הגרסה האחרונה.

10. סיכום

כל הכבוד על השלמת ה-codelab המקיף הזה!

השתמשתם בהצלחה ב-Firebase Genkit, ב-Firestore וב-Vertex AI כדי ליצור 'תהליך' מתוחכם שיוצר המלצות מותאמות אישית לחופשות על סמך ההשראה וההעדפות של המשתמשים, תוך התבססות על הנתונים של האפליקציה.

לאורך המסע הזה צברתם ניסיון מעשי בדפוסים חיוניים של הנדסת תוכנה שחיוניים לפיתוח אפליקציות עוצמתיות של AI גנרטיבי. הדפוסים האלה כוללים:

  • ניהול הנחיות: ארגון ותחזוקה של הנחיות כקוד לשיפור שיתוף הפעולה וניהול הגרסאות.
  • תוכן מרובה מצבים: שילוב של סוגי נתונים מגוונים, כמו תמונות וטקסט, כדי לשפר אינטראקציות עם AI.
  • סכימות קלט/פלט: בניית הנתונים לצורך אינטגרציה חלקה ואימות באפליקציה שלכם.
  • מאגרי וקטורים: שימוש בהטמעות וקטורים (vector embedding) לחיפוש יעיל של דמיון ולאחזור מידע רלוונטי.
  • אחזור נתונים: הטמעה של מנגנונים לאחזור נתונים ממסדי נתונים ולשילוב שלהם בתוכן שנוצר על ידי AI.
  • יצירה משופרת של אחזור (RAG): שילוב של שיטות אחזור עם AI גנרטיבי כדי ליצור פלט מדויק ורלוונטי להקשר.
  • אינסטרומנטציה של זרימה: יצירה ותזמור של תהליכי עבודה מורכבים ב-AI לביצוע חלק וגלוי.

שולטים במושגים האלה וליישם אותם בסביבה העסקית של Firebase, ומתחילים להרפתקאות בינה מלאכותית גנרטיבית. תוכלו לבדוק את האפשרויות הרבות, ליצור אפליקציות חדשניות ולהמשיך לפרוץ את הגבולות של מה שאפשר להשיג באמצעות בינה מלאכותית גנרטיבית.

בחינת אפשרויות פריסה חלופיות

Genkit מציע מגוון אפשרויות פריסת קוד בהתאם לצרכים הספציפיים שלכם, כולל:

כדי לבחור את האפשרות שהכי מתאימה לך, מריצים את הפקודה הבאה בתיקיית הצמתים (package.json):

npx genkit init

השלבים הבאים