פיתוח תכונות של 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 הזה, וגם נסביר על שירותי הענן שבהם תשתמשו.

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

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

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

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

d54f2043af908fb.png

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

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

Service

הסיבה לשימוש

Firebase Genkit

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

Cloud Firestore

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

Vertex AI של Google Cloud

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

Firebase App Hosting

אתם יכולים להשתמש באירוח האפליקציות החדש והיעיל של 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.

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

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

תיקייה

תיאור

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. במסוף, מזינים Y או N, בהתאם לרצון שלכם ש-Firebase יאסוף נתונים. (כל אחת מהאפשרויות מתאימה ל-Codelab הזה)
  3. בדפדפן, בוחרים את חשבון Google ולוחצים על אישור.

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

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

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

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

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

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

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

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

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

מעולה! סיימתם לרשום אפליקציית אינטרנט בפרויקט 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 database.
  3. משאירים את הערך (default) בשדה Database ID.
  4. בוחרים מיקום למסד הנתונים ולוחצים על הבא.
    באפליקציה אמיתית, כדאי לבחור מיקום שקרוב למשתמשים.
  5. לוחצים על התחלה במצב בדיקה. קוראים את כתב הוויתור לגבי כללי האבטחה.
    לא מפיצים או חושפים אפליקציה באופן ציבורי בלי להוסיף כללי אבטחה למסד הנתונים.
  6. לוחצים על יצירה.

הפעלת Vertex AI

להגדיר את Vertex AI באמצעות ה-CLI של gcloud. בכל הפקודות בדף הזה, חשוב להחליף את 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. במסוף, עוברים לספריית השורש של פרויקט ה-codelab.
  2. כדי לגרום ל-CLI של Firebase להריץ את כל הפקודות בפרויקט ב-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 הנכון. כדי לעשות זאת, צריך להוסיף את הגדרות 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/ או משהו דומה.

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

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

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

המסך &#39;חיפוש הנסיעה של החלומות&#39;

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

6. איך משתמשים ב-AI גנרטיבי באמצעות Genkit

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

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

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

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

כבר קישרנו את Genkit לפרויקט שלכם על ידי עריכת src/lib/genkit/genkit.config.ts בשלב הקודם.

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

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

מריצים את הפקודה הבאה בטרמינל:

npm run dev:genkit

בדפדפן, עוברים לכתובת ה-URL של Genkit שמתארחת באופן מקומי. ברוב המקרים, הכתובת היא http://localhost:4000/.

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

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

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

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

ניהול ההודעות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שימוש בקלט מרובת מצבים

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

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

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

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

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

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

הסבר על תהליך אחזור הנתונים

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

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

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

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

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

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

בדיקת האחזור

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

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

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

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

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

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

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 App Hosting, פתרון אירוח שמותאם למסגרות, שנועד לפשט את הפריסה של אפליקציות Next.js ו-Angular לקצה עורפי ללא שרת.

  1. שומרים את השינויים במאגר ה-git המקומי ומבצעים push ל-GitHub.
  2. במסוף Firebase, עוברים אל אירוח אפליקציות בפרויקט Firebase.
  3. לוחצים על שנתחיל? > חיבור ל-GitHub.
  4. בוחרים את חשבון GitHub ואת המאגר. לוחצים על הבא.
  5. בקטע Deployment setting (הגדרת פריסה) > Root directory (ספריית Root), משאירים את ערך ברירת המחדל.
  6. בשדה Live branch, בוחרים את ההסתעפות main במאגר ב-GitHub. לוחצים על הבא.
  7. מזינים מזהה לקצה העורפי (לדוגמה, compass).
  8. כשמתבקשים ליצור או לשייך אפליקציית אינטרנט ב-Firebase, בוחרים באפשרות בחירת אפליקציית אינטרנט קיימת ב-Firebase ובוחרים את האפליקציה שיצרתם בשלב מוקדם יותר בקודלאב הזה.
  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 App Hosting יבנה מחדש את האפליקציה ויפרוס אותה מחדש באופן אוטומטי, כדי לוודא שהמשתמשים תמיד נהנים מהגרסה העדכנית ביותר.

10. סיכום

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

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

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

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

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

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

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

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

npx genkit init

השלבים הבאים