Crea un'app di generazione di immagini con Imagen e Mesop in Cloud Shell

1. Introduzione

Immagina di trasformare una semplice descrizione testuale in un'immagine vivace e dettagliata in pochi secondi. Questo è il potere dei contenuti multimediali generativi, un campo in rapida evoluzione che sta rimodellando il modo in cui crei e interagisci con i contenuti visivi. Modelli come Imagen 3 di Google su Vertex AI offrono agli sviluppatori di applicazioni funzionalità di AI generativa all'avanguardia.

Imagen 3 è il modello di conversione da testo a immagine di Google di qualità più elevata finora. È in grado di creare immagini con dettagli sorprendenti. In questo modo, gli sviluppatori hanno un maggiore controllo quando creano prodotti AI di nuova generazione che trasformano la loro immaginazione in asset visivi di alta qualità. Scopri di più su Imagen su Vertex AI.

Questo codelab ti guiderà nell'utilizzo della potenza di Imagen utilizzando l'SDK Google Gen AI. Non solo esplorerai come generare immagini straordinarie da prompt di testo, ma integrerai anche questa funzionalità in un'applicazione web utilizzando Mesop, un framework UI Python.

Prerequisiti

Un progetto Google Cloud con la fatturazione e l'API Vertex AI abilitate. Scopri di più sulla configurazione di un progetto e di un ambiente di sviluppo.

Obiettivi didattici

Come utilizzare l'SDK Google Gen AI per Python per interagire con Imagen 3
Come generare immagini da prompt di testo
Come creare un'app Mesop ed eseguirla da Cloud Shell

Che cosa ti serve

Conoscenza di base di Python
Prova a eseguire comandi in un terminale Cloud Shell
Un computer con accesso a Cloud Shell

2. Configura l'ambiente e installa le dipendenze

Apri l'editor di Cloud Shell
Fai clic sul pulsante Apri terminale nell'angolo in alto a destra.
Crea una nuova cartella inserendo il seguente comando nel terminale:

mkdir my-imagen-app

Passa alla nuova cartella:

cd my-imagen-app

Crea un ambiente virtuale in Python 3:

python3 -m venv myenv

Attiva l'ambiente virtuale:

source myenv/bin/activate

Installa Mesop:

pip3 install mesop

Installa l'SDK Google Gen AI per Python:

pip install google-genai

Crea un file Python:

touch main.py

3. Configurazione app

Tutto il codice necessario per eseguire l'app Mesop si troverà in main.py. In ognuno dei passaggi successivi, copia e incolla in sequenza in questo file nell'editor di Cloud Shell.

Importa le librerie

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

Imposta le informazioni del progetto cloud Google e crea il client

Imposta l'ID progetto:

PROJECT_ID = "[your-project-id]"

Sostituisci [your-project-id] con il nome del tuo progetto Google Cloud quando copi questa riga di codice.

Crea client:

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

Caricare il modello di generazione di immagini

imagen_model = "imagen-3.0-generate-002"

Gestione dello stato

La definizione della gestione dello stato consente di memorizzare le informazioni durante il percorso dell'utente.

@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: L'utente ha fornito un input che verrà utilizzato per la generazione di immagini.
enhanced_prompt: il modello imagen-3.0-generate-002 offre la possibilità di migliorare il prompt fornito. A partire dal prompt originale, verrà creato un nuovo prompt dettagliato per generare immagini di qualità superiore, che verrà restituito in questa variabile.
img_data: Il percorso di Cloud Storage o i byte dell'immagine di un'immagine generata con Imagen 3.

4. Definisci funzioni helper

Funzione di caricamento

Questo codice verrà eseguito al caricamento dell'applicazione. Imposta la modalità dell'app sui colori di sistema.

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

Funzione Sfoca

Questa funzione salva l'input dell'utente nella variabile di stato.

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

5. Generare un'immagine con Imagen

Questa funzione viene richiamata quando un utente fa clic su un pulsante per inviare un prompt di testo per la generazione di immagini.

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}"

Puoi configurare le impostazioni che si trovano in 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:l'unica opzione che funziona senza ulteriori autorizzazioni è DONT_ALLOW.

6. Strutturare il layout dell'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"),
            )

Questo codice crea un'applicazione a pagina singola che include i seguenti componenti:

Titolo
Area di testo per inserire un prompt di immagine
Pulsante Invia che chiama la funzione generate_image
Un'immagine generata con Imagen
Il prompt migliorato restituito con l'immagine

7. Esegui l'applicazione in Cloud Shell

Dopo aver copiato tutti gli snippet di codice in main.py, puoi eseguire l'applicazione Mesop dal terminale Cloud Shell.
```
mesop main.py
```
Ora, fai clic sul pulsante Anteprima web nell'angolo in alto a destra e poi su Cambia porta. Digita 32123 nella casella Numero di porta e poi fai clic su Cambia e visualizza anteprima. Dovrebbe aprirsi una nuova finestra in cui puoi visualizzare l'app caricata. Dovrebbe avere un aspetto simile a questo:

8. Test Imagen 3

Qui puoi provare Imagen con i tuoi prompt di testo. Puoi generare immagini in una vasta gamma di stili, dal fotorealismo all'animazione, fino a diversi stili artistici. Puoi anche specificare angolazioni, obiettivi e altro ancora. Anche il prompt di testo originale verrà riscritto tramite una funzionalità basata su LLM, pensata per produrre immagini di qualità superiore che riflettano meglio l'intent del prompt originale.

Nota:la generazione di immagini di persone richiede un accesso aggiuntivo. Nel frattempo, riceverai un errore se il prompt include la generazione di persone o volti.

Ecco alcuni prompt di esempio che puoi provare:

Un cappellino da baseball beige con la scritta "good vibes" in alto in lettere bianche cucite e contornate in verde neon.
Un negozio di dolciumi stravagante.
Una cartolina illustrata di Las Vegas con il nome della città scritto per esteso e un francobollo nell'angolo a destra.
Un cucciolo e un gattino che giocano con un gomitolo.

9. Esegui la pulizia

Interrompere l'applicazione

Torna al terminale in cui hai avviato l'applicazione e chiudila con Ctrl+C.

Disattiva l'ambiente virtuale

Nello stesso terminale, digita questo comando:

deactivate

10. Conclusione

Complimenti! Hai completato questo codelab creando un'applicazione con Imagen e generando alcune immagini.

Sondaggio

Facci sapere cosa ne pensi di questo codelab compilando questo breve sondaggio.