Informationen zu diesem Codelab
1. Einführung
Stellen Sie sich vor, Sie könnten in Sekundenschnelle eine einfache Textbeschreibung in ein lebendiges, detailliertes Bild umwandeln. Das ist die Stärke generativer Medien, eines sich rasant entwickelnden Bereichs, der die Art und Weise verändert, wie wir visuelle Inhalte erstellen und damit interagieren. Mit Modellen wie Imagen 3 von Google in Vertex AI stehen Anwendungsentwicklern hochmoderne generative KI-Funktionen zur Verfügung.
Imagen 3 ist das bisher beste Text-zu-Bild-Modell von Google. Damit lassen sich 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 Vorteile von Imagen mit dem Google Gen AI SDK nutzen. Sie erfahren nicht nur, wie Sie beeindruckende Bilder aus Textprompts 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 Vertex AI API. Weitere Informationen zum Einrichten eines Projekts und einer Entwicklungsumgebung
Lerninhalte
- Google Gen AI SDK für Python verwenden, um mit Imagen 3 zu interagieren
- Bilder aus Text-Prompts generieren
- Mesop-App erstellen und über Cloud Shell ausführen
Voraussetzungen
- Grundlegendes Verständnis von Python
- Befehle in einem Cloud Shell-Terminal ausführen
- Einen Computer mit Zugriff auf Cloud Shell
2. Umgebung einrichten und Abhängigkeiten installieren
- Öffnen Sie den Cloud Shell-Editor.
- Klicken Sie oben rechts 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 das Verzeichnis zu Ihrem neuen Ordner:
cd my-imagen-app
- So erstellen Sie eine virtuelle Umgebung in Python 3:
python3 -m venv myenv
- Aktivieren Sie die virtuelle Umgebung:
source myenv/bin/activate
- Mesop installieren:
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 die einzelnen Schritte und fügen Sie sie nacheinander in diese Datei im Cloud Shell-Editor 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")
Bildgenerierungsmodell laden
imagen_model = "imagen-3.0-generate-002"
Zustandsverwaltung
Wenn Sie die Zustandsverwaltung definieren, können Sie Informationen während des gesamten Kaufprozesses 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: Dasimagen-3.0-generate-002-Modell bietet die Möglichkeit, den angegebenen 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
Ladefunktion
Dieser Code wird beim Laden der Anwendung ausgeführt. Dadurch wird der Modus der App auf Systemfarben gesetzt.
def load(e: me.LoadEvent):
me.set_theme_mode("system")
Unkenntlichmachen-Funktion
Mit dieser Funktion wird die Nutzereingabe in Ihrer Statusvariablen 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 Textprompt für die Bildgenerierung einzureichen.
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 unter GenerateImagesConfig konfigurieren:
number_of_images: 1, 2, 3, 4aspect_ratio: 1:1, 9:16, 16:9, 3:4, 4:3safety_filter_level: BLOCK_LOW_AND_ABOVE, BLOCK_MEDIUM_AND_ABOVE, BLOCK_ONLY_HIGH, BLOCK_NONEperson_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 für die Eingabe eines Bild-Prompts
- Sendeschaltfläche, die die Funktion
generate_imageaufruft - Ein von Imagen generiertes Bild
- Der optimierte Prompt, der mit dem Bild zurückgegeben wurde
7. Anwendung in Cloud Shell ausführen
- Nachdem Sie alle Code-Snippets in
main.pykopiert haben, können Sie die Mesop-Anwendung über Ihr Cloud Shell-Terminal ausführen.mesop main.py - Klicken Sie jetzt rechts oben auf die Schaltfläche „Webvorschau“ und dann auf „Port ändern“. Geben Sie im Feld „Portnummer“ die Zahl 32123 ein und klicken Sie dann auf „Ändern und Vorschau“. Ein neues Fenster sollte geöffnet werden, in dem Sie die geladene App sehen können. Es sollte in etwa so aussehen:
8. Test Imagen 3
Hier können Sie Imagen mit Ihren eigenen Textprompts ausprobieren. Sie können Bilder in verschiedenen Stilen erstellen, von fotorealistischen Bildern über Animationen bis hin zu verschiedenen künstlerischen Stilen. Sie können auch bestimmte Kamerawinkel, Objektive und mehr angeben. Ihr ursprünglicher Textprompt wird auch mithilfe einer LLM-basierten Funktion umgeschrieben, die Bilder in höherer Qualität liefern 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 einen Fehler, wenn Ihr Prompt die Generierung von Personen oder Gesichtern enthält.
Hier sind einige Beispiele für Prompts, die Sie ausprobieren können:
- Eine beige Baseballkappe mit der Aufschrift „Good Vibes“ in weißen, mit Luftblasen genähten Buchstaben, die neongrün umrandet sind.
- Ein skurril eingerichteter Süßwarenladen.
- Eine Cartoon-Postkarte von Las Vegas mit dem Namen der Stadt und einer Briefmarke in der rechten Ecke.
- Ein Welpe und ein Kätzchen spielen mit einem Wollknäuel.
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 in demselben Terminal den folgenden Befehl ein:
deactivate