Essayer virtuellement des vêtements avec Gemini Nano Banana via RCS

Introduction

J'étais très enthousiaste à l'idée de commencer à construire avec Gemini après toutes les annonces liées à l'IA lors de la conférence Google I/O 2025. annonces relatives à l'IA lors de la conférence Google I/O 2025. Dans cet article de blog, je vais vous montrer comment utiliser Gemini Nano Banana, officiellement appelé Gemini 2.5 Flash Image dans l'API Gemini, pour générer et éditer des images en combinant une ou plusieurs photos avec des instructions textuelles.

Il y a une scène emblématique dans le film Clueless Game où Cher, la protagoniste, parle de la vie quotidienne d'une adolescente qui choisit ses tenues pour l'école et montre une application où elle a ajouté un selfie. Elle peut ensuite choisir ses propres tenues, qui lui sont montrées virtuellement sur un très vieil ordinateur. Pour moi, acheter des vêtements en ligne est un jeu de devinettes ; je ne sais jamais s'ils m'iront bien et les retours sont une source de tracas. Après cet article de blog, nous serons en mesure de prévisualiser des tenues sur une personne, que ce soit pour constituer votre propre garde-robe virtuelle, essayer des vêtements avant de les acheter, ou pour bien d'autres raisons auxquelles nous pouvons penser !

Ce billet est un guide d'installation, pas une construction complète étape par étape. Vous allez cloner le projet, ajouter vos variables d'environnement et démarrer un serveur Node.js qui utilise Gemini et Imagen pour ajouter de nouveaux vêtements à votre photo. Le serveur envoie ensuite l'image résultante à votre téléphone en tant qu'image RCS à l'aide de l'API Vonage Messages API. Il n'y a pas de frontend web, juste votre téléphone, votre Account Vonage, et le serveur.

Note : Vous pouvez trouver le code complet dans le dépôt GitHub.

RCS Conversation

Vue d'ensemble

Voici comment fonctionne l'application. Vous envoyez deux images à votre agent RBM : d'abord un selfie, puis l'un des vêtements que vous souhaitez essayer.

Le serveur récupère les deux images des webhooks entrants, demande à Gemini 2.5 Flash Image de composer le vêtement sur la personne, stocke le PNG résultant en mémoire, et répond avec une carte riche autonome RCS qui affiche l'image d'essayage et quelques suggestions de réponses.

Comment fonctionne l'intégration Gemini

Lorsque vous naviguez vers Google AI Studioconnectez-vous et créez un nouveau chat. Choisissez le modèle. J'ai utilisé "Gemini 2.5 Flash Image". Pour en savoir plus, consultez la page de documentation de page de documentation de l'API du développeur Gemini.

Si vous souhaitez l'essayer sans penser encore au code, vous pouvez essayer d'envoyer l'image de la personne et le vêtement que vous voulez qu'elle porte, et voir le résultat final dans le chat de la conversation, vous pouvez alors cliquer sur ‘<\>Get Code' en haut à droite et sélectionner le langage de programmation de votre choix pour utiliser le code de ce projet tout en envoyant des messages RCS ou de toute autre manière que vous préférez.

Conditions préalables

• A agent RCS Business Messaging (RBM) enregistré. Votre Account Manager Vonage peut activer cette fonction.

• Un téléphone avec des fonctionnalités RCS pour les tests.

• Node.js 18+.

• Clé API Gemini.

• ngrok.

  Vonage API Account

  To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

  

  Ready to start building?

  Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Créer l'application Vonage

Pour créer une application, allez à la page Créer une application sur le tableau de bord de Vonage et définissez un nom pour votre application.

• Cliquez sur "générer une clé publique et privée". Une clé privée (fichier .key) sera générée. Téléchargez-la et conservez-la en toute sécurité. Cette clé est nécessaire pour l'authentification lors des demandes d'API. Remarque : les clés privées ne fonctionneront pas si l'application n'est pas sauvegardée.

• Choisissez la capacité " Messages ", et nous ajouterons les crochets Web requis (par exemple, URL d'événement, URL de réponse ou URL de message entrant). Ces éléments seront décrits dans le tutoriel "Configurer les webhooks sur le tableau de bord de Vonage".

• Pour sauvegarder et déployer, cliquez sur "Générer une nouvelle application" pour finaliser la configuration. Votre application est maintenant prête à être utilisée avec les API de Vonage.

Création d'une instance de tunneling ngrok

Si vous n'avez jamais utilisé ngrok auparavant, apprenez comment commencer à tester avec ngrok. J'ai aJ'ai ajouté les étapes pour lancer une instance en dessous de l'image dans la section suivante.

Exécutez la commande suivante pour démarrer une instance de tunneling ngrok.

ngrok http 3000

Dans le résultat, vous trouverez une URL qui commence par https:// et se termine par .ngrok.app/. Notez-la car vous en aurez besoin à l'étape suivante pour configurer vos webhooks.

Forwarding https://94cd51b63460.ngrok.app/ -> http://localhost:8000    

Configurer les crochets Web sur le tableau de bord de Vonage

Ouvrez l'application Vonage que vous avez créée, cliquez sur "Edit", descendez jusqu'à "capabilities", activez l'option "Messages" sous "capabilities" et définissez l'URL publique de votre serveur à partir de ngrok comme point de terminaison pour les messages et les événements entrants : https://94cd51b63460.ngrok.app/webhooks/inbound pour les messages entrants et https://94cd51b63460.ngrok.app/webhooks/status pour le statut. Si vous souhaitez en savoir plus sur les webhooks, vous pouvez trouver des informations dans notre documentation Vonage..

Mise en place du projet Node

Clonez le projet, allez dans son répertoire et installez les dépendances listées dans le fichier package.json.

git clone https://github.com/Vonage-Community/blog-messages_rcs_nodejs-try_on.git

cd blog-messages_rcs_nodejs-try_on

npm install 

Remplir le fichier des variables d'environnement

Créez un fichier .env à la racine de votre projet et ajoutez les variables d'environnement suivantes.

VONAGE_APPLICATION_ID=your-app-id

VONAGE_PRIVATE_KEY_PATH=./private.key

RCS_SENDER_ID=your-rcs-sender-id

GEMINI_API_KEY=your-gemini-api-key

VONAGE_API_SIGNATURE_SECRET=your-signature-secret

PUBLIC_BASE_URL=https://your-ngrok-subdomain.ngrok-free.app

PHONE_NUMBER=+<your_e164_number>

PORT=3000

Logique du code et flux de travail

Le fichier index.js contient les éléments mobiles pour mettre en œuvre notre flux de travail : recevoir les deux images via des messages RCS, utiliser le modèle Nano-Banana de Gemini pour la magie de l'essai, puis renvoyer un message RCS Rich card contenant le look final généré sur le selfie. Dans votre projet, vous aurez également un fichier vonage.js qui inclut dotenv et l'installation du client Vonage.

La fonction handleInboundMessage(request) écoute le webhook de Vonage, valide en toute sécurité que la demande entrante provient de Vonage et vérifie la JWT de sa signature (vous pouvez en savoir plus sur la fonction la vérification de la demande)et extrait l'URL du selfie et le numéro de téléphone de l'utilisateur.

La fonction principale de notre application est la generateTryOnImage(selfieUrl, clothingUrl). Elle appelle l'API Gemini de Nano-Banana. Elle envoie les deux images ainsi qu'une instruction textuelle précise au modèle Gemini-2.5-flash-image. L'API génère la nouvelle image finale et renvoie les données de l'image au serveur. Nous pouvons obtenir des résultats comparables à ceux d'un logiciel de retouche photo sans les compétences requises, dans le cadre d'une approche rapide et programmatique.

La méthode createAndSendRCSCard(newImageUrl, userPhoneNumber) renvoie le résultat final : elle utilise les données d'image générées par l'IA et les renvoie à l'utilisateur via l'API Vonage Messages API.

Testez-le

Exécutez le serveur en tapant la commande suivante dans votre invite de commande ou votre terminal.

node index.js

Veillez à ce que votre ngrok fonctionne toujours et que son URL HTTPS est définie dans le tableau de bord de Vonage sous les capacités de l'API Messages pour les webhooks entrants et les webhooks d'état. Si vous le souhaitez, ouvrez https://<your-ngrok-url>/test pour lancer la conversation (cela ne fait que démarrer le fil de la conversation ; cela ne précharge aucune image). {"ok":true,"to":"phone_number"} sur cette page. Si le message a été envoyé correctement, vous devriez avoir reçu un message RCS sur votre téléphone compatible RCS.

Depuis votre téléphone, vous pouvez envoyer un selfie (une photo de la personne ou du personnage qui portera le vêtement) à l'agent RBM, puis envoyer une photo du vêtement. Enfin, vous recevrez une RCS Rich Card avec l'aperçu édité.

Extension possible

C'était un projet tellement cool à construire, avec des possibilités infinies pour ce que vous pouvez faire avec. Avec RCS déjà mis en place, envisagez d'ajouter d'autres types de messages RCS. Vous pouvez utiliser une réponse rapide pour demander "Top / Bottom / Full look ?" et conditionner votre message en conséquence.

Vous pouvez même faire des demandes très précises pour voir ce qu'elles donneraient sur un vêtement spécifique : "Essayez la robe verte au genou sur un fond uni". Et vous pouvez demander des modifications encore plus précises à l'aide d'Imagen, par exemple, si vous avez besoin de plus de contrôle sur des détails comme le tissu, l'éclairage ou le fond. J'ai créé un article de blog présentant une utilisation d'Imagen pour visualiser le temps qu'il fait.

Conclusion

L'IA a beaucoup à offrir. Allez-y et essayez d'autres projets en l'utilisant. Consultez le blogue de Vonage pour trouver d'autres idées. Je suis très enthousiaste au sujet de l'IA en général et j'expérimente beaucoup avec Gemini. Je crée tellement d'histoires pour mon enfant avant qu'il ne se couche. Vous pouvez également apprendre à Construire un service de narration avec RCS Rich Cards et Geminiet j'ai beaucoup utilisé les Storybooks dans Gemini ces derniers temps.