Questa pagina è stata tradotta dall'API Cloud Translation.

Eseguire il deployment di Imagen in Cloud Run

1. Informazioni su questo codelab

Ultimo aggiornamento: 11/10/2024

Scritto da: Laurie White

Generazione di immagini

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

Che tu sia interessato alla generazione di immagini per motivi professionali o ricreativi (o per entrambi), esistono alcune difficoltà tra l'utilizzo di un programma di generazione di immagini e il suo dispiegamento in un'applicazione web. Questo lab ti aiuterà a superare queste sfide.

Cosa creerai

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

Cosa imparerai a fare

In questo lab imparerai a:

Come utilizzare Google Imagen per creare immagini da prompt di testo in ambienti di notebook
Le difficoltà con lo spostamento del codice di Imagen da un notebook a un'app web
Come eseguire il deployment di un'applicazione Cloud Run che utilizza Imagen per generare immagini
Come 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 scaricarlo dal codelab abbastanza breve disponibile qui.
Familiarità con la modifica dei file in Cloud Shell o nell'editor di Cloud Shell. Puoi scoprire di più su Cloud Shell e Cloud Shell Editor in questo Codelab.
Un progetto Google Cloud con la fatturazione abilitata. Questa guida ti mostra come creare un progetto. Sono disponibili numerosi prodotti con livelli senza costi e prove senza costi.

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

2. Abilita API

Seleziona un progetto da utilizzare per questo Codelab. Ti consigliamo di creare un nuovo progetto per semplificare la rimozione di tutto il lavoro al termine.

Prima di poter iniziare a utilizzare Imagen, devi attivare 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 dimestichezza con Imagen, puoi saltare questa sezione.

Prima di provare a creare un'app web che utilizzi Imagen, è utile capire cosa può fare Imagen. Fortunatamente, esistono diversi notebook 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 notebook nel server di notebook di Google.
Seleziona "File -> Salva una copia in Drive" o fai clic su "Copia su Drive" nella parte superiore della pagina per creare una copia di questo taccuino.
Chiudi la copia originale (per evitare di lavorare con quella sbagliata).
Dovrai connetterti a un runtime facendo clic sul pulsante Connetti in alto a destra.
Inizia a esaminare ciascuna cella del blocco note.
Per eseguire una cella, puoi fare clic sui simboli [] o sulla freccia a sinistra della cella oppure utilizzare l'opzione Esegui selezione dal menu Runtime (o dalla relativa scorciatoia):
Quando riavvii il runtime corrente, riceverai un messaggio che ti informa che il sistema ha avuto un arresto anomalo. non farti prendere dal panico. È normale.
Dovrai autenticare il tuo ambiente di notebook.
Puoi inserire l'ID progetto (non il nome) e la posizione (us-central1 funziona se non hai impostato una posizione) nelle caselle a destra del codice e lasciare che sia Colab a inserirli nel codice per te.
Quando arrivi a "Genera un'immagine", avrai la possibilità 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 secondo momento.

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

Per creare la nostra app utilizzeremo Python con il framework Flask su Cloud Run.

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 ricevere una richiesta e la seconda per visualizzare l'immagine e consentire all'utente di inserire un'altra richiesta.

Per prima cosa, crea il framework del progetto.

Creare la struttura del file

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

Accedi a Cloud Shell selezionando l'icona del prompt in alto a destra nella schermata.

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

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

Creare i modelli

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

Utilizza l'editor di Cloud Shell o l'editor di Linux che preferisci per creare due modelli. Dalla cartella imageapp/templates, crea la pagina iniziale che verrà visualizzata dall'utente, 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 mostrerà 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. Avvio del codice

Devi creare il file requirements.txt per assicurarti che tutte le librerie necessarie per il 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.

Utilizzando l'editor di Cloud Shell o l'editor di Linux che preferisci, crea il file main.py nella cartella imageapp. Iniziamo 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à, è quasi l'intera app. In display_image ci sono tre commenti che devono essere completati con il codice Python, ma è tutto.

Iniziamo a compilare le parti mancanti. Flask semplifica il recupero della richiesta. 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 subito l'app, 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 in locale 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.

Al momento, il programma mostra 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. Creazione dell'immagine

Google Cloud dispone di un'API Python per l'IA generativa su Vertex AI. Per utilizzarlo, dobbiamo aggiungere una riga che lo importi 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, a partire da un prompt. Aggiungi il codice a main.py per il secondo passaggio, creando l'immagine e salvandola in response:

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

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

Ora dobbiamo visualizzare l'immagine in una pagina WWW. GeneratedImage ha un metodo per show l'immagine, ma funziona solo in un ambiente notebook. Esiste però un metodo per salvare l'immagine. Salveremo l'immagine e invieremo l'URL dell'immagine salvata quando eseguiremo il rendering del modello.

È un po' complicato e ci sono molti modi per farlo. Vediamo uno degli approcci più semplici, passo passo. Se preferisci, di seguito trovi anche un'immagine dei passaggi.

Per prima cosa dobbiamo salvare l'immagine. Ma come si chiamerà? L'utilizzo di un nome statico può comportare problemi, poiché il programma può essere utilizzato da molte persone contemporaneamente. Sebbene sia possibile creare nomi di immagini distinti per ogni utente (con qualcosa come UUID), un modo più semplice è utilizzare la libreria tempfile di Python, che crea un file temporaneo con un nome univoco. Il codice seguente crea un file temporaneo, ne recupera il nome e scrive la risposta del passaggio di generazione dell'immagine 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 è utilizzare un URL dati.

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

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

Per ottenere la codifica base64 dell'immagine, dobbiamo aprire il file salvato da tempfile e leggerlo in una variabile. Sì, sarà una stringa di grandi dimensioni, ma non dovrebbe esserci alcun problema con i browser e i server moderni. Poi utilizzeremo la libreria base64 per codificarlo 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 essere nella cartella con main.py ed esegui il comando:

python main.py

Puoi quindi visualizzarne l'anteprima utilizzando l'opzione Anteprima sulla porta 8080 in alto a destra nella schermata.

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, il problema è causato da un prompt che viola le pratiche di IA responsabile di Google . Anche un prompt semplice come "gattini che giocano con palline colorate" può causare questo problema. (Ma non temere, puoi trovare immagini di "gattini che giocano con giocattoli colorati").

Per gestire questo errore, aggiungeremo del codice per intercettare l'eccezione sollevata quando tentiamo di generare l'immagine. Se è presente, verrà visualizzato di nuovo il modello home.html, con un messaggio.

Innanzitutto, aggiungi un div nel modello home.html dopo il primo modulo che verrà visualizzato in caso di 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>

Aggiungi poi del codice in main.py per rilevare una possibile eccezione quando chiami il codice generate_images in display_image. In caso di eccezione, il codice mostrerà il 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 IA responsabile di Imagen. Esistono una serie di funzionalità che proteggono la generazione di persone e bambini e filtri generali sulle immagini. Per saperne di più, fai clic 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 la tua richiesta:

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. Per evitare addebiti, puoi eliminare il repository o il progetto Cloud. L'eliminazione del progetto Cloud interrompe la fatturazione per tutte le risorse utilizzate al suo interno.

Per eliminare il repository delle 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 si tratti del progetto che vuoi eliminare:

echo $PROJECT_ID

Elimina il progetto:

gcloud projects delete $PROJECT_ID

10. Complimenti

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

Passaggi successivi

Dai un'occhiata ad alcuni di questi codelab…