Dai dati all'IA generativa con Spanner e l'API Vertex AI Imagen

1. Introduzione

In questo codelab, creerai un generatore di pose basato sull'AI utilizzando Java, Spring Boot, il database Cloud Spanner e l'API Vertex AI Imagen. L'utente inserirà un prompt e l'applicazione genererà una posa in base a questo prompt. Utilizzeremo anche i dati del database Spanner esposti come API REST. È un modo divertente ed educativo per dimostrare le funzionalità dell'AI generativa con Spring Boot su Google Cloud.

L'elenco dei servizi utilizzati è il seguente:

Cloud Spanner
API Vertex AI Imagen
Cloud Run

Diagramma di flusso di alto livello

Cosa creerai

Creerai

Un'applicazione Java Spring Boot per i dati Spanner come API di servizio
Un'applicazione Java Spring Boot per il caso d'uso della generazione di immagini utilizzando Imagen
Un'interfaccia utente interattiva per l'input e la risposta del prompt

2. Requisiti

Un browser, ad esempio Chrome o Firefox
Un progetto cloud Google Cloud con la fatturazione abilitata

Prima di iniziare

Nella console Google Cloud, nella pagina di selezione del progetto, seleziona o crea un progetto Google Cloud
Verifica che la fatturazione sia attivata per il tuo progetto Cloud. Scopri come verificare se la fatturazione è abilitata per un progetto
Assicurati che tutte le API necessarie (API Cloud Spanner, API Vertex AI, API Cloud Run, API Cloud Functions) siano abilitate
Utilizzerai Cloud Shell, un ambiente a riga di comando in esecuzione in Google Cloud che viene precaricato con bq. Consulta la documentazione per i comandi e l'utilizzo di gcloud

Nella console Cloud, fai clic su Attiva Cloud Shell nell'angolo in alto a destra:

Se il progetto non è impostato, utilizza il seguente comando per impostarlo:

gcloud config set project <YOUR_PROJECT_ID>

Per iniziare, vai alla pagina Cloud Spanner con il tuo progetto cloud Google Cloud attivo

3. Preparazione dei dati con Spanner

Prima di creare l'app, completiamo la configurazione del database creando un'istanza, un database e una tabella Cloud Spanner. Puoi consultare questo blog per leggere maggiori dettagli sulle funzionalità di Cloud Spanner, DDL, DML e altro ancora. Puoi seguire i passaggi riportati di seguito per creare gli oggetti di database richiesti per questo progetto:

Crea un'istanza facendo clic su CREA ISTANZA nella pagina delle istanze page.
Inserisci i dettagli come mostrato nell'immagine seguente e fai clic su CREA:

Una volta creata, nella pagina di riepilogo dell'istanza, fai clic su CREA DATABASE
Fornisci il nome del database come "first-spanner-db", inserisci il seguente DDL nella sezione MODELLI DDL e fai clic su INVIA:

CREATE TABLE Yoga_Poses(
  Pose_Id   INT64 NOT NULL,
  Name  STRING(1024),
  Breath STRING(1024),
  Description STRING(1024)
) PRIMARY KEY(Pose_Id);

Il database e la tabella dovrebbero essere creati come risultato dell'ultimo passaggio. Ora inseriamo alcune righe nella tabella Yoga_Poses in modo da poter creare la nostra applicazione Spring Boot.

Fai clic su Spanner Studio nel riquadro Database a sinistra e apri una nuova scheda dell'editor di query come mostrato nell'immagine di seguito:

Esegui le seguenti query 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');

Ora abbiamo creato l'istanza, il database, la tabella e i dati di Spanner e sono pronti per l'applicazione.

4. Creazione di un'API REST con Spring Boot e Spanner per i dati delle pose

Per familiarizzare con Spring Boot e la console Google Cloud, consulta questo blog.

Esegui il bootstrap dell'app Spring Boot Per eseguire il bootstrap di questa app da zero, segui questo blog. Per clonare dal repository e iniziare subito, esegui il comando riportato di seguito nel terminale Cloud Shell:

git clone https://github.com/AbiramiSukumaran/spanner-springb

In questo modo dovrebbe essere stato creato il progetto spanner-springb nella macchina Cloud Shell. Per comprendere i componenti dell'app, consulta il blog.

Creiamo ed eseguiamo l'app Per farlo, esegui i seguenti comandi dal terminale Cloud Shell:

cd spanner-springb

./mvnw package

./mvnw spring-boot:run

Esegui il deployment dell'app in Cloud Run in modo che sia disponibile per l'app del generatore di pose Per farlo, esegui il seguente comando dal terminale Cloud Shell:

gcloud run deploy –source .

Passa i parametri richiesti e assicurati che l'app sia di cui sia stato eseguito il deployment. L'URL del servizio generato dovrebbe essere in grado di elencare i dati creati in Spanner.

5. Esegui il bootstrap di un'app del generatore di pose con Spring Boot, Spanner e Imagen

A questo punto, abbiamo completato la parte superiore del diagramma di flusso, ovvero la creazione dei dati Spanner come servizio (API REST). Ora creiamo un'applicazione client che richiama i dati Spanner, chiama l'API IMAGEN con un prompt e restituisce la stringa con codifica Base64 come immagine all'interfaccia utente.

Ormai hai familiarità con la struttura del progetto Spring Boot e la sua importanza. Quindi, passeremo rapidamente alla clonazione del repository nella macchina Cloud Shell eseguendo il comando riportato di seguito nel terminale Cloud Shell:

git clone https://github.com/AbiramiSukumaran/genai-posegen

In questo modo dovrebbe essere stato creato il progetto genai-posegen nella macchina Cloud Shell. La struttura del progetto clonato viene visualizzata in questo modo nell'editor di Cloud Shell:

La classe Java PromptController contiene anche la chiamata al servizio di database, l'implementazione della logica di business e la chiamata all'API di AI generativa di Imagen. Questa classe interagisce con i modelli Thymeleaf che si occupano dell'integrazione dei dati nell'interfaccia utente. In questa classe sono presenti tre metodi di servizio: 1) per ottenere l'input del prompt, 2) per elaborare la richiesta e richiamare l'API Imagen e 3) per elaborare la risposta di Imagen.

Prompt e Yoga sono le classi POJO che contengono i campi, i getter e i setter per interfacciarsi rispettivamente con l'API Imagen e l'API del server di dati Spanner.

I file HTML Index e getImage nella cartella dei modelli contengono i modelli per l'interfaccia utente e hanno dipendenze di script JS e CSS nelle rispettive cartelle.

Integrazione dell'API Vertex AI Imagen Per il caso d'uso della generazione di immagini, utilizziamo l'API Imagen di Vertex AI nel seguente formato:

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

Puoi scoprire di più sulle funzionalità di Imagen qui. Restituisce la risposta in formato stringa con codifica Base64. Per convertirla nella sua immagine, abbiamo utilizzato il metodo javascript setattribute (nel file getImage.js) sull'oggetto immagine come segue nel file getImage.HTML:

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

Autorizzazione L'API Imagen richiede l'abilitazione dell'autenticazione con token di autenticazione per accedervi. Nel nostro caso, ho utilizzato l'approccio JSON delle credenziali predefinite dell'applicazione. Puoi implementarlo eseguendo il comando riportato di seguito dal terminale Cloud Shell e seguendo le istruzioni riportate nel terminale:

gcloud auth application-default login

Inserisci "Y" per eseguire l'autenticazione con il tuo account. Consenti l'accesso e copia il codice di autorizzazione visualizzato nel popup. Non appena lo fai, riceverai le credenziali predefinite dell'applicazione nel file JSON salvato in una località simile a questa: /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json.

Scarica il file o copia i contenuti del file JSON eseguendo il comando cat (cat /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json) e utilizzalo nell'applicazione nel metodo callImagen() della classe PromptController.java. Puoi scoprire di più sull'autenticazione qui.

Interfaccia utente Abbiamo utilizzato Thymeleaf come motore di modelli per analizzare e visualizzare i dati nei file dei modelli front-end e per aggiungere un design elegante all'interfaccia utente. È simile a HTML, ma supporta più attributi per lavorare con i dati sottoposti a rendering. Il file index.html contiene i componenti di progettazione della pagina di destinazione e consente all'utente di selezionare l'argomento e aggiungere un prompt di override per generare l'immagine desiderata.

6. Creazione e deployment

Ora che hai clonato il codice, sostituito i valori dei segnaposto in base al progetto, alla regione e alle credenziali di autenticazione, passiamo alla creazione e al deployment dell'app. Vai alla cartella del progetto nel terminale Cloud Shell utilizzando il comando, la build e poi il deployment per il test in locale nella macchina Cloud Shell con i seguenti tre comandi uno alla volta:

cd genai-posegen

./mvnw package

./mvnw spring-boot:run

Esegui il deployment dell'app in Cloud Run in modo che sia disponibile sul cloud. Per farlo, esegui il seguente comando dal terminale Cloud Shell all'interno della cartella del progetto:

gcloud run deploy –source .

Passa i parametri richiesti e assicurati che l'app sia di cui sia stato eseguito il deployment.

7. Demo

Una volta eseguito il deployment dell'app, dovresti visualizzare l'URL del servizio nel terminale. Fai clic sul link e guarda l'app di generazione di immagini di pose in esecuzione in modalità serverless su Google Cloud.

8. Libera spazio

Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questo post, segui questi passaggi:

Nella console Google Cloud, vai alla pagina Gestisci risorse
Nell'elenco dei progetti, seleziona il progetto che vuoi eliminare, quindi fai clic su Elimina
Nella finestra di dialogo, digita l'ID progetto, quindi fai clic su Chiudi per eliminare il progetto
Se non vuoi eliminare il progetto, elimina l'istanza Spanner andando all'istanza che hai appena creato per questo progetto e facendo clic sul pulsante ELIMINA ISTANZA nell'angolo in alto a destra della pagina di riepilogo dell'istanza
Puoi anche andare alla pagina dei servizi Cloud Run, selezionare i servizi creati in questo progetto e fare clic sul pulsante Elimina per eliminare i servizi.

9. Complimenti

In questo blog, siamo riusciti a portare l'applicazione Spring Boot full-stack che archivia e gestisce i dati in Cloud Spanner, per generare pose utilizzando l'API Imagen di Google Cloud Vertex AI in un'applicazione client interattiva di cui è stato eseguito il deployment in Cloud Run. Nella sezione del diagramma dell'architettura di questo blog, vedi il componente Cloud Functions (Java) che non abbiamo mai fatto? È disponibile se vuoi contribuire. Puoi implementare due Cloud Functions Java per eseguire i due metodi che si trovano nel file getimage.html: salva la posa nel database e carica i metodi delle immagini. Consulta la documentazione di Imagen su Vertex AI per scoprire di più sul modello.