Imagen'i Cloud Run'a dağıtma

1. Bu codelab hakkında

Last Updated: 2024-10-11

Yazan: Laurie White

Görüntü üretme

Dürüst olmak gerekirse, büyük dil modelleri (LLM) tarafından görüntü oluşturma eğlenceli olabilir. Elbette, istemden görsel oluşturmak için özelleştirilmiş reklamlardan ilgi çekici sunumlara kadar birçok iş uygulaması vardır. (Google Cloud web sitesinde, reklam öğesi aracılarını kullanan şirketlerin birçok özel kullanımı açıklanmaktadır.) Yine de "tarlada mutlu yeşil köpekler" resmi istediğinizde ne gibi sonuçlarla karşılaşacağınızı görmek oldukça eğlenceli olabilir.

Resim oluşturma ile profesyonel veya eğlence amaçlı (veya her ikisi için de) ilgileniyorsanız resim oluşturma programını kullanma ve bir web uygulamasına dağıtma arasında bazı zorluklar vardır. Bu laboratuvar, bu zorlukları aşmanıza yardımcı olacaktır.

Ne oluşturacaksınız?

Bu codelab'de, metin istemi alan ve bu istem kullanılarak oluşturulan bir resmin yer aldığı bir web sayfası döndüren bir uygulama oluşturacaksınız.

Neler öğreneceksiniz?

Bu laboratuvarda şunları öğreneceksiniz:

• Not defteri ortamlarında metin istemlerinden resim oluşturmak için Google Imagen'i kullanma
• Imagen kodunu bir not defterinden web uygulamasına taşımayla ilgili zorluklar
• Görüntü oluşturmak için Imagen'i kullanan bir Cloud Run uygulaması dağıtma
• Imagen'den HTML'ye resim ekleme

Bu codelab, Imagen ve dağıtıma odaklanmaktadır. Alakalı olmayan kavramlar ve kod blokları işaretlenmiştir ve yalnızca kopyalayıp yapıştırmanız için kullanımınıza sunulmuştur.

İhtiyacınız olanlar

• Chrome tarayıcının yeni bir sürümü.
• Cloud Run hakkında bilgi sahibi olmanız gerekir. Bu bilgileri buradaki oldukça kısa codelab'den edinebilirsiniz.
• Cloud Shell veya Cloud Shell Düzenleyici'de dosya düzenleme konusunda bilgi sahibi olmanız gerekir. Cloud Shell ve Cloud Shell Düzenleyici hakkında daha fazla bilgiyi bu Codelab'de bulabilirsiniz.
• Faturalandırma özelliği etkinleştirilmiş bir Google Cloud projesi. Bu kılavuzda, nasıl proje oluşturacağınız gösterilmektedir. Ücretsiz katman ve ücretsiz deneme sunan çok sayıda ürün mevcuttur.

Bu codelab'in tüm kodunu https://github.com/Annie29/imagen-deployment adresinde bulabilirsiniz .

2. API'leri etkinleştir

Bu Codelab için kullanılacak bir proje seçin. İşiniz bittiğinde tüm çalışmalarınızı kaldırmayı kolaylaştırmak için yeni bir proje oluşturabilirsiniz.

Imagen'i kullanmaya başlamadan önce bazı API'leri etkinleştirmeniz gerekir.

1. Google Cloud Console'a gidin.
2. Vertex AI kontrol paneline gidin.
3. "Önerilen Tüm API'leri Etkinleştir"i seçin.

3. Google Imagen'i keşfetme (isteğe bağlı)

Imagen'i biliyorsanız bu bölümü atlayabilirsiniz.

Imagen'i kullanan bir web uygulaması oluşturmaya çalışmadan önce, Imagen'in neler yapabileceğini görmek faydalı olacaktır. Neyse ki basit Imagen kodu çalıştıran çeşitli not defterleri var. Bu not defterlerinden biriyle başlayalım.

1. https://github.com/GoogleCloudPlatform/generative-ai/blob/main/vision/getting-started/image_generation.ipynb adresindeki not defterine gidin .
2. Not defterini Google'ın not defteri sunucusunda açmak için Colab'da aç'ı seçin.
3. Bu not defterinin kendi kopyanızı oluşturmak için "Dosya -> Drive'a bir kopya kaydet"i seçin veya sayfanın üst kısmındaki "Drive'a kopyala"yı tıklayın.
4. Orijinal kopyayı kapatın (Yanlış kopyada çalışmamak için).
5. Sağ üstteki Bağlan düğmesini tıklayarak bir çalışma zamanına bağlanmanız gerekir.
6. Not defterindeki hücrelerin her birinde çalışmaya başlayın.
7. Bir hücreyi çalıştırmak için hücrenin solundaki [] simgesini veya oku tıklayabilir ya da Çalışma Zamanı menüsündeki Seçimi Çalıştır seçeneğini (veya kısayolunu) kullanabilirsiniz:
8. Mevcut çalışma zamanını yeniden başlattığınızda sisteminizin kilitlendiğine dair bir mesaj alırsınız. Paniğe kapılmayın. Normal bir durumdur.
9. Not defteri ortamınızın kimliğini doğrulamanız gerekir.
10. Proje kimliğinizi (adı değil) ve konumunuzu (konum ayarlamadıysanız us-central1 çalışır) kodun sağındaki kutulara girebilir ve Colab'ın bunları sizin için koda eklemesini sağlayabilirsiniz.
11. "Resim oluştur"a geldiğinizde Imagen'in neler yapabileceğini görebilirsiniz. İsteminizi değiştirip hücreyi yeniden çalıştırarak elde edebileceğiniz resim çeşitliliğini görebilirsiniz.
12. Bu noktada, Imagen'in bir not defterinden nasıl resim oluşturabileceği hakkında iyi bir fikriniz olmalıdır. Resim parametreleri hakkında daha fazla bilgi edinmek için bu not defterini şimdi veya uygun bir zamanda tamamlayabilirsiniz.

4. Resim göstermek için web uygulaması oluşturmaya başlama

Uygulamamızı oluşturmak için Cloud Run'da Flask çerçevesini kullanarak Python'u kullanacağız.

Python Flask uygulamaları aşağıdaki gibi bir klasörde kurulur:

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

Şablonlar, genellikle programın oluşturulan metni ekleyeceği adlandırılmış yer tutucular içeren HTML içeren dosyalardır. main.py, web sunucusu uygulamasının kendisidir ve requirements.txt, main.py'un kullandığı tüm standart olmayan kitaplıkların bir listesidir.

Uygulamada iki sayfa bulunur: İlk sayfa istem almak için, ikinci sayfa ise resmi görüntülemek ve kullanıcının başka bir istem girmesine izin vermek için kullanılır.

Öncelikle proje çerçevesini oluşturun.

Dosya yapısını oluşturma

Bu kod laboratuvarında, projenizin imageapp klasöründe olduğu varsayılır. Farklı bir ad kullanıyorsanız komutları uygun şekilde güncellediğinizden emin olun.

Ekranın sağ üst kısmındaki istem simgesini seçerek Cloud Shell'e girin.

Kabuk penceresinin üst kısmındaki oku kullanarak kabuğu yeni bir sekmeye taşıyarak daha fazla çalışma alanı elde edebilirsiniz:

Cloud Shell'deki ana dizininizde imageapp klasörünü oluşturun, bu klasöre geçin ve templates klasörlerini oluşturun. Bunu komut satırından veya Cloud Shell düzenleyicisinden yapabilirsiniz.

Şablonları oluşturma

Uygulamada iki sayfa bulunur: İlk sayfa (home.html olarak adlandıracağız), istem almak için kullanılır. İkinci sayfa (display.html olarak adlandıracağız) ise resmi görüntüler ve kullanıcının başka bir istem girmesine olanak tanır.

Cloud Shell düzenleyiciyi veya tercih ettiğiniz Linux düzenleyiciyi kullanarak iki şablon oluşturun. imageapp/templates klasöründe, kullanıcının göreceği ilk sayfayı (home.html) oluşturun. Kullanıcının girdiği açıklamayı döndürmek için prompt değişkenini kullanır.

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>

Ardından, resmi gösterecek display.html öğesini oluşturun. Resmin konumunun image_url olduğunu unutmayın.

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. Kodu başlatma

Programınızın ihtiyaç duyduğu tüm kitaplıkların kullanılabilir olduğundan emin olmak için requirements.txt dosyasını oluşturmanız gerekir. Şimdilik requirements.txt dosyasına yalnızca flask öğesini ekleyin.

main.py dosyası, web isteklerini sunacak kodu içerir. İşlememiz gereken yalnızca iki istek vardır: ana sayfa için bir GET isteği ve oluşturmak istediğimiz resmi açıklayan formu gönderen bir POST isteği.

Tercih ettiğiniz Cloud Shell düzenleyiciyi veya Linux düzenleyiciyi kullanarak imageapp klasöründe main.py dosyasını oluşturun. Aşağıdaki iskeletle başlayacağız:

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)

Aslında, uygulamanın neredeyse tamamı bu. display_image dosyasında Python koduyla doldurulması gereken üç yorum var.

Eksik kısımları doldurmaya başlayalım. Flask, istemi almayı kolaylaştırır. Yorumdan sonra aşağıdaki gibi bir satır ekleyin:

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

Uygulamayı hemen test etmek istiyorsanız display_image içindeki return ifadesinden önce bir satır ekleyerek image_url değerini (bir resmi gösteren geçerli bir URL) ayarlayabilirsiniz.

Örneğin: image_url="<your url here>"

Programı Cloud Shell'den yerel olarak çalıştırabilir (python main.py komutunu kullanarak) ve ekranınızın sağ üst kısmındaki 8080 bağlantı noktasında önizle'yi kullanarak önizleyebilirsiniz.

Şu anda programın işleyiş şekliyle, resmi her zaman belirttiğiniz URL'de görürsünüz. Şimdi devam edip bu değerin uygulamadan nasıl alınacağını görelim. image_url için statik bir değer veren satırı kaldırdığınızdan emin olun.

6. Resmi oluşturma

Google Cloud'da Vertex AI'da üretken yapay zeka için bir Python API'si vardır. Bunu kullanmak için programımızın üst kısmına, diğer içe aktarmalarla birlikte içe aktarma satırı eklememiz gerekir:

from vertexai.vision_models import ImageGenerationModel

vertexai dosyasını requirements.txt dosyasına ekleyin.

ImageGenerationModel'in belgelerinde nasıl kullanılacağı gösterilir. Bir model oluşturup istemle bu modelden resim oluşturacağız. İkinci adım için main.py dosyasına kod ekleyin. Bu kod, resmi oluşturup response dosyasında depolar:

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

generate_images parametresine gönderilen parametrelere bağlı olarak tek seferde en fazla 4 resim oluşturulabilir. Bu nedenle, döndürülen değer, bu durumda olduğu gibi yalnızca bir resim döndürülse bile GeneratedImage öğelerinin bir listesi olur.

Şimdi resmi bir WWW sayfasında göstermemiz gerekiyor. GeneratedImage, görüntüyü show yöntemiyle döndürme özelliğine sahiptir ancak bu özellik yalnızca dizüstü bilgisayar ortamında çalışır. Ancak resmi kaydetme yöntemi vardır. Şablonu oluşturduğumuzda resmi kaydeder ve kaydedilen resmin URL'sini göndeririz.

Bu işlem biraz karmaşıktır ve birçok farklı şekilde yapılabilir. Adım adım, daha basit yaklaşımlardan birine göz atalım. (Görsel öğrenmeyi tercih ediyorsanız aşağıdaki adımları gösteren bir resim de verilmiştir.)

Öncelikle resmi kaydetmemiz gerekiyor. Peki, bu dosyanın adı ne olacak? Program aynı anda birçok kişi tarafından kullanılabileceğinden statik bir ad kullanırken sorun yaşanabilir. Her kullanıcı için ayrı resim adları oluşturabiliriz (UUID gibi bir şeyle). Ancak daha basit bir yöntem, Python'un tempfile kitaplığını kullanmaktır. Bu kitaplık, benzersiz bir ada sahip geçici bir dosya oluşturur. Aşağıdaki kod, bir geçici dosya oluşturur, adını alır ve resim oluşturma adımını yanıtını geçici dosyaya yazar. Önce bir URL almamız gerektiğinden, henüz kodumuza girmeyeceğiz.

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

Kayıtlı dosyayı işlemenin birkaç yolu vardır ancak en basit ve en güvenli yöntemlerden biri veri URL'si kullanmaktır.

Veri URL'leri, yalnızca yolunu değil, asıl verileri URL'de göndermenize olanak tanır. Veri URL'sinin söz dizimi:

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

Resmin Base64 kodlamasını almak için tempfile tarafından kaydedilen dosyayı açmamız ve bir değişkene okumamız gerekir. Evet, bu büyük bir dize olacaktır ancak modern tarayıcılar ve sunucular için sorun oluşturmaz. Ardından, base64 kitaplığını kullanarak bu değeri, veri URL'sinde gönderebileceğimiz bir dize olarak kodlarız.

Üçüncü adımı (URL oluşturma) gerçekleştirmek için kullanacağımız nihai kod şu şekilde olacaktır:

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

Bu adımların tümünü aşağıdaki resimde görebilirsiniz:

Programınızın başında tempfile ve base64 dosyalarını içe aktarmanız gerekir.

import tempfile
import base64

main.py ile klasörde olduğunuzdan emin olarak ve aşağıdaki komutu çalıştırarak programınızı Cloud Shell'den çalıştırmayı deneyin:

python main.py

Ardından, ekranınızın sağ üst kısmındaki 8080 bağlantı noktasında önizle'yi kullanarak önizleyebilirsiniz.

7. Sık karşılaşılan bir hata

Bir noktada, programı çalıştırırken (test ederken veya dağıttıktan sonra) aşağıdaki gibi bir mesaj aldığınızı fark edebilirsiniz:

Bunun nedeni büyük olasılıkla Google'ın Sorumlu Yapay Zeka Uygulamaları'nı ihlal eden bir istemdir . "Renkli toplarla oynayan yavru kediler" gibi basit bir istem bu soruna neden olabilir. (Ancak endişelenmeyin, "renkli oyuncaklarla oynayan yavru kediler" resimleri bulabilirsiniz.)

Bu hatayı gidermek için resmi oluşturmaya çalışırken ortaya çıkan istisnayı yakalayacak kod ekleyeceğiz. Varsa home.html şablonunu bir mesaj gösterilecek şekilde tekrar oluşturuyoruz.

Öncelikle, home.html şablonuna bir hata oluştuğunda gösterilecek ilk formdan sonra bir div ekleyelim:

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

Ardından, display_image içinde generate_images kodunu çağırırken olası bir istisnayı yakalamak için main.py içine kod ekleyin. Bir istisna varsa kod, home.html şablonunu bir mesajla oluşturur.

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

Bu, Imagen'in sorumlu yapay zeka özelliklerinden yalnızca biri. Resimlerdeki çocukların ve çocukların bulunduğu durumların korunmasını sağlayan çeşitli özellikler ve genel filtreler vardır. Bu konular hakkında daha fazla bilgiyi burada bulabilirsiniz.

8. Uygulamayı web'e dağıtma

Cloud Shell'deki imageapp klasöründeki komutu kullanarak uygulamayı web'e dağıtabilirsiniz. Komutta gerçek proje kimliğinizi kullandığınızdan emin olun.

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

Başvurunuzu nerede bulabileceğinizi belirten aşağıdaki gibi bir yanıt görürsünüz:

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

Cloud Run, hizmet kullanılmadığında ücret almaz ancak container görüntüsünü Artifact Registry'de depolamak için ücretlendirilebilirsiniz. Ücret ödememek için deponuzu veya Cloud projenizi silebilirsiniz. Cloud projenizi sildiğinizde, söz konusu projede kullanılan tüm kaynakların faturalandırması durdurulur.

Kapsayıcı resim deponuzu silmek için:

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

Cloud Run hizmetinizi silmek için:

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

Google Cloud projenizi silmek için:

1. Mevcut proje kimliğinizi alın:

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

2. Silmek istediğiniz projenin bu olduğundan emin olun:

echo $PROJECT_ID

3. Projeyi silme:

gcloud projects delete $PROJECT_ID

10. Tebrikler

Tebrikler, Imagen tarafından oluşturulan resimleri gösterecek bir web uygulaması başarıyla oluşturdunuz. Bu özelliği başvurunuzda nasıl kullanabilirsiniz?

Sırada ne var?

Bu codelab'lerden bazılarına göz atın...

• Üretken yapay zeka: Anahtar kelimelerden resim oluşturma
• Spanner ve Vertex AI Imagen API ile Üretken Yapay Zeka'ya veri aktarma

Daha fazla bilgi

• Vertex AI'da Imagen 3 için geliştirici kılavuzu | Google Cloud Blog
• Vertex AI'da Imagen | Yapay Zeka Görüntü Oluşturucu
• VS Code için Cloud Code uzantısını yükleme
• Sorumlu Yapay Zeka Uygulamaları