GENERAR IMAGEN A PARTIR DE TEXTO CON GPT – IMAGE EN AZURE FOUNDRY Y MOSTRARLA EN POWER APPS

Hola a todos!!

Hace unas semanas, GPT empezó a permitir algo especialmente interesante: generar imágenes directamente a partir de lenguaje natural.

Es decir, ya no hablamos solo de pedirle al modelo que escriba, resuma, clasifique o razone. También podemos pedirle que transforme una descripción textual en una imagen(y eso mola mucho).

En ChatGPT, esta capacidad aparece integrada dentro de la propia experiencia conversacional. El usuario escribe lo que quiere ver, puede matizarlo después, pedir cambios, ajustar el estilo o transformar una imagen ya existente.

OpenAI explica en la documentación que esta generación de imágenes está integrada en GPT-4o y que permite seguir instrucciones, trabajar con contexto conversacional y realizar refinamientos sobre la imagen de forma iterativa.

Pero cuando queremos llevar esa capacidad a una solución o una herramienta, por ejemplo a Power Apps, necesitamos usarla de otra manera :Azure Foundry

Como ya habéis visto, en Azure AI Foundry podemos desplegar modelos especializados para distintos tipos de tareas: texto, audio o generación de imágenes. En este caso, el modelo que vamos a utilizar es GPT-Image-2.

«GPT-Image-2 es el modelo dedicado de OpenAI para generación y edición de imágenes desde API. No es exactamente “el botón de imagen de ChatGPT”, porque ChatGPT añade su propia experiencia conversacional, contexto y capa de producto, pero sí es el modelo actual de imagen que podemos usar desde una integración técnica.»

Vamos a transformar una capacidad que normalmente usamos dentro de un chat en una funcionalidad integrada dentro de una aplicación.

En este ejemplo, la arquitectura será sencilla:
1- Power Apps recoge el prompt escrito por el usuario.
2- Power Automate envía ese texto mediante una llamada HTTP al modelo GPT-Image-2 desplegado en Azure AI Foundry.
3- Azure AI Foundry devuelve la imagen generada en formato base64.
4- Y finalmente Power Apps muestra esa imagen directamente en la pantalla de la App

El flujo general sería:

Como ya sabéis por otros posts, soy un gran seguidor de Moebius, y se me ocurrió pedirle al modelo, una vez implementado, que me generase un gato estilo Moebius, incluyendo una estética propia del autor. Este es el tipo de resultado que vamos a obtener:

Pues bien todo comienza con el despliegue del modelo en Foundry, pero vamos a dar por hecho que ya lo tenéis desplegato que contáis con un endPoint y con una Key al modelo.

Lo que tenemos que hacer es construir un flujo en Automate (yo lo hago así porque me resulta más sencillo para explicar y generar el ejemplo, pero podrías utilizar, por ejemplo, databricks).

Estos serían los pasos para crear el flujo:

Aquí os dejo el código del Body del Https:

{
  "model": "img-gpt-image-2-dev",
  "prompt": "@{triggerBody()?['text']}",
  "size": "1024x1024",
  "quality": "medium",
  "n": 1
}

El Json:

{
    "type": "object",
    "properties": {
        "created": {
            "type": "integer"
        },
        "data": {
            "type": "array",
            "items": {
                "type": "object",
                "properties": {
                    "b64_json": {
                        "type": "string"
                    }
                },
                "required": [
                    "b64_json"
                ]
            }
        }
    },
    "required": [
        "data"
    ]
}

Los formatos de la acción crear archivo:

formatDateTime(utcNow(), 'yyyyMMdd_HHmmss')

base64ToBinary(first(body('Análisis_del_archivo_JSON')?['data'])?['b64_json'])

Y por último la salida del Power Apps:

first(body('Análisis_del_archivo_JSON')?['data'])?['b64_json']

Ahora que tenemos el flujo, debemos crear la app. Y básicamente utilizaremos un Botón para ejecutar el flujo, en el que vamos a incluir este código:

Set(
    varImgBase64;
    GENERARIMAGENGPT.Run(TextInput1.Text).imgbase64
);;

Set(
    varImg;
    "data:image/png;base64," & varImgBase64
)

En el botón reset, simplemente vamos a borrar la imagen generada.

Set(varImg;Blank())

Y en el control de imagen, en la propiedad Image, ponemos varImg

Y este es el resultado para este prompt: «Retrato hiperrealista de androide femenino futurista, carcasa blanca pulida, ojos naranjas luminosos, detalles biomecánicos visibles en cuello y cabeza, luces internas cálidas, fondo gris claro, iluminación de estudio, estilo sci-fi elegante y minimalista».

Espero que os haya gustado!!