1. Introducción
En la actualidad, en la era de las aplicaciones basadas en datos, es cada vez más importante aprovechar los servicios avanzados de aprendizaje automático y de inteligencia artificial, como la visión artificial. Uno de estos servicios es la API de Vision, que proporciona potentes capacidades de análisis de imágenes. En este codelab, aprenderás a crear una aplicación de Visión por computadora con Spring Boot y Java, lo que te permitirá aprovechar el potencial del reconocimiento y el análisis de imágenes en tus proyectos. La IU de la aplicación aceptará como entrada URLs públicas de imágenes que contengan texto escrito o impreso, extraerá el texto, detectará el idioma y, si es uno de los idiomas admitidos, generará la traducción al inglés de ese texto.
Qué compilarás
Crearás un
- Una aplicación de Spring Boot en Java para usar la API de Vision y la API de Google Cloud Translation
- Implementado en Cloud Run
2. Requisitos
A continuación, se indican los requisitos previos:
Crea tu proyecto
- Una cuenta de Google Cloud con un proyecto creado y la facturación habilitada
- APIs de Vision, Translation, Cloud Run y Artifact Registry habilitadas
- Cloud Shell activado
- API de Cloud Storage habilitada con un bucket creado y con imágenes con texto o escritura a mano en idiomas locales admitidos subidas (o puedes usar los vínculos de imágenes de muestra que se proporcionan en este blog)
Consulta la documentación para conocer los pasos para habilitar las APIs de Google Cloud.
Activa Cloud Shell
- Usarás Cloud Shell, un entorno de línea de comandos que se ejecuta en Google Cloud y que viene precargado con bq:
En la consola de Cloud, haz clic en Activar Cloud Shell en la esquina superior derecha.
- Una vez que estés conectado a Cloud Shell, deberías ver que ya se autenticó y que el proyecto ya se configuró con tu ID de proyecto. En Cloud Shell, ejecuta el siguiente comando para confirmar que tienes la autenticación:
gcloud auth list
- En Cloud Shell, ejecuta el siguiente comando para confirmar que el comando gcloud conoce tu proyecto.
gcloud config list project
- Si tu proyecto no está configurado, usa el siguiente comando para hacerlo:
gcloud config set project <PROJECT_ID>
Consulta la documentación para ver los comandos y el uso de gcloud.
3. Cómo iniciar un proyecto de Spring Boot
Para comenzar, crea un proyecto nuevo de Spring Boot con tu IDE o Spring Initializr preferido. Incluye las dependencias necesarias, como Spring Web, Spring Cloud GCP y Vision AI, en la configuración de tu proyecto. Como alternativa, puedes usar Spring Initializr desde Cloud Shell siguiendo los pasos que se indican a continuación para iniciar tu aplicación de Spring Boot fácilmente.
Ejecuta el siguiente comando para crear tu proyecto de 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 es el nombre de tu proyecto. Cámbialo según tus requisitos.
bootVersion es la versión de Spring Boot. Asegúrate de actualizarla si es necesario en el momento de la implementación.
type es la versión del tipo de herramienta de compilación del proyecto. Puedes cambiarla a Gradle si lo prefieres.
Esto crea una estructura de proyecto en "spring-vision" como se muestra a continuación:
pom.xml contiene todas las dependencias del proyecto (las dependencias que configuraste con este comando ya se agregaron a tu pom.xml).
src/main/java/com/example/demo contiene los archivos .java de las clases de origen.
resources contiene las imágenes, los archivos XML y de texto, y el contenido estático que usa el proyecto y que se mantiene de forma independiente.
application.properties te permite mantener las funciones de administrador para definir propiedades específicas del perfil de la aplicación.
4. Configura la API de Vision
Una vez que hayas habilitado la API de Vision, tendrás la opción de configurar las credenciales de la API en tu aplicación. De manera opcional, puedes usar las credenciales predeterminadas de la aplicación para configurar la autenticación. Sin embargo, en esta implementación de demostración, no implementé el uso de credenciales.
Implementación de los servicios de visión y traducción
Crea una clase de servicio que interactúe con la API de Vision. Inyecta las dependencias necesarias y usa el cliente de la API de Vision para enviar solicitudes de análisis de imágenes. Puedes implementar métodos para realizar tareas como el etiquetado de imágenes, la detección de rostros, el reconocimiento y mucho más, según los requisitos de tu aplicación. En esta demostración, usaremos métodos de extracción y traducción de escritura a mano.
Para ello, asegúrate de incluir las siguientes dependencias en 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>
Clona o reemplaza los siguientes archivos del repositorio y agrégalos a las carpetas o rutas respectivas en la estructura del proyecto:
- 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
El método extractTextFromImage en el servicio org.springframework.cloud.gcp.vision.CloudVisionTemplate te permite extraer texto de la entrada de imagen. El método getTranslatedText del servicio com.google.cloud.translate.v3 te permite pasar el texto extraído de tu imagen y obtener el texto traducido en el idioma de destino deseado como respuesta (si el idioma de origen está en la lista de idiomas admitidos).
Compilación de la API de REST
Diseña e implementa los extremos de REST que expondrán las funcionalidades de la API de Vision. Crea controladores que manejen las solicitudes entrantes y utilicen el servicio de la API de Vision para procesar las imágenes y devolver los resultados del análisis. En esta demostración, nuestra clase VisionController implementa el extremo, controla la solicitud entrante, invoca los servicios de la API de Vision y de Cloud Translation, y devuelve el resultado a la capa de vista. La implementación del método GET para el extremo de REST es la siguiente:
@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;
}
La clase TranslateText en la implementación anterior tiene el método que invoca el servicio de 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);
}
Con la clase VisionController, tenemos implementado el método GET para REST.
Cómo integrar Thymeleaf para el desarrollo de frontend
Cuando se compila una aplicación con Spring Boot, una opción popular para el desarrollo de frontend es aprovechar la potencia de Thymeleaf. Thymeleaf es un motor de plantillas de Java del servidor que te permite integrar contenido dinámico en tus páginas HTML sin problemas. Thymeleaf proporciona una experiencia de desarrollo fluida, ya que te permite crear plantillas HTML con expresiones integradas del servidor. Estas expresiones se pueden usar para renderizar de forma dinámica datos de tu backend de Spring Boot, lo que facilita la visualización de los resultados del análisis de imágenes que realiza el servicio de la API de Vision.
Para comenzar, asegúrate de tener las dependencias necesarias para Thymeleaf en tu proyecto de Spring Boot. Puedes incluir la dependencia de Thymeleaf Starter en tu pom.xml:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
En el método del controlador, recupera el resultado del análisis del servicio de la API de Vision y agrégalo al modelo. El modelo representa los datos que Thymeleaf usará para renderizar la plantilla HTML. Una vez que se complete el modelo, devuelve el nombre de la plantilla de Thymeleaf que deseas renderizar. Thymeleaf se encargará de procesar la plantilla, sustituir las expresiones del servidor por los datos reales y generar el código HTML final que se enviará al navegador del cliente.
En el caso del método extractText en VisionController, devolvimos el resultado como un String y no lo agregamos al modelo. Sin embargo, invocamos el método GET extractText en el index.html cuando se envía la página. Con Thymeleaf, puedes crear una experiencia del usuario fluida en la que los usuarios pueden subir imágenes, activar análisis de la API de Vision y ver los resultados en tiempo real. Aprovecha todo el potencial de tu aplicación de Vision AI con la potencia de Thymeleaf para el desarrollo del 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. Implementa tu app de visión por computadora en Cloud Run
Escribe pruebas de unidades para tus clases de servicio y controlador para garantizar la funcionalidad adecuada en la carpeta /src/test/java/com/example. Una vez que confíes en su estabilidad, empaquétala en un artefacto implementable, como un archivo JAR, y, luego, impleméntala en Cloud Run, una plataforma de procesamiento sin servidores en Google Cloud. En este paso, nos enfocaremos en implementar tu aplicación de Spring Boot alojada en contenedores con Cloud Run.
- Para empaquetar tu aplicación, sigue estos pasos desde Cloud Shell(asegúrate de que la terminal muestre el símbolo del sistema en la carpeta raíz del proyecto):
Compilación:
./mvnw package
Una vez que la compilación se realice correctamente, ejecútala de forma local para probarla:
./mvnw spring-boot:run
- Aloja tu aplicación de Spring Boot en un contenedor con Jib:
En lugar de crear manualmente un Dockerfile y compilar la imagen del contenedor, puedes usar la utilidad Jib para simplificar el proceso de creación de contenedores. Jib es un complemento que se integra directamente en tu herramienta de compilación (como Maven o Gradle) y te permite compilar imágenes de contenedor optimizadas sin escribir un Dockerfile. Antes de continuar, debes habilitar la API de Artifact Registry (se recomienda usar Artifact Registry en lugar de Container Registry). Luego, ejecuta Jib para compilar una imagen de Docker y publicarla en el registro:
$ ./mvnw com.google.cloud.tools:jib-maven-plugin:3.1.1:build -Dimage=gcr.io/$GOOGLE_CLOUD_PROJECT/vision-jib
Nota: En este experimento, no configuramos el complemento de Jib Maven en pom.xml, pero, para un uso avanzado, es posible agregarlo en pom.xml con más opciones de configuración.
- Implementa el contenedor (que enviamos a Artifact Registry en el paso anterior) en Cloud Run. Este es otro paso de un solo comando:
gcloud run deploy vision-app --image gcr.io/$GOOGLE_CLOUD_PROJECT/vision-jib --platform managed --region us-central1 --allow-unauthenticated --update-env-vars
También puedes hacerlo desde la IU. Navega a la consola de Google Cloud y busca el servicio de Cloud Run. Haz clic en "Crear servicio" y sigue las instrucciones en pantalla. Especifica la imagen del contenedor que subiste anteriormente al registro, configura los parámetros de implementación deseados (como la asignación de CPU y el ajuste de escala automático) y elige la región adecuada para la implementación. Puedes establecer variables de entorno específicas para tu aplicación. Estas variables pueden incluir credenciales de autenticación (claves de API, etcétera), cadenas de conexión de bases de datos o cualquier otra configuración necesaria para que tu aplicación de IA de Vision funcione correctamente. Cuando la implementación se complete correctamente, deberías obtener un extremo para tu aplicación.
Cómo jugar con tu app de Vision AI
Para fines de demostración, puedes usar la siguiente URL de imagen para que tu app la lea y traduzca: https://storage.googleapis.com/img_public_test/tamilwriting1.jfif
6. Limpia
Sigue estos pasos para evitar que se apliquen cargos a tu cuenta de Google Cloud por los recursos que usaste en esta publicación:
- En la consola de Google Cloud, ve a la página Administrar recursos.
- En la lista de proyectos, elige el proyecto que quieres borrar y haz clic en Borrar.
- En el diálogo, escribe el ID del proyecto y, luego, haz clic en Cerrar para borrarlo.
7. Felicitaciones
¡Felicitaciones! Creaste correctamente una aplicación de Vision AI con Spring Boot y Java. Con el poder de Vision AI, tu aplicación ahora puede realizar análisis de imágenes sofisticados, como etiquetado, detección de rostros y mucho más. La integración de Spring Boot proporciona una base sólida para crear aplicaciones nativas de Google Cloud sólidas y escalables. Sigue explorando las vastas capacidades de Vision AI, Cloud Run, Cloud Translation y mucho más para mejorar tu aplicación con funciones y características adicionales. Para obtener más información, consulta la documentación de la API de Vision, Cloud Translation y GCP Spring. Prueba el mismo experimento con la opción Spring Native. Además, como un adelanto del mundo de la IA generativa, consulta cómo aparece esta API en Model Garden.