Imagen in Cloud Run bereitstellen

1. Informationen zu diesem Codelab

Letzte Aktualisierung:11.10.2024

Autor:Laurie White

Bildgenerierung

Seien wir ehrlich: Die Bildgenerierung durch Large Language Models (LLMs) kann Spaß machen. Natürlich gibt es viele geschäftliche Anwendungen für das Generieren von Bildern aus einem Prompt, von personalisierter Werbung bis hin zu attraktiven Präsentationen. Auf der Google Cloud-Website finden Sie viele spezifische Anwendungsfälle von Unternehmen, die Creative Agents verwenden. Dennoch kann es ziemlich amüsant sein, zu sehen, was passiert, wenn Sie ein Bild von „glücklichen grünen Hunden auf einem Feld“ anfordern.

Ob Sie sich aus beruflichen oder privaten Gründen für die Bildgenerierung interessieren (oder beides), es gibt einige Herausforderungen zwischen der Verwendung eines Bildgenerierungsprogramms und der Bereitstellung eines solchen Programms für eine Webanwendung. Dieses Lab hilft Ihnen, diese Herausforderungen zu meistern.

Was Sie erstellen

In diesem Codelab erstellen Sie eine App, die einen Text-Prompt verwendet und eine Webseite mit einem Bild zurückgibt, das mit diesem Prompt generiert wurde.

Lerninhalte

In diesem Lab lernen Sie Folgendes:

Wie Sie mit Google Imagen Bilder aus Text-Prompts in Notebook-Umgebungen erstellen
Die Schwierigkeiten beim Verschieben von Imagen-Code aus einem Notebook in eine Webanwendung
Wie Sie eine Cloud Run-Anwendung bereitstellen, die mit Imagen Bilder generiert
Wie Sie ein Bild aus Imagen in HTML einfügen

In diesem Codelab geht es um Imagen und die Bereitstellung. Auf irrelevante Konzepte wird nicht genauer eingegangen und entsprechende Codeblöcke können Sie einfach kopieren und einfügen.

Voraussetzungen

Eine aktuelle Version des Chrome-Browsers.
Grundlegende Kenntnisse von Cloud Run. Diese können Sie in diesem kurzen Codelab hier erwerben.
Vertrautheit mit dem Bearbeiten von Dateien in der Cloud Shell oder im Cloud Shell-Editor. Weitere Informationen zur Cloud Shell und zum Cloud Shell-Editor finden Sie in diesem Codelab.
Google Cloud-Projekt mit aktivierter Abrechnungsfunktion In dieser Anleitung erfahren Sie, wie Sie ein Projekt erstellen. Es gibt zahlreiche Produkte mit kostenlosen Stufen und kostenlosen Testversionen verfügbar.

Der vollständige Code für dieses Codelab ist unter https://github.com/Annie29/imagen-deployment verfügbar .

2. APIs aktivieren

Wählen Sie ein Projekt aus, das Sie für dieses Codelab verwenden möchten. Möglicherweise möchten Sie ein neues Projekt erstellen, um das Entfernen Ihrer Arbeit zu erleichtern, wenn Sie fertig sind.

Bevor Sie mit Imagen beginnen können, müssen Sie einige APIs aktivieren.

Rufen Sie die Google Cloud Console auf.
Rufen Sie das Vertex AI-Dashboard auf.
Wählen Sie „Alle empfohlenen APIs aktivieren“ aus.

3. Google Imagen erkunden (optional)

Wenn Sie mit Imagen vertraut sind, können Sie diesen Abschnitt überspringen.

Bevor Sie versuchen, eine Webanwendung zu erstellen, die Imagen verwendet, ist es hilfreich zu sehen, was Imagen kann. Glücklicherweise gibt es eine Reihe von Notebooks, in denen einfacher Imagen-Code ausgeführt wird. Beginnen wir mit einem davon.

Rufen Sie das Notebook unter https://github.com/GoogleCloudPlatform/generative-ai/blob/main/vision/getting-started/image_generation.ipynb auf .
Wählen Sie „In Colab öffnen“ aus, um das Notebook auf dem Notebook-Server von Google zu öffnen.
Wählen Sie entweder „Datei“ > „Kopie in Drive speichern“ aus oder klicken Sie oben auf der Seite auf „In Drive kopieren“, um eine eigene Kopie dieses Notebooks zu erstellen.
Schließen Sie die Originalkopie, um zu vermeiden, dass Sie in der falschen Kopie arbeiten.
Sie müssen eine Verbindung zu einer Laufzeit herstellen. Klicken Sie dazu rechts oben auf die Schaltfläche „Verbinden“.
Arbeiten Sie jede Zelle im Notebook durch.
Um eine Zelle auszuführen, können Sie auf das [] oder den Pfeil links neben der Zelle klicken oder die Option „Auswahl ausführen“ im Menü „Laufzeit“ (oder die entsprechende Tastenkombination) verwenden:
Wenn Sie die aktuelle Laufzeit neu starten, wird eine Meldung angezeigt, dass Ihr System abgestürzt ist. Keine Panik. Das ist normal.
Sie müssen Ihre Notebook-Umgebung authentifizieren.
Sie können Ihre Projekt-ID (nicht den Namen) und den Standort (wenn Sie keinen Standort festgelegt haben, funktioniert „us-central1“) in die Felder rechts neben dem Code eingeben und Colab diese in den Code einfügen lassen.
Wenn Sie zu „Bild generieren“ gelangen, können Sie sehen, was Imagen kann. Sie können den Prompt ändern und die Zelle noch einmal ausführen, um die Vielfalt der Bilder zu sehen, die Sie erhalten können.
An diesem Punkt sollten Sie eine gute Vorstellung davon haben, wie Imagen Bilder aus einem Notebook erstellen kann. Sie können dieses Notebook jetzt oder zu einem späteren Zeitpunkt fertigstellen, um mehr über Bildparameter zu erfahren.

4. Webanwendung zum Anzeigen eines Bildes erstellen

Wir verwenden Python mit dem Flask-Framework in Cloud Run, um unsere App zu erstellen.

Python Flask-Apps werden in einem Ordner wie folgt eingerichtet:

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

Vorlagen sind Dateien mit HTML, in der Regel mit benannten Platzhaltern, in die das Programm generierten Text einfügt. main.py ist die Webserver-App selbst und requirements.txt ist eine Liste aller nicht standardmäßigen Bibliotheken, die von main.py verwendet werden.

Die Anwendung hat zwei Seiten: Auf der ersten Seite wird ein Prompt angefordert und auf der zweiten Seite wird das Bild angezeigt. Der Nutzer kann einen weiteren Prompt eingeben.

Erstellen Sie zuerst das Projektframework.

Dateistruktur erstellen

In diesem Codelab wird davon ausgegangen, dass sich Ihr Projekt im Ordner imageapp befindet. Wenn Sie einen anderen Namen verwenden, müssen Sie die Befehle entsprechend aktualisieren.

Rufen Sie die Cloud Shell auf, indem Sie rechts oben auf dem Bildschirm das Prompt-Symbol auswählen.

Sie können mehr Platz zum Arbeiten schaffen, indem Sie die Shell in einen neuen Tab verschieben. Verwenden Sie dazu den Pfeil oben im Shell-Fenster:

Erstellen Sie im Cloud Shell-Homeverzeichnis den Ordner imageapp, wechseln Sie zu diesem Ordner und erstellen Sie die Ordner templates. Sie können dies entweder über die Befehlszeile oder den Cloud Shell-Editor tun.

Vorlagen erstellen

Die Anwendung hat zwei Seiten: Auf der ersten Seite (die wir home.html nennen) wird ein Prompt angefordert und auf der zweiten Seite (die wir display.html nennen) wird das Bild angezeigt. Der Nutzer kann einen weiteren Prompt eingeben.

Erstellen Sie mit dem Cloud Shell-Editor oder einem Linux-Editor Ihrer Wahl zwei Vorlagen. Erstellen Sie im Ordner imageapp/templates die erste Seite, die der Nutzer sieht, home.html. Dabei wird die Variable prompt verwendet, um die vom Nutzer eingegebene Beschreibung zurückzugeben.

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>

Erstellen Sie dann display.html, auf der das Bild angezeigt wird. Die Position des Bildes befindet sich 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. Code starten

Sie müssen die Datei requirements.txt erstellen, damit alle Bibliotheken verfügbar sind, die Ihr Programm benötigt. Fügen Sie vorerst nur flask in die Datei requirements.txt ein.

Die Datei main.py enthält den Code, der Webanfragen verarbeitet. Wir müssen nur zwei Anfragen verarbeiten: eine GET -Anfrage für die Startseite und eine POST -Anfrage, mit der das Formular gesendet wird, in dem das Bild beschrieben wird, das generiert werden soll.

Erstellen Sie mit dem Cloud Shell-Editor oder einem Linux-Editor Ihrer Wahl die Datei main.py im Ordner imageapp. Wir beginnen mit dem folgenden Gerüst:

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)

Das ist eigentlich schon fast die gesamte App. In display_image gibt es drei Kommentare, die mit Python-Code gefüllt werden müssen. Das war's.

Füllen wir diese fehlenden Teile aus. Mit Flask lässt sich der Prompt ganz einfach abrufen. Fügen Sie nach dem Kommentar eine Zeile hinzu, wie unten gezeigt:

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

Wenn Sie die App jetzt testen möchten, können Sie vor der Anweisung return in display_image eine Zeile hinzufügen, um image_url einen Wert zuzuweisen (eine gültige URL, die auf ein Bild verweist).

Beispiel: image_url="<your url here>"

Sie können das Programm lokal über die Cloud Shell ausführen (mit dem Befehl python main.py) und es rechts oben auf dem Bildschirm über „Vorschau auf Port 8080“ in der Vorschau ansehen.

So wie das Programm jetzt ist, sehen Sie immer das Bild in der von Ihnen angegebenen URL. Sehen wir uns an, wie Sie diesen Wert aus der App abrufen können. Entfernen Sie die Zeile, die image_url einen statischen Wert zuweist.

6. Image erstellen

Google Cloud bietet eine Python API für generative KI in Vertex AI. Um sie zu verwenden, müssen wir eine Zeile hinzufügen, mit der sie mit den anderen Importen oben in unserem Programm importiert wird:

from vertexai.vision_models import ImageGenerationModel

und vertexai in die Datei requirements.txt einfügen.

In der Dokumentation zu ImageGenerationModel wird die Verwendung beschrieben. Wir erstellen ein Modell und generieren dann anhand eines Prompts ein Bild daraus. Fügen Sie main.py Code für den zweiten Schritt hinzu, um das Bild zu erstellen und in response zu speichern:

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

Je nach den an generate_images gesendeten Parametern können bis zu vier Bilder gleichzeitig erstellt werden. Der zurückgegebene Wert ist also eine Liste von GeneratedImage, auch wenn nur ein Bild zurückgegeben wird, wie in diesem Fall.

Jetzt müssen wir das Bild auf einer Webseite anzeigen. GeneratedImage hat zwar eine Methode zum show des Bildes, diese funktioniert aber nur in einer Notebook-Umgebung. Es gibt jedoch eine Methode zum Speichern des Bildes. Wir speichern das Bild und senden die URL des gespeicherten Bildes, wenn wir die Vorlage rendern.

Das ist etwas kompliziert und es gibt viele Möglichkeiten, dies zu tun. Sehen wir uns einen der einfacheren Ansätze Schritt für Schritt an. Wenn Sie ein visueller Lerntyp sind, finden Sie unten eine Abbildung der Schritte.

Zuerst müssen wir das Bild speichern. Aber wie soll es heißen? Die Verwendung eines statischen Namens kann zu Problemen führen, da das Programm von vielen Personen gleichzeitig verwendet werden kann. Wir könnten zwar für jeden Nutzer separate Bildnamen erstellen (z. B. mit UUID), aber einfacher ist es, die tempfile-Bibliothek von Python zu verwenden, die eine temporäre Datei mit einem eindeutigen Namen erstellt. Mit dem folgenden Code wird eine temporäre Datei erstellt, ihr Name abgerufen und die Antwort des Bildgenerierungsschritts in die temporäre Datei geschrieben. Wir fügen sie noch nicht in unseren Code ein, da wir zuerst eine URL benötigen.

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

Es gibt verschiedene Möglichkeiten, die gespeicherte Datei zu verarbeiten. Eine der einfachsten und sichersten ist die Verwendung einer Daten-URL.

Mit Daten-URLs können die tatsächlichen Daten in der URL gesendet werden, nicht nur ein Pfad dazu. Die Syntax für eine Daten-URL lautet:

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

Um die Base64-Codierung des Bildes zu erhalten, müssen wir die Datei öffnen, die von tempfile gespeichert wurde, und sie in eine Variable einlesen. Ja, das wird ein langer String, aber das sollte für moderne Browser und Server kein Problem sein. Anschließend verwenden wir die base64-Bibliothek, um sie in einen String zu codieren, den wir in der Daten-URL senden können.

Unser endgültiger Code für den dritten Schritt (Erstellen der URL) lautet:

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

Alle diese Schritte sind in der folgenden Abbildung zu sehen:

Sie müssen `tempfile` und `base64` am Anfang Ihres Programms importieren.

import tempfile
import base64

Führen Sie das Programm über die Cloud Shell aus. Achten Sie darauf, dass Sie sich im Ordner mit main.py befinden, und führen Sie den folgenden Befehl aus:

python main.py

Sie können es dann rechts oben auf dem Bildschirm über „Vorschau auf Port 8080“ in der Vorschau ansehen.

7. Häufige Fehler

Möglicherweise stellen Sie irgendwann fest, dass Sie beim Ausführen des Programms (entweder beim Testen oder nach der Bereitstellung) eine Meldung wie die folgende erhalten:

Das liegt höchstwahrscheinlich an einem Prompt, der gegen die Responsible AI-Praktiken von Google verstößt . Ein so einfacher Prompt wie „Katzenbabys spielen mit bunten Bällen“ kann dieses Problem verursachen. Aber keine Sorge, Sie können Bilder von „Katzenbabys, die mit buntem Spielzeug spielen“ erhalten.

Um diesen Fehler zu beheben, fügen wir Code hinzu, um die Ausnahme abzufangen, die ausgelöst wird, wenn wir versuchen, das Bild zu generieren. Wenn eine Ausnahme auftritt, rendern wir die Vorlage home.html noch einmal und zeigen eine Meldung an.

Fügen Sie zuerst ein Div in die Vorlage „home.html“ nach dem ersten Formular ein, das angezeigt wird, wenn ein Fehler auftritt:

<!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>

Fügen Sie dann in main.py Code hinzu, um eine mögliche Ausnahme abzufangen, wenn der Code `generate_images` in display_image aufgerufen wird. Wenn eine Ausnahme auftritt, rendert der Code die Vorlage home.html mit einer Meldung.

# 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)

Dies ist nicht die einzige Responsible AI-Funktion von Imagen. Es gibt eine Reihe von Funktionen, die die Generierung von Bildern von Personen und Kindern sowie allgemeine Filter für die Bilder schützen. Weitere Informationen finden Sie hier.

8. App im Web bereitstellen

Sie können die App mit dem Befehl aus dem Ordner imageapp in der Cloud Shell im Web bereitstellen. Achten Sie darauf, dass Sie in dem Befehl Ihre tatsächliche Projekt-ID verwenden.

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

Sie sollten eine Antwort wie die folgende sehen, in der Sie erfahren, wo Sie Ihre Anwendung finden:

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. Bereinigen

Während für Cloud Run keine Kosten anfallen, wenn der Dienst nicht verwendet wird, wird Ihnen dennoch das Speichern des Container-Images in Artifact Registry möglicherweise in Rechnung gestellt. Sie können Ihr Repository oder Ihr Cloud-Projekt löschen, um Kosten zu vermeiden. Durch das Löschen des Cloud-Projekts wird die Abrechnung für alle in diesem Projekt verwendeten Ressourcen beendet.

So löschen Sie Ihr Container-Image-Repository :

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

So löschen Sie Ihren Cloud Run-Dienst :

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

So löschen Sie Ihr Google Cloud-Projekt :

Rufen Sie Ihre aktuelle Projekt-ID ab:

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

Prüfen Sie, ob dies das Projekt ist, das Sie löschen möchten:

echo $PROJECT_ID

Löschen Sie das Projekt:

gcloud projects delete $PROJECT_ID

10. Glückwunsch

Glückwunsch! Sie haben eine Webanwendung erstellt, die von Imagen erstellte Bilder anzeigt. Wie können Sie das in Ihrer Anwendung verwenden?

Nächste Schritte

Sehen Sie sich einige dieser Codelabs an: