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

1- قبل البدء

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

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

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

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

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

  • كيفية إنشاء تطبيقات أكثر ذكاءً باستخدام إمكانات البحث المتقدم عن تشابه المتجهات في Firestore
  • طريقة التنفيذ العملي للذكاء الاصطناعي التوليدي في تطبيقاتك باستخدام Firebase 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، ثم انقر على رمز به أقواس مع زاوية مفتوحة وشرطة مائلة وأقواس زاوية إغلاق، ما يمثّل تطبيق ويب الويب.زر الويب أعلى &quot;نظرة عامة على المشروع&quot; في وحدة تحكُّم Firebase
  2. في مربّع النص اسم التطبيق، أدخِل لقب تطبيق لا ينسى، مثل My Compass Codelab App. يمكنك ترك مربّع الاختيار لإعداد استضافة Firebase بدون وضع علامة، لأنّك تستطيع إعداد خدمة استضافة في الخطوة الأخيرة من هذا الدرس التطبيقي حول الترميز.
    تسجيل تطبيق الويب
  3. انقر على تسجيل التطبيق > انتقِل إلى وحدة التحكّم.

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

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

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

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

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

تفعيل Cloud Firestore

  1. انتقل إلى إنشاء > قاعدة بيانات Firestore باستخدام جزء التنقل الأيمن.
  2. انقر على إنشاء قاعدة بيانات.
  3. اترك معرّف قاعدة البيانات مضبوطًا على (default).
  4. اختَر موقع Cloud Firestore المفضّل لديك (أو اتركه كإعداد تلقائي).
  5. انقر على التالي.
  6. اختَر البدء في وضع الاختبار.
  7. انقر على إنشاء.

تفعيل Vertex AI

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

  1. في الوحدة الطرفية، اضبط المشروع التلقائي لحزمة Google Cloud SDK:
    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
  4. امنح الأذونات لحساب الخدمة الخاص بك:
    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"

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

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

ضبط واجهة سطر الأوامر في Firebase لاستهداف مشروعك

  1. في الوحدة الطرفية، انتقِل إلى الدليل الجذري الخاص بمشروع الدرس التطبيقي حول الترميز.
  2. لتمكين واجهة سطر الأوامر في Firebase من تنفيذ جميع الأوامر على مشروع 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

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

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

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

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

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

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

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

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

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

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

6- التعرّف على الذكاء الاصطناعي التوليدي مع Genkit

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

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

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

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

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

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

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

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

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

التفاعل مع Gemini

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

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

التفاعل مع نموذج Gemini في واجهة مستخدم المطوّرين على Genkit

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

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

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

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

تحسين النتائج باستخدام البيانات المنظَّمة

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

استكشاف مخططات الإخراج

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

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

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

التعرّف على الإخراج المستنِد إلى المخطط

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

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

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

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

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

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

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

  1. في أداة تعديل الرموز، افحص ملف الطلب:
    1. افتح ملف genkit-functions/prompts/imgDescription.prompt.
    2. يُرجى العِلم أنّه يتم تضمين {{media url=this}}، وهو عنصر في بنية Handlebars يسهّل دمج الصور في طلبك.
  2. التفاعل مع واجهة المستخدم:
    1. في واجهة مستخدم المطوِّرين Genkit، افتح الطلب dotprompt/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. في الوحدة الطرفية، شغِّل الأمر التالي لتثبيت أحدث مكوّن alpha. تحتاج إلى الإصدار 2024.05.03 أو إصدار أحدث:
    gcloud components install alpha
  2. أنشِئ الفهرس، مع الحرص على استبدال YOUR_PROJECT_ID برقم تعريف مشروعك.
    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. في واجهة مستخدم المطوِّرين Genkit، افتح placesRetriever.
  4. انقر على تشغيل. راقب الكائن المتوفر بوحدات مع نص العنصر النائب، مع الإشارة إلى المكان الذي ستنفذ فيه منطق أداة استرداد البيانات.
  5. في أداة تعديل الرموز، افتح ملف genkit-functions/src/lib/placesRetriever.ts.
  6. انتقِل للأسفل واستبدِل العنصر النائب placesRetriever بما يلي:
    export const placesRetriever = defineFirestoreRetriever({
  name: 'placesRetriever',
  firestore,
  collection: 'places',
  contentField: 'knownFor',
  vectorField: 'embedding',
  embedder: textEmbeddingGecko,
  distanceMeasure: 'COSINE',
});

اختبار برنامج الاسترجاع

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

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

8- استرجاع البيانات بالجيل المعزز (RAG) بواسطة Genkit

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

يتناول هذا القسم مفهومًا مهمًا من Genkit يُسمى flows. إنّ التدفقات هي دوال ذات كتابة عالية وقابلة للبث يمكن استدعاءها محليًا وعن بُعد، مع إمكانية ملاحظتها بالكامل. يمكنك إدارة التدفقات واستدعاءها من كلٍّ من واجهة سطر الأوامر في Genkit وواجهة مستخدم مطوّري برامج Genkit.

  1. في أداة تعديل الرموز، راجِع طلب برنامج الرحلة:
    1. افتح ملف genkit-functions/prompts/itineraryGen.prompt.
    2. يُرجى العلم أنّه تم توسيع الطلب لقبول إدخالات إضافية، وتحديدًا بيانات الأنشطة التي تم الحصول عليها من برنامج الاسترجاع.
  2. في واجهة مستخدم المطوّرين Genkit، يمكنك الاطّلاع على مسار Genkit في ملف genkit-functions/src/lib/itineraryFlow.ts.
    ملاحظة: لتبسيط تصحيح الأخطاء، يمكنك تقسيم الخطوات الطويلة إلى خطوات أصغر يسهل إدارتها.
  3. تحسين عملية إنشاء الفيديو من خلال دمج "وصف الصورة" الخطوة:
    1. حدِّد مكان التعليق TODO: 2 (بالقرب من السطر 70). هذا يحدد المكان الذي ستحسّن فيه التدفق.
    2. استبدِل العنصر النائب الفارغ imgDescription بالإخراج الذي تم إنشاؤه من خلال استدعاء الطلب imgDescription.
  4. اختبر التدفق:
    1. انتقِل إلى 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. إذا واجهت أي أخطاء أو سلوكيات غير متوقعة، تحقَّق من علامة التبويب فحص للاطّلاع على التفاصيل. يمكنك أيضًا استخدام علامة التبويب هذه لمراجعة سجلّ عمليات التنفيذ من متجر التتبُّع.

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.png b059decb53c249a1.png e31f6acf87a98cb2.png 19c0c9459d5e1601.png

9- نشر تطبيقك باستخدام "استضافة التطبيقات على Firebase"

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

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

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

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

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

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

10- الخاتمة

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

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

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

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

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

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

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

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

npx genkit init

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