Criar um app de geração de imagens com o Imagen e o Mesop no Cloud Shell
Sobre este codelab
1. Introdução
Imagine transformar uma descrição de texto simples em uma imagem vibrante e detalhada em segundos. Esse é o poder da mídia generativa, um campo em rápida evolução que está reformulando a forma como você cria e interage com conteúdo visual. Modelos como o Imagen 3 do Google na Vertex AI estão oferecendo recursos de IA generativa de última geração para desenvolvedores de aplicativos.
O Imagen 3 é o modelo de conversão de texto em imagem mais avançado do Google até o momento. Ele é capaz de criar imagens com detalhes surpreendentes. Assim, os desenvolvedores têm mais controle ao criar produtos de IA de última geração que transformam a imaginação em recursos visuais de alta qualidade. Saiba mais sobre o Imagen na Vertex AI.
Neste codelab, você vai aprender a aproveitar o poder do Imagen usando o SDK da IA generativa do Google. Você vai aprender a gerar imagens incríveis a partir de comandos de texto e integrar esse recurso a um aplicativo da Web usando a Mesop, uma framework de interface do Python.
Pré-requisitos
- Um projeto do Google Cloud com faturamento e a API Vertex AI ativada. Saiba mais sobre como configurar um projeto e um ambiente de desenvolvimento.
O que você vai aprender
- Como usar o SDK do Google Gen AI para Python para interagir com o Imagen 3
- Como gerar imagens com base em comandos de texto
- Como criar e executar um app Mesop no Cloud Shell
O que é necessário
- compreensão básica do Python
- Experimentar a execução de comandos em um terminal do Cloud Shell
- Um computador com acesso ao Cloud Shell
2. Configurar o ambiente e instalar dependências
- Abra o editor do Cloud Shell.
- Clique no botão "Abrir terminal" no canto superior direito.
- Crie uma nova pasta digitando o seguinte comando no terminal:
mkdir my-imagen-app
- Altere os diretórios para a nova pasta:
cd my-imagen-app
- Crie um ambiente virtual no Python 3:
python3 -m venv myenv
- Ative o ambiente virtual:
source myenv/bin/activate
- Instale o Mesop:
pip3 install mesop
- Instale o SDK da IA generativa do Google para Python:
pip install google-genai
- Crie um arquivo Python:
touch main.py
3. Configuração do app
Todo o código necessário para executar o app Mesop vai existir em main.py. Em cada uma das próximas etapas, copie e cole sequencialmente neste arquivo no editor do Cloud Shell.
Importar bibliotecas
import base64
import mesop as me
from google import genai
from google.genai import types
Definir informações do projeto do Google Cloud e criar um cliente
- Defina o ID do projeto:
PROJECT_ID = "[your-project-id]"
Substitua [your-project-id] pelo nome do seu projeto do Google Cloud ao copiar esta linha de código.
- Criar cliente:
client = genai.Client(vertexai=True, project=PROJECT_ID, location="us-central1")
Carregar o modelo de geração de imagens
imagen_model = "imagen-3.0-generate-002"
Gerenciamento do estado
A definição do gerenciamento de estado permite armazenar informações durante toda a jornada do usuário.
@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: a entrada fornecida pelo usuário que será usada para gerar imagens.enhanced_prompt: o modeloimagen-3.0-generate-002oferece a opção de melhorar o comando fornecido. Um comando novo e detalhado será criado com base no original para ajudar a gerar imagens de maior qualidade e será retornado nesta variável.img_data: o local do Cloud Storage ou os bytes de uma imagem gerada com o Imagen 3.
4. Definir funções auxiliares
Carregar função
Esse código será executado quando o aplicativo for carregado. Ele define o modo do app como cores do sistema.
def load(e: me.LoadEvent):
me.set_theme_mode("system")
Função de desfoque
Essa função salva a entrada do usuário na variável de estado.
def on_blur(e: me.InputBlurEvent):
state = me.state(State)
state.input = e.value
5. Gerar imagem com o Imagen
Essa função é invocada quando um usuário clica em um botão para enviar um comando de texto para geração de imagem.
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}"
É possível configurar as configurações em 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
Observação:a única opção que funciona sem uma lista de permissões adicional é DONT_ALLOW.
6. Estruturar o layout do 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"),
)
Esse código cria um aplicativo de página única que inclui os seguintes componentes:
- Título
- Área de texto para inserir um comando de imagem
- Botão de envio que chama a função
generate_image - Uma imagem gerada pelo Imagen
- A solicitação aprimorada retornada com a imagem
7. Executar o aplicativo no Cloud Shell
- Depois de copiar todos os snippets de código para
main.py, você pode executar o aplicativo Mesop no terminal do Cloud Shell.mesop main.py - Agora, clique no botão "Visualização da Web" no canto superior direito e em "Alterar porta". Digite 32123 na caixa "Número da porta" e clique em "Alterar e visualizar". Uma nova janela será aberta para mostrar o app carregado. Ela vai ficar assim:
8. Teste Imagen 3
Aqui você pode testar o Imagen com seus próprios comandos de texto. É possível gerar imagens em vários estilos, de fotorrealismo a animação e diferentes estilos artísticos. Você também pode especificar ângulos de câmera, lentes e muito mais. O comando de texto original também será reescrito usando um recurso baseado em LLM que tem como objetivo produzir imagens de maior qualidade que reflitam melhor a intenção do comando original.
Observação:a geração de imagens de pessoas requer acesso adicional. Enquanto isso, você vai receber um erro se a solicitação incluir a geração de rostos ou pessoas.
Confira alguns exemplos de comandos:
- Um boné bege com "good vibes" escrito em letras brancas com pontos e contornos em verde neon.
- Uma loja de doces extravagante.
- Um cartão postal de Las Vegas com o nome da cidade escrito e um selo no canto direito.
- Um filhote de cachorro e um gatinho brincando com uma bola de lã.
9. Limpeza
Parar o aplicativo
Volte para o terminal em que você iniciou o aplicativo e saia com Ctrl C.
Desativar o ambiente virtual
No mesmo terminal, digite o seguinte comando:
deactivate
10. Conclusão
Parabéns! Você concluiu este codelab criando um aplicativo com o Imagen e gerando algumas imagens.
Pesquisa
Responda a esta pesquisa para nos contar o que achou deste codelab.