Compila una app de generación de imágenes con Imagen y Mesop en Cloud Shell
Acerca de este codelab
1. Introducción
Imagina transformar una descripción de texto simple en una imagen vibrante y detallada en segundos. Este es el poder del contenido generativo, un campo que evoluciona rápidamente y que está cambiando la forma en que creas y con el que interactúas con el contenido visual. 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 crean 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, aprenderás a aprovechar 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 función 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 Google Gen AI para Python para interactuar con la 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
- Experimenta 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 Open Terminal 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 la 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 Google Gen AI 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 existirá en main.py. En cada uno de los siguientes pasos, cópialo y pégalo 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
Establece la información del proyecto de Google Cloud y crea el cliente
- Establece tu ID de 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 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 que proporcionó el usuario y que se usará para la generación de imágenes.enhanced_prompt: El modeloimagen-3.0-generate-002ofrece la opción de mejorar la instrucción que proporcionaste. Se creará una instrucción nueva y detallada a partir de la original para ayudar a generar imágenes de mayor calidad y se mostrará en esta variable.img_data: La ubicación de Cloud Storage o los bytes de imagen de una imagen generada con la 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 los 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
Esta función se invoca 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 de GenerateImagesConfig:
number_of_images: 1, 2, 3, 4aspect_ratio: 1:1, 9:16, 16:9, 3:4, 4:3safety_filter_level: BLOCK_LOW_AND_ABOVE, BLOCK_MEDIUM_AND_ABOVE, BLOCK_ONLY_HIGH, BLOCK_NONEperson_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 muestra 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, podrás ejecutar la aplicación Mesop desde la terminal de Cloud Shell.mesop main.py - Ahora, haz clic en el botón Vista previa 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 puedes ver la app cargada. Debería verse de la siguiente manera:
8. Prueba Imagen 3
Aquí es donde puedes probar Imagen con tus propias instrucciones de texto. Puedes generar imágenes en una variedad de estilos, desde el fotorrealismo hasta la 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 está diseñada para producir imágenes de mayor calidad que reflejen mejor la intención de la instrucción original.
Nota: Generar imágenes de personas requiere acceso adicional. Mientras tanto, recibirás un error si tu instrucción incluye la generación de personas o rostros.
Estos son algunos ejemplos de instrucciones que puedes probar:
- Una gorra de béisbol beige con la frase “good vibes” escrita en la parte superior en letras blancas con burbujas cosidas que están delineadas en verde neón.
- Una tienda de dulces fantástica.
- Una postal de caricatura 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
Detén 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.