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

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

בשיעור Codelab הזה נסביר איך משתמשים ב-Genkit כדי לשלב AI גנרטיבי באפליקציה. 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 App Hosting החדש והיעיל כדי להציג את אפליקציית האינטרנט הדינמית של 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 הזה, תוכלו למצוא את קוד הפתרון בסניף git‏ end.

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

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

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

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

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

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

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

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

הגדרה של Cloud Firestore

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

הפעלת Vertex AI

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

  1. בטרמינל, מגדירים את פרויקט ברירת המחדל עבור Google Cloud SDK:
    gcloud config set project YOUR_PROJECT_ID
  2. אם מוצגת אזהרה שאומרת "אזהרה: הפרויקט הפעיל לא תואם לפרויקט המכסה בקובץ של Application Default Credentials המקומית. יכול להיות שיתרחשו בעיות בלתי צפויות במכסה", מריצים את הפקודה הבאה כדי להגדיר את פרויקט המכסה:
    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, וזהו דף הבית שלה.

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

איך מוצאים את המסך &#39;טיול החלומות שלי&#39;

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

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

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

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

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

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

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

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

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

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

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

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

  1. יוצרים את האינדקס, ומקפידים להחליף את YOUR_PROJECT_ID במזהה הפרויקט.
    • ב-macOS / Linux
    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":"{}"}'
    • ב-Windows‏ (PowerShell)
    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. יצירה משולבת-אחזור (RAG) באמצעות 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. מחליפים את הפלייסהולדר הריק imgDescription בבלוק ai.run('imgDescription', ...) שיוצר תיאור מ-tripDetails.imageUrls.
  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/500px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
    ]
}
    3. לוחצים על Run.
    4. בודקים את הפלט שנוצר, שצריך לכלול את תיאור התמונה בהצעה למסלול הטיול.
  5. אם נתקלתם בשגיאות או בהתנהגויות לא צפויות, תוכלו ללחוץ על View trace כדי לראות פרטים. אפשר גם להשתמש בכרטיסייה הזו כדי לעיין בהיסטוריית ההרצות מTrace Store.

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

10. סיכום

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

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

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

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

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

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

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

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

npx genkit start

השלבים הבאים