Wdrażanie Imagen w Cloud Run

1. Informacje o tym ćwiczeniu

Last Updated: 2024-10-11

Autor: Laurie White

Generowanie obrazów

Generowanie obrazów przez duże modele językowe (LLM) może być zabawne. Oczywiście istnieje wiele zastosowań biznesowych generowania obrazów na podstawie promptu, od spersonalizowanych reklam po atrakcyjne prezentacje. (Na stronie Google Cloud znajdziesz wiele konkretnych przykładów zastosowań agentów kreatywnych w firmach). Jednak sprawdzenie, co się stanie, gdy poprosisz o obraz „szczęśliwych zielonych psów na polu”, może być całkiem zabawne.

Niezależnie od tego, czy interesuje Cię generowanie obrazów do celów zawodowych, czy rekreacyjnych (lub obu), istnieje kilka wyzwań związanych z używaniem programu do generowania obrazów i wdrażaniem go w aplikacji internetowej. To laboratorium pomoże Ci pokonać te wyzwania.

Co utworzysz

W tym ćwiczeniu utworzysz aplikację, która przyjmuje prompta tekstowego i zwraca stronę internetową z obrazem wygenerowanym na podstawie tego prompta.

Czego się nauczysz

W tym laboratorium dowiesz się:

Jak używać Google Imagen do tworzenia obrazów na podstawie promptów tekstowych w środowiskach notatnika
Trudności związane z przeniesieniem kodu Imagen z notatnika do aplikacji internetowej
Jak wdrożyć aplikację Cloud Run, która używa Imagen do generowania obrazów
Jak umieścić obraz z Imagen w HTML

To ćwiczenie koncentruje się na Imagen i wdrażaniu. Nieistotne koncepcje i bloki kodu zostały pominięte. Można je po prostu skopiować i wkleić.

Czego potrzebujesz

Mieć najnowszą wersję przeglądarki Chrome.
Podstawowa znajomość Cloud Run. Możesz go uzyskać w tym dość krótkim ćwiczeniu z programowania.
Znajomość edytowania plików w Cloud Shell lub edytorze Cloud Shell. Więcej informacji o Cloud Shell i Edytorze Cloud Shell znajdziesz w tym ćwiczeniu z programowania.
projekt Google Cloud z włączonymi płatnościami; Z tego przewodnika dowiesz się, jak utworzyć projekt. Dostępnych jest wiele usług z poziomami bezpłatnymi i bezpłatnymi okresami próbnymi.

Pełny kod tego ćwiczenia jest dostępny na stronie https://github.com/Annie29/imagen-deployment .

2. Włącz interfejsy API

Wybierz projekt, którego chcesz używać w tym Codelabie. Możesz utworzyć nowy projekt, aby po zakończeniu pracy łatwiej usunąć wszystkie zmiany.

Zanim zaczniesz korzystać z Imagen, musisz włączyć niektóre interfejsy API.

Otwórz konsolę Google Cloud.
Otwórz panel Vertex AI.
Wybierz „Włącz wszystkie zalecane interfejsy API”.

3. Korzystanie z Google Imagen (opcjonalnie)

Jeśli znasz Imagen, możesz pominąć tę sekcję.

Zanim spróbujesz utworzyć aplikację internetową korzystającą z Imagen, warto sprawdzić, co potrafi ten model. Na szczęście istnieje wiele notatników, które uruchamiają prosty kod Imagen, więc zacznijmy od jednego z nich.

Otwórz notatnik na stronie https://github.com/GoogleCloudPlatform/generative-ai/blob/main/vision/getting-started/image_generation.ipynb .
Kliknij Otwórz w Colab, aby otworzyć notatnik na serwerze notatników Google.
Aby utworzyć własną kopię tego notatnika, wybierz „Plik –> Zapisz kopię na Dysku” lub kliknij „Kopiuj na Dysk” u góry strony.
Zamknij oryginalną kopię (aby uniknąć pracy w niewłaściwym dokumencie).
Aby połączyć się ze środowiskiem wykonawczym, kliknij przycisk Połącz w prawym górnym rogu.
Zacznij od pracy z poszczególnymi komórkami w notatniku.
Aby uruchomić komórkę, możesz kliknąć w [] lub strzałkę po lewej stronie komórki albo użyć opcji Uruchom zaznaczenie w menu Środowisko wykonawcze (lub jej skrótu):
Gdy ponownie uruchomisz bieżące środowisko wykonawcze, pojawi się komunikat o awarii systemu. Nie panikuj. To zupełnie normalne.
Musisz uwierzytelnić środowisko notatnika.
W polach po prawej stronie kodu możesz wpisać identyfikator projektu (nie nazwę) i lokalizację (jeśli nie masz ustawionej lokalizacji, możesz użyć us-central1), a Colab wstawi je za Ciebie do kodu.
Gdy przejdziesz do sekcji „Wygeneruj obraz”, zobaczysz, co potrafi Imagen. Możesz zmienić prompt i ponownie uruchomić komórkę, aby zobaczyć różne obrazy, które możesz uzyskać.
W tym momencie powinnaś(-eś) mieć już dobre pojęcie o tym, jak Imagen może tworzyć obrazy na podstawie notatnika. Możesz teraz lub w dogodnym dla siebie momencie przejrzeć ten notatnik, aby dowiedzieć się więcej o parametrach obrazu.

4. Zacznij tworzyć aplikację internetową do wyświetlania obrazu

Do utworzenia aplikacji użyjemy Pythona z platformą Flask w Cloud Run.

Aplikacje Python Flask są konfigurowane w folderze w ten sposób:

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

Szablony to pliki zawierające kod HTML, zwykle z nazwanymi symbolami zastępczymi, w których program wstawia wygenerowany tekst. main.py to sama aplikacja serwera WWW, a requirements.txt to lista wszystkich niestandardowych bibliotek używanych przez main.py.

Aplikacja będzie miała 2 strony – pierwszą do wpisywania prompta i drugą do wyświetlania obrazu oraz wpisywania kolejnego prompta.

Najpierw utwórz strukturę projektu.

Tworzenie struktury plików

W tym ćwiczeniu zakłada się, że projekt znajduje się w folderze imageapp. Jeśli używasz innej nazwy, odpowiednio zaktualizuj polecenia.

Otwórz Cloud Shell, klikając ikonę prompta w prawym górnym rogu ekranu.

Możesz uzyskać więcej miejsca do pracy, przenosząc powłokę na nową kartę za pomocą strzałki u góry okna powłoki:

W katalogu głównym Cloud Shell utwórz folder imageapp, przejdź do niego i utwórz foldery templates. Możesz to zrobić w wierszu poleceń lub w edytorze Cloud Shell.

Tworzenie szablonów

Aplikacja będzie miała 2 strony: pierwszą (którą nazwiemy home.html) do otrzymywania promptu i drugą (którą nazwiemy display.html) do wyświetlania obrazu i umożliwiania użytkownikowi wpisania kolejnego promptu.

Za pomocą edytora Cloud Shell lub wybranego edytora Linux utwórz 2 szablony. W folderze imageapp/templates utwórz stronę początkową, którą zobaczy użytkownik, home.html. Używa zmiennej prompt, aby zwracać opis wprowadzony przez użytkownika.

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>

Następnie utwórz display.html, który będzie wyświetlać obraz. Zwróć uwagę, że lokalizacja obrazu będzie w polu 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. Rozpoczynanie pisania kodu

Musisz utworzyć plik requirements.txt, aby mieć pewność, że wszystkie biblioteki potrzebne programowi są dostępne. Na razie w pliku requirements.txt umieść tylko flask.

Plik main.py zawiera kod, który będzie obsługiwać żądania internetowe. Musimy obsłużyć tylko 2 żądania: GET żądanie strony głównej i POST żądanie, które przesyła formularz z opisem obrazu, jaki chcemy wygenerować.

Za pomocą edytora Cloud Shell lub wybranego edytora w systemie Linux utwórz plik main.py w folderze imageapp. Zaczniemy od tego szkieletu:

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)

To prawie cała aplikacja. W display_image znajdują się 3 komentarze, które należy uzupełnić kodem w Pythonie. To wszystko.

Zacznijmy uzupełniać te brakujące fragmenty. Flask ułatwia pobieranie promptu. Dodaj wiersz po komentarzu, jak pokazano poniżej:

# Code to get the prompt (called prompt) from the submitted form
prompt = flask.request.form["prompt"]

Jeśli chcesz teraz przetestować aplikację, dodaj w pliku display_image wiersz przed instrukcją return, aby przypisać wartość do zmiennej image_url (prawidłowy adres URL wskazujący obraz).

Na przykład: image_url="<your url here>"

Program możesz uruchomić lokalnie w Cloud Shell (za pomocą polecenia python main.py) i wyświetlić jego podgląd, klikając opcję Podgląd na porcie 8080 w prawym górnym rogu ekranu.

W ramach obecnego programu obraz będzie zawsze widoczny pod podanym przez Ciebie adresem URL. Przejdźmy dalej i zobaczmy, jak uzyskać tę wartość z aplikacji. Pamiętaj, aby usunąć wiersz, który nadaje image_url wartość statyczną.

6. Tworzenie obrazu

Google Cloud udostępnia interfejs API w Pythonie dla generatywnej AI w Vertex AI. Aby go użyć, musimy dodać wiersz importujący go wraz z innymi importami u góry programu:

from vertexai.vision_models import ImageGenerationModel

i dołącz vertexai do pliku requirements.txt.

W dokumentacji dotyczącej klasy ImageGenerationModel znajdziesz informacje o tym, jak jej używać. Utworzymy model, a potem wygenerujemy na jego podstawie obraz na podstawie promptu. Dodaj do pliku main.py kod drugiego etapu, który utworzy obraz i zapisze go w pliku response:

# Code to generate the image
model = ImageGenerationModel.from_pretrained("imagegeneration@006")
response = model.generate_images(prompt=prompt)[0]

W zależności od parametrów wysłanych do generate_images można utworzyć maksymalnie 4 obrazy naraz, więc zwrócona wartość będzie listą GeneratedImage, nawet jeśli zwrócony zostanie tylko 1 obraz, jak w tym przypadku.

Teraz musimy wyświetlić obraz na stronie WWW. GeneratedImage ma metodę show obrazu, ale działa ona tylko w środowisku notatnika. Istnieje jednak sposób na zapisanie obrazu. Zapiszemy obraz i wyślemy adres URL zapisanego obrazu, gdy będziemy renderować szablon.

To trochę skomplikowane i można to zrobić na wiele sposobów. Przyjrzyjmy się krok po kroku jednemu z prostszych podejść. (Jeśli wolisz zobaczyć przycisk w praktyce, poniżej znajdziesz ilustrację).

Najpierw musimy zapisać obraz. Ale jak będzie się nazywać? Używanie statycznej nazwy może powodować problemy, ponieważ z programu może korzystać wiele osób jednocześnie. Chociaż moglibyśmy utworzyć osobne nazwy obrazów dla każdego użytkownika (np. z użyciem UUID), prostszym sposobem jest użycie biblioteki tempfile w Pythonie, która utworzy plik tymczasowy z unikalną nazwą. Poniższy kod utworzy plik tymczasowy, pobierze jego nazwę i zapisze w nim odpowiedź z kroku generowania obrazu. Nie będziemy go jeszcze wpisywać do kodu, ponieważ najpierw musimy uzyskać adres 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

Istnieje wiele sposobów przetwarzania zapisanego pliku, ale jednym z najprostszych i najbezpieczniejszych jest użycie adresu URL danych.

Adresy URL danych umożliwiają wysyłanie w adresie URL rzeczywistych danych, a nie tylko ścieżki do nich. Składnia adresu URL danych jest następująca:

data:[image/png][;base64],<data>

Aby uzyskać kodowanie base64 obrazu, musimy otworzyć plik zapisany przez tempfile i odczytać go do zmiennej. Tak, będzie to długi ciąg znaków, ale nowoczesne przeglądarki i serwery powinny sobie z nim poradzić. Następnie użyjemy biblioteki base64, aby zakodować te dane w ciąg znaków, który możemy wysłać w adresie URL danych.

Ostateczny kod do wykonania trzeciego kroku (utworzenia adresu URL) będzie wyglądać tak:

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

Wszystkie te kroki możesz zobaczyć na ilustracji poniżej:

Na początku programu musisz zaimportować moduły tempfile i base64.

import tempfile
import base64

Spróbuj uruchomić program w Cloud Shell. Upewnij się, że jesteś w folderze z main.py, i uruchom to polecenie:

python main.py

Następnie możesz wyświetlić podgląd, korzystając z opcji Podgląd na porcie 8080 w prawym górnym rogu ekranu.

7. Typowy błąd

W pewnym momencie możesz zauważyć, że podczas uruchamiania programu (podczas testowania lub po wdrożeniu) pojawia się komunikat podobny do tego:

Najprawdopodobniej jest to spowodowane promptem, który narusza odpowiedzialne działania Google w zakresie AI . Problem może wystąpić nawet w przypadku prostego prompta, takiego jak „kotki bawiące się kolorowymi piłkami”. (Ale bez obaw, możesz uzyskać obrazy „kotków bawiących się kolorowymi zabawkami”).

Aby poradzić sobie z tym błędem, dodamy kod, który będzie przechwytywać wyjątek zgłaszany podczas próby wygenerowania obrazu. Jeśli tak, ponownie wyrenderujemy szablon home.html z wyświetloną wiadomością.

Najpierw dodajmy w szablonie home.html po pierwszym formularzu element div, który będzie wyświetlany w przypadku wystąpienia błędu:

<!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>

Następnie dodaj kod w main.py, aby przechwycić ewentualny wyjątek podczas wywoływania kodu generate_images w display_image. Jeśli wystąpi wyjątek, kod wyrenderuje szablon home.html z komunikatem.

# 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)

To nie jedyna funkcja odpowiedzialnej AI w Imagen. Istnieje wiele funkcji, które chronią przed generowaniem obrazów osób i dzieci, a także ogólne filtry obrazów. Więcej informacji o tych opcjach znajdziesz tutaj.

8. Wdrażanie aplikacji w internecie

Aplikację możesz wdrożyć w internecie za pomocą polecenia z folderu imageapp w Cloud Shell. W poleceniu użyj rzeczywistego identyfikatora projektu.

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

Powinna pojawić się odpowiedź podobna do tej, która informuje, gdzie można znaleźć aplikację:

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. Czyszczenie

Cloud Run nie nalicza opłat, gdy usługa nie jest używana, ale może zostać pobrana należność za przechowywanie obrazu kontenera w Artifact Registry. Aby uniknąć obciążenia konta opłatami, możesz usunąć repozytorium lub projekt w chmurze. Usunięcie projektu w chmurze spowoduje zaprzestanie naliczania opłat za wszelkie zasoby wykorzystywane w ramach tego projektu.

Aby usunąć repozytorium obrazów kontenerów:

gcloud artifacts repositories delete cloud-run-source-deploy \
  --location $REGION

Aby usunąć usługę Cloud Run:

gcloud run services delete imageapp \
  --platform managed \
  --region $REGION

Aby usunąć projekt Google Cloud:

Pobierz bieżący identyfikator projektu:

PROJECT_ID=$(gcloud config get-value core/project)

Sprawdź, czy to jest projekt, który chcesz usunąć:

echo $PROJECT_ID

Usuń projekt:

gcloud projects delete $PROJECT_ID

10. Gratulacje

Gratulacje! Udało Ci się utworzyć aplikację internetową, która będzie wyświetlać obrazy wygenerowane przez Imagen. Jak możesz wykorzystać to w swojej aplikacji?

Co dalej?

Sprawdź te ćwiczenia z programowania: