ใช้คอมพิวเตอร์วิทัศน์ได้ง่ายๆ: Vision AI บน Spring Boot และ Java

1. บทนำ

ในยุคปัจจุบันของแอปพลิเคชันที่ขับเคลื่อนด้วยข้อมูล การใช้ประโยชน์จากแมชชีนเลิร์นนิงและบริการปัญญาประดิษฐ์ (AI) ขั้นสูงอย่างคอมพิวเตอร์วิทัศน์เริ่มมีความสำคัญมากขึ้นเรื่อยๆ บริการดังกล่าวอย่างหนึ่งคือ Vision API ซึ่งให้ความสามารถในการวิเคราะห์รูปภาพที่มีประสิทธิภาพ ใน Codelab นี้ คุณจะได้เรียนรู้วิธีการสร้างแอปพลิเคชัน Computer Vision โดยใช้ Spring Boot และ Java ซึ่งจะเปิดโอกาสให้คุณปลดล็อกศักยภาพของการจดจำและการวิเคราะห์รูปภาพในโปรเจ็กต์ของคุณ UI ของแอปพลิเคชันจะยอมรับอินพุต, 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 API แล้ว
3. Cloud Shell เปิดใช้งานแล้ว
4. Cloud Storage API เปิดใช้ที่เก็บข้อมูลที่สร้างและรูปภาพที่มีข้อความหรือลายมือในภาษาที่รองรับในเครื่องที่อัปโหลด (หรือคุณสามารถใช้ลิงก์รูปภาพตัวอย่างที่ให้ไว้ในบล็อกนี้)

โปรดดูเอกสารประกอบเพื่อดูขั้นตอนในการเปิดใช้ Google Cloud APIs

เปิดใช้งาน Cloud Shell

1. คุณจะใช้ Cloud Shell ซึ่งเป็นสภาพแวดล้อมแบบบรรทัดคำสั่งที่ทำงานใน Google Cloud และโหลด bq ไว้ล่วงหน้า

คลิก "เปิดใช้งาน Cloud Shell" ที่มุมขวาบนจาก Cloud Console

2. เมื่อเชื่อมต่อกับ Cloud Shell คุณควรเห็นว่าได้รับการตรวจสอบแล้ว และโปรเจ็กต์ได้รับการตั้งค่าเป็นรหัสโปรเจ็กต์แล้ว เรียกใช้คำสั่งต่อไปนี้ใน Cloud Shell เพื่อยืนยันว่าคุณได้รับการตรวจสอบสิทธิ์แล้ว

gcloud auth list

3. เรียกใช้คำสั่งต่อไปนี้ใน Cloud Shell เพื่อยืนยันว่าคำสั่ง gcloud รู้จักโปรเจ็กต์ของคุณ

gcloud config list project

4. หากไม่ได้ตั้งค่าโปรเจ็กต์ไว้ ให้ใช้คำสั่งต่อไปนี้เพื่อตั้งค่าโปรเจ็กต์

gcloud config set project <PROJECT_ID>

ดูคำสั่งและการใช้งาน gcloud ในเอกสารประกอบ

3. เริ่มต้นแคมเปญการบูตช่วงฤดูใบไม้ผลิ

หากต้องการเริ่มต้นใช้งาน ให้สร้างโปรเจ็กต์ Spring Boot ใหม่โดยใช้ IDE หรือ Spring Initializr ที่ต้องการ รวมทรัพยากร Dependency ที่จำเป็น เช่น 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 ประกอบด้วยทรัพยากร Dependency ทั้งหมดสำหรับโปรเจ็กต์ (เพิ่มทรัพยากร Dependency ที่คุณกำหนดค่าโดยใช้คำสั่งนี้แล้วใน pom.xml)

src/main/java/com/example/demo มีคลาสต้นฉบับไฟล์ .java

ทรัพยากรประกอบด้วยรูปภาพ, XML, ไฟล์ข้อความ และเนื้อหาแบบคงที่ที่โปรเจ็กต์ใช้ซึ่งได้รับการดูแลอย่างอิสระ

application.properties ช่วยให้คุณรักษาฟีเจอร์ของผู้ดูแลระบบไว้เพื่อกำหนดพร็อพเพอร์ตี้เฉพาะโปรไฟล์ของแอปพลิเคชัน

4. การกำหนดค่า Vision API

เมื่อเปิดใช้ Vision API แล้ว คุณจะมีตัวเลือกในการกำหนดค่าข้อมูลเข้าสู่ระบบ API ในแอปพลิเคชัน คุณอาจเลือกใช้ข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชันเพื่อตั้งค่าการตรวจสอบสิทธิ์ อย่างไรก็ตาม ฉันยังไม่ได้นำการใช้ข้อมูลเข้าสู่ระบบมาใช้ในการสาธิตนี้

การนำวิสัยทัศน์และบริการแปลภาษาไปใช้

สร้างคลาสบริการที่โต้ตอบกับ Vision API แทรกทรัพยากร Dependency ที่จำเป็นและใช้ไคลเอ็นต์ Vision API เพื่อส่งคำขอการวิเคราะห์รูปภาพ คุณสามารถใช้วิธีต่างๆ เพื่อทำงานต่างๆ เช่น การติดป้ายกำกับรูปภาพ การตรวจจับใบหน้า การจดจำ และอื่นๆ ตามข้อกำหนดของแอปพลิเคชัน ในการสาธิตนี้ เราจะใช้วิธีการแยกและการแปลด้วยลายมือ

สำหรับการดำเนินการนี้ โปรดตรวจสอบว่าคุณได้รวมทรัพยากร Dependency ต่อไปนี้ไว้ใน 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. results.html (/src/main/resources/templates)
6. pom.xml

เมธอด extractTextFromImage ในบริการ org.springframework.cloud.gcp.vision.CloudVisionTemplate ช่วยให้คุณดึงข้อความจากอินพุตรูปภาพได้ เมธอด getTranslatedText จากบริการ com.google.cloud.translate.v3 จะช่วยให้คุณสามารถส่งข้อความที่ดึงมาจากรูปภาพและรับข้อความที่แปลในภาษาเป้าหมายที่ต้องการเป็นการตอบกลับได้ (หากต้นฉบับอยู่ในรายการภาษาที่รองรับ)

การสร้าง REST API

ออกแบบและใช้ปลายทาง REST ที่จะแสดงฟังก์ชันการทำงานของ Vision API สร้างตัวควบคุมที่จัดการคำขอขาเข้าและใช้บริการ Vision API เพื่อประมวลผลรูปภาพและแสดงผลลัพธ์การวิเคราะห์ ในการสาธิตนี้ คลาส VisionController ของเราจะปรับใช้ปลายทาง จัดการคำขอที่เข้ามา เรียกใช้บริการ Vision API และ Cloud Translation และส่งคืนผลลัพธ์ไปยังเลเยอร์การแสดงผล การใช้งานเมธอด 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 ได้ง่ายขึ้น

ในการเริ่มต้นใช้งาน ให้ตรวจสอบว่าคุณมีทรัพยากร Dependency ที่จำเป็นสำหรับ Thymeleaf ในโปรเจ็กต์ Spring Boot คุณรวมทรัพยากร Dependency ของ 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

เขียนการทดสอบ 1 หน่วยสำหรับคลาสบริการและตัวควบคุมเพื่อให้แน่ใจว่ามีฟังก์ชันการทำงานที่เหมาะสมในโฟลเดอร์ /src/test/java/com/example เมื่อมั่นใจในความเสถียรแล้ว ให้จัดแพ็กเกจลงในอาร์ติแฟกต์ที่ทำให้ใช้งานได้ เช่น ไฟล์ JAR และทำให้ใช้งานได้กับ Cloud Run ซึ่งเป็นแพลตฟอร์มประมวลผลแบบ Serverless บน Google Cloud ในขั้นตอนนี้ เราจะเน้นการทำให้แอปพลิเคชัน Spring Boot ที่มีคอนเทนเนอร์ใช้งานได้โดยใช้ Cloud Run

1. สร้างแพ็กเกจให้กับแอปพลิเคชันโดยทำตามขั้นตอนต่อไปนี้จาก Cloud Shell(ตรวจสอบว่าเทอร์มินัลแสดงข้อความแจ้งที่โฟลเดอร์รูทของโปรเจ็กต์)

รุ่น:

./mvnw package

เมื่อบิลด์สำเร็จแล้ว ให้เรียกใช้ภายในเพื่อทดสอบ:

./mvnw spring-boot:run

2. สร้างคอนเทนเนอร์สำหรับแอปพลิเคชัน Spring Boot ด้วย Jib

คุณสามารถใช้ยูทิลิตี Jib เพื่อทำให้กระบวนการสร้างคอนเทนเนอร์ง่ายขึ้นได้ แทนที่จะสร้าง Dockerfile และสร้างอิมเมจคอนเทนเนอร์ด้วยตนเอง Jib เป็นปลั๊กอินที่ผสานรวมกับเครื่องมือสร้างของคุณโดยตรง (เช่น Maven หรือ Gradle) และช่วยให้คุณสร้างอิมเมจคอนเทนเนอร์ที่มีการเพิ่มประสิทธิภาพได้โดยไม่ต้องเขียน Dockerfile ก่อนดำเนินการต่อ คุณต้องเปิดใช้ Artifact Registry API (แนะนำให้ใช้ Artifact 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 ด้วยตัวเลือกการกำหนดค่าเพิ่มเติม

3. ทำให้คอนเทนเนอร์ (ที่เราพุชไปยัง 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

หรือคุณจะดำเนินการจาก UI ก็ได้เช่นกัน ไปที่ Google Cloud Console และค้นหาบริการ Cloud Run คลิก "สร้างบริการ" แล้วทำตามวิธีการบนหน้าจอ ระบุอิมเมจคอนเทนเนอร์ที่คุณพุชไปยังรีจิสทรีก่อนหน้านี้ กำหนดการตั้งค่าการติดตั้งใช้งานที่ต้องการ (เช่น การจัดสรร CPU และการปรับขนาดอัตโนมัติ) แล้วเลือกภูมิภาคที่เหมาะสมสำหรับการทำให้ใช้งานได้ คุณตั้งค่าตัวแปรสภาพแวดล้อมให้กับแอปพลิเคชันของคุณได้ ตัวแปรเหล่านี้อาจรวมถึงข้อมูลเข้าสู่ระบบการตรวจสอบสิทธิ์ (คีย์ API เป็นต้น), สตริงการเชื่อมต่อฐานข้อมูล หรือการกำหนดค่าอื่นๆ ที่จำเป็นเพื่อให้แอปพลิเคชัน Vision AI ทำงานได้อย่างถูกต้อง เมื่อการติดตั้งใช้งานเสร็จสมบูรณ์ คุณควรได้ปลายทางไปยังแอปพลิเคชัน

การใช้งานแอป Vision AI

สำหรับการสาธิต คุณสามารถใช้ URL รูปภาพด้านล่างเพื่อให้แอปอ่านและแปลได้: https://storage.googleapis.com/img_public_test/tamilwriting1.jfif

6. ล้างข้อมูล

โปรดทำตามขั้นตอนต่อไปนี้เพื่อเลี่ยงไม่ให้เกิดการเรียกเก็บเงินกับบัญชี Google Cloud สำหรับทรัพยากรที่ใช้ในโพสต์นี้

1. ในคอนโซล Google Cloud ให้ไปที่หน้าจัดการทรัพยากร
2. ในรายการโปรเจ็กต์ ให้เลือกโปรเจ็กต์ที่ต้องการลบ แล้วคลิกลบ
3. ในกล่องโต้ตอบ ให้พิมพ์รหัสโปรเจ็กต์ แล้วคลิกปิดเครื่องเพื่อลบโปรเจ็กต์

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 ลองทำการทดลองเดียวกันกับตัวเลือกโฆษณาเนทีฟในฤดูใบไม้ผลิ นอกจากนี้ ให้ทำความรู้จักกับ Gen-AI ด้วยการตรวจสอบวิธีที่ API นี้ปรากฏใน Model Garden