1. Pengantar
Di era aplikasi berbasis data saat ini, memanfaatkan layanan machine learning dan kecerdasan buatan canggih seperti computer vision menjadi semakin penting. Salah satu layanan tersebut adalah Vision API, yang menyediakan kemampuan analisis gambar yang canggih. Dalam codelab ini, Anda akan mempelajari cara membuat aplikasi Computer Vision menggunakan Spring Boot dan Java, sehingga Anda dapat memanfaatkan potensi pengenalan dan analisis gambar dalam proyek Anda. UI aplikasi akan menerima sebagai input, URL publik gambar yang berisi teks tertulis atau tercetak, mengekstrak teks, mendeteksi bahasa, dan jika merupakan salah satu bahasa yang didukung, aplikasi akan membuat terjemahan teks tersebut ke dalam bahasa Inggris.
Yang akan Anda build
Anda akan membuat
- Aplikasi Java Spring Boot untuk menggunakan Vision API dan Google Cloud Translation API
- Di-deploy di Cloud Run
2. Persyaratan
Berikut prasyaratnya:
Buat project Anda
- Akun Google Cloud dengan project yang dibuat dan penagihan yang diaktifkan
- Vision API, Translation API, Cloud Run API, dan Artifact Registry API diaktifkan
- Cloud Shell diaktifkan
- Cloud Storage API diaktifkan dengan bucket yang dibuat dan gambar dengan teks atau tulisan tangan dalam bahasa lokal yang didukung diupload (atau Anda dapat menggunakan link gambar contoh yang disediakan di blog ini)
Lihat dokumentasi untuk mengetahui langkah-langkah cara mengaktifkan Google Cloud API.
Aktifkan Cloud Shell
- Anda akan menggunakan Cloud Shell, lingkungan command line yang berjalan di Google Cloud yang telah dilengkapi dengan bq:
Dari Cloud Console, klik Activate Cloud Shell di pojok kanan atas
- Setelah terhubung ke Cloud Shell, Anda akan melihat bahwa Anda sudah diautentikasi dan project sudah ditetapkan ke project ID Anda. Jalankan perintah berikut di Cloud Shell untuk mengonfirmasi bahwa Anda telah diautentikasi:
gcloud auth list
- Jalankan perintah berikut di Cloud Shell untuk mengonfirmasi bahwa perintah gcloud mengetahui project Anda
gcloud config list project
- Jika project Anda belum ditetapkan, gunakan perintah berikut untuk menetapkannya:
gcloud config set project <PROJECT_ID>
Baca dokumentasi untuk mempelajari perintah gcloud dan penggunaannya.
3. Memulai Project Spring Boot
Untuk memulai, buat project Spring Boot baru menggunakan IDE atau Spring Initializr pilihan Anda. Sertakan dependensi yang diperlukan, seperti Spring Web, Spring Cloud GCP, dan Vision AI, dalam konfigurasi project Anda. Atau, Anda dapat menggunakan Spring Initializr dari Cloud Shell menggunakan langkah-langkah di bawah untuk mem-bootstrap aplikasi Spring Boot dengan mudah.
Jalankan perintah berikut untuk membuat project 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 adalah nama project Anda, ubah sesuai kebutuhan Anda.
bootVersion adalah versi Spring Boot, pastikan untuk memperbaruinya jika diperlukan pada saat penerapan.
type adalah jenis alat build project versi, Anda dapat mengubahnya menjadi gradle jika diinginkan.
Langkah ini akan membuat struktur project di "spring-vision" seperti di bawah:
pom.xml berisi semua dependensi untuk project (dependensi yang Anda konfigurasi menggunakan perintah ini sudah ditambahkan di pom.xml Anda).
src/main/java/com/example/demo memiliki file .java class sumber.
resources berisi gambar, XML, file teks, dan konten statis yang digunakan project dan dikelola secara independen.
application.properties memungkinkan Anda mempertahankan fitur admin untuk menentukan properti khusus profil aplikasi.
4. Mengonfigurasi Vision API
Setelah Vision API diaktifkan, Anda memiliki opsi untuk mengonfigurasi kredensial API di aplikasi Anda. Anda dapat secara opsional menggunakan Kredensial Default Aplikasi untuk menyiapkan autentikasi. Namun, dalam penerapan demo ini, saya belum menerapkan penggunaan kredensial.
Menerapkan layanan terjemahan dan visi
Buat class layanan yang berinteraksi dengan Vision API. Suntikkan dependensi yang diperlukan dan gunakan klien Vision API untuk mengirim permintaan analisis gambar. Anda dapat menerapkan metode untuk melakukan tugas seperti pemberian label gambar, deteksi wajah, pengenalan, dan lainnya, berdasarkan persyaratan aplikasi Anda. Dalam demo ini, kita akan menggunakan metode ekstraksi dan terjemahan tulisan tangan.
Untuk melakukannya, pastikan Anda menyertakan dependensi berikut dalam 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>
Clone / Ganti file berikut dari repo dan tambahkan ke folder / jalur masing-masing dalam struktur project:
- 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
Metode extractTextFromImage di layanan org.springframework.cloud.gcp.vision.CloudVisionTemplate memungkinkan Anda mengekstrak teks dari input gambar. Metode getTranslatedText dari layanan com.google.cloud.translate.v3 memungkinkan Anda meneruskan teks yang diekstrak dari gambar dan mendapatkan teks yang diterjemahkan dalam bahasa target yang diinginkan sebagai respons (jika sumbernya dalam salah satu daftar bahasa yang didukung).
Membangun REST API
Desain dan terapkan endpoint REST yang akan mengekspos fungsi Vision API. Buat pengontrol yang menangani permintaan masuk dan menggunakan layanan Vision API untuk memproses gambar dan menampilkan hasil analisis. Dalam demo ini, class VisionController kami mengimplementasikan endpoint, menangani permintaan masuk, memanggil layanan Vision API dan Cloud Translation, serta menampilkan hasilnya ke lapisan tampilan. Implementasi metode GET untuk endpoint REST adalah sebagai berikut:
@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;
}
Class TranslateText dalam implementasi di atas memiliki metode yang memanggil layanan 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);
}
Dengan class VisionController, kita telah menerapkan metode GET untuk REST.
Mengintegrasikan Thymeleaf untuk pengembangan frontend
Saat membangun aplikasi dengan Spring Boot, salah satu pilihan populer untuk pengembangan frontend adalah memanfaatkan kecanggihan Thymeleaf. Thymeleaf adalah mesin template Java sisi server yang memungkinkan Anda mengintegrasikan konten dinamis dengan lancar ke dalam halaman HTML. Thymeleaf memberikan pengalaman pengembangan yang lancar dengan memungkinkan Anda membuat template HTML dengan ekspresi sisi server yang disematkan. Ekspresi ini dapat digunakan untuk merender data secara dinamis dari backend Spring Boot Anda, sehingga memudahkan untuk menampilkan hasil analisis gambar yang dilakukan oleh layanan Vision API.
Untuk memulai, pastikan Anda memiliki dependensi yang diperlukan untuk Thymeleaf di project Spring Boot Anda. Anda dapat menyertakan dependensi Thymeleaf Starter di pom.xml:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Dalam metode pengontrol, ambil hasil analisis dari layanan Vision API dan tambahkan ke model. Model merepresentasikan data yang akan digunakan oleh Thymeleaf untuk merender template HTML. Setelah model diisi, kembalikan nama template Thymeleaf yang ingin Anda render. Thymeleaf akan menangani pemrosesan template, mengganti ekspresi sisi server dengan data aktual, dan membuat HTML akhir yang akan dikirim ke browser klien.
Dalam kasus metode extractText di VisionController, kita telah menampilkan hasilnya sebagai String dan tidak ditambahkan ke model. Namun, kita telah memanggil metode GET extractText pada index.html saat pengiriman halaman. Dengan Thymeleaf, Anda dapat membuat pengalaman pengguna yang lancar, tempat pengguna dapat mengupload gambar, memicu analisis Vision API, dan melihat hasilnya secara real-time. Maksimalkan potensi aplikasi Vision AI Anda dengan memanfaatkan kecanggihan Thymeleaf untuk pengembangan frontend.
<form action="/extractText">
Web URL of image to analyze:
<input type="text"
name="imageUrl"
value=""
<input type="submit" value="Read and Translate" />
</form>
5. Men-deploy aplikasi computer vision di Cloud Run
Tulis pengujian unit untuk class layanan dan pengontrol Anda guna memastikan fungsi yang tepat di folder /src/test/java/com/example. Setelah Anda yakin dengan stabilitasnya, kemas menjadi artefak yang dapat di-deploy, seperti file JAR, dan deploy ke Cloud Run, platform komputasi serverless di Google Cloud. Pada langkah ini, kita akan berfokus pada men-deploy aplikasi Spring Boot dalam container menggunakan Cloud Run.
- Paketkan aplikasi Anda dengan menjalankan langkah-langkah berikut dari Cloud Shell(pastikan terminal meminta di folder root project)
Bentukan:
./mvnw package
Setelah build berhasil, jalankan secara lokal untuk menguji:
./mvnw spring-boot:run
- Membuat Container Aplikasi Spring Boot dengan Jib:
Daripada membuat Dockerfile secara manual dan mem-build image container, Anda dapat menggunakan utilitas Jib untuk menyederhanakan proses containerisasi. Jib adalah plugin yang terintegrasi langsung dengan alat build Anda (seperti Maven atau Gradle) dan memungkinkan Anda membuat image container yang dioptimalkan tanpa menulis Dockerfile. Sebelum melanjutkan, Anda harus mengaktifkan Artifact Registry API (Penggunaan Artifact Registry lebih disarankan daripada container registry). Kemudian, jalankan Jib untuk membangun image Docker dan memublikasikan ke Registry:
$ ./mvnw com.google.cloud.tools:jib-maven-plugin:3.1.1:build -Dimage=gcr.io/$GOOGLE_CLOUD_PROJECT/vision-jib
Catatan: Dalam eksperimen ini, kami tidak mengonfigurasi plugin Jib Maven di pom.xml, tetapi untuk penggunaan lanjutan, Anda dapat menambahkannya di pom.xml dengan opsi konfigurasi lainnya
- Deploy container (yang kita kirim ke Artifact Registry pada langkah sebelumnya) ke Cloud Run. Ini adalah langkah satu perintah lagi:
gcloud run deploy vision-app --image gcr.io/$GOOGLE_CLOUD_PROJECT/vision-jib --platform managed --region us-central1 --allow-unauthenticated --update-env-vars
Anda juga dapat melakukannya dari UI. Buka Konsol Google Cloud dan temukan layanan Cloud Run. Klik "Buat Layanan" dan ikuti petunjuk di layar. Tentukan image container yang sebelumnya Anda kirim ke registry, konfigurasikan setelan deployment yang diinginkan (seperti alokasi CPU dan penskalaan otomatis), lalu pilih region yang sesuai untuk deployment. Anda dapat menetapkan variabel lingkungan khusus untuk aplikasi Anda. Variabel ini dapat mencakup kredensial autentikasi (kunci API, dll.), string koneksi database, atau konfigurasi lain yang diperlukan agar aplikasi Vision AI Anda berfungsi dengan benar. Setelah deployment berhasil diselesaikan, Anda akan mendapatkan endpoint ke aplikasi Anda.
Menggunakan aplikasi Vision AI Anda
Untuk tujuan demo, Anda dapat menggunakan URL gambar di bawah agar aplikasi Anda dapat membaca dan menerjemahkannya: https://storage.googleapis.com/img_public_test/tamilwriting1.jfif
6. Pembersihan
Agar tidak menimbulkan biaya pada akun Google Cloud Anda untuk resource yang digunakan dalam posting ini, ikuti langkah-langkah berikut:
- Di konsol Google Cloud, buka halaman Manage resources
- Dalam daftar project, pilih project yang ingin Anda hapus, lalu klik Delete
- Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project
7. Selamat
Selamat! Anda telah berhasil membuat aplikasi Vision AI menggunakan Spring Boot dan Java. Dengan kecanggihan Vision AI, aplikasi Anda kini dapat melakukan analisis gambar yang canggih, termasuk pelabelan, deteksi wajah, dan lainnya. Integrasi Spring Boot memberikan fondasi yang solid untuk membangun aplikasi Google Cloud Native yang skalabel dan andal. Terus pelajari berbagai kemampuan Vision AI, Cloud Run, Cloud Translation, dan lainnya untuk meningkatkan kualitas aplikasi Anda dengan fitur dan fungsi tambahan. Untuk mempelajari lebih lanjut, lihat dokumentasi Vision API, Cloud Translation, dan GCP Spring. Coba eksperimen yang sama dengan opsi Spring Native. Selain itu, sebagai pratinjau dunia AI Generatif, lihat cara API ini muncul di Model Garden.