פיתוח אפליקציות אינטרנט מבוססות-AI באמצעות תוספים של Firebase ל-Gemini API

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

תוספים ל-Firebase מאפשרים להוסיף לאפליקציות פונקציונליות מוכנה מראש עם מינימום קוד – כולל פונקציונליות מבוססת-AI. בשיעור Codelab הזה נסביר איך לשלב שני תוספים ל-Firebase באפליקציית אינטרנט כדי להשתמש ב-Gemini API ליצירת תיאורי תמונות, סיכומים ואפילו המלצות מותאמות אישית על סמך הקשר וקלט של משתמשים.

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

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

• ידע ב-Node.js,‏ Next.js ו-TypeScript.

מה תלמדו

• איך משתמשים בתוספים ל-Firebase ל-Gemini API כדי לעבד שפה
• איך משתמשים ב-Cloud Functions for Firebase כדי ליצור הקשר מורחב למודל השפה.
• איך משתמשים ב-JavaScript כדי לגשת לפלט שנוצר על ידי תוספים ל-Firebase.

מה צריך

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

2. בדיקת אפליקציית האינטרנט, שירותי Firebase והתוספים

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

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

בשיעור Codelab הזה תיצרו אפליקציית אינטרנט בשם Friendly Conf.

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

שירותי Firebase

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

תוספים ל-Firebase

התוספים ל-Firebase שבהם תשתמשו ב-Codelab כוללים את התוספים הבאים:

• פיתוח צ'אטבוט באמצעות Gemini API
• משימות מולטימודאליות באמצעות Gemini API

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

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-gemini-api-extensions
2. משכפלים את מאגר הנתונים של GitHub שנוצר במהלך ה-codelab:

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

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

מורידים את המאגר מ-GitHub כקובץ ZIP.

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

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

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

התקנת 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. ב-Terminal, עוברים לתיקייה codelab-gemini-api-extensions ונכנסים ל-Firebase:
   ‫

   cd codelab-gemini-api-extensions
   firebase login
   

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

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

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

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

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

1. נכנסים למסוף Firebase באמצעות אותו חשבון Google שבו השתמשתם בשלב הקודם.
2. לוחצים על הלחצן כדי ליצור פרויקט חדש, ואז מזינים שם לפרויקט (לדוגמה, AI Extensions Codelab).
   
3. לוחצים על המשך.
4. אם מוצגת בקשה לעשות זאת, קוראים ומאשרים את התנאים של Firebase, ואז לוחצים על המשך.
5. (אופציונלי) מפעילים את העזרה מבוססת-AI במסוף Firebase (שנקראת Gemini ב-Firebase).
6. ב-codelab הזה לא צריך להשתמש ב-Google Analytics, ולכן משביתים את האפשרות של Google Analytics.
7. לוחצים על יצירת פרויקט, מחכים שהפרויקט יוקצה ולוחצים על המשך.

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

כדי להשתמש בתוספים ל-Firebase (ובשירותי הענן הבסיסיים שלהם) וגם ב-Cloud Storage for Firebase, הפרויקט ב-Firebase צריך להיות במסלול התמחור pay-as-you go (Blaze), כלומר הוא צריך להיות מקושר לחשבון לחיוב ב-Cloud.

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

חשוב לדעת שאם הפעלתם חיוב בפרויקט Firebase, תחויבו על הקריאות שהתוסף מבצע ל-Gemini API (לא משנה באיזה ספק תבחרו, Google AI או Vertex AI). מידע נוסף על התמחור של Google AI ושל Vertex AI

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

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

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

1. עוברים למסך Project Overview בפרויקט Firebase ולוחצים על Web.
2. בתיבת הטקסט כינוי לאפליקציה, מזינים כינוי קליט לאפליקציה, כמו My AI Extensions
3. לוחצים על Register app > Next > Next > Continue to console (רישום האפליקציה > הבא > הבא > המשך אל המסוף).
   אפשר לדלג על כל השלבים שקשורים ל'אירוח' בתהליך של אפליקציית האינטרנט, כי בהמשך של ה-codelab הזה תהיה לך אפשרות להגדיר שירות אירוח.

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

הגדרה של אימות ב-Firebase

1. בחלונית הניווט הימנית, עוברים אל אימות.
2. לוחצים על שנתחיל?.
3. בעמודה ספקים נוספים, לוחצים על Google > הפעלה.
4. בתיבת הטקסט Public-facing name for project (שם הפרויקט שמוצג לציבור), מזינים שם שימושי, כמו My AI Extensions Codelab.
5. בתפריט Support email for project, בוחרים את כתובת האימייל.
6. לוחצים על שמירה.

הגדרה של Cloud Firestore

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

הגדרת Cloud Storage for Firebase

1. בחלונית הימנית במסוף Firebase, מרחיבים את Build ובוחרים באפשרות Storage.
2. לוחצים על שנתחיל?.
3. בוחרים מיקום לקטגוריית האחסון שמוגדרת כברירת מחדל.
   קטגוריות במיקומים US-WEST1, ‏US-CENTRAL1 ו-US-EAST1 יכולות ליהנות מהתוכנית Always Free של Google Cloud Storage. קטגוריות בכל המיקומים האחרים כפופות לתמחור ולשימוש ב-Google Cloud Storage.
4. לוחצים על התחלת השימוש במצב בדיקה. קוראים את כתב הוויתור בנוגע לכללי האבטחה.
   בהמשך ה-codelab הזה, תוסיפו כללי אבטחה כדי לאבטח את הנתונים. אסור להפיץ או לחשוף אפליקציה באופן ציבורי בלי להוסיף כללי אבטחה לדלי שלכם ב-Storage.
5. לוחצים על יצירה.

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

5. הגדרה של התוסף 'יצירת צ'אטבוט באמצעות Gemini API'

התקנת התוסף 'יצירת צ'אטבוט באמצעות Gemini API'

1. עוברים אל התוסף "יצירת צ'אטבוט באמצעות Gemini API".
2. לוחצים על התקנה במסוף Firebase.
3. בוחרים את פרויקט Firebase ולוחצים על הבא.
4. בקטע Review APIs enabled and resources created (בדיקת ממשקי API שהופעלו ומשאבים שנוצרו), לוחצים על Enable (הפעלה) לצד כל שירות שמוצע לכם, ואז לוחצים על Next (הבא).
5. אם מוצעות לכם הרשאות, בוחרים באפשרות אישור ולוחצים על הבא.
6. מגדירים את התוסף:
   1. בתפריט Gemini API Provider (ספק Gemini API), בוחרים אם רוצים להשתמש ב-Gemini API מ-Google AI או מ-Vertex AI. למפתחים שמשתמשים ב-Firebase, מומלץ להשתמש ב-Vertex AI.
   2. בתיבת הטקסט Firestore Collection Path (נתיב לאוסף Firestore), מזינים: users/{uid}/discussion/{discussionId}/messages.
      בשלבים הבאים של שיעור Codelab הזה, הוספת מסמכים לאוסף הזה תפעיל את התוסף כדי לקרוא ל-Gemini API.
   3. בתפריט Cloud Functions location, בוחרים את המיקום המועדף (למשל Iowa (us-central1) או המיקום שצוין קודם למסד הנתונים של Firestore).
   4. משאירים את כל שאר הערכים בברירת המחדל.
7. לוחצים על התקנת התוסף ומחכים שהתוסף יותקן.

כדאי לנסות את התוסף 'יצירת צ'אטבוט באמצעות Gemini API'

המטרה של שיעור Codelab הזה היא ליצור אינטראקציה עם התוסף Build Chatbot with the Gemini API (יצירת צ'אטבוט באמצעות Gemini API) דרך אפליקציית אינטרנט, אבל כדאי לנסות את התוסף במסוף Firebase כדי להבין איך הוא פועל.

ההרחבה מופעלת בכל פעם שנוצר מסמך Firestore באוסף users/{uid}/discussion/{discussionId}/messages, ואפשר לעשות זאת במסוף Firebase.

1. במסוף Firebase, עוברים אל Firestore ולוחצים על Start collection (התחלת איסוף) בעמודה הראשונה.
2. בתיבת הטקסט מזהה אוסף, מזינים users ולוחצים על הבא.
3. בתיבת הטקסט מזהה מסמך, לוחצים על מזהה אוטומטי ואז על שמירה.
4. באוסף users, לוחצים על התחלת איסוף.
5. בתיבת הטקסט מזהה האוסף, מזינים messages ולוחצים על הבא.
   1. בתיבת הטקסט מזהה מסמך, לוחצים על מזהה אוטומטי.
   2. בתיבת הטקסט Field (שדה), מזינים prompt
   3. בתיבת הטקסט Value (ערך), מזינים Tell me 5 random fruits
6. לוחצים על שמירה ומחכים כמה שניות.

כשמוסיפים את המסמך הזה, התוסף מפעיל קריאה ל-Gemini API. המסמך שזה עתה הוספתם לאוסף messages כולל עכשיו לא רק את prompt שלכם, אלא גם את response של המודל לשאילתה.

מפעילים שוב את התוסף על ידי הוספת מסמך נוסף לאוסף messages:

1. באוסף messages, לוחצים על הוספת מסמך.
2. בתיבת הטקסט מזהה מסמך, לוחצים על מזהה אוטומטי.
3. בתיבת הטקסט Field (שדה), מזינים prompt
4. בתיבת הטקסט Value (ערך), מזינים And now, vegetables
5. לוחצים על שמירה ומחכים כמה שניות. המסמך שזה עתה הוספתם לאוסף messages כולל עכשיו response לשאילתה שלכם.
   
   כשנוצרה התשובה הזו, מודל Gemini הבסיסי השתמש בידע היסטורי מהשאילתה הקודמת שלכם.

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

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

הגדרת Firebase CLI להפעלה מול פרויקט Firebase

בטרמינל, מריצים את הפקודה הבאה כדי להגדיר את ה-CLI לשימוש בפרויקט Firebase:

firebase use YOUR_PROJECT_ID

פריסת כללי אבטחה ל-Firestore ול-Cloud Storage

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

1. כדי לפרוס כללי אבטחה, מריצים את הפקודה הזו בטרמינל:

   firebase deploy --only firestore:rules,storage
   

2. אם תתבקשו להעניק ל-Cloud Storage את תפקיד ה-IAM כדי להשתמש בכללים חוצי-שירותים, הזינו Y או N. (כל אחת מהאפשרויות מתאימה ל-Codelab הזה)

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

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

1. מקבלים את ההגדרה של Firebase:
   1. במסוף Firebase, עוברים אל הגדרות הפרויקט בפרויקט Firebase.
   2. גוללים למטה לקטע האפליקציות שלך ובוחרים את אפליקציית האינטרנט הרשומה.
   3. בחלונית SDK setup and configuration (הגדרה והגדרה של SDK), מעתיקים את קוד initializeApp המלא, כולל הקבוע firebaseConfig.
2. מוסיפים את ההגדרה של Firebase לבסיס הקוד של אפליקציית האינטרנט:
   1. בכלי לעריכת קוד, פותחים את הקובץ src/lib/firebase/firebase.config.js.
   2. בוחרים את כל התוכן בקובץ ומחליפים אותו בקוד שהעתקתם.
   3. שומרים את הקובץ.

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

1. בטרמינל, מתקינים את התלות ואז מריצים את אפליקציית האינטרנט:

   npm install
   npm run dev
   

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

שימוש בצ'אט בוט של אפליקציית האינטרנט

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

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

התאמה אישית של הצ'אט בוט לאפליקציה

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

1. באתר בדפדפן, מוחקים את השיחה בלחיצה על הלחצן האדום 'X' (ליד ההודעה בהיסטוריית הצ'אט).
2. בכלי לעריכת קוד, פותחים את הקובץ src/app/page.tsx.
3. גוללים למטה ומחליפים את הקוד בשורה 93 או בסמוך לה, שבו כתוב prompt: userMsg, בקוד הבא:
   prompt: preparePrompt(userMsg, messages),
4. שומרים את הקובץ.
5. חוזרים לאפליקציית האינטרנט שפועלת בדפדפן.
6. מקלידים שוב ברכה (למשל hi) ולוחצים על שליחה.
7. מחכים כמה שניות עד שהצ'אטבוט יגיב.

הצ'אטבוט משיב עם ידע שמבוסס על ההקשר שסופק ב-src/app/lib/context.md. למרות שלא הקלדתם בקשה ספציפית, מודל Gemini הבסיסי יוצר המלצה מותאמת אישית על סמך ההקשר הזה וגם על סמך התאריך והשעה הנוכחיים. עכשיו אתם יכולים לשאול שאלות המשך ולצלול לעומק.

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

1. בכלי לעריכת קוד, פותחים את הקובץ src/app/page.tsx.
2. גוללים למטה ומחליפים את הקוד בשורה 56 או בסמוך לה, שבו כתוב ...doc.data(),, בקוד הבא:
   ...prepareMessage(doc.data()),
3. שומרים את הקובץ.
4. חוזרים לאפליקציית האינטרנט שפועלת בדפדפן.
5. יש לטעון מחדש את הדף.

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

1. בתיבת הטקסט כאן מקלידים הודעה, כותבים שאלה כמו: Any other interesting talks about AI? הצ'אטבוט יחזיר תשובה.
2. בתיבת הטקסט הקלדת הודעה, שואלים שאלת המשך שקשורה לשאלה הקודמת: Give me a few more details about the last one.

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

7. הגדרת התוסף 'משימות מולטי-מודאליות עם Gemini API'

התוסף 'משימות מולטימודאליות עם Gemini API' קורא ל-Gemini API עם הנחיות מולטימודאליות שמכילות הנחיית טקסט וגם כתובת URL של קובץ נתמך או כתובת URL של Cloud Storage (שימו לב שגם Google AI Gemini API משתמש בכתובת URL של Cloud Storage כבסיס לכתובת ה-URL של הקובץ). בנוסף, התוסף תומך במשתני Handlebars כדי להחליף ערכים ממסמך Cloud Firestore להתאמה אישית של הנחיית הטקסט.

באפליקציה, בכל פעם שמעלים תמונה לקטגוריה של Cloud Storage, אפשר ליצור כתובת URL ולהוסיף אותה למסמך חדש ב-Cloud Firestore – וכך להפעיל את התוסף כדי ליצור הנחיה מולטימודלית ולקרוא ל-Gemini API. בקוד המקור של ה-Codelab הזה, כבר סיפקנו את הקוד להעלאת תמונה ולכתיבת כתובת ה-URL למסמך Firestore.

התקנת התוסף 'משימות מרובות מצבים באמצעות Gemini API'

1. עוברים לתוסף Multimodal Tasks with the Gemini API.
2. לוחצים על התקנה במסוף Firebase.
3. בוחרים את פרויקט Firebase.
4. לוחצים על הבא > הבא > הבא עד שמגיעים לקטע הגדרת התוסף.
   1. בתפריט Gemini API Provider (ספק Gemini API), בוחרים אם רוצים להשתמש ב-Gemini API מ-Google AI או מ-Vertex AI. למפתחים שמשתמשים ב-Firebase, מומלץ להשתמש ב-Vertex AI.
   2. בתיבת הטקסט Firestore Collection Path (נתיב לאוסף Firestore), מזינים: gallery
   3. בתיבת הטקסט הנחיה, מזינים: Please describe the provided image; if there is no image, say "no image"
   4. בתיבת הטקסט Image field (שדה תמונה), מזינים: image
   5. בתפריט Cloud Functions location, בוחרים את המיקום המועדף (למשל Iowa (us-central1) או המיקום שצוין קודם למסד הנתונים של Firestore).
   6. משאירים את כל שאר הערכים בברירת המחדל.
5. לוחצים על התקנת התוסף ומחכים שהתוסף יותקן.

כדאי לנסות את התוסף 'משימות מולטימודאליות עם Gemini API'

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

ההרחבה מופעלת בכל פעם שנוצר מסמך Firestore באוסף users/{uid}/gallery, ואפשר לעשות זאת במסוף Firebase. התוסף מקבל את כתובת ה-URL של התמונה ב-Cloud Storage במסמך Cloud Firestore ומעביר אותה כחלק מההנחיה הרב-מודאלית בקריאה ל-Gemini API.

קודם מעלים תמונה לקטגוריה של Cloud Storage:

1. עוברים אל Storage בפרויקט Firebase.
2. לוחצים על יצירת תיקייה.
3. בתיבת הטקסט Folder name (שם התיקייה), מזינים gallery
4. לוחצים על הוספת תיקייה.
5. בתיקייה gallery, לוחצים על העלאת קובץ.
6. בוחרים קובץ תמונה בפורמט JPEG להעלאה.

לאחר מכן, מוסיפים את כתובת ה-URL של התמונה ב-Cloud Storage למסמך Firestore (שהוא הטריגר להפעלה של התוסף):

1. עוברים אל Firestore בפרויקט Firebase.
2. לוחצים על התחלת איסוף בעמודה הראשונה.
3. בתיבת הטקסט מזהה אוסף, מזינים: gallery ולוחצים על הבא.
4. כדי להוסיף מסמך לאוסף:
   1. בתיבת הטקסט מזהה מסמך, לוחצים על מזהה אוטומטי.
   2. בתיבת הטקסט Field, מזינים: image. בתיבה Value, מזינים את ה-URI של Storage location של התמונה שהעליתם.
5. לוחצים על הוספת שדה.
6. בתיבת הטקסט Field (שדה), מזינים: published. בתיבה Type (סוג), בוחרים באפשרות boolean (בוליאני). בתיבה Value (ערך), בוחרים באפשרות true.
7. לוחצים על שמירה ומחכים כמה שניות.

אוסף gallery כולל עכשיו מסמך שמכיל תשובה לשאילתה שלכם.

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

1. בדפדפן, חוזרים לכרטיסייה עם אפליקציית האינטרנט Friendly Conf שפועלת באופן מקומי.
2. לוחצים על כרטיסיית הניווט גלריה.
3. תוצג גלריה של תמונות שהועלו ותיאורים שנוצרו על ידי AI. הוא צריך לכלול את התמונה שהעליתם קודם לתיקייה gallery בקטגוריית האחסון.
4. לוחצים על הלחצן העלאה ובוחרים תמונה אחרת בפורמט JPEG.
5. ממתינים כמה שניות עד שהתמונה תוצג בגלריה. כמה רגעים לאחר מכן, יוצג גם התיאור שנוצר על ידי AI לתמונה שהועלתה.

אם רוצים להבין את הקוד שבאמצעותו בוצעה ההטמעה, אפשר לעיין ב-src/app/gallery/page.tsx בבסיס הקוד של אפליקציית האינטרנט.

8. בונוס: פריסת האפליקציה

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

• אפשרות 1: אירוח ב-Firebase – משתמשים באפשרות הזו אם מחליטים לא ליצור מאגר משלכם ב-GitHub (ויש לכם רק קוד מקור שמאוחסן באופן מקומי במחשב).
• אפשרות 2: Firebase App Hosting – משתמשים באפשרות הזו אם רוצים פריסה אוטומטית בכל פעם שמעלים שינויים למאגר GitHub שלכם. שירות Firebase החדש הזה נועד במיוחד להתאים לצרכים של אפליקציות דינמיות של Next.js ו-Angular.

אפשרות 1: פריסה באמצעות אירוח ב-Firebase

משתמשים באפשרות הזו אם מחליטים לא ליצור מאגר GitHub משלכם (ויש לכם רק קוד מקור שמאוחסן באופן מקומי במחשב).

1. בטרמינל, מפעילים את אירוח ב-Firebase על ידי הרצת הפקודות הבאות:

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. להנחיה: Detected an existing Next.js codebase in your current directory, should we use this?, מקישים על Y.
3. בהנחיה: In which region would you like to host server-side content, if applicable?, בוחרים במיקום ברירת המחדל או במיקום שבו השתמשתם קודם ב-codelab הזה. ואז מקישים על Enter (או על return ב-macOS).
4. להנחיה: Set up automatic builds and deploys with GitHub?, מקישים על N.
5. מריצים את הפקודה הבאה כדי לפרוס את אפליקציית האינטרנט ב-Hosting:

   firebase deploy --only hosting
   

סיימת! אם אתם מעדכנים את האפליקציה ורוצים לפרוס את הגרסה החדשה, פשוט מריצים מחדש את הפקודה firebase deploy --only hosting ושירות אירוח ב-Firebase יבנה ויפרוס מחדש את האפליקציה.

אפשרות 2: פריסה באמצעות Firebase App Hosting

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

1. שומרים את השינויים ב-GitHub.
2. במסוף Firebase, עוברים אל App Hosting בפרויקט Firebase.
3. לוחצים על Get started (שנתחיל?) > Connect to GitHub (קישור ל-GitHub).
4. בוחרים את החשבון ב-GitHub ואת המאגר. לוחצים על הבא.
5. בקטע הגדרות פריסה > תיקיית שורש, מזינים את שם התיקייה עם קוד המקור (אם קובץ ה-package.json לא נמצא בתיקיית השורש של המאגר).
6. בקטע Live branch, בוחרים את הענף main במאגר GitHub. לוחצים על הבא.
7. מזינים מזהה לשרת העורפי (לדוגמה, chatbot).
8. לוחצים על סיום ופריסה.

יעברו כמה דקות עד שהפריסה החדשה תהיה מוכנה. אפשר לבדוק את סטטוס הפריסה בקטע App Hosting במסוף Firebase.

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

9. סיכום

כל הכבוד! השגת הרבה ב-Codelab הזה!

התקנה והגדרה של תוספים

השתמשתם במסוף Firebase כדי להגדיר ולהתקין תוספים שונים ל-Firebase שמתבססים על AI גנרטיבי. השימוש בתוספים ל-Firebase נוח כי לא צריך ללמוד ולכתוב הרבה קוד שחוזר על עצמו (boilerplate) כדי לטפל באימות לשירותי Google Cloud או בלוגיקה של הבק-אנד של Cloud Functions כדי להאזין ל-Firestore ולממשקי ה-API ולשירותים של Google Cloud ולקיים איתם אינטראקציה.

התנסות בתוספים באמצעות מסוף Firebase

במקום לקפוץ ישר לקוד, לקחת את הזמן כדי להבין איך התוספים האלה של AI גנרטיבי עובדים, על סמך קלט שסיפקת דרך Firestore או Cloud Storage. האפשרות הזו יכולה להיות שימושית במיוחד כשמנפים באגים בפלט של תוסף.

פיתוח אפליקציית אינטרנט מבוססת-AI

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

באפליקציית האינטרנט, משתמשים בתוסף Chatbot with Gemini API כדי לספק למשתמש ממשק צ'אט אינטראקקטיבי, שכולל הקשר ספציפי לאפליקציה והיסטורי בשיחות – שבו כל הודעה מאוחסנת במסמך Firestore שמוגדר למשתמש מסוים.

בנוסף, אפליקציית האינטרנט השתמשה בתוסף 'משימות מולטימודאליות עם Gemini API' כדי ליצור תיאורי תמונות אוטומטיים לתמונות שהועלו.

השלבים הבאים

• תוכלו להתנסות בהנחיות ולנצל את חלון ההקשר הגדול ב-Google AI Studio או ב-Vertex AI Studio.
• מידע על חיפוש בעזרת בינה מלאכותית גנרטיבית עם אחזור משופר (RAG)
• אפשר לנסות שיעור Codelab בקצב עצמי שמראה איך להוסיף צ'אטבוט לאפליקציית Firebase קיימת באמצעות Genkit (שירות של מסגרת AI).
• מידע על יכולות חיפוש הדמיון ב-Firestore וב-Cloud SQL ל-PostgreSQL
• אפשר ללמד את הצ'אטבוט להתקשר לאפליקציה הקיימת באמצעות קריאה לפונקציה.