){kind=small}
Pruébate ropa virtualmente con Gemini Nano Banana vía RCS
Estaba muy emocionado de empezar a construir con Gemini después de todos los anuncios relacionados con la IA en Google I/O 2025. En esta entrada del blog, voy a mostrar cómo utilizar Gemini Nano Banana, oficialmente denominado Gemini 2.5 Flash Image en la API de Gemini, para generar y editar imágenes mediante la combinación de una o más fotos con instrucciones de texto.
Hay una escena icónica en la película Juego de pistas en la que Cher, la protagonista, habla de la vida cotidiana de una adolescente que elige su ropa para ir al colegio y muestra una aplicación en la que ha añadido un selfie. Luego puede elegir sus propios conjuntos, que se le muestran virtualmente en un ordenador muy antiguo. Para mí, comprar ropa por Internet es un juego de adivinanzas; nunca sé si me quedará bien, y las devoluciones son un engorro. Después de esta entrada en el blog, podremos previsualizar conjuntos en una persona, ya sea para crear nuestro propio armario virtual, probarnos ropa antes de comprarla o por muchas otras razones que se nos ocurran.
Este post es una guía de configuración, no una construcción completa paso a paso. Clonarás el proyecto, añadirás tus variables de entorno e iniciarás un servidor Node.js que utiliza Gemini e Imagen para añadir ropa nueva a tu foto. A continuación, el servidor envía la imagen resultante a tu teléfono como una imagen RCS utilizando la Mensajes API de Vonage. No hay interfaz web, solo tu teléfono, tu cuenta de Vonage y el servidor.
Nota: Puede encontrar el código código completo en el repositorio GitHub.
RCS Conversation
La aplicación funciona así. Le enviarás a tu agente de RBM dos imágenes: primero, un selfie y, después, una de las prendas que te gustaría probar.
El servidor obtiene ambas imágenes de los webhooks entrantes, pide a Gemini 2.5 Flash Image que componga la prenda sobre la persona, almacena el PNG resultante en la memoria y responde con una Rich Card RCS independiente que muestra la imagen de prueba y un par de respuestas sugeridas.
Al navegar a Google AI Studioinicia sesión y crea un nuevo chat. Elige el modelo. Yo he utilizado "Gemini 2.5 Flash Image". Para obtener más información, visita la página de documentación de Gemini Developer API.
Si quieres probarlo sin pensar aún en el código, puedes probar a enviar la imagen de la persona y la prenda que quieres que lleve, y ver el resultado final en el chat de la conversación, después podrías pulsar en ‘<\>Get Code' en la parte superior derecha y seleccionar el lenguaje de programación que prefieras para utilizar el código de este proyecto junto con el envío de mensajes RCS o de cualquier otra forma que prefieras.
A agente registrado de RCS Business Messaging (RBM). Tu administrador de cuenta de Vonage puede habilitarlo.
Un teléfono con capacidades RCS para realizar pruebas.
Node.js 18+.
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.
Para crear una aplicación, vaya a la sección Crear una aplicación en el panel de Vonage y define un nombre para tu aplicación.
Haga clic en "generar clave pública y privada". Se generará una clave privada (archivo .key). Descárguela y guárdela de forma segura. Esta clave es necesaria para la autenticación cuando se hacen peticiones a la API. Nota: Las claves privadas no funcionarán a menos que se guarde la aplicación.
Elige la función "Mensajes" y agregaremos los webhooks requeridos (por ejemplo, URL de eventos, URL de respuestas o URL de mensajes entrantes). Estos se describirán en el tutorial en "Configurar webhooks en el panel de Vonage".
Para guardar e implementar, haz clic en "Generar nueva aplicación" para finalizar la configuración. Tu aplicación ahora está lista para usar con las API de Vonage.
Si no ha utilizado ngrok antes, aprenda cómo empezar a realizar pruebas con ngrok. Headido los pasos para ejecutar una instancia debajo de la imagen en la siguiente sección.
Ejecute el siguiente comando para iniciar una instancia de túnel ngrok.
ngrok http 3000En la salida, encontrarás una URL que empieza por https:// y termina en .ngrok.app/. Anótala, ya que la necesitarás en el siguiente paso para configurar tus webhooks.
Forwarding https://94cd51b63460.ngrok.app/ -> http://localhost:8000
Abre la aplicación de Vonage que has creado, haz clic en "Editar", desplázate hacia abajo hasta capacidades, activa la opción Mensajes en capacidades y establece la URL pública de tu servidor desde ngrok como el punto final para mensajes entrantes y eventos. debería verse así: https://94cd51b63460.ngrok.app/webhooks/inbound para entrada y https://94cd51b63460.ngrok.app/webhooks/status para el estado. Si desea más información sobre webhooks, puedes encontrarla en nuestra documentación de Vonage.
Clona el proyecto, entra en su directorio e instala las dependencias listadas en 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
Crea un archivo .env en la raíz de tu proyecto y añade y rellena las siguientes variables de entorno.
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
El archivo archivo index.js contiene las partes móviles para implementar nuestro flujo de trabajo: recibir las dos imágenes a través de mensajes RCS, utilizar el modelo Nano-Banana de Gemini para la magia de la prueba, y luego enviar de vuelta un mensaje RCS Rich card que contiene el aspecto final generado en el selfie. En tu proyecto, también tendrás un archivo archivo vonage.js que incluye dotenv y la configuración del cliente de Vonage.
La función handleInboundMessage(request) escucha el webhook de Vonage, valida de forma segura que la solicitud entrante proviene de Vonage verificando el JWT de su firma (puedes obtener más información sobre cómo cómo verificar la solicitud)y extrae la URL del selfie y el número de teléfono del usuario.
La función principal de nuestra aplicación es el generateTryOnImage(selfieUrl, clothingUrl). Llama a la API Gemini de Nano-Banana. Envía ambas imágenes junto con una instrucción de texto precisa al modelo Gemini-2.5-flash-image. La API genera la nueva imagen final y devuelve los datos de la imagen al servidor. Podemos obtener resultados comparables a los de un software de edición fotográfica sin los conocimientos necesarios, de forma rápida y programática.
El método createAndSendRCSCard(newImageUrl, userPhoneNumber) devuelve el resultado final: utiliza los datos de imagen generados por la IA y los envía de vuelta al usuario a través de la API de Messages de Vonage.
Ejecute el servidor escribiendo el siguiente comando en su símbolo del sistema o terminal.
node index.jsAsegúrese de que su ngrok aún se esté ejecutando y que su URL HTTPS esté configurada en el panel de Vonage en Messages API Capabilities para webhooks entrantes y de estado. Si lo deseas, abre https://<your-ngrok-url>/test para iniciar la conversación (esto sólo inicia el hilo de conversación; no carga previamente ninguna imagen). {"ok":true,"to":"phone_number"} en esa página. Si el mensaje fue enviado correctamente, deberías haber recibido un mensaje RCS en tu teléfono habilitado para RCS.
Desde tu teléfono, puedes enviar un selfie (una foto de la persona o personaje que llevará la prenda) al agente de RBM y, a continuación, enviar una foto de la prenda. Y por último, recibirás una RCS Rich Card con la vista previa editada.
Este fue un proyecto tan fresco para construir, con infinitas posibilidades de lo que puede hacer con él. Con RCS ya configurado, considere agregar otros tipos de mensajes RCS. Puede utilizar una respuesta rápida para preguntar "Top / Bottom / Full look?" y condicionar su mensaje en consecuencia.
Incluso puedes hacer peticiones muy concretas para ver cómo quedarían en una prenda de ropa específica: "Prueba el slip dress verde a la altura de la rodilla con un fondo liso" Y puedes solicitar ediciones aún más precisas con Imagen, por ejemplo, si necesitas más control sobre detalles como el tejido, la iluminación o el fondo. He creado una entrada de blog en la que muestro un uso de Imagen para visualizar el tiempo que deberías consultar.
La IA tiene mucho que ofrecer. Anímate y prueba algunos proyectos más usándola. Visita nuestro Blog de Vonage para obtener más ideas. He estado muy entusiasmado con la IA en general y experimentando mucho con Gemini. Creo muchos cuentos para mi hijo antes de dormir. También puedes aprender a Construir un servicio de Storytelling con RCS Rich Cards y Geminiy últimamente he estado usando mucho Storybooks dentro de Gemini.
¿Tienes alguna pregunta o algo que compartir? Únete a la conversación en Slack de la comunidad de Vonagey mantente actualizado con el Boletín para desarrolladoressíguenos en X (antes Twitter)suscríbete a nuestro canal de YouTube para ver tutoriales en video, y sigue la página de página para desarrolladores de Vonage en LinkedInun espacio para que los desarrolladores aprendan y se conecten con la comunidad. Mantente conectado, comparte tu progreso y entérate de las últimas noticias, consejos y eventos para desarrolladores.