Halaman ini diterjemahkan oleh Cloud Translation API.

Men-deploy Imagen ke Cloud Run

1. Tentang codelab ini

Terakhir Diperbarui: 11-10-2024

Ditulis oleh: Laurie White

Pembuatan gambar

Sejujurnya, pembuatan gambar oleh Model Bahasa Besar (LLM) bisa jadi menyenangkan. Tentu saja ada banyak aplikasi bisnis untuk membuat gambar dari perintah, mulai dari iklan yang disesuaikan hingga presentasi yang menarik. (Situs Web Google Cloud memiliki banyak penggunaan spesifik dari perusahaan yang menggunakan Agen Materi Iklan.) Namun, melihat hasil yang muncul saat Anda meminta gambar " hijau yang bahagia di ladang" bisa cukup lucu.

Baik Anda tertarik dengan pembuatan gambar untuk alasan profesional atau rekreasi (atau keduanya), ada beberapa tantangan antara menggunakan program pembuatan gambar dan men-deploy-nya ke aplikasi web. Lab ini akan membantu Anda mengatasi tantangan tersebut.

Yang akan Anda bangun

Dalam codelab ini, Anda akan mem-build aplikasi yang akan mengambil perintah teks dan akan menampilkan halaman web dengan gambar yang dibuat menggunakan perintah tersebut.

Yang akan Anda pelajari

Di lab ini, Anda akan mempelajari:

Cara menggunakan Google Imagen untuk membuat gambar dari perintah teks di lingkungan notebook
Kesulitan saat memindahkan kode Imagen dari notebook ke aplikasi web
Cara men-deploy aplikasi Cloud Run yang menggunakan Imagen untuk membuat gambar
Cara menyertakan gambar dari Imagen dalam HTML

Codelab ini berfokus pada Imagen dan deployment. Konsep dan blok kode yang tidak relevan akan dibahas sekilas dan disediakan, jadi Anda cukup menyalin dan menempelkannya.

Yang Anda butuhkan

Browser Chrome versi terbaru.
Sedikit pengetahuan tentang Cloud Run. Anda bisa mendapatkannya dari codelab yang cukup singkat di sini.
Pemahaman tentang cara mengedit file di Cloud Shell atau Cloud Shell Editor. Anda dapat mempelajari Cloud Shell dan Editor Cloud Shell lebih lanjut dari Codelab ini.
Project Google Cloud yang mengaktifkan penagihan. Panduan ini akan menunjukkan cara membuat project. Ada banyak produk dengan paket gratis dan uji coba gratis yang tersedia.

Kode lengkap untuk codelab ini tersedia di https://github.com/Annie29/imagen-deployment .

2. Mengaktifkan API

Pilih project yang akan digunakan untuk Codelab ini. Anda dapat membuat project baru untuk memudahkan penghapusan semua pekerjaan setelah selesai.

Sebelum dapat memulai dengan Imagen, Anda harus mengaktifkan beberapa API.

Buka Konsol Google Cloud.
Buka Dasbor Vertex AI.
Pilih "Enable All Recommended APIs"

3. Menjelajahi Google Imagen (opsional)

Jika sudah memahami Imagen, Anda dapat melewati bagian ini.

Sebelum mencoba membuat aplikasi web yang menggunakan Imagen, sebaiknya lihat apa yang dapat dilakukan Imagen. Untungnya, ada sejumlah notebook yang menjalankan kode Imagen sederhana, jadi mari kita mulai dengan salah satunya.

Buka notebook di https://github.com/GoogleCloudPlatform/generative-ai/blob/main/vision/getting-started/image_generation.ipynb .
Pilih Buka di Colab untuk membuka notebook di server notebook Google.
Pilih "File -> Simpan salinan di Drive" atau klik "Salin ke Drive" di bagian atas halaman untuk membuat salinan notebook ini sendiri.
Tutup salinan asli (hanya untuk menghindari bekerja di salinan yang salah).
Anda harus terhubung ke runtime dengan mengklik tombol Hubungkan di kanan atas.
Mulai kerjakan setiap sel di notebook.
Untuk menjalankan sel, Anda dapat mengklik [] atau panah di sebelah kiri sel atau menggunakan opsi Run Selection dari menu Runtime (atau pintasannya):
Saat memulai ulang runtime saat ini, Anda akan mendapatkan pesan bahwa sistem Anda mengalami error. Namun, Anda tidak perlu panik. Hal ini wajar.
Anda harus mengautentikasi lingkungan notebook.
Anda dapat memasukkan project id (bukan nama) dan lokasi (us-central1 berfungsi jika Anda belum menetapkan lokasi) di kotak di sebelah kanan kode dan meminta Colab menyisipkannya dalam kode untuk Anda.
Saat Anda membuka "Buat gambar", Anda akan memiliki kesempatan untuk melihat kemampuan Imagen. Jangan ragu untuk mengubah perintah dan menjalankan ulang sel untuk melihat berbagai gambar yang dapat Anda dapatkan.
Pada tahap ini, Anda seharusnya memiliki pemahaman yang baik tentang cara Imagen membuat gambar dari notebook. Jangan ragu untuk menyelesaikan notebook ini guna melihat parameter gambar lebih lanjut sekarang atau pada waktu yang tepat.

4. Mulai mem-build aplikasi web untuk menampilkan gambar

Kita akan menggunakan Python menggunakan framework Flask di Cloud Run untuk mem-build aplikasi.

Aplikasi Python Flask disiapkan di folder sebagai berikut:

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

Template adalah file yang berisi HTML, biasanya dengan placeholder bernama tempat program akan menyisipkan teks yang dihasilkan. main.py adalah aplikasi server web itu sendiri, dan requirements.txt adalah daftar semua library non-standar yang digunakan main.py.

Aplikasi akan memiliki dua halaman–halaman pertama untuk mendapatkan perintah dan halaman kedua untuk menampilkan gambar dan memungkinkan pengguna memasukkan perintah lain.

Pertama, buat framework project.

Membuat struktur file

Codelab ini mengasumsikan bahwa project Anda berada di folder imageapp. Jika Anda menggunakan nama yang berbeda, pastikan untuk memperbarui perintah sebagaimana mestinya.

Masuk ke Cloud Shell dengan memilih ikon perintah di kanan atas layar.

Anda dapat mendapatkan lebih banyak ruang untuk bekerja jika memindahkan shell ke tab baru, menggunakan panah di bagian atas jendela shell:

Dari direktori beranda di Cloud Shell, buat folder imageapp, beralih ke folder tersebut, lalu buat folder templates. Anda dapat melakukannya dari command line atau editor Cloud Shell.

Membuat template

Aplikasi akan memiliki dua halaman–halaman pertama (yang akan kita sebut home.html) untuk mendapatkan perintah dan halaman kedua (yang akan kita sebut display.html) untuk menampilkan gambar dan memungkinkan pengguna memasukkan perintah lain.

Dengan menggunakan editor Cloud Shell atau editor Linux pilihan Anda, buat dua template. Dari folder imageapp/templates, buat halaman awal yang akan dilihat pengguna, home.html. Fungsi ini menggunakan variabel prompt untuk menampilkan deskripsi yang dimasukkan pengguna.

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>

Kemudian, buat display.html, yang akan menampilkan gambar. Perhatikan bahwa lokasi gambar akan berada di 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. Memulai kode

Anda harus membuat file requirements.txt untuk memastikan semua library yang diperlukan program Anda tersedia. Untuk saat ini, cukup sertakan flask dalam file requirements.txt.

File main.py berisi kode yang akan menayangkan permintaan web. Hanya ada dua permintaan yang harus kita tangani: permintaan GET untuk halaman beranda, dan permintaan POST yang mengirimkan formulir yang menjelaskan gambar yang ingin kita buat.

Dengan menggunakan editor Cloud Shell atau editor Linux pilihan Anda, buat file main.py di folder imageapp. Kita akan memulai dengan kerangka di bawah ini:

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)

Sebenarnya, itu hampir seluruh aplikasi. Ada tiga komentar di display_image yang perlu dilengkapi dengan kode Python, dan itu saja.

Mari kita mulai mengisi bagian yang kosong tersebut. Flask memudahkan pengambilan perintah. Tambahkan baris setelah komentar seperti yang ditunjukkan di bawah:

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

Jika ingin menguji aplikasi sekarang, Anda dapat menambahkan baris sebelum pernyataan return di display_image untuk memberikan nilai ke image_url (URL valid yang mengarah ke gambar).

Contoh: image_url="<your url here>"

Anda dapat menjalankan program secara lokal dari Cloud Shell (menggunakan perintah python main.py) dan melihat pratinjaunya menggunakan Pratinjau di port 8080 di kanan atas layar.

Seperti program saat ini, Anda akan selalu melihat gambar di URL yang Anda berikan. Mari kita lanjutkan dan lihat cara mendapatkan nilai tersebut dari aplikasi. Pastikan untuk menghapus baris yang memberikan nilai statis ke image_url.

6. Membuat image

Google Cloud memiliki API Python untuk AI Generatif di Vertex AI. Untuk menggunakannya, kita harus menambahkan baris yang mengimpornya dengan impor lainnya di dekat bagian atas program:

from vertexai.vision_models import ImageGenerationModel

dan sertakan vertexai dalam file requirements.txt.

Dokumentasi untuk ImageGenerationModel menunjukkan cara menggunakannya. Kita akan membuat model, lalu membuat gambar darinya, dengan perintah. Tambahkan kode ke main.py untuk langkah kedua, membuat image dan menyimpannya di response:

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

Maksimal 4 gambar dapat dibuat sekaligus, bergantung pada parameter yang dikirim ke generate_images, sehingga nilai yang ditampilkan akan berupa daftar GeneratedImage, meskipun hanya ada satu gambar yang ditampilkan, seperti dalam kasus ini.

Sekarang kita perlu menampilkan gambar di halaman WWW. GeneratedImage memang memiliki metode untuk show gambar, tetapi hanya berfungsi di lingkungan notebook. Namun, ada metode untuk menyimpan gambar. Kita akan menyimpan gambar dan mengirim URL gambar yang disimpan saat merender template.

Cara ini sedikit rumit dan ada banyak cara untuk melakukannya. Mari kita lihat salah satu pendekatan yang lebih sederhana, langkah demi langkah. (Dan ada gambar langkah-langkah di bawah jika Anda lebih suka belajar secara visual.)

Pertama, kita harus menyimpan gambar. Tapi, apa namanya? Mungkin ada masalah saat menggunakan nama statis karena program dapat digunakan oleh banyak orang secara bersamaan. Meskipun kita dapat membuat nama gambar terpisah untuk setiap pengguna (dengan sesuatu seperti UUID), cara yang lebih sederhana adalah menggunakan library tempfile Python yang akan membuat file sementara dengan nama unik. Kode di bawah akan membuat tempfile, mendapatkan namanya, dan menulis respons langkah pembuatan gambar ke tempfile. Kita belum akan memasukkannya ke dalam kode, karena kita perlu mendapatkan URL terlebih dahulu.

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

Ada sejumlah cara untuk memproses file yang disimpan, tetapi salah satu cara yang paling sederhana dan aman adalah menggunakan URL data.

URL data memungkinkan data sebenarnya dikirim dalam URL, bukan hanya jalur ke data tersebut. Sintaksis untuk URL data adalah:

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

Untuk mendapatkan encoding base64 gambar, kita harus membuka file yang disimpan oleh tempfile dan membacanya ke dalam variabel. Ya, ini akan menjadi string yang besar, tetapi tidak akan masalah dengan browser dan server modern. Selanjutnya, kita akan menggunakan library base64 untuk mengenkodenya menjadi string yang dapat kita kirim dalam URL data.

Kode akhir kita untuk melakukan langkah ketiga (membuat URL) adalah:

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

Anda dapat melihat semua langkah ini pada gambar di bawah:

Anda harus mengimpor tempfile dan base64 di awal program.

import tempfile
import base64

Coba jalankan program dari Cloud Shell dengan memastikan Anda berada di folder dengan main.py dan menjalankan perintah:

python main.py

Kemudian, Anda dapat melihat pratinjaunya menggunakan Pratinjau di port 8080 di kanan atas layar.

7. Error umum

Pada suatu saat, Anda mungkin melihat bahwa saat menjalankan program (baik saat menguji atau setelah men-deploy-nya), Anda menerima pesan seperti berikut:

Hal ini kemungkinan besar disebabkan oleh perintah yang melanggar Praktik Responsible AI Google . Perintah sesederhana "anak kucing bermain dengan bola berwarna-warni" dapat menyebabkan masalah ini. (Namun jangan khawatir, Anda dapat mendapatkan gambar "anak kucing bermain dengan mainan berwarna-warni".)

Untuk mengatasi error ini, kita akan menambahkan kode untuk menangkap pengecualian yang muncul saat kita mencoba membuat gambar. Jika ada, kita akan merender template home.html lagi, dengan pesan yang ditampilkan.

Pertama, mari kita tambahkan div di template home.html setelah formulir pertama yang akan ditampilkan jika ada error:

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

Kemudian, tambahkan kode di main.py untuk menangkap kemungkinan pengecualian saat memanggil kode generate_images di display_image. Jika ada pengecualian, kode akan merender template home.html dengan pesan.

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

Ini bukan satu-satunya fitur Responsible AI dari Imagen. Ada sejumlah fitur yang melindungi pembuatan gambar orang dan anak-anak serta filter umum pada gambar. Anda dapat melihat selengkapnya di sini.

8. Men-deploy aplikasi ke web

Anda dapat men-deploy aplikasi ke web menggunakan perintah dari folder imageapp di Cloud Shell. Pastikan untuk menggunakan project ID yang sebenarnya dalam perintah.

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

Anda akan melihat respons seperti berikut, yang memberi tahu Anda tempat menemukan permohonan Anda:

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

Meskipun Cloud Run tidak mengenakan biaya saat layanannya tidak digunakan, Anda mungkin tetap ditagih atas penyimpanan image container di Artifact Registry. Anda dapat menghapus repositori atau menghapus project Cloud untuk menghindari tagihan. Menghapus project Cloud akan menghentikan penagihan untuk semua resource yang digunakan dalam project tersebut.

Untuk menghapus repositori image container:

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

Untuk menghapus layanan Cloud Run:

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

Untuk menghapus project Google Cloud:

Ambil project ID Anda saat ini:

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

Pastikan ini adalah project yang ingin Anda hapus:

echo $PROJECT_ID

Menghapus project:

gcloud projects delete $PROJECT_ID

10. Selamat

Selamat, Anda telah berhasil mem-build aplikasi web yang akan menampilkan gambar yang dibuat oleh Imagen. Bagaimana Anda dapat menggunakannya dalam aplikasi?

Apa selanjutnya?

Lihat beberapa codelab ini...