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

25 minuti rimanenti

Informazioni su questo codelab

Ultimo aggiornamento: apr 4, 2025

Scritto da: Katie Nguyen

1. Introduzione

Immagina di trasformare una semplice descrizione di testo in un'immagine vivace e dettagliata in pochi secondi. Questa è la potenza dei media generativi, un campo in rapida evoluzione che sta cambiando 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 IA 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 durante la creazione di prodotti di IA 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 con l'SDK Google Gen AI. Non solo scoprirai come generare immagini straordinarie da prompt di testo, ma anche come integrare questa funzionalità in un'applicazione web utilizzando Mesop, un framework di interfaccia utente 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
Provare 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

Cambia directory nella 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 sarà presente in main.py. In ogni passaggio successivo, copia e incollalo in sequenza in questo file nell'editor di Cloud Shell.

Importare librerie

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

Imposta le informazioni del progetto Google Cloud 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")

Carica il modello di generazione delle immagini

imagen_model = "imagen-3.0-generate-002"

Gestione dello stato

La definizione della gestione dello stato ti consente di archiviare 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'input fornito dall'utente 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. Verrà creato un nuovo prompt dettagliato a partire da quello originale per contribuire a generare immagini di qualità superiore e verrà restituito in questa variabile.
img_data: la posizione di Cloud Storage o i byte dell'immagine di un'immagine generata con Imagen 3.

4. Definisci le funzioni di supporto

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 di sfocatura

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 invocata 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 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 una lista consentita aggiuntiva è DONT_ALLOW.

6. Struttura 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 creata 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 porta e poi fai clic su Cambia e visualizza anteprima. Dovrebbe aprirsi una nuova finestra in cui puoi visualizzare l'app caricata. Dovrebbe avere il seguente aspetto:

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 della fotocamera. Anche il prompt di testo originale verrà riscritto tramite una funzionalità basata su LLM che ha lo scopo di 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 con sbuffi cucite e bordate in verde neon.
Un negozio di dolciumi stravagante.
Una cartolina di Las Vegas in stile fumetto con il nome della città scritto e un francobollo nell'angolo a destra.
Un cucciolo e un gattino che giocano con un gomitolo di lana.

9. Esegui la pulizia

Interrompi l'applicazione

Torna al terminale in cui hai lanciato l'applicazione e esci con Ctrl C.

Disattiva l'ambiente virtuale

Nello stesso terminale, digita il seguente 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.

Passaggi successivi

Segnala un errore