この Codelab について
1. はじめに
昨今のデータドリブン アプリケーションの時代において、コンピュータ ビジョンのような高度な ML サービスや AI サービスを活用することの重要性はますます高まっています。そのようなサービスの 1 つが Vision API です。Vision API は高度な画像解析機能を提供します。この Codelab では、Spring Boot と Java を使用してコンピュータ ビジョン アプリケーションを作成し、プロジェクトで画像認識と分析の可能性を引き出す方法を学びます。アプリケーションの UI は入力として、文字や印刷されたテキストを含む画像の公開 URL を受け取り、テキストを抽出して言語を検出します。サポートされている言語のいずれかであれば、そのテキストの英語翻訳を生成します。
作成するアプリの概要
まず、
- Vision API と Google Cloud Translation API を使用するための Java Spring Boot アプリケーション
- Cloud Run にデプロイ
2. 要件
前提条件は次のとおりです。
プロジェクトを作成する
- プロジェクトが作成されて課金が有効になっている Google Cloud アカウント
- Vision API、Translation API、Cloud Run API、Artifact Registry API が有効になっている
- Cloud Shell が有効
- バケットが作成され、Cloud Storage API が有効になっており、サポートされているローカル言語のテキストまたは手書き文字を含む画像がアップロードされている(または、このブログで提供されているサンプル画像のリンクを使用できます)
Google Cloud APIs を有効にする手順については、こちらのドキュメントをご覧ください。
Cloud Shell をアクティブにする
- Cloud Shell を使用します。Cloud Shell は Google Cloud で実行されるコマンドライン環境で、bq があらかじめ組み込まれています。
Cloud コンソールで、右上にある [Cloud Shell をアクティブにする] をクリックします。
- Cloud Shell に接続すると、すでに認証は完了しており、プロジェクトに各自のプロジェクト ID が設定されていることがわかります。Cloud Shell で次のコマンドを実行して、認証されたことを確認します。
gcloud auth list
- Cloud Shell で次のコマンドを実行して、gcloud コマンドがプロジェクトを認識していることを確認します。
gcloud config list project
- プロジェクトが設定されていない場合は、次のコマンドを使用して設定します。
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 に変更できます。
「spring-vision」配下にプロジェクト構造が作成されます次のようになります。
pom.xml には、プロジェクトのすべての依存関係が含まれています(このコマンドを使用して構成した依存関係は、すでに pom.xml に追加されています)。
src/main/java/com/example/demo には、ソースクラスの .java ファイルがあります。
リソース: 独立して管理される、プロジェクトが使用する画像、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>
リポジトリから次のファイルのクローンを作成するか置き換えて、プロジェクト構造のそれぞれのフォルダ / パスに追加します。
- 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
サービス 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 アプリケーションをデプロイすることに焦点を当てます。
- Cloud Shell から次の手順を実行して、アプリケーションをパッケージ化します(ターミナルでプロジェクトのルートフォルダが表示されていることを確認してください)。
構築:
./mvnw package
ビルドが成功したら、ローカルで実行してテストします。
./mvnw spring-boot:run
- Jib を使用して Spring Boot アプリケーションをコンテナ化します。
手動で Dockerfile
を作成してコンテナ イメージを構築する代わりに、Jib ユーティリティを使用してコンテナ化プロセスを簡素化できます。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 に追加することもできます。
- コンテナ(前のステップで Artifact Registry にプッシュしたもの)を Cloud Run にデプロイします。これも 1 つのコマンドで行えます。
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 サービスを探します。[サービスの作成] をクリックし、画面の指示に従います。レジストリに push したコンテナ イメージを指定し、必要なデプロイ設定(CPU 割り当てや自動スケーリングなど)を行い、デプロイに適したリージョンを選択します。アプリケーションに固有の環境変数を設定できます。これらの変数には、認証情報(API キーなど)、データベース接続文字列、または Vision AI アプリケーションが正しく機能するために必要なその他の構成を含めることができます。デプロイが正常に完了すると、アプリケーションへのエンドポイントが表示されます。
Vision AI アプリを使ってみる
デモ用に、以下の画像 URL をアプリに読み取り、翻訳できます。https://storage.googleapis.com/img_public_test/tamilwriting1.jfif
6. クリーンアップ
この投稿で使用したリソースについて、Google Cloud アカウントに課金されないようにするには、次の操作を行います。
- Google Cloud コンソールで、[リソースの管理] ページに移動します。
- プロジェクト リストで、削除するプロジェクトを選択し、[削除] をクリックします。
- ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。
7. 完了
これで、Spring Boot と Java を使用して、Vision AI アプリケーションを作成することができました。Vision AI を活用することで、アプリケーションがラベリング、顔検出などの高度な画像解析を実行できるようになりました。Spring Boot のインテグレーションは、スケーラブルで堅牢な Google Cloud ネイティブ アプリケーションを構築するための強固な基盤を提供します。Vision AI、Cloud Run、Cloud Translation などがもつ優れた性能を引き続き探求し、アプリケーションに機能を追加して強化しましょう。詳細については、Vision API、Cloud Translation、GCP Spring のドキュメントをご覧ください。「Spring Native」オプションでも同じテストをお試しください。また、生成 AI の世界のプレビューとして、この API が Model Garden でどのように表示されるかを確認できます。