Tạo ứng dụng tạo hình ảnh bằng Imagen và Mesop trong Cloud Shell

Tạo ứng dụng tạo hình ảnh bằng Imagen và Mesop trong Cloud Shell

Thông tin về lớp học lập trình này

subjectLần cập nhật gần đây nhất: thg 4 4, 2025
account_circleTác giả: Katie Nguyen

1. Giới thiệu

Hãy tưởng tượng bạn có thể biến một nội dung mô tả bằng văn bản đơn giản thành một hình ảnh sống động, chi tiết chỉ trong vài giây. Đây là sức mạnh của nội dung nghe nhìn tạo sinh, một lĩnh vực phát triển nhanh chóng đang định hình lại cách bạn tạo và tương tác với nội dung hình ảnh. Các mô hình như Imagen 3 của Google trên Vertex AI đang mang đến các tính năng AI tạo sinh hiện đại cho nhà phát triển ứng dụng.

Imagen 3 là mô hình chuyển văn bản thành hình ảnh chất lượng cao nhất của Google từ trước đến nay. Máy ảnh này có thể tạo ra hình ảnh với chi tiết đáng kinh ngạc. Do đó, nhà phát triển có nhiều quyền kiểm soát hơn khi xây dựng các sản phẩm AI thế hệ mới, giúp biến trí tưởng tượng của họ thành các thành phần hình ảnh chất lượng cao. Tìm hiểu thêm về Imagen trên Vertex AI.

Lớp học lập trình này sẽ hướng dẫn bạn khai thác sức mạnh của Imagen bằng cách sử dụng SDK AI tạo sinh của Google. Bạn sẽ không chỉ khám phá cách tạo hình ảnh tuyệt đẹp từ lời nhắc văn bản mà còn tích hợp khả năng này vào một ứng dụng web bằng cách sử dụng Mesop, một khung giao diện người dùng Python.

Điều kiện tiên quyết

Kiến thức bạn sẽ học được

  • Cách sử dụng SDK AI tạo sinh của Google cho Python để tương tác với Imagen 3
  • Cách tạo hình ảnh từ câu lệnh dạng văn bản
  • Cách tạo ứng dụng Mesop và chạy ứng dụng đó từ Cloud Shell

Bạn cần có

  • Hiểu biết cơ bản về Python
  • Trải nghiệm chạy lệnh trong cửa sổ dòng lệnh Cloud Shell
  • Máy tính có quyền truy cập vào Cloud Shell

2. Thiết lập môi trường và cài đặt phần phụ thuộc

  1. Mở Trình chỉnh sửa Cloud Shell
  2. Nhấp vào nút Mở Terminal ở góc trên bên phải
  3. Tạo thư mục mới bằng cách nhập lệnh sau vào dòng lệnh:
mkdir my-imagen-app
  1. Thay đổi thư mục thành thư mục mới:
cd my-imagen-app
  1. Tạo môi trường ảo trong Python 3:
python3 -m venv myenv
  1. Kích hoạt môi trường ảo:
source myenv/bin/activate
  1. Cài đặt Mesop:
pip3 install mesop
  1. Cài đặt SDK Google Gen AI cho Python:
pip install google-genai
  1. Tạo tệp Python:
touch main.py

3. Thiết lập ứng dụng

Tất cả mã cần thiết để chạy ứng dụng Mesop sẽ tồn tại trong main.py. Trong mỗi bước tiếp theo, hãy sao chép và dán mã này theo tuần tự vào tệp này trong Trình chỉnh sửa Cloud Shell.

Nhập thư viện

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

Đặt thông tin dự án trên Google Cloud và tạo ứng dụng

  1. Đặt mã dự án:
PROJECT_ID = "[your-project-id]"

Thay thế [your-project-id] bằng tên dự án Google Cloud của bạn khi bạn sao chép dòng mã này.

  1. Tạo ứng dụng:
client = genai.Client(vertexai=True, project=PROJECT_ID, location="us-central1")

Tải mô hình tạo hình ảnh

imagen_model = "imagen-3.0-generate-002"

Quản lý trạng thái

Việc xác định tính năng quản lý trạng thái cho phép bạn lưu trữ thông tin trong suốt hành trình của người dùng.

@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: Dữ liệu đầu vào do người dùng cung cấp sẽ được dùng để tạo hình ảnh.
  • enhanced_prompt: Mô hình imagen-3.0-generate-002 cung cấp tuỳ chọn để cải thiện câu lệnh bạn cung cấp. Một lời nhắc mới, chi tiết sẽ được tạo từ lời nhắc ban đầu của bạn để giúp tạo hình ảnh chất lượng cao hơn và sẽ được trả về trong biến này.
  • img_data: Vị trí trên Cloud Storage hoặc số byte hình ảnh của một hình ảnh được tạo bằng Imagen 3.

4. Xác định hàm trợ giúp

Hàm tải

Mã này sẽ được thực thi khi ứng dụng tải. Phương thức này đặt chế độ của ứng dụng thành màu hệ thống.

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

Hàm làm mờ

Hàm này lưu dữ liệu đầu vào của người dùng vào biến trạng thái.

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

5. Tạo hình ảnh bằng Imagen

Hàm này được gọi khi người dùng nhấp vào một nút để gửi lời nhắc văn bản để tạo hình ảnh.

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

Bạn có thể định cấu hình các chế độ cài đặt trong 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

Lưu ý: Tuỳ chọn duy nhất sẽ hoạt động mà không cần thêm danh sách cho phép là DONT_ALLOW.

6. Bố cục ứng dụng có cấu trúc

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

Mã này tạo một ứng dụng một trang bao gồm các thành phần sau:

  • Tiêu đề
  • Vùng văn bản để nhập câu lệnh về hình ảnh
  • Nút Gửi gọi hàm generate_image
  • Hình ảnh do Imagen tạo
  • Lời nhắc nâng cao được trả về cùng với hình ảnh

7. Chạy ứng dụng trong Cloud Shell

  1. Sau khi sao chép tất cả các đoạn mã vào main.py, bạn có thể chạy ứng dụng Mesop từ dòng lệnh Cloud Shell.
    mesop main.py
  2. Bây giờ, hãy nhấp vào nút Xem trước trên web ở góc trên bên phải, rồi nhấp vào Thay đổi cổng. Nhập 32123 vào hộp Số điện thoại di động, sau đó nhấp vào Thay đổi và xem trước. Một cửa sổ mới sẽ mở ra để bạn có thể xem ứng dụng đã tải. Cửa sổ này sẽ có dạng như sau: Ảnh chụp màn hình ứng dụng

8. Kiểm thử Imagen 3

Đây là nơi bạn có thể thử Imagen bằng câu lệnh văn bản của riêng mình. Bạn có thể tạo hình ảnh theo nhiều phong cách, từ ảnh chân thực, ảnh động đến nhiều phong cách nghệ thuật khác nhau. Bạn cũng có thể chỉ định các góc máy ảnh, ống kính cụ thể và nhiều thông tin khác. Câu lệnh văn bản ban đầu của bạn cũng sẽ được viết lại thông qua một tính năng dựa trên LLM để tạo ra hình ảnh chất lượng cao hơn, phản ánh rõ hơn ý định của câu lệnh ban đầu.

Lưu ý: Để tạo hình ảnh có con người, bạn cần có thêm quyền truy cập. Trong thời gian chờ đợi, bạn sẽ gặp lỗi nếu câu lệnh của bạn bao gồm việc tạo người hoặc khuôn mặt.

Dưới đây là một số câu lệnh ví dụ mà bạn có thể thử:

  1. Một chiếc mũ bóng chày màu be có dòng chữ "good vibes" (cảm giác tốt) ở trên cùng bằng chữ trắng được thêu nổi và viền màu xanh lục neon.
  2. Một cửa hàng kẹo kỳ lạ.
  3. Một tấm bưu thiếp hoạt hình về Las Vegas, có tên thành phố được viết đầy đủ và một con tem ở góc bên phải.
  4. Một chú chó con và một chú mèo con đang chơi đùa với một cuộn len.

9. Dọn dẹp

Dừng ứng dụng

Quay lại dòng lệnh mà bạn đã khởi chạy ứng dụng và thoát bằng Ctrl C.

Huỷ kích hoạt môi trường ảo

Trong cùng một dòng lệnh, hãy nhập lệnh sau:

deactivate

10. Kết luận

Xin chúc mừng! Bạn đã hoàn thành thành công lớp học lập trình này bằng cách tạo một ứng dụng bằng Imagen và tạo một số hình ảnh.

Khảo sát

Hãy cho chúng tôi biết suy nghĩ của bạn về lớp học lập trình này bằng cách điền vào bản khảo sát ngắn này.

Các bước tiếp theo