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

1. Wprowadzenie

Wyobraź sobie, że w ciągu kilku sekund przekształcasz prosty opis tekstowy w żywy, szczegółowy obraz. To właśnie moc mediów generatywnych, czyli szybko rozwijającej się dziedziny, która zmienia sposób tworzenia treści wizualnych i interakcji z nimi. Modele takie jak Imagen 3 od Google w Vertex AI udostępniają deweloperom aplikacji najnowocześniejsze możliwości generatywnej AI.

Imagen 3 to nasz najlepszy model do zamiany tekstu na obraz. Potrafi tworzyć obrazy z zadziwiającą szczegółowością. Dzięki temu deweloperzy mają większą kontrolę podczas tworzenia produktów AI nowej generacji, które przekształcają ich wyobraźnię w wysokiej jakości komponenty wizualne. Więcej informacji o Imagen w Vertex AI

Z tego ćwiczenia dowiesz się, jak wykorzystać możliwości Imagen przy użyciu pakietu Google Gen AI SDK. Dowiesz się nie tylko, jak generować wspaniałe obrazy na podstawie promptów tekstowych, ale także jak zintegrować tę funkcję z aplikacją internetową za pomocą Mesop, czyli platformy interfejsu użytkownika w języku Python.

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 dla Pythona do interakcji z 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,
• doświadczenie w uruchamianiu poleceń w terminalu Cloud Shell;
• Komputer z dostępem do Cloud Shell.

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

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

mkdir my-imagen-app

4. Przejdź do nowego folderu:

cd my-imagen-app

5. Utwórz środowisko wirtualne w Pythonie 3:

python3 -m venv myenv

6. Aktywuj środowisko wirtualne:

source myenv/bin/activate

7. Instalowanie Mesop:

pip3 install mesop

8. Zainstaluj pakiet Google Gen AI SDK for Python:

pip install google-genai

9. Utwórz plik Pythona:

touch main.py

3. Konfiguracja aplikacji

Cały kod potrzebny do uruchomienia aplikacji Mesop będzie znajdować się w main.py. W każdym z kolejnych kroków skopiuj i wklej go kolejno do tego pliku w edytorze Cloud Shell.

Importowanie bibliotek

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

Ustawianie informacji o projekcie Google Cloud i tworzenie klienta

1. Ustaw identyfikator projektu:

PROJECT_ID = "[your-project-id]"

Gdy skopiujesz ten wiersz kodu, zastąp [your-project-id] nazwą swojego projektu w chmurze Google Cloud.

2. Utwórz klienta:

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

Wczytywanie modelu generowania obrazów

imagen_model = "imagen-3.0-generate-002"

Zarządzanie stanem

Zdefiniowanie 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: użytkownik podał dane wejściowe, które zostaną wykorzystane do wygenerowania obrazu.
• enhanced_prompt: Model imagen-3.0-generate-002 umożliwia ulepszenie podanego prompta. Na podstawie pierwotnego prompta zostanie utworzony nowy, szczegółowy prompt, który pomoże wygenerować obrazy o wyższej jakości. Zostanie on zwrócony w tej zmiennej.
• img_data: lokalizacja w Cloud Storage lub bajty obrazu wygenerowanego za pomocą Imagen 3.

4. Definiowanie funkcji pomocniczych

Funkcja wczytywania

Ten kod zostanie wykonany po wczytaniu aplikacji. Ustawia tryb aplikacji na kolory systemowe.

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 obrazów za pomocą Imagen

Ta funkcja jest wywoływana, gdy użytkownik kliknie przycisk, aby przesłać prompt tekstowy 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}"

Możesz skonfigurować ustawienia w 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 będzie działać bez dodatkowego dodawania do 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ą, która zawiera te komponenty:

• Tytuł
• Obszar tekstowy do wpisywania prompta dotyczącego obrazu
• Przycisk wysyłania, który wywołuje funkcję generate_image
• Obraz wygenerowany przez Imagen
• Ulepszony prompt zwrócony z obrazem

7. Uruchamianie aplikacji w Cloud Shell

1. Po skopiowaniu wszystkich fragmentów kodu do main.py możesz uruchomić aplikację Mesop z terminala Cloud Shell.

   mesop main.py
   

2. Teraz kliknij przycisk Podgląd w przeglądarce w prawym górnym rogu, a następnie kliknij Zmień port. Wpisz 32123 w polu Numer portu, a następnie kliknij Zmień i wyświetl podgląd. Powinno otworzyć się nowe okno, w którym zobaczysz załadowaną aplikację. Powinna ona wyglądać mniej więcej tak:

8. Test Imagen 3

Tutaj możesz wypróbować Imagen, używając własnych promptów tekstowych. Możesz generować obrazy w różnych stylach – od fotorealizmu po animację i różne style artystyczne. Możesz też określić konkretne kąty filmowania, obiektywy i inne elementy. Twój pierwotny prompt tekstowy zostanie również przeredagowany za pomocą funkcji opartej na modelu LLM, która ma na celu tworzenie obrazów o wyższej jakości, lepiej odzwierciedlających pierwotną intencję prompta.

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

Oto kilka przykładowych promptów, które możesz wypróbować:

1. Beżowa czapka z daszkiem z napisem „good vibes” wykonanym białymi, wypukłymi, wyszywanymi literami z neonowo-zielonym obrysem.
2. Nietuzinkowy sklep ze słodyczami.
3. Kartka pocztowa z kreskówki przedstawiająca Las Vegas z nazwą miasta i znaczkiem pocztowym w prawym rogu.
4. Szczeniak i kociak bawiące się kłębkiem włóczki.

9. Czyszczenie

Zatrzymywanie aplikacji

Wróć do terminala, w którym została uruchomiona aplikacja, 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, tworząc aplikację z Imagen i generując obrazy.

Ankieta

Podziel się z nami swoją opinią o tym module, wypełniając tę krótką ankietę.

Dalsze kroki

• Dokumentacja produktu Imagen
• Notatnik do generowania obrazów za pomocą modelu Imagen 3
• Przewodnik dla programistów po Imagen 3 w Vertex AI