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