1. مقدمة
في هذا الدرس التطبيقي حول الترميز، ستنشئ أداة إنشاء وضعيات مستندة إلى الذكاء الاصطناعي باستخدام Java وSpring Boot وقاعدة بيانات Cloud Spanner وVertex AI Imagen API. سيُدخِل المستخدم طلبًا، وسينشئ التطبيق وضعية استنادًا إلى هذا الطلب. سنستخدم أيضًا البيانات من قاعدة بيانات Spanner المعروضة كواجهة برمجة تطبيقات REST. إنّها طريقة ممتعة وتعليمية لعرض إمكانات الذكاء الاصطناعي التوليدي باستخدام Spring Boot على Google Cloud.
قائمة الخدمات المستخدَمة هي:
- Cloud Spanner
- Vertex AI Imagen API
- Cloud Run
مخطط خطوات التنفيذ العالية المستوى

ما ستنشئه
عليك إنشاء
- تطبيق Java Spring Boot لواجهة برمجة التطبيقات الخاصة بالبيانات كخدمة في Spanner
- تطبيق Java Spring Boot لحالة استخدام إنشاء الصور باستخدام Imagen
- واجهة مستخدم تفاعلية لإدخال الطلب وتلقّي الرد
2. المتطلبات
قبل البدء
- في Google Cloud Console، ضمن صفحة اختيار المشروع، اختَر أو أنشِئ مشروعًا على Google Cloud.
- تأكَّد من تفعيل الفوترة لمشروعك على السحابة الإلكترونية. كيفية التحقّق من تفعيل الفوترة في مشروع
- تأكَّد من تفعيل جميع واجهات برمجة التطبيقات اللازمة (Cloud Spanner API وVertex AI API وCloud Run API وCloud Functions API).
- ستستخدم Cloud Shell، وهي بيئة سطر أوامر تعمل في Google Cloud ومحمَّلة مسبقًا بأداة bq. يُرجى الرجوع إلى المستندات لمعرفة أوامر gcloud وطريقة استخدامها.
من Cloud Console، انقر على "تفعيل Cloud Shell" في أعلى يسار الصفحة:

إذا لم يتم ضبط مشروعك، استخدِم الأمر التالي لضبطه:
gcloud config set project <YOUR_PROJECT_ID>
- انتقِل إلى صفحة Cloud Spanner باستخدام مشروع Google Cloud النشط لبدء الاستخدام
3- تجهيز البيانات باستخدام Spanner
قبل إنشاء التطبيق، لنكمل عملية إعداد قاعدة البيانات من خلال إنشاء مثيل Cloud Spanner وقاعدة بيانات وجدول. يمكنك الرجوع إلى هذه المدوّنة لقراءة المزيد من التفاصيل حول ميزات Cloud Spanner وDDL وDML وغير ذلك. يمكنك اتّباع الخطوات التالية لإنشاء عناصر قاعدة البيانات المطلوبة لهذا المشروع:
- أنشئ مثيلاً من خلال النقر على CREATE INSTANCE في صفحة المثيلات.
- أدخِل التفاصيل كما هو موضّح في الصورة التالية وانقر على "إنشاء":

- بعد إنشاء قاعدة البيانات، انقر على CREATE DATABASE (إنشاء قاعدة بيانات) من صفحة النظرة العامة على المثيل.
- قدِّم اسم قاعدة البيانات على النحو التالي: first-spanner-db، وأدخِل تعريف لغة البيانات التالي في قسم "نماذج تعريف لغة البيانات" (DDL TEMPLATES)، ثم انقر على "إرسال" (SUBMIT):
CREATE TABLE Yoga_Poses(
Pose_Id INT64 NOT NULL,
Name STRING(1024),
Breath STRING(1024),
Description STRING(1024)
) PRIMARY KEY(Pose_Id);
يجب إنشاء قاعدة البيانات والجدول نتيجةً للخطوة الأخيرة. لنُدرج الآن بعض الصفوف في جدول Yoga_Poses حتى نتمكّن من إنشاء تطبيق Spring Boot.
- انقر على Spanner Studio في لوحة "قاعدة البيانات" على يمين الصفحة وافتح علامة تبويب جديدة لأداة تعديل طلبات البحث كما هو موضّح في الصورة أدناه:

- نفِّذ طلبات INSERT التالية:
INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(1, 'STAND', 'INHALE AND EXHALE',
'STAND WITH YOUR FEET HIP WIDTH APART AND ARMS RESTING BY THE SIDES');
INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(2, 'PLANK', 'INHALE OR EXHALE',
'PLANT YOUR TOES AND PALMS ON THE MAT WITH BODY PARALLEL TO THE GROUND');
INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(3, 'SIT', 'INHALE AND EXHALE',
'SIT ON THE FLOOR LEGS CROSSED');
INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(4, 'BEND', 'EXHALE',
'FOLD FORWARD AS YOU STAND, HANDS REACHING TO THE FLOOR');
INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(5, 'PUSH UP', 'EXHALE',
'PLANK WITH ELBOWS ON MAT');
INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(6, 'SEATED FORWARD BEND', 'EXHALE',
'FOLD FORWARD AS YOU SIT, HANDS TRYING TO REACH THE FEET');
INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(7, 'LUNGE', 'EXHALE',
'ONE LEG TO THE FRONT 90 DEGREES TO THE FLOOR AND THE BACK LEG STRAIGHT');
INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(8, 'COURTESY LUNGE', 'INHALE',
'ONE LEG TO THE FRONT 90 DEGREES TO THE FLOOR AND THE BACK KNEE TOUCHING THE FLOOR');
INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(9, 'BANK BEND', 'INHALE',
'STAND WITH ARMS UP AND BODY BENT BACKWARDS, ARCHING YOUR SPINE, LOOKING AT THE SKY');
INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(10, 'BICEP ACTION', 'INHALE AND EXHALE',
'CURL, PRESS AND WORK YOUR BICEPS');
الآن، تم إنشاء مثيل Spanner وقاعدة البيانات والجدول والبيانات وأصبحت جاهزة للتطبيق.
4. إنشاء واجهة برمجة تطبيقات REST باستخدام Spring Boot وSpanner لبيانات الوضع
للتعرّف على Spring Boot وGoogle Cloud Console، يمكنك الاطّلاع على هذه المدونة.
- تجميع عينات عشوائية لتوقّع النتائج في تطبيق Spring Boot لتجميع عينات عشوائية لتوقّع النتائج في هذا التطبيق من البداية، اتّبِع هذه المدوّنة. لإنشاء نسخة طبق الأصل من المستودع والبدء في العمل، ما عليك سوى تنفيذ الأمر التالي في وحدة Cloud Shell الطرفية:
git clone https://github.com/AbiramiSukumaran/spanner-springb
من المفترض أن يكون هذا قد أنشأ المشروع spanner-springb في جهاز Cloud Shell. لفهم مكوّنات التطبيق، يمكنك الاطّلاع على المدونة.
- لننشئ التطبيق ونشغّله. ولإجراء ذلك، شغِّل الأوامر التالية من وحدة Cloud Shell الطرفية:
cd spanner-springb
./mvnw package
./mvnw spring-boot:run
- انشر التطبيق في Cloud Run ليكون متاحًا لتطبيق إنشاء الوضعيات. ولإجراء ذلك، نفِّذ الأمر التالي من نافذة Cloud Shell الطرفية:
gcloud run deploy –source .
مرِّر المَعلمات المطلوبة وتأكَّد من نشر تطبيقك. يجب أن يكون عنوان URL للخدمة الذي تم إنشاؤه قادرًا على إدراج البيانات التي تم إنشاؤها في Spanner.
5- إنشاء تطبيق لإنشاء الوضعيات باستخدام Spring Boot وSpanner وImagen
في هذه المرحلة، نكون قد أكملنا الجزء العلوي من مخطط سير العمل، أي إتاحة بيانات Spanner كخدمة (REST API). لننشئ الآن تطبيق عميل يستدعي بيانات Spanner، ويطلب من واجهة برمجة التطبيقات IMAGEN إنشاء صورة، ويعرض السلسلة المرمّزة Base64 كصورة في واجهة المستخدم.
- من المفترض أنّك على دراية ببنية مشروع Spring Boot وأهميتها. لذلك، سيتم الانتقال بسرعة إلى استنساخ المستودع في جهاز Cloud Shell من خلال تنفيذ الأمر أدناه في وحدة Cloud Shell الطرفية:
git clone https://github.com/AbiramiSukumaran/genai-posegen
من المفترض أن يكون ذلك قد أنشأ المشروع genai-posegen في جهاز Cloud Shell. تظهر بنية المشروع المستنسخ على النحو التالي في محرّر Cloud Shell:

يحتوي صف Java PromptController على استدعاء خدمة قاعدة البيانات وتنفيذ منطق النشاط التجاري واستدعاء واجهة برمجة تطبيقات الذكاء الاصطناعي التوليدي في Imagen أيضًا. تتفاعل هذه الفئة مع نماذج Thymeleaf التي تتولّى عملية دمج البيانات في واجهة المستخدم. تتضمّن هذه الفئة 3 طرق للخدمة: 1) للحصول على إدخال الطلب 2) لمعالجة الطلب واستدعاء Imagen API و3) لمعالجة ردّ Imagen.
Prompt وYoga هما فئتا POJO اللتان تحتويان على الحقول وعمليات الحصول على البيانات وتعيينها للتفاعل مع واجهة برمجة التطبيقات Imagen API وواجهة برمجة التطبيقات لخادم بيانات Spanner على التوالي.
يحتوي ملفا HTML Index وgetImage في مجلد النماذج على نماذج لواجهة المستخدم، كما يحتويان على تبعيات لنصوص JS وCSS في المجلدات المعنية.
دمج واجهة برمجة التطبيقات Vertex AI Imagen API بالنسبة إلى حالة استخدام إنشاء الصور، نستخدِم واجهة برمجة التطبيقات Imagen API من Vertex AI بالتنسيق التالي:
https://<<region>>- aiplatform.googleapis.com/v1/projects/<<your-project-id>>/locations/<<region>>/publishers/google/models/imagegeneration:predict
يمكنك الاطّلاع على مزيد من المعلومات حول إمكانات Imagen هنا. تعرض هذه الدالة الرد بتنسيق سلسلة مشفّرة Base64. لتحويلها إلى صورتها، استخدمنا طريقة setattribute في javascript (في ملف getImage.js) على عنصر الصورة كما يلي في ملف getImage.HTML:
poseImage.setAttribute('src', "data:image/jpg;base64," + baseStr64);
التفويض تتطلّب واجهة Imagen API تفعيل مصادقة الرمز المميز لحامل الإذن للوصول إليها. في حالتنا، استخدمتُ طريقة JSON لبيانات الاعتماد التلقائية للتطبيق. يمكنك تنفيذ ذلك من خلال تشغيل الأمر التالي من وحدة Cloud Shell الطرفية واتّباع التعليمات التي تظهر في الوحدة الطرفية:
gcloud auth application-default login
أدخِل "Y" للمصادقة باستخدام حسابك. امنح الإذن وانسخ رمز التفويض الذي يظهر في النافذة المنبثقة. بعد ذلك مباشرةً، ستحصل على بيانات الاعتماد التلقائية للتطبيق في ملف JSON المحفوظ في موقع مشابه لما يلي: /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json.
نزِّل الملف أو انسخ محتوى ملف JSON من خلال تنفيذ الأمر cat (cat /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json) واستخدِمه في التطبيق في طريقة callImagen() لفئة PromptController.java. يمكنك الاطّلاع على مزيد من المعلومات حول المصادقة هنا.
واجهة المستخدم استخدمنا Thymeleaf كمحرّك للنماذج من أجل تحليل البيانات وعرضها في ملفات نماذج الواجهة الأمامية، بالإضافة إلى إضافة تصميم أنيق إلى واجهة المستخدم. وهي تشبه HTML ولكنّها تتيح استخدام المزيد من السمات للتعامل مع البيانات المعروضة. يحتوي ملف index.html على مكوّنات تصميم الصفحة المقصودة، ويتيح للمستخدم اختيار الموضوع وإضافة طلب بديل لإنشاء الصورة المطلوبة.
6. التطوير والنشر
بعد استنساخ الرمز البرمجي واستبدال قيم العناصر النائبة بما ينطبق على مشروعك ومنطقتك وبيانات اعتماد المصادقة، لننتقل إلى إنشاء التطبيق ونشره. انتقِل إلى مجلد المشروع في نافذة Cloud Shell الطرفية باستخدام الأمر التالي، ثم أنشئ التطبيق وانشره للاختبار محليًا على جهاز Cloud Shell باستخدام الأوامر الثلاثة التالية واحدًا تلو الآخر:
cd genai-posegen
./mvnw package
./mvnw spring-boot:run
انشر التطبيق في Cloud Run ليكون متاحًا على السحابة الإلكترونية. لإجراء ذلك، نفِّذ الأمر التالي من وحدة Cloud Shell الطرفية داخل مجلد المشروع:
gcloud run deploy –source .
مرِّر المَعلمات المطلوبة وتأكَّد من نشر تطبيقك.
7. عرض توضيحي
بعد نشر التطبيق، من المفترض أن يظهر عنوان URL للخدمة في الوحدة الطرفية. انقر على الرابط وشاهِد تطبيق إنشاء صور الوضعيات يعمل على Google Cloud بدون خادم.

8. تَنظيم
لتجنُّب تحمّل رسوم في حسابك على Google Cloud مقابل الموارد المستخدَمة في هذه المشاركة، اتّبِع الخطوات التالية:
- في Google Cloud Console، انتقِل إلى صفحة إدارة الموارد.
- في قائمة المشاريع، اختَر المشروع الذي تريد حذفه، ثم انقر على "حذف".
- في مربّع الحوار، اكتب رقم تعريف المشروع، ثم انقر على "إيقاف" لحذف المشروع.
- إذا كنت لا تريد حذف المشروع، احذف مثيل Spanner من خلال الانتقال إلى المثيل الذي أنشأته للتو لهذا المشروع والنقر على الزر DELETE INSTANCE (حذف المثيل) في أعلى يسار صفحة نظرة عامة على المثيل.
- يمكنك أيضًا الانتقال إلى صفحة خدمات Cloud Run واختيار الخدمات التي تم إنشاؤها في هذا المشروع والنقر على زر الحذف لحذف الخدمات.
9- تهانينا
في هذه المدونة، تمكّنا من توفير تطبيق Spring Boot كامل الميزات يخزّن البيانات ويتعامل معها في Cloud Spanner، وذلك لإنشاء أوضاع باستخدام Imagen API من Vertex AI على Google Cloud في تطبيق عميل تفاعلي تم نشره في Cloud Run. في قسم مخطط البنية في هذه المدونة، هل ترى مكوّن Cloud Functions (Java) الذي لم نتمكّن من تنفيذه؟ يمكنك الاستفادة من هذه الميزة إذا أردت المساهمة. يمكنك تنفيذ وظيفتَين من وظائف Java السحابية لتنفيذ الطريقتَين اللتَين يمكن العثور عليهما في ملف getimage.html: طريقة حفظ الوضع في قاعدة البيانات وطريقة تحميل الصورة. اطّلِع على مستندات Imagen on Vertex AI لمعرفة المزيد عن النموذج.