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

1. قبل البدء

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

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

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

  • الإلمام بـ Firestore وNode.js وTypeScript

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

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

المتطلبات

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

2. مراجعة تطبيقات الويب والخدمات السحابية المستخدَمة

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

تطبيق الويب

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

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

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

d54f2043af908fb.png

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

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

الخدمة

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

Genkit

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

Cloud Firestore

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

‫Vertex AI من Google Cloud

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

Firebase App Hosting

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

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

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

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

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

إذا كان لديك حساب على 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.

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

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

المجلد

الوصف

load-firestore-data

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

*كل ما عدا ذلك

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

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

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

تثبيت Firebase CLI

  1. تأكَّد من تثبيت Firebase CLI وأنّ الإصدار 13.6 أو إصدار أحدث مثبّت:
    firebase --version
  2. إذا كان لديك Firebase CLI مثبَّتًا، ولكنّه ليس الإصدار 13.6 أو إصدارًا أحدث، يمكنك تحديثه باتّباع الخطوات التالية:
    npm update -g firebase-tools
  3. إذا لم تكن أداة Firebase CLI مثبَّتة، يمكنك تثبيتها باتّباع الخطوات التالية:
    npm install -g firebase-tools

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

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

  1. في الوحدة الطرفية، سجِّل الدخول إلى Firebase:
    firebase login
    إذا كان الجهاز الطرفي يشير إلى أنّك مُسجِّل الدخول إلى Firebase من قبل، يمكنك الانتقال إلى قسم إعداد مشروع Firebase في هذا الدرس التطبيقي حول الترميز.
  2. في نافذة الأوامر، أدخِل Y أو N حسب ما إذا كنت تريد أن يجمع Firebase البيانات. (يمكنك استخدام أي من الخيارَين في هذا الدرس التطبيقي حول الترميز)
  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).
  3. انقر على متابعة.
  4. إذا طُلب منك ذلك، راجِع بنود Firebase واقبلها، ثم انقر على متابعة.
  5. (اختياري) فعِّل ميزة "المساعدة المستندة إلى الذكاء الاصطناعي" في وحدة تحكّم Firebase (المعروفة باسم "Gemini في Firebase").
  6. في هذا الدرس العملي، لا تحتاج إلى "إحصاءات Google"، لذا أوقِف خيار "إحصاءات Google".
  7. انقر على إنشاء مشروع، وانتظِر إلى أن يتم توفير مشروعك، ثم انقر على متابعة.

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

  1. انتقِل إلى شاشة نظرة عامة على المشروع في مشروع Firebase، ثمّ انقر على رمز يتضمّن أقواس زاوية مفتوحة وشرطة مائلة وأقواس زاوية مغلقة، ويمثّل تطبيق ويب الويب.زر &quot;الويب&quot; في أعلى &quot;نظرة عامة على المشروع&quot; في وحدة تحكّم Firebase
  2. في مربّع النص اسم التطبيق، أدخِل اسمًا مميزًا للتطبيق، مثل My Compass Codelab App. يمكنك ترك مربّع الاختيار الخاص بإعداد استضافة Firebase بدون وضع علامة فيه، لأنّك ستُعدّ خدمة استضافة بشكل اختياري في الخطوة الأخيرة من هذا الدرس التطبيقي حول الترميز.
    تسجيل تطبيق الويب
  3. انقر على تسجيل التطبيق > المتابعة إلى Play Console.

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

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

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

مزيد من المعلومات حول أسعار Vertex AI

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

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

إعداد Cloud Firestore

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

تفعيل Vertex AI

استخدِم واجهة سطر الأوامر gcloud لإعداد Vertex AI. بالنسبة إلى جميع الأوامر الواردة في هذه الصفحة، احرص على استبدال YOUR_PROJECT_ID برقم تعريف مشروع Firebase الخاص بك.

  1. في نافذة الأوامر، اضبط المشروع التلقائي لحزمة تطوير البرامج (SDK) من Google Cloud:
    gcloud config set project YOUR_PROJECT_ID
  2. إذا ظهرت لك رسالة تحذير تقول "تحذير: لا يتطابق مشروعك النشط مع مشروع الحصة في ملف بيانات الاعتماد التلقائية للتطبيق المحلي. قد يؤدي ذلك إلى حدوث مشاكل غير متوقّعة في الحصة."، ثم نفِّذ الأمر التالي لضبط مشروع الحصة:
    gcloud auth application-default set-quota-project YOUR_PROJECT_ID
  3. فعِّل خدمة Vertex AI في مشروعك باتّباع الخطوات التالية:
    gcloud services enable aiplatform.googleapis.com

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

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

ضبط إعدادات Firebase CLI لاستهداف مشروعك

  1. في المحطة الطرفية، انتقِل إلى الدليل الجذر لمشروع codelab.
  2. لجعل Firebase CLI ينفّذ جميع الأوامر على مشروع Firebase الخاص بك، نفِّذ الأمر التالي:
    firebase use YOUR_PROJECT_ID

استيراد نموذج البيانات إلى Firestore

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

  1. للسماح لقاعدة الرموز البرمجية المحلية بتشغيل الرموز التي تستخدم عادةً حساب خدمة، شغِّل الأمر التالي في الوحدة الطرفية:
    gcloud auth application-default login
    سيؤدي هذا إلى فتح علامة تبويب جديدة في المتصفّح. سجِّل الدخول باستخدام حساب Google نفسه الذي استخدمته في الخطوات السابقة.
  2. لاستيراد نموذج بيانات Firestore، شغِّل الأوامر التالية:
    cd load-firestore-data
npm ci
node index.js YOUR_PROJECT_ID
cd ..
  3. تأكَّد من أنّه تمت إضافة البيانات بنجاح إلى قاعدة البيانات من خلال الانتقال إلى قسم Firestore في مشروع Firebase في وحدة تحكّم Firebase.من المفترض أن يظهر لك مخطط البيانات التي تم استيرادها ومحتوياتها.بيانات نموذجية من Compass في وحدة تحكّم Firebase

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

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

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

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

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

الشاشة الرئيسية لتطبيق البوصلة

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

انقر على العثور على رحلة أحلامي. يمكنك الاطّلاع على بعض البيانات المرمّزة بشكل ثابت لبعض الوجهات الثابتة:

العثور على شاشة &quot;رحلة أحلامي&quot;

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

6. التعمّق في الذكاء الاصطناعي التوليدي باستخدام Genkit

أنت الآن مستعد للاستفادة من إمكانات الذكاء الاصطناعي التوليدي في تطبيقك. سيرشدك هذا القسم من الدرس التطبيقي حول الترميز إلى كيفية تنفيذ ميزة تقترح وجهات استنادًا إلى الأفكار التي يقدّمها المستخدم. ستستخدم Genkit وVertex AI من Google Cloud كمزوّد للنموذج التوليدي (ستستخدم Gemini).

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

كخطوة أخيرة في هذا الدرس العملي، ستنشر تطبيق Genkit على خدمة "استضافة التطبيقات" من Firebase.

ربط تطبيق Genkit بمشروع Firebase

لقد ربطنا Genkit بمشروعك من خلال تعديل src/lib/genkit/genkit.config.ts في الخطوة السابقة.

تشغيل واجهة مستخدم المطوّرين في Genkit

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

في الوحدة الطرفية، شغِّل الأمر التالي:

npm run dev:genkit

في المتصفّح، انتقِل إلى عنوان URL الذي يستضيف Genkit محليًا. في معظم الحالات، يكون http://localhost:4000/.

التفاعل مع Gemini

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

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

التفاعل مع نموذج Gemini في واجهة مستخدم Genkit Developer

إدارة الطلبات

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

لاستخدام Dotprompt، ابدأ بعبارة hello-world:

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

إثراء النتائج باستخدام البيانات المنظَّمة

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

استكشاف المخططات الناتجة

يمكنك أيضًا تحديد المخطط الناتج لمكالمة نموذج لغوي كبير.

  1. في أداة تعديل الرموز، افحص ملف الطلب:
    1. افتح ملف prompts/2-simple-itinerary.prompt.
    2. افحص مخطّطات الإدخال والإخراج المحدّدة.
  2. التفاعل مع واجهة المستخدم:
    1. في واجهة مستخدم Genkit Developer، انتقِل إلى القسم prompts/2-simple-itinerary.
    2. قدِّم الإدخال عن طريق ملء الحقلَين place وinterests ببيانات نموذجية:
      {
    "interests": [
        "Museums"
    ],
    "place": "Paris"
}
    3. انقر على تشغيل.

استخدام Dotprompt لتحديد المخطط الناتج

فهم الناتج المستند إلى المخطط

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

بالإضافة إلى ذلك، يمكنك ضبط Genkit على إعادة المحاولة أو محاولة إصلاح الناتج إذا لم يتطابق مع المخطط.

المزايا الرئيسية لمخططات الإخراج

  • دمج مبسط: يمكنك بسهولة دمج البيانات المنظَّمة في عناصر واجهة المستخدم لتطبيقك.
  • التحقّق من صحة البيانات: ضمان دقة المخرجات التي يتم إنشاؤها واتساقها
  • معالجة الأخطاء: نفِّذ آليات لمعالجة حالات عدم تطابق المخطط.

يؤدي الاستفادة من مخططات الإخراج إلى تحسين تجربتك في Genkit، ما يتيح لك إنشاء بيانات منظَّمة مخصّصة لتوفير تجارب مستخدم أكثر ثراءً وديناميكية.

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

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

  1. في أداة تعديل الرموز، افحص ملف الطلب:
    1. افتح ملف prompts/imgDescription.prompt.
    2. لاحظ تضمين {{media url=this}}، وهو عنصر من بنية Handlebars يسهّل دمج الصور في طلبك.
  2. التفاعل مع واجهة المستخدم:
    1. في واجهة مستخدم Genkit Developer، افتح طلب prompts/imgDescription.
    2. أدخِل عنوان URL لصورة في الحقل imageUrls من خلال لصق عنوان URL لصورة. على سبيل المثال، يمكنك استخدام صورة مصغّرة من ويكيبيديا تعرض برج إيفل:
      {
    "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"
    ]
}
    3. انقر على تشغيل.

7. تنفيذ عملية الاسترجاع باستخدام البحث عن التشابه بين المتجهات

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

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

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

فهم التضمينات والتشابه بين المتجهات

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

فهم طريقة عمل عملية الاسترداد

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

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

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

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

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

  1. أنشئ الفهرس، مع الحرص على استبدال YOUR_PROJECT_ID برقم تعريف مشروعك.
    • في أجهزة macOS / Linux
    gcloud firestore indexes composite create \
--project=YOUR_PROJECT_ID \
--collection-group=places \
--query-scope=COLLECTION \
--field-config field-path=embedding,vector-config='{"dimension":"768","flat":"{}"}'
    • لنظام التشغيل Windows (‏PowerShell)
    gcloud firestore indexes composite create `
--project=YOUR_PROJECT_ID `
--collection-group=places `
--query-scope=COLLECTION `
--field-config="field-path=embedding,vector-config={'dimension':'768','flat':'{}'}"
  2. في واجهة مستخدم Genkit Developer، افتح retrievers/placesRetriever.
  3. انقر على تشغيل. راقِب العنصر الذي تم إنشاؤه باستخدام نص العنصر النائب، ما يشير إلى المكان الذي ستنفّذ فيه منطق أداة الاسترجاع.
  4. في أداة تعديل الرموز، افتح الملف src/lib/genkit/placesRetriever.ts.
  5. انتقِل إلى أسفل الصفحة واستبدِل العنصر النائب placesRetriever بما يلي:
    export const placesRetriever = defineFirestoreRetriever(ai, {
  name: 'placesRetriever',
  firestore,
  collection: 'places',
  contentField: 'knownFor',
  vectorField: 'embedding',
  embedder: vertexAI.embedder('text-embedding-005', {outputDimensionality: 768}),
  distanceMeasure: 'COSINE',
});

اختبار أداة الاسترجاع

  1. في واجهة مستخدم Genkit Developer، افتح retrievers/placesRetriever أداة الاسترجاع.
  2. قدِّم طلب البحث التالي:
    {
    "content": [
        {
            "text": "UNESCO"
        }
    ]
}
  3. يمكنك أيضًا تقديم خيارات. على سبيل المثال، إليك كيفية تحديد عدد المستندات التي يجب أن يستردّها برنامج الاسترداد:
    {
    "limit": 4
}
  4. انقر على تشغيل.

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

8. التوليد المعزّز بالاسترجاع (RAG) باستخدام Genkit

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

يتناول هذا القسم مفهومًا مهمًا في Genkit يُعرف باسم عمليات التنفيذ. Flows هي دوال قابلة للبث ومحدّدة الأنواع بشكل صارم، ويمكن استدعاؤها محليًا وعن بُعد، مع إمكانية المراقبة الكاملة. يمكنك إدارة عمليات التنفيذ واستدعاؤها من كلّ من واجهة سطر الأوامر (CLI) في Genkit وواجهة مستخدم المطوّرين في Genkit.

  1. في أداة تعديل الرموز، افحص طلب إنشاء خطة الرحلة:
    1. افتح ملف prompts/itineraryGen.prompt.
    2. لاحظ كيف تم توسيع الطلب لقبول مدخلات إضافية، وتحديدًا بيانات الأنشطة المستندة إلى أداة الاسترجاع.
  2. في واجهة مستخدم Genkit Developer، اعرض مسار Genkit في ملف src/lib/genkit/itineraryFlow.ts.
    ملاحظة: لتسهيل عملية تصحيح الأخطاء، ننصحك بتقسيم المسارات الطويلة إلى خطوات أصغر يمكن إدارتها.
  3. حسِّن المسار من خلال دمج خطوة "وصف الصورة":
    1. ابحث عن التعليق TODO: 2 (حوالي السطر 81). يحدّد هذا المكان الذي ستعزّز فيه مسارك.
    2. استبدِل العنصر النائب الفارغ imgDescription بالكتلة ai.run('imgDescription', ...) التي تنشئ وصفًا من tripDetails.imageUrls.
  4. اختبار المسار:
    1. انتقِل إلى flows/itineraryFlow.
    2. استخدِم الإدخال التالي لاختبار التنفيذ الناجح لـ itineraryFlow باستخدام الخطوة التي أضفتها حديثًا:
      {
    "request": "Sightseeing in Paris",
    "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"
    ]
}
    3. انقر على تشغيل.
    4. راجِع الناتج الذي تم إنشاؤه، والذي من المفترض أن يتضمّن وصف الصورة في اقتراح خطة الرحلة.
  5. إذا واجهت أي أخطاء أو سلوكيات غير متوقّعة، انقر على عرض التتبُّع للاطّلاع على التفاصيل. يمكنك أيضًا استخدام علامة التبويب هذه لمراجعة سجلّ عمليات التنفيذ من Trace Store.

استخدام RAG في تطبيق الويب

  1. تأكَّد من أنّ تطبيق الويب لا يزال قيد التشغيل من خلال الانتقال إلى http://localhost:3000/‎ في المتصفّح.
  2. إذا لم يعُد تطبيق الويب قيد التشغيل، شغِّل الأوامر التالية في الوحدة الطرفية:
    npm install
npm run dev
  3. اطّلِع على صفحة تطبيق الويب Dream Your Vacation (http://localhost:3000/gemini).
  4. اطّلِع على رمز المصدر (src/app/gemini/page.tsx) للحصول على مثال على الدمج مع Next.js.

1e626124e09e04e9.pngb059decb53c249a1.pnge31f6acf87a98cb2.png19c0c9459d5e1601.png

9. نشر تطبيقك باستخدام Firebase App Hosting

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

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

مراقبة حالة النشر

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

منح الأذونات لحساب الخدمة

لكي يتمكّن الخلفية المستندة إلى Node.js من الوصول إلى موارد Vertex AI، عليك منح دور aiplatform.user لحساب الخدمة الخاص بتطبيقك:

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
--member "serviceAccount:firebase-app-hosting-compute@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
--role "roles/aiplatform.user"

بعد اكتمال عملية الإعداد، سيتمكّن المستخدمون من الوصول إلى تطبيق الويب.

إعادة النشر التلقائي

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

10. الخاتمة

تهانينا على إكمال هذا الدرس التطبيقي الشامل حول الترميز.

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

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

  • إدارة الطلبات: تنظيم الطلبات والحفاظ عليها كرموز برمجية لتحسين التعاون والتحكّم في الإصدارات
  • المحتوى المتعدّد الوسائط: دمج أنواع مختلفة من البيانات، مثل الصور والنصوص، لتحسين التفاعلات مع الذكاء الاصطناعي
  • مخططات الإدخال/الإخراج: تنظيم البيانات لدمجها والتحقّق من صحتها بسلاسة في تطبيقك
  • مخازن المتّجهات: الاستفادة من تضمينات المتّجهات لإجراء عمليات بحث فعّالة عن التشابه واسترجاع المعلومات ذات الصلة.
  • استرجاع البيانات: تنفيذ آليات لجلب البيانات ودمجها من قواعد البيانات في المحتوى من إنشاء الذكاء الاصطناعي
  • التوليد المعزّز بالاسترجاع (RAG): الجمع بين أساليب الاسترجاع والذكاء الاصطناعي التوليدي للحصول على نتائج دقيقة وملائمة للسياق
  • أدوات قياس حالة التطبيق لسير العمل: إنشاء وتنظيم سير عمل معقّد للذكاء الاصطناعي من أجل تنفيذ سلس وقابل للمراقبة

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

استكشاف خيارات النشر البديلة

توفّر Genkit مجموعة متنوعة من خيارات النشر لتلبية احتياجاتك المحددة، بما في ذلك:

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

npx genkit start

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