1- قبل البدء
في هذا الدليل التعليمي حول رموز البرامج، ستتعرّف على كيفية استخدام Firebase Genkit لدمج الذكاء الاصطناعي التوليدي في تطبيقك. Firebase Genkit هو إطار عمل مفتوح المصدر يساعدك في إنشاء تطبيقات مستندة إلى الذكاء الاصطناعي وجاهزة للنشر ومراقبتها.
تم تصميم Genkit لمطوّري التطبيقات لمساعدتهم في دمج إمكانات الذكاء الاصطناعي القوية في تطبيقاتهم بسهولة باستخدام أنماط ومفاهيم مألوفة. تم إنشاء هذا النموذج بواسطة فريق Firebase، مستفيدًا من خبرتنا في إنشاء الأدوات التي يستخدمها ملايين من المطوّرين حول العالم.
المتطلبات الأساسية
- معرفة بـ Firestore وNode.js وTypeScript
المعلومات التي ستطّلع عليها
- كيفية إنشاء تطبيقات أكثر ذكاءً باستخدام إمكانات البحث المتقدّمة عن تشابه المتجهات في Firestore
- طريقة التنفيذ العملي للذكاء الاصطناعي التوليدي في تطبيقاتك باستخدام Firebase Genkit.
- تجهيز الحلّ للنشر والدمج
المتطلبات
- متصفّح من اختيارك، مثل Google Chrome
- بيئة تطوير تتضمّن محرِّر رموز ووحدة تحكّم
- حساب Google لإنشاء مشروعك على Firebase وإدارته
2- مراجعة تطبيق الويب وخدمات السحابة الإلكترونية المستخدَمة
في هذا القسم، ستراجع تطبيق الويب الذي ستُنشئه باستخدام ورشة رموز البرمجة هذه، وستتعرّف أيضًا على خدمات السحابة الإلكترونية التي ستستخدمها.
تطبيق الويب
في هذا الدرس التطبيقي حول الترميز، ستعمل على قاعدة رموز تطبيق يُدعى Compass، وهو تطبيق للتخطيط للعطلات. ويمكن للمستخدمين اختيار وجهة والاطّلاع على الأنشطة في الوجهة وإنشاء برنامج رحلة لرحلتهم.
في هذا الدرس التطبيقي حول الترميز، عليك تنفيذ ميزتَين جديدتَين تهدفان إلى تحسين تفاعل المستخدمين مع الصفحة الرئيسية للتطبيق. تستند هاتان الميزتان إلى الذكاء الاصطناعي التوليدي، وهما:
- يعرض التطبيق حاليًا قائمة ثابتة من الوجهات. ستُغيّر ذلك ليصبح ديناميكيًا.
- ستنفّذ برنامجًا زمنيًا يتم تعبئته تلقائيًا لزيادة مدة الإقامة على أمل زيادة عدد المستخدمين المكرّرين.
الخدمات المستخدَمة
في هذا الدليل التعليمي حول الرموز البرمجية، ستستخدم العديد من خدمات Firebase وCloud وميزاتها، وسيتم توفير معظم الرموز البرمجية الأساسية لها. يتضمن الجدول التالي الخدمات التي ستستخدمها وأسباب استخدامها.
الخدمة | سبب الاستخدام |
يمكنك استخدام Genkit لجلب الذكاء الاصطناعي التوليدي إلى تطبيق Node.js أو Next.js. | |
وتقوم بتخزين البيانات في Cloud Firestore، والتي تُستخدم بعد ذلك للبحث عن تشابه المتجه. | |
استخدام نماذج أساسية من Vertex AI (مثل Gemini) لتعزيز ميزات الذكاء الاصطناعي | |
يمكنك اختياريًا استخدام ميزة "استضافة التطبيقات على Firebase" الجديدة والمبسّطة لعرض تطبيق الويب الديناميكي Next.js (المتصل بمستودع GitHub). |
3- إعداد بيئة التطوير
التحقّق من إصدار Node.js
- في الوحدة الطرفية، تأكَّد من تثبيت الإصدار 20.0.0 أو إصدار أحدث من Node.js:
node -v
- إذا لم يكن لديك الإصدار 20.0.0 أو إصدار أحدث من Node.js، يمكنك تنزيل أحدث إصدار من قناة الدعم الطويل الأمد (LTS) وتثبيته.
الحصول على رمز المصدر للدرس التطبيقي حول الترميز
إذا كان لديك حساب على GitHub:
- أنشئ مستودعًا جديدًا باستخدام النموذج الذي نوفره من github.com/FirebaseExtended/codelab-ai-genkit-rag
- أنشئ نسخة طبق الأصل على الجهاز من مستودع GitHub الذي أنشأته للتو في دورة تعلم البرمجة:
git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
في حال عدم تثبيت git أو إذا كنت تفضّل عدم إنشاء مستودع جديد، نفِّذ ما يلي:
مراجعة بنية المجلد
على جهازك المحلي، ابحث عن المستودع المستنسخ وراجع بنية المجلد:
مجلد | الوصف |
| رمز Genkit للخلفية |
| أداة سطر أوامر مساعِدة لتعبئة مجموعة Firestore مسبقًا بسرعة |
*كل شيء آخر | رمز تطبيق الويب Next.js |
يتضمّن المجلد الجذر ملف README.md
يقدّم بدءًا سريعًا لتشغيل تطبيق الويب باستخدام تعليمات مبسّطة. ومع ذلك، إذا كنت متعلمًا لأول مرة، عليك إكمال هذا الدرس التطبيقي حول الترميز (بدلاً من البدء السريع) لأن هذا الدرس التطبيقي يحتوي على مجموعة من التعليمات الأكثر شمولاً.
إذا لم تكن متأكدًا مما إذا كنت قد طبّقت الرمز بشكل صحيح وفقًا للتعليمات الواردة في هذا الدرس التطبيقي، يمكنك العثور على رمز الحلّ في فرع git في end
.
تثبيت واجهة سطر الأوامر في Firebase
- تأكَّد من تثبيت واجهة سطر الأوامر في Firebase ومن أنّه الإصدار 13.6 أو إصدار أحدث:
firebase --version
- إذا كان لديك Firebase CLI مثبّتًا، ولكن ليس الإصدار 13.6 أو إصدار أحدث، عليك تحديثه:
npm update -g firebase-tools
- إذا لم يكن لديك Firebase CLI مثبّتًا، ثبِّته باتّباع الخطوات التالية:
npm install -g firebase-tools
إذا تعذّر عليك تحديث واجهة سطر الأوامر في Firebase أو تثبيته بسبب أخطاء في الأذونات، راجِع مستندات npm أو استخدِم خيار تثبيت آخر.
تسجيل الدخول إلى Firebase
- في وحدة التحكّم، سجِّل الدخول إلى Firebase:
إذا أظهرت المحطة الطرفية أنّك سجّلت الدخول إلى Firebase، يمكنك الانتقال إلى قسم إعداد مشروعك على Firebase في هذا الدليل التعليمي.firebase login
- في الوحدة الطرفية، بناءً على ما إذا كنت تريد أن يجمع Firebase البيانات، أدخِل
Y
أوN
. (يصلح أي من الخيارين مع هذا الدرس التطبيقي حول الترميز) - في المتصفّح، اختَر حسابك على Google وانقر على السماح.
تثبيت gcloud CLI في Google Cloud
- تثبيت gcloud CLI
- في وحدة التحكّم، سجِّل الدخول إلى Google Cloud:
gcloud auth login
4. إعداد مشروع Firebase
في هذا القسم، يمكنك إعداد مشروع Firebase وتسجيل تطبيق ويب Firebase فيه. ستُفعِّل أيضًا بعض الخدمات التي يستخدمها نموذج تطبيق الويب لاحقًا في هذا الدرس التطبيقي حول الترميز.
يتم تنفيذ جميع الخطوات الواردة في هذا القسم في "وحدة تحكُّم Firebase".
إنشاء مشروع على Firebase
- سجِّل الدخول إلى وحدة تحكُّم Firebase باستخدام حساب Google نفسه الذي استخدمته في الخطوة السابقة.
- انقر على إنشاء مشروع، ثم أدخِل اسمًا للمشروع (مثل
Compass Codelab
).
تذكَّر رقم تعريف المشروع الذي تمّ تعيينه تلقائيًا لمشروعك على Firebase (أو انقر على رمز تعديل لضبط رقم تعريف المشروع المفضّل لديك). ستحتاج إلى رقم التعريف هذا لاحقًا لتحديد مشروعك على Firebase في واجهة Firebase CLI. إذا نسيت رقم التعريف، يمكنك العثور عليه لاحقًا في إعدادات المشروع. - انقر على متابعة.
- راجِع بنود Firebase واقبلها، ثم انقر على متابعة إذا طُلب منك ذلك.
- بالنسبة إلى هذا الدرس التطبيقي حول الترميز، لا تحتاج إلى "إحصاءات Google"، لذا ننصحك بإيقاف خيار "إحصاءات Google".
- انقر على إنشاء مشروع، وانتظِر حتى يتم توفير مشروعك، ثم انقر على متابعة.
إضافة تطبيق ويب إلى مشروعك على Firebase
- انتقِل إلى شاشة نظرة عامة على المشروع في مشروع Firebase، ثم انقر على الويب.
- في مربّع النص لقب التطبيق، أدخِل لقبًا سهل التذكر للتطبيق، مثل
My Compass Codelab App
. يمكنك ترك مربّع الاختيار لإعداد استضافة Firebase بدون وضع علامة، لأنّك تستطيع إعداد خدمة استضافة في الخطوة الأخيرة من هذا الدرس التطبيقي حول الترميز. - انقر على تسجيل التطبيق > المتابعة إلى وحدة التحكّم.
رائع. لقد سجَّلت الآن تطبيق ويب في مشروعك الجديد على Firebase.
ترقية خطة أسعار Firebase
لاستخدام Firebase Genkit وVertex AI (وخدمات السحابة الإلكترونية الأساسية الخاصة بهما)، يجب أن يكون مشروعك على Firebase ضمن خطة تسعير "الدفع حسب الاستخدام" (Blaze)، ما يعني أنّه مرتبط بحساب فوترة على Cloud.
- يتطلب حساب الفوترة في Cloud طريقة دفع، مثل بطاقة الائتمان.
- إذا كنت مستخدمًا جديدًا لمنصة Firebase وGoogle Cloud، يُرجى التحقّق من أهليتك للحصول على رصيد بقيمة 300 دولار أمريكي وحساب فوترة تجريبي مجاني على Cloud.
- إذا كنت تشارك في هذا الإصدار التجريبي من رمز المصدر كجزء من حدث، اسأل المنظِّم ما إذا كانت هناك أي أرصدة متاحة في Cloud.
مزيد من المعلومات عن أسعار Vertex AI
لترقية مشروعك إلى خطة Blaze، اتّبِع الخطوات التالية:
- في "وحدة تحكُّم Firebase"، اختَر ترقية خطتك.
- اختَر خطة Blaze. اتّبِع التعليمات الظاهرة على الشاشة لربط حساب "فوترة على Cloud" بمشروعك.
إذا كنت بحاجة إلى إنشاء حساب "فوترة على Cloud" كجزء من هذه الترقية، قد تحتاج إلى الرجوع إلى مسار الترقية في وحدة تحكّم Firebase لإكمال الترقية.
إعداد Cloud Firestore
- في اللوحة اليمنى من "وحدة تحكّم Firebase"، وسِّع الإنشاء، ثم اختَر قاعدة بيانات Firestore.
- انقر على إنشاء قاعدة بيانات.
- اترك معرّف قاعدة البيانات مضبوطًا على
(default)
. - اختَر موقعًا لقاعدة بياناتك، ثم انقر على التالي.
بالنسبة إلى التطبيق الحقيقي، عليك اختيار موقع قريب من المستخدمين. - انقر على البدء في وضع الاختبار. اقرأ بيان إخلاء المسؤولية عن قواعد الأمان.
لا توزِّع تطبيقًا أو تعرضه للجميع بدون إضافة قواعد أمان لقاعدة بياناتك. - انقر على إنشاء.
تفعيل Vertex AI
استخدِم واجهة سطر الأوامر gcloud
لإعداد Vertex AI. للاطّلاع على كل الأوامر في هذه الصفحة، تأكَّد من استبدال YOUR_PROJECT_ID
برقم تعريف مشروع Firebase.
- في الوحدة الطرفية، اضبط المشروع التلقائي لحزمة Google Cloud SDK:
gcloud config set project YOUR_PROJECT_ID
- إذا ظهرت لك رسالة تحذير مفادها "تحذير: لا يتطابق مشروعك النشط مع مشروع الحصة في ملف "بيانات الاعتماد التلقائية للتطبيق" المحلي. قد يؤدي ذلك إلى مشاكل غير متوقَّعة في الحصة."، بعد ذلك، شغِّل الأمر التالي لإعداد مشروع الحصة:
gcloud auth application-default set-quota-project YOUR_PROJECT_ID
- تفعيل خدمة Vertex AI في مشروعك:
gcloud services enable aiplatform.googleapis.com
5- إعداد تطبيق الويب
لتشغيل تطبيق الويب، عليك تنفيذ الأوامر في وحدة التحكّم الطرفية وإضافة رمز في محرِّر الرموز. بالنسبة إلى جميع الأوامر الواردة في هذه الصفحة، احرص على استبدال YOUR_PROJECT_ID
برقم تعريف مشروعك على Firebase.
ضبط واجهة سطر الأوامر في Firebase لاستهداف مشروعك
- في الوحدة الطرفية، انتقِل إلى الدليل الجذري الخاص بمشروع الدرس التطبيقي حول الترميز.
- لتمكين واجهة سطر الأوامر في Firebase من تنفيذ جميع الأوامر على مشروع Firebase، شغِّل الأمر التالي:
firebase use YOUR_PROJECT_ID
استيراد نموذج البيانات إلى Firestore
حتى تتمكن من البدء بسرعة، يزوِّدك هذا الدرس التطبيقي حول الترميز بنماذج بيانات تم إنشاؤها مسبقًا لـ Firestore.
- للسماح لقاعدة الرموز المحلية بتشغيل رمز يستخدم حساب خدمة عادةً، شغِّل الأمر التالي في الوحدة الطرفية:
سيؤدي هذا إلى فتح علامة تبويب جديدة في المتصفّح. سجِّل الدخول باستخدام حساب Google نفسه الذي استخدمته في الخطوات السابقة.gcloud auth application-default login
- لاستيراد نموذج بيانات Firestore، نفِّذ الأوامر التالية:
cd load-firestore-data npm ci node index.js YOUR_PROJECT_ID cd ..
- تحقّق من إضافة البيانات بنجاح إلى قاعدة بياناتك عن طريق الانتقال إلى القسم Firestore ضِمن مشروع Firebase في وحدة تحكُّم Firebase.ومن المفترض أن يظهر لك مخطط البيانات التي تمّ استيرادها ومحتواه.
ربط تطبيق الويب بمشروعك على Firebase
يجب ربط قاعدة بيانات تطبيق الويب بمشروع Firebase الصحيح للاستفادة من خدماته، مثل قاعدة البيانات. ولإجراء ذلك، عليك إضافة إعدادات Firebase إلى قاعدة بيانات تطبيقك. وتتضمّن هذه الإعدادات قيمًا أساسية، مثل رقم تعريف المشروع ومفتاح واجهة برمجة التطبيقات ورقم تعريف التطبيق، بالإضافة إلى قيم أخرى تتيح لتطبيقك التفاعل مع Firebase.
- الحصول على ضبط Firebase لتطبيقك:
- في "وحدة تحكُّم Firebase"، انتقِل إلى مشروعك على Firebase.
- في اللوحة اليمنى، انقر على رمز الترس بجانب نظرة عامة على المشروع واختَر إعدادات المشروع.
- في بطاقة "تطبيقاتك"، اختَر تطبيق الويب.
- ضمن قسم "إعداد حزمة تطوير البرامج (SDK) وضبطها"، اختَر الخيار الضبط.
- انسخ المقتطف. يبدأ بـ
const firebaseConfig ...
.
- أضِف إعداد Firebase إلى قاعدة رموز تطبيق الويب:
- في محرِّر الرموز البرمجية، افتح ملف
src/lib/genkit/genkit.config.ts
. - استبدِل القسم ذي الصلة بالرمز الذي نسخته.
- احفظ الملف.
- في محرِّر الرموز البرمجية، افتح ملف
معاينة تطبيق الويب في المتصفّح
- في الوحدة الطرفية، ثبِّت التبعيات ثم شغِّل تطبيق الويب:
npm install npm run dev
- في المتصفّح، انتقِل إلى عنوان URL الخاص بالمضيف المستضاف محليًا لعرض تطبيق الويب. على سبيل المثال، في معظم الحالات، يكون عنوان URL هو http://localhost:3000/ أو ما شابه ذلك.
Compass هو تطبيق Next.js يستخدم React Server Components، وهذه هي الصفحة الرئيسية.
انقر على العثور على رحلة أحلامي. يمكنك ملاحظة أنّه يعرض حاليًا بعض البيانات المضمّنة في الرمز البرمجي لبعض الوجهات الثابتة:
لا تتردد في الاستكشاف. عندما تكون مستعدًا للمتابعة، انقر على زر الشاشة الرئيسية (في أعلى يسار الصفحة).
6- التعرّف على الذكاء الاصطناعي التوليدي مع Genkit
أصبحت الآن مستعدًا للاستفادة من ميزات الذكاء الاصطناعي التوليدي في تطبيقك. سيرشدك هذا القسم من الدرس التطبيقي حول الترميز خلال تنفيذ ميزة تقترح الوجهات بناءً على الإلهام الذي يقدّمه المستخدم. ستستخدم Firebase Genkit وGoogle Cloud's Vertex AI كموفّر للنموذج التوليدي (أنت ستستخدم Gemini).
يمكن أن تخزِّن أداة Genkit عمليات التتبُّع وحالة المسار (ما يتيح لك فحص نتيجة تنفيذ مسارات Genkit). في هذا الدرس التطبيقي حول الترميز، ستستخدم Firestore لتخزين بيانات آثار الأنشطة.
كخطوة أخيرة في هذا الدرس التطبيقي، عليك نشر تطبيق Genkit في Firebase App Hosting.
ربط تطبيق Genkit بمشروعك على Firebase
قبل أن تتمكّن من إطلاق Genkit، يجب ربط قاعدة بياناتك بمشروع Firebase الصحيح للاستفادة من خدماته، مثل قاعدة البيانات. ولإجراء ذلك، عليك إضافة إعدادات Firebase إلى قاعدة بيانات تطبيق Genkit. تتضمّن عملية الضبط هذه قيمًا أساسية، مثل رقم تعريف مشروعك ومفتاح واجهة برمجة التطبيقات ورقم تعريف تطبيقك، بالإضافة إلى قيم أخرى تتيح لتطبيقك التفاعل مع Firebase.
- الحصول على ضبط Firebase لتطبيقك:
- في "وحدة تحكُّم Firebase"، انتقِل إلى مشروعك في Firebase.
- في اللوحة اليمنى، انقر على رمز الترس بجانب نظرة عامة على المشروع واختَر إعدادات المشروع.
- في بطاقة "تطبيقاتك"، اختَر تطبيق الويب.
- ضمن قسم "إعداد حزمة تطوير البرامج (SDK) وضبطها"، اختَر الخيار الضبط.
- انسخ المقتطف. ويبدأ بـ
const firebaseConfig ...
.
- أضِف إعدادات Firebase لتطبيقك إلى قاعدة رموز تطبيق Genkit:
- في أداة تعديل الرموز، افتح ملف
genkit-functions/src/lib/genkit.config.ts
. - استبدِل القسم ذي الصلة بالرمز الذي نسخته.
- احفظ الملف.
- في أداة تعديل الرموز، افتح ملف
تشغيل واجهة مستخدم مطوّري برامج Genkit
تتوفّر Genkit مع واجهة مستخدم مستنِدة إلى الويب تتيح لك التفاعل مع النماذج اللغوية الكبيرة وتدفقات Genkit وأدوات الاسترداد وغيرها من مكونات الذكاء الاصطناعي.
- إطلاق واجهة مستخدم مطوّري برامج Genkit:
- افتح نافذة محطة طرفية جديدة.
- انتقِل إلى جذر الدليل
genkit-functions
. - شغّل الأمر التالي لبدء واجهة مستخدم مطور Genkit:
cd genkit-functions npx genkit start
- في المتصفِّح، انتقِل إلى عنوان URL لـ Genkit والمُستضاف محليًا. وفي معظم الحالات، يكون العنوان هو http://localhost:4000/.
التفاعل مع Gemini
يمكنك الآن استخدام واجهة مستخدم المطوّرين في Genkit للتفاعل مع أي من النماذج المتوافقة أو أي من مكونات الذكاء الاصطناعي الأخرى، مثل الطلبات وأدوات استرداد البيانات ومسارات Genkit.
على سبيل المثال، يمكنك طلب اقتراح عطلة من Gemini. وضِّح كيفية استخدام تعليمات النظام لتوجيه سلوك النموذج استنادًا إلى احتياجاتك المحدّدة. وينطبق ذلك أيضًا على النماذج التي لا تتيح تعليمات النظام في الأصل.
إدارة رسائل المطالبة
يقدّم Firebase Genkit Dotprompt، وهو مكوّن إضافي وتنسيق نصي مصمَّم لتبسيط إنشاء الطلبات المستنِدة إلى الذكاء الاصطناعي التوليدي وإدارتها. إنّ الفكرة الأساسية وراء Dotprompt هي التعامل مع الطلبات كرموز برمجية، ما يتيح لك كتابتها وصيانتها والتحكّم في إصدارها إلى جانب رمز التطبيق.
لاستخدام Dotprompt، يمكنك البدء بعالم مرحبًا:
- في أداة تعديل الرموز، افتح ملف
genkit-functions/prompts/1-hello-world.prompt
. - في واجهة مستخدم المطوِّرين Genkit، افتح
dotprompt/1-hello-world
. - استخدِم أي اسم أو رمز لغة مألوف لك، أو اترك هذا الحقل فارغًا.
- انقر على تشغيل.
- جرِّب بعض القيم المختلفة. يمكن للنماذج اللغوية الكبيرة فهم الطلبات المختصرة أو المكتوبة بأخطاء إملائية أو غير مكتملة في طلبات البحث البسيطة مثل هذا الطلب.
تحسين المحتوى الذي تنشئه باستخدام البيانات المنظَّمة
بالإضافة إلى إنشاء نص عادي، تتيح لك أداة Genkit تنظيم المحتوى الذي تنشئه لتحسين العرض والدمج في واجهة مستخدم تطبيقك. من خلال تحديد مخطط، يمكنك توجيه النموذج اللغوي الكبير لإنشاء بيانات منظَّمة تتوافق مع التنسيق الذي تريده.
استكشاف مخطّطات الإخراج
يمكنك أيضًا تحديد مخطط الناتج لطلب لغوي كبير (LLM).
- في أداة تعديل الرموز، افحص ملف الطلب:
- افتح ملف
dotprompt/2-simple-itinerary
. - راجِع مخطّطات الإدخال والإخراج المحدّدة.
- افتح ملف
- التفاعل مع واجهة المستخدم:
- في واجهة مستخدم Genkit Developer، انتقِل إلى قسم
dotprompt/2-simple-itinerary
. - توفير الإدخال من خلال تعبئة حقلَي
place
وinterests
بنماذج بيانات:{ "interests": [ "Museums" ], "place": "Paris" }
- انقر على تشغيل.
- في واجهة مستخدم Genkit Developer، انتقِل إلى قسم
التعرّف على الإخراج المستنِد إلى المخطط
لاحظ كيف يتوافق الناتج الذي تم إنشاؤه مع المخطّط المحدّد. من خلال تحديد البنية المطلوبة، تكون قد فوّضت نموذج اللغة الكبيرة (LLM) بإنشاء بيانات يمكن تحليلها بسهولة ودمجها في تطبيقك. يُثبت Genkit تلقائيًا صحة الإخراج وفقًا للمخطّط، ما يضمن سلامة البيانات.
بالإضافة إلى ذلك، يمكنك ضبط Genkit لإعادة المحاولة أو محاولة إصلاح الإخراج إذا لم يتطابق مع المخطّط.
المزايا الرئيسية لمخطّطات النتائج
- الدمج المبسّط: يمكنك دمج البيانات المنظَّمة بسهولة في عناصر واجهة المستخدم الخاصة بتطبيقك.
- التحقّق من صحة البيانات: يمكنك ضمان دقة واتّساق النتائج التي يتم إنشاؤها.
- معالجة الأخطاء: يمكنك تنفيذ آليات لمعالجة حالات عدم تطابق المخططات.
من خلال الاستفادة من مخطّطات النتائج، يمكنك تحسين تجربة Genkit، ما يتيح لك إنشاء بيانات منظَّمة ومخصّصة لتوفير تجارب مستخدمين أكثر ثراءً وديناميكية.
استخدام إدخال متعدد الوسائط
لنفترض أنّ تطبيقك يقترح وجهات مخصّصة لقضاء العطلات استنادًا إلى الصور التي تهمّ المستخدمين. تتيح لك أداة Genkit، إلى جانب نموذج توليدي متعدد الوسائط، تحويل هذه الرؤية إلى واقع.
- في أداة تعديل الرموز، راجِع ملف الطلب:
- افتح ملف
genkit-functions/prompts/imgDescription.prompt
. - يُرجى العِلم أنّه يتم تضمين
{{media url=this}}
، وهو عنصر في بنية Handlebars يسهّل دمج الصور في طلبك.
- افتح ملف
- التفاعل مع واجهة المستخدم:
- في واجهة مستخدم Genkit Developer، افتح طلب
dotprompt/imgDescription
. - أدخِل عنوان URL للصورة في الحقل
imageUrls
عن طريق لصق عنوان URL للصورة. على سبيل المثال، يمكنك استخدام صورة مصغّرة من Wikipedia تعرض "برج إيفل":{ "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" ] }
- انقر على تشغيل.
- في واجهة مستخدم Genkit Developer، افتح طلب
7- تنفيذ الاسترجاع باستخدام البحث عن تشابه المتجه
على الرغم من أنّ إنشاء محتوى إبداعي باستخدام نماذج الذكاء الاصطناعي أمر رائع، إلا أنّ التطبيقات العملية غالبًا ما تتطلّب وضع النتيجة في سياق معيّن.
في ما يتعلّق بهذه الدروس، لديك قاعدة بيانات تضم الوجهات (الأماكن والأنشطة) وتهدف إلى التأكّد من أنّ الاقتراحات التي ينشئها نموذج Gemini تشير حصريًا إلى الإدخالات ضمن هذه قاعدة البيانات.
لسد الفجوة بين طلبات البحث غير المنظَّمة والمحتوى ذي الصلة، يمكنك الاستفادة من فعالية بحث التشابه بين المتجهات على البيانات المضمّنة التي تم إنشاؤها.
فهم التضمينات وتشابه المتجه
- المتجهات: المتجهات هي تمثيلات رقمية لنقاط البيانات، وغالبًا ما تُستخدم لوضع نماذج لمعلومات معقدة مثل النصوص أو الصور. يتوافق كل بُعد في الخط المتجه مع خاصية معينة من البيانات.
- نماذج التضمين: تحوّل نماذج الذكاء الاصطناعي هذه بيانات الإدخال، مثل النصوص، إلى متجهات عالية الأبعاد. والجانب المدهش هو أنه يتم تعيين المدخلات المتشابهة للمتجهات القريبة من بعضها البعض في هذه المساحة عالية الأبعاد.
- البحث عن تشابه المتجه: يستفيد هذا الأسلوب من قرب تضمين متجهات لتحديد نقاط البيانات ذات الصلة. استنادًا إلى طلب بحث مُدخل، يعثر هذا النموذج على إدخالات في قاعدة البيانات تتضمّن متجهات تضمين مشابهة، ما يشير إلى الصلة الدلالية.
فهم كيفية عمل عملية الاسترجاع
- تضمين طلب البحث: يتمّ تمرير إدخال المستخدِم (على سبيل المثال، "عشاء رومانسي في باريس") من خلال نموذج تضمين، ما يؤدّي إلى إنشاء متجه طلب بحث.
- إدراج البيانات في قاعدة البيانات: من الأفضل أن تكون قد أجريت معالجة مسبقة لقاعدة بيانات الوجهات، وإنشاء متجهات إدراج لكل إدخال.
- حساب التشابه: تتم مقارنة متّجه طلب البحث بكل متّجه تضمين في قاعدة البيانات باستخدام مقياس تشابه (على سبيل المثال، تشابه جيب التمام).
- الاسترداد: يتم استرداد الإدخالات الأكثر تشابهًا من قاعدة البيانات، استنادًا إلى قربها من متجه طلب البحث، كاقتراحات ذات صلة.
من خلال دمج آلية الاسترجاع هذه في تطبيقك، يمكنك الاستفادة من نموذج Gemini لإنشاء اقتراحات ليست إبداعية فحسب، بل تستند أيضًا إلى مجموعة بياناتك المحدّدة. يضمن هذا الأسلوب أن تبقى المخرجات التي تم إنشاؤها ذات صلة بالسياق ومتوافقة مع المعلومات المتاحة في قاعدة البيانات الخاصة بك.
تفعيل البحث عن التشابه بين المتجهات في Firestore
في خطوة سابقة من هذا الدليل التعليمي حول الرموز البرمجية، تمّت تعبئة قاعدة بيانات Firestore بنماذج من الأماكن والأنشطة. يتضمّن كل إدخال مكان حقل نصي knownFor
يصف سماته البارزة، بالإضافة إلى حقل embedding
مقابل يحتوي على التمثيل المتجه لهذا الوصف.
للاستفادة من قوة بحث تشابه المتجه على هذه التضمينات، ستحتاج إلى إنشاء فهرس Firestore. يتيح هذا الفهرس استرجاع الأماكن بكفاءة استنادًا إلى تشابه متجهات التضمين مع طلب بحث معيّن.
- في الوحدة الطرفية، شغِّل الأمر التالي لتثبيت أحدث مكوّن alpha. تحتاج إلى الإصدار
2024.05.03
أو إصدار أحدث:gcloud components install alpha
- أنشئ الفهرس، مع الحرص على استبدال
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
- في واجهة مستخدم المطوِّرين Genkit، افتح
placesRetriever
. - انقر على تشغيل. راقب الكائن المتوفر بوحدات التخزين باستخدام نص العنصر النائب، مع الإشارة إلى المكان الذي ستنفذ فيه منطق استرداد البيانات.
- في محرِّر الرموز البرمجية، افتح ملف
genkit-functions/src/lib/placesRetriever.ts
. - انتقِل إلى أسفل الصفحة واستبدِل العنصر النائب
placesRetriever
بما يلي:export const placesRetriever = defineFirestoreRetriever({ name: 'placesRetriever', firestore, collection: 'places', contentField: 'knownFor', vectorField: 'embedding', embedder: textEmbeddingGecko, distanceMeasure: 'COSINE', });
اختبار برنامج الاسترجاع
- في واجهة مستخدم Genkit Developer، افتح أداة استرجاع
placesRetriever
. - قدِّم الطلب التالي:
{ "content": [ { "text": "UNESCO" } ] }
- ويمكنك أيضًا تقديم خيارات. على سبيل المثال، إليك كيفية تحديد عدد المستندات التي يجب أن يعرضها أداة الاسترداد:
{ "limit": 4 }
- انقر على تشغيل.
يمكنك إجراء فلترة إضافية للبيانات بطريقة تتجاوز التشابه من خلال إضافة عبارات where
إلى الخيارات.
8- استرجاع البيانات بالجيل المعزز (RAG) بواسطة Genkit
في الأقسام السابقة، أنشأت طلبات فردية قادرة على التعامل مع النصوص وملفات JSON والصور وإنشاء وجهات للعطلات وغيرها من المحتوى الجذاب للمستخدمين. لقد نفّذت أيضًا طلبًا يسترجع الوجهات ذات الصلة من قاعدة بيانات Firestore. حان الآن وقت تنسيق هذه المكوّنات في عملية اتّساقية لإنشاء محتوى مُحسَّن لاسترداد المعلومات (RAG).
يتناول هذا القسم مفهومًا مهمًا من Genkit يُسمى flows. إنّ التدفقات هي دوال ذات كتابة عالية وقابلة للبث يمكن استدعاءها محليًا وعن بُعد، مع إمكانية ملاحظتها بالكامل. يمكنك إدارة عمليات التنفيذ وتنفيذها من خلال واجهة برمجة التطبيقات في Genkit وواجهة مستخدم المطوّر في Genkit.
- في أداة تعديل الرموز، راجِع طلب برنامج الرحلة:
- افتح ملف
genkit-functions/prompts/itineraryGen.prompt
. - لاحظ كيف تم توسيع الطلب لقبول مدخلات إضافية، وتحديدًا بيانات الأنشطة المستمَدة من أداة الاسترجاع.
- افتح ملف
- في واجهة مستخدم المطوّرين Genkit، يمكنك الاطّلاع على مسار Genkit في ملف
genkit-functions/src/lib/itineraryFlow.ts
.
ملاحظة: لتبسيط تصحيح الأخطاء، يمكنك تقسيم الخطوات الطويلة إلى خطوات أصغر يسهل إدارتها. - يمكنك تحسين تجربة المستخدم من خلال دمج خطوة "وصف الصورة":
- حدِّد مكان التعليق
TODO: 2
(بالقرب من السطر 70). يشير ذلك إلى الموضع الذي يمكنك تحسينه. - استبدِل العنصر النائب
imgDescription
الفارغ بالإخراج الذي تم إنشاؤه من خلال طلبimgDescription
.
- حدِّد مكان التعليق
- اختبر التدفق:
- انتقِل إلى
itineraryFlow
. - استخدِم الإدخال التالي لاختبار التنفيذ الناجح للدالة
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" ] }
- انقر على تشغيل.
- راقِب النتيجة التي تم إنشاؤها، والتي من المفترض أن تتضمّن وصف الصورة في اقتراح برنامج الرحلة.
- انتقِل إلى
- إذا واجهت أي أخطاء أو سلوكيات غير متوقعة، تحقَّق من علامة التبويب فحص للاطّلاع على التفاصيل. يمكنك أيضًا استخدام علامة التبويب هذه لمراجعة سجلّ عمليات التنفيذ من مستودع عمليات التتبّع.
تقييم RAG لتطبيق الويب
- تأكَّد من أنّ تطبيق الويب لا يزال قيد التشغيل من خلال الانتقال إلى http://localhost:3000/ في المتصفّح.
- إذا لم يعُد تطبيق الويب قيد التشغيل، شغِّل هذه الأوامر في الوحدة الطرفية:
npm install npm run dev
- اطّلِع على صفحة تطبيق الويب Dream Your Vacation (http://localhost:3000/gemini).
- اطّلِع على رمز المصدر (
src/app/gemini/page.tsx
) للحصول على مثال على دمج Next.js.
9- نشر تطبيقك باستخدام ميزة "استضافة التطبيقات" من Firebase
الخطوة الأخيرة في هذه الرحلة هي نشر تطبيق الويب. ستستفيد من استضافة تطبيقات Firebase، وهو حل استضافة متوافق مع إطار العمل مصمّم لتبسيط عملية نشر تطبيقات Next.js وAngular في الخلفية بدون خادم.
- احفظ التغييرات في مستودع git المحلي، ثم ادفعها إلى GitHub.
- في وحدة تحكُّم Firebase، انتقِل إلى استضافة التطبيقات ضمن مشروعك على Firebase.
- انقر على البدء > الربط بحساب GitHub.
- اختَر حسابك على GitHub والمستودع. انقر على Next (التالي).
- في إعداد النشر > الدليل الجذر، احتفظ بالقيمة التلقائية.
- بالنسبة إلى الفرع المباشر، اختَر الفرع الرئيسي لمستودع GitHub. انقر على التالي.
- أدخِل معرّفًا لنظامك الأساسي (على سبيل المثال،
compass
). - عندما يُطلب منك إنشاء تطبيق ويب على Firebase أو ربطه، اختَر اختيار تطبيق ويب حالي على Firebase، ثم اختَر التطبيق الذي أنشأته في خطوة سابقة من هذا الدليل التعليمي.
- انقر على إنهاء ونشر.
مراقبة حالة النشر
ستستغرق عملية النشر بضع دقائق. يمكنك تتبُّع مستوى التقدّم في قسم "استضافة التطبيقات" في وحدة تحكُّم 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" على تبسيط التحديثات المستقبلية. عند إرسال التغييرات إلى الفرع الرئيسي لمستودع جيت هب، ستعمل خدمة استضافة التطبيقات في Firebase على إعادة إنشاء تطبيقك وإعادة نشره تلقائيًا، مما يضمن حصول المستخدمين دائمًا على أحدث إصدار.
10- الخاتمة
تهانينا على إكمال هذا الدرس التطبيقي الشامل حول الترميز.
لقد نجحْت في الاستفادة من ميزات Firebase Genkit وFirestore وVertex AI لإنشاء "تدفق" متطور ينشئ اقتراحات مخصصة للعطلات بناءً على خيارات المستخدم المفضّلة وأفكار الإلهام، وكل ذلك مع التركيز على بيانات تطبيقك.
خلال هذه الرحلة، اكتسبت خبرة عملية في أنماط هندسة البرامج الأساسية التي تُعدّ ضرورية لبناء تطبيقات ذكاء اصطناعي توليدي فعّالة. وتشمل هذه الأنماط ما يلي:
- إدارة الطلبات: تنظيم الطلبات والاحتفاظ بها كرمز برمجي لتحسين التعاون والتحكّم في الإصدارات
- المحتوى المتعدّد الوسائط: يمكنك دمج أنواع البيانات المتنوعة، مثل الصور والنصوص، لتحسين تفاعلات الذكاء الاصطناعي.
- مخطّطات الإدخال/الإخراج: هي بنية البيانات للدمج والتحقّق منها بسلاسة في تطبيقك.
- متاجر المتجهات: الاستفادة من تضمينات المتجهات لإجراء بحث فعال عن التشابه واسترجاع المعلومات ذات الصلة.
- استرداد البيانات: تنفيذ آليات لاسترجاع البيانات من قواعد البيانات ودمجها في محتوى من إنشاء الذكاء الاصطناعي
- الإنشاء المعزّز لاسترداد المعلومات (RAG): الجمع بين تقنيات الاسترجاع والذكاء الاصطناعي التوليدي للحصول على نتائج دقيقة وملائمة للسياق
- أدوات مراقبة سير العمل: إنشاء وتنسيق مسارات عمل الذكاء الاصطناعي المعقدة لتنفيذها بسلاسة ورصدها
من خلال إتقان هذه المفاهيم وتطبيقها ضمن منظومة Firebase المتكاملة، تصبح جاهزًا لبدء مغامراتك الخاصة باستخدام الذكاء الاصطناعي التوليدي. استكشِف الإمكانيات الهائلة، وأنشِئ تطبيقات مبتكرة، وواصِل تطوير آفاق يمكن تحقيقها باستخدام الذكاء الاصطناعي التوليدي.
استكشاف خيارات النشر البديلة
توفّر Genkit مجموعة متنوعة من خيارات النشر لتناسب احتياجاتك الخاصة، بما في ذلك:
- وظائف السحابة الإلكترونية لبرنامج Firebase
- Cloud Run
- Next.js
- أي بيئة Node.js
- يتوافق Genkit أيضًا مع Go.
ما عليك سوى اختيار الأنسب لك من خلال تشغيل الأمر التالي داخل مجلد العقدة (package.json
) الخاص بك:
npx genkit init
الخطوات التالية
- جرِّب طلبات البحث واستفِد من نوافذ السياق الكبيرة في Google AI Studio أو Vertex AI Studio.
- تعرَّف على المزيد من المعلومات عن بحث الجيل المعزز لاسترجاع البيانات (RAG) والذكاء الاصطناعي (AI).
- اطّلِع على المستندات الرسمية حول Firebase Genkit.
- يمكنك التعرُّف على مزيد من المعلومات عن إمكانات البحث عن التشابه في Firestore وCloud SQL for PostgreSQL.
- يمكنك التعمّق في عمليات الذكاء الاصطناعي التوليدي باستخدام استدعاء الدوالّ.