Tworzenie aplikacji do generowania obrazów za pomocą Imagen i Mesop w Cloud Shell

Pozostało minut: 25

Informacje o tym ćwiczeniu (w Codelabs)

Ostatnia aktualizacja: kwi 4, 2025

Autorzy: Katie Nguyen

1. Wprowadzenie

Wyobraź sobie, że w ciągu kilku sekund możesz przekształcić prosty tekst w żywy, szczegółowy obraz. To potęga mediów generatywnych, szybko rozwijającej się dziedziny, która zmienia sposób tworzenia i interakcji z treściami wizualnymi. Modele takie jak Imagen 3 od Google w Vertex AI zapewniają deweloperom aplikacji najnowocześniejsze możliwości generatywnej AI.

Imagen 3 to nasz najwyższej jakości model do zamiany tekstu na obraz. Umożliwia tworzenie obrazów o niesamowitej szczegółowości. Dzięki temu deweloperzy mają większą kontrolę nad tworzeniem produktów AI nowej generacji, które przekształcają ich wyobraźnię w wysokiej jakości zasoby wizualne. Dowiedz się więcej o Imagen w Vertex AI.

Ten projekt pomoże Ci wykorzystać możliwości Imagen za pomocą pakietu SDK Google Gen AI. Poznasz nie tylko sposób generowania zachwycających obrazów z promptów tekstowych, ale też zintegrujesz tę funkcję z aplikacją internetową za pomocą Mesop, czyli frameworku interfejsu użytkownika w Pythonie.

Wymagania wstępne

projekt Google Cloud z włączonymi płatnościami i interfejsem Vertex AI API; Dowiedz się więcej o konfigurowaniu projektu i środowiska programistycznego.

Czego się nauczysz

Jak używać pakietu Google Gen AI SDK for Python do interakcji z modelem Imagen 3
Jak generować obrazy na podstawie promptów tekstowych
Jak utworzyć aplikację Mesop i uruchomić ją w Cloud Shell

Czego potrzebujesz

podstawowa znajomość Pythona,
uruchamiać polecenia w terminalu Cloud Shell;
Komputer z dostępem do Cloud Shell

2. Konfigurowanie środowiska i instalowanie zależności

Otwórz edytor Cloud Shell.
W prawym górnym rogu kliknij przycisk Otwórz terminal.
Utwórz nowy folder, wpisując w terminalu to polecenie:

mkdir my-imagen-app

Zmień katalog na nowy folder:

cd my-imagen-app

Utwórz środowisko wirtualne w Pythonie 3:

python3 -m venv myenv

Aktywuj środowisko wirtualne:

source myenv/bin/activate

Instalowanie Mesop:

pip3 install mesop

Zainstaluj pakiet Google Gen AI SDK for Python:

pip install google-genai

Utwórz plik Pythona:

touch main.py

3. Konfiguracja aplikacji

Cały kod potrzebny do uruchomienia aplikacji Mesop będzie się znajdować w pliku main.py. W kolejnych krokach kopiuj i wklej go kolejno w tym pliku w edytorze Cloud Shell.

Importowanie bibliotek

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

Ustaw informacje o projekcie Google Cloud i utwórz klienta

Ustaw identyfikator projektu:

PROJECT_ID = "[your-project-id]"

Podczas kopiowania tego wiersza kodu zastąp tekst [your-project-id] nazwą swojego projektu Google Cloud.

Tworzenie klienta:

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

Wczytaj model generowania obrazu

imagen_model = "imagen-3.0-generate-002"

Zarządzanie stanem

Określanie zarządzania stanem umożliwia przechowywanie informacji na całej ścieżce użytkownika.

@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: dane wejściowe użytkownika, które zostaną użyte do wygenerowania obrazu.
enhanced_prompt: model imagen-3.0-generate-002 umożliwia wzbogacenie podanych przez Ciebie promptów. Na podstawie Twojego oryginalnego prompta zostanie utworzony nowy, szczegółowy prompt, który pomoże wygenerować obrazy o wyższej jakości. Ten prompt zostanie zwrócony w tej zmiennej.
img_data: lokalizacja w Cloud Storage lub bajty obrazu obrazu wygenerowanego za pomocą Imagen 3.

4. Definiowanie funkcji pomocniczych

Funkcja wczytywania

Ten kod zostanie wykonany podczas wczytywania aplikacji. Ustawia tryb aplikacji na kolory systemu.

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

Funkcja rozmycia

Ta funkcja zapisuje dane wejściowe użytkownika w zmiennej stanu.

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

5. Generowanie obrazu za pomocą Imagen

Ta funkcja jest wywoływana, gdy użytkownik kliknie przycisk, aby przesłać tekst promptu do wygenerowania obrazu.

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

Ustawienia te możesz skonfigurować w sekcji GenerateImagesConfig:

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

Uwaga: jedyną opcją, która działa bez dodatkowej listy dozwolonych, jest DONT_ALLOW.

6. Struktura układu aplikacji

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

Ten kod tworzy aplikację jednostronicową zawierającą te komponenty:

Tytuł
Obszar tekstowy na prompt z obrazem
Przycisk wysyłania wywołujący funkcję generate_image
Obraz wygenerowany przez Imagen
ulepszona prośba zwrócona z obrazem

7. Uruchamianie aplikacji w Cloud Shell

Po skopiowaniu wszystkich fragmentów kodu do pliku main.py możesz uruchomić aplikację Mesop w terminalu Cloud Shell.
```
mesop main.py
```
W prawym górnym rogu kliknij kolejno przycisk Podgląd w przeglądarce i Zmień port. Wpisz 32123 w polu Numer portu, a potem kliknij Zmień i wyświetl podgląd. Powinno otworzyć się nowe okno, w którym zobaczysz wczytaną aplikację. Powinno ono wyglądać tak:

8. Test Imagen 3

Tutaj możesz wypróbować Imagen z własnymi promptami tekstowymi. Możesz generować obrazy w różnych stylach: od fotorealistycznych po animacje i różne style artystyczne. Możesz też określić konkretne kąty kamery, obiektywy i inne elementy. Twój oryginalny prompt tekstowy zostanie też przeredagowany za pomocą funkcji opartej na modelu LLM, która ma na celu tworzenie obrazów o wyższej jakości, które lepiej odzwierciedlają pierwotną intencję prompta.

Uwaga: generowanie obrazów przedstawiających ludzi wymaga dodatkowego dostępu. Jeśli prompt zawiera generowanie twarzy lub osób, pojawi się błąd.

Oto kilka przykładowych promptów:

Beżowa czapka z daszkiem z napisem „good vibes” (dobre wibracje) wyhaftowanym białymi literami z obwódką w neonowej zieleni.
Niezwykły sklep ze słodyczami.
Rysunkowa pocztówka z Las Vegas z wyrazistą nazwą miasta i znakiem pocztowym w prawym rogu.
Pies i kot bawią się kłębkiem włóczki.

9. Czyszczenie

Zatrzymanie aplikacji

Wróć do terminala, w którym uruchomiono aplikację, i zamknij ją, naciskając Ctrl + C.

Dezaktywowanie środowiska wirtualnego

W tym samym terminalu wpisz to polecenie:

deactivate

10. Podsumowanie

Gratulacje! Udało Ci się ukończyć to ćwiczenie z programowania, ponieważ udało Ci się utworzyć aplikację z Imagen i wygenerować kilka obrazów.

Ankieta

Wypełnij tę krótką ankietę, aby podzielić się z nami opinią na temat tego laboratorium.

Dalsze kroki

Zgłoś pomyłkę