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

1. Pengantar

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

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

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 for Python untuk berinteraksi dengan Imagen 3
  • Cara membuat gambar dari perintah teks
  • Cara membuat 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 for 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

Tetapkan informasi project Google Cloud dan buat klien

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

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

  1. Buat 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

Menentukan pengelolaan status memungkinkan Anda menyimpan informasi di seluruh 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: Input yang diberikan pengguna yang akan digunakan untuk pembuatan gambar.
  • enhanced_prompt: Model imagen-3.0-generate-002 menawarkan opsi untuk meningkatkan kualitas 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 dibuat dengan Imagen 3.

4. Menentukan fungsi helper

Fungsi pemuatan

Kode ini akan dieksekusi saat aplikasi dimuat. Menyetel 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 guna membuat 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 ada 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 izin 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 halaman tunggal yang mencakup komponen berikut:

  • Judul
  • Area teks untuk memasukkan perintah gambar
  • Tombol kirim yang memanggil fungsi generate_image
  • Gambar yang dihasilkan Imagen
  • Perintah yang ditingkatkan ditampilkan bersama 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 sinilah 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 maksud perintah asli.

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

Berikut beberapa contoh perintah yang dapat Anda coba:

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

9. Pembersihan

Hentikan 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 berhasil menyelesaikan codelab ini dengan membangun aplikasi menggunakan Imagen dan membuat beberapa gambar.

Survei

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

Langkah berikutnya