Compila una app de generación de imágenes con Imagen y Mesop en Cloud Shell

1. Introducción

Imagina transformar una simple descripción de texto en una imagen vibrante y detallada en segundos. Este es el poder de los medios generativos, un campo en rápida evolución que está transformando la forma en que creas contenido visual y cómo interactúas con él. Los modelos como Imagen 3 de Google en Vertex AI ofrecen capacidades de IA generativa de vanguardia a los desarrolladores de aplicaciones.

Imagen 3 es el modelo de texto a imagen de mayor calidad de Google hasta la fecha. Es capaz de crear imágenes con detalles asombrosos. Por lo tanto, los desarrolladores tienen más control cuando compilan productos de IA de nueva generación que transforman su imaginación en recursos visuales de alta calidad. Obtén más información sobre Imagen en Vertex AI.

En este codelab, se te guiará para que aproveches el poder de Imagen con el SDK de IA generativa de Google. No solo explorarás cómo generar imágenes impresionantes a partir de instrucciones de texto, sino que también integrarás esta capacidad en una aplicación web con Mesop, un framework de IU de Python.

Requisitos previos

Un proyecto de Google Cloud con la facturación y la API de Vertex AI habilitadas Obtén más información para configurar un proyecto y un entorno de desarrollo.

Qué aprenderás

Cómo usar el SDK de IA generativa de Google para Python para interactuar con Imagen 3
Cómo generar imágenes a partir de instrucciones de texto
Cómo compilar una app de Mesop y ejecutarla desde Cloud Shell

Requisitos

Conocimientos básicos de Python
Experiencia en la ejecución de comandos en una terminal de Cloud Shell
Una computadora con acceso a Cloud Shell

2. Configura el entorno y, luego, instala las dependencias

Abre el Editor de Cloud Shell.
Haz clic en el botón Abrir terminal, ubicado en la esquina superior derecha.
Para crear una carpeta nueva, ingresa el siguiente comando en la terminal:

mkdir my-imagen-app

Cambia los directorios a tu carpeta nueva:

cd my-imagen-app

Crea un entorno virtual en Python 3:

python3 -m venv myenv

Activa el entorno virtual:

source myenv/bin/activate

Instala Mesop:

pip3 install mesop

Instala el SDK de IA generativa de Google para Python:

pip install google-genai

Crea un archivo de Python:

touch main.py

3. Configuración de la app

Todo el código necesario para ejecutar la app de Mesop estará en main.py. En cada uno de los siguientes pasos, copia y pega el código de forma secuencial en este archivo en el Editor de Cloud Shell.

Importa las bibliotecas

import base64
import mesop as me
from google import genai
from google.genai import types

Configura la información del proyecto de Google Cloud y crea un cliente

Establece tu ID del proyecto:

PROJECT_ID = "[your-project-id]"

Reemplaza [your-project-id] por el nombre de tu proyecto de Google Cloud cuando copies esta línea de código.

Crea el cliente:

client = genai.Client(vertexai=True, project=PROJECT_ID, location="us-central1")

Carga el modelo de generación de imágenes

imagen_model = "imagen-3.0-generate-002"

Administración de estado

Definir la administración de estados te permite almacenar información durante todo el recorrido del usuario.

@me.stateclass
class State:
   input: str = ""
   enhanced_prompt: str = ""
   img_data: str = "https://storage.googleapis.com/cloud-samples-data/generative-ai/image/flowers.png"

input: Es la entrada proporcionada por el usuario que se usará para generar la imagen.
enhanced_prompt: El modelo imagen-3.0-generate-002 ofrece la opción de mejorar el mensaje proporcionado. Se creará una instrucción nueva y detallada a partir de la original para ayudar a generar imágenes de mayor calidad, y se devolverá en esta variable.
img_data: Ubicación de Cloud Storage o bytes de imagen de una imagen generada con Imagen 3.

4. Define funciones auxiliares

Función de carga

Este código se ejecutará cuando se cargue la aplicación. Establece el modo de la app en colores del sistema.

def load(e: me.LoadEvent):
  me.set_theme_mode("system")

Función de desenfoque

Esta función guarda la entrada del usuario en tu variable de estado.

def on_blur(e: me.InputBlurEvent):
    state = me.state(State)
    state.input = e.value

5. Genera imágenes con Imagen

Se invoca esta función cuando un usuario hace clic en un botón para enviar una instrucción de texto para la generación de imágenes.

def generate_image(e: me.ClickEvent):
    state = me.state(State)
    image = client.models.generate_images(
        model=imagen_model,
        prompt=state.input,
        config=types.GenerateImagesConfig(
            number_of_images=1,
            aspect_ratio="1:1",
            enhance_prompt=True,
            safety_filter_level="BLOCK_MEDIUM_AND_ABOVE",
            person_generation="DONT_ALLOW",
        )
    )
    img = image.generated_images[0].image.image_bytes
    # Encode image in Base64 to display in web app
    img64 = base64.b64encode(img).decode('utf-8')
    state.enhanced_prompt = image.generated_images[0].enhanced_prompt
    state.img_data = f"data:image/png;base64,{img64}"

Puedes configurar los parámetros que se encuentran en GenerateImagesConfig:

number_of_images: 1, 2, 3, 4
aspect_ratio: 1:1, 9:16, 16:9, 3:4, 4:3
safety_filter_level: BLOCK_LOW_AND_ABOVE, BLOCK_MEDIUM_AND_ABOVE, BLOCK_ONLY_HIGH, BLOCK_NONE
person_generation: DONT_ALLOW, ALLOW_ADULT, ALLOW_ALL

Nota: La única opción que funcionará sin una lista de entidades permitidas adicional es DONT_ALLOW.

6. Estructura el diseño de la app

@me.page(
  on_load=load,
  path="/",
  title="Imagen 3",
)
def app():
   s = me.state(State)
   with me.box(
        style=me.Style(
            display="grid",
            width="100%",
            place_items="center",
            margin=me.Margin(top=100),
         )
    ):
        me.text(text="Imagen 3: Image Generation", type="headline-3", style=me.Style(font_family="Google Sans"))
        with me.box(
           style=me.Style(
              border_radius=16,
              padding=me.Padding.all(8),
              display="flex",
           )
        ):
            with me.box(
               style=me.Style(flex_grow=1)
            ):
                me.native_textarea(
                autosize=True,
                on_blur=on_blur,
                min_rows=8,
                placeholder="Enter your image prompt",
                style=me.Style(
                    padding=me.Padding(top=16, left=16),
                    width="700px",
                    border_radius=16,
                    outline="none",
                    overflow_y="auto",
                    border=me.Border.all(
                        me.BorderSide(style="none"),
                    ),
                    font_family="Google Sans",
                  ),
                )
            with me.content_button(
                type="icon",
                on_click=generate_image,
            ):
                me.icon("send")
        with me.box(style=me.Style(margin=me.Margin.all(8),
            width="700px",
            display="flex",
            align_items="center")
        ):
            me.image(
              src=s.img_data,
              style=me.Style(width="350px", padding=me.Padding.all(16), border_radius=36)
            )
            with me.box(
               style=me.Style(
                  padding=me.Padding.all(8),
                  background="white",
                  height="400px",
                  width="400px",
                  border_radius=16,
               )
            ):
                me.text(text="Enhanced Prompt:", style=me.Style(font_family="Google Sans", font_weight="bold"))
                me.text(text=s.enhanced_prompt, style=me.Style(padding=me.Padding.all(10), font_family="Google Sans"),
            )

Este código crea una aplicación de una sola página que incluye los siguientes componentes:

Título
Área de texto para ingresar una instrucción de imagen
Botón de envío que llama a la función generate_image
Una imagen generada por Imagen
La instrucción mejorada que se devolvió con la imagen

7. Ejecuta la aplicación en Cloud Shell

Una vez que hayas copiado todos los fragmentos de código en main.py, puedes ejecutar la aplicación de Mesop desde tu terminal de Cloud Shell.
```
mesop main.py
```
Ahora, haz clic en el botón Vista previa en la Web en la esquina superior derecha y, luego, en Cambiar puerto. Escribe 32123 en el cuadro Número de puerto y, luego, haz clic en Cambiar y obtener vista previa. Se debería abrir una ventana nueva en la que podrás ver la app cargada. Debería verse de la siguiente manera:

8. Prueba de Imagen 3

Aquí puedes probar Imagen con tus propias instrucciones de texto. Puedes generar imágenes en una variedad de estilos, desde fotorrealismo hasta animación y diferentes estilos artísticos. También puedes especificar ángulos de cámara, lentes y mucho más. Tu instrucción de texto original también se reformulará a través de una función basada en LLM que tiene como objetivo producir imágenes de mayor calidad que reflejen mejor la intención de la instrucción original.

Nota: Para generar imágenes de personas, se requiere acceso adicional. Mientras tanto, recibirás un error si tu instrucción incluye la generación de personas o rostros.

Estas son algunas instrucciones de ejemplo que puedes probar:

Una gorra de béisbol beige con la frase "good vibes" escrita en la parte superior con letras cosidas blancas y burbujeantes que están delineadas en verde neón.
Una tienda de dulces caprichosa.
Una postal de Las Vegas con el nombre de la ciudad escrito y un sello postal en la esquina derecha.
Un cachorro y un gatito jugando con un ovillo de lana.

9. Limpieza

Detener la aplicación

Regresa a la terminal en la que iniciaste la aplicación y sal con Ctrl C.

Desactiva el entorno virtual

En la misma terminal, escribe el siguiente comando:

deactivate

10. Conclusión

¡Felicitaciones! Completaste correctamente este codelab compilando una aplicación con Imagen y generando algunas imágenes.

Encuesta

Completa esta breve encuesta para contarnos qué te pareció este codelab.