Diese Seite wurde von der Cloud Translation API übersetzt.

Imagen in Cloud Run bereitstellen

1. Informationen zu diesem Codelab

Zuletzt aktualisiert: 11. Oktober 2024

Autor: Laurie White

Bildgenerierung

Seien wir ehrlich: Die Bildgenerierung mit Large Language Models (LLMs) kann Spaß machen. Natürlich gibt es viele Geschäftsanwendungen für das Generieren von Bildern aus einem Prompt, von benutzerdefinierter Werbung bis hin zu ansprechenden Präsentationen. Auf der Google Cloud-Website finden Sie viele konkrete Beispiele für Unternehmen, die Creative-Agents verwenden. Es kann aber durchaus amüsant sein, zu sehen, was passiert, wenn Sie nach einem Bild von „glücklichen grünen Hunden auf einem Feld“ suchen.

Ganz gleich, ob Sie die Bildgenerierung aus beruflichen oder privaten Gründen (oder aus beiden) nutzen möchten, die Verwendung eines Bildgenerierungsprogramms und die Bereitstellung in einer Webanwendung sind mit einigen Herausforderungen verbunden. In diesem Lab erfahren Sie, wie Sie diese Herausforderungen meistern.

Umfang

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

Aufgaben in diesem Lab

In diesem Lab lernen Sie Folgendes:

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

In diesem Codelab liegt der Schwerpunkt auf Imagen und der 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 zu Cloud Run Sie können das in diesem Codelab nachholen.
Sie sollten mit der Bearbeitung von Dateien in Cloud Shell oder im Cloud Shell-Editor vertraut sein. Weitere Informationen zu Cloud Shell und Cloud Shell Editor finden Sie in diesem Codelab.
Google Cloud-Projekt mit aktivierter Abrechnungsfunktion In dieser Anleitung wird beschrieben, wie Sie ein Projekt erstellen. Es gibt zahlreiche Produkte mit kostenlosen Stufen und kostenlosen Testversionen.

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 für dieses Codelab aus. Sie können ein neues Projekt erstellen, um das Entfernen Ihrer Arbeit nach Abschluss zu erleichtern.

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 ausprobieren (optional)

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

Bevor Sie versuchen, eine Webanwendung mit Imagen zu erstellen, ist es hilfreich, sich anzusehen, was Imagen kann. Glücklicherweise gibt es eine Reihe von Notebooks, in denen einfacher Imagen-Code ausgeführt wird. Beginnen wir also 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 Notebookserver 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 Notizbuchs zu erstellen.
Schließen Sie die Originalkopie, damit Sie nicht versehentlich daran arbeiten.
Sie müssen eine Verbindung zu einer Laufzeit herstellen, indem Sie oben rechts auf die Schaltfläche „Verbinden“ klicken.
Gehen Sie die einzelnen Zellen im Notebook durch.
Wenn Sie eine Zelle ausführen möchten, können Sie auf das Dreipunkt-Menü oder den Pfeil links neben der Zelle klicken oder die Option „Auswahl ausführen“ im Menü „Laufzeit“ (oder die zugehörige Tastenkombination) verwenden:
Wenn Sie die aktuelle Laufzeit neu starten, erhalten Sie die Meldung, dass das System abgestürzt ist. Keine Panik. Dies ist normal.
Sie müssen sich in Ihrer Notebook-Umgebung authentifizieren.
Sie können Ihre Projekt-ID (nicht den Namen) und den Standort (us-central1 funktioniert, wenn Sie keinen Standort festgelegt haben) in die Felder rechts neben dem Code eingeben. Colab fügt sie dann automatisch in den Code ein.
Unter „Bild generieren“ 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.
Sie sollten jetzt eine gute Vorstellung davon haben, wie Imagen Bilder aus einem Notebook erstellen kann. Sie können dieses Notizbuch jetzt oder zu einem späteren Zeitpunkt ausfüllen, um mehr über Bildparameter zu erfahren.

4. Webanwendung zum Anzeigen eines Bilds erstellen

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

Python Flask-Anwendungen werden so in einem Ordner eingerichtet:

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

Vorlagen sind Dateien mit HTML-Code, 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 main.py verwendet.

Die Anwendung hat zwei Seiten: die erste, um einen Prompt zu erhalten, und die zweite, um das Bild anzuzeigen und dem Nutzer die Möglichkeit zu geben, einen weiteren Prompt einzugeben.

Erstellen Sie zuerst das Projekt-Framework.

Dateistruktur erstellen

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

Öffnen Sie Cloud Shell, indem Sie rechts oben auf dem Bildschirm auf das Promptsymbol klicken.

Sie können mehr Platz zum Arbeiten schaffen, indem Sie die Shell mit dem Pfeil oben im Shell-Fenster auf einen neuen Tab verschieben:

Erstellen Sie in Cloud Shell in Ihrem Basisverzeichnis 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: die erste (home.html), auf der eine Aufforderung angezeigt wird, und die zweite (display.html), auf der das Bild angezeigt wird und der Nutzer eine weitere Aufforderung eingeben kann.

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, um das Bild anzuzeigen. Der Speicherort des Bildes ist 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, die Ihr Programm benötigt, verfügbar sind. 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, über die das Formular mit der Beschreibung des zu generierenden Bildes gesendet wird.

Erstellen Sie mit dem Cloud Shell-Editor oder dem Linux-Editor Ihrer Wahl die Datei main.py im Ordner imageapp. Beginnen wir mit dem folgenden Skelett:

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 fast die gesamte App. In display_image gibt es drei Kommentare, die mit Python-Code ausgearbeitet werden müssen. Das war's auch schon.

Beginnen wir damit, die fehlenden Teile zu ergänzen. Mit Flask lässt sich der Prompt ganz einfach abrufen. Fügen Sie nach dem Kommentar eine Zeile hinzu, wie unten dargestellt:

# 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 return-Anweisung in display_image eine Zeile hinzufügen, um image_url einen Wert zu geben (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 (mit dem Befehl python main.py) ausführen und eine Vorschau mit der Option „Vorschau auf Port 8080“ oben rechts auf dem Bildschirm anzeigen lassen.

Derzeit wird das Bild immer über die von Ihnen angegebene URL angezeigt. Sehen wir uns an, wie Sie diesen Wert aus der App abrufen. Entfernen Sie dazu die Zeile, in der image_url ein statischer Wert zugewiesen ist.

6. Image erstellen

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

from vertexai.vision_models import ImageGenerationModel

und fügen Sie vertexai in die Datei requirements.txt ein.

In der Dokumentation für ImageGenerationModel erfahren Sie, wie Sie es verwenden. Wir erstellen ein Modell und generieren dann anhand eines Prompts ein Bild. 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 WWW-Seite anzeigen. Die GeneratedImage bietet zwar eine Methode zum show des Bildes, diese funktioniert jedoch nur in einer Notebook-Umgebung. Es gibt jedoch eine Möglichkeit, das Bild zu speichern. Wir speichern das Bild und senden die URL des gespeicherten Bildes, wenn wir die Vorlage rendern.

Das ist etwas schwierig und es gibt viele Möglichkeiten, dies zu tun. Sehen wir uns einen der einfacheren Ansätze Schritt für Schritt an. Unten findest du auch eine Abbildung der Schritte, falls du eher visuell lernst.

Zuerst müssen wir das Bild speichern. Aber wie soll es heißen? Bei der Verwendung eines statischen Namens kann es zu Problemen kommen, da das Programm von vielen Personen gleichzeitig verwendet werden kann. Wir könnten zwar separate Bildnamen für jeden Nutzer erstellen (z. B. mit einer UUID), aber es ist einfacher, die tempfile-Bibliothek von Python zu verwenden, mit der eine temporäre Datei mit einem eindeutigen Namen erstellt wird. Der folgende Code erstellt eine temporäre Datei, ruft ihren Namen ab und schreibt die Antwort des Schritts zur Bildgenerierung in die temporäre Datei. Wir geben sie noch nicht in unseren Code ein, da wir zuerst eine URL abrufen müssen.

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.

Bei Daten-URLs können die tatsächlichen Daten in der URL gesendet werden, nicht nur ein Pfad zu ihnen. 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 von tempfile gespeicherte Datei öffnen und in eine Variable lesen. Ja, das ist ein großer String, aber das sollte für moderne Browser und Server kein Problem sein. Anschließend verwenden wir die Bibliothek base64, um sie in einen String zu codieren, den wir in der Daten-URL senden können.

Der endgültige 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}"

Die einzelnen Schritte sind in der Abbildung unten dargestellt:

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

import tempfile
import base64

Versuchen Sie, Ihr Programm über Cloud Shell auszuführen. Achten Sie darauf, dass Sie sich im Ordner mit main.py befinden, und führen Sie den Befehl aus:

python main.py

Sie können sich dann eine Vorschau mit der Option „Vorschau auf Port 8080“ oben rechts auf dem Bildschirm ansehen.

7. Ein häufiger 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:

Dies ist höchstwahrscheinlich auf einen Prompt zurückzuführen, der gegen die verantwortungsbewussten KI-Praktiken von Google verstößt . Selbst ein einfacher Prompt wie „Kätzchen, die mit bunten Bällen spielen“, kann dieses Problem verursachen. Aber keine Sorge, Sie können Bilder von „Katzenbabys, die mit buntem Spielzeug spielen“ finden.

Um diesen Fehler zu beheben, fügen wir Code hinzu, um die Ausnahme zu fangen, die beim Versuch, das Bild zu generieren, ausgelöst wird. Falls ja, wird die home.html-Vorlage noch einmal gerendert und eine entsprechende Meldung angezeigt.

Fügen Sie zuerst in der Datei „home.html“ nach dem ersten Formular ein Div-Element ein, das bei einem Fehler angezeigt wird:

<!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 beim Aufrufen des Codes „generate_images“ in display_image zu erfassen. Bei einer Ausnahme wird die home.html-Vorlage mit einer Nachricht gerendert.

# 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 Funktion für verantwortungsbewusste KI von Imagen. Es gibt eine Reihe von Funktionen, die die Generierung von Personen und Kindern sowie allgemeine Filter auf den Bildern schützen. Weitere Informationen

8. App im Web bereitstellen

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

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

Sie sollten eine Antwort wie die folgende erhalten, in der steht, wo Sie Ihre Bewerbung 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

Für Cloud Run fallen keine Kosten an, wenn der Dienst nicht verwendet wird. Allerdings können für das Speichern des Container-Images in Artifact Registry Gebühren berechnet werden. Sie können Ihr Repository oder Ihr Cloud-Projekt löschen, um Kosten zu vermeiden. Wenn Sie Ihr Cloud-Projekt löschen, wird die Abrechnung für alle in diesem Projekt verwendeten Ressourcen beendet.

So löschen Sie das 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 es sich bei dem Projekt um das gewünschte Projekt handelt:

echo $PROJECT_ID

Projekt löschen

gcloud projects delete $PROJECT_ID

10. Glückwunsch

Herzlichen Glückwunsch! Sie haben eine Webanwendung erstellt, in der von Imagen erstellte Bilder angezeigt werden. Wie können Sie diese in Ihrer Anwendung nutzen?

Was liegt als Nächstes an?

Sehen Sie sich einige dieser Codelabs an: