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

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

בסדנת התכנות הזו תלמדו להשתמש ב-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 הזה, תוכלו למצוא את קוד הפתרון בענף git‏ end.

התקנת 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 (אינטרנט).הלחצן &#39;אינטרנט&#39; בראש הדף &#39;סקירת הפרויקט&#39; במסוף Firebase
  2. בתיבת הטקסט כינוי לאפליקציה, מזינים כינוי קליט לאפליקציה, כמו 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. בוחרים באפשרות מהדורה רגילה ולוחצים על הבא.
  4. משאירים את מזהה מסד הנתונים מוגדר כ-(default).
  5. בוחרים מיקום למסד הנתונים ולוחצים על הבא.
    באפליקציה אמיתית, כדאי לבחור מיקום שקרוב למשתמשים.
  6. לוחצים על התחלת השימוש במצב בדיקה. חשוב לקרוא את כתב הוויתור בנוגע לכללי האבטחה.
    אין להפיץ או לחשוף אפליקציה לציבור בלי להוסיף כללי אבטחה למסד הנתונים.
  7. לוחצים על יצירה.

הפעלת 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, וזהו דף הבית שלה.

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

מסך &#39;תכנון טיול החלומות שלי&#39;

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

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

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

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

‫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 במזהה הפרויקט.
    • ב-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. גוללים עד למטה ומחליפים את ה-placeholder 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 (תהליכי עבודה). 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/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
    ]
}
    3. לוחצים על Run.
    4. בודקים את הפלט שנוצר, שצריך לכלול את תיאור התמונה בהצעה למסלול הטיול.
  5. אם נתקלתם בשגיאות או בהתנהגויות לא צפויות, לוחצים על הצגת נתוני מעקב כדי לראות פרטים. אפשר גם להשתמש בכרטיסייה הזו כדי לעיין בהיסטוריית ההרצות ממאגר הנתונים של Trace.

‫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, בוחרים באפשרות בחירת אפליקציית אינטרנט קיימת ב-Firebase ובוחרים את האפליקציה שיצרתם בשלב קודם ב-codelab הזה.
  9. לוחצים על Finish and Deploy (סיום ופריסה).

בדיקת סטטוס הפריסה

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

השלבים הבאים