Building Applications in the AI Era

1. نظرة عامة

في هذا البرنامج التدريبي، ستستخدم منتجات الذكاء الاصطناعي التوليدي من Google لإنشاء بنية أساسية في Google Cloud بمساعدة Gemini Cloud Assist، وستستعلم عن بيانات BigQuery باستخدام اللغة الطبيعية في ميزات SQL في Data Canvas، وستكتب الرموز البرمجية في دفاتر ملاحظات Jupyter في Colab Enterprise وفي Eclipse Theia (Visual Studio Code) بمساعدة Gemini Code Assist، وستدمج ميزات البحث والدردشة المستندة إلى الذكاء الاصطناعي والمستندة إلى Cloud Storage ومصادر BigQuery الأساسية في Vertex AI Agent Builder.

هدفنا هو إنشاء موقع إلكتروني للوصفات والطبخ باسم AI Recipe Haven. سيتم إنشاء الموقع الإلكتروني باستخدام Python وStreamlit وسيتضمّن صفحتَين رئيسيتين. سيستضيف Cooking Advice برنامجًا محادثيًا سننشئه باستخدام Gemini وVertex AI Agent Builder، وسيقدّم البرنامج نصائح حول الطبخ ويجيب عن الأسئلة المتعلّقة به، وذلك استنادًا إلى مجموعة من كتب الطبخ. سيكون "بحث الوصفات" محرّك بحث يغذّيه Gemini، وسيستند هذه المرة إلى قاعدة بيانات الوصفات في BigQuery.

إذا واجهت مشكلة في أيّ من الرموز البرمجية في هذا التمرين، يمكنك العثور على حلول لجميع ملفات الرموز البرمجية في مستودع GitHub الخاص بالتمرين على فرع solution.

الأهداف

في هذه الميزة الاختبارية، ستتعرّف على كيفية تنفيذ المهام التالية:

  • تفعيل ميزة "مساعِد السحابة الإلكترونية" في Gemini واستخدامها
  • إنشاء تطبيق بحث في Vertex AI Agent Builder لمحادثة بوت تقديم النصائح حول الطهي
  • تحميل البيانات وتنظيفها في دفتر ملاحظات Colab Enterprise، بمساعدة Gemini Code Assist
  • إنشاء تطبيق بحث في Vertex AI Agent Builder لتطبيق إنشاء الوصفات
  • تحديد إطار تطبيق الويب الأساسي المكتوب بلغة Python وStreamlit، مع الاستفادة من بعض ميزات Gemini
  • نشر تطبيق الويب على Cloud Run
  • ربط صفحة "نصائح الطبخ" بتطبيق "أداة إنشاء موظّفي الدعم" الذي يبحث في كتب الطبخ
  • (اختياري) ربط صفحة "بحث الوصفات" بتطبيق "أداة إنشاء موظّفي الدعم" المخصّص للبحث عن الوصفات
  • (اختياري) استكشاف الطلب النهائي

2. الإعداد والمتطلبات

قبل النقر على زر "بدء الدرس التطبيقي"

اطّلِع على هذه التعليمات. تكون الميزات الاختبارية محدودة الوقت ولا يمكنك إيقافها مؤقتًا. يعرض الموقّت، الذي يبدأ عند النقر على "بدء الدرس التطبيقي"، المدة التي ستتوفّر لك فيها موارد Google Cloud.

يتيح لك هذا الدرس التطبيقي على منصة Qwiklabs تنفيذ الأنشطة العملية بنفسك في بيئة سحابة حقيقية، وليس في بيئة محاكاة أو بيئة تجريبية. ويتم ذلك من خلال منحك بيانات اعتماد جديدة مؤقتة تستخدمها لتسجيل الدخول إلى Google Cloud والوصول إليها طوال مدة البرنامج التدريبي.

ما تحتاج إليه

لإكمال هذا الدرس التطبيقي، ستحتاج إلى ما يلي:

  • الوصول إلى متصفّح إنترنت قياسي (يوصى باستخدام متصفّح Chrome).
  • حان وقت إكمال الدرس التطبيقي.

ملاحظة: إذا كان لديك حساب أو مشروع شخصي على Google Cloud، لا تستخدِمه في هذا المختبر.

ملاحظة: إذا كنت تستخدم جهاز Pixelbook، افتح نافذة تصفّح متخفٍ لتنفيذ هذا البرنامج التعليمي.

كيفية بدء المختبر وتسجيل الدخول إلى Google Cloud Console

  1. انقر على زر "بدء التجربة". إذا كنت بحاجة إلى الدفع مقابل استخدام المختبر، ستظهر لك نافذة منبثقة لاختيار طريقة الدفع. على يمين الصفحة، تظهر لوحة تمّت تعبئتها ببيانات الاعتماد المؤقتة التي يجب استخدامها في هذا الدرس العملي.

52e0878388c0d9ed.png

  1. انسخ اسم المستخدم، ثم انقر على "فتح وحدة تحكّم Google". ينشئ هذا الدرس التطبيقي الموارد، ثم يفتح علامة تبويب أخرى تعرض صفحة "تسجيل الدخول".

2a4b7165afebf5ab.png

ملاحظة: افتح علامات التبويب في نوافذ منفصلة جنبًا إلى جنب.

إذا ظهرت لك صفحة "اختيار حساب"، انقر على "استخدام حساب آخر".

6463aa9b492a3b60.png

  1. في صفحة تسجيل الدخول، الصِق اسم المستخدم الذي نسخته من لوحة Connection Details (تفاصيل الاتصال). بعد ذلك، انسخ كلمة المرور والصقها.

ملاحظة مهمة: يجب استخدام بيانات الاعتماد من لوحة "تفاصيل الاتصال". لا تستخدِم بيانات اعتمادك على Qwiklabs. إذا كان لديك حساب على Google Cloud، لا تستخدِمه في هذا البرنامج التدريبي (لتجنُّب تحمُّل رسوم). 4. انتقِل إلى الصفحات اللاحقة:

  1. اقبل الأحكام والشروط.
  2. لا تُضِف خيارات استرداد الحساب أو المصادقة الثنائية (لأنّ هذا الحساب مؤقت).
  3. لا تشترك في الفترات التجريبية المجانية.

بعد بضع لحظات، ستفتح Cloud Console في علامة التبويب هذه.

ملاحظة: يمكنك عرض القائمة التي تتضمّن قائمة بمنتجات Google Cloud وخدماتها من خلال النقر على قائمة التنقّل في أعلى يمين الصفحة.

bbdc8ea800bf0adc.png

3- المهمة 0 التحقّق من مجموعة محطات العمل

في جزء لاحق من هذا الدرس التطبيقي، ستستخدم محطة عمل Google Cloud Workstation لتنفيذ بعض أعمال التطوير. من المفترض أن تكون عملية بدء هذا المختبر قد بدأت في إنشاء مجموعة محطات عملك. قبل المتابعة، لنتأكّد من أنّ عملية إنشاء المجموعة قيد التنفيذ.

  1. في Google Cloud Console، استخدِم مربّع البحث للانتقال إلى Cloud Workstations.
  2. استخدِم قائمة التنقّل اليمنى لعرض إدارة المجموعات.
  3. إذا كانت لديك مجموعة في مرحلة التعديل، هذا يعني أنّه يمكنك الانتقال إلى المهمة 1. إذا لم تظهر لك أي مجموعات في أيّ حالة، أعِد تحميل الصفحة. إذا لم تظهر لك مجموعة قيد التحديث (إنشاء)، يمكنك إنهاء الدرس باستخدام الزر في أعلى يمين هذه التعليمات وإعادة تشغيل الدرس.

4. المهمة رقم 1 تفعيل ميزة "مساعِد السحابة الإلكترونية" في Gemini واستخدامها

في هذه المهمة، سنفعّل ميزة "مساعِد السحابة الإلكترونية" في Gemini ونستخدمها. أثناء العمل في Google Cloud Console، يمكن أن تقدّم لك ميزة Gemini Cloud Assist نصائح وتساعدك في إنشاء البنية الأساسية في Google Cloud وضبطها ومراقبتها، ويمكنها أيضًا اقتراح أوامر gcloud وكتابة نصوص Terraform البرمجية.

  1. لتفعيل Cloud Assist لاستخدامها، انقر على مربّع البحث في أعلى واجهة مستخدم Cloud Console واختَر طلب المساعدة من Gemini (أو قد تظهر العبارة طلب المساعدة من Gemini في Cloud Console).
  2. انتقِل إلى قسم "واجهة برمجة التطبيقات المطلوبة" في الصفحة وفعِّل Gemini for Google Cloud API.
  3. إذا لم تظهر لك واجهة المحادثة على الفور، انقر على بدء المحادثة. ابدأ بطلب من Gemini شرح بعض مزايا استخدام "محطات عمل السحابة الإلكترونية". يُرجى تخصيص بضع دقائق لاستكشاف الردّ الذي تم إنشاؤه.
  4. بعد ذلك، اسأل عن مزايا "أداة إنشاء موظّفي الدعم" وكيفية مساعدتها في وضع أسس الردود التوليدية.
  5. أخيرًا، لنلقِ نظرة على مقارنة. في نافذة محادثة Gemini ضمن Google Cloud Console، اطرح السؤال التالي:
What are the major steps to creating a search app grounded in a
GCS data source using Vertex AI Agent builder?
  1. الآن، في نافذة التصفّح العادية، انتقِل إلى الموقع الإلكتروني العلني لخدمة Gemini هنا، وسجِّل الدخول إذا لزم الأمر، واطرح السؤال نفسه. هل الردود متطابقة أو متشابهة على الأقل؟ ما هي الخطوات المحدّدة؟ هل هناك أيّ اختلاف ملحوظ بينهما؟ بغض النظر عن ذلك، يُرجى أخذ الردود في الاعتبار أثناء تنفيذ الخطوات التالية.

ملاحظة: إذا حاولت تنفيذ الخطوة أعلاه باستخدام حسابك المؤقت على Qwiklabs، سيتم حظرك. إذا تم حظر حسابك على العمل أيضًا لأنّ مؤسستك لا تسمح باستخدام تطبيق Gemini على الويب، ما عليك سوى تخطّي هذه الخطوة والمتابعة. ولن يؤثّر ذلك في قدرتك على إكمال هذا التمرين.

5- المهمة رقم 2 إنشاء تطبيق بحث في Vertex AI Agent Builder لمحادثة بوت تقديم النصائح حول الطهي

سيتضمّن الموقع الإلكتروني الذي ننشئه صفحة نصائح للطهي تحتوي على محادثة آلية مصمّمة لمساعدة المستخدمين في العثور على إجابات عن الأسئلة المتعلّقة بالطبخ. وسيستند هذا التطبيق إلى Gemini، وسيستند إلى مصدر يحتوي على 70 كتاب طبخ متاحًا للجميع. ستكون كتب الطبخ بمثابة مصدر المعلومات الذي يستخدمه Gemini عند الإجابة عن الأسئلة.

  1. استخدِم مربّع البحث في Cloud Console للانتقال إلى Vertex AI. من لوحة البيانات، انقر على تفعيل جميع واجهات برمجة التطبيقات المقترَحة. إذا ظهرت لك نافذة منبثقة تفيد بأنّ واجهة برمجة التطبيقات Vertex AI API نفسها بحاجة إلى التفعيل، يُرجى تفعيل هذه الواجهة أيضًا.
  2. استخدِم ميزة البحث للانتقال إلى Agent Builder ثم متابعة وتفعيل واجهة برمجة التطبيقات.
  3. كما اقترحت "جيميني" في طلبنا السابق للحصول على النصائح، يبدأ إنشاء تطبيق بحث في "أداة إنشاء موظّفي الدعم" من خلال إنشاء مصدر بيانات موثوق. عندما يبحث المستخدم، يفهم Gemini السؤال وكيفية إنشاء ردود ذكية، ولكنه سيبحث عن المصدر الموثوق للمعلومات المستخدَمة في هذا الردّ، بدلاً من الاعتماد على معلوماته الأساسية.

من القائمة اليمنى، انتقِل إلى "مساحات تخزين البيانات" وانقر على "إنشاء مساحة تخزين بيانات". 4. إنّ كتب الطبخ المتاحة للجميع التي نستخدمها لإنشاء صفحة نصائح الطبخ متوفّرة حاليًا في حزمة Cloud Storage في مشروع خارجي. اختَر نوع مصدر "مساحة التخزين في السحابة الإلكترونية". 5- راجِع الخيارات التلقائية ذات الصلة بنوع المعلومات التي نستوردها، ولكن لا تغيّرها. اترك نوع الاستيراد مضبوطًا على "مجلد"، واستخدم labs.roitraining.com/labs/old-cookbooks لمسار الحزمة، ثم انقر على متابعة. 6- أدخِل اسمًا لمستودع البيانات: old-cookbooks. عدِّل المعرّف وغيِّره إلى old-cookbooks-id وأنشئ مستودع البيانات.

يتيح Vertex AI Agent Builder استخدام عدة أنواع من التطبيقات، ويعمل "مخزّن البيانات" كمصدر للحقائق لكل تطبيق. تطبيقات البحث جيدة للاستخدام العام والبحث. تطبيقات Chat مخصّصة للعمليات التوليدية في تطبيقات chatbot/voicebot المستندة إلى Dataflow. تساعد تطبيقات الاقتراحات في إنشاء محرّكات اقتراحات أفضل. وتطبيقات موظّفي الدعم مخصّصة لإنشاء موظّفي دعم مستندين إلى الذكاء الاصطناعي التوليدي. في النهاية، من المحتمل أن يكون "مساعد Google" هو الخيار الأنسب لنا في ما نريد تنفيذه، ولكن بما أنّ المنتج قيد المعاينة حاليًا، سنلتزم بنوع "تطبيق بحث". 7- استخدِم القائمة على يمين الصفحة للانتقال إلى التطبيقات، ثم انقر على إنشاء تطبيق. 8. اختَر نوع تطبيق "بحث Google". راجِع الخيارات المختلفة بدون تغييرها. أدخِل اسمًا للتطبيق: cookbook-search. عدِّل رقم تعريف التطبيق واضبطه على cookbook-search-id. اضبط الشركة على Google وانقر على متابعة. 9. تحقّق من "مستودع البيانات" old-cookbooks الذي أنشأته قبل بضع خطوات وأنشئ تطبيق البحث.

إذا اطّلعت على علامة التبويب النشاط، من المرجّح أن تلاحظ أنّه لا يزال يتم استيراد كتب الطبخ وفهرستها. ستستغرق عملية فهرسة آلاف الصفحات في 70 كتاب طبخ قدّمناها إلى Agent Builder أكثر من 5 دقائق. أثناء عمل هذا الإجراء، لنحمِّل بعض بيانات قاعدة بيانات الوصفات ونُنظّفها لتطبيق "أداة إنشاء الوصفات".

6- المهمة رقم 3 تحميل البيانات وتنظيفها في دفتر ملاحظات Colab Enterprise، بمساعدة Gemini Code Assist

توفّر Google Cloud طريقتَين رئيسيتين يمكنك من خلالهما العمل مع دفاتر ملاحظات Jupiter. سنستخدم أحدث منتج من Google، وهو Colab Enterprise. قد يكون بعضكم على دراية بمنتج Colab من Google، والذي يستخدمه الأفراد والمؤسسات بشكل شائع الذين يريدون تجربة دفاتر ملاحظات Jupiter في بيئة مجانية. ‫Colab Enterprise هو عرض تجاري من Google Cloud مدمج بالكامل مع بقية منتجات السحابة الإلكترونية من Google، ويستفيد بالكامل من إمكانات الأمان والامتثال لبيئة Google Cloud Platform.

من الميزات التي يوفّرها Colab Enterprise هي الدمج مع ميزة "مساعدة الرموز البرمجية" في Gemini من Google. يمكن استخدام ميزة "مساعدة في الترميز" في عدد من برامج تعديل الرموز البرمجية المختلفة، ويمكن أن تقدّم لك النصائح بالإضافة إلى اقتراحات مضمّنة سلسة أثناء كتابة الرموز البرمجية. سنستفيد من هذا المساعد التوليدي أثناء معالجة بيانات الوصفات.

  1. استخدِم ميزة البحث للانتقال إلى Colab Enterprise وإنشاء دفتر ملاحظات. إذا تلقّيت عرضًا لتجربة ميزات جديدة في Colab، يُرجى رفضه. للاستفادة من وقت التشغيل، أي طاقة الحوسبة التي تشغِّل الكمبيوتر المحمول، اضغط على ربط في أعلى يسار الكمبيوتر المحمول الجديد.

386577c713522b4d.png

  1. استخدِم قائمة الخيارات الإضافية الثلاث بجانب اسم دفتر الملاحظات الحالي في لوحة "ملفات Colab Enterprise" لإعادة تسميته Data Wrangling.

4cb787f255bac415.png

  1. أنشئ مربّع + نص جديدًا، واستخدِم السهم المتّجه للأعلى لنقله ليصبح الخلية الأولى في الصفحة.

6a08b3ccc9c2174b.png

  1. عدِّل مربّع النص وأدخِل ما يلي:
# Data Wrangling

Import the Pandas library
  1. في مجموعة الرموز البرمجية أسفل مجموعة النصوص التي أنشأتها للتو، ابدأ بكتابة imp ومن المفترض أن تقترح ميزة "مساعدة الرموز البرمجية" في Gemini بقية عملية الاستيراد باللون الرمادي. اضغط على مفتاح التبويب (Tab) لقبول الاقتراح.
import pandas as pd
  1. أسفل مربّع رمز الاستيراد، أنشئ مربّع نص آخر وأدخِل ما يلي:
Create a Pandas DataFrame from: gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv. View the first few records.
  1. أنشئ مجموعة أخرى من الرموز البرمجية وعدِّلها. مرة أخرى، ابدأ بكتابة df وراجِع الرمز الذي أنشأه Gemini Code Assistant. إذا ظهرت لك قائمة منسدلة للإكمال التلقائي للكلمات الرئيسية في Python فوق الاقتراح الذي تم إنشاؤه، اضغط على مفتاح Escape لعرض الرمز البرمجي المقترَح باللون الرمادي الفاتح. اضغط على مفتاح التبويب (Tab) مرة أخرى لقبول الاقتراح. إذا لم يتضمّن اقتراحك طلب دالة head()، أضِفه.
df = pd.read_csv('gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv')
df.head()
  1. انقر على خلية الرمز البرمجي الأولى التي استوردت Pandas إليها، واستخدِم قائمة الطلبات أو لوحة المفاتيح لتشغيل الخلية المحدّدة. على لوحة المفاتيح، يؤدي shift+enter إلى تنفيذ الخلية ونقل التركيز إلى الخلية التالية، وإنشاء خلية إذا لزم الأمر. انتظِر تنفيذ الخلية قبل الانتقال إلى الخطوة التالية.

ملاحظة: سيظهر لك [ ] على يمين الخلية عندما لا يتم تنفيذها. أثناء تنفيذ خلية، ستظهر لك صورة متحركة تدور. بعد اكتمال الخلية، سيظهر رقم، مثل [13]. 9. نفِّذ الخلية التي تحمِّل ملف CSV إلى إطار البيانات. انتظِر تحميل الملف وفحص الصفوف الخمسة الأولى من البيانات. هذه هي بيانات الوصفات التي سنحمّلها إلى BigQuery، وسنستخدمها في النهاية لإنشاء أداة إنشاء الوصفات. 10. أنشئ كتلة تعليمة برمجية جديدة وأدخِل التعليق أدناه. بعد كتابة التعليق، انتقِل إلى سطر الرمز البرمجي التالي ومن المفترض أن يظهر لك الاقتراح df.columns. اقبل التغييرات ثم نفِّذ الخلية.

# List the current DataFrame column names

لقد شرحنا للتو أنّ لديك خيارَين للحصول على مساعدة من ميزة "مساعدة رموز Gemini" في دفتر ملاحظات Jupyter: خلايا نصية فوق خلايا الرموز أو تعليقات داخل خلية الرمز نفسها. تعمل التعليقات داخل خلايا الرموز البرمجية بشكل جيد في دفاتر ملاحظات Jupyter، ولكن سيعمل هذا الأسلوب أيضًا في أي بيئة تطوير متكاملة أخرى تتيح ميزة "مساعدة ترميز Gemini" من Google.

  1. لننظّف الأعمدة قليلاً. أعِد تسمية العمود 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)
  1. أزِل عمودَي source وNER واستخدِم head() لعرض الصفوف القليلة الأولى. يمكنك مرة أخرى طلب المساعدة من فريق Gemini. شغِّل السطرَين الأخيرَين وراجِع النتائج.
# Remove the source and NER columns
df.drop(columns=['source', 'NER'], inplace=True)
df.head()
  1. لنطّلِع على عدد السجلات في مجموعة البيانات. مرة أخرى، ابدأ باختيار أسلوب الطلب ومعرفة ما إذا كان بإمكانك الاستعانة بـ Gemini لمساعدتك في إنشاء الرمز.
# Count the records in the DataFrame
df.shape # count() will also work
  1. 2.23 مليون سجلّ هو على الأرجح عدد وصفات أكثر من الوقت الذي يمكننا استخدامه. من المرجّح أن تستغرق عملية الفهرسة في "أداة إنشاء موظّفي الدعم" وقتًا طويلاً جدًا لتنفيذ التمرين اليوم. كحل وسط، لنأخذ عيّنة من 150,000 وصفة ونعمل على أساسها. استخدِم أسلوب الطلب > الرمز البرمجي لأخذ العيّنة وتخزينها في إطار بيانات جديد باسم dfs (s للحجم الصغير).
# Sample out 150,000 records into a DataFrame named dfs
dfs = df.sample(n=150000)
  1. أصبحت بيانات مصدر الوصفات جاهزة للتحميل إلى BigQuery. قبل التحميل، لننتقل إلى BigQuery ونُعدّ مجموعة بيانات لتضمين جدولنا. في Google Cloud Console، استخدِم مربّع البحث للانتقال إلى BigQuery. يمكنك النقر بزر الماوس الأيمن على BigQuery وفتحه في علامة تبويب جديدة في المتصفّح.
  2. افتح لوحة المحادثة المستندة إلى الذكاء الاصطناعي في Gemini باستخدام شعار Gemini في أعلى يسار Cloud Console إذا لم تكن ظاهرة. إذا طُلب منك تفعيل واجهة برمجة التطبيقات مرة أخرى، اضغط على تفعيل أو أعِد تحميل الصفحة. شغِّل الطلب: What is a dataset used for in BigQuery? بعد استكشاف الردّ، اسأل: How can I create a dataset named recipe_data using the Cloud Console? قارِن النتائج بالخطوات القليلة التالية.

3c38e5975c5c519.png

  1. في لوحة BigQuery Explorer (مستكشف BigQuery)، انقر على قائمة النقاط الثلاث عرض الإجراءات بجانب رقم تعريف مشروعك. بعد ذلك، اختَر إنشاء مجموعة بيانات.

e28c2fc55a04c694.png

  1. أدخِل مجموعة البيانات ورقم تعريف recipe_data. اترك نوع الموقع الجغرافي على الولايات المتحدة وإنشاء مجموعة بيانات. إذا ظهرت لك رسالة خطأ تفيد بأنّ مجموعة البيانات متوفّرة، ما عليك سوى الانتقال إلى الخطوة التالية.

بعد إنشاء مجموعة البيانات في BigQuery، لنعد إلى دفتر البيانات ونُجري عملية الإدراج. 19. ارجع إلى "دفتر ملاحظات معالجة البيانات" في Colab Enterprise. في خلية رمز جديدة، أنشئ متغيّرًا باسم project_id واستخدِمه لتخزين رقم تعريف مشروعك الحالي. ابحث في أعلى يمين هذه التعليمات، أسفل زر "إنهاء التجربة"، وستجد رقم تعريف المشروع الحالي. يمكنك أيضًا العثور عليه في الصفحة الرئيسية في Cloud Console. حدِّد القيمة في متغيّر project_id وشغِّل الخلية.

# Create a variable to hold the current project_id
project_id='YOUR_PROJECT_ID'
  1. استخدِم أسلوب الطلب > الرمز البرمجي لإنشاء مجموعة من الرموز البرمجية التي ستُدخِل إطار البيانات 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 Console تذكيرك بخطوات إنشاء تطبيق بحث على Agent Builder، أو يمكنك اتّباع الخطوات الواردة أدناه.

  1. استخدِم ميزة "البحث" للانتقال إلى أداة إنشاء موظّفي الدعم. افتح مستودعات البيانات وإنشاء مستودع بيانات. هذه المرة، اختَر نوع "متجر بيانات BigQuery".
  2. في خلية اختيار الجدول، اضغط على تصفّح وابحث عن recipes. انقر على زر الاختيار بجانب الجدول. إذا ظهرت لك وصفات من مشاريع qwiklabs-gcp-... أخرى، احرص على اختيار الوصفة التي تخصّك.

ملاحظة: إذا نقرت على recipes بدلاً من النقر على زر الاختيار بجانبه، سيتم فتح علامة تبويب جديدة في المتصفّح ونقلك إلى صفحة النظرة العامة على الجدول في BigQuery. ما عليك سوى إغلاق علامة التبويب في المتصفّح واختيار زر الاختيار في "أداة إنشاء موظّفي الدعم". 3- راجِع بقية الخيارات التلقائية، ولكن لا تغيِّرها، ثم انقر على متابعة. 4. في صفحة مراجعة المخطّط، راجِع الإعدادات التلقائية الأولية، ولكن لا تغيِّر أيّ شيء. متابعة 5. أدخِل اسمًا لمساحة التخزين recipe-data. عدِّل معرّف قاعدة البيانات واضبطه على recipe-data-id. أنشئ "مخزّن البيانات". 6- انتقِل إلى التطبيقات باستخدام قائمة التنقّل على يمين الصفحة وانقر على إنشاء تطبيق. اختَر تطبيق "بحث Google" مرة أخرى. أدخِل اسم "recipe-search" للتطبيق واضبط رقم التعريف على "recipe-search-id". اضبط اسم الشركة على Google وانقر على متابعة. 8. هذه المرة، تحقّق من مصادر بيانات recipe-data. أنشئ التطبيق.

سيستغرق فهرسة جدول قاعدة البيانات بعض الوقت. في هذه الأثناء، لنجرّب لوحة البيانات الجديدة في BigQuery ونرى ما إذا كان بإمكاننا العثور على وصفة أو طريقتَين مثيرتَين للاهتمام. 9. استخدِم مربّع البحث للانتقال إلى BigQuery. في أعلى BigQuery Studio، انقر على السهم المتّجه للأسفل بجانب علامة التبويب في أقصى يسار الصفحة واختَر لوحة البيانات. اضبط المنطقة على us-central1.

5d562cddb1717c32.png

  1. في مربّع البحث "لوحة البيانات"، ابحث عن recipes، ثم أضِف إلى اللوحة جدولك.
  2. سيتم تحميل تمثيل مرئي لجدول الوصفات في لوحة بيانات BigQuery. يمكنك استكشاف مخطّط الجدول ومعاينة البيانات في الجدول وفحص تفاصيل أخرى. أسفل تمثيل الجدول، انقر على طلب بحث.
  3. ستحمِّل اللوحة مربّع حوار طلب بحث BigQuery عاديًا تقريبًا مع إضافة واحدة: فوق نافذة طلب البحث، يتوفّر مربّع نص يمكنك استخدامه لطلب المساعدة من Gemini. لنرى ما إذا كان بإمكاننا العثور على بعض وصفات الكعك في عيّنتنا. شغِّل الطلب التالي (من خلال كتابة النص والضغط على مفتاح Enter/Return لبدء إنشاء لغة الاستعلام البنيوية):
Please select the title and ingredients for all the recipes with a title that contains the word cake.
  1. اطّلِع على طلب SQL الذي تم إنشاؤه. بعد الانتهاء، شغِّل الاستعلام.
  2. رائعة. يمكنك تجربة بعض الطلبات وطلبات البحث الأخرى قبل الانتقال إلى الخطوة التالية. عند إجراء التجربة، جرِّب طلبات أقل تحديدًا لمعرفة ما الذي ينجح وما الذي لا ينجح. على سبيل المثال، هذا الطلب:
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 المفتوح المصدر). أنشأ نص برمجي مبرمَج في هذا التمرين مجموعة "محطة عمل السحابة الإلكترونية" وضبطها نيابةً عنا، ولكن لا يزال علينا إنشاء "محطة عمل السحابة الإلكترونية" نفسها. إذا أردت الحصول على مزيد من المعلومات حول محطات عمل السحابة الإلكترونية وكيفية استخدامها، يمكنك التواصل مع فريق Gemini Cloud Assist.

  1. استخدِم ميزة البحث للانتقال إلى محطات عمل السحابة الإلكترونية، ثم إنشاء محطة عمل. أدخِل اسمًا لمحطة العمل dev-env واستخدِم الإعداد my-config. أنشئ محطة العمل.
  2. بعد بضع دقائق، ستظهر محطة العمل الجديدة في قائمة "محطات العمل". ابدأ dev-env وبعد تشغيله، اطلق بيئة التطوير.
  3. سيتم فتح محرِّر محطة العمل في علامة تبويب جديدة في المتصفّح، وبعد بضع لحظات، من المفترض أن تظهر لك واجهة Theia (Visual Studio Code) المألوفة. على يمين الواجهة، وسِّع علامة التبويب Source Control (تحكّم في المصدر) واضغط على Clone Repository (نسخ المستودع).

c03d05b42d28a518.png

  1. بالنسبة إلى عنوان URL الخاص بالمستودع، أدخِل https://github.com/haggman/recipe-app. انسخ مستودع البيانات إلى مجلد user، ثم افتح مستودع البيانات المنسوخ لتعديله.
  2. قبل استكشاف المجلد المُنشئ من النسخة الأصلية والبدء في العمل على تطبيق الويب، علينا تسجيل الدخول إلى Google Cloud باستخدام المكوّن الإضافي Cloud Code في المحرّر وتفعيل Gemini. لنفعل ذلك الآن. في أسفل يمين المحرِّر، انقر على Cloud Code - تسجيل الدخول. إذا لم يظهر الرابط، يُرجى الانتظار لمدة دقيقة ثم التحقّق مرة أخرى.

f4ebfbd96026c0d8.png

  1. ستعرض نافذة المحطة الطرفية عنوان URL طويلاً. افتح عنوان URL في المتصفّح واتّبِع الخطوات لمنح Cloud Code إذن الوصول إلى بيئة Google Cloud. تأكَّد من استخدام حسابك المؤقت student-... للتجربة وليس حسابك الشخصي على Google Cloud عند المصادقة. في مربّع الحوار النهائي، انسخ رمز التحقّق والصقه مرة أخرى في نافذة المحطة الطرفية في انتظار الردّ في علامة تبويب متصفّح Cloud Workstation.
  2. بعد بضع لحظات، سيتغيّر رابط Cloud Code في أسفل يمين المحرِّر إلى Cloud Code - لا يتوفّر مشروع. انقر على الرابط الجديد لاختيار مشروع. من المفترض أن تفتح لوحة الأوامر في أعلى المحرِّر. انقر على اختيار مشروع Google Cloud واختَر مشروعك qwiklabs-gcp-.... بعد لحظات قليلة، سيتم تعديل الرابط في أسفل يمين المحرِّر لعرض رقم تعريف مشروعك. يشير ذلك إلى أنّه تم إرفاق Cloud Code بمشروعك الجاري العمل عليه بنجاح.
  3. بعد ربط Cloud Code بمشروعك، يمكنك الآن تفعيل ميزة Gemini Code Assist. في أسفل يسار واجهة المحرّر، انقر على شعار Gemini المشطوب. ستفتح لوحة Gemini Chat على يمين المحرِّر. انقر على اختيار مشروع Google Cloud. عند فتح لوحة الأوامر، اختَر مشروع qwiklabs-gcp-.... إذا اتّبعت الخطوات بشكل صحيح (ولم تجرِ Google أي تغييرات)، من المفترض أن تظهر لك الآن نافذة محادثة نشطة على Gemini.

70e4e06ed6565329.png

  1. أخيرًا، لنضبط نافذة المحطة الطرفية للمحرِّر بالطريقة نفسها. استخدِم قائمة الهامبرغر > عرض > المحطة الطرفية لفتح نافذة المحطة الطرفية. نفِّذ gcloud init. استخدِم الرابط مرة أخرى للسماح لمحطة Cloud Shell بالعمل مع مشروعك على qwiklabs-gcp-.... اختَر الخيار الرقمي لمشروع qwiklabs-gcp-... عندما يُطلب منك ذلك.
  2. رائع، بعد الانتهاء من ضبط إعدادات المحطة الطرفية ومحادثة Gemini وCloud Code، افتح علامة التبويب Explorer (المستكشف) واستغرِق بضع دقائق لاستكشاف الملفات في المشروع الحالي.

3b2dc3820ed643e2.png

  1. في "المستكشف"، افتح ملف requirements.txt لتعديله. انتقِل إلى لوحة المحادثة في Gemini واسأل:
From the dependencies specified in the requirements.txt file, what type of application are we building?
  1. نحن بصدد إنشاء تطبيق ويب تفاعلي باستخدام 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

هل حصلت على إجابة أفضل؟

  1. لنلقِ نظرة على بعض المعلومات الإضافية حول Streamlit:
What can you tell me about Streamlit?

حسنًا، يبدو أنّ Gemini تقدّم لنا نظرة عامة جيدة تتضمّن الإيجابيات والسلبيات.

  1. إذا أردت استكشاف السلبيات، يمكنك طرح الأسئلة التالية:
What are the major downsides or shortcomings?

يُرجى العِلم أنّه لم يكن علينا قول "من Streamlit" لأنّ Gemini Chat هي محادثة (محادثة متعددة المقاطع). يعرف Gemini ما نتحدث عنه لأنّنا في جلسة محادثة. إذا أردت في أي وقت محو سجلّ محادثات Gemini، استخدِم رمز المهملات في أعلى نافذة محادثة Gemini code.

9. المهمة 6: نشر تطبيق الويب في Cloud Run

رائع، تم وضع بنية التطبيق الأساسية، ولكن هل ستعمل كل العناصر على ما يرام؟ والأفضل من ذلك، أين يجب أن نستضيفه في Google Cloud؟

  1. في نافذة محادثة Gemini، اسأل:
If I containerize this application, what compute technologies
in Google Cloud would be best for hosting it?
  1. إذا لم تكن تعمل في بيئة تطوير البرامج المتكاملة، يمكنك أيضًا استخدام Google Cloud Assist. افتح Google Cloud Console، ثم افتح Gemini Cloud Assist واسأل:
If I have a containerized web application, where would be the
best place to run it in Google Cloud?

هل كانت مجموعتَا النصائح متطابقتَين؟ هل توافق على أي من النصائح أم لا؟ تذكَّر أنّ Gemini هو مساعد الذكاء الاصطناعي التوليدي، ومثل أي مساعد بشري، قد لا تتفق دائمًا مع كل ما يقوله. ومع ذلك، يمكن أن يساعدك هذا المساعد دائمًا أثناء عملك في Google Cloud وفي محرِّر الرموز البرمجية على تحسين كفاءتك بشكل كبير.

  1. بالنسبة إلى تطبيق ويب مُحاوي حاويات قصير العمر لا يتضمّن حالة، سيكون Cloud Run خيارًا رائعًا. في نافذة محادثة Gemini ضمن أداة تعديل الرموز البرمجية، جرِّب الطلب التالي:
What steps would be required to run this application in
Cloud Run?
  1. يبدو أنّ أول ما علينا فعله هو إنشاء ملف Dockerfile. باستخدام المحرِّر، أنشِئ ملفًا باسم Dockerfile في جذر مجلد المشروع. تأكَّد من عدم وضعه عن طريق الخطأ في مجلد الصفحات. افتح الملف لتعديله.
  2. لنستخدم لوحة المحادثة الجانبية في Gemini لإنشاء 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:

ما هو أفضل مكان في Google Cloud لتخزين صور Docker؟

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("كيف يمكنني معرفة ما إذا كانت الطماطم نضجة؟") 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!