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

1. บทนำ

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

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

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

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

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

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

หากต้องการเริ่มต้นใช้งาน ให้สร้างโปรเจ็กต์ 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 ของคลาสต้นฉบับ

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

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

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

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

การใช้บริการวิชันซิสเต็มและบริการแปล

สร้างคลาสบริการที่โต้ตอบกับ Vision API แทรกการอ้างอิงที่จำเป็นและใช้ไคลเอ็นต์ 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. result.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 คุณสามารถรวมการอ้างอิง 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

เขียน Unit Test สำหรับคลาสบริการและคลาส Controller เพื่อให้มั่นใจว่าฟังก์ชันการทำงานจะถูกต้องภายใต้โฟลเดอร์ /src/test/java/com/example เมื่อมั่นใจในความเสถียรแล้ว ให้แพ็กเกจเป็นอาร์ติแฟกต์ที่สามารถนำไปใช้ได้ เช่น ไฟล์ JAR แล้วนำไปใช้กับ Cloud Run ซึ่งเป็นแพลตฟอร์มการประมวลผลแบบไร้เซิร์ฟเวอร์ใน 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 แทน 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 พร้อมตัวเลือกการกำหนดค่าเพิ่มเติมได้

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 Console ให้ไปที่หน้าจัดการทรัพยากร
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 ลองใช้การทดสอบเดียวกันกับตัวเลือก Spring Native ดู นอกจากนี้ เพื่อเป็นการแอบดูโลกของ Gen AI โปรดดูว่า API นี้ปรากฏใน Model Garden อย่างไร