1. Introduction
Dans cet atelier de programmation, vous allez créer un générateur de poses optimisé par 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 saisit une requête, et l'application génère une pose en fonction de cette requête. Nous utiliserons également les données de la base de données Spanner exposées sous forme d'API REST. Il s'agit d'une façon amusante et pédagogique 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
Diagramme de flux de haut niveau
Ce que vous allez faire
Vous allez créer
- Application Java Spring Boot pour l'API Spanner Data as a Service
- Application Java Spring Boot pour le cas d'utilisation de la génération d'images à l'aide d'Imagen
- Interface utilisateur interactive pour l'entrée et la réponse du prompt
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 sur 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 des 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. Pour en savoir plus sur les fonctionnalités de Cloud Spanner, le LDD, le LMD et plus encore, consultez cet article de blog. 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 Instances.
- 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.
- Indiquez le nom de la base de données ("first-spanner-db"), saisissez le code LDD suivant dans la section "MODÈLES LDD", puis 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 de l'éditeur de requêtes, comme illustré 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');
Nous avons maintenant créé notre instance, notre base de données, notre table et nos données Spanner, qui sont prêtes pour 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 ce blog.
- Amorcez l'application Spring Boot. Pour amorcer cette application à partir de zéro, suivez ce blog. Pour cloner le dépôt et passer à l'action, exécutez simplement la commande ci-dessous dans votre terminal Cloud Shell :
git clone https://github.com/AbiramiSukumaran/spanner-springb
Le projet spanner-springb devrait avoir été créé sur votre machine Cloud Shell. Pour comprendre les composants de l'application, consultez le blog.
- Compilons et exécutons l'application. Pour ce faire, exécutez les commandes suivantes depuis le terminal Cloud Shell :
cd spanner-springb
./mvnw package
./mvnw spring-boot:run
- Déployez l'application dans Cloud Run pour qu'elle soit disponible pour l'application de génération de poses. Pour ce faire, exécutez la commande suivante depuis le 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 diagramme de flux, c'est-à-dire la mise à disposition des données Spanner en tant que service (API REST). Nous allons maintenant créer une application cliente qui appelle les données Spanner, appelle l'API Imagen avec un prompt 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 votre terminal Cloud Shell :
git clone https://github.com/AbiramiSukumaran/genai-posegen
Le projet genai-posegen devrait 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 du prompt, 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 "templates" contiennent les modèles pour l'interface utilisateur et dépendent des scripts JS et CSS dans les dossiers respectifs.
Intégration de l'API Imagen de Vertex AI : 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. Il renvoie la réponse sous la forme d'une chaîne encodée en Base64. Pour le 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 l'activation de l'authentification par jeton du porteur 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 depuis le 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 le pop-up. Dès que vous aurez fait cela, vous obtiendrez 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 frontaux et pour ajouter un design élégant à l'interface utilisateur. Il est semblable à HTML, mais accepte davantage d'attributs pour travailler 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 thème et d'ajouter un prompt 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 compilation et au déploiement de l'application. Accédez au dossier du projet dans le terminal Cloud Shell à l'aide de la commande, puis compilez et déployez pour 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 pour 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 pour voir votre application de génération d'images de poses s'exécuter sur Google Cloud sans serveur.
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 en cliquant sur le bouton "SUPPRIMER L'INSTANCE" en haut à droite de la page d'aperçu 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 de suppression pour les supprimer.
9. Félicitations
Dans ce blog, nous avons pu transférer 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 sur Google Cloud dans une application cliente interactive déployée dans Cloud Run. Dans la section du diagramme de l'architecture de ce blog, vous voyez le composant Cloud Functions (Java) que nous n'avons jamais utilisé. Vous pouvez vous en charger si vous le souhaitez. Vous pouvez implémenter deux fonctions Cloud Functions Java pour exécuter les deux méthodes disponibles dans le fichier getimage.html : les méthodes "save pose to database" (enregistrer la pose dans la base de données) et "upload image" (importer l'image). Pour en savoir plus sur le modèle, consultez la documentation d'Imagen sur Vertex AI.