إنشاء ميزات الذكاء الاصطناعي التوليدي المستندة إلى بياناتك باستخدام Firebase Genkit

1- قبل البدء

في هذا الدرس التطبيقي حول الترميز، ستتعلّم كيفية استخدام Firebase Genkit، وهو إطار عمل مفتوح المصدر لدمج الذكاء الاصطناعي التوليدي في تطبيقك. ويمكنك استخدام Genkit مع العديد من المهارات والأدوات التي تعرفها لتطوير التطبيقات، مثل Firestore.

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

  • معتادة على استخدام Firestore وNode.js وTypeScript.

المعلومات التي ستطّلع عليها

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

المتطلبات

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

2- مراجعة تطبيق الويب وخدمات السحابة الإلكترونية المستخدمة

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

تطبيق الويب

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

يحتاج التطبيق إلى تحسين التفاعل مع الصفحة الرئيسية للتطبيق. في هذا الدرس التطبيقي حول الترميز، ستنفّذ فكرتَين تعتمدان على الذكاء الاصطناعي التوليدي (أو الذكاء الاصطناعي التوليدي):

  • يعرض التطبيق حاليًا قائمة ثابتة من الوجهات. فسوف تغيره ليكون ديناميكيًا!
  • يمكنك تنفيذ برنامج رحلة تتم تعبئته تلقائيًا بهدف زيادة معدّل زيارة المستخدمين.

d54f2043af908fb.png

الخدمات المستخدَمة

في هذا الدرس التطبيقي حول الترميز، ستستخدم العديد من خدمات وميزات Firebase وCloud، وسيتم توفير معظم رموز بدء الاستخدام لك. يتضمن الجدول التالي الخدمات التي ستستخدمها وأسباب استخدامها.

الخدمة

سبب الاستخدام

Firebase Genkit

يمكنك استخدام Genkit لجلب الذكاء الاصطناعي التوليدي إلى تطبيق Node.js أو Next.js.

Cloud Firestore

وتقوم بتخزين البيانات في Cloud Firestore، والتي تُستخدم بعد ذلك للبحث عن تشابه المتجه.

Vertex AI من Google Cloud

أنت تستخدم النماذج الأساسية من Vertex AI (مثل Gemini) لتعزيز ميزات الذكاء الاصطناعي (AI).

استضافة التطبيقات على Firebase

يمكنك اختياريًا استخدام ميزة "استضافة التطبيقات على Firebase" الجديدة والمبسّطة لعرض تطبيق الويب الديناميكي Next.js (المتصل بمستودع GitHub).

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

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

  1. في الوحدة الطرفية، تأكَّد من تثبيت الإصدار 20.0.0 أو إصدار أحدث من Node.js:
    node -v
    
  2. إذا لم يكن لديك الإصدار 20.0.0 أو إصدار أحدث من Node.js، يمكنك تنزيل أحدث إصدار من قناة الدعم الطويل الأمد (LTS) وتثبيته.

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

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

  1. أنشئ مستودعًا جديدًا باستخدام النموذج الذي نوفره من github.com/FirebaseExtended/codelab-ai-genkit-rag65ef006167d600ab.png
  2. استنسِخ مستودع GitHub الخاص بالدرس التطبيقي حول الترميز الذي أنشأته للتو:
    git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
    

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

نزِّل مستودع GitHub كملف ZIP.

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

على جهازك المحلي، ابحث عن المستودع المستنسخ وراجع بنية المجلد:

مجلد

الوصف

genkit-functions

رمز Genkit للخلفية

load-firestore-data

أداة سطر أوامر مساعِدة لتعبئة مجموعة Firestore مسبقًا بسرعة

*كل شيء آخر

رمز تطبيق الويب Next.js

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

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

تثبيت واجهة سطر الأوامر في Firebase

  1. يُرجى التحقّق من تثبيت واجهة سطر الأوامر في Firebase ومن أنّه الإصدار 13.6 أو إصدار أحدث:
    firebase --version
    
  2. في حال تثبيت واجهة سطر الأوامر بنظام Firebase بعد تثبيت الإصدار 13.6 أو إصدار أحدث، يُرجى تحديثه:
    npm update -g firebase-tools
    
  3. في حال عدم تثبيت واجهة سطر الأوامر في Firebase، يمكنك تثبيته:
    npm install -g firebase-tools
    

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

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

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

تثبيت gcloud CLI في Google Cloud

  1. تثبيت gcloud CLI
  2. في الوحدة الطرفية، سجِّل الدخول إلى Google Cloud:
    gcloud auth login
    

4- إعداد مشروع Firebase

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

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

إنشاء مشروع على Firebase

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

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

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

تطبيق الويب الذي تم إنشاؤه في مشروع Firebase

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

ترقية خطة فوترة Firebase

لاستخدام Firebase Genkit وVertex AI (وخدمات السحابة الإلكترونية الأساسية الخاصة بهما)، عليك ترقية مشروعك في Firebase لتفعيل الفوترة.

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

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

  1. انتقِل إلى خطط فوترة Firebase ضمن مشروعك في Firebase.
  2. في مربّع حوار خطط الفوترة من Firebase، اختَر خطة Blaze واشترِها.

تفعيل Cloud Firestore

  1. انتقِل إلى Firestore باستخدام مساحة التنقّل اليمنى.
  2. انقر على إنشاء قاعدة بيانات > البدء في وضع الاختبار > التالي.
  3. اختَر موقع Cloud Firestore المفضّل لديك (أو اتركه كإعداد تلقائي).
  4. انقر على تفعيل.

تفعيل Vertex AI

  1. في الوحدة الطرفية، اربط gcloud CLI بمشروع Firebase:
    gcloud config set project YOUR_PROJECT_ID
    
  2. تفعيل خدمة Vertex AI:
    gcloud services enable aiplatform.googleapis.com
    

5- إعداد تطبيق الويب

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

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

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

firebase use YOUR_PROJECT_ID

تحميل بيانات Firestore

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

  1. لاستيراد البيانات إلى مثيل Firestore، شغِّل الأمر التالي في الوحدة الطرفية:
    cd load-firestore-data
    npm ci
    node index.js YOUR_PROJECT_ID
    cd ..
    
  2. في "وحدة تحكُّم Firebase"، انتقِل إلى Firestore ضمن مشروع Firebase. من المفترض أن يظهر لك المخطط الذي تم استيراده.

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

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

  1. الحصول على تهيئة Firebase:
    1. في "وحدة تحكُّم Firebase"، انتقِل إلى إعدادات المشروع ضِمن مشروعك على Firebase.
    2. انتقِل للأسفل وصولاً إلى قسم تطبيقاتك، واختَر تطبيق الويب المسجَّل.
    3. في لوحة إعداد حزمة SDK وضبطها، انسخ الجزء const firebaseConfig = {...} فقط.
  2. أضِف إعداد Firebase إلى قاعدة رموز تطبيق الويب:
    1. في أداة تعديل الرموز، افتح ملف genkit-functions/src/lib/genkit.config.ts.
    2. استبدِل القسم ذي الصلة بالرمز الذي نسخته.
    3. احفظ الملف.

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

  1. في الوحدة الطرفية، عليك تثبيت الملحقات ثم تشغيل تطبيق الويب:
    npm install
    npm run dev
    
  2. في المتصفّح، انتقِل إلى عنوان URL للاستضافة المستضاف محليًا لعرض تطبيق الويب. على سبيل المثال، في معظم الحالات، يكون عنوان URL هو http://localhost:3000/ أو شيء من هذا القبيل.

يجب أن يتم تحميل الصفحة:

a0df8e5ca6f08260.png

Compass هو تطبيق Next.js يستخدم React Server Components، وهذه هي الصفحة الرئيسية.

انقر على العثور على رحلة أحلامي. ويتبيّن لك أنّه يعرض حاليًا بعض البيانات غير القابلة للتغيير في بعض الوجهات الثابتة:

19748ca14b354e7f.png

لا تتردد في الاستكشاف. عندما تكون مستعدًا للمتابعة، انقر على زر الشاشة الرئيسية ddf696577e4dc21f.png (في أعلى يسار الصفحة).

6- بدء استخدام Firebase Genkit

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

لتحقيق ذلك، عليك استخدام Firebase Genkit مع Google Cloud Vertex AI كمقدّم للنموذج التوليدي (Gemini). وستستخدم Firebase كمتجر حالة للتتبُّع والتدفق (باستخدام Firestore). ويمكنك أيضًا استخدام Firebase لنشر رمز Genkit من خلال استضافة التطبيقات على Firebase.

وتضم Genkit "واجهة مستخدم لمطوّري البرامج" لجعل العمل مع الأداة مرئيًا وأسهل من ناحية الاستخدام.

  1. شغِّل واجهة مستخدم المطوّرين Genkit من خلال تنفيذ الأمر التالي في نافذة طرفية جديدة:
    cd genkit-functions
    npx genkit start
    
  2. في المتصفِّح، انتقِل إلى عنوان URL لـ Genkit والمُستضاف محليًا. وفي معظم الحالات، يكون العنوان هو http://localhost:4000/.

دمج نموذج من Gemini

يوفّر Firebase Genkit المكوّن الإضافي Dotprompt وتنسيق النص لمساعدتك في كتابة الطلبات المستندة إلى الذكاء الاصطناعي التوليدي وتنظيمها.

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

لاستخدام Dotprompt، يمكنك البدء بعالم مرحبًا:

  1. في أداة تعديل الرموز، افتح ملف genkit-functions/prompts/1-hello-world.prompt.
    من المفترض أن يتوفّر مخطّط إدخال ومخرجات.
  2. افتح dotprompt/1-hello-world في واجهة مستخدم Firebase Genkit.
  3. استخدِم أي اسم أو رمز لغة تعرفه، أو اتركه كسلسلة فارغة.
  4. انقر على تشغيل.83cc143583009c49.png
  5. جرِّب بعض القيم المختلفة. تساعد النماذج اللغوية الكبيرة في فهم الطلبات المختصرة أو التي تتضمّن أخطاء إملائية أو غير المكتملة في طلبات البحث البسيطة مثل هذا الطلب.

تحديد مخططات JSON

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

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

  1. في أداة تعديل الرموز، افتح ملف genkit-functions/prompts/2-simple-itinerary.prompt.
    من المفترض أن يتوفّر مخطّط إدخال ومخرجات.
  2. افتح dotprompt/2-simple-itinerary في واجهة مستخدم Firebase Genkit.
  3. املأ حقلَي الإدخال place والاهتمامات:
    {
        "place": "paris",
        "interests": [
            "diner"
        ]
    }
    
  4. انقر على تشغيل.20d18033b29f29e2.png

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

إدخال متعدد الوسائط

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

  1. في أداة تعديل الرموز، افتح ملف genkit-functions/prompts/imgDescription.prompt.
    يُرجى ملاحظة بنية المقابض {{media url=this}}.
  2. افتح dotprompt/imgDescription في واجهة مستخدم Firebase Genkit.
  3. استخدام صورة مصغّرة من ويكيبيديا في حقل إدخال imageUrls:
    {
        "imageUrls": [ "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg" ]
    }
    
  4. انقر على تشغيل.730a6a757d7951ed.png

7- تنفيذ الاسترداد

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

عندما تحتاج إلى إجراء طلب بحث غير منظّم والعثور على محتوى ذي صلة، فإن من أكثر الأساليب فعالية هو بحث التشابه المتجهي في التضمينات التي تم إنشاؤها.

  • المتجه هو مجرد صفيفة أرقام. كل رقم في الخط المتجه هو قيمته على طول بُعد معين. إذًا، يمكن رسم خط متجه ببعدين على رسم بياني.
  • نموذج التضمين هو نوع من نماذج الذكاء الاصطناعي (AI) الذي يأخذ مدخلات مثل نص عشوائي ويرسمه على الرسم البياني. والمكان على الرسم البياني الذي يعرض هذه البيانات ذات مغزى - فالمدخلات المتشابهة ببعضها البعض ستنتهي بالقرب من بعضها البعض.

البحث عن تشابه المتجه في Firestore

في Firestore، لديك قائمة بالأماكن ويحتوي كل مكان على حقل نصي يوضح الأماكن التي يشتهر بها هذا المكان.

وستنشئ حقل متّجه باسم embedding لكل مكان، باستخدام البيانات من الحقل knownFor:

  1. في الوحدة الطرفية، شغِّل الأمر التالي لتثبيت أحدث مكوّن alpha. أنت بحاجة إلى الإصدار 2024.05.03 أو إصدار أحدث:
    gcloud components install alpha
    
  2. إنشاء الفهرس:
    gcloud alpha firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config=vector-config='{"dimension":"768","flat": "{}"}',field-path=embedding
    
  3. افتح placesRetriever في واجهة مستخدم Firebase Genkit، ثم انقر على تشغيل.
    والنتيجة هي كائن ثابت بنص TODO. تحتاج إلى تنفيذ برنامج الاسترداد في الخطوات التالية.
  4. في أداة تعديل الرموز، افتح ملف genkit-functions/src/lib/placesRetriever.ts.
  5. انتقِل للأسفل واستبدِل العنصر النائب placesRetriever بما يلي:
    export const placesRetriever = defineFirestoreRetriever({
      name: 'placesRetriever',
      firestore,
      collection: 'places',
      contentField: 'knownFor',
      vectorField: 'embedding',
      embedder: textEmbeddingGecko,
      distanceMeasure: 'COSINE',
    });
    

الآن، أجرِ بحثًا اختباريًا:

  1. افتح placesRetriever في واجهة مستخدم Firebase Genkit.
  2. أدخِل طلب البحث التالي:
    {
        "content": [
            {
                "text": "new orleans"
            }
        ]
    }
    
  3. يمكنك اختياريًا تغيير بعض الخيارات، مثل الحدّ الأقصى.
  4. انقر على تشغيل.a0725b52f0b6e03a.png

يمكنك إجراء فلترة إضافية للبيانات بطريقة تتجاوز التشابه من خلال إضافة عبارات where إلى "الخيارات".

8- الجيل المعزز للاسترجاع (RAG)

يحتوي التطبيق على العديد من الطلبات التي تتطلب نصًا و/أو JSON و/أو صورًا لإنشاء وجهات عطلات وأشياء أخرى رائعة للمستخدمين.

لديك أيضًا طلب يعرض الوجهات ذات الصلة الموجودة في قاعدة البيانات (Firestore).

حان الوقت لتجميعها معًا في أول جيل استرجاعي معزّز (RAG):

  1. في أداة تعديل الرموز، افتح ملف genkit-functions/prompts/itineraryGen.prompt.
  2. لاحِظ كيف تطوَّر طلب برنامج الرحلة البسيط سابقًا لقبول المزيد من الإدخالات، بما في ذلك activities التي يعرضها المسترد.
  3. في أداة تعديل الرموز، افتح ملف genkit-functions/src/lib/itineraryFlow.ts. يحتوي هذا الملف على ميزة في Firebase Genkit تُسمى flows.
    • التدفقات هي دوال ذات خصائص إضافية، وهي: تكون مكتوبة بدقة عالية وقابلة للبث، ويمكن استدعاؤها محليًا وبشكل عن بُعد، ويمكن ملاحظتها بالكامل. توفر Genkit أدوات واجهة سطر الأوامر (CLI) وواجهة مستخدم المطور للعمل مع التدفقات (التشغيل، وتصحيح الأخطاء، وما إلى ذلك).
    • للمساعدة في تصحيح الأخطاء، يجب تقسيم المسارات الطويلة إلى عدة خطوات.
  4. أوجِد TODO: 2 حول الخط 70. هذا مثال على كيفية إضافة خطوة إلى تدفق موجود. ستستبدل هنا imgDescription الفارغ بنتيجة إنشاء مكالمة الطلب imgDescription.
  5. افتح itineraryFlow في واجهة مستخدم Firebase Genkit.
  6. استخدِم الإدخال التالي لاختبار التنفيذ الناجح لـ itineraryFlow مع الخطوة التي أضفتها حديثًا:
    {
        "imageUrls": [ "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg" ]
    }
    
  7. انقر على تشغيل.c512ec77e0251b7c.png
  8. إذا واجهت أي أخطاء أو سلوكيات غير متوقعة، تحقَّق من علامة التبويب فحص للاطّلاع على التفاصيل. يمكنك أيضًا استخدام علامة التبويب هذه لمراجعة سجلّ عمليات التنفيذ من متجر التتبُّع.1ba6565e2e0decb.png

RAG لتطبيق الويب الخاص بك

يمكنك الاطّلاع على صفحة تطبيق الويب Dream Your Vacation (http://localhost:3000/gemini) ورمز المصدر الخاص به (src/app/gemini/page.tsx) للحصول على مثال على دمج Next.js.

1e626124e09e04e9.png b059decb53c249a1.png e31f6acf87a98cb2.png 19c0c9459d5e1601.png

9- نشر تطبيقك

الآن، هناك خطوة أخيرة وهي نشر تطبيق الويب!

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

  1. نفِّذ التغييرات على GitHub وأرسلها.
  2. في وحدة تحكُّم Firebase، انتقِل إلى استضافة التطبيق ضمن مشروع Firebase.
  3. انقر على البدء > الاتصال بـ GitHub.
  4. اختَر حسابك على GitHub والمستودع. انقر على Next (التالي).
  5. في إعداد النشر > الدليل الجذر، احتفظ بالقيمة التلقائية.
  6. بالنسبة إلى الفرع المباشر، اختَر الفرع الرئيسي لمستودع GitHub. انقر على Next (التالي).
  7. أدخِل رقم تعريف للخلفية (على سبيل المثال، compass).
  8. انقر على Finish and Deployment (إنهاء ونشر).

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

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

10- الخاتمة

تهانينا لقد أنجزت الكثير في هذا الدرس التطبيقي حول الترميز.

باستخدام Firebase Genkit وFirestore وVertex AI، تمكّنت من إنشاء "تدفق" للعطلات المخصّصة التي يتم اقتراحها استنادًا إلى ما يفضّله المستخدم وإلهامه استنادًا إلى بيانات التطبيق.

تعلّمت أيضًا العديد من الأنماط المهمّة التي ستحتاجها لهندسة البرامج عند إنشاء تطبيقات الذكاء الاصطناعي التوليدي:

  • إدارة الطلبات
  • المحتوى المتعدّد الوسائط
  • مخططات الإدخال/الإخراج
  • متاجر المتجهات
  • استرجاع البيانات
  • الجيل المعزز للاسترجاع (RAG)
  • أداة "التدفق"

تجدر الإشارة إلى أنّ Firebase Genkit يأتي مع خيارات نشر متعددة لم يتم وصفها في هذا الدرس التطبيقي حول الترميز:

ما عليك سوى اختيار الأنسب لك من خلال تشغيل ما يلي داخل مجلد العقدة (package.json) الخاص بك:

npx genkit init

الخطوات اللاحقة