Criar um app de geração de imagens com o Imagen e o Mesop no Cloud Shell

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 maneira 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 de maior qualidade 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.

Este codelab vai orientar você no uso do poder do Imagen usando o SDK de IA Generativa do Google. Você não apenas vai aprender a gerar imagens incríveis com comandos de texto, mas também a integrar essa capacidade a um aplicativo da Web usando o Mesop, uma framework de interface do usuário em Python.

Pré-requisitos

Um projeto na nuvem do Google Cloud com o faturamento e a API Vertex AI ativados. Saiba mais sobre como configurar um projeto e um ambiente de desenvolvimento.

O que você vai aprender

Como usar o SDK de IA Generativa do Google para Python para interagir com o Imagen 3
Como gerar imagens com comandos de texto
Como criar um app Mesop e executá-lo no Cloud Shell

O que é necessário

compreensão básica do Python
Experiência na 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 inserindo o seguinte comando no terminal:

mkdir my-imagen-app

Mude 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 de 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 estará em main.py. Em cada uma das próximas etapas, copie e cole sequencialmente nesse 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 na nuvem do Google Cloud e criar o cliente

Defina o ID do projeto:

PROJECT_ID = "[your-project-id]"

Substitua [your-project-id] pelo nome do projeto na nuvem do Google Cloud ao copiar essa linha de código.

Crie o 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 a geração de imagens.
enhanced_prompt: o modelo imagen-3.0-generate-002 oferece a opção de melhorar o comando fornecido. Um novo comando detalhado será criado com base no original para ajudar a gerar imagens de maior qualidade e será retornado nessa variável.
img_data: o local do Cloud Storage ou os bytes de imagem de uma imagem gerada com o Imagen 3.

4. Definir funções auxiliares

Função de carregamento

Esse código será executado quando o aplicativo for carregado. Ele define o modo do app para 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 imagens.

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 definições localizadas em 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

Observação:a única opção que funciona sem a 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 "Enviar" que chama a função generate_image
Uma imagem gerada pelo Imagen
O comando aprimorado retornado 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 clique em "Alterar porta". Digite 32123 na caixa "Número da porta" e clique em "Alterar e visualizar". Uma nova janela será aberta para que você possa visualizar o app carregado. Ele deve ser parecido com este:

8. Testar o Imagen 3

É aqui que você pode testar o Imagen com seus próprios comandos de texto. É possível gerar imagens em vários estilos, do fotorrealismo à animação, passando por diferentes estilos artísticos. Você também pode especificar ângulos de câmera, lentes e muito mais. Seu comando de texto original também será reescrito por 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 exige acesso adicional. Enquanto isso, você vai receber um erro se o comando incluir a geração de pessoas ou rostos.

Confira alguns exemplos de comandos que você pode testar:

Um boné de beisebol bege com "good vibes" escrito em letras brancas e borbulhantes costuradas com contorno verde neon.
Uma loja de doces peculiar.
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 um novelo de lã.

9. Revisão dos dados

Parar o aplicativo

Volte ao terminal em que você iniciou o aplicativo e saia com Ctrl C.

Desative 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

Dê sua opinião sobre este codelab preenchendo esta breve pesquisa.