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

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

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

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

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

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

מה תלמדו

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

מה צריך להכין

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

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

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

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

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

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

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

d54f2043af908fb.png

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

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

Service

הסיבה לשימוש

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. במסוף, מוודאים שמותקנת גרסה 20.0.0 ואילך של Node.js:
    node -v
  2. אם לא מותקנת אצלכם גרסה 20.0.0 של Node.js או גרסה מתקדמת יותר, מורידים את גרסת ה-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

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

*כל השאר

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

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

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

התקנת Firebase CLI

  1. מוודאים ש-Firebase CLI מותקן ושהגרסה שלו היא 13.6 ואילך:
    firebase --version
  2. אם ה-CLI של Firebase מותקן אצלכם, אבל הוא לא בגרסה 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. בטרמינל, בהתאם לרצון שלכם ש-Firebase יאסוף נתונים, מזינים Y או N. (כל אחת מהאפשרויות מתאימה ל-Codelab הזה)
  3. בדפדפן, בוחרים את חשבון Google ולוחצים על אישור.

התקנת gcloud CLI של Google Cloud

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

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

בקטע הזה נגדיר פרויקט Firebase ונרשום בו אפליקציית אינטרנט של Firebase. בהמשך ה-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. עוברים למסך Project Overview (סקירה כללית של הפרויקט) בפרויקט Firebase ולוחצים על סמל עם סוגריים זוויתיים פותחים, קו נטוי וסוגריים זוויתיים סוגרים, שמייצג אפליקציית אינטרנט Web (אינטרנט).הלחצן Web (אינטרנט) בראש הדף Project Overview (סקירת הפרויקט) במסוף Firebase
  2. בתיבת הטקסט App nickname (כינוי לאפליקציה), מזינים כינוי קליט לאפליקציה, כמו My Compass Codelab App. אפשר להשאיר את תיבת הסימון להגדרת Firebase Hosting לא מסומנת, כי בשלב האחרון של ה-codelab הזה תהיה לך אפשרות להגדיר שירות אירוח.
    רישום אפליקציית האינטרנט
  3. לוחצים על Register app > Continue to console (רישום האפליקציה > המשך למסוף).

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

  1. מקבלים את הגדרת Firebase של האפליקציה:
    1. במסוף Firebase, עוברים לפרויקט Firebase.
    2. בחלונית הימנית, לוחצים על סמל גלגל השיניים לצד Project Overview (סקירת הפרויקט) ובוחרים באפשרות Project settings (הגדרות הפרויקט).
    3. בכרטיס 'האפליקציות שלך', בוחרים את אפליקציית האינטרנט.
    4. בקטע SDK setup and configuration (הגדרה וקביעת תצורה של 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, וזהו דף הבית שלה.

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

חיפוש של מסך נסיעת החלומות

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

6. היכרות עם AI גנרטיבי באמצעות Genkit

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

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

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

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

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

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

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

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

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

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

הוספת נתונים מובְנים לתוצאות

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

בחינת סכימות פלט

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

  1. בעורך הקוד, בודקים את קובץ ההנחיות:
    1. פותחים את הקובץ prompts/2-simple-itinerary.prompt.
    2. בודקים את סכימות הקלט והפלט שהוגדרו.
  2. אינטראקציה עם ממשק המשתמש:
    1. בממשק המשתמש של Genkit Developer, עוברים לקטע 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. לדוגמה, אפשר להשתמש בתמונה ממוזערת מתוך ויקיפדיה שמציגה את מגדל אייפל:
      {
    "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 מתייחסות רק לרשומות במסד הנתונים הזה.

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

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

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

הסבר על תהליך השחזור

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

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

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

בשלב קודם ב-codelab הזה, מילאתם את מסד הנתונים של Firestore במקומות ובפעילויות לדוגמה. כל רשומה של מקום כוללת שדה טקסט knownFor שמתאר את המאפיינים הבולטים שלו, יחד עם שדה 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. בממשק המשתמש למפתחים של Genkit, פותחים את retrievers/placesRetriever.
  3. לוחצים על Run. מתבוננים באובייקט עם placeholder לטקסט, שמציין איפה תטמיעו את הלוגיקה של כלי האחזור.
  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. בממשק המשתמש למפתחים של Genkit, פותחים את מאחזר המידע retrievers/placesRetriever.
  2. מזינים את השאילתה הבאה:
    {
    "content": [
        {
            "text": "UNESCO"
        }
    ]
}
  3. אפשר גם להציג אפשרויות. לדוגמה, כך מציינים כמה מסמכים צריך להחזיר מאחזור המידע:
    {
    "limit": 4
}
  4. לוחצים על Run.

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

8. ‫Retrieval augmented generation (RAG) with Genkit

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

בקטע הזה נסביר על מושג חשוב ב-Genkit שנקרא תזרים עבודה. Flows הן פונקציות עם הקלדה חזקה שאפשר להפעיל באופן מקומי ומרחוק, עם יכולת מלאה של מעקב אחר נתונים. אפשר לנהל ולהפעיל תהליכי עבודה גם באמצעות ממשק שורת הפקודה (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. אם נתקלתם בשגיאות או בהתנהגויות לא צפויות, כדאי לבדוק את הכרטיסייה בדיקה כדי לראות פרטים. אפשר גם להשתמש בכרטיסייה הזו כדי לעיין בהיסטוריית ההרצות ממאגר המעקב.

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

10. סיכום

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

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

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

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

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

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

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

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

npx genkit init

השלבים הבאים