Mem-build Aplikasi Pembuatan Gambar dengan Imagen dan Mesop di Cloud Shell

Mem-build Aplikasi Pembuatan Gambar dengan Imagen dan Mesop di Cloud Shell

Tentang codelab ini

subjectTerakhir diperbarui Apr 4, 2025
account_circleDitulis oleh Katie Nguyen

1. Pengantar

Bayangkan mengubah deskripsi teks sederhana menjadi gambar yang cerah dan mendetail dalam hitungan detik. Inilah kekuatan media generatif, bidang yang berkembang pesat dan mengubah cara Anda membuat serta berinteraksi dengan konten visual. Model seperti Imagen 3 Google di Vertex AI menghadirkan kemampuan AI generatif yang canggih kepada developer aplikasi.

Imagen 3 adalah model text-to-image berkualitas terbaik Google hingga saat ini. Kamera ini mampu membuat gambar dengan detail yang menakjubkan. Dengan demikian, developer memiliki lebih banyak kontrol saat membuat produk AI generasi berikutnya yang mengubah imajinasi mereka menjadi aset visual berkualitas tinggi. Pelajari Imagen di Vertex AI lebih lanjut.

Codelab ini akan memandu Anda memanfaatkan kecanggihan Imagen menggunakan Google Gen AI SDK. Anda tidak hanya akan mempelajari cara membuat gambar yang menakjubkan dari perintah teks, tetapi juga mengintegrasikan kemampuan ini ke dalam aplikasi web menggunakan Mesop, framework UI Python.

Prasyarat

Yang akan Anda pelajari

  • Cara menggunakan Google Gen AI SDK untuk Python guna berinteraksi dengan Imagen 3
  • Cara membuat gambar dari perintah teks
  • Cara mem-build aplikasi Mesop dan menjalankannya dari Cloud Shell

Yang Anda butuhkan

  • Pemahaman dasar tentang Python
  • Pengalaman menjalankan perintah di terminal Cloud Shell
  • Komputer dengan akses ke Cloud Shell

2. Menyiapkan lingkungan & menginstal dependensi

  1. Buka Cloud Shell Editor
  2. Klik tombol Open Terminal di pojok kanan atas
  3. Buat folder baru dengan memasukkan perintah berikut di terminal:
mkdir my-imagen-app
  1. Ubah direktori ke folder baru Anda:
cd my-imagen-app
  1. Buat lingkungan virtual di Python 3:
python3 -m venv myenv
  1. Aktifkan lingkungan virtual:
source myenv/bin/activate
  1. Instal Mesop:
pip3 install mesop
  1. Instal Google Gen AI SDK untuk Python:
pip install google-genai
  1. Buat file Python:
touch main.py

3. Penyiapan aplikasi

Semua kode yang diperlukan untuk menjalankan aplikasi Mesop akan ada di main.py. Dalam setiap langkah berikutnya, salin dan tempel secara berurutan di file ini di Cloud Shell Editor.

Mengimpor library

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

Menetapkan informasi project Google Cloud dan membuat klien

  1. Tetapkan Project ID Anda:
PROJECT_ID = "[your-project-id]"

Ganti [your-project-id] dengan nama project Google Cloud Anda saat menyalin baris kode ini.

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

Memuat model pembuatan gambar

imagen_model = "imagen-3.0-generate-002"

Pengelolaan status

Dengan menentukan pengelolaan status, Anda dapat menyimpan informasi di sepanjang perjalanan pengguna.

@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: Pengguna memberikan input yang akan digunakan untuk pembuatan gambar.
  • enhanced_prompt: Model imagen-3.0-generate-002 menawarkan opsi untuk meningkatkan perintah yang Anda berikan. Perintah baru yang mendetail akan dibuat dari perintah asli Anda untuk membantu menghasilkan gambar berkualitas lebih tinggi dan akan ditampilkan dalam variabel ini.
  • img_data: Lokasi Cloud Storage atau byte gambar dari gambar yang dihasilkan dengan Imagen 3.

4. Menentukan fungsi bantuan

Fungsi pemuatan

Kode ini akan dieksekusi saat aplikasi dimuat. Tindakan ini menetapkan mode aplikasi ke warna sistem.

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

Fungsi blur

Fungsi ini menyimpan input pengguna ke variabel status Anda.

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

5. Membuat gambar dengan Imagen

Fungsi ini dipanggil saat pengguna mengklik tombol untuk mengirimkan perintah teks untuk pembuatan gambar.

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

Anda dapat mengonfigurasi setelan yang terletak di 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

Catatan: Satu-satunya opsi yang akan berfungsi tanpa daftar yang diizinkan tambahan adalah DONT_ALLOW.

6. Menyusun tata letak aplikasi

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

Kode ini membuat aplikasi web satu halaman yang menyertakan komponen berikut:

  • Judul
  • Area teks untuk memasukkan perintah gambar
  • Tombol kirim yang memanggil fungsi generate_image
  • Gambar yang dihasilkan Imagen
  • Perintah yang ditingkatkan yang ditampilkan dengan gambar

7. Menjalankan aplikasi di Cloud Shell

  1. Setelah menyalin semua cuplikan kode ke main.py, Anda dapat menjalankan aplikasi Mesop dari terminal Cloud Shell.
    mesop main.py
  2. Sekarang, klik tombol Pratinjau Web di pojok kanan atas, lalu klik Ubah port. Ketik 32123 di kotak Port Number, lalu klik Change and Preview. Jendela baru akan terbuka tempat Anda dapat melihat aplikasi yang dimuat. Jendela tersebut akan terlihat seperti ini: Screenshot Aplikasi

8. Menguji Imagen 3

Di sini Anda dapat mencoba Imagen dengan perintah teks Anda sendiri. Anda dapat membuat gambar dalam berbagai gaya, mulai dari fotorealisme, animasi, hingga gaya artistik yang berbeda. Anda juga dapat menentukan sudut kamera, lensa, dan lainnya. Perintah teks asli Anda juga akan ditulis ulang melalui fitur berbasis LLM yang dimaksudkan untuk menghasilkan gambar berkualitas lebih tinggi yang lebih mencerminkan intent perintah asli.

Catatan: Membuat gambar orang memerlukan akses tambahan. Sementara itu, Anda akan mendapatkan error jika perintah Anda menyertakan pembuatan orang atau wajah.

Berikut adalah beberapa contoh perintah yang dapat Anda coba:

  1. Topi bisbol berwarna krem dengan tulisan 'good vibes' di bagian atas dalam huruf putih bertekstur bergelembung yang dijahit dan digarisi dengan warna hijau neon.
  2. Toko permen yang unik.
  3. Kartu pos kartun Las Vegas dengan nama kota yang dieja dan stempel pos di sudut kanan.
  4. Anak dan anak kucing bermain dengan bola benang.

9. Pembersihan

Menghentikan aplikasi

Kembali ke terminal tempat Anda meluncurkan aplikasi dan keluar dengan Ctrl C.

Menonaktifkan lingkungan virtual

Di terminal yang sama, ketik perintah berikut:

deactivate

10. Kesimpulan

Selamat! Anda telah berhasil menyelesaikan codelab ini dengan mem-build aplikasi dengan Imagen dan membuat beberapa gambar.

Survei

Beri tahu kami pendapat Anda tentang codelab ini dengan mengisi survei singkat ini.

Langkah berikutnya

bug_report Laporkan kesalahan