בנו אפליקציות אינטרנט המופעלות על ידי בינה מלאכותית עם הרחבות Firebase

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

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

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

• ידע ב-Node.js וב-JavaScript

מה תלמד

• כיצד להשתמש בהרחבות הקשורות ל-AI לעיבוד שפה וקלט וידאו.
• כיצד להשתמש ב-Cloud Functions עבור Firebase כדי ליצור צינור בין הרחבות.
• כיצד להשתמש ב-JavaScript כדי לגשת לפלט שהופק על ידי הרחבות.

מה אתה צריך

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

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

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

אפליקציית ביקורת

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

אפליקציית Chatbot

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

אפליקציית רמז לווידאו

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

אלו התוספים המשמשים באפליקציית Video Hint :

• תווית סרטונים עם סיומת Cloud Video AI - חלץ תוויות מכל סרטון שהועלה לאחסון.
• משימות שפה עם תוסף PaLM API - סכם את התוויות לתיאור טקסט.
• המרת טקסט לדיבור סיומת - צור גרסת שמע של תיאור הסרטון.

3. הגדר את סביבת הפיתוח שלך

אמת את גרסת ה-Node.js שלך

1. במסוף שלך, ודא שמותקן אצלך Node.js v20.0.0 ומעלה:

   node -v
   

2. אם אין לך Node.js v20.0.0 ומעלה, הורד והתקן אותו .

הורד את המאגר

1. אם התקנת git, שכפל את מאגר GitHub של Codelab:

   git clone https://github.com/FirebaseExtended/ai-extensions-codelab.git
   

2. אם לא התקנת git, הורד את מאגר GitHub כקובץ zip .

סקור את מבנה התיקיות

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

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

אם אינך בטוח אם החלת נכון את הקוד כפי שהורה בכל מעבדת הקוד הזה, תוכל למצוא את קוד הפתרון עבור האפליקציות המתאימות בתיקיות reviewly-end , chatbot-end ו- video-hint-end .

התקן את Firebase CLI

הפעל את הפקודה הבאה כדי לוודא שהתקנת את Firebase CLI ושהוא גרסה 12.5.4 ומעלה:

firebase --version

• אם התקנת את Firebase CLI, אבל הוא לא גרסה 12.5.4 ומעלה, עדכן אותו:

  npm update -g firebase-tools
  

• אם אין לך את Firebase CLI מותקן, התקן אותו:

  npm install -g firebase-tools
  

אם אינך מצליח להתקין את Firebase CLI בגלל שגיאות הרשאה, עיין בתיעוד npm או השתמש באפשרות התקנה אחרת .

היכנס ל-Firebase

1. במסוף שלך, נווט לתיקיית ai-extensions-codelab והיכנס ל-Firebase:

   cd ai-extensions-codelab
   firebase login
   

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

4. הגדר את פרויקט Firebase שלך

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

צור פרויקט Firebase

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

הורד חשבון שירות Firebase

חלק מיישומי האינטרנט שתבנה במעבדת הקוד הזה משתמשות בעיבוד בצד השרת עם Next.js .

ה- SDK של Firebase Admin עבור Node.js משמש כדי להבטיח שכללי האבטחה פועלים מהקוד בצד השרת. כדי להשתמש בממשקי API ב-Firebase Admin, עליך להוריד חשבון שירות Firebase ממסוף Firebase.

1. במסוף Firebase, נווט לדף חשבונות שירות בהגדרות הפרויקט שלך.
2. לחץ על צור מפתח פרטי חדש > צור מפתח .
3. לאחר הורדת הקובץ למערכת הקבצים שלך, קבל את הנתיב המלא לקובץ זה.
   לדוגמה, אם הורדת את הקובץ לתיקיית ההורדות שלך, הנתיב המלא עשוי להיראות כך: /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. במסוף שלך, הגדר את משתנה הסביבה GOOGLE_APPLICATION_CREDENTIALS לנתיב של המפתח הפרטי שהורדת. בסביבת יוניקס, הפקודה עשויה להיראות כך:

   export GOOGLE_APPLICATION_CREDENTIALS="/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json"
   

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

שדרג את תוכנית התמחור שלך ב-Firebase

כדי להשתמש בפונקציות ענן ובתוספי Firebase, פרויקט Firebase שלך ​​צריך להיות בתוכנית התמחור של Blaze , כלומר הוא משויך לחשבון Cloud Billing .

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

עם זאת, שים לב שהשלמת Codelab זה לא אמורה לגרור חיובים בפועל.

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

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

הגדר שירותי Firebase במסוף Firebase

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

הגדר אימות

אתה תשתמש באימות גם עם אפליקציית Chatbot וגם עם אפליקציית Video Hint . זכור, עם זאת, אם היית בונה אפליקציה אמיתית, לכל אפליקציה צריכה להיות פרויקט Firebase משלה .

1. במסוף Firebase, נווט אל אימות .
2. לחץ על התחל .
3. בעמודה ספקים נוספים , לחץ על Google > הפעל .

4. בתיבת הטקסט שם פונה לציבור עבור פרויקט , הזן שם בלתי נשכח, כגון My AI Extensions Codelab .
5. מהתפריט הנפתח דוא"ל תמיכה לפרויקט , בחר את כתובת הדוא"ל שלך.
6. לחץ על שמור .
   

הגדר את Cloud Firestore

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

1. במסוף Firebase, נווט אל Firestore .
2. לחץ על צור מסד נתונים > התחל במצב בדיקה > הבא .
   בהמשך מעבדת הקוד הזה, תוסיף כללי אבטחה כדי לאבטח את הנתונים שלך. אין להפיץ או לחשוף אפליקציה בפומבי מבלי להוסיף כללי אבטחה עבור מסד הנתונים שלך .
3. השתמש במיקום ברירת המחדל או בחר מיקום לבחירתך.
   עבור אפליקציה אמיתית, אתה רוצה לבחור מיקום שקרוב למשתמשים שלך. שימו לב שלא ניתן לשנות את המיקום הזה מאוחר יותר, והוא גם יהיה אוטומטית המיקום של דלי ברירת המחדל של Cloud Storage (השלב ​​הבא).
4. לחץ על סיום .

הגדר אחסון בענן עבור Firebase

תשתמש ב-Cloud Storage עם אפליקציית Video Hint וכדי לנסות את התוסף Convert Text to Speech (השלב ​​הבא של מעבדת הקוד).

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

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

5. הגדר את התוסף "משימות שפה עם PaLM API" עבור אפליקציית Reviewly

התקן את משימות השפה עם תוסף PaLM API

1. נווט אל משימות שפה עם תוסף PaLM API .
2. לחץ על התקן במסוף Firebase .
3. בחר את פרויקט Firebase שלך.
4. בקטע סקירת ממשקי API מופעלים ומשאבים שנוצרו , לחץ על הפעל לצד כל השירותים המוצעים לך:

5. לחץ על הבא > הבא.
6. בתיבת הטקסט נתיב אוסף , הזן bot .
7. בתיבת הטקסט 'בקשה' , הזן .
8. בתיבת הטקסט שדות משתנים , הזן input .
9. בתיבת הטקסט של שדה תגובה , הזן text .
10. מהתפריט הנפתח מיקום פונקציות ענן , בחר Iowa (us-central1) או המיקום שבחרת בעבר עבור Firestore ו-Cloud Storage.
11. מהתפריט הנפתח מודל שפה , בחר text-bison-001 .
12. השאר את כל שאר הערכים כברירת המחדל שלהם.
13. לחץ על התקן תוסף והמתן להתקנת התוסף.

נסה את משימות השפה עם תוסף PaLM API

בעוד שהמטרה של מעבדת קוד זה היא ליצור אינטראקציה עם תוסף Language Tasks עם PaLM API דרך אפליקציית אינטרנט, כדאי להבין כיצד התוסף עובד על ידי הפעלת התוסף באמצעות מסוף Firebase. התוסף מופעל כאשר מסמך Cloud Firestore מתווסף לאוסף bot .

כדי לראות כיצד פועל התוסף באמצעות מסוף Firebase, בצע את השלבים הבאים:

1. במסוף Firebase, נווט אל Firestore .
2. באוסף bot , לחץ הוסף מסמך .
3. בתיבת הטקסט מזהה מסמך , לחץ על מזהה אוטומטי .
4. בתיבת הטקסט שדה, הזן input .
5. בתיבת הטקסט ערך , הזן Tell me about the moon .
6. לחץ על שמור והמתן מספר שניות. המסמך שלך בתוך אוסף bot כולל כעת תגובה לשאילתה שלך.

6. הגדר את אפליקציית Reviewly לשימוש ב-Firebase

כדי להפעיל את אפליקציית Reviewly , עליך להגדיר את קוד האפליקציה שלך ואת Firebase CLI לאינטראקציה עם פרויקט Firebase שלך.

הוסף שירותי Firebase ותצורה לקוד האפליקציה שלך

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

האפליקציה לדוגמה של Codelab זה כבר כוללת את כל קוד הייבוא ​​והאתחול הנדרש עבור SDKs (ראה reviewly-start/js/reviews.js ), כך שאינך צריך להוסיף אותם. עם זאת, לאפליקציה לדוגמה יש רק ערכי מציין מיקום עבור תצורת Firebase (ראה reviewly-start/js/firebase-config.js ), לכן עליך לרשום את האפליקציה שלך בפרויקט Firebase שלך ​​כדי לקבל את ערכי התצורה הייחודיים של Firebase עבור האפליקציה שלך.

1. במסוף Firebase, בפרויקט Firebase שלך, נווט אל סקירת הפרויקט ולאחר מכן לחץ על אינטרנט .
   
2. בתיבת הטקסט של כינוי לאפליקציה , הזן כינוי לאפליקציה בלתי נשכחת, כגון My Reviewly app .
3. אל תבחר בתיבת הסימון הגדר גם אירוח Firebase עבור אפליקציה זו . תבצע את השלבים האלה מאוחר יותר ב-codelab.
4. לחץ על הרשמה אפליקציה .
5. המסוף מציג קטע קוד להוספה ואתחול של Firebase SDK עם אובייקט תצורה ספציפי לאפליקציה של Firebase. העתק את כל המאפיינים באובייקט התצורה של Firebase.
6. בעורך הקוד שלך, פתח את הקובץ reviewly-start/js/firebase-config.js .
7. החלף את ערכי מציין המיקום בערכים שזה עתה העתקת. זה בסדר אם יש לך מאפיינים וערכים עבור שירותי Firebase שאתה לא משתמש בהם באפליקציית Reviewly .
8. שמור את הקובץ.
9. בחזרה למסוף Firebase, לחץ על המשך למסוף .

הגדר את המסוף שלך כדי להפעיל פקודות Firebase CLI נגד פרויקט Firebase שלך

1. במסוף שלך, נווט אל תיקיית ai-extensions-codelab שהורדת קודם לכן.
2. נווט אל תיקיית reviewly-start web app:

   cd reviewly-start
   

3. הפוך את Firebase CLI להפעיל פקודות נגד פרויקט Firebase ספציפי:

   firebase use YOUR_PROJECT_ID
   

הפעל והצג את אפליקציית האינטרנט Reviewly

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

1. במסוף שלך, התקן תלות ולאחר מכן הפעל את אפליקציית האינטרנט:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   npm run dev
   

2. בדפדפן שלך, נווט אל כתובת האתר המוצגת במסוף שלך. לדוגמה: http://localhost:8080 .

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

7. הוסף פונקציונליות לאפליקציית Reviewly

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

פריסת כללי אבטחה

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

אתה יכול להציג כללים אלה בקבצי firestore.rules ו- storage.rules .

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

   firebase deploy --only firestore:rules,storage
   

2. אם תישאל: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" , בחר כן .

עדכן את קוד האפליקציה כדי להפעיל את התוסף

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

1. בעורך הקוד שלך, פתח את הקובץ functions/add-mock-reviews.js .
2. החלף את המשתנה reviewWithPrompt בקוד הבא, שמבקש ממודל השפה לסקירה קצרה יותר.

   const reviewWithPrompt = `Here's a user supplied review. Give me a shorter summary of the review, and a rating out of 5, and a flag which indicates if there was a product defect.
   
   Product name: "Blue t-shirt with cat picture". Review: """${review}"""
   
   Craft your response as JSON with properties has_defect, summary and rating. Don't include any extra text.`;
   

3. לאחר המשתנה reviewWithPrompt , החלף את משתנה reviewDocument בקוד הבא, שיוצר מסמך סקירה כך שניתן להוסיף אותו ל-Firestore.

   const reviewDocument = {
           input: reviewWithPrompt,
           originalReview: review,
           timestamp: Timestamp.now(),
   };
   
   getFirestore().collection(DB_COLLECTION_NAME).add(reviewDocument);
   

4. שמור את הקובץ.
5. בקובץ js/reviews.js , לאחר Insert code below, to import your Firebase Callable Cloud Function , ייבא את הפונקציה הניתנת להתקשרות ב-Firebase HTTP עם httpsCallable helper :

   const addMockReviews = httpsCallable(functions, "addMockReviews");
   

6. לאחר Insert code below, to invoke your Firebase Callable Cloud Function , הפעל את הפונקציה הניתנת להתקשרות ב-Firebase HTTP:

   await addMockReviews();
   

7. שמור את הקובץ.

פרוס פונקציה כדי להוסיף ביקורות חדשות

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

כדי לפרוס את הפונקציה שלך עם Firebase CLI, בצע את השלבים הבאים:

1. בטרמינל שלך בעודך בתיקיית reviewly-start , הקש Control+C כדי לעצור את השרת.
2. פרוס את הפונקציה שלך:

   firebase deploy --only functions
   

3. אם אתה רואה Permission denied while using the Eventarc Service Agent או שגיאה דומה, המתן מספר דקות ולאחר מכן נסה שוב את הפקודה.

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

הפעל והצג שוב את אפליקציית האינטרנט Reviewly (עכשיו עם פונקציונליות)

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

1. בטרמינל שלך, הפעל שוב את השרת:

   npm run dev
   

2. בדפדפן שלך, נווט אל כתובת האתר המוצגת במסוף שלך. לדוגמה: http://localhost:8080 .
3. באפליקציה, לחץ על הוסף כמה ביקורות מדומות והמתן כמה שניות עד שיופיעו כמה ביקורות ארוכות.
   ברקע, תוסף Language Tasks עם PaLM API מגיב למסמך החדש שמייצג את הסקירה החדשה. ההנחיה שהוספת קודם לכן מבקשת סיכום קצר יותר ממודל השפה.
4. כדי להציג סקירה שלמה ואת ההנחיה המשמשת לסקירה, לחץ על אחת מהביקורות ולאחר מכן בחר הצג הנחיה של PaLM .

8. הגדר את התוסף "Chatbot with PaLM API" עבור אפליקציית Chatbot

התקן את הצ'אטבוט עם תוסף PaLM API

1. נווט אל Chatbot עם תוסף PaLM API .
2. לחץ על התקן במסוף Firebase .
3. בחר את פרויקט Firebase שלך.
4. לחץ על הבא > הבא > הבא , עד שתגיע לקטע הגדר הרחבה .
5. בתיבת הטקסט של נתיב אוסף , הזן users/{uid}/discussion/{discussionId}/messages .
6. מהתפריט הנפתח מיקום פונקציות ענן , בחר Iowa (us-central1) או המיקום שבחרת בעבר עבור Firestore ו-Cloud Storage.
7. מהתפריט הנפתח מודל שפה , בחר chat-bison .
8. השאר את כל שאר הערכים כברירת המחדל שלהם.
9. לחץ על התקן תוסף והמתן להתקנת התוסף.

נסה את ה- Chatbot עם תוסף PaLM API

בעוד שהמטרה של מעבדת קוד זה היא ליצור אינטראקציה עם תוסף Chatbot עם PaLM API דרך אפליקציית אינטרנט, כדאי להבין כיצד התוסף עובד על ידי הפעלת התוסף באמצעות מסוף Firebase. התוסף מופעל כאשר מסמך Cloud Firestore נוצר באוסף users/{uid}/discussion/{discussionId}/messages .

1. במסוף Firebase, נווט אל Firestore .
2. נְקִישָׁה התחל איסוף .
   1. בתיבת הטקסט מזהה אוסף , הזן users ולאחר מכן לחץ על הבא .
   2. בתיבת הטקסט מזהה מסמך , לחץ על מזהה אוטומטי ולאחר מכן לחץ על שמור .
3. באוסף users , לחץ התחל איסוף .
   
   1. בתיבת הטקסט מזהה אוסף , הזן discussion ולאחר מכן לחץ על הבא .
   2. בתיבת הטקסט מזהה מסמך , לחץ על מזהה אוטומטי ולאחר מכן לחץ על שמור .
4. באוסף discussion , לחץ התחל איסוף .
   
   1. בתיבת הטקסט מזהה אוסף , הזן messages ולאחר מכן לחץ על הבא .
   2. בתיבת הטקסט מזהה מסמך , לחץ על מזהה אוטומטי .
   3. בתיבת הטקסט שדה , הזן prompt .
   4. בתיבת הטקסט ערך , הזן Tell me 5 random fruits .
   5. לחץ על שמור והמתן מספר שניות. אוסף messages כולל כעת מסמך המכיל תגובה לשאילתה שלך.

5. באוסף messages , לחץ הוסף מסמך .
   1. בתיבת הטקסט מזהה מסמך , לחץ על מזהה אוטומטי .
   2. בתיבת הטקסט שדה , הזן prompt .
   3. בתיבת הטקסט ערך , הזן And now, vegetables .
   4. לחץ על שמור והמתן מספר שניות. אוסף messages כולל כעת מסמך המכיל תגובה לשאילתה שלך.

9. הגדר את אפליקציית Chatbot לשימוש ב-Firebase

כדי להפעיל את אפליקציית Chatbot , עליך להגדיר את קוד האפליקציה שלך ואת Firebase CLI לאינטראקציה עם פרויקט Firebase שלך.

הוסף שירותי Firebase ותצורה לקוד האפליקציה שלך

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

האפליקציה לדוגמה של Codelab זה כבר כוללת את כל קוד הייבוא ​​והאתחול הנדרש עבור SDKs (ראה chatbot-start/lib/firebase/firebase.js ), כך שאינך צריך להוסיף אותם. עם זאת, לאפליקציה לדוגמה יש רק ערכי מציין מיקום עבור תצורת Firebase (ראה chatbot-start/lib/firebase/firebase-config.js ), לכן עליך לרשום את האפליקציה שלך בפרויקט Firebase שלך ​​כדי לקבל את ערכי התצורה הייחודיים של Firebase עבורך אפליקציה.

1. במסוף Firebase, בפרויקט Firebase שלך, נווט אל סקירת הפרויקט ולאחר מכן לחץ על אינטרנט (או לחץ על הוסף אפליקציה אם כבר רשמת אפליקציה לפרויקט).
2. בתיבת הטקסט של כינוי אפליקציה , הזן כינוי אפליקציה בלתי נשכח, כגון My Chatbot app .
3. אל תבחר בתיבת הסימון הגדר גם אירוח Firebase עבור אפליקציה זו . תבצע את השלבים האלה מאוחר יותר ב-codelab.
4. לחץ על הרשמה אפליקציה .
5. המסוף מציג קטע קוד להוספה ואתחול של Firebase SDK עם אובייקט תצורה ספציפי לאפליקציה של Firebase. העתק את כל המאפיינים באובייקט התצורה של Firebase.
6. בעורך הקוד שלך, פתח את הקובץ chatbot-start/lib/firebase/firebase-config.js .
7. החלף את ערכי מציין המיקום בערכים שזה עתה העתקת. זה בסדר אם יש לך מאפיינים וערכים עבור שירותי Firebase שאתה לא משתמש בהם באפליקציית Chatbot .
8. שמור את הקובץ.
9. בחזרה למסוף Firebase, לחץ על המשך למסוף .

הגדר את המסוף שלך כדי להפעיל פקודות Firebase CLI נגד פרויקט Firebase שלך

1. בטרמינל שלך, הקש Control+C כדי למנוע מהשרת להפעיל את אפליקציית האינטרנט הקודמת.
2. במסוף שלך, נווט אל תיקיית האפליקציה chatbot-start :

   cd ../chatbot-start
   

3. הפוך את Firebase CLI להפעיל פקודות נגד פרויקט Firebase ספציפי:

   firebase use YOUR_PROJECT_ID
   

הגדר את בסיס הקוד של האפליקציה שלך לשימוש ב-Firebase Hosting תואם למסגרת

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

1. במסוף שלך, הפעל מסגרות אינטרנט עם Firebase Hosting:

   firebase experiments:enable webframeworks
   

2. אתחול Firebase Hosting:

   firebase init hosting
   

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

הפעל והצג את אפליקציית האינטרנט Chatbot

1. במסוף שלך, התקן תלות ולאחר מכן הפעל את אפליקציית האינטרנט:

   npm install
   firebase emulators:start --only hosting
   

2. בדפדפן שלך, נווט לכתובת ה-URL של אירוח מקומי. ברוב המקרים, זה http://localhost:5000/ או משהו דומה.

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

פתרון בעיות בהפעלת אפליקציית האינטרנט

אם אתה רואה את השגיאה בדף האינטרנט שמתחילה כך: Error: Firebase session cookie has incorrect... , עליך למחוק את כל קובצי ה-Cookie שלך ​​בסביבת המארח המקומי שלך. כדי לעשות זאת, עקוב אחר ההוראות למחיקת קובצי Cookie | תיעוד DevTools. .

10. הוסף פונקציונליות לאפליקציית Chatbot

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

פריסת כללי אבטחה

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

אתה יכול להציג כללים אלה בקבצי firestore.rules ו- storage.rules .

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

   firebase deploy --only firestore:rules,storage
   

2. אם תישאל: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" , בחר כן .

עדכן את הקוד כדי להוסיף הודעות ל-Cloud Firestore

באפליקציית Chatbot , הודעה חדשה ממשתמש מתווספת ל-Firestore וזו מפעילה את התוסף ליצור תגובה.

1. בעורך הקוד שלך, פתח את הקובץ lib/firebase/firestore.js .
2. סמוך לסוף הקובץ, מצא את הפונקציה addNewMessage , המטפלת בהוספת הודעות חדשות.
   הפונקציה כבר לוקחת את מאפייני האובייקט הבאים:
   

   פָּרָמֶטֶר	תיאור
   userId	המזהה של המשתמש המחובר
   discussionId	מזהה הדיון שאליו נוספה ההודעה
   message	תוכן טקסט ההודעה
   db	מופע מסד נתונים של Firestore

   כשהמשתנים האלה מוכנים, אתה יכול להוסיף מסמך Cloud Firestore כדי לייצג את ההודעה החדשה.
3. בגוף הפונקציה addNewMessage לאחר התגובה // Insert your code below ⬇️ , הוסף את הקוד הבא:

   await addDoc(
           collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           ),
           {
                   prompt: message,
                   createTime: serverTimestamp(),
           }
   );
   
   await updateDoc(doc(db, "users", userId, "discussion", discussionId), {
           latestMessage: message,
           updatedTime: serverTimestamp(),
   });
   

עדכן את הקוד כדי לבנות שאילתה לקבלת הודעות

1. עדיין בקובץ lib/firebase/firestore.js , אתר את הפונקציה getMessagesQuery , שצריכה להחזיר שאילתה של Cloud Firestore המאתרת הודעות המאוחסנות בנתיב users/{uid}/discussion/{discussionId}/messages איסוף.
2. החלף את כל הפונקציה getMessagesQuery בקוד הבא:

   function getMessagesQuery(db, userId, discussionId) {
           if (!userId || !discussionId) {
                   return null;
           }
           const messagesRef = collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           );
           return query(messagesRef, orderBy("createTime", "asc"));
   }
   

עדכן את הקוד כדי לטפל במסמכי הודעות של Cloud Firestore

1. עדיין בקובץ lib/firebase/firestore.js , אתר את הפונקציה handleMessageDoc , שמקבלת מסמך Cloud Firestore שמייצג הודעה בודדת.
   פונקציה זו צריכה לעצב ולבנות את הנתונים באופן הגיוני עבור ממשק המשתמש של אפליקציית Chatbot .
2. החלף את כל הפונקציה handleMessageDoc בקוד הבא:

   function handleMessageDoc(doc) {
           const data = doc.data();
           const item = {
                   prompt: data.prompt,
                   response: data.response,
                   id: doc.id,
                   createTime: formatDate(data.createTime.toDate()),
           };
   
           if (data?.status?.completeTime) {
                   item.completeTime = formatDate(data.status.completeTime.toDate());
           }
   
           return item;
   }
   

3. שמור את הקובץ.

הפעל והצג שוב את אפליקציית האינטרנט של Chatbot (עכשיו עם פונקציונליות)

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

1. בדפדפן שלך, חזור לכרטיסייה עם אפליקציית האינטרנט של Chatbot וטען מחדש את הדף.
2. לחץ על היכנס עם Google .
3. במידת הצורך, בחר בחשבון Google שלך.
4. לאחר שנכנסת, טען מחדש את הדף.
5. בתיבת הטקסט הזן את ההודעה שלך , הזן הודעה, כגון Tell me about space .
6. לחץ על שלח והמתן מספר שניות עד שהאפליקציה Chatbot תגיב.

יתרון נוסף של הרחבת Chatbot עם PaLM API הוא היסטוריית השיחות שלו.

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

1. בתיבת הטקסט הזן את ההודעה שלך , שאל שאלה, כגון What are five random fruits? .
2. בתיבת הטקסט הזן את ההודעה שלך , שאל שאלת המשך הקשורה לשאלה הקודמת, כגון And what about vegetables? .

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

11. הגדר את התוסף "המר טקסט לדיבור" עבור אפליקציית Video Hint

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

1. נווט לטקסט המרה להרחבת הדיבור .
2. לחץ על התקן במסוף Firebase .
3. בחר את פרויקט Firebase שלך.
4. הקש "הבא .
5. בסעיף APIs APIS המופעל ומשאבים שנוצרו , לחץ על אפשר לצד כל שירותים המוצעים לך:

6. לחץ על הבא ואז בחר הענק לצד כל הרשאות המוצעות לך.

7. הקש "הבא .
8. בתיבת הטקסט של נתיב אוסף , הזן bot .
9. בתיבת הטקסט של נתיב האחסון , הזן tts .
10. השאר את כל הערכים האחרים כאפשרויות ברירת המחדל שלהם.
11. לחץ על התקן סיומת והמתן להתקנה של סיומת.

נסה את הטקסט המרה להרחבת הדיבור

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

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

1. בקונסולת Firebase, נווט אל Firestore
2. נְקִישָׁה אוסף התחל .
3. בתיבת הטקסט של ID איסוף , הזן bot .
4. הקש "הבא .

5. בתיבת הטקסט של מזהה מסמך , לחץ על ID Auto-ID .
6. בתיבת הטקסט בשדה הזן text .
7. בתיבת הטקסט הערך , הזן The quick brown fox jumps over the lazy dog .
8. לחץ על שמור .

כדי לראות ולשמוע את קובץ ה- MP3 שיצרת, בצע את הצעדים הבאים:

1. במסוף Firebase, נווט לאחסון .
2. בחלונית בו תוכלו להעלות קבצים, שימו לב לשם הדלי שלכם לאחר ערך gs:// . זה שם דלי ברירת המחדל שלך לפרויקט זה. אתה צריך את זה במשימות שונות ברחבי Codelab זה.

3. במסוף הענן של גוגל, נווט לאחסון ענן .
4. בחר את הפרויקט שלך.
   אם אינך רואה את הפרויקט שלך ברשימת הפרויקטים האחרונה, לחץ על בחר פרויקט כדי לאתר את הפרויקט שלך בבוחר הפרויקט.

5. בחר את דלי האחסון ברירת המחדל שלך.
6. נווט אל ה- tts/ תיקיה.
7. לחץ על קובץ MP3.
8. בסוף קובץ ה- MP3, לחץ על ושים לב שהטקסט שלך מומר לדיבור.

12. הגדר את סיומת "תווית סרטוני תווית עם Cloud Video AI" עבור אפליקציית הרמז לווידיאו

התקן את סרטוני התווית עם סיומת AI של Cloud Video

1. נווט לסרטוני התווית עם סיומת AI של Cloud Video .
2. לחץ על התקן במסוף Firebase .
3. בחר את פרויקט Firebase שלך.
4. לחץ על הבא> הבא> הבא, עד שתגיע לסעיף הרחבת התצורה .
5. מהתפריט הנפתח של פונקציות הענן , בחר מיקום נתמך (או המיקום שבחרת בעבר לאחסון Firestore ו- Cloud או הקרוב אליו). למיקומים נתמכים, עיין בסעיף location_id ב- AnnotateVideoRequest .
6. מהתפריט הנפתח, בחר אחרון .
7. מהנפתח המצלמה הנייח , בחר מס .
8. השאר את כל הערכים האחרים כברירת המחדל שלהם.
9. לחץ על התקן סיומת והמתן להתקנה של סיומת.

נסה את סרטוני התווית עם סיומת AI של Cloud Video

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

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

1. נווט לאחסון בפרויקט Firebase שלך > צור תיקיה .
2. בתיבת הטקסט של שם התיקיה , הזן את video_annotation_input .

3. לחץ על הוסף תיקיה .
4. בתיקיית video_annotation_input , לחץ על העלאת קובץ .
5. בתיקיית ai-extensions-codelab/video-hint-start/public/videos ששיבטת או הורדת קודם לכן, בחר את קובץ הווידיאו הראשון.
6. בחזרה לדפדפן שלך, בקונסולת Google Cloud, נווט לאחסון ענן .
7. בחר את דלי האחסון ברירת המחדל שלך, אותו ציינת קודם.
8. לחץ על התיקיה video_annotation_output .
   אם אינך רואה את התיקיה video_annotation_output , המתן מספר שניות ורענן את הדף מכיוון שממשק ה- API של מודיעין הווידיאו עשוי עדיין לעבד את הסרטון.

9. שימו לב שקיים קובץ JSON העוקב אחר שם דומה לקובץ שהעלתם קודם.
10. נְקִישָׁה הורד שם קובץ .
11. פתח את קובץ ה- JSON שהורד בעורך הקוד שלך. הוא מכיל את הפלט הגולמי מממשק ה- API של Intelligence Intelligence, הכולל תוויות שזוהו של הסרטון שהעלית.

13. הגדר את אפליקציית רמז הווידיאו לשימוש ב- Firebase

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

הוסף שירותי Firebase ותצורה לקוד האפליקציה שלך

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

אפליקציית הדגימה של Codelab זו כוללת כבר את כל קוד הייבוא ​​והאתחול הדרוש עבור ה- SDKs (ראה video-hint-start/lib/firebase/firebase.js ), כך שאינך צריך להוסיף את אלה. עם זאת, לאפליקציית הדגימה יש רק ערכי מציין מיקום לתצורת Firebase (ראה video-hint-start/lib/firebase/firebase-config.js ), כך שאתה צריך לרשום את האפליקציה שלך עם פרויקט Firebase שלך ​​כדי לקבל את ערכי התצורה הייחודיים של Firebase לאפליקציה שלך.

1. במסוף Firebase, בפרויקט Firebase שלך, נווט אל סקירה כללית על הפרויקט ואז לחץ על אינטרנט (או לחץ על הוסף אפליקציה אם כבר רשמת אפליקציה עם הפרויקט).
2. בתיבת הטקסט של האפליקציה כינוי , הזן כינוי אפליקציה בלתי נשכח, כמו My Video Hint app .
3. אל תבחר גם באירוח Firebase שהוגדר גם עבור תיבת הסימון הזו של אפליקציה . תעשה את הצעדים האלה בהמשך בקודלב.
4. לחץ על הרשמה אפליקציה .
5. הקונסולה מציגה קטע קוד להוספת ואתחול של SDK של Firebase עם אובייקט תצורת Firebase ספציפי לאפליקציה. העתק את כל המאפיינים באובייקט התצורה של Firebase.
6. בעורך הקוד שלך, פתח את קובץ video-hint-start/lib/firebase/firebase-config.js .
7. החלף את ערכי מציין המקום בערכים שהעתקת זה עתה. זה בסדר אם יש לך מאפיינים וערכים עבור שירותי Firebase שאינך משתמש בהם באפליקציית הווידיאו רמז .
8. שמור את הקובץ.
9. חזרה במסוף Firebase, לחץ על המשך לקונסולה .

הגדר את הטרמינל שלך כדי להפעיל פקודות CLI של FireBase כנגד פרויקט Firebase שלך

1. בטרמינל שלך, לחץ על Control+C כדי למנוע מהשרת להפעיל את אפליקציית האינטרנט הקודמת.
2. בטרמינל שלך, נווט לתיקיית אפליקציות האינטרנט video-hint-start :

   cd ../video-hint-start
   

3. הפוך את פקודות ה- Firebase CLI להפעלת כנגד פרויקט FireBase ספציפי:

   firebase use YOUR_PROJECT_ID
   

הגדר את בסיס הקוד של האפליקציה שלך לשימוש באירוח Firebase עם מסגרת

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

1. בטרמינל שלך, אפשר מסגרות אינטרנט עם אירוח Firebase:

   firebase experiments:enable webframeworks
   

2. אתחול אירוח Firebase:

   firebase init hosting
   

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

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

1. בטרמינל שלך, התקן תלות בתיקיות video-hint-start functions , ואז הפעל את האפליקציה:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   firebase emulators:start --only hosting
   

2. בדפדפן שלך, נווט אל כתובת האתר המתארחת המקומית. ברוב המקרים, זה http: // localhost: 5000/ או משהו דומה.

הדף אמור לטעון, אך תבחין כי חסרים תכונות שונות. נוסיף את אלה בשלבים הבאים של Codelab זה.

פתרון בעיות הפעלת אפליקציית האינטרנט

אם אתה רואה הודעת שגיאה כמו Error: The query requires an index. You can create it here: https://console.firebase.google.com בחלונית הקונסולה של DevTools, בצע את הצעדים הבאים:

1. נווט לכתובת האתר המסופקת.

2. לחץ על שמור והמתן שהסטטוס ישתנה מהבניין כדי להפעיל .

14. הוסף פונקציונליות לאפליקציית רמז הווידיאו

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

לפרוס כללי אבטחה

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

אתה יכול להציג כללים אלה בקבצי firestore.rules ו- storage.rules .

1. כדי לפרוס כללי אבטחה אלה, הפעל פקודה זו בטרמינל שלך:

   firebase deploy --only firestore:rules,storage
   

2. אם נשאלת: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" , בחר כן .

עדכן את הקוד לשילוב הפונקציות

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

   פוּנקצִיָה	תיאור
   functions/01-handle-video-upload.js	השלב הראשון בצינור ההרחבה. זה מעבד את קובץ הווידיאו שהועלה על ידי המשתמש.
   functions/02-handle-video-labels.js	השלב השני בצינור ההרחבה. הוא מעבד את קובץ תווי הווידיאו, שנוצר על ידי סיומת storage-label-videos .
   functions/03-handle-audio-file.js	השלב השלישי בצינור ההרחבה. הוא מטפל בקובץ השמע המועבר.

   עם זאת, אתה עדיין צריך להוסיף קובץ המקבץ את הפונקציות הללו יחד.
2. בקובץ functions/index.js , הוסף את הקוד הבא:

   import { initializeApp } from "firebase-admin/app";
   
   export * from "./01-handle-video-upload.js";
   export * from "./02-handle-video-labels.js";
   export * from "./03-handle-audio-file.js";
   
   initializeApp();
   

קוד זה משתמש במודולי JavaScript כדי לייבא ולייצא את הפונקציות מקובץ index.js כך שיהיה מיקום ריכוזי אחד לכל הפונקציות.

עדכן את הקוד לטיפול בהעלאת וידאו

1. בעורך הקוד שלך, פתח את קובץ lib/firebase/storage.js .
2. אתר את פונקציית uploadVideo .
   פונקציה זו מקבלת פרמטרים של userId , filePath file . נתונים אלה מספיקים כדי להעלות קובץ לאחסון ענן.
3. בגוף פונקציית uploadVideo , הוסף את הקוד הבא:

   const storageRef = ref(storage, `video_annotation_input/${filePath}`);
   
   const uploadTask = uploadBytesResumable(storageRef, file, {
           customMetadata: {
                   uid: userId,
           },
   });
   
   return uploadTask;
   

פרוס את הפונקציות שלך

כדי לפרוס את הפונקציות שלך באמצעות CLI של Firebase, בצע את הצעדים הבאים:

1. בטרמינל שלך כשאתה עדיין בתיקיית video-hint-start , לחץ על Control+C כדי לעצור את התהליך הנוכחי.
2. פרוס את הפונקציות שלך:

   firebase deploy --only functions
   

   אם אתה נשאל על מחיקת פונקציות ענן קודמות, בחר No .
3. אם אתה רואה הודעה דומה Permission denied while using the Eventarc Service Agent , המתן מספר דקות ואז נסה שוב את הפקודה.
4. לאחר סיום הפקודה, הפעל את האפליקציה שוב באופן מקומי:

   firebase emulators:start --only hosting
   

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

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

1. בדפדפן שלך, מצא את הכרטיסייה בה ניווטת לכתובת http: // localhost: 5000.
2. במידת הצורך, לחץ על היכנס עם Google ובחר את חשבון Google שלך.
3. לחץ על העלה דוגמה וידאו מספר 1 והמתן מספר דקות כדי לראות את תוצאות סיכום הווידיאו.
4. אם אינך רואה תוצאות לאחר העלאת הסרטון, ראה שגיאות פתרון בעיות עם פונקציות ענן בנספח של Codelab זה.

15. מסקנה

מזל טוב! השגת הרבה בקודלב הזה!

תוספי FireBase המותקנים ומוגדרים

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

עבד עם הרחבות באמצעות קונסולת Firebase

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

בנה שלוש אפליקציות אינטרנט המונעות על ידי AI המשתמשות בתוספי Firebase

סקירה

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

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

צ'אטבוט

באפליקציית האינטרנט של Chatbot , השתמשת בתוסף ChatBot עם תוסף API של Palm כדי לספק למשתמש ממשק צ'אט אינטראקטיבי, הכולל הקשר היסטורי בשיחות - בהן כל הודעה מאוחסנת במסמך FireStore המועבר למשתמש מסוים.

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

Student asks: What is the ozone?
Response: The ozone is a molecule composed of...How do you think human activities can impact the ozone layer?

רמז: אתה יכול להשתמש באפשרות הקשר הניתנת להגדרה כדי להשיג זאת.

רמז וידאו

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

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

16. נספח: פתרון בעיות בשגיאות עם פונקציות ענן

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

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

אם אתה מקבל שגיאות הקשורות להרשאה בלוח הקונסולה של Chrome Devtools, בצע את הצעדים הבאים:

1. קרא את סקירת האימות | דף ריצת ענן
2. לחץ על הקישור כדי להציג ולהשלים את המשימות הנדרשות כדי לאפשר גישה לא מאומתת בציבור לפונקציה.

3. נווט בחזרה לאפליקציה סקירה . לדוגמה: http: // localhost: 8080.
4. לחץ על הוסף כמה ביקורות מדומות והמתן מספר שניות.
   • אם מופיעים ביקורות: אינך צריך להמשיך בשלבי פתרון בעיות אלה, ויכול לקפוץ ישר להגדרת קטע אפליקציית האינטרנט של צ'אט בוט בקודלב זה ..
   • אם ביקורות אינן מופיעות: המשך בסעיף פתרון בעיות זה.

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

1. במסוף Firebase, נווט לפונקציות .
2. רחף מעל פונקציית addMockReviews ולחץ על > צפה ביומנים .

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

   Exception from a finished function: Error: 7 PERMISSION_DENIED: Missing or insufficient permissions.
   

   0001-compute@developer.gserviceaccount.com does not have storage.objects.get access to the Google Cloud Storage object. Permission 'storage.objects.get' denied on resource (or it may not exist).
   

4. במסוף הענן של גוגל, נווט לדף הרשאות IAM ואז בחר את הפרויקט שלך.
5. בטבלה, מצא את עמודת השם .
   בדף IAM & Admin , יש טבלה של משתמשים ותפקידים. עמודת השם בטבלה מתארת ​​למה המשתמש, או המנהל, מיועד. יתכן שיש לך מנהל עם שם ברירת המחדל של חשבון שירות מחשב .

אם אתה רואה את חשבון שירות מחשוב ברירת המחדל , בצע את הצעדים הבאים:

1. נְקִישָׁה ערוך מנהל .

2. המשך עם התפקידים הוסף לסעיף חשבון שירות Compute Compute ברירת המחדל ב- CodElab זה.

אם אינך רואה את חשבון שירות מחשוב ברירת המחדל , בצע את הצעדים הבאים:

1. לחץ על גישה להענק .
2. בתיבת הטקסט של המנהלים החדשים , הזן compute .
3. בתפריט של AutoSuggestions המופיע, בחר חשבון שירות מחשוב ברירת מחדל .

הוסף תפקידים לחשבון שירות מחשוב ברירת המחדל

בסעיף תפקידי הקצאה בחשבון שירות מחשוב ברירת המחדל :

1. הרחב את התפריט בחר תפקיד .
2. בתיבת הטקסט של המסנן , הזן Cloud Datastore User .
3. בתפריט של AutoSuggestions המופיע, בחר משתמש בענן DataStore .
4. נְקִישָׁה הוסף תפקיד נוסף .
   1. הרחב את התפריט בחר תפקיד .
   2. בתיבת הטקסט של המסנן , הזן Cloud Storage for Firebase Admin .
   3. בתפריט של AutoSuggestions המופיע, בחר אחסון ענן עבור Adminase Firebase .
5. נְקִישָׁה הוסף תפקיד נוסף .
   1. הרחב את התפריט בחר תפקיד .
   2. בתיבת הטקסט של המסנן , הזן את Cloud Storage for Firebase Service Agent .
   3. בתפריט של AutoSuggestions המופיע, בחר אחסון ענן עבור סוכן שירות Firebase .
6. לחץ על שמור .