פיתוח אפליקציות בעידן ה-AI

1. סקירה כללית

בשיעור ה-Lab הזה תשתמשו במוצרי ה-AI הגנרטיבי של Google כדי לבנות תשתית ב-Google Cloud בעזרת Gemini Cloud Assist, לשלוח שאילתות לנתוני BigQuery באמצעות תכונות של שפה טבעית ל-SQL ב-Data Canvas, לכתוב קוד במחברות Jupyter של Colab Enterprise וב-Eclipse Theia (Visual Studio Code) בעזרת Gemini Code Assist, ולשלב תכונות של חיפוש וצ'אט מבוססות-AI שנבנו על מקורות מידע של Cloud Storage ו-BigQuery ב-Vertex AI Agent Builder.

המטרה שלנו היא ליצור אתר עם מתכונים וטיפים לבישול שנקרא AI Recipe Haven (ממלכת המתכונים של ה-AI). האתר ייבנה ב-Python וב-Streamlit ויכלול שני דפים עיקריים. באתר 'עצות לבישול' יהיה צ'אטבוט שייווצר באמצעות Gemini ו-Vertex AI Agent Builder, עם מקור מידע שקשור לקבוצה של ספרי בישול. הצ'אטבוט יציע עצות לבישול ויענה על שאלות שקשורות לבישול. חיפוש מתכונים יהיה מנוע חיפוש שמבוסס על Gemini, והפעם הוא יתבסס על מסד נתונים של מתכונים ב-BigQuery.

אם נתקלתם בבעיה בקוד כלשהו בתרגיל הזה, הפתרונות לכל קובצי הקוד נמצאים במאגר GitHub של התרגיל בענף solution.

מטרות

בשיעור ה-Lab הזה תלמדו איך לבצע את המשימות הבאות:

הפעלה ושימוש ב-Gemini Cloud Assist
יצירת אפליקציית חיפוש ב-Vertex AI Agent Builder לצ'אטבוט למתן עצות לבישול
טעינה וניקוי של נתונים במחברת Colab Enterprise, בעזרת Gemini Code Assist
יצירת אפליקציית חיפוש ב-Vertex AI Agent Builder עבור מחולל המתכונים
תכנון אפליקציית האינטרנט המרכזית ב-Python וב-Streamlit, עם קצת עזרה מ-Gemini
פריסת אפליקציית האינטרנט ב-Cloud Run
חיבור הדף 'עצות לבישול' לאפליקציה שלנו ליצירת סוכנים לחיפוש מתכונים
(אופציונלי) קישור דף החיפוש של המתכונים לאפליקציית הכלי ליצירת סוכנים לחיפוש מתכונים
(אופציונלי) עיון בבקשה הסופית

2. הגדרה ודרישות

לפני שלוחצים על כפתור Start Lab

קראו היטב את ההוראות הבאות. שיעורי Lab מוגבלים בזמן ואי אפשר להשהות אותם. הטיימר מתחיל כשלוחצים על Start Lab ומראה למשך כמה זמן תוכלו להשתמש במשאבים ב-Google Cloud.

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

מה צריך?

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

גישה לדפדפן אינטרנט סטנדרטי (מומלץ להשתמש בדפדפן Chrome).
זמן להשלמת המעבדה.

הערה: אם כבר יש לכם פרויקט או חשבון Google Cloud אישי משלכם, אין להשתמש בו במעבדה הזו.

הערה: אם אתם משתמשים ב-Pixelbook, צריך לפתוח חלון פרטי כדי להריץ את המעבדה הזו.

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

מעתיקים את שם המשתמש ואז לוחצים על Open Google Console (פתיחת Google Console). תתחיל הרצה של משאבים בשיעור ה-Lab, ואז ייפתח הדף Sign in בכרטיסייה נפרדת.

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

אם מופיע הדף 'בחירת חשבון', לוחצים על 'שימוש בחשבון אחר'.

בדף Sign in (כניסה), מדביקים את שם המשתמש שהעתקתם מהחלונית Connection Details (פרטי התחברות). אחר כך מעתיקים ומדביקים את הסיסמה.

חשוב: צריך להשתמש בפרטי הכניסה מהחלונית Connection Details. אין להשתמש בפרטי הכניסה של Qwiklabs. אם יש לכם חשבון Google Cloud משלכם, אל תשתמשו בו בשיעור המעשי הזה (כך תימנעו מחיוב בתשלום). 4. לוחצים כדי לעבור על הדפים הבאים:

מסכימים לתנאים ולהגבלות.
אין להוסיף אפשרויות שחזור או אימות דו-שלבי (כי החשבון הזה זמני).
אין להירשם לתקופות ניסיון בחינם.

אחרי כמה דקות מסוף Cloud ייפתח בכרטיסייה הזו.

הערה: תוכלו לראות תפריט עם רשימת השירותים והמוצרים של Google Cloud בלחיצה על תפריט הניווט בפינה הימנית העליונה.

3. משימה 0. בדיקת אשכול תחנות העבודה

בהמשך שיעור ה-Lab הזה תשתמשו ב-Google Cloud Workstation כדי לבצע עבודת פיתוח. תהליך ההפעלה של המעבדה הזו אמור להתחיל ביצירת האשכול של תחנת העבודה. לפני שממשיכים, צריך לוודא שהאשכול נוצר.

במסוף Google Cloud, משתמשים בתיבת החיפוש כדי לעבור אל Cloud Workstations.
בתפריט הניווט הימני, לוחצים על ניהול אשכולות.
אם מצב האשכול הוא 'מתעדכן', אפשר להמשיך למשימה 1. אם לא מופיעים אשכולות באף מצב, רעננו את הדף. אם עדיין לא מופיע אשכול עם הכיתוב Updating (building), לוחצים על End Lab (סיום ה-Lab) באמצעות הלחצן בפינה הימנית העליונה של ההוראות האלה ומפעילים מחדש את ה-Lab.

4. משימה 1: הפעלה ושימוש ב-Gemini Cloud Assist

במשימה הזו נפעיל את Gemini Cloud Assist ונשתמש בו. בזמן העבודה במסוף Google Cloud, ‏Gemini Cloud Assist יכול להציע לכם עצות, לעזור לכם לבנות, להגדיר ולנטר את תשתית הענן של Google Cloud, ואפילו להציע פקודות gcloud ולכתוב סקריפטים של Terraform.

כדי להפעיל את Cloud Assist, לוחצים על תיבת החיפוש בחלק העליון של ממשק המשתמש של מסוף Cloud ובוחרים באפשרות יש לך שאלה ל-Gemini? (או בניסוח יש לך שאלה ל-Gemini לגבי מסוף Cloud?).
גוללים לקטע Required API (ה-API הנדרש) בדף ומפעילים את Gemini for Google Cloud API.
אם ממשק הצ'אט לא מופיע מיד, לוחצים על התחלת צ'אט. כדאי להתחיל ולבקש מ-Gemini להסביר חלק מהיתרונות של שימוש ב-Cloud Workstations. כדאי להקדיש כמה דקות כדי לבדוק את התשובה שנוצרה.
אחר כך, אפשר לשאול על היתרונות של Agent Builder ואיך הוא יכול לעזור להצגת תשובות מבוססות עובדות.
לבסוף, נבחן השוואה. בחלון הצ'אט של Gemini במסוף Google Cloud, שואלים את השאלה הבאה:

What are the major steps to creating a search app grounded in a
GCS data source using Vertex AI Agent builder?

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

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

5. משימה 2: יצירת אפליקציית חיפוש ב-Vertex AI Agent Builder לצ'אטבוט למתן עצות לבישול

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

משתמשים בתיבת החיפוש של Cloud Console כדי לנווט אל Vertex AI. מלוח הבקרה, לוחצים על הפעלת כל ממשקי ה-API המומלצים. אם מופיע חלון קופץ שבו מוצגת הודעה על כך שצריך להפעיל את Vertex AI API, צריך גם להפעיל אותו.
משתמשים בחיפוש כדי לעבור אל Agent Builder ואז לוחצים על Continue and Activate the API (המשך והפעלת ה-API).
כפי ש-Gemini הציע לנו קודם, כדי ליצור אפליקציית חיפוש ב-Agent Builder, צריך קודם ליצור מקור נתונים מוסמך. כשהמשתמש מחפש, Gemini מבין את השאלה ויודע איך לנסח תשובות חכמות, אבל הוא יחפש את המידע שבו הוא משתמש בתשובה במקור המעוגן, ולא ישלוף אותו מהידע המובנה שלו.

בתפריט שמימין, עוברים אל מאגרי נתונים ולוחצים על 'יצירת מאגר נתונים'. 4. ספרי המתכונים בדומיין הציבורי שבהם אנחנו משתמשים כדי להציג את עצות הבישול בדף שלנו נמצאים כרגע בקטגוריה של Cloud Storage בפרויקט חיצוני. בוחרים את סוג המקור Cloud Storage. 5. בודקים את אפשרויות ברירת המחדל שקשורות לסוג המידע שמייבאים, אבל לא משנים אותן. משאירים את סוג הייבוא כתיקייה ובנתיב של מאגר הנתונים משתמשים ב: labs.roitraining.com/labs/old-cookbooks, ואז לוחצים על המשך. 6. נותנים שם למאגר הנתונים: old-cookbooks. לוחצים על עריכה, משנים את המזהה ל-old-cookbooks-id ולוחצים על יצירה כדי ליצור את מאגר הנתונים.

כלי בניית הסוכנים של Vertex AI תומך בכמה סוגי אפליקציות, ומאגר הנתונים משמש כמקור האמת לכל אחת מהן. אפליקציות חיפוש מתאימות לשימוש כללי ולחיפוש. אפליקציות ל-Chat מיועדות לתהליכים גנרטיביים באפליקציות של צ'אטבוט או בוט קולי שמבוססות על Dataflow. אפליקציות להמלצות עוזרות ליצור מנועי המלצות טובים יותר. ואפליקציות סוכנים נועדו ליצור סוכנים מבוססי-AI גנרטיבי. בסופו של דבר, סביר להניח ש-Agent יתאים לנו הכי טוב למה שאנחנו רוצים לעשות, אבל מכיוון שהמוצר נמצא כרגע בשלב התצוגה המקדימה, נשתמש בסוג אפליקציית החיפוש. 7. בתפריט הימני, עוברים אל אפליקציות ולוחצים על יצירת אפליקציה. 8. בוחרים באפשרות 'אפליקציה לחיפוש'. בודקים את האפשרויות השונות, אבל לא משנים אותן. נותנים שם לאפליקציה: cookbook-search. לוחצים על עריכה ומגדירים את מזהה האפליקציה ל-cookbook-search-id. מגדירים את החברה ל-Google ולוחצים על המשך. 9. בודקים את מאגר הנתונים old-cookbooks שיצרתם לפני כמה שלבים ולוחצים על יצירה של אפליקציית החיפוש.

אם תבדקו את הכרטיסייה Activity (פעילות), סביר להניח שתראו שהספרים עדיין מיובאים ומאונדקסים. יעברו יותר מ-5 דקות עד ש-Agent Builder יאנדקס את אלפי הדפים שנמצאים ב-70 ספרי המתכונים שנתנו לו. בזמן שהוא פועל, נטען וננקה חלק מהנתונים של מסד הנתונים של המתכונים בשביל מחולל המתכונים שלנו.

6. משימה 3: טעינה וניקוי של נתונים במחברת Colab Enterprise, בעזרת Gemini Code Assist

יש כמה דרכים עיקריות לעבוד עם מחברות Jupiter ב-Google Cloud. נשתמש במוצר החדש ביותר של Google, ‏ Colab Enterprise. חלקכם אולי מכירים את המוצר Colab של Google, שמשמש בדרך כלל אנשים פרטיים וארגונים שרוצים להתנסות ב-notebooks של Jupiter בסביבה חופשית. ‫Colab Enterprise הוא מוצר מסחרי של Google Cloud שמשולב באופן מלא עם שאר מוצרי הענן של Google, ומנצל באופן מלא את יכולות האבטחה והתאימות של סביבת GCP.

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

משתמשים בחיפוש כדי לנווט אל Colab Enterprise וליצור notebook. אם מוצגת לכם הצעה להתנסות בתכונות חדשות של Colab, דחו אותה. כדי להפעיל את זמן הריצה, שהוא כוח המחשוב שמאחורי המחברת, לוחצים על Connect (התחברות) בפינה השמאלית העליונה של המחברת החדשה.

בתפריט שלוש הנקודות שליד השם הנוכחי של ה-notebook בחלונית Files (קבצים) ב-Colab Enterprise, אפשר לשנות את השם שלו Data Wrangling.

יוצרים תיבת + טקסט חדשה ומשתמשים בחץ למעלה כדי להעביר אותה כך שהיא תהיה התא הראשון בדף.

עורכים את תיבת הטקסט ומזינים:

# Data Wrangling

Import the Pandas library

בבלוק הקוד שמתחת לבלוק הטקסט שיצרתם, מתחילים להקליד imp. Gemini Code Assist אמור להציע את שאר הייבוא באפור. כדי לקבל את ההצעה, מקישים על Tab.

import pandas as pd

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

Create a Pandas DataFrame from: gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv. View the first few records.

יוצרים ועורכים עוד בלוק קוד. שוב, מתחילים להקליד df ובודקים את הקוד שנוצר על ידי Gemini Code Assistant. אם מופיעה רשימה נפתחת של השלמה אוטומטית של מילות מפתח ב-Python מעל ההצעה שנוצרה, לוחצים על Escape כדי לראות את הקוד המוצע באפור בהיר. מקישים שוב על Tab כדי לאשר את ההצעה. אם ההצעה לא כללה את בקשה להפעלת פונקציה head(), מוסיפים אותה.

df = pd.read_csv('gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv')
df.head()

לוחצים על תא הקוד הראשון, שבו ייבאתם את Pandas, ומשתמשים בתפריט Commands או במקלדת כדי להריץ את התא שנבחר. במקלדת, לחיצה על Shift+Enter תריץ את התא ותעביר את המיקוד לתא הבא, ותיצור תא אם צריך. צריך להמתין עד שהתא יופעל לפני שעוברים הלאה.

הערה: אם התא לא הופעל, יופיעו [ ] משמאל לתא. בזמן ההרצה של תא, מוצגת אנימציה מסתובבת שמציינת שהפעולה מתבצעת. בסיום התא יופיע מספר, כמו [13]. 9. מריצים את התא שבו קובץ ה-CSV נטען ל-DataFrame. מחכים שהקובץ ייטען ובודקים את חמש השורות הראשונות של הנתונים. אלה נתוני המתכון שנטען ל-BigQuery, ובסופו של דבר נשתמש בהם כדי להנחות את מחולל המתכונים. 10. יוצרים בלוק קוד חדש ומזינים את התגובה שלמטה. אחרי שמקלידים את התגובה, עוברים לשורת הקוד הבאה ומוצגת ההצעה df.columns. מאשרים את ההודעה ומריצים את התא.

# List the current DataFrame column names

הראינו עכשיו שיש לכם שתי אפשרויות לקבלת עזרה מ-Gemini Code Assist במחברת Jupyter: תאי טקסט מעל תאי קוד או הערות בתוך תא הקוד עצמו. תגובות בתוך תאי קוד פועלות היטב ב-Jupyter notebooks, אבל הגישה הזו תפעל גם בכל סביבת פיתוח משולבת (IDE) אחרת שתומכת ב-Gemini Code Assist של Google.

בואו נבצע ניקוי נתונים קטן של העמודות. משנים את השם של העמודה Unnamed: 0 ל-id, ואת השם של העמודה link ל-uri. משתמשים בטכניקות של הנחיה > קוד כדי ליצור את הקוד, ואז מריצים את התא כשמרוצים מהתוצאה.

# Rename the column 'Unnamed: 0' to 'id' and 'link' to 'uri'
df.rename(columns={'Unnamed: 0': 'id', 'link': 'uri'}, inplace=True)

מסירים את העמודות source ו-NER ומשתמשים ב-head() כדי לראות את השורות הראשונות. שוב, מבקשים עזרה מ-Gemini. מריצים את שתי השורות האחרונות ובודקים את התוצאות.

# Remove the source and NER columns
df.drop(columns=['source', 'NER'], inplace=True)
df.head()

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

# Count the records in the DataFrame
df.shape # count() will also work

2.23 מיליון רשומות זה כנראה יותר מתכונים ממה שיש לנו זמן לעבור עליהם. תהליך יצירת האינדקס ב-Agent Builder ייקח כנראה יותר מדי זמן לתרגיל שלנו היום. כפשרה, נדגום 150,000 מתכונים ונשתמש בהם. תשתמש בגישה של הנחיה > קוד כדי לקחת את הדוגמה ולאחסן אותה ב-DataFrame חדש בשם dfs (s בשביל small).

# Sample out 150,000 records into a DataFrame named dfs
dfs = df.sample(n=150000)

נתוני המקור של המתכון מוכנים לטעינה לתוך BigQuery. לפני שנטען את הנתונים, נעבור ל-BigQuery וניצור מערך נתונים שיכיל את הטבלה. במסוף Google Cloud, משתמשים בתיבת החיפוש כדי לנווט אל BigQuery. אפשר ללחוץ לחיצה ימנית על BigQuery ולפתוח אותו בכרטיסייה חדשה בדפדפן.
אם היא לא מוצגת, פותחים את חלונית הצ'אט של Gemini AI באמצעות הלוגו של Gemini בפינה השמאלית העליונה של Cloud Console. אם תתבקשו להפעיל את ה-API שוב, לחצו על 'הפעלה' או רעננו את הדף. מריצים את ההנחיה: What is a dataset used for in BigQuery? אחרי שבודקים את התשובה, שואלים: How can I create a dataset named recipe_data using the Cloud Console? משווים את התוצאות לכמה השלבים הבאים.

בחלונית BigQuery Explorer, לוחצים על סמל האפשרויות הנוספות (3 נקודות) View actions (הצגת פעולות) לצד מזהה הפרויקט. לאחר מכן בוחרים באפשרות יצירת מערך נתונים.

תציין את מערך הנתונים ואת המזהה של recipe_data. משאירים את סוג המיקום כ-US ולוחצים על Create Dataset (יצירת מערך נתונים). אם מופיעה שגיאה שמערך הנתונים כבר קיים, פשוט ממשיכים.

אחרי שיצרנו את מערך הנתונים ב-BigQuery, נחזור למחברת שלנו ונבצע את ההוספה. 19. חוזרים אל מחברת ניהול הנתונים ב-Colab Enterprise. בתא קוד חדש, יוצרים משתנה בשם project_id ומשתמשים בו כדי לאחסן את מזהה הפרויקט הנוכחי. מזהה הפרויקט הנוכחי מופיע בפינה הימנית העליונה של ההוראות האלה, מתחת ללחצן End Lab. אפשר גם למצוא אותו בדף הבית של Cloud Console. מקצים את הערך למשתנה project_id ומריצים את התא.

# Create a variable to hold the current project_id
project_id='YOUR_PROJECT_ID'

משתמשים בגישת ההנחיה > קוד כדי ליצור בלוק קוד שיכניס את DataFrame‏ dfs לטבלה בשם recipes במערך הנתונים שיצרנו הרגע recipe_data. מריצים את התא.

dfs.to_gbq(destination_table='recipe_data.recipes', project_id=project_id, if_exists='replace')

7. משימה 4: יצירת אפליקציית חיפוש ב-Vertex AI Agent Builder עבור מחולל המתכונים

מעולה, אחרי שיצרנו את הטבלה עם נתוני המתכונים, נשתמש בה כדי ליצור מקור נתונים מבוסס ליוצר המתכונים שלנו. הגישה שלנו תהיה דומה לגישה שבה השתמשנו בצ'אטבוט לבישול. נשתמש ב-Vertex AI Agent Builder כדי ליצור מאגר נתונים, ואז נשתמש בו כמקור האמת לאפליקציית חיפוש.

אם רוצים, אפשר לבקש מ-Gemini במסוף Google Cloud להזכיר לכם את השלבים ליצירת אפליקציית חיפוש ב-Agent Builder, או לפעול לפי השלבים שמפורטים בהמשך.

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

הערה: אם לוחצים על recipes במקום על לחצן הבחירה שלידו, תיפתח כרטיסייה חדשה בדפדפן ותועברו לדף סקירה כללית של הטבלה ב-BigQuery. פשוט סוגרים את כרטיסיית הדפדפן ובוחרים את לחצן האפשרויות ב-Agent Builder. 3. בודקים את שאר אפשרויות ברירת המחדל, אבל לא משנים אותן, ואז לוחצים על המשך. 4. בדף סקירת הסכימה, בודקים את הגדרות ברירת המחדל הראשוניות, אבל לא משנים שום דבר. ‫Continue (המשך). 5. נותנים למאגר הנתונים את השם recipe-data. עורכים את מזהה מאגר הנתונים ומגדירים אותו ל-recipe-data-id. יוצרים את מאגר הנתונים. 6. בתפריט הניווט שמימין, עוברים אל אפליקציות ולוחצים על יצירת אפליקציה. 7. בוחרים שוב באפליקציית החיפוש. נותנים לאפליקציה את השם recipe-search ומגדירים את המזהה ל-recipe-search-id. מגדירים את שם החברה ל-Google ולוחצים על המשך. 8. הפעם, בודקים את מקורות הנתונים recipe-data. יוצרים את האפליקציה.

ייקח זמן עד שטבלת מסד הנתונים שלנו תאונדקס. בזמן הזה, ננסה את קנבס הנתונים החדש של BigQuery ונראה אם נוכל למצוא מתכון מעניין או שניים. 9. משתמשים בתיבת החיפוש כדי לעבור אל BigQuery. בחלק העליון של BigQuery Studio, לוחצים על החץ למטה לצד הכרטיסייה הכי ימנית ובוחרים באפשרות Data canvas (קנבס נתונים). מגדירים את האזור ל-us-central1.

בתיבת החיפוש של קנבס הנתונים, מחפשים את recipes ולוחצים על הוספה לקנבס כדי להוסיף את הטבלה.
ייצוג חזותי של טבלת המתכונים ייטען אל קנבס נתונים ב-BigQuery. אתם יכולים לעיין בסכימה של הטבלה, לראות תצוגה מקדימה של הנתונים בטבלה ולבדוק פרטים אחרים. מתחת לייצוג הטבלה, לוחצים על שאילתה.
בשטח העבודה יופיע דו-שיח של שאילתת BigQuery, בתוספת אחת: מעל חלון השאילתה יש תיבת טקסט שבה אפשר להזין הנחיה ל-Gemini כדי לקבל עזרה. ננסה למצוא מתכונים לעוגות בדוגמה שלנו. מריצים את ההנחיה הבאה (מקלידים את הטקסט ומקישים על Enter או על מקש החזרה כדי להפעיל את יצירת ה-SQL):

Please select the title and ingredients for all the recipes with a title that contains the word cake.

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

Do I have any chili recipes?

(אל תשכח להריץ את השאילתה החדשה) קיבלתי רשימה של מתכוני צ'ילי, אבל בלי רשימת הרכיבים. לכן שיניתי את השאילתה ל:

Do I have any chili recipes?  Please include their title and ingredients.

(כן, אני אומר בבקשה כשאני נותן הנחיה. אמא שלי הייתה גאה בי.)

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

Do I have any chili recipes?  Please include their title and ingredients, and ignore any recipes with mushrooms as an ingredient.

8. משימה 5: תכנון אפליקציית האינטרנט המרכזית ב-Python וב-Streamlit, עם קצת עזרה מ-Gemini

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

נשתמש ב-Gemini Code Assist במהלך העבודה. מידע נוסף על השימוש ב-Gemini Code Assist ב-Visual Studio Code זמין במסמכי העזרה כאן.

אנחנו נבצע את הפיתוח שלנו ב-Google Cloud Workstation, סביבת פיתוח מבוססת-ענן, ובמקרה שלנו, היא נטענת מראש עם Eclipse Theia (קוד פתוח של Visual Studio Code). סקריפט אוטומטי בתרגיל הזה יצר בשבילנו את האשכול ואת ההגדרה של Cloud Workstation, אבל אנחנו עדיין צריכים ליצור את Cloud Workstation עצמו. אם אתם רוצים לקבל מידע נוסף על Cloud Workstations ועל השימוש בהם, אתם יכולים לשאול את Gemini Cloud Assist :-)

משתמשים בחיפוש כדי לעבור אל Cloud Workstations ואז אל Create Workstation (יצירת תחנת עבודה). נותנים שם לתחנת העבודה dev-env ומשתמשים בהגדרה my-config. יוצרים את תחנת העבודה.
אחרי כמה דקות, תחנת העבודה החדשה תופיע ברשימה 'תחנות העבודה שלי'. מפעילים את dev-env ואחרי שהוא פועל, מפעילים את סביבת הפיתוח.
העורך של תחנת העבודה ייפתח בכרטיסייה חדשה בדפדפן, ואחרי כמה רגעים אמור להופיע ממשק מוכר של Theia (Visual Studio Code). בצד ימין של הממשק, מרחיבים את הכרטיסייה Source Control (בקרת מקור) ולוחצים על Clone Repository (שיבוט מאגר).

מזינים את כתובת ה-URL של המאגר https://github.com/haggman/recipe-app. משכפלים את המאגר לתיקייה user ואז פותחים את המאגר המשוכפל לעריכה.
לפני שנתחיל לעבוד על אפליקציית האינטרנט שלנו, נבדוק את התיקייה המשוכפלת ונדאג שתוסף Cloud Code של העורך יהיה מחובר ל-Google Cloud ושהוא יופעל ב-Gemini. בואו נעשה את זה עכשיו. בפינה הימנית התחתונה של העורך, לוחצים על Cloud Code - Sign in (Cloud Code – כניסה). אם הקישור לא מופיע, צריך להמתין דקה ולבדוק שוב.

בחלון הטרמינל תוצג כתובת URL ארוכה. פותחים את כתובת ה-URL בדפדפן ומבצעים את השלבים כדי להעניק ל-Cloud Code גישה לסביבת Google Cloud. חשוב לוודא שאתם משתמשים בחשבון הזמני של התרגיל student-... ולא בחשבון Google Cloud האישי שלכם כשאתם מבצעים אימות. בתיבת הדו-שיח האחרונה, לוחצים על העתקה כדי להעתיק את קוד האימות ומדביקים אותו בחזרה בחלון הטרמינל שממתין בכרטיסייה בדפדפן של Cloud Workstation.
אחרי כמה רגעים, הקישור Cloud Code בפינה הימנית התחתונה של העורך ישתנה ל-Cloud Code - No Project. לוחצים על הקישור החדש כדי לבחור פרויקט. לוח הפקודות אמור להיפתח בחלק העליון של העורך. לוחצים על Select a Google Cloud project ובוחרים את הפרויקט qwiklabs-gcp-.... אחרי כמה רגעים, הקישור בפינה הימנית התחתונה של הכלי לעריכה יתעדכן ויציג את מזהה הפרויקט. המשמעות היא ש-Cloud Code צורף בהצלחה לפרויקט הפעיל.
אחרי שחיברתם את Cloud Code לפרויקט, אתם יכולים להפעיל את Gemini Code Assist. בפינה השמאלית התחתונה של ממשק העורך, לוחצים על הלוגו של Gemini עם הקו שחוצה אותו. החלונית של Gemini Chat תיפתח בצד ימין של העורך. לוחצים על בחירת פרויקט ב-Google Cloud. כשלוח הפקודות נפתח, בוחרים את הפרויקט qwiklabs-gcp-...‎. אם פעלתם לפי השלבים בצורה נכונה (ולא חלו שינויים ב-Google), אמור להיפתח חלון פעיל של Gemini Chat.

לבסוף, נגדיר את חלון הטרמינל של הכלי לעריכה באופן שווה. משתמשים בתפריט ההמבורגר > תצוגה > טרמינל כדי לפתוח את חלון הטרמינל. מריצים את gcloud init. שוב, משתמשים בקישור כדי לאפשר לטרמינל Cloud Shell לפעול בפרויקט qwiklabs-gcp-.... כשמתבקשים, בוחרים באפשרות המספרית של פרויקט qwiklabs-gcp-....
מעולה, אחרי שסיימנו להגדיר את הטרמינל, את Gemini Chat ואת Cloud Code, פותחים את הכרטיסייה Explorer ומקדישים כמה דקות לעיון בקבצים בפרויקט הנוכחי.

בסייר, פותחים את הקובץ requirements.txt לעריכה. עוברים לחלונית הצ'אט של Gemini ושואלים:

From the dependencies specified in the requirements.txt file, what type of application are we building?

לכן, אנחנו בונים אפליקציית אינטרנט אינטראקטיבית באמצעות Python ו-Streamlit, שמתקשרת עם Vertex AI ו-Discovery Engine. בשלב הזה, נתמקד ברכיבים של אפליקציית האינטרנט. כמו ש-Gemini אומר, ‏Streamlit היא מסגרת ליצירת אפליקציות אינטרנט מבוססות-נתונים ב-Python. עכשיו שואלים:

Does the current project's folder structure seem appropriate for a Streamlit app?s

כאן Gemini נוטה להיתקל בבעיות. ‫Gemini יכול לגשת לקובץ שפתוח כרגע בכלי העריכה, אבל הוא לא יכול לראות את כל הפרויקט. אפשר לנסות לשאול:

Given the below, does the current project's file and folder structure seem appropriate for a Streamlit app?

- build.sh
- Home.py
- requirements.txt
- pages
-- Cooking_Advice.py
-- Recipe_Search.py

רוצה לקבל תשובה טובה יותר?

כדאי לקבל מידע נוסף על Streamlit:

What can you tell me about Streamlit?

יפה, אפשר לראות ש-Gemini מציע לנו סקירה כללית טובה שכוללת יתרונות וחסרונות.

אם רוצים לבדוק את החסרונות, אפשר לשאול:

What are the major downsides or shortcomings?

שימו לב שלא היינו צריכים להגיד 'של Streamlit', כי Gemini Chat הוא שיחתי (מרובה תפניות). ‫Gemini יודע על מה דיברנו כי אנחנו בשיחת צ'אט. אם בשלב כלשהו תרצו למחוק את היסטוריית הצ'אטים עם Gemini, תוכלו להשתמש בסמל של פח האשפה בחלק העליון של חלון הצ'אט עם Gemini.

9. משימה 6: פריסת אפליקציית האינטרנט ב-Cloud Run

מעולה, יש לנו את מבנה האפליקציה הבסיסי, אבל האם הכול יעבוד? עוד יותר טוב, איפה כדאי לארח אותו ב-Google Cloud?

בחלון הצ'אט עם Gemini, שואלים:

If I containerize this application, what compute technologies
in Google Cloud would be best for hosting it?

חשוב לזכור שאם לא עבדתם כבר בסביבת הפיתוח המשולבת, יכולתם גם להשתמש ב-Google Cloud Assist. פותחים את מסוף Google Cloud, פותחים את Gemini Cloud Assist ושואלים:

If I have a containerized web application, where would be the
best place to run it in Google Cloud?

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

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

What steps would be required to run this application in
Cloud Run?

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

Create a Dockerfile for the application in the current folder.
The dependencies are defined in requirements.txt and I want you
to use the Python 3 slim bookworm base image.

‫Gemini לא תמיד יחזיר את אותה תשובה לאותה הנחיה. בפעם הראשונה שביקשתי מ-Gemini קובץ Dockerfile, קיבלתי בדיוק את הקובץ שאני רוצה להציע לך להשתמש בו. קיבלתי עכשיו את ההצעה:

```docker
# Base image
FROM python:3-bookworm-slim

# Set working directory
WORKDIR /app

# Install dependencies
RUN apt-get update && apt-get install -y \
    build-essential \
    libpq-dev \
    gcc \
    python3-dev \
    && rm -rf /var/lib/apt/lists/*

# Install pip and virtualenv
RUN pip install --upgrade pip virtualenv

# Create virtual environment
RUN python3 -m venv venv

# Activate virtual environment
WORKDIR /app/venv/bin
RUN . activate

# Install Streamlit and libraries from requirements.txt
RUN pip install -r requirements.txt

# Copy application files
COPY . /app

# Expose port 8501 for Streamlit
EXPOSE 8501

# Start Streamlit app
CMD ["streamlit", "run", "main.py"]

That's a heck of a Dockerfile. I'd simplify it a bit. We don't need the apt-get section as anything needed for Python is already in our base image. Also, using a virtual environment in a Python container is a waste of space, so I'd remove that. The expose command isn't strictly necessary, but it's fine. Also, it's trying to start main.py which I don't have.

6. Tweak the Dockerfile so it resembles the following:

FROM python:3.11-slim-bookworm

WORKDIR /app

מעתיקים את הקובץ requirements.txt . ‫RUN pip install –no-cache-dir –upgrade pip &&
pip install –no-cache-dir -r requirements.txt

העתקה . .

CMD ["streamlit", "run", "Home.py"]

7. We need a place in Google cloud where we can store our container image. Let's get a little help from Gemini. In the Google Cloud Console Gemini Cloud Assist ask:

איפה הכי טוב לאחסן קובצי אימג' של Docker ב-Google Cloud?

8. If one of the answers you received is the Google Container Registry, then I guess Gemini hasn't gotten word that GCR is deprecated. Again, just like human assistants, you may get out of date or simply wrong answers (hallucinations). Always make sure to consider your choices carefully, even when Gemini is recommending something.

Let's go with Artifact Registry. Ask Gemini Cloud Assist how to create a docker registry in Artifact Registry named cooking-images.

איך אפשר להשתמש ב-gcloud כדי ליצור מאגר Docker ב-Artifact Registry?

9. Now ask Gemini how you could use Cloud Build to build a new image named `recipe-web-app` from the Dockerfile in the current folder.

איך אפשר להשתמש ב-gcloud כדי ליצור שירות חדש ב-Cloud Run בשם recipe-web-app מתוך אימג' באותו שם ממאגר Artifact Registry שיצרנו עכשיו?

10. To save you a little time, I've created a script that will create the Artifact Registry repo (if needed), use Cloud Build to build and push the image to the repo, and finally to deploy the application to Cloud Run. In your code editor use the **Explorer** view to open `build.sh` and explore the file.
11. Gemini can operate via the chat window, but it can also work directly in your code file using comments, like we used in the Data Wrangling notebook, and it also may be invoked using Control+i on Windows or Command+i on Mac. Click somewhere in the build.sh script file, activate Gemini using the appropriate Command+i / Control+i command.

<img src="img/61ac2c9a245a3695.png" alt="61ac2c9a245a3695.png"  width="624.00" />

12. At the prompt enter the below. Examine and **Accept** the change.

צריך להוסיף תגובה לקובץ הנוכחי.

How cool is that?! How many times have you had to work with someone elses code, only to have to waste time gaining a base understanding of their commentless work before you can even start making your changes. Gemini to the rescue!

13. Let's build and deploy our application. In the terminal window execute the `build.sh` file.

‪. build.sh

14. If you watch the build process, first it will build the Artifact Registry docker repo. Then, it uses Cloud Build to create the container image from the Dockerfile in the local folder (since we didn't supply a `cloudbuild.yaml`). Lastly, the docker image will be deployed into a new Cloud Run service. At the end of the script you'll get a Cloud Run test URL to use.

Open the returned link in a new tab of your browser. Take a moment and explore the application's structure and pages. Nice, now we need a hook in our generative AI functionality.


## Task 7: Connect the Cooking Advice page to our cookbook-search Agent Builder app



We have the framework for the web application running, but we need to connect the two work pages to our two Vertex AI Agent Builder search apps. Let's start with Cooking Advice.

1. In the Google Cloud console use search to navigate to **Chat** in Vertex AI.
2. In the right hand settings page pane set the model to **gemini-1.5-flash-002**. Slide the output token limit up to the max so the model can return longer answers if needed. Open the **Safety Filter Settings**. Set Hate speech, Sexually explicit content, and Harassment content to **Block some**. Set Dangerous content to **Block few** and **Save**. We're setting Dangerous Content a bit lower because talking about knives and cutting can be misinterpreted by Gemini as violence.
3. Slide on the toggle to enable **Grounding** then click **Customize**. Set the grounding source to **Vertex AI search** and for the datastore path use the following. Change YOUR_PROJECT_ID to the project ID found up near the End Lab button in these instructions, then **Save** the grounding settings

projects/YOUR_PROJECT_ID/locations/global/collections/default_collection/dataStores/old-cookbooks-id

**Note:** If you get an error then you either didn't change the project ID to your actual project ID, or you may have missed the step where you changed the old-cookbooks Agent Builder Data Store ID. Check your Agent Builder &gt; Data Stores &gt; old-cookbooks for its actual Data store ID.

4. Test a couple of chat messages. Perhaps start with the below. Try a few others if you like.

איך אפשר לדעת אם עגבנייה בשלה?

5. The model works, now let's experiment with the code. Click **Clear Conversation** so our conversations don't become part of the code then click **Get Code**.

<img src="img/dce8ad7ee006cca1.png" alt="dce8ad7ee006cca1.png"  width="624.00" />

6. At the top of the code window, press Open Notebook so we can experiment and perfect the code in Colab Enterprise before integrating it into our app.
7. Take a few minutes to familiarize yourself with the code. Let's make a couple of changes to adapt it to what we want. Before we start, run the first code cell to connect to the compute and install the AI Platform SDK. After the block runs you will be prompted to restart the session. Go ahead and do that.
8. Move to the code we pulled out of Vertex AI Studio. Change the name of the method *multiturn_generate_content* to `start_chat_session`.
9. Scroll to the `model = GenerativeModel(` method call. The existing code defines the `generation_config` and `safety_settings` but doesn't actually use them. Modify the creation of the `GenerativeModel` so it resembles:

‪model = GenerativeModel( "gemini-1.5-flash-002", tools=tools, generation_config=generation_config, safety_settings=safety_settings, )

10. Lastly, add a final line to the method, just below `chat = model.start_chat()`, so the function returns the `chat` object. The finished function should look like the below.

**Note:** DO NOT COPY this code into your notebook. It is simply here as a sanity check.

def start_chat_session(): vertexai.init(project="qwiklabs-gcp-02-9a7298ceaaec", location="us-central1") tools = [ Tool.from_retrieval( retrieval=grounding.Retrieval( source=grounding.VertexAISearch(datastore="projects/qwiklabs-gcp-02-9a7298ceaaec/locations/global/collections/default_collection/dataStores/old-cookbooks-id"), ) ), ] model = GenerativeModel( "gemini-1.5-flash-002", tools=tools, generation_config=generation_config, safety_settings=safety_settings, ) chat = model.start_chat() return chat

11. Scroll to the bottom of the code cell and change the final line calling the old function so it calls the new function name and stores the returned object in a variable `chat`. Once you are satisfied with your changes, run the cell.

chat = start_chat_session()

12. Create a new code cell and add the comment `# Use chat to invoke Gemini and print out the response`. Move to the next line and type resp and Gemini should auto complete the block for you. Update the prompt to `How can I tell if a tomato is ripe?`. Run the cell

response = chat.send_message("How can I tell if a tomato is ripe?") print(response)

13. That's the response alright, but the part we really want is that nested text field. Modify the codeblock to print just that section, like:

response = chat.send_message("How can I tell if a tomato is ripe?") print(response.candidates[0].content.parts[0].text)

14. Good, now that we have working chat code, let's integrate it into our web application. Copy all the contents of the code cell that creates the `start_chat_session` function (we won't need the test cell). If you click into the cell you can click the triple dot menu in the upper right corner and copy from there

<img src="img/17bf8d947393d4b.png" alt="17bf8d947393d4b.png"  width="326.00" />

15. Switch to your Cloud Workstation editor and open pages\Cooking_Advice.py for editing.
16. Locate the comment:

צריך להוסיף את הקוד שהעתקתם מהמחברת מתחת להודעה הזו

17. Paste your copied code just below the above comment. Nice, now we have the section which drives the chat engine via a grounded call to Gemini. Now let's integrate it into Streamlit.
18. Locate section of commented code directly below the comment:

זה הקוד להגדרת משתני הסשן

צריך לבטל את ההערה של הבלוק הזה כשמקבלים הוראה לעשות זאת

19. Uncomment this section of code (Up till the next `Setup done, let's build the page UI` section) and explore it. It creates or retrieves the chat and history session variables.
20. Next, we need to integrate the history and chat functionality into the UI. Scroll in the code until you locate the below comment.

זה הקוד ליצירת ממשק הצ'אט

כשמתבקשים, מבטלים את ההערה בקוד שלמטה

21. Uncomment the rest of the code below the comment and take a moment to explore it. If you like, highlight it and get Gemini to explain its functionality.
22. Excellent, now let's build the application and deploy it. When the URL comes back, launch the application and give the Cooking Advisor page a try. Perhaps ask it about ripe tomatoes, or the bot knows a good way to prepare brussels sprouts.

‪. build.sh

How cool is that! Your own personal AI cooking advisor :-)


## Task 8: (Optional) Connect the Recipe Search page to the recipe-search Agent Builder app



When we connected the Cooking Advice page to its grounded source, we did so using the Gemini API directly. For Recipe Search, let's connect to the Vertex AI Agent Builder search app directly.

1. In your Cloud Workstation editor, open the `pages/Recipe_Search.py` page for editing. Investigate the structure of the page.
2. Towards the top of the file, set your project ID.
3. Examine the `search_sample` function. This code more or less comes directly from the Discovery Engine documentation  [here](https://cloud.google.com/generative-ai-app-builder/docs/preview-search-results#genappbuilder_search-python). You can find a working copy in this notebook  [here](https://github.com/GoogleCloudPlatform/generative-ai/blob/main/search/create_datastore_and_search.ipynb).
4. The only change I made was to return the `response.results` instead of just the results. Without this, the return type is an object designed to page through results, and that's something we don't need for our basic application.
5. Scroll to the very end of the file and uncomment the entire section below `Here are the first 5 recipes I found`.
6. Highlight the whole section you just uncommented and open Gemini Code chat. Ask, `Explain the highlighted code`. If you don't have something selected, Gemini can explain the whole file. If you highlight a section and ask Gemini to explain, or comment, or improve it, Gemini will.

Take a moment and read through the explanation. For what it's worth, using a Colab Enterprise notebook is a great way to explore the Gemini APIs before you integrate them into your application. It's especially helpful at exploring some of the newer APIs which may not be documented as well as they could be.
7. At your editor terminal window, run `build.sh` to deploy the final application. Wait until the new version is deployed before moving to the next step.


## Task 9: (Optional) Explore the final application



Take a few minutes to explore the final application.

1. In the Google Cloud console, use search to navigate to **Cloud Run**, then click into your **recipe-web-app**.
2. Locate the application test URL (towards the top) and open it in a new browser tab.
3. The application home page should appear. Note the basic layout and navigation provided by Streamlit, with the python files from the `pages` folder displayed as navigational choices, and the `Home.py` loaded as the home page. Navigate to the **Cooking Advice** page.
4. After a few moments the chat interface will appear. Again, note the nice core layout provided by Streamlit.
5. Try a few cooking related questions and see how the bot functions. Something like:

יש לך טיפים להכנת ברוקולי?

רוצה מתכון קלאסי למרק עוף?

תספר לי על מרנג.

6. Now let's find a recipe or two. Navigate to the Recipe Search page and try a few searches. Something like:

צ'ילי קון קרנה

צ'ילי, תירס, אורז

פאי מרנג לימון

קינוח שמכיל תותים

## Congratulations!



You have created an application leveraging Vertex AI Agent Builder applications. Along the way you've explored Gemini Cloud Assist, Gemini Code Assist, and the natural language to SQL features of BigQuery's Data Canvas. Fantastic job!