أنشِئ تطبيقات ويب مستندة إلى الذكاء الاصطناعي (AI) باستخدام إضافات Firebase لـ Gemini API

1. قبل البدء

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

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية إنشاء تطبيق ويب مستند إلى الذكاء الاصطناعي يقدّم تجارب مستخدم جذابة باستخدام "إضافات Firebase".

المتطلبات الأساسية

• معرفة Node.js وNext.js وTypeScript

أهداف الدورة التعليمية

• كيفية استخدام إضافات Firebase لواجهة Gemini API لمعالجة اللغة
• كيفية استخدام "وظائف السحابة الإلكترونية لبرنامج Firebase" لإنشاء سياق معزّز للنموذج اللغوي
• كيفية استخدام JavaScript للوصول إلى الناتج الذي تنتجه "إضافات Firebase"

المتطلبات

• متصفّح من اختيارك، مثل Google Chrome
• بيئة تطوير تتضمّن أداة تعديل الرموز البرمجية ونافذة طرفية
• حساب Google لإنشاء مشروعك على Firebase وإدارته

2. مراجعة تطبيق الويب وخدمات Firebase والإضافات

في هذا القسم، ستراجع تطبيق الويب الذي ستنشئه باستخدام هذا الدرس العملي، كما ستتعرّف على خدمات Firebase وإضافات Firebase التي ستستخدمها.

تطبيق الويب

في هذا الدرس التطبيقي حول الترميز، ستنشئ تطبيق ويب باسم Friendly Conf.

قرّر فريق عمل المؤتمر الودّي استخدام الذكاء الاصطناعي لتقديم تجربة ممتعة ومخصّصة للمشاركين. يوفّر تطبيق المؤتمر المكتمل للمشاركين برنامج دردشة آليًا مستندًا إلى الذكاء الاصطناعي الحواري، ويعمل بواسطة نموذج ذكاء اصطناعي توليدي متعدد الوسائط (يُعرف أيضًا باسم نموذج لغوي كبير أو LLM)، ويمكنه الإجابة عن أسئلة حول مواضيع عامة، ومصمَّمة خصيصًا لجدول المؤتمر ومواضيعه. يتضمّن روبوت الدردشة سياقًا تاريخيًا ومعلومات حول التاريخ والوقت الحاليين ومواضيع جدول مؤتمر Friendly Conf، لذا يمكن أن تتضمّن ردوده كل هذا السياق.

خدمات Firebase

في هذا الدرس العملي، ستستخدم العديد من خدمات Firebase وميزاتها، وسيتم توفير معظم الرموز البرمجية الأولية لك. يحتوي الجدول التالي على الخدمات التي ستستخدمها وأسباب استخدامها.

إضافات Firebase

تشمل إضافات Firebase التي ستستخدمها في هذا الدرس العملي ما يلي:

• إنشاء روبوت دردشة باستخدام Gemini API
• المهام المتعدّدة الوسائط باستخدام Gemini API

تكون الإضافات مفيدة لأنّها تتفاعل مع الأحداث التي تحدث في مشروعك على Firebase. يستجيب كلا الامتدادين المستخدَمَين في هذا الدرس العملي عند إنشاء مستندات جديدة في مجموعات تم إعدادها مسبقًا في Cloud Firestore.

3- إعداد بيئة التطوير

التحقّق من إصدار Node.js

1. في نافذة الأوامر، تأكَّد من تثبيت الإصدار 20.0.0 أو إصدار أحدث من Node.js:

   node -v
   

2. إذا لم يكن لديك الإصدار 20.0.0 أو إصدار أحدث من Node.js، نزِّل أحدث إصدار يتطلّب دعمًا على المدى الطويل وثبِّته.

الحصول على رمز المصدر للدرس التطبيقي حول الترميز

إذا كان لديك حساب على GitHub:

1. أنشئ مستودعًا جديدًا باستخدام النموذج من github.com/FirebaseExtended/codelab-gemini-api-extensions
2. استنسِخ مستودع GitHub الخاص بالبرنامج التعليمي الذي أنشأته للتو:

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

إذا لم يكن git مثبّتًا أو كنت تفضّل عدم إنشاء مستودع جديد:

تنزيل مستودع GitHub كملف zip

مراجعة بنية المجلد

يتضمّن المجلد الجذر ملف README.md يوفّر طريقة سريعة لبدء تشغيل تطبيق الويب باستخدام تعليمات مبسطة. ومع ذلك، إذا كنت مبتدئًا، عليك إكمال هذا الدرس العملي (بدلاً من البدء السريع) لأنّه يتضمّن المجموعة الأكثر شمولاً من التعليمات.

إذا لم تكن متأكّدًا مما إذا كنت قد طبّقت الرمز بشكل صحيح كما هو موضّح في هذا الدرس العملي، يمكنك العثور على رمز الحلّ في فرع end git.

تثبيت Firebase CLI

1. تأكَّد من تثبيت واجهة سطر الأوامر (CLI) في Firebase وأنّ إصدارها هو 13.6 أو إصدار أحدث:

   firebase --version
   

2. إذا كان لديك واجهة سطر الأوامر (CLI) من Firebase مثبَّتة، ولكنّها ليست الإصدار 13.6 أو إصدارًا أحدث، يمكنك تحديثها باتّباع الخطوات التالية:

   npm update -g firebase-tools
   

3. إذا لم تكن أداة سطر الأوامر في Firebase مثبَّتة، ثبِّتها باتّباع الخطوات التالية:

   npm install -g firebase-tools
   

إذا تعذّر عليك تحديث أو تثبيت واجهة سطر الأوامر في Firebase بسبب أخطاء في الأذونات، يمكنك الاطّلاع على مستندات npm أو استخدام خيار تثبيت آخر.

تسجيل الدخول إلى Firebase

1. في نافذة المحطة الطرفية، انتقِل إلى المجلد codelab-gemini-api-extensions وسجِّل الدخول إلى Firebase:

   cd codelab-gemini-api-extensions
   firebase login
   

   إذا كان الجهاز الطرفي يشير إلى أنّك سجّلت الدخول إلى Firebase من قبل، يمكنك الانتقال إلى قسم إعداد مشروعك على Firebase في هذا الدرس العملي.
2. في نافذة الأوامر، أدخِل Y أو N حسب ما إذا كنت تريد أن يجمع Firebase البيانات. (يمكنك استخدام أيّ من الخيارَين في هذا الدرس التطبيقي حول الترميز)
3. في المتصفّح، اختَر حسابك على Google وانقر على السماح.

4. إعداد مشروعك على Firebase

في هذا القسم، عليك إعداد مشروع على Firebase وتسجيل تطبيق ويب على Firebase فيه. ستفعِّل أيضًا بعض خدمات Firebase التي يستخدمها تطبيق الويب النموذجي في وقت لاحق من هذا الدرس العملي.

يتم تنفيذ جميع الخطوات الواردة في هذا القسم في وحدة تحكّم Firebase.

إنشاء مشروع Firebase

1. سجِّل الدخول إلى وحدة تحكّم Firebase باستخدام حساب Google نفسه الذي استخدمته في الخطوة السابقة.
2. انقر على الزر لإنشاء مشروع جديد، ثم أدخِل اسم المشروع (على سبيل المثال، AI Extensions Codelab).
   
3. انقر على متابعة.
4. إذا طُلب منك ذلك، راجِع بنود Firebase واقبلها، ثم انقر على متابعة.
5. (اختياري) فعِّل ميزة "المساعدة المستندة إلى الذكاء الاصطناعي" في وحدة تحكّم Firebase (المعروفة باسم "Gemini في Firebase").
6. في هذا الدرس العملي، لا تحتاج إلى "إحصاءات Google"، لذا أوقِف خيار "إحصاءات Google".
7. انقر على إنشاء مشروع، وانتظِر إلى أن يتم توفير مشروعك، ثم انقر على متابعة.

ترقية خطة أسعار Firebase

لاستخدام "إضافات Firebase" (وخدمات السحابة الإلكترونية الأساسية) بالإضافة إلى "مساحة التخزين السحابي في Firebase"، يجب أن يكون مشروعك على Firebase ضمن خطة التسعير "الدفع حسب الاستخدام" (Blaze)، ما يعني أنّه مرتبط بحساب Cloud Billing.

• يتطلّب حساب الفوترة في Cloud طريقة دفع، مثل بطاقة الائتمان.
• إذا كنت حديث العهد باستخدام Firebase وGoogle Cloud، تحقَّق ممّا إذا كنت مؤهَّلاً للحصول على رصيد بقيمة 300 دولار أمريكي وحساب فوترة على Cloud في الفترة التجريبية المجانية.
• إذا كنت تجري هذا الدرس العملي المبرمَج كجزء من حدث، اسأل المنظِّم عمّا إذا كانت هناك أي أرصدة في السحابة الإلكترونية متاحة.

يُرجى العِلم أيضًا أنّه عند تفعيل الفوترة في مشروع Firebase، سيتم تحصيل رسوم منك مقابل الطلبات التي يرسلها الامتداد إلى Gemini API (بغض النظر عن مقدّم الخدمة الذي تختاره، سواء Google AI أو Vertex AI). مزيد من المعلومات حول أسعار Google AI وVertex AI

لترقية مشروعك إلى خطة Blaze، اتّبِع الخطوات التالية:

1. في "وحدة تحكّم Firebase"، اختَر ترقية خطتك.
2. اختَر خطة Blaze. اتّبِع التعليمات الظاهرة على الشاشة لربط حساب فوترة على Cloud بمشروعك.
   إذا احتجت إلى إنشاء حساب فوترة على Cloud كجزء من عملية الترقية هذه، قد تحتاج إلى الرجوع إلى مسار الترقية في وحدة تحكّم Firebase لإكمال عملية الترقية.

إضافة تطبيق ويب إلى مشروع Firebase

1. انتقِل إلى شاشة نظرة عامة على المشروع في مشروعك على Firebase، ثم انقر على الويب.
2. في مربّع النص اسم التطبيق، أدخِل اسمًا يسهل تذكّره للتطبيق، مثل My AI Extensions
3. انقر على تسجيل التطبيق > التالي > التالي > الانتقال إلى وحدة التحكّم.
   يمكنك تخطّي جميع الخطوات المتعلّقة بـ "الاستضافة" في مسار تطبيق الويب لأنّك ستعدّل إعدادات خدمة الاستضافة اختياريًا في وقت لاحق من هذا الدرس البرمجي.

رائع. لقد سجّلت الآن تطبيق ويب في مشروع Firebase الجديد.

إعداد خدمة "مصادقة Firebase"

1. انتقِل إلى المصادقة باستخدام جزء التنقّل الأيمن.
2. انقر على البدء.
3. في عمود موفّرو الهوية الإضافيون، انقر على Google > تفعيل.
4. في مربّع النص الاسم المعروض للجمهور للمشروع، أدخِل اسمًا مفيدًا، مثل My AI Extensions Codelab.
5. في قائمة عنوان البريد الإلكتروني المخصّص للدعم في المشروع، اختَر عنوان بريدك الإلكتروني.
6. انقر على حفظ.

إعداد Cloud Firestore

1. في اللوحة اليمنى من "وحدة تحكّم Firebase"، وسِّع إنشاء، ثم اختَر قاعدة بيانات Firestore.
2. انقر على إنشاء قاعدة بيانات.
3. اترك معرّف قاعدة البيانات مضبوطًا على (default).
4. اختَر موقعًا لقاعدة البيانات، ثم انقر على التالي.
   بالنسبة إلى تطبيق حقيقي، عليك اختيار موقع جغرافي قريب من المستخدمين.
5. انقر على البدء في وضع الاختبار. اقرأ بيان إخلاء المسؤولية عن قواعد الأمان.
   في وقت لاحق من هذا الدرس العملي، ستضيف قواعد الأمان لتأمين بياناتك. لا توزِّع تطبيقًا أو تعرضه بشكل علني بدون إضافة "قواعد الأمان" لقاعدة البيانات.
6. انقر على إنشاء.

إعداد "مساحة تخزين سحابية لـ Firebase"

1. في اللوحة اليمنى من وحدة تحكّم Firebase، وسِّع إنشاء، ثم اختَر مساحة التخزين.
2. انقر على البدء.
3. اختَر موقعًا جغرافيًا لحزمة Storage التلقائية.
   يمكن للحِزم في US-WEST1 وUS-CENTRAL1 وUS-EAST1 الاستفادة من الفئة"دائمًا مجانية" في Google Cloud Storage. تخضع الحِزم في جميع المواقع الجغرافية الأخرى لأسعار واستخدام Google Cloud Storage.
4. انقر على البدء في وضع الاختبار. اقرأ بيان إخلاء المسؤولية عن قواعد الأمان.
   في وقت لاحق من هذا الدرس العملي، ستضيف قواعد أمان لحماية بياناتك. لا توزّع تطبيقًا أو تعرضه للجميع بدون إضافة "قواعد الأمان" لحزمة Cloud Storage.
5. انقر على إنشاء.

في القسم التالي من هذا الدرس التطبيقي حول الترميز، ستثبّت وتضبط إعدادات إضافتَي Firebase اللتين ستستخدمهما في تطبيق الويب خلال هذا الدرس التطبيقي حول الترميز.

5- إعداد إضافة "إنشاء روبوت محادثة باستخدام Gemini API"

تثبيت إضافة "إنشاء روبوت محادثة باستخدام Gemini API"

1. انتقِل إلى الإضافة "إنشاء روبوت دردشة باستخدام Gemini API".
2. انقر على تثبيت في وحدة تحكّم Firebase.
3. اختَر مشروعك على Firebase، ثم انقر على التالي.
4. في قسم مراجعة واجهات برمجة التطبيقات المفعّلة والموارد التي تم إنشاؤها، انقر على تفعيل بجانب أي خدمات مقترَحة لك، ثم انقر على التالي.
5. بالنسبة إلى أي أذونات يتم اقتراحها عليك، انقر على منح، ثم انقر على التالي.
6. ضبط الإضافة:
   1. في قائمة مزوّد Gemini API، اختَر ما إذا كنت تريد استخدام Gemini API من Google AI أو Vertex AI. بالنسبة إلى المطوّرين الذين يستخدمون Firebase، ننصحهم باستخدام Vertex AI.
   2. في مربّع النص مسار مجموعة Firestore، أدخِل users/{uid}/messages.
      في الخطوات المستقبلية من هذا الدرس العملي، ستؤدي إضافة مستندات إلى هذه المجموعة إلى تفعيل الإضافة لطلب بيانات من Gemini API.
   3. في قائمة موقع "وظائف السحابة الإلكترونية"، اختَر الموقع الجغرافي المفضّل لديك (مثل Iowa (us-central1) أو الموقع الجغرافي الذي سبق أن حدّدته لقاعدة بيانات Firestore).
   4. اترك جميع القيم الأخرى على الإعداد التلقائي.
7. انقر على تثبيت الإضافة وانتظِر إلى أن يتم تثبيتها.

تجربة إضافة "إنشاء روبوت محادثة باستخدام Gemini API"

على الرغم من أنّ الهدف من هذا الدرس التطبيقي هو التفاعل مع إضافة "إنشاء روبوت محادثة باستخدام Gemini API" من خلال تطبيق ويب، من المفيد التعرّف على طريقة عمل الإضافة من خلال تجربتها أولاً في وحدة تحكّم Firebase.

يتم تشغيل الإضافة كلما تم إنشاء مستند Firestore ضمن المجموعة users/{uid}/discussion/{discussionId}/messages، ويمكنك إجراء ذلك في وحدة تحكّم Firebase.

1. في "وحدة تحكّم Firebase"، انتقِل إلى Firestore، ثم انقر على بدء عملية الجمع ضمن العمود الأول.
2. في مربّع النص رقم تعريف المجموعة، أدخِل users، ثم انقر على التالي.
3. في مربّع النص رقم تعريف المستند، انقر على رقم تعريف تلقائي، ثم انقر على حفظ.
4. في مجموعة users، انقر على بدء المجموعة.
5. في مربّع النص رقم تعريف المجموعة، أدخِل messages، ثم انقر على التالي.
   1. في مربّع النص معرّف المستند، انقر على المعرّف التلقائي.
   2. في مربّع النص الحقل، أدخِل prompt
   3. في مربّع النص القيمة، أدخِل Tell me 5 random fruits
6. انقر على حفظ وانتظر بضع ثوانٍ.

عندما أضفت هذا المستند، طلبت الإضافة من واجهة برمجة التطبيقات Gemini API تنفيذ إجراء. يتضمّن المستند الذي أضفته للتو إلى مجموعة messages الآن prompt الخاص بك، بالإضافة إلى response الخاص بالنموذج في طلب البحث.

فعِّل الإضافة مرة أخرى من خلال إضافة مستند آخر إلى المجموعة messages:

1. في مجموعة messages، انقر على إضافة مستند.
2. في مربّع النص معرّف المستند، انقر على المعرّف التلقائي.
3. في مربّع النص الحقل، أدخِل prompt
4. في مربّع النص القيمة، أدخِل And now, vegetables
5. انقر على حفظ وانتظر بضع ثوانٍ. يتضمّن المستند الذي أضفته للتو إلى مجموعة messages الآن response لطلب البحث.
   
   عند إنشاء هذا الردّ، استخدم نموذج Gemini الأساسي المعرفة السابقة من طلب البحث السابق.

6. إعداد تطبيق الويب

لتشغيل تطبيق الويب، عليك تنفيذ الأوامر في الوحدة الطرفية وإضافة الرمز البرمجي في محرّر الرموز البرمجية.

إعداد واجهة سطر الأوامر في Firebase للعمل مع مشروعك على Firebase

في الوحدة الطرفية، اطلب من واجهة سطر الأوامر استخدام مشروعك على Firebase من خلال تنفيذ الأمر التالي:

firebase use YOUR_PROJECT_ID

نشر "قواعد الأمان" في Firestore وCloud Storage

يتضمّن رمز قاعدة البيانات في هذا الدرس العملي مجموعة من "قواعد الأمان" في Firestore و"قواعد الأمان" في Cloud Storage مكتوبة لك. بعد نشر "قواعد الأمان" هذه، ستتم حماية خدمات Firebase في مشروعك على Firebase بشكل أفضل من إساءة الاستخدام.

1. لنشر قواعد الأمان، شغِّل الأمر التالي في الوحدة الطرفية:

   firebase deploy --only firestore:rules,storage
   

2. إذا طُلب منك تحديد ما إذا كنت تريد منح Cloud Storage دور IAM لاستخدام قواعد الخدمات المتعددة، أدخِل Y أو N. (يمكنك استخدام أيّ من الخيارَين في هذا الدرس التطبيقي حول الترميز)

ربط تطبيق الويب بمشروعك على Firebase

يجب أن يعرف رمز تطبيق الويب الأساسي مشروع Firebase الذي يجب استخدامه لقاعدة البيانات والتخزين وما إلى ذلك. ويمكنك إجراء ذلك عن طريق إضافة إعدادات Firebase إلى رمز تطبيقك الأساسي.

1. احصل على إعدادات Firebase:
   1. في "وحدة تحكّم Firebase"، انتقِل إلى إعدادات المشروع ضمن مشروعك على Firebase.
   2. انتقِل للأسفل إلى قسم تطبيقاتك، واختَر تطبيق الويب المسجَّل.
   3. في لوحة إعداد حزمة تطوير البرامج (SDK) وضبطها، انسخ الرمز الكامل initializeApp بما في ذلك الثابت firebaseConfig.
2. أضِف إعدادات Firebase إلى قاعدة رموز تطبيق الويب:
   1. في محرّر الرموز، افتح الملف src/lib/firebase/firebase.config.js.
   2. اختَر الكل في الملف، واستبدِله بالرمز الذي نسخته.
   3. احفظ الملف.

معاينة تطبيق الويب في المتصفّح

1. في نافذة الأوامر، ثبِّت العناصر التابعة ثم شغِّل تطبيق الويب:

   npm install
   npm run dev
   

2. في المتصفّح، انتقِل إلى عنوان URL للاستضافة المستضافة محليًا لعرض تطبيق الويب. على سبيل المثال، في معظم الحالات، يكون عنوان URL هو http://localhost:3000/‎ أو عنوانًا مشابهًا.

استخدام روبوت الدردشة في تطبيق الويب

1. في المتصفّح، ارجع إلى علامة التبويب التي يتم فيها تشغيل تطبيق الويب Friendly Conf محليًا.
2. انقر على تسجيل الدخول باستخدام حساب Google، واختَر حسابك على Google إذا لزم الأمر.
3. بعد تسجيل الدخول، ستظهر لك نافذة محادثة فارغة.
4. اكتب تحية (مثل hi)، ثم انقر على إرسال.
5. انتظِر بضع ثوانٍ حتى يردّ عليك برنامج الدردشة الآلي.

يردّ برنامج الدردشة الآلي في التطبيق بردّ عام.

تخصيص روبوت الدردشة للتطبيق

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

1. في تطبيق الويب على المتصفّح، محو المحادثة من خلال النقر على زر "x" الأحمر (بجانب الرسالة في سجلّ المحادثات)
2. في محرّر الرموز، افتح الملف src/app/page.tsx.
3. انتقِل للأسفل واستبدِل الرمز البرمجي في السطر 93 أو بالقرب منه الذي يتضمّن prompt: userMsg بما يلي:
   prompt: preparePrompt(userMsg, messages),
4. احفظ الملف.
5. عُد إلى تطبيق الويب الذي يتم تشغيله في المتصفّح.
6. اكتب تحية (مثل hi)، ثم انقر على إرسال.
7. انتظِر بضع ثوانٍ حتى يردّ عليك برنامج الدردشة الآلي.

يستجيب روبوت الدردشة بمعلومات مستندة إلى السياق المقدَّم في src/app/lib/context.md. على الرغم من أنّك لم تكتب طلبًا محدّدًا، ينشئ نموذج Gemini الأساسي اقتراحًا مخصّصًا استنادًا إلى هذا السياق بالإضافة إلى التاريخ والوقت الحاليين. يمكنك الآن تحديد أسئلة المتابعة والتعمّق في الموضوع.

هذا السياق الموسّع مهم لروبوت الدردشة، ولكن يجب ألا تعرضه لمستخدم تطبيق الويب. إليك كيفية إخفائه:

1. في محرّر الرموز، افتح الملف src/app/page.tsx.
2. انتقِل للأسفل واستبدِل الرمز البرمجي في السطر 56 أو بالقرب منه الذي يتضمّن ...doc.data(), بالرمز التالي:
   ...prepareMessage(doc.data()),
3. احفظ الملف.
4. عُد إلى تطبيق الويب الذي يتم تشغيله في المتصفّح.
5. يُرجى إعادة تحميل الصفحة.

يمكنك أيضًا تجربة إمكانية إجراء محادثة مع برنامج الدردشة الآلي مع سياق تاريخي:

1. في مربّع النص كتابة رسالة، اطرح سؤالاً مثل: Any other interesting talks about AI?سيردّ عليك برنامج الدردشة الآلي.
2. في مربّع النص كتابة رسالة، اطرح سؤال متابعة مرتبطًا بالسؤال السابق: Give me a few more details about the last one.

يردّ روبوت الدردشة بمعلومات تاريخية. بما أنّ سجلّ المحادثات أصبح الآن جزءًا من السياق، يمكن لروبوت الدردشة فهم أسئلة المتابعة.

7. إعداد إضافة "المهام المتعدّدة الوسائط باستخدام Gemini API"

تستدعي الإضافة "مهام متعددة الوسائط باستخدام Gemini API" واجهة Gemini API باستخدام طلبات متعددة الوسائط تتضمّن طلبًا نصيًا بالإضافة إلى عنوان URL لملف متوافق أو عنوان URL لخدمة Cloud Storage (يُرجى العِلم أنّ واجهة Google AI Gemini API تستخدم عنوان URL لخدمة Cloud Storage كبنية أساسية لعنوان URL الخاص بالملف). تتيح الإضافة أيضًا استخدام متغيّرات Handlebars لاستبدال القيم من مستند Cloud Firestore من أجل تخصيص الطلب النصي.

في تطبيقك، عندما تحمّل صورة إلى حزمة Cloud Storage، يمكنك إنشاء عنوان URL وإضافته إلى مستند جديد في Cloud Firestore، ما يؤدي إلى تفعيل الإضافة لإنشاء طلب متعدد الوسائط واستدعاء Gemini API. في الرمز المصدر لهذا الدرس التطبيقي، قدّمنا الرمز اللازم لتحميل صورة وكتابة عنوان URL في مستند Firestore.

تثبيت إضافة "المهام المتعدّدة الوسائط باستخدام Gemini API"

1. انتقِل إلى إضافة "المهام المتعددة الوسائط باستخدام Gemini API".
2. انقر على تثبيت في وحدة تحكّم Firebase.
3. اختَر مشروعك على Firebase.
4. انقر على التالي > التالي > التالي، إلى أن تصل إلى قسم ضبط الإضافة.
   1. في قائمة مزوّد Gemini API، اختَر ما إذا كنت تريد استخدام Gemini API من Google AI أو Vertex AI. بالنسبة إلى المطوّرين الذين يستخدمون Firebase، ننصحهم باستخدام Vertex AI.
   2. في مربّع النص مسار مجموعة Firestore، أدخِل: gallery
   3. في مربّع النص الطلب، أدخِل: Please describe the provided image; if there is no image, say "no image"
   4. في مربّع النص حقل الصورة، أدخِل: image
   5. في قائمة موقع "وظائف السحابة الإلكترونية"، اختَر الموقع الجغرافي المفضّل لديك (مثل Iowa (us-central1) أو الموقع الجغرافي الذي سبق أن حدّدته لقاعدة بيانات Firestore).
   6. اترك جميع القيم الأخرى على الإعداد التلقائي.
5. انقر على تثبيت الإضافة وانتظِر إلى أن يتم تثبيتها.

تجربة إضافة "مهام متعددة الوسائط باستخدام Gemini API"

على الرغم من أنّ الهدف من هذا الدرس التطبيقي هو التفاعل مع إضافة "المهام المتعدّدة الوسائط باستخدام Gemini API" من خلال تطبيق ويب، من المفيد التعرّف على طريقة عمل الإضافة من خلال تجربتها في وحدة تحكّم Firebase أولاً.

يتم تشغيل الإضافة كلما تم إنشاء مستند Firestore ضمن المجموعة users/{uid}/gallery، ويمكنك إجراء ذلك في وحدة تحكّم Firebase. بعد ذلك، يأخذ الامتداد عنوان URL للصورة في "مساحة التخزين السحابي" من مستند Cloud Firestore ويمرّره كجزء من الطلب المتعدّد الوسائط في طلب إلى Gemini API.

أولاً، حمِّل صورة إلى حزمة Cloud Storage:

1. انتقِل إلى Storage ضِمن مشروعك على Firebase.
2. انقر على إنشاء مجلد.
3. في مربّع النص اسم المجلد، أدخِل gallery
4. انقر على إضافة مجلد.
5. في مجلد gallery، انقر على تحميل ملف.
6. اختَر ملف صورة بتنسيق JPEG لتحميله.

بعد ذلك، أضِف عنوان URL للصورة في Cloud Storage إلى مستند Firestore (وهو المشغّل للإضافة):

1. الانتقال إلى Firestore ضِمن مشروعك على Firebase
2. انقر على بدء عملية التحصيل ضمن العمود الأول.
3. في مربّع النص معرّف المجموعة، أدخِل: gallery، ثم انقر على التالي.
4. إضافة مستند إلى المجموعة:
   1. في مربّع النص معرّف المستند، انقر على المعرّف التلقائي.
   2. في مربع النص الحقل، أدخِل: image. في المربّع القيمة، أدخِل معرّف الموارد المنتظم لموقع التخزين الخاص بالصورة التي حمّلتها للتو.
5. انقر على إضافة حقل.
6. في مربع النص الحقل، أدخِل: published. في مربّع النوع، اختَر boolean. في المربّع القيمة، اختَر true.
7. انقر على حفظ وانتظر بضع ثوانٍ.

تتضمّن مجموعة gallery الآن مستندًا يحتوي على ردّ على طلب البحث.

استخدام معرض الصور في تطبيق الويب

1. في المتصفّح، ارجع إلى علامة التبويب التي يتم فيها تشغيل تطبيق الويب Friendly Conf محليًا.
2. انقر على علامة التبويب المعرض في شريط التنقّل.
3. ستظهر لك معرض للصور التي تم تحميلها والأوصاف من إنشاء الذكاء الاصطناعي. يجب أن يحتوي على الصورة التي حمّلتها سابقًا إلى المجلد gallery في حزمة التخزين.
4. انقر على الزر تحميل واختَر صورة JPEG أخرى.
5. انتظِر بضع ثوانٍ حتى تظهر الصورة في المعرض. بعد بضع لحظات، سيتم عرض الوصف الذي أنشأه الذكاء الاصطناعي للصورة التي تم تحميلها حديثًا أيضًا.

إذا أردت فهم الرمز البرمجي لكيفية تنفيذ ذلك، يمكنك الاطّلاع على src/app/gallery/page.tsx في قاعدة الرموز البرمجية لتطبيق الويب.

8. مكافأة: نشر تطبيقك

توفّر Firebase عدة طرق يمكنك من خلالها نشر تطبيق ويب. بالنسبة إلى هذا الدرس العملي، اختَر أحد الخيارات التالية:

• الخيار 1: Firebase Hosting: استخدِم هذا الخيار إذا قرّرت عدم إنشاء مستودع GitHub خاص بك (وكان لديك رمز المصدر مخزّن محليًا على جهازك فقط).
• الخيار 2: استضافة التطبيقات على Firebase: استخدِم هذا الخيار إذا كنت تريد نشر التغييرات تلقائيًا كلّما أرسلتها إلى مستودع GitHub الخاص بك. تم إنشاء خدمة Firebase الجديدة هذه خصيصًا لتلبية احتياجات تطبيقات Next.js وAngular الديناميكية.

الخيار 1: النشر باستخدام "استضافة Firebase"

استخدِم هذا الخيار إذا قرّرت عدم إنشاء مستودع GitHub خاص بك (وتخزين رمز المصدر محليًا على جهازك فقط).

1. في الوحدة الطرفية، ابدأ عملية إعداد Firebase Hosting من خلال تنفيذ الأوامر التالية:

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. للحصول على الطلب: Detected an existing Next.js codebase in your current directory, should we use this?، اضغط على Y.
3. بالنسبة إلى الطلب: In which region would you like to host server-side content, if applicable?، اختَر إما الموقع الجغرافي التلقائي أو الموقع الجغرافي الذي استخدمته سابقًا في هذا الدرس التطبيقي. بعد ذلك، اضغط على Enter (أو return على جهاز macOS).
4. للحصول على الطلب: Set up automatic builds and deploys with GitHub?، اضغط على N.
5. انشر تطبيق الويب على خدمة Hosting من خلال تنفيذ الأمر التالي:

   firebase deploy --only hosting
   

لقد أكملت كل المسائل الحسابية التدريبية. إذا عدّلت تطبيقك وأردت نشر الإصدار الجديد، ما عليك سوى إعادة تشغيل firebase deploy --only hosting وستعمل خدمة "استضافة Firebase" على إنشاء تطبيقك وإعادة نشره.

الخيار 2: النشر باستخدام خدمة "استضافة التطبيقات" من Firebase

استخدِم هذا الخيار إذا كنت تريد نشر التغييرات تلقائيًا كلما أرسلتها إلى مستودع GitHub الخاص بك.

1. نفِّذ تغييراتك على GitHub.
2. في "وحدة تحكّم Firebase"، انتقِل إلى استضافة التطبيقات ضِمن مشروعك على Firebase.
3. انقر على البدء > الربط بـ GitHub.
4. اختَر حسابك على GitHub والمستودع. انقر على التالي.
5. في إعداد النشر > الدليل الجذري، أدخِل اسم المجلد الذي يحتوي على الرمز المصدر (إذا لم يكن package.json في الدليل الجذري للمستودع).
6. بالنسبة إلى فرع البث المباشر، اختَر فرع main في مستودع GitHub. انقر على التالي.
7. أدخِل معرّفًا لخادمك الخلفي (على سبيل المثال، chatbot).
8. انقر على إنهاء ونشر.

سيستغرق تجهيز عملية النشر الجديدة بضع دقائق. يمكنك الاطّلاع على حالة النشر في قسم "استضافة التطبيقات" في وحدة تحكّم Firebase.

من الآن فصاعدًا، في كل مرة تدفع فيها تغييرًا إلى مستودع GitHub، ستعمل خدمة Firebase App Hosting تلقائيًا على إنشاء تطبيقك ونشره.

9. الخاتمة

تهانينا! لقد حقّقت الكثير في هذا الدرس العملي.

تثبيت الإضافات وإعدادها

استخدمت وحدة تحكّم Firebase لإعداد وتثبيت إضافات Firebase المختلفة التي تستخدم الذكاء الاصطناعي التوليدي. يُعدّ استخدام "إضافات Firebase" أمرًا مناسبًا لأنّك لست بحاجة إلى التعرّف على الكثير من الرموز النموذجية وكتابتها للتعامل مع المصادقة باستخدام خدمات Google Cloud أو منطق Cloud Functions الخلفي للاستماع إلى خدمات Firestore وGoogle Cloud وواجهات برمجة التطبيقات والتفاعل معها.

تجربة الإضافات باستخدام "وحدة تحكّم Firebase"

بدلاً من الانتقال مباشرةً إلى الرمز البرمجي، استغرقت وقتًا لفهم طريقة عمل هذه الإضافات المستندة إلى الذكاء الاصطناعي التوليدي، استنادًا إلى إدخال قدّمته من خلال Firestore أو Cloud Storage. يمكن أن يكون هذا مفيدًا بشكل خاص أثناء تصحيح أخطاء ناتج إحدى الإضافات.

إنشاء تطبيق ويب يستند إلى الذكاء الاصطناعي

لقد أنشأت تطبيق ويب مستندًا إلى الذكاء الاصطناعي ويستخدم "إضافات Firebase" للوصول إلى بعض إمكانات نموذج Gemini فقط.

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

استخدم تطبيق الويب أيضًا إضافة "مهام متعددة الوسائط باستخدام Gemini API" لإنشاء أوصاف تلقائية للصور التي تم تحميلها.

الخطوات التالية

• جرِّب الطلبات واستفِد من قدرة الاستيعاب الكبيرة في Google AI Studio أو Vertex AI Studio.
• مزيد من المعلومات حول البحث باستخدام التوليد المعزّز بالاسترجاع (RAG) المستند إلى الذكاء الاصطناعي
• جرِّب استخدام برنامج تدريبي ذاتي الخطى يعرض كيفية إضافة برنامج دردشة آلي إلى تطبيق Firebase حالي باستخدام Genkit (وهي خدمة إطار عمل جديد للذكاء الاصطناعي).
• تعرَّف على إمكانات البحث عن التشابه في Firestore وCloud SQL for PostgreSQL.
• علِّم روبوت الدردشة إجراء مكالمات في تطبيقك الحالي باستخدام استدعاء الدوال البرمجية.