De datos a la IA generativa con Spanner y la API de Imagen de Vertex AI

1. Introducción

En este codelab, crearás un generador de poses potenciado por IA con Java, Spring Boot, la base de datos de Cloud Spanner y la API de Imagen de Vertex AI. El usuario ingresará una instrucción y la aplicación generará una pose en función de ella. También usaremos datos de la base de datos de Spanner expuesta como una API de REST. Es una forma divertida y educativa de demostrar las capacidades de la IA generativa con Spring Boot en Google Cloud.

La lista de servicios usados es la siguiente:

  1. Cloud Spanner
  2. API de Vertex AI Imagen
  3. Cloud Run

Diagrama de flujo de alto nivel

60192bcbff4c39de.png

Qué compilarás

Crearás

  • Una aplicación de Java Spring Boot para la API de datos como servicio de Spanner
  • Una aplicación de Java Spring Boot para el caso de uso de generación de imágenes con Imagen
  • Una interfaz de usuario interactiva para la entrada de instrucciones y la respuesta

2. Requisitos

  • Un navegador, como Chrome o Firefox.
  • Un proyecto de Google Cloud con la facturación habilitada.

Antes de comenzar

  1. En la consola de Google Cloud, en la página del selector de proyectos, selecciona o crea un proyecto de Google Cloud.
  2. Asegúrate de que la facturación esté habilitada para tu proyecto de Cloud. Obtén más información para verificar si la facturación está habilitada en un proyecto.
  3. Asegúrate de que todas las APIs necesarias (API de Cloud Spanner, API de Vertex AI, API de Cloud Run, API de Cloud Functions) estén habilitadas.
  4. Usarás Cloud Shell, un entorno de línea de comandos que se ejecuta en Google Cloud y que viene precargado con bq. Consulta la documentación para ver los comandos y su uso de gcloud

En la consola de Cloud, haz clic en Activar Cloud Shell en la esquina superior derecha:

51622c00acec2fa.png

Si tu proyecto no está configurado, usa el siguiente comando para hacerlo:

gcloud config set project <YOUR_PROJECT_ID>
  1. Para comenzar, navega a la página de Cloud Spanner con tu proyecto activo de Google Cloud.

3. Prepara datos con Spanner

Antes de crear la app, completaremos la configuración de la base de datos creando una instancia, una base de datos y una tabla de Cloud Spanner. Puedes consultar este blog para obtener más información sobre las características de Cloud Spanner, DDL, DML y mucho más. Puedes seguir los pasos que se indican a continuación para crear los objetos de base de datos necesarios para este proyecto:

  1. Para crear una instancia, haz clic en CREAR INSTANCIA en la página de instancias.
  2. Ingresa los detalles como se muestra en la siguiente imagen y haz clic en CREAR:

f869fcbb922027a5.png

  1. Una vez creada, en la página de descripción general de la instancia, haz clic en CREAR BASE DE DATOS.
  2. Proporciona el nombre de la base de datos como “first-spanner-db”. y, luego, ingresa el siguiente DDL en la sección PLANTILLAS DE DDL y haz clic en ENVIAR:
CREATE TABLE Yoga_Poses(
  Pose_Id   INT64 NOT NULL,
  Name  STRING(1024),
  Breath STRING(1024),
  Description STRING(1024)
) PRIMARY KEY(Pose_Id);

La base de datos y la tabla deben crearse como resultado del último paso. Ahora insertemos algunas filas en la tabla Yoga_Poses para que podamos trabajar en nuestra aplicación Spring Boot.

  1. Haz clic en Spanner Studio en el panel Database de la izquierda y abre una nueva pestaña del editor de consultas, como se muestra en la siguiente imagen:

c86774e8fd32eca0.png

  1. Ejecuta las siguientes consultas INSERT:
INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(1, 'STAND', 'INHALE AND EXHALE', 
'STAND WITH YOUR FEET HIP WIDTH APART AND ARMS RESTING BY THE SIDES');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(2, 'PLANK', 'INHALE OR EXHALE', 
'PLANT YOUR TOES AND PALMS ON THE MAT WITH BODY PARALLEL TO THE GROUND');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(3, 'SIT', 'INHALE AND EXHALE', 
'SIT ON THE FLOOR LEGS CROSSED');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(4, 'BEND', 'EXHALE', 
'FOLD FORWARD AS YOU STAND, HANDS REACHING TO THE FLOOR');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(5, 'PUSH UP', 'EXHALE', 
'PLANK WITH ELBOWS ON MAT');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(6, 'SEATED FORWARD BEND', 'EXHALE', 
'FOLD FORWARD AS YOU SIT, HANDS TRYING TO REACH THE FEET');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(7, 'LUNGE', 'EXHALE', 
'ONE LEG TO THE FRONT 90 DEGREES TO THE FLOOR AND THE BACK LEG STRAIGHT');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(8, 'COURTESY LUNGE', 'INHALE', 
'ONE LEG TO THE FRONT 90 DEGREES TO THE FLOOR AND THE BACK KNEE TOUCHING THE FLOOR');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(9, 'BANK BEND', 'INHALE', 
'STAND WITH ARMS UP AND BODY BENT BACKWARDS, ARCHING YOUR SPINE, LOOKING AT THE SKY');

INSERT INTO Yoga_Poses(Pose_Id, Name, Breath, Description)
VALUES(10, 'BICEP ACTION', 'INHALE AND EXHALE', 
'CURL, PRESS AND WORK YOUR BICEPS');

Ahora tenemos nuestra instancia, base de datos, tabla y datos de Spanner creados y listos para la aplicación.

4. Compila una API de REST con Spring Boot y Spanner para datos de postura

Para familiarizarte con Spring Boot y la consola de Google Cloud, consulta este blog.

  1. Inicia la app de Spring Boot. Para iniciar esta app desde cero, sigue este blog. Para clonar el repositorio y comenzar a trabajar, ejecuta el siguiente comando en la terminal de Cloud Shell:
git clone https://github.com/AbiramiSukumaran/spanner-springb

Esto debería haber creado el proyecto spanner-springb en tu máquina de Cloud Shell. Para comprender los componentes de la app, consulta el blog.

  1. Compilemos y ejecutemos la app. Para ello, ejecuta los siguientes comandos desde la terminal de Cloud Shell:
cd spanner-springb

./mvnw package

./mvnw spring-boot:run
  1. Implementa la app en Cloud Run para que esté disponible para la app de generación de poses. Para ello, ejecuta el siguiente comando desde la terminal de Cloud Shell:
gcloud run deploy –source .

Pasa los parámetros obligatorios y asegúrate de que tu app esté implementada. La URL del servicio generada debería poder enumerar los datos creados en Spanner.

5. Inicia una app de generación de poses con Spring Boot, Imagen y Spanner

En este punto, completamos la parte superior del diagrama de flujo, es decir, hacemos que los datos de Spanner estén disponibles como servicio (API de REST). Ahora, crearemos una aplicación cliente que invoque los datos de Spanner, llame a la API de IMAGEN con un mensaje y muestre la cadena codificada en Base64 como una imagen a la interfaz de usuario.

  1. A esta altura, ya estás familiarizado con la estructura del proyecto Spring Boot y su importancia. Por lo tanto, pasarás rápidamente a la clonación del repositorio en tu máquina de Cloud Shell ejecutando el siguiente comando en la terminal de Cloud Shell:
git clone https://github.com/AbiramiSukumaran/genai-posegen

Esto debería haber creado el proyecto genai-posegen en tu máquina de Cloud Shell. La estructura del proyecto clonado se muestra de la siguiente manera en el editor de Cloud Shell:

b19a94f895f74c62.png

La clase Java PromptController tiene la invocación del servicio de base de datos, la implementación de la lógica empresarial y la invocación a la API de IA generativa de Imagen. Esta clase interactúa con las plantillas de Thymeleaf que se encargan de la integración de datos en la interfaz de usuario. Esta clase tiene 3 métodos de servicio: 1) para obtener la entrada de instrucciones, 2) para procesar la solicitud e invocar la API de Imagen, y 3) para procesar la respuesta de imagen.

Prompt y Yoga son las clases de POJO que contienen los campos, los métodos get y set para interactuar con la API de Imagen y la API del servidor de datos de Spanner, respectivamente.

Los archivos HTML Index y getImage de la carpeta templates contienen las plantillas para la interfaz de usuario y tienen dependencias de secuencias de comandos de JS y CSS en las carpetas respectivas.

Integración de la API de Imagen de Vertex AI Para el caso de uso de generación de imágenes, usamos la API de Imagen de Vertex AI en el siguiente formato:

https://<<region>>- aiplatform.googleapis.com/v1/projects/<<your-project-id>>/locations/<<region>>/publishers/google/models/imagegeneration:predict

Puedes obtener más información sobre las funciones de Imagen aquí. Muestra la respuesta en un formato de cadena codificada en Base64. Para convertirlo a su imagen, usamos el método setattribute de JavaScript (en el archivo getImage.js) en el objeto de imagen de la siguiente manera en el archivo getImage.HTML:

poseImage.setAttribute('src', "data:image/jpg;base64," + baseStr64);

Autorización La API de Imagen requiere que tenga habilitada la autenticación por token del portador para acceder a ella. En nuestro caso, usé el enfoque JSON de las credenciales predeterminadas de la aplicación. Para implementarla, ejecuta el siguiente comando desde la terminal de Cloud Shell y sigue las instrucciones que se indican en la terminal:

gcloud auth application-default login

Ingresar “Y” para autenticarse con tu cuenta. Permite el acceso y copia el código de autorización que se muestra en la ventana emergente. En cuanto lo hagas, obtendrás las credenciales predeterminadas de la aplicación en el archivo JSON guardado en una ubicación similar a esta: /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json.

Descarga el archivo o copia el contenido del archivo JSON ejecutando el comando cat (cat /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json) y úsalo en la aplicación con el método de llamada a Imagen() de la clase PromptController.java. Obtén más información sobre la autenticación aquí.

Interfaz de usuario Usamos Thymeleaf como el motor de plantillas para analizar y renderizar datos en los archivos de plantilla de frontend y para agregar un diseño elegante a la interfaz de usuario. Es similar a HTML, pero admite más atributos para trabajar con datos renderizados. El archivo index.html contiene los componentes de diseño de la página de destino y permite que el usuario seleccione el tema y agregue un mensaje predominante para generar la imagen deseada.

6. Compila e implementa

Ahora que clonaste el código y reemplazaste los valores de los marcadores de posición según corresponda a tu proyecto, región y credenciales de autenticación, pasemos a la compilación y la implementación de la app. Navega a la carpeta del proyecto en la terminal de Cloud Shell con el comando, compila la compilación y, luego, realiza la prueba local en la máquina de Cloud Shell con los siguientes 3 comandos, uno por uno:

cd genai-posegen

./mvnw package

./mvnw spring-boot:run

Implementar la app en Cloud Run para que esté disponible en la nube Para ello, ejecuta el siguiente comando desde la terminal de Cloud Shell en la carpeta del proyecto:

gcloud run deploy –source .

Pasa los parámetros obligatorios y asegúrate de que tu app esté implementada.

7. Demostración

Una vez que se implemente la app, deberías ver la URL de servicio en la terminal. Haz clic en el vínculo para ver tu app de generación de imágenes de postura que se ejecuta en Google Cloud sin servidores.

92bdb22109b2f756.gif

8. 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:

  1. En la consola de Google Cloud, ve a la página Administrar recursos.
  2. En la lista de proyectos, elige el proyecto que quieres borrar y haz clic en Borrar.
  3. En el diálogo, escribe el ID del proyecto y, luego, haz clic en Cerrar para borrarlo.
  4. Si no quieres borrar el proyecto, borra la instancia de Spanner. Para ello, navega a la instancia que acabas de crear para este proyecto y haz clic en el botón BORRAR INSTANCIA en la esquina superior derecha de la página de descripción general de la instancia.
  5. También puedes navegar a la página de servicios de Cloud Run, seleccionar los servicios creados en este proyecto y hacer clic en el botón de borrar para eliminar los servicios.

9. Felicitaciones

En este blog, pudimos trasladar la aplicación de pila completa de Spring Boot que almacena y maneja datos en Cloud Spanner para generar poses con la API de Imagen de Vertex AI de Google Cloud en una aplicación cliente interactiva implementada en Cloud Run. En la sección del diagrama de arquitectura de este blog, ve el componente de Cloud Functions (Java) que nunca pudimos hacer. Puedes hacerlo si quieres contribuir. Puedes implementar 2 Cloud Functions de Java para realizar los 2 métodos que se pueden encontrar en el archivo getimage.html: guardar la pose en la base de datos y subir métodos de imagen. Consulta la documentación de Imagen en Vertex AI para obtener más información sobre el modelo.