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

1. Giới thiệu

Hãy tưởng tượng bạn có thể biến một nội dung mô tả đơn giản bằng văn bản thành một hình ảnh sống động và chi tiết chỉ trong vài giây. Đây chính là sức mạnh của nội dung đa phương tiệ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 trực quan. 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 có chất lượng cao nhất của Google cho đến nay. Mô hình này có khả năng tạo hình ảnh với độ chi tiết đáng kinh ngạc. Do đó, nhà phát triển có thể kiểm soát chặt chẽ hơn khi xây dựng các sản phẩm AI thế hệ tiếp theo, giúp biến trí tưởng tượng của họ thành các thành phần trực quan có 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 cách khai thác sức mạnh của Imagen bằng Google Gen AI SDK. Bạn không chỉ khám phá cách tạo hình ảnh tuyệt đẹp từ câu lệnh bằng văn bản mà còn tích hợp tính năng này vào một ứng dụng web bằng Mesop, một khung giao diện người dùng Python.

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

Một dự án trên Google Cloud đã bật tính năng thanh toán và Vertex AI API. Tìm hiểu thêm về cách thiết lập dự án và môi trường phát triển.

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

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

Bạn cần có

Hiểu biết cơ bản về Python
Có kinh nghiệm chạy lệnh trong một dòng lệnh Cloud Shell
Một 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 các phần phụ thuộc

Mở Trình chỉnh sửa Cloud Shell
Nhấp vào nút Mở dòng lệnh ở góc trên bên phải
Tạo một thư mục mới bằng cách nhập lệnh sau vào dòng lệnh:

mkdir my-imagen-app

Thay đổi thư mục thành thư mục mới:

cd my-imagen-app

Tạo một môi trường ảo trong Python 3:

python3 -m venv myenv

Kích hoạt môi trường ảo:

source myenv/bin/activate

Cài đặt Mesop:

pip3 install mesop

Cài đặt Google Gen AI SDK cho Python:

pip install google-genai

Tạo một 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ẽ nằm trong main.py. Trong mỗi bước tiếp theo, hãy sao chép và dán mã theo trình 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 đám mây của Google và tạo ứng dụng

Đặt mã dự án:

PROJECT_ID = "[your-project-id]"

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

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: Thông tin đầ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 nâng cao câu lệnh mà bạn cung cấp. Một câu lệnh mới và chi tiết sẽ được tạo từ câu lệnh gốc để giúp tạo hình ảnh có 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 byte hình ảnh của một hình ảnh được tạo bằng Imagen 3.

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

Hàm tải

Mã này sẽ được thực thi khi ứng dụng tải. Mã 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 hoạt động đầ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 câu lệnh bằng văn bản nhằm 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 nằm 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 hoạt động mà không cần thêm danh sách cho phép là DONT_ALLOW.

6. Cấu trúc bố cục ứng dụng

@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 trang đơn 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
Một hình ảnh do Imagen tạo
Câu lệnh nâng cao được trả về cùng với hình ảnh

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

Sau khi sao chép tất 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
```
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, sau đó nhấp vào Thay đổi cổng. Nhập 32123 vào hộp Số cổ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:

8. Kiểm thử Imagen 3

Đây là nơi bạn có thể dùng thử Imagen với câu lệnh bằng 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 hoạt hình đến nhiều phong cách nghệ thuật khác nhau. Bạn cũng có thể chỉ định các góc camera, ống kính cụ thể và nhiều yếu tố khác. Câu lệnh bằng văn bản gốc 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 (mô hình ngôn ngữ lớn) nhằm tạo ra hình ảnh có chất lượng cao hơn, phản ánh rõ hơn ý định của câu lệnh gốc.

Lưu ý: Việc tạo hình ảnh về người đòi hỏi phải có quyền truy cập bổ sung. 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.

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

Một chiếc mũ bóng chày màu be có dòng chữ “good vibes” được viết bằng chữ bong bóng màu trắng được khâu và viền bằng màu xanh neon.
Một cửa hàng bánh kẹo kỳ lạ.
Một tấm bưu thiếp hoạt hình về Las Vegas có tên thành phố được viết rõ ràng và một con tem ở góc bên phải.
Một chú chó con và một chú mèo con đang chơi với cuộn len.

9. Dọn dẹp

Dừng ứng dụng

Quay lại dòng lệnh nơi bạn 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 tất 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 ý kiến 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.