1. Pengantar
Di era aplikasi berbasis data saat ini, pemanfaatan machine learning yang canggih dan layanan kecerdasan buatan seperti computer vision menjadi semakin penting. Salah satu layanan tersebut adalah Vision API, yang memberikan 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 citra dalam project Anda. UI aplikasi akan menerima URL publik gambar yang berisi teks tertulis atau dicetak, mengekstrak teks, mendeteksi bahasa, dan jika menggunakan salah satu bahasa yang didukung, UI aplikasi akan menghasilkan terjemahan bahasa Inggris dari teks tersebut.
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 adalah prasyaratnya:
Buat project Anda
- Akun Google Cloud dengan project yang dibuat dan penagihan diaktifkan
- Vision API, Translation, Cloud Run, dan Artifact Registry API diaktifkan
- Cloud Shell diaktifkan
- Cloud Storage API diaktifkan dengan membuat bucket dan gambar berisi teks atau tulisan tangan dalam bahasa lokal yang didukung (atau Anda dapat menggunakan link gambar contoh yang disediakan dalam blog ini)
Lihat dokumentasi untuk mengetahui langkah-langkah tentang cara mengaktifkan Google Cloud API.
Aktifkan Cloud Shell
- Anda akan menggunakan Cloud Shell, yakni lingkungan command line yang berjalan di Google Cloud dan 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. Melakukan bootstrap pada 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 ini untuk melakukan bootstrap pada aplikasi Spring Boot Anda dengan mudah.
Jalankan perintah berikut untuk membuat project Spring Boot Anda:
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.
bootVersion adalah versi Spring Boot, pastikan Anda mengupdatenya jika diperlukan pada saat implementasi.
type adalah versi jenis alat build project, Anda dapat mengubahnya ke gradle jika diinginkan.
Ini menciptakan struktur proyek di bawah "{i>spring-vision<i}" sebagai berikut:
pom.xml berisi semua dependensi untuk project (dependensi yang Anda konfigurasi menggunakan perintah ini sudah ditambahkan di pom.xml).
src/main/java/com/example/demo memiliki file .java class sumber.
resource berisi file gambar, XML, dan konten statis yang digunakan project serta dikelola secara independen.
application.properties memungkinkan Anda mengelola fitur admin untuk menentukan properti khusus profil aplikasi.
4. Mengonfigurasi Vision API
Setelah mengaktifkan Vision API, Anda memiliki opsi untuk mengonfigurasi kredensial API di aplikasi. Secara opsional, Anda dapat menggunakan Kredensial Default Aplikasi untuk menyiapkan autentikasi. Namun, dalam implementasi demo ini, saya belum menerapkan penggunaan kredensial.
Menerapkan layanan visi dan terjemahan
Buat class layanan yang berinteraksi dengan Vision API. Masukkan dependensi yang diperlukan dan gunakan klien Vision API untuk mengirim permintaan analisis gambar. Anda dapat mengimplementasikan metode untuk melakukan tugas seperti pelabelan gambar, deteksi wajah, pengenalan, dan lainnya, berdasarkan persyaratan aplikasi Anda. Dalam demo ini, kami akan menggunakan metode ekstraksi dan terjemahan tulisan tangan.
Untuk itu, 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 dalam 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 terjemahan dalam bahasa target yang diinginkan sebagai respons (jika sumbernya termasuk dalam salah satu daftar bahasa yang didukung).
Membangun REST API
Rancang 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 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 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 ke halaman HTML dengan lancar. Thymeleaf memberikan pengalaman pengembangan yang lancar dengan memungkinkan Anda membuat template HTML dengan ekspresi sisi server tersemat. Ekspresi ini dapat digunakan untuk merender data secara dinamis dari backend Spring Boot Anda, sehingga lebih mudah 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 ini mewakili data yang akan digunakan oleh Thymeleaf untuk merender template HTML. Setelah model diisi, tampilkan nama template Thymeleaf yang ingin Anda render. Thymeleaf akan menangani pemrosesan template, mengganti ekspresi sisi server dengan data aktual, dan menghasilkan HTML akhir yang akan dikirim ke browser klien.
Dalam kasus metode extractText di VisionController, kita telah menampilkan hasilnya sebagai String ke dan tidak ditambahkan ke model. Namun, kami telah memanggil metode GET extractText pada index.html saat pengiriman halaman. Dengan Thymeleaf, Anda dapat menciptakan pengalaman pengguna yang lancar, di mana pengguna dapat mengupload gambar, memicu analisis Vision API, dan melihat hasilnya secara real-time. Wujudkan potensi aplikasi Vision AI Anda sepenuhnya dengan memanfaatkan kekuatan 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 Anda di Cloud Run
Tulis pengujian unit untuk class layanan dan pengontrol guna memastikan fungsi yang tepat di folder /src/test/java/com/example. Setelah Anda yakin dengan stabilitasnya, paketkan ke dalam 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 deployment aplikasi Spring Boot dalam container menggunakan Cloud Run.
- Kemas aplikasi Anda dengan menjalankan langkah-langkah berikut dari Cloud Shell(pastikan terminal meminta izin di folder root project)
Bentukan:
./mvnw package
Setelah build berhasil, jalankan secara lokal untuk menguji:
./mvnw spring-boot:run
- Simpan Aplikasi Spring Boot Anda dalam container dengan Jib:
Daripada membuat Dockerfile dan mem-build image container secara manual, Anda dapat menggunakan utilitas Jib untuk menyederhanakan proses containerization. Jib adalah plugin yang terintegrasi langsung dengan alat build Anda (seperti Maven atau Gradle) dan memungkinkan Anda membangun image container yang dioptimalkan tanpa menulis Dockerfile. Sebelum melanjutkan, Anda perlu mengaktifkan Artifact Registry API (Penggunaan Artifact Registry lebih disarankan daripada container registry). Kemudian, Jalankan Jib untuk membangun image Docker dan memublikasikannya 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 lebih banyak opsi konfigurasi
- Deploy container (yang telah kita kirimkan ke Artifact Registry pada langkah sebelumnya) ke Cloud Run. Ini adalah langkah satu perintah:
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 melakukan ini dari UI. Buka Konsol Google Cloud dan temukan layanan Cloud Run. Klik "Create Service" dan ikuti petunjuk di layar. Tentukan image container yang sebelumnya Anda kirimkan 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. 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. Saat deployment berhasil diselesaikan, Anda akan mendapatkan endpoint untuk aplikasi Anda.
Bermain dengan aplikasi Vision AI
Untuk tujuan demo, Anda dapat menggunakan URL gambar di bawah ini untuk aplikasi Anda guna membaca dan menerjemahkan: 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 banyak lagi. Integrasi Spring Boot memberikan fondasi yang kuat untuk membangun aplikasi Berbasis Google Cloud yang skalabel dan kuat. Terus eksplorasi berbagai kemampuan Vision AI, Cloud Run, Cloud Translation, dan lainnya untuk meningkatkan kualitas aplikasi Anda dengan fitur dan fungsionalitas tambahan. Untuk mempelajari lebih lanjut, lihat dokumen Vision API, Cloud Translation, dan GCP Spring. Coba eksperimen yang sama dengan opsi Native Musim Semi. Selain itu, sebagai gambaran sekilas tentang dunia Gen-AI, lihat bagaimana API ini ditampilkan di Model Garden.