1. Introduzione
In questo codelab, crea un generatore di posizioni basato sull'IA 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 quel prompt. Utilizzeremo anche i dati del database Spanner esposto come API REST. È un modo divertente ed educativo per dimostrare le funzionalità dell'IA generativa con Spring Boot su Google Cloud.
Ecco l'elenco dei servizi utilizzati:
- Cloud Spanner
- API Vertex AI Imagen
- Cloud Run
Diagramma di flusso di alto livello
Cosa creerai
Creerai
- Un'applicazione Java Spring Boot per l'API dati Spanner come servizio
- un'applicazione Java Spring Boot per il caso d'uso di generazione di immagini che utilizza Imagen
- Un'interfaccia utente interattiva per l'input e la risposta del prompt
2. Requisiti
Prima di iniziare
- Nella pagina del selettore dei progetti della console Google Cloud, seleziona o crea un progetto Google Cloud.
- Verifica che la fatturazione sia attivata per il tuo progetto Cloud. Scopri come controllare se la fatturazione è abilitata su 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 su Google Cloud in cui è precaricato bq. Consulta la documentazione per i comandi e l'utilizzo di gcloud
Dalla console Cloud, fai clic su Attiva Cloud Shell nell'angolo in alto a destra:
Se il progetto non è configurato, utilizza il comando seguente per impostarlo:
gcloud config set project <YOUR_PROJECT_ID>
- Per iniziare, vai alla pagina Cloud Spanner con il tuo progetto Google Cloud attivo
3. Preparazione dei dati con Spanner
Prima di creare l'app, completa la configurazione del database creando un'istanza, un database e una tabella Cloud Spanner. Puoi consultare questo blog per maggiori dettagli sulle funzionalità di Cloud Spanner, sui metodi DDL, DML e altro ancora. Puoi seguire questi passaggi per creare gli oggetti di database richiesti per questo progetto:
- Crea un'istanza facendo clic su CREA ISTANZA nella pagina delle istanze.
- Inserisci i dettagli come mostrato nell'immagine seguente e fai clic su CREA:
- Dopo averla creata, dalla pagina di riepilogo dell'istanza, fai clic su CREA DATABASE
- Specifica il nome del database come "first-spanner-db" e 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 seguente:
- 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 la nostra istanza Spanner, il database, la tabella e i dati creati e pronti per l'applicazione.
4. Crea un'API REST con Spring Boot e Spanner per i dati delle posizioni
Per acquisire familiarità 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 eseguire la clonazione dal repo e passare all'azione, esegui il comando seguente nel terminale Cloud Shell:
git clone https://github.com/AbiramiSukumaran/spanner-springb
Questo dovrebbe aver creato il progetto spanner-springb nella macchina Cloud Shell. Per comprendere i componenti dell'app, leggi il blog.
- Creiamo ed eseguiamo l'app Per farlo, esegui questi 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 di generatore di posizioni. Per farlo, esegui questo comando dal terminale Cloud Shell:
gcloud run deploy –source .
Passa i parametri richiesti e assicurati che sia stato eseguito il deployment dell'app. L'URL del servizio generato deve essere in grado di elencare i dati creati in Spanner.
5. Avvia un'app generatore di posizioni con Spring Boot, Spanner e Imagen
A questo punto, abbiamo completato la parte superiore del diagramma di flusso, ovvero rendere i dati Spanner disponibili come servizio (API REST). Ora creiamo un'applicazione client che richiama i dati della chiave inglese, chiama l'API IMAGEN con un prompt e restituisce la stringa codificata Base64 come immagine all'interfaccia utente.
- A questo punto, conosci già la struttura del progetto Spring Boot e il suo significato. Passerai quindi rapidamente alla clonazione del repo nella macchina Cloud Shell eseguendo questo comando nel terminale Cloud Shell:
git clone https://github.com/AbiramiSukumaran/genai-posegen
Questa operazione dovrebbe aver 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 include anche la chiamata al servizio di database, l'implementazione della logica di business e la chiamata all'API di IA generativa di Imagen. Questo corso interagisce con i modelli Thymeleaf che si occupano dell'integrazione dei dati nell'interfaccia utente. Ci sono 3 metodi di servizio in questa classe: 1) per ottenere l'input del prompt 2) per elaborare la richiesta e richiamare l'API Imagen e 3) per elaborare la risposta imagen.
Prompt e Yoga sono le classi POJO che contengono i campi, getter e setter per interfacciarsi rispettivamente con l'API Imagen e l'API del server di dati Spanner.
I file html Index e getImage nella cartella templates contengono i modelli per l'interfaccia utente e presentano dipendenze degli 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 nel formato di stringa con codifica Base64. Per convertirlo in un'immagine, abbiamo utilizzato il metodo setattribute JavaScript (nel file getImage.js) sull'oggetto image come segue nel file getImage.HTML:
poseImage.setAttribute('src', "data:image/jpg;base64," + baseStr64);
Autorizzazione L'API Imagen richiede che l'autenticazione del token di connessione sia abilitata per accedervi. Nel nostro caso, ho utilizzato l'approccio JSON per le credenziali predefinite dell'applicazione. Puoi implementarlo eseguendo questo comando dal terminale Cloud Shell e seguendo le istruzioni riportate di seguito nel terminale:
gcloud auth application-default login
Inserisci "Y" per l'autenticazione con il tuo account. Consenti l'accesso e copia il codice di autorizzazione visualizzato nel popup. Dopo averlo fatto, otterrai le credenziali predefinite dell'applicazione nel file JSON salvate in una posizione simile a questa: /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json.
Scarica il file o copia il contenuto 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. Per scoprire di più sull'autenticazione, fai clic qui.
Interfaccia utente Abbiamo utilizzato Thymeleaf come motore dei modelli per analizzare ed eseguire il rendering dei dati nei file dei modelli di front-end e per aggiungere un design elegante all'interfaccia utente. È simile all'HTML, ma supporta più attributi per funzionare con i dati visualizzati. Il file index.html contiene i componenti di progettazione della pagina di destinazione e consente all'utente di selezionare l'argomento e di aggiungere un prompt di override per generare l'immagine desiderata.
6. Creazione e deployment
Ora che hai clonato il codice e sostituito i valori dei segnaposto in base al progetto, alla regione e alle credenziali di autenticazione, passiamo alla creazione e al deployment dell'app. Accedi alla cartella del progetto nel terminale Cloud Shell utilizzando il comando, la build, quindi esegui il deployment per il test localmente nella macchina Cloud Shell con i seguenti 3 comandi, uno alla volta:
cd genai-posegen
./mvnw package
./mvnw spring-boot:run
Eseguire il deployment dell'app in Cloud Run in modo che sia disponibile sul cloud. Per farlo, esegui questo comando dal terminale Cloud Shell all'interno della cartella del progetto:
gcloud run deploy –source .
Passa i parametri richiesti e assicurati che sia stato eseguito il deployment dell'app.
7. Demo
Una volta eseguito il deployment dell'app, dovresti vedere l'URL del servizio nel terminale. Fai clic sul link e osserva la tua app per la generazione di immagini di posa in esecuzione su Google Cloud in modalità serverless.
8. Esegui la pulizia
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 Arresta per eliminare il progetto
- Se non vuoi eliminare il progetto, elimina l'istanza Spanner accedendo all'istanza appena creata per questo progetto e fai clic sul pulsante ELIMINA ISTANZA nell'angolo in alto a destra della pagina della panoramica 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 utilizzare 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 relativa al diagramma dell'architettura di questo blog, vedi il componente Cloud Functions (Java) che non abbiamo mai fatto? Puoi farlo se vuoi contribuire. Puoi implementare due funzioni Cloud Functions Java per eseguire i due metodi che puoi trovare nel file getimage.html: "save pose to database" e "upload image metodi". Per saperne di più sul modello, consulta la documentazione di Imagen su Vertex AI.