Eseguire il deployment di Imagen in Cloud Run

1. Informazioni su questo codelab

Ultimo aggiornamento: 2024-10-11

Scritto da: Laurie White

Generazione di immagini

Diciamocelo chiaramente: la generazione di immagini da parte di modelli linguistici di grandi dimensioni (LLM) può essere divertente. Naturalmente, esistono molte applicazioni aziendali per la generazione di immagini da un prompt, dalla pubblicità personalizzata alle presentazioni accattivanti. (Il sito web di Google Cloud riporta molti utilizzi specifici di aziende che utilizzano gli agenti creativi.) Tuttavia, vedere i risultati quando chiedi un'immagine di "cani verdi felici in un campo" può essere piuttosto divertente.

Se ti interessa la generazione di immagini per motivi professionali o ricreativi (o entrambi), ci sono alcune sfide tra l'utilizzo di un programma di generazione di immagini e il deployment di uno di questi in un'applicazione web. Questo lab ti aiuterà a superare queste sfide.

Cosa creerai

In questo codelab, creerai un'app che accetterà un prompt di testo e restituirà una pagina web con un'immagine generata utilizzando quel prompt.

Cosa imparerai a fare

In questo lab imparerai a:

Utilizzare Google Imagen per creare immagini da prompt di testo negli ambienti dei blocchi note
Le difficoltà di spostare il codice Imagen da un notebook a un'app web
Eseguire il deployment di un'applicazione Cloud Run che utilizza Imagen per generare immagini
Includere un'immagine di Imagen in HTML

Questo codelab è incentrato su Imagen e sul deployment. Concetti e blocchi di codice non pertinenti sono trattati solo superficialmente e sono forniti solo per operazioni di copia e incolla.

Che cosa ti serve

Una versione recente del browser Chrome.
Alcune nozioni di Cloud Run. Puoi acquisirle con questo codelab piuttosto breve.
Familiarità con la modifica dei file in Cloud Shell o nell'editor di Cloud Shell. Puoi scoprire di più su Cloud Shell e sull'editor di Cloud Shell in questo codelab.
Un progetto Google Cloud con la fatturazione abilitata. Questa guida ti mostrerà come creare un progetto. Sono disponibili numerosi prodotti con livelli senza costi e prove senza costi.

Il codice completo per questo codelab è disponibile all'indirizzo https://github.com/Annie29/imagen-deployment .

2. Abilita API

Seleziona un progetto da utilizzare per questo codelab. Potresti voler creare un nuovo progetto per semplificare la rimozione di tutto il tuo lavoro al termine.

Prima di iniziare a utilizzare Imagen, devi abilitare alcune API.

Vai alla console Google Cloud.
Vai alla dashboard di Vertex AI.
Seleziona "Abilita tutte le API consigliate".

3. Esplorare Google Imagen (facoltativo)

Se hai familiarità con Imagen, puoi saltare questa sezione.

Prima di provare a creare un'app web che utilizza Imagen, è utile vedere cosa può fare Imagen. Fortunatamente, esistono diversi blocchi note che eseguono codice Imagen semplice, quindi iniziamo con uno di questi.

Vai al notebook all'indirizzo https://github.com/GoogleCloudPlatform/generative-ai/blob/main/vision/getting-started/image_generation.ipynb .
Seleziona Apri in Colab per aprire il blocco note nel server dei blocchi note di Google.
Seleziona "File -> Salva una copia in Drive" o fai clic su "Copia in Drive" nella parte superiore della pagina per creare una tua copia di questo notebook.
Chiudi la copia originale (solo per evitare di lavorare in quella sbagliata).
Dovrai connetterti a un runtime facendo clic sul pulsante Connetti in alto a destra.
Inizia a lavorare su ogni cella del blocco note.
Per eseguire una cella, puoi fare clic su [] o sulla freccia a sinistra della cella oppure utilizzare l'opzione Esegui selezione dal menu Runtime (o la relativa scorciatoia):
Quando riavvii il runtime corrente, riceverai un messaggio che indica che il sistema è andato in crash. Non farti prendere dal panico. È normale.
Dovrai autenticare l'ambiente del blocco note.
Puoi inserire l'ID progetto (non il nome) e la località (us-central1 funziona se non hai impostato una località) nelle caselle a destra del codice e Colab li inserirà nel codice per te.
Quando arrivi a "Genera un'immagine", avrai l'opportunità di vedere cosa può fare Imagen. Non esitare a modificare il prompt ed eseguire di nuovo la cella per vedere la varietà di immagini che puoi ottenere.
A questo punto dovresti avere una buona idea di come Imagen può creare immagini da un notebook. Non esitare a completare questo notebook per scoprire di più sui parametri delle immagini ora o in un momento opportuno.

4. Inizia a creare un'applicazione web per mostrare un'immagine

Utilizzeremo Python con il framework Flask su Cloud Run per creare la nostra app.

Le app Python Flask sono configurate in una cartella come segue:

app-folder
    templates
        template.html
        (etc.)
        anothertemplate.html
    main.py
    requirements.txt

I modelli sono file contenenti HTML, in genere con segnaposto denominati in cui il programma inserirà il testo generato. main.py è l'app del server web stessa e requirements.txt è un elenco di tutte le librerie non standard utilizzate da main.py.

L'applicazione avrà due pagine: la prima per ottenere un prompt e la seconda per visualizzare l'immagine e consentire all'utente di inserire un altro prompt.

Innanzitutto, crea il framework del progetto.

Creare la struttura dei file

Questo codelab presuppone che il progetto si trovi nella cartella imageapp. Se utilizzi un nome diverso, assicurati di aggiornare i comandi in modo appropriato.

Accedi a Cloud Shell selezionando l'icona del prompt in alto a destra dello schermo.

Puoi avere più spazio per lavorare se sposti la shell in una nuova scheda utilizzando la freccia nella parte superiore della finestra della shell:

Dalla directory home in Cloud Shell, crea la cartella imageapp, passa a questa cartella e crea le cartelle templates. Puoi farlo dalla riga di comando o dall'editor di Cloud Shell.

Crea i modelli

L'applicazione avrà due pagine: la prima (che chiameremo home.html) per ottenere un prompt e la seconda (che chiameremo display.html) per visualizzare l'immagine e consentire all'utente di inserire un altro prompt.

Utilizza l'editor di Cloud Shell o l'editor Linux di tua scelta per creare due modelli. Dalla cartella imageapp/templates, crea la pagina iniziale che l'utente vedrà, home.html. Utilizza la variabile prompt per restituire la descrizione inserita dall'utente.

templates/home.html

<!DOCTYPE html>
<html>
   <head>
       <title>Let's draw a picture</title>
   </head>
   <body>
       <h1>Let's draw a picture</h1>
       <form  action="/" method="post" >
           <input type="text" id="prompt" name="prompt">
           <input type="submit" value="Send">
       </form>
   </body>
</html>

Poi crea display.html, che visualizzerà l'immagine. Tieni presente che la posizione dell'immagine sarà in image_url.

templates/display.html

<!DOCTYPE html>
<html>
   <head>
       <title>Let's draw a picture</title>
   </head>
   <body>
       <h1>Let's draw a picture</h1>

       <div>
           <form  action="/" method="post" >
               <input type="text" id="prompt" name="prompt">
               <input type="submit" value="Send">
           </form>

           <p></p>
       </div>

       <div id="picture">
           <img id="pict" name="pict" alt="The created image" src="{{image_uri}}" style="width:100%;">
       </div>

   </body>
</html>

5. Avviare il codice

Dovrai creare il file requirements.txt per assicurarti che tutte le librerie necessarie al tuo programma siano disponibili. Per il momento, includi solo flask nel file requirements.txt.

Il file main.py contiene il codice che gestirà le richieste web. Dobbiamo gestire solo due richieste: una richiesta GET per la home page e una richiesta POST che invia il modulo che descrive l'immagine che vogliamo generare.

Utilizza l'editor di Cloud Shell o l'editor Linux di tua scelta per creare il file main.py nella cartella imageapp. Inizieremo con lo scheletro riportato di seguito:

main.py

import flask

app = flask.Flask(__name__)

@app.route("/", methods=["GET"])
def home_page():
    return flask.render_template("home.html")

@app.route("/", methods=["POST"])
def display_image():
    # Code to get the prompt (called prompt) from the submitted form
    # Code to generate the image
    # Code to create a URL for the image (called image_url)

    return flask.render_template("display.html", prompt=prompt, image_url=image_url)

# Initialize the web server app when the code locally (Cloud Run handles it in that environment)
if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=8080)

In realtà, questa è quasi l'intera app. Ci sono tre commenti in display_image che devono essere completati con il codice Python.

Iniziamo a compilare le parti mancanti. Flask semplifica il recupero del prompt. Aggiungi una riga dopo il commento come mostrato di seguito:

# Code to get the prompt (called prompt) from the submitted form
prompt = flask.request.form["prompt"]

Se vuoi testare l'app ora, puoi aggiungere una riga prima dell'istruzione return in display_image per assegnare un valore a image_url (un URL valido che rimanda a un'immagine).

Ad esempio: image_url="<your url here>"

Puoi eseguire il programma localmente da Cloud Shell (utilizzando il comando python main.py) e visualizzarne l'anteprima utilizzando l'opzione Anteprima sulla porta 8080 in alto a destra dello schermo.

Allo stato attuale, il programma visualizzerà sempre l'immagine nell'URL che hai fornito. Andiamo avanti e vediamo come ottenere questo valore dall'app. Assicurati di rimuovere la riga che assegna a image_url un valore statico.

6. Creare l'immagine

Google Cloud ha un'API Python per l'AI generativa su Vertex AI. Per utilizzarla, dobbiamo aggiungere una riga per importarla con le altre importazioni nella parte superiore del programma:

from vertexai.vision_models import ImageGenerationModel

e includi vertexai nel file requirements.txt.

La documentazione di ImageGenerationModel mostra come utilizzarlo. Creeremo un modello e poi genereremo un'immagine da questo, dato un prompt. Aggiungi il codice a main.py per il secondo passaggio, creando l'immagine e memorizzandola in response:

# Code to generate the image
model = ImageGenerationModel.from_pretrained("imagegeneration@006")
response = model.generate_images(prompt=prompt)[0]

È possibile creare fino a 4 immagini alla volta, a seconda dei parametri inviati a generate_images, quindi il valore restituito sarà un elenco di GeneratedImage, anche se viene restituita una sola immagine, come in questo caso.

Ora dobbiamo visualizzare l'immagine su una pagina web. GeneratedImage ha un metodo per show l'immagine, ma funziona solo in un ambiente di blocco note. Esiste però un metodo per salvare l'immagine. Salveremo l'immagine e invieremo l'URL dell'immagine salvata quando eseguiamo il rendering del modello.

Questa operazione è un po' complicata e ci sono molti modi per farlo. Esaminiamo passo passo uno degli approcci più semplici. (Se preferisci imparare in modo visivo, di seguito è riportata un'immagine dei passaggi.)

Innanzitutto, dobbiamo salvare l'immagine. Ma come si chiamerà? L'utilizzo di un nome statico può causare problemi, poiché il programma può essere utilizzato da molte persone contemporaneamente. Anche se potremmo creare nomi di immagini separati per ogni utente (con qualcosa di simile a UUID), un modo più semplice è utilizzare la libreria tempfile di Python, che creerà un file temporaneo con un nome univoco. Il codice riportato di seguito creerà un file temporaneo, ne recupererà il nome e scriverà la risposta del passaggio di generazione di immagini nel file temporaneo. Non lo inseriremo ancora nel nostro codice, perché dobbiamo prima ottenere un URL.

with tempfile.NamedTemporaryFile("wb") as f:
    filename = f.name
    response.save(filename, include_generation_parameters=False)
    # process the saved file here, before it goes away

Esistono diversi modi per elaborare il file salvato, ma uno dei più semplici e sicuri è l'utilizzo di un URL dei dati.

Gli URL dei dati consentono di inviare i dati effettivi nell'URL, non solo un percorso. La sintassi per un URL dei dati è:

data:[image/png][;base64],<data>

Per ottenere la codifica base64 dell'immagine, dovremo aprire il file salvato da tempfile e leggerlo in una variabile. Sì, si tratta di una stringa lunga, ma dovrebbe andare bene con i browser e i server moderni. Utilizzeremo quindi la libreria base64 per codificarla in una stringa che possiamo inviare nell'URL dei dati.

Il codice finale per eseguire il terzo passaggio (creazione dell'URL) sarà:

# Code to create a URL for the image (called image_url)
with tempfile.NamedTemporaryFile("wb") as f:
    filename = f.name
    response.save(filename, include_generation_parameters=False)
    # process the saved file here, before it goes away
    with open(filename, "rb") as image_file:
        binary_image = image_file.read()
        base64_image = base64.b64encode(binary_image).decode("utf-8")
        image_url = f"data:image/png;base64,{base64_image}"

Puoi vedere tutti questi passaggi nell'immagine di seguito:

Dovrai importare tempfile e base64 all'inizio del programma.

import tempfile
import base64

Prova a eseguire il programma da Cloud Shell assicurandoti di trovarti nella cartella con main.py ed eseguendo il comando:

python main.py

Puoi visualizzarne l'anteprima utilizzando l'opzione Anteprima sulla porta 8080 in alto a destra dello schermo.

7. Un errore comune

A un certo punto, potresti notare che durante l'esecuzione del programma (durante il test o dopo il deployment) ricevi un messaggio simile al seguente:

Molto probabilmente, questo problema è causato da un prompt che viola le pratiche di AI responsabile di Google . Un prompt semplice come "gattini che giocano con palline colorate" può causare questo problema. (Ma non temere, puoi ottenere immagini di "gattini che giocano con giocattoli colorati").

Per risolvere questo errore, aggiungeremo il codice per intercettare l'eccezione generata quando tentiamo di generare l'immagine. Se ne esiste una, eseguiremo di nuovo il rendering del modello home.html, con un messaggio visualizzato.

Innanzitutto, aggiungiamo un div nel modello home.html dopo il primo modulo che verrà visualizzato se si verifica un errore:

<!DOCTYPE html>
<html>
   <head>
       <title>Let's draw a picture</title>
   </head>
   <body>
       <h1>Let's draw a picture</h1>
       <form  action="/" method="post" >
           <input type="text" id="prompt" name="prompt">
           <input type="submit" value="Send">
       </form>
       {% if mistake %}
       <div id="warning">
       The prompt contains sensitive words that violate
       <a href=\"https://ai.google/responsibility/responsible-ai-practices\">
           Google's Responsible AI practices</a>.
       Try rephrasing the prompt."</div>

       {% endif %}

   </body>
</html>

Poi, aggiungi il codice in main.py per intercettare una possibile eccezione quando chiami il codice generate_images in display_image. Se si verifica un'eccezione, il codice eseguirà il rendering del modello home.html con un messaggio.

# Code to generate the image
   model = ImageGenerationModel.from_pretrained("imagegeneration@006")
   try:
       response = model.generate_images(prompt=prompt)[0]   
   except:
       #  This is probably due to a questionable prompt
       return flask.render_template("home.html", warning=True)

Questa non è l'unica funzionalità di AI responsabile di Imagen. Esistono diverse funzionalità che proteggono la generazione di persone e bambini e filtri generali sulle immagini. Puoi scoprire di più qui.

8. Eseguire il deployment dell'app sul web

Puoi eseguire il deployment dell'app sul web utilizzando il comando dalla cartella imageapp in Cloud Shell. Assicurati di utilizzare l'ID progetto effettivo nel comando.

gcloud run deploy imageapp \
  --source . \
  --region us-central1 \
  --allow-unauthenticated \
  --project your-project-id

Dovresti visualizzare una risposta simile alla seguente, che ti indica dove trovare l'applicazione:

Service [imageapp] revision [imageapp-00001-t48] has been deployed and is serving 100 percent of traffic.
Service URL: https://imageapp-708208532564.us-central1.run.app```

9. Pulizia

Sebbene non siano previsti addebiti per Cloud Run quando il servizio non è in uso, ti potrebbero comunque essere addebitati i costi di archiviazione dell'immagine container in Artifact Registry. Puoi eliminare il repository o il progetto Cloud per evitare addebiti. L'eliminazione del progetto Cloud interrompe la fatturazione per tutte le risorse utilizzate all'interno del progetto.

Per eliminare il repository di immagini container:

gcloud artifacts repositories delete cloud-run-source-deploy \
  --location $REGION

Per eliminare il servizio Cloud Run:

gcloud run services delete imageapp \
  --platform managed \
  --region $REGION

Per eliminare il progetto Google Cloud:

Recupera l'ID progetto corrente:

PROJECT_ID=$(gcloud config get-value core/project)

Assicurati che sia il progetto che vuoi eliminare:

echo $PROJECT_ID

Elimina il progetto:

gcloud projects delete $PROJECT_ID

10. Complimenti

Congratulazioni, hai creato correttamente un'applicazione web che visualizzerà le immagini create da Imagen. Come puoi utilizzarla nella tua applicazione?

Passaggi successivi

Dai un'occhiata ad alcuni di questi codelab...