إنشاء ميزات تستند إلى الذكاء الاصطناعي التوليدي وتعتمد على بياناتك باستخدام 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 App Hosting الجديدة المبسّطة لعرض تطبيق الويب الديناميكي 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 وانقر على السماح.

تثبيت واجهة سطر الأوامر (CLI) في Google Cloud‏ (gcloud)

  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 Hosting بدون تحديد علامة فيه، لأنّك ستُعدّ خدمة استضافة بشكل اختياري في الخطوة الأخيرة من هذا الدرس البرمجي.
    تسجيل تطبيق الويب
  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 CLI لإعداد 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 في وحدة تحكّم Firebase.من المفترض أن يظهر لك مخطط البيانات التي تم استيرادها ومحتوياتها.بيانات نموذجية في Compass في &quot;وحدة تحكّم Firebase&quot;

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

يجب ربط قاعدة رموز تطبيق الويب بمشروع Firebase الصحيح للاستفادة من خدماته، مثل قاعدة البيانات. لإجراء ذلك، عليك إضافة إعدادات Firebase إلى قاعدة رموز تطبيقك. يتضمّن هذا الإعداد قيمًا أساسية، مثل رقم تعريف مشروعك ومفتاح واجهة برمجة التطبيقات (API) ورقم تعريف التطبيق، بالإضافة إلى قيم أخرى تتيح لتطبيقك التفاعل مع 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 App Hosting.

ربط تطبيق 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 يُعرف باسم عمليات التنفيذ. عمليات التنفيذ هي دوال قابلة للبث ومحدّدة الأنواع يمكن استدعاؤها محليًا وعن بُعد، مع إمكانية المراقبة الكاملة. يمكنك إدارة عمليات التنفيذ واستدعاؤها من كلٍّ من واجهة سطر الأوامر (CLI) وواجهة المستخدم الخاصة بالمطوّرين في 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/500px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
    ]
}
    3. انقر على تشغيل.
    4. راجِع الناتج الذي تم إنشاؤه، والذي من المفترض أن يتضمّن وصف الصورة في اقتراح خطة الرحلة.
  5. في حال مواجهة أي أخطاء أو سلوكيات غير متوقّعة، انقر على عرض التتبُّع للاطّلاع على التفاصيل. يمكنك أيضًا استخدام علامة التبويب هذه لمراجعة سجلّ عمليات التنفيذ من مخزن التتبُّع.

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، وهو حل استضافة متوافق مع الأُطر ومصمّم لتبسيط عملية نشر تطبيقات 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

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