1. مقدمة
في عصر التطبيقات المستندة إلى البيانات الحالي، أصبحت الاستفادة من خدمات تعلُّم الآلة والذكاء الاصطناعي المتقدّمة، مثل رؤية الكمبيوتر، أمرًا مهمًا بشكل متزايد. إحدى هذه الخدمات هي Vision API التي توفّر إمكانات قوية لتحليل الصور. في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية إنشاء تطبيق "رؤية حاسوبية" باستخدام Spring Boot وJava، ما يتيح لك الاستفادة من إمكانات التعرّف على الصور وتحليلها في مشاريعك. ستقبل واجهة مستخدم التطبيق كمدخل عناوين URL عامة للصور التي تحتوي على نص مكتوب أو مطبوع، وستستخرج النص، وستتعرّف على اللغة، وإذا كانت إحدى اللغات المتاحة، ستنشئ ترجمة إنجليزية لهذا النص.
ما ستنشئه
ستنشئ
- تطبيق Java Spring Boot لاستخدام Vision API وGoogle Cloud Translation API
- تم نشره على Cloud Run
2. المتطلبات
في ما يلي المتطلبات الأساسية:
إنشاء مشروعك
- حساب على Google Cloud تم إنشاء مشروع فيه وتم تفعيل الفوترة
- تفعيل واجهات برمجة التطبيقات Vision API وTranslation وCloud Run وArtifact Registry
- تم تفعيل Cloud Shell
- تفعيل Cloud Storage API مع إنشاء حزمة وتحميل صور تحتوي على نص أو كتابة بخط اليد باللغات المحلية المتوافقة (أو يمكنك استخدام روابط الصور النموذجية المتوفرة في هذه المدونة)
يُرجى الرجوع إلى المستندات للاطّلاع على خطوات تفعيل واجهات Google Cloud APIs.
تفعيل Cloud Shell
- ستستخدم Cloud Shell، وهي بيئة سطر أوامر تعمل في Google Cloud ومحمَّلة مسبقًا بأداة bq:
من Cloud Console، انقر على "تفعيل Cloud Shell" في أعلى يسار الصفحة

- بعد الاتصال بـ Cloud Shell، من المفترض أن يظهر لك أنّه تم إثبات هويتك وأنّه تم ضبط المشروع على رقم تعريف مشروعك. نفِّذ الأمر التالي في Cloud Shell للتأكّد من إكمال عملية المصادقة:
gcloud auth list
- نفِّذ الأمر التالي في Cloud Shell للتأكّد من أنّ أمر gcloud يعرف مشروعك
gcloud config list project
- إذا لم يتم ضبط مشروعك، استخدِم الأمر التالي لضبطه:
gcloud config set project <PROJECT_ID>
راجِع المستندات لمعرفة أوامر gcloud وطريقة استخدامها.
3- بدء مشروع Spring Boot
للبدء، أنشئ مشروعًا جديدًا على Spring Boot باستخدام بيئة التطوير المتكاملة (IDE) المفضّلة لديك أو Spring Initializr. أدرِج التبعيات اللازمة، مثل Spring Web وSpring Cloud GCP وVision AI، في إعدادات مشروعك. بدلاً من ذلك، يمكنك استخدام Spring Initializr من Cloud Shell باتّباع الخطوات أدناه لتشغيل تطبيق Spring Boot بسهولة.
نفِّذ الأمر التالي لإنشاء مشروع Spring Boot:
curl https://start.spring.io/starter.tgz -d packaging=jar -d dependencies=cloud-gcp,web,lombok -d baseDir=spring-vision -d type=maven-project -d bootVersion=3.0.1.RELEASE | tar -xzvf -
spring-vision هو اسم مشروعك، ويمكنك تغييره حسب متطلباتك.
bootVersion هو إصدار Spring Boot، لذا احرص على تعديله إذا لزم الأمر عند التنفيذ.
type هو إصدار نوع أداة إنشاء المشاريع، ويمكنك تغييره إلى Gradle إذا كنت تفضّل ذلك.

يؤدي ذلك إلى إنشاء بنية مشروع ضمن "spring-vision" كما هو موضّح أدناه:

يحتوي ملف pom.xml على جميع التبعيات للمشروع (تمت إضافة التبعيات التي ضبطتها باستخدام هذا الأمر إلى ملف pom.xml).
يحتوي المسار src/main/java/com/example/demo على ملفات .java لفئات المصدر.
تحتوي الموارد على الصور وملفات XML والنصوص والمحتوى الثابت الذي يستخدمه المشروع ويتم الاحتفاظ به بشكل مستقل.
تتيح لك application.properties الاحتفاظ بميزات المشرف لتحديد خصائص التطبيق الخاصة بالملف الشخصي.
4. ضبط Vision API
بعد تفعيل Vision API، يمكنك ضبط بيانات الاعتماد الخاصة بواجهة برمجة التطبيقات في تطبيقك. يمكنك اختياريًا استخدام بيانات الاعتماد التلقائية للتطبيق لإعداد المصادقة. ومع ذلك، لم أطبّق استخدام بيانات الاعتماد في هذا العرض التوضيحي.
تنفيذ خدمات الرؤية والترجمة
أنشئ فئة خدمة تتفاعل مع Vision API. أدخِل التبعيات اللازمة واستخدِم برنامج Vision API لإرسال طلبات تحليل الصور. يمكنك تنفيذ طرق لتنفيذ مهام مثل تصنيف الصور والتعرّف على الوجوه والتمييز بينها وغير ذلك، استنادًا إلى متطلبات تطبيقك. في هذا العرض التوضيحي، سنستخدم طريقتَي استخراج وترجمة الكتابة اليدوية.
لإجراء ذلك، تأكَّد من تضمين التبعيات التالية في ملف pom.xml.
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-gcp-starter-vision</artifactId>
</dependency>
<dependency>
<groupId>com.google.cloud</groupId>
<artifactId>google-cloud-translate</artifactId>
</dependency>
استنسِخ الملفات التالية أو استبدِلها من المستودع وأضِفها إلى المجلدات أو المسارات المعنية في بنية المشروع:
- Application.java (/src/main/java/com/example/demo)
- TranslateText.java (/src/main/java/com/example/demo)
- VisionController.java (/src/main/java/com/example/demo)
- index.html (/src/main/resources/static)
- result.html (/src/main/resources/templates)
- pom.xml
تتيح لك الطريقة extractTextFromImage في الخدمة org.springframework.cloud.gcp.vision.CloudVisionTemplate استخراج النص من إدخال الصورة. تتيح لك الطريقة getTranslatedText من الخدمة com.google.cloud.translate.v3 تمرير النص المستخرَج من صورتك والحصول على النص المترجَم باللغة الهدف المطلوبة كاستجابة (إذا كانت اللغة المصدر إحدى اللغات المعتمَدة).
إنشاء واجهة برمجة تطبيقات REST
صمِّم نقاط نهاية REST التي ستعرض وظائف Vision API ونفِّذها. أنشئ وحدات تحكّم تعالج الطلبات الواردة وتستفيد من خدمة Vision API لمعالجة الصور وعرض نتائج التحليل. في هذا العرض التوضيحي، ينفّذ صف VisionController نقطة النهاية ويتعامل مع الطلب الوارد ويستدعي خدمات Vision API وخدمات ترجمة Cloud ويعرض النتيجة في طبقة العرض. في ما يلي طريقة تنفيذ طريقة GET لنقطة نهاية REST:
@GetMapping("/extractText")
public String extractText(String imageUrl) throws IOException {
String textFromImage =
this.cloudVisionTemplate.extractTextFromImage(this.resourceLoader.getResource(imageUrl));
TranslateText translateText = new TranslateText();
String result = translateText.translateText(textFromImage);
return "Text from image translated: " + result;
}
يحتوي صف TranslateText في التنفيذ أعلاه على الطريقة التي تستدعي خدمة Cloud Translation:
String targetLanguage = "en";
TranslateTextRequest request =
TranslateTextRequest.newBuilder()
.setParent(parent.toString())
.setMimeType("text/plain")
.setTargetLanguageCode(targetLanguage)
.addContents(text)
.build();
TranslateTextResponse response = client.translateText(request);
// Display the translation for each input text provided
for (Translation translation : response.getTranslationsList()) {
res = res + " ::: " + translation.getTranslatedText();
System.out.printf("Translated text : %s\n", res);
}
باستخدام الفئة VisionController، تم تنفيذ طريقة GET لواجهة REST.
دمج Thymeleaf لتطوير الواجهة الأمامية
عند إنشاء تطبيق باستخدام Spring Boot، يكون أحد الخيارات الشائعة لتطوير الواجهة الأمامية هو الاستفادة من إمكانات Thymeleaf. Thymeleaf هي أداة إنشاء نماذج Java من جهة الخادم تتيح لك دمج المحتوى الديناميكي بسلاسة في صفحات HTML. توفّر Thymeleaf تجربة تطوير سلسة من خلال السماح لك بإنشاء نماذج HTML تتضمّن تعبيرات من جهة الخادم. يمكن استخدام هذه التعبيرات لعرض البيانات بشكل ديناميكي من الخلفية في Spring Boot، ما يسهّل عرض نتائج تحليل الصور الذي يتم إجراؤه بواسطة خدمة Vision API.
للبدء، تأكَّد من توفّر التبعيات اللازمة لـ Thymeleaf في مشروع Spring Boot. يمكنك تضمين تبعية Thymeleaf Starter في ملف pom.xml:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
في طريقة وحدة التحكّم، استرجِع نتيجة التحليل من خدمة Vision API وأضِفها إلى النموذج. يمثّل النموذج البيانات التي سيستخدمها Thymeleaf لعرض نموذج HTML. بعد ملء النموذج، أعِد اسم نموذج Thymeleaf الذي تريد عرضه. سيتولّى Thymeleaf معالجة النموذج، واستبدال التعبيرات من جهة الخادم بالبيانات الفعلية، وإنشاء رمز HTML النهائي الذي سيتم إرساله إلى متصفّح العميل.
في حالة طريقة extractText في VisionController، أرجعنا النتيجة كـ String ولم تتم إضافتها إلى النموذج. ولكننا استدعَينا طريقة GET extractText في index.html عند إرسال الصفحة. باستخدام Thymeleaf، يمكنك إنشاء تجربة سلسة للمستخدمين، حيث يمكنهم تحميل الصور وتشغيل عمليات تحليل Vision API وعرض النتائج في الوقت الفعلي. يمكنك الاستفادة من كامل إمكانات تطبيق Vision AI من خلال الاستفادة من قوة Thymeleaf في تطوير الواجهة الأمامية.
<form action="/extractText">
Web URL of image to analyze:
<input type="text"
name="imageUrl"
value=""
<input type="submit" value="Read and Translate" />
</form>
5- نشر تطبيق رؤية الكمبيوتر على Cloud Run
اكتب اختبارات الوحدة لفئات الخدمة ووحدات التحكّم لضمان الأداء السليم ضمن المجلد /src/test/java/com/example. بعد التأكّد من استقرارها، يمكنك تجميعها في عنصر قابل للنشر، مثل ملف JAR، ونشره على Cloud Run، وهي منصة حوسبة بدون خادم على Google Cloud. في هذه الخطوة، سنركّز على نشر تطبيق Spring Boot الذي تم وضعه في حاوية باستخدام Cloud Run.
- أنشئ حزمة تطبيقك من خلال تنفيذ الخطوات التالية من Cloud Shell(تأكَّد من أنّ الجهاز الطرفي يطلب منك إدخال بيانات في مجلد جذر المشروع).
الإصدار:
./mvnw package
بعد اكتمال عملية الإنشاء بنجاح، شغِّل التطبيق محليًا لاختباره:
./mvnw spring-boot:run
- وضع تطبيق Spring Boot في حاوية باستخدام Jib:
بدلاً من إنشاء Dockerfile يدويًا وإنشاء صورة الحاوية، يمكنك استخدام أداة Jib لتبسيط عملية إنشاء الحاويات. Jib هي إضافة تتكامل مباشرةً مع أداة الإنشاء (مثل Maven أو Gradle) وتتيح لك إنشاء صور حاويات محسّنة بدون كتابة Dockerfile. قبل المتابعة، عليك تفعيل واجهة برمجة التطبيقات Artifact Registry API (يُنصح باستخدام Artifact Registry بدلاً من Container Registry). بعد ذلك، شغِّل Jib لإنشاء صورة Docker ونشرها في "قاعدة بيانات المسجّلين":
$ ./mvnw com.google.cloud.tools:jib-maven-plugin:3.1.1:build -Dimage=gcr.io/$GOOGLE_CLOUD_PROJECT/vision-jib
ملاحظة: في هذه التجربة، لم نضبط مكوّن Jib Maven الإضافي في ملف pom.xml، ولكن للاستخدام المتقدّم، يمكن إضافته في ملف pom.xml مع المزيد من خيارات الإعداد.
- انشر الحاوية (التي أرسلناها إلى Artifact Registry في الخطوة السابقة) إلى Cloud Run. هذه خطوة أخرى تتضمّن أمرًا واحدًا:
gcloud run deploy vision-app --image gcr.io/$GOOGLE_CLOUD_PROJECT/vision-jib --platform managed --region us-central1 --allow-unauthenticated --update-env-vars
يمكنك أيضًا إجراء ذلك من واجهة المستخدم. انتقِل إلى Google Cloud Console وابحث عن خدمة Cloud Run. انقر على "إنشاء خدمة" (Create Service) واتّبِع التعليمات الظاهرة على الشاشة. حدِّد صورة الحاوية التي سبق أن أرسلتها إلى السجلّ، واضبط إعدادات النشر المطلوبة (مثل تخصيص وحدة المعالجة المركزية والتحجيم التلقائي)، واختَر المنطقة المناسبة للنشر. يمكنك ضبط متغيّرات بيئة خاصة بتطبيقك. يمكن أن تتضمّن هذه المتغيّرات بيانات اعتماد المصادقة (مثل مفاتيح واجهة برمجة التطبيقات) أو سلاسل الاتصال بقاعدة البيانات أو أي إعدادات أخرى لازمة لكي يعمل تطبيق Vision AI بشكل صحيح. عند اكتمال عملية النشر بنجاح، من المفترض أن تحصل على نقطة نهاية لتطبيقك.
اللعب باستخدام تطبيق Vision AI
لأغراض العرض التوضيحي، يمكنك استخدام عنوان URL الخاص بالصورة أدناه ليقرأه تطبيقك ويترجمه: https://storage.googleapis.com/img_public_test/tamilwriting1.jfif

6. تَنظيم
لتجنُّب تحمّل رسوم في حسابك على Google Cloud مقابل الموارد المستخدَمة في هذه المشاركة، اتّبِع الخطوات التالية:
- في Google Cloud Console، انتقِل إلى صفحة "إدارة الموارد".
- في قائمة المشاريع، اختَر المشروع الذي تريد حذفه، ثم انقر على "حذف".
- في مربّع الحوار، اكتب رقم تعريف المشروع، ثم انقر على "إيقاف" لحذف المشروع.
7. تهانينا
تهانينا! لقد أنشأت تطبيق Vision AI بنجاح باستخدام Spring Boot وJava. بفضل تكنولوجيات الذكاء الاصطناعي المرتبطة بالرؤية، يمكن لتطبيقك الآن إجراء تحليل متطوّر للصور، بما في ذلك تصنيفها واكتشاف الوجوه فيها وغير ذلك. يوفر دمج Spring Boot أساسًا متينًا لإنشاء تطبيقات Google Cloud Native قابلة للتطوير وفعّالة. يمكنك مواصلة استكشاف الإمكانات الهائلة لخدمات Vision AI وCloud Run وترجمة Cloud وغيرها لتحسين تطبيقك من خلال ميزات ووظائف إضافية. لمزيد من المعلومات، يمكنك الاطّلاع على مستندات Vision API و ترجمة Cloud و GCP Spring. جرِّب التجربة نفسها باستخدام الخيار Spring Native. يمكنك أيضًا الاطّلاع على كيفية ظهور واجهة برمجة التطبيقات هذه في Model Garden.