Bildgenerierungs-App mit Imagen und Mesop in Cloud Shell erstellen

1. Einführung

Stellen Sie sich vor, Sie könnten in Sekundenschnelle aus einer einfachen Textbeschreibung ein lebendiges, detailliertes Bild erstellen. Das ist die Leistungsfähigkeit generativer Medien, eines sich schnell entwickelnden Bereichs, der die Art und Weise verändert, wie Sie visuelle Inhalte erstellen und mit ihnen interagieren. Modelle wie Imagen 3 von Google in Vertex AI stellen Anwendungsentwicklern die hochmodernen Funktionen der generativen KI zur Verfügung.

Imagen 3 ist das bisher beste Text-zu-Bild-Modell von Google. Es kann Bilder mit erstaunlichen Details erstellen. So haben Entwickler mehr Kontrolle beim Erstellen von KI-Produkten der nächsten Generation, die ihre Vorstellungen in hochwertige visuelle Assets umwandeln. Weitere Informationen zu Imagen in Vertex AI

In diesem Codelab erfahren Sie, wie Sie die Leistungsfähigkeit von Imagen mit dem Google Gen AI SDK nutzen können. Sie lernen nicht nur, wie Sie aus Text-Prompts beeindruckende Bilder generieren, sondern auch, wie Sie diese Funktion mit Mesop, einem Python-UI-Framework, in eine Webanwendung einbinden.

Vorbereitung

Ein Google Cloud-Projekt mit aktivierter Abrechnung und aktivierter Vertex AI API. Weitere Informationen zum Einrichten eines Projekts und einer Entwicklungsumgebung

Lerninhalte

Verwendung des Google Gen AI SDK for Python zur Interaktion mit Imagen 3
Bilder aus Text-Prompts generieren
Mesop-App erstellen und in Cloud Shell ausführen

Voraussetzungen

Grundlegendes Verständnis von Python
Erfahrung mit dem Ausführen von Befehlen in einem Cloud Shell-Terminal
Ein Computer mit Zugriff auf Cloud Shell

2. Umgebung einrichten und Abhängigkeiten installieren

Öffnen Sie den Cloud Shell-Editor.
Klicken Sie rechts oben auf die Schaltfläche „Terminal öffnen“.
Erstellen Sie einen neuen Ordner, indem Sie den folgenden Befehl in das Terminal eingeben:

mkdir my-imagen-app

Wechseln Sie in den neuen Ordner:

cd my-imagen-app

Erstellen Sie eine virtuelle Umgebung in Python 3:

python3 -m venv myenv

Aktivieren Sie die virtuelle Umgebung:

source myenv/bin/activate

Installieren Sie Mesop:

pip3 install mesop

Installieren Sie das Google Gen AI SDK for Python:

pip install google-genai

Erstellen Sie eine Python-Datei:

touch main.py

3. App-Einrichtung

Der gesamte Code, der zum Ausführen der Mesop-App erforderlich ist, befindet sich in main.py. Kopieren Sie ihn in den nächsten Schritten nacheinander in diese Datei im Cloud Shell-Editor und fügen Sie ihn dort ein.

Bibliotheken importieren

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

Google Cloud-Projektinformationen festlegen und Client erstellen

Legen Sie Ihre Projekt-ID fest:

PROJECT_ID = "[your-project-id]"

Ersetzen Sie [your-project-id] durch den Namen Ihres Google Cloud-Projekts, wenn Sie diese Codezeile kopieren.

Client erstellen:

client = genai.Client(vertexai=True, project=PROJECT_ID, location="us-central1")

Modell zur Bildgenerierung laden

imagen_model = "imagen-3.0-generate-002"

Zustandsverwaltung

Durch die Definition der Zustandsverwaltung können Sie Informationen während des gesamten Nutzerprozesses speichern.

@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: Die vom Nutzer bereitgestellte Eingabe, die für die Bildgenerierung verwendet wird.
enhanced_prompt: Das Modell imagen-3.0-generate-002 bietet die Möglichkeit, den von Ihnen bereitgestellten Prompt zu verbessern. Aus Ihrem ursprünglichen Prompt wird ein neuer, detaillierter Prompt erstellt, um Bilder in höherer Qualität zu generieren. Dieser wird in dieser Variablen zurückgegeben.
img_data: Der Cloud Storage-Speicherort oder die Bildbytes eines mit Imagen 3 generierten Bildes.

4. Hilfsfunktionen definieren

Funktion laden

Dieser Code wird ausgeführt, wenn die Anwendung geladen wird. Er legt den Modus der App auf Systemfarben fest.

def load(e: me.LoadEvent):
  me.set_theme_mode("system")

Funktion „Blur“

Mit dieser Funktion wird die Nutzereingabe in der Zustandsvariablen gespeichert.

def on_blur(e: me.InputBlurEvent):
    state = me.state(State)
    state.input = e.value

5. Bild mit Imagen generieren

Diese Funktion wird aufgerufen, wenn ein Nutzer auf eine Schaltfläche klickt, um einen Text-Prompt für die Bildgenerierung zu senden.

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

Sie können die Einstellungen in GenerateImagesConfig konfigurieren:

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

Hinweis:Die einzige Option, die ohne zusätzliche Zulassungsliste funktioniert, ist DONT_ALLOW.

6. App-Layout strukturieren

@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"),
            )

Mit diesem Code wird eine Single-Page-Anwendung mit den folgenden Komponenten erstellt:

Titel
Textfeld zum Eingeben eines Bild-Prompts
Schaltfläche „Senden“, die die Funktion generate_image aufruft
Ein mit Imagen generiertes Bild
Der mit dem Bild zurückgegebene verbesserte Prompt

7. Anwendung in Cloud Shell ausführen

Nachdem Sie alle Code-Snippets in main.py kopiert haben, können Sie die Mesop-Anwendung über das Cloud Shell-Terminal ausführen.
```
mesop main.py
```
Klicken Sie rechts oben auf die Schaltfläche „Webvorschau“ und dann auf „Port ändern“. Geben Sie im Feld „Portnummer“ 32123 ein und klicken Sie dann auf „Ändern und Vorschau“. Ein neues Fenster sollte sich öffnen, in dem Sie die geladene App sehen können. Sie sollte so aussehen:

8. Imagen 3 testen

Hier können Sie Imagen mit Ihren eigenen Text-Prompts ausprobieren. Sie können Bilder in einer Reihe von Stilen generieren, von Fotorealismus über Animation bis hin zu verschiedenen künstlerischen Stilen. Sie können auch bestimmte Kamerawinkel, Objektive und mehr angeben. Ihr ursprünglicher Text-Prompt wird auch mit einer LLM-basierten Funktion neu geschrieben, die Bilder in höherer Qualität erzeugen soll, die den Zweck des ursprünglichen Prompts besser widerspiegeln.

Hinweis: Für das Generieren von Bildern von Personen ist zusätzlicher Zugriff erforderlich. In der Zwischenzeit erhalten Sie eine Fehlermeldung, wenn Ihr Prompt die Generierung von Personen oder Gesichtern umfasst.

Hier einige Beispiele für geeignete Prompts:

Eine beige Baseballkappe mit der Aufschrift „good vibes“ in weißen, blasenartigen Buchstaben, die in Neongrün umrandet sind.
Ein skurriler Süßwarenladen.
Eine Cartoon-Postkarte von Las Vegas mit dem ausgeschriebenen Namen der Stadt und einer Briefmarke in der rechten Ecke.
Ein Welpe und ein Kätzchen, die mit einem Wollknäuel spielen.

9. Bereinigen

Anwendung beenden

Kehren Sie zum Terminal zurück, in dem Sie die Anwendung gestartet haben, und beenden Sie sie mit Strg + C.

Virtuelle Umgebung deaktivieren

Geben Sie im selben Terminal den folgenden Befehl ein:

deactivate

10. Fazit

Glückwunsch! Sie haben dieses Codelab erfolgreich abgeschlossen, indem Sie eine Anwendung mit Imagen erstellt und einige Bilder generiert haben.

Umfrage

Teilen Sie uns Ihre Meinung zu diesem Codelab mit, indem Sie diese kurze Umfrage ausfüllen.