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 Vertex AI Imagen. El usuario ingresará una instrucción, y la aplicación generará una pose basada en esa instrucción. También usaremos datos de la base de datos de Spanner expuestos 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 que se usan 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 Spanner Data as a Service
  • 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 y la respuesta de la instrucción

2. Requisitos

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

Antes de comenzar

  1. En la página del selector de proyectos de la consola de Google Cloud, 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 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 y 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 el 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. Navega a la página de Cloud Spanner con tu proyecto de Google Cloud activo para comenzar.

3. Cómo preparar datos con Spanner

Antes de crear la app, completemos 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 detallada sobre las funciones 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. Haz clic en CREAR INSTANCIA en la página de instancias para crear una.
  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", ingresa el siguiente DDL en la sección DDL TEMPLATES y haz clic en SUBMIT:
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 se deben crear como resultado del último paso. Ahora insertemos algunas filas en la tabla Yoga_Poses para poder crear nuestra aplicación de 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 de 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 los datos de poses

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

  1. Para iniciar la app de Spring Boot desde cero, sigue este blog. Para clonar desde el repo y ponerte en acción, solo 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. Compilaremos y ejecutaremos 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 del generador 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. Cómo iniciar una app de generación de poses con Spring Boot, Spanner e Imagen

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

  1. A esta altura, ya conoces la estructura del proyecto de Spring Boot y su importancia. Por lo tanto, pasaremos directamente a clonar el repo 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 de la API de IA generativa de Imagen también. Esta clase interactúa con las plantillas de Thymeleaf que se encargan de la integración de datos en la interfaz de usuario. Hay 3 métodos de servicio en esta clase: 1) para obtener la entrada de la instrucción, 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 POJO que contienen los campos, los métodos getter y los métodos setter 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 de plantillas contienen las plantillas para la interfaz de usuario y tienen dependencias de secuencias de comandos JS y CSS en las carpetas respectivas.

Integración de la API de Vertex AI Imagen 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 capacidades de Imagen aquí. Devuelve la respuesta en formato de cadena codificada en Base64. Para convertirlo en 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 tengas habilitada la autenticación con token de portador para acceder a ella. En nuestro caso, usé el enfoque de JSON de las credenciales predeterminadas de la aplicación. Para implementarlo, ejecuta el siguiente comando desde la terminal de Cloud Shell y sigue las instrucciones que aparecen en la terminal:

gcloud auth application-default login

Ingresa "Y" para autenticarte 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 en el método callImagen() de la clase PromptController.java. Puedes obtener más información sobre la autenticación aquí.

Interfaz de usuario Usamos Thymeleaf como motor de plantillas para analizar y renderizar datos en los archivos de plantillas 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 una instrucción de anulación 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 compilar y, luego, implementar la app. Navega a la carpeta del proyecto en la terminal de Cloud Shell con el comando, compila y, luego, implementa para realizar pruebas de forma 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

Implementa la app en Cloud Run para que esté disponible en la nube. Para ello, ejecuta el siguiente comando desde la terminal de Cloud Shell dentro de 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 del servicio en la terminal. Haz clic en el vínculo y verás que tu app de generación de imágenes de poses 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 borrarlos.

9. Felicitaciones

En este blog, pudimos llevar la aplicación de Spring Boot de pila completa que almacena y controla 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, ¿ves el componente de Cloud Functions (Java) que nunca pudimos hacer? Puedes tomarlo si deseas contribuir. Puedes implementar 2 Cloud Functions de Java para realizar los 2 métodos que se encuentran en el archivo getimage.html: guardar la pose en la base de datos y subir los métodos de imagen. Consulta la documentación de Imagen en Vertex AI para obtener más información sobre el modelo.