קל לראות את הראייה הממוחשבת: Vision AI באתחול האביב וב-Java

1. מבוא

בעידן הנוכחי של אפליקציות מבוססות-נתונים, השימוש בשירותים מתקדמים של למידת מכונה ובינה מלאכותית, כמו ראייה ממוחשבת, הופך לחשוב יותר ויותר. אחד מהשירותים האלה הוא Vision API, שמספק יכולות עוצמתיות לניתוח תמונות. ב-codelab הזה תלמדו איך ליצור אפליקציית Computer Vision באמצעות Spring Boot ו-Java, כדי שתוכלו לממש את הפוטנציאל של זיהוי וניתוח תמונות בפרויקטים שלכם. ממשק המשתמש של האפליקציה יקבל כקלט כתובות URL ציבוריות של תמונות שמכילות טקסט כתוב או מודפס, יחלץ את הטקסט, יזהה את השפה ואם היא אחת מהשפות הנתמכות, הוא ייצור את התרגום לאנגלית של הטקסט הזה.

מה תפַתחו

תצרו

  • אפליקציית Java Spring Boot לשימוש ב-Vision API וב-Google Cloud Translation API
  • נפרס ב-Cloud Run

2. דרישות

  • דפדפן, כמו Chrome או Firefox
  • פרויקט ב-Google Cloud שהחיוב בו מופעל

אלה הדרישות המוקדמות:

יצירת הפרויקט

  1. חשבון ב-Google Cloud עם פרויקט שנוצר וחיוב שהופעל
  2. ‫Vision API,‏ Translation,‏ Cloud Run ו-Artifact Registry APIs מופעלים
  3. ‫Cloud Shell מופעל
  4. ‫Cloud Storage API מופעל עם קטגוריה שנוצרה ותמונות עם טקסט או כתב יד בשפות מקומיות נתמכות שהועלו (או שאפשר להשתמש בקישורים לתמונות לדוגמה שמופיעים בבלוג הזה)

עיין במאמרי העזרה לקבלת שלבים להפעלת Cloud APIs.

הפעלת Cloud Shell

  1. תשתמשו ב-Cloud Shell, סביבת שורת פקודה שפועלת ב-Google Cloud וכוללת את bq שנטען מראש:

בפינה הימנית העליונה של Cloud Console, לוחצים על 'הפעלת Cloud Shell'.

51622c00acec2fa.png

  1. אחרי שמתחברים ל-Cloud Shell, אמור להופיע אימות שכבר בוצע ושהפרויקט כבר הוגדר לפי מזהה הפרויקט. מריצים את הפקודה הבאה ב-Cloud Shell כדי לוודא שעברתם אימות:
gcloud auth list
  1. מריצים את הפקודה הבאה ב-Cloud Shell כדי לוודא שפקודת gcloud מכירה את הפרויקט.
gcloud config list project
  1. אם הפרויקט לא מוגדר, משתמשים בפקודה הבאה כדי להגדיר אותו:
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 הוא הגרסה של סוג כלי ה-build של הפרויקט. אפשר לשנות אותו ל-gradle אם רוצים.

37813d3982ce2e42.png

ייווצר מבנה פרויקט בתיקייה spring-vision, כמו שמוצג בהמשך:

3e70d45d88ac6935.png

‫pom.xml מכיל את כל התלויות של הפרויקט (תלויות שהגדרתם באמצעות הפקודה הזו כבר נוספו ל-pom.xml).

‫src/main/java/com/example/demo מכיל את קובצי ה-‎ .java של מחלקות המקור.

משאבים מכילים את התמונות, קובצי ה-XML, קובצי הטקסט והתוכן הסטטי שבהם הפרויקט משתמש, שמתוחזקים באופן עצמאי.

‫application.properties מאפשר לכם לשמור על תכונות האדמין כדי להגדיר מאפיינים ספציפיים של הפרופיל באפליקציה.

4. הגדרת Vision API

אחרי שמפעילים את Vision API, אפשר להגדיר את פרטי הכניסה של ה-API באפליקציה. אפשר גם להשתמש ב-Application Default Credentials כדי להגדיר אימות. עם זאת, בהדגמה הזו לא הטמעתי שימוש בפרטי כניסה.

הטמעה של שירותי הראייה והתרגום

יוצרים מחלקת שירות שמבצעת אינטראקציה עם 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>

משכפלים או מחליפים את הקבצים הבאים מהמאגר ומוסיפים אותם לתיקיות או לנתיבים המתאימים במבנה הפרויקט:

  1. Application.java (/src/main/java/com/example/demo)
  2. TranslateText.java (/src/main/java/com/example/demo)
  3. VisionController.java (/src/main/java/com/example/demo)
  4. index.html (/src/main/resources/static)
  5. result.html (/src/main/resources/templates)
  6. pom.xml

ה-method extractTextFromImage בשירות org.springframework.cloud.gcp.vision.CloudVisionTemplate מאפשרת לכם לחלץ טקסט מהתמונה שאתם מזינים. השיטה getTranslatedText מהשירות com.google.cloud.translate.v3 מאפשרת להעביר את הטקסט שחולץ מהתמונה ולקבל את הטקסט המתורגם בשפת היעד הרצויה כתגובה (אם שפת המקור היא אחת מהשפות הנתמכות).

יצירת API בארכיטקטורת REST

עיצוב והטמעה של נקודות הקצה של REST שיחשפו את הפונקציות של Vision API. יוצרים בקרי בקשות שמטפלים בבקשות נכנסות ומשתמשים בשירות Vision API כדי לעבד את התמונות ולהחזיר את תוצאות הניתוח. בהדגמה הזו, המחלקה VisionController מטמיעה את נקודת הקצה, מטפלת בבקשה הנכנסת, מפעילה את שירותי Vision API ו-Cloud Translation ומחזירה את התוצאה לשכבת התצוגה. ההטמעה של שיטת אחזור נתונים לנקודת הקצה של 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 ולא הוספנו אותה למודל. אבל הפעלנו את שיטת אחזור נתונים 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.

  1. כדי לארוז את האפליקציה, מבצעים את השלבים הבאים מ-Cloud Shell(מוודאים שהטרמינל מציג את הנחיית הפעולה בתיקיית הבסיס של הפרויקט):

גרסת Build:

./mvnw package

אחרי שהבנייה תסתיים בהצלחה, מריצים את הפונקציה באופן מקומי כדי לבדוק אותה:

./mvnw spring-boot:run
  1. יצירת קונטיינר לאפליקציית Spring Boot באמצעות Jib:

במקום ליצור Dockerfile באופן ידני ולבנות את קובץ האימג' של הקונטיינר, אפשר להשתמש בכלי Jib כדי לפשט את תהליך יצירת הקונטיינר. ‫Jib הוא תוסף שמשתלב ישירות עם כלי הבנייה (כמו Maven או Gradle) ומאפשר לכם לבנות תמונות אופטימליות של מאגרי תגים בלי לכתוב Dockerfile. לפני שממשיכים, צריך להפעיל את Artifact Registry API (מומלץ להשתמש ב-Artifact Registry במקום ב-Container Registry). לאחר מכן מריצים את Jib כדי ליצור קובץ אימג' של Docker ולפרסם אותו ב-Registry:

$ ./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 עם אפשרויות הגדרה נוספות.

  1. פורסים את הקונטיינר (שדחפנו ל-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 ומאתרים את שירות Cloud Run. לוחצים על 'יצירת שירות' ופועלים לפי ההוראות במסך. מציינים את קובץ אימג' של קונטיינר שדחפתם קודם למרשם, מגדירים את הגדרות ה-Deployment (פריסה) הרצויות (כמו הקצאת מעבד (CPU) והתאמה אוטומטית לעומס (automatic scaling)) ובוחרים את האזור המתאים לפריסה. אתם יכולים להגדיר משתני סביבה שספציפיים לאפליקציה שלכם. המשתנים האלה יכולים לכלול פרטי כניסה לאימות (מפתחות API וכו'), מחרוזות חיבור למסד נתונים או כל הגדרה אחרת שנדרשת כדי שאפליקציית Vision AI תפעל בצורה תקינה. כשהפריסה מסתיימת בהצלחה, אמורה להתקבל נקודת קצה לאפליקציה.

הפעלת אפליקציית Vision AI

לצורך הדגמה, אפשר להשתמש בכתובת ה-URL של התמונה שבהמשך כדי שהאפליקציה תקרא ותתרגם: https://storage.googleapis.com/img_public_test/tamilwriting1.jfif

654c1b0de0db482.gif

6. הסרת המשאבים

כדי לא לצבור חיובים לחשבון Google Cloud על המשאבים שבהם השתמשתם במאמר הזה:

  1. במסוף Google Cloud, עוברים לדף Manage resources.
  2. ברשימת הפרויקטים, בוחרים את הפרויקט שרוצים למחוק ולוחצים על סמל המחיקה.
  3. כדי למחוק את הפרויקט, כותבים את מזהה הפרויקט בתיבת הדו-שיח ולוחצים על Shut down.

7. מזל טוב

מעולה! יצרתם בהצלחה אפליקציית Vision AI באמצעות Spring Boot ו-Java. בעזרת Vision AI, האפליקציה שלכם יכולה לבצע ניתוח תמונות מתוחכם, כולל תיוג, זיהוי פנים ועוד. השילוב של Spring Boot מספק בסיס מוצק לפיתוח אפליקציות Google Cloud Native עמידות וניתנות להתאמה. כדאי להמשיך ולחקור את היכולות הרבות של Vision AI,‏ Cloud Run,‏ Cloud Translation ועוד, כדי לשפר את האפליקציה עם תכונות ופונקציות נוספות. מידע נוסף זמין במסמכים בנושא Vision API,‏ Cloud Translation ו-GCP Spring. אפשר לנסות את אותו ניסוי עם האפשרות Spring Native. כדי לקבל הצצה לעולם ה-AI הגנרטיבי, כדאי לראות איך ה-API הזה מופיע ב-Model Garden.