輕鬆運用電腦視覺：Spring Boot 和 Java 的 Vision AI

1. 簡介

在這個資料導向應用程式的時代，運用先進的機器學習和人工智慧服務 (例如電腦視覺) 變得越來越重要。而 Vision API 就是其中一種服務，這個 API 提供強大的圖片分析功能。在本程式碼研究室中，您將瞭解如何使用 Spring Boot 和 Java 建立電腦視覺應用程式，發揮專案中圖片辨識與分析的潛力。應用程式使用者介面接受輸入文字的公開網址 (包含書面或列印文字)、擷取文字、偵測語言，如果內容為支援的語言之一，便會產生該文字的英文翻譯。

建構項目

建立專屬代碼

  • 一個用於使用 Vision API 和 Google Cloud Translation API 的 Java Spring Boot 應用程式
  • 已在 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 API 的步驟，請參閱說明文件。

啟用 Cloud Shell

  1. 您將使用 Cloud Shell，這是在 Google Cloud 中執行的指令列環境，已預先載入 bq：

在 Cloud 控制台中，按一下右上角的「啟用 Cloud Shell」

51622c00acec2fa.png

  1. 連線至 Cloud Shell 後，您應會發現自己通過驗證，且專案已設為您的專案 ID。在 Cloud Shell 中執行下列指令，確認您已通過驗證：
gcloud auth list
  1. 在 Cloud Shell 中執行下列指令，確認 gcloud 指令知道您的專案
gcloud config list project
  1. 如果尚未設定專案，請使用下列指令進行設定：
gcloud config set project <PROJECT_ID>

如要查看 gcloud 指令和使用方式，請參閱說明文件。

3. 啟動 Spring Boot 專案

首先，請使用您偏好的 IDE 或 Spring Initializr 建立新的 Spring Boot 專案。在專案設定中加入必要的依附元件，例如 Spring Web、Spring Cloud GCP 和 Vision AI。您也可以按照下列步驟，透過 Cloud Shell 使用 Spring Initializr，輕鬆啟動 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。

37813d3982ce2e42.png

這樣就能在「spring-vision」下方建立專案結構如下所示：

3e70d45d88ac6935.png

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 用戶端傳送圖片分析要求。您可以根據應用程式的需求，實作圖片標籤、臉部偵測、辨識等工作的方法。在這個示範中，我們會使用手寫擷取和翻譯方法。

為此，請確認您已在 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

org.springframework.cloud.gcp.vision.CloudVisionTemplate 服務中的 extractTextFromImage 方法可讓您從圖片輸入內容中擷取文字。「com.google.cloud.translate.v3」服務中的 getTranslatedText 方法可讓您從圖片傳遞擷取的文字，並以所需譯文語言取得翻譯文字 (如果來源位於支援語言清單中)。

建構 REST API

設計並實作會公開 Vision API 功能的 REST 端點。建立可處理傳入要求的控制器，以及運用 Vision API 服務處理圖片並傳回分析結果。在這個示範中，我們的 VisionController 類別會實作端點、處理傳入要求、叫用 Vision API 和 Cloud Translation 服務，並將結果傳回至檢視區塊圖層。實作 REST 端點的 GET 方法如下：

@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 類別，我們可以實作 REST 的 GET 方法，

整合 Thymeleaf 以進行前端開發

使用 Spring Boot 建構應用程式時，熱門的前端開發選項之一就是運用 Thymeleaf。Thymeleaf 是伺服器端的 Java 範本引擎，可讓您將動態內容完美整合至 HTML 網頁中。Thymeleaf 可讓您使用嵌入式伺服器端運算式來建立 HTML 範本，從而提供順暢的開發體驗。這些運算式可用來動態轉譯 Spring Boot 後端的資料，更輕鬆地顯示 Vision API 服務執行的圖片分析結果。

如要開始使用，請確認您已在 Spring Boot 專案中取得 Thymeleaf 所需的依附元件。您可以在 pom.xml 中加入 Thymeleaf Starter 依附元件：

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

在控制器方法中，從 Vision API 服務擷取分析結果並將其新增至模型。這個模型代表 Thymeleaf 用來轉譯 HTML 範本的資料。填入模型後，請傳回您要算繪的 Thymeleaf 範本名稱。Thymeleaf 會負責處理範本，將伺服器端的運算式換成實際資料，然後產生將傳送至用戶端瀏覽器的最終 HTML。

針對 VisionController 中的 extractText 方法，我們已將結果以 String 的形式傳回，但未新增至模型。但是，我們已在提交網頁的 index.html 上叫用 GET 方法 extractText 方法。透過 Thymeleaf，您可以打造流暢的使用者體驗，讓使用者上傳圖片、觸發 Vision API 分析，並即時查看結果。運用 Thymeleaf 的強大功能進行前端開發，充分發揮 Vision AI 應用程式的潛力。

<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 檔案)，然後部署至 Google Cloud 上的無伺服器運算平台 Cloud Run。在這個步驟中，我們會著重於使用 Cloud Run 部署容器化 Spring Boot 應用程式。

  1. 透過 Cloud Shell 執行下列步驟來封裝應用程式(請確認終端機在專案根資料夾中顯示提示)

版本：

./mvnw package

建構成功後，請在本機執行以測試：

./mvnw spring-boot:run
  1. 使用 Jib 將 Spring Boot 應用程式容器化：

您可以使用 Jib 公用程式來簡化容器化程序，不必手動建立 Dockerfile 及建構容器映像檔。Jib 是直接與建構工具 (例如 Maven 或 Gradle) 整合的外掛程式，無須編寫 Dockerfile 即可建構最佳化的容器映像檔。您必須啟用 Artifact Registry API，才能繼續操作。建議您透過 Container Registry 使用 Artifact Registry。然後執行 Jib 建構 Docker 映像檔並發布至 Registry：

$ ./mvnw com.google.cloud.tools:jib-maven-plugin:3.1.1:build -Dimage=gcr.io/$GOOGLE_CLOUD_PROJECT/vision-jib

注意：在本實驗中，我們沒有在 pom.xml 中設定 Jib Maven 外掛程式，但如要進階使用，可透過更多設定選項在 pom.xml 中加入 Jib Maven 外掛程式

  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

或者，您也可以在 UI 中執行這項操作。前往 Google Cloud 控制台，然後找出 Cloud Run 服務。按一下 [建立服務]然後按照畫面上的指示操作指定您先前推送至登錄檔的容器映像檔，調整所需部署設定 (例如 CPU 分配和自動調度資源)，並選擇合適的部署區域。您可以設定應用程式專屬的環境變數。這些變數可包含驗證憑證 (API 金鑰等)、資料庫連線字串，或是 Vision AI 應用程式正常運作所需的任何其他設定。部署順利完成後，應用程式應該會取得端點。

使用 Vision AI 應用程式玩遊戲

為了做為示範之用，您可以使用下方的圖片網址，讓應用程式讀取及翻譯：https://storage.googleapis.com/img_public_test/tamilwriting1.jfif

654c1b0de0db482.gif

6. 清除所用資源

如要避免系統向您的 Google Cloud 帳戶收取本文中所用資源的費用，請按照下列步驟操作：

  1. 前往 Google Cloud 控制台中的「管理資源」頁面
  2. 在專案清單中選取要刪除的專案，然後按一下「刪除」
  3. 在對話方塊中輸入專案 ID，然後按一下「關閉」以刪除專案

7. 恭喜

恭喜！您已成功使用 Spring Boot 和 Java 建立 Vision AI 應用程式。透過強大的 Vision AI，應用程式現在可以執行複雜的圖片分析作業，包括加上標籤、偵測臉部偵測等。與 Spring Boot 整合，為建構可擴充且穩固的 Google Cloud Native 應用程式奠定穩固基礎。持續探索 Vision AI、Cloud Run、Cloud Translation 等豐富功能，為應用程式增添其他功能。詳情請參閱 Vision API、Cloud Translation 和 GCP Spring 說明文件。現在試著與 [Spring Native] 選項相同實驗！同時搶先一步瞭解生成式 AI 的應用方式，也想瞭解這個 API 在模型園地中的顯示方式。