1. Introduction
Dans cet atelier de programmation, vous allez créer un générateur de poses basé sur l'IA à l'aide de Java, Spring Boot, de la base de données Cloud Spanner et de l'API Vertex AI Imagen. L'utilisateur saisira une requête, et l'application générera une pose en fonction de cette requête. Nous utiliserons également les données de la base de données Spanner exposées en tant qu'API REST. Il s'agit d'une manière amusante et éducative de démontrer les capacités de l'IA générative avec Spring Boot sur Google Cloud.
Voici la liste des services utilisés :
- Cloud Spanner
- API Vertex AI Imagen
- Cloud Run
Schéma de flux de haut niveau

Objectifs de l'atelier
Vous allez créer :
- une application Java Spring Boot pour l'API de données Spanner en tant que service ;
- une application Java Spring Boot pour le cas d'utilisation de la génération d'images à l'aide d'Imagen ;
- une interface utilisateur interactive pour la saisie et la réponse de la requête.
2. Conditions requises
Avant de commencer
- Dans la console Google Cloud, sur la page du sélecteur de projet, sélectionnez ou créez un projet Google Cloud.
- Assurez-vous que la facturation est activée pour votre projet Cloud. Découvrez comment vérifier si la facturation est activée pour un projet.
- Assurez-vous que toutes les API nécessaires (API Cloud Spanner, API Vertex AI, API Cloud Run, API Cloud Functions) sont activées
- Vous allez utiliser Cloud Shell, un environnement de ligne de commande exécuté dans Google Cloud et fourni avec bq. Consultez la documentation pour connaître les commandes gcloud ainsi que leur utilisation.
Dans la console Cloud, cliquez sur "Activer Cloud Shell" en haut à droite :

Si votre projet n'est pas défini, utilisez la commande suivante pour le définir :
gcloud config set project <YOUR_PROJECT_ID>
- Accédez à la page Cloud Spanner avec votre projet Google Cloud actif pour commencer.
3. Préparer les données avec Spanner
Avant de créer l'application, configurons la base de données en créant une instance, une base de données et une table Cloud Spanner. Vous pouvez consulter cet article de blog pour en savoir plus sur les fonctionnalités, le LDD, le LMD et plus encore de Cloud Spanner. Pour créer les objets de base de données requis pour ce projet, procédez comme suit :
- Créez une instance en cliquant sur CRÉER UNE INSTANCE sur la page des instances page.
- Saisissez les informations comme indiqué dans l'image suivante, puis cliquez sur CRÉER :

- Une fois l'instance créée, cliquez sur CRÉER UNE BASE DE DONNÉES sur la page de présentation de l'instance.
- Saisissez le nom de la base de données "first-spanner-db", puis saisissez le LDD suivant dans la section MODÈLES LDD et cliquez sur ENVOYER :
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 données et la table doivent être créées à la suite de la dernière étape. Insérons maintenant quelques lignes dans la table Yoga_Poses afin de pouvoir créer notre application Spring Boot.
- Cliquez sur Spanner Studio dans le volet "Base de données" à gauche, puis ouvrez un nouvel onglet d'éditeur de requête, comme illustré dans l'image ci-dessous :

- Exécutez les requêtes INSERT suivantes :
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');
Notre instance, notre base de données, notre table et nos données Spanner sont maintenant créées et prêtes à être utilisées par l'application.
4. Créer une API REST avec Spring Boot et Spanner pour les données de pose
Pour vous familiariser avec Spring Boot et la console Google Cloud, consultez cet article de blog.
- Amorcer l'application Spring Boot Pour amorcer cette application à partir de zéro, suivez cet article de blog. Pour cloner à partir du dépôt et passer à l'action, exécutez simplement la commande ci-dessous dans le terminal Cloud Shell :
git clone https://github.com/AbiramiSukumaran/spanner-springb
Le projet spanner-springb doit avoir été créé sur votre machine Cloud Shell. Pour comprendre les composants de l'application, consultez l'article de blog.
- Créons et exécutons l'application. Pour ce faire, exécutez les commandes suivantes à partir du terminal Cloud Shell :
cd spanner-springb
./mvnw package
./mvnw spring-boot:run
- Déployez l'application dans Cloud Run afin qu'elle soit disponible pour l'application de génération de poses. Pour ce faire, exécutez la commande suivante à partir du terminal Cloud Shell :
gcloud run deploy –source .
Transmettez les paramètres requis et assurez-vous que votre application est déployée. L'URL du service générée doit pouvoir lister les données créées dans Spanner.
5. Amorcer une application de génération de poses avec Spring Boot, Spanner et Imagen
À ce stade, nous avons terminé la partie supérieure du schéma de flux, c'est-à-dire rendre les données Spanner disponibles en tant que service (API REST). Créons maintenant une application cliente qui appelle les données Spanner, appelle l'API IMAGEN avec une requête et renvoie la chaîne encodée en Base64 sous forme d'image à l'interface utilisateur.
- Vous connaissez déjà la structure du projet Spring Boot et son importance. Nous allons donc passer directement au clonage du dépôt sur votre machine Cloud Shell en exécutant la commande ci-dessous dans le terminal Cloud Shell :
git clone https://github.com/AbiramiSukumaran/genai-posegen
Le projet genai-posegen doit avoir été créé sur votre machine Cloud Shell. La structure du projet cloné s'affiche comme suit dans l'éditeur Cloud Shell :

La classe Java PromptController contient l'appel du service de base de données, l'implémentation de la logique métier et l'appel de l'API d'IA générative d'Imagen. Cette classe interagit avec les modèles Thymeleaf qui gèrent l'intégration des données à l'interface utilisateur. Cette classe comporte trois méthodes de service : 1) pour obtenir l'entrée de la requête, 2) pour traiter la requête et appeler l'API Imagen, et 3) pour traiter la réponse Imagen.
Prompt et Yoga sont les classes POJO qui contiennent les champs, les getters et les setters pour l'interface avec l'API Imagen et l'API du serveur de données Spanner, respectivement.
Les fichiers HTML Index et getImage du dossier des modèles contiennent les modèles de l'interface utilisateur et dépendent des scripts JS et CSS dans les dossiers respectifs.
Intégration de l'API Vertex AI Imagen Pour le cas d'utilisation de la génération d'images, nous utilisons l'API Imagen de Vertex AI au format suivant :
https://<<region>>- aiplatform.googleapis.com/v1/projects/<<your-project-id>>/locations/<<region>>/publishers/google/models/imagegeneration:predict
Pour en savoir plus sur les fonctionnalités d'Imagen, cliquez ici. La réponse est renvoyée au format de chaîne encodée en Base64. Pour la convertir en image, nous avons utilisé la méthode javascript setattribute (dans le fichier getImage.js) sur l'objet image comme suit dans le fichier getImage.HTML :
poseImage.setAttribute('src', "data:image/jpg;base64," + baseStr64);
Autorisation L'API Imagen nécessite que l'authentification par jeton porteur soit activée pour y accéder. Dans notre cas, j'ai utilisé l'approche JSON des identifiants par défaut de l'application. Pour l'implémenter, exécutez la commande ci-dessous à partir du terminal Cloud Shell et suivez les instructions qui s'affichent dans le terminal :
gcloud auth application-default login
Saisissez "Y" pour vous authentifier avec votre compte. Autorisez l'accès et copiez le code d'autorisation qui s'affiche dans la fenêtre pop-up. Vous obtiendrez alors les identifiants par défaut de l'application dans le fichier JSON enregistré dans un emplacement semblable à celui-ci : /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json.
Téléchargez le fichier ou copiez son contenu en exécutant la commande cat (cat /tmp/tmp.Fh0Gf4yF0V/application_default_credentials.json), puis utilisez-le dans l'application dans la méthode callImagen() de la classe PromptController.java. Pour en savoir plus sur l'authentification, cliquez ici.
Interface utilisateur Nous avons utilisé Thymeleaf comme moteur de modèle pour analyser et afficher les données dans les fichiers de modèle de l'interface utilisateur, et pour ajouter un design élégant à l'interface utilisateur. Il est semblable à HTML, mais accepte davantage d'attributs pour fonctionner avec les données affichées. Le fichier index.html contient les composants de conception de la page de destination et permet à l'utilisateur de sélectionner le sujet et d'ajouter une requête de remplacement pour générer l'image souhaitée.
6. Migration Build and Deploy
Maintenant que vous avez cloné le code et remplacé les valeurs des espaces réservés par celles qui s'appliquent à votre projet, à votre région et à vos identifiants d'authentification, passons à la création et au déploiement de l'application. Accédez au dossier du projet dans le terminal Cloud Shell à l'aide de la commande, puis créez et déployez l'application pour la tester localement sur la machine Cloud Shell avec les trois commandes suivantes, une par une :
cd genai-posegen
./mvnw package
./mvnw spring-boot:run
Déployez l'application dans Cloud Run afin qu'elle soit disponible dans le cloud. Pour ce faire, exécutez la commande suivante à partir du terminal Cloud Shell dans le dossier du projet :
gcloud run deploy –source .
Transmettez les paramètres requis et assurez-vous que votre application est déployée.
7. Démo
Une fois l'application déployée, l'URL du service doit s'afficher dans le terminal. Cliquez sur le lien et découvrez votre application de génération d'images de poses s'exécutant sans serveur sur Google Cloud.

8. Effectuer un nettoyage
Pour éviter que les ressources utilisées dans cet atelier soient facturées sur votre compte Google Cloud, procédez comme suit :
- Dans la console Google Cloud, accédez à la page Gérer les ressources.
- Dans la liste des projets, sélectionnez le projet que vous souhaitez supprimer, puis cliquez sur "Supprimer".
- Dans la boîte de dialogue, saisissez l'ID du projet, puis cliquez sur "Arrêter" pour supprimer le projet.
- Si vous ne souhaitez pas supprimer le projet, supprimez l'instance Spanner en accédant à l'instance que vous venez de créer pour ce projet, puis cliquez sur le bouton SUPPRIMER L'INSTANCE en haut à droite de la page de présentation de l'instance.
- Vous pouvez également accéder à la page des services Cloud Run, sélectionner les services créés dans ce projet, puis cliquer sur le bouton "Supprimer" pour les supprimer.
9. Félicitations
Dans cet article de blog, nous avons pu créer l'application Spring Boot Full Stack qui stocke et gère les données dans Cloud Spanner, afin de générer des poses à l'aide de l'API Imagen de Vertex AI de Google Cloud dans une application cliente interactive déployée dans Cloud Run. Dans la section du schéma d'architecture de cet article de blog, vous voyez le composant Cloud Functions (Java) que nous n'avons jamais utilisé. Vous pouvez le faire si vous souhaitez contribuer. Vous pouvez implémenter deux fonctions Cloud Java pour exécuter les deux méthodes disponibles dans le fichier getimage.html : enregistrer la pose dans la base de données et importer des images. Pour en savoir plus sur le modèle, consultez la documentation de Imagen sur Vertex AI.