สร้างแอปการสร้างรูปภาพด้วย Imagen และ Mesop ใน Cloud Shell

1. บทนำ

ลองนึกภาพการเปลี่ยนคำอธิบายข้อความธรรมดาๆ ให้กลายเป็นรูปภาพที่มีสีสันสดใสและมีรายละเอียดภายในไม่กี่วินาที นี่คือพลังของสื่อ Generative ซึ่งเป็นสาขาที่พัฒนาอย่างรวดเร็วและกำลังปรับเปลี่ยนวิธีที่คุณสร้างและโต้ตอบกับเนื้อหาภาพ โมเดลอย่าง Imagen 3 ของ Google ใน Vertex AI กำลังนำความสามารถของ Generative AI ที่ล้ำสมัยมาสู่นักพัฒนาแอปพลิเคชัน

Imagen 3 เป็นโมเดลการเปลี่ยนข้อความเป็นรูปภาพคุณภาพสูงสุดของ Google ในปัจจุบัน โดยสามารถสร้างรูปภาพที่มีรายละเอียดน่าทึ่ง ดังนั้น นักพัฒนาซอฟต์แวร์จึงควบคุมได้มากขึ้นเมื่อสร้างผลิตภัณฑ์ AI รุ่นถัดไปที่เปลี่ยนจินตนาการให้กลายเป็นชิ้นงานภาพคุณภาพสูง ดูข้อมูลเพิ่มเติมเกี่ยวกับ Imagen ใน Vertex AI

Codelab นี้จะแนะนำวิธีใช้ประโยชน์จากความสามารถของ Imagen โดยใช้ Google Gen AI SDK คุณจะได้ไม่เพียงแค่สำรวจวิธีสร้างรูปภาพที่น่าทึ่งจากพรอมต์ข้อความเท่านั้น แต่ยังได้ผสานรวมความสามารถนี้เข้ากับเว็บแอปพลิเคชันโดยใช้ Mesop ซึ่งเป็นเฟรมเวิร์ก UI ของ Python อีกด้วย

ข้อกำหนดเบื้องต้น

• โปรเจ็กต์ Google Cloud ที่เปิดใช้การเรียกเก็บเงินและ Vertex AI API ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าโปรเจ็กต์และสภาพแวดล้อมในการพัฒนาซอฟต์แวร์

สิ่งที่คุณจะได้เรียนรู้

• วิธีใช้ Google Gen AI SDK สำหรับ Python เพื่อโต้ตอบกับ Imagen 3
• วิธีสร้างรูปภาพจากพรอมต์ข้อความ
• วิธีสร้างแอป Mesop และดำเนินการจาก Cloud Shell

สิ่งที่คุณต้องมี

• ความเข้าใจพื้นฐานเกี่ยวกับ Python
• สัมผัสประสบการณ์การเรียกใช้คำสั่งในเทอร์มินัล Cloud Shell
• คอมพิวเตอร์ที่มีสิทธิ์เข้าถึง Cloud Shell

2. ตั้งค่าสภาพแวดล้อมและติดตั้งการอ้างอิง

1. เปิด Cloud Shell Editor
2. คลิกปุ่มเปิดเทอร์มินัลที่มุมขวาบน
3. สร้างโฟลเดอร์ใหม่โดยป้อนคำสั่งต่อไปนี้ในเทอร์มินัล

mkdir my-imagen-app

4. เปลี่ยนไดเรกทอรีเป็นโฟลเดอร์ใหม่

cd my-imagen-app

5. สร้างสภาพแวดล้อมเสมือนใน Python 3

python3 -m venv myenv

6. เปิดใช้งานสภาพแวดล้อมเสมือน

source myenv/bin/activate

7. ติดตั้ง Mesop

pip3 install mesop

8. ติดตั้ง Google Gen AI SDK สำหรับ Python

pip install google-genai

9. สร้างไฟล์ Python

touch main.py

3. การตั้งค่าแอป

โค้ดทั้งหมดที่จำเป็นในการเรียกใช้แอป Mesop จะอยู่ใน main.py ในแต่ละขั้นตอนถัดไป ให้คัดลอกและวางตามลำดับในไฟล์นี้ใน Cloud Shell Editor

นำเข้าไลบรารี

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

ตั้งค่าข้อมูลโปรเจ็กต์ Google Cloud และสร้างไคลเอ็นต์

1. ตั้งค่ารหัสโปรเจ็กต์

PROJECT_ID = "[your-project-id]"

แทนที่ [your-project-id] ด้วยชื่อโปรเจ็กต์ Google Cloud เมื่อคัดลอกบรรทัดโค้ดนี้

2. สร้างไคลเอ็นต์

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

โหลดโมเดลการสร้างรูปภาพ

imagen_model = "imagen-3.0-generate-002"

การจัดการสถานะ

การกำหนดการจัดการสถานะช่วยให้คุณจัดเก็บข้อมูลได้ตลอดเส้นทางของผู้ใช้

@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: ผู้ใช้ป้อนข้อมูลที่จะใช้ในการสร้างรูปภาพ
• enhanced_prompt: imagen-3.0-generate-002 โมเดลมีตัวเลือกในการปรับปรุงพรอมต์ที่คุณระบุ ระบบจะสร้างพรอมต์ใหม่ที่มีรายละเอียดจากพรอมต์เดิมเพื่อช่วยสร้างรูปภาพที่มีคุณภาพสูงขึ้นและจะแสดงในตัวแปรนี้
• img_data: ตำแหน่ง Cloud Storage หรือไบต์รูปภาพของรูปภาพที่สร้างด้วย Imagen 3

4. กำหนดฟังก์ชันตัวช่วย

ฟังก์ชันโหลด

ระบบจะเรียกใช้โค้ดนี้เมื่อแอปพลิเคชันโหลด ซึ่งจะตั้งค่าโหมดของแอปเป็นสีของระบบ

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

ฟังก์ชันเบลอ

ฟังก์ชันนี้จะบันทึกข้อมูลจากผู้ใช้ลงในตัวแปรสถานะ

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

5. สร้างรูปภาพด้วย Imagen

ฟังก์ชันนี้จะเรียกใช้เมื่อผู้ใช้คลิกปุ่มเพื่อส่งพรอมต์ข้อความสำหรับการสร้างรูปภาพ

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

คุณกำหนดการตั้งค่าได้ใน 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

หมายเหตุ: ตัวเลือกเดียวที่จะใช้งานได้โดยไม่ต้องเพิ่มรายการที่อนุญาตเพิ่มเติมคือ DONT_ALLOW

6. จัดโครงสร้างเลย์เอาต์แอป

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

โค้ดนี้จะสร้างแอปพลิเคชันหน้าเว็บเดียวที่มีคอมโพเนนต์ต่อไปนี้

• ชื่อ
• พื้นที่ข้อความสำหรับป้อนพรอมต์รูปภาพ
• ปุ่มส่งที่เรียกใช้ฟังก์ชัน generate_image
• รูปภาพที่ Imagen สร้างขึ้น
• พรอมต์ที่ได้รับการปรับปรุงซึ่งแสดงพร้อมกับรูปภาพ

7. เรียกใช้แอปพลิเคชันใน Cloud Shell

1. เมื่อคัดลอกโค้ดที่ตัดตอนมาทั้งหมดลงใน main.py แล้ว คุณจะเรียกใช้แอปพลิเคชัน Mesop จากเทอร์มินัล Cloud Shell ได้

   mesop main.py
   

2. ตอนนี้ ให้คลิกปุ่มแสดงตัวอย่างเว็บที่มุมขวาบน แล้วคลิกเปลี่ยนพอร์ต พิมพ์ 32123 ในช่องหมายเลขพอร์ต แล้วคลิกเปลี่ยนและแสดงตัวอย่าง หน้าต่างใหม่ควรเปิดขึ้นเพื่อให้คุณดูแอปที่โหลดแล้ว โดยควรมีลักษณะดังนี้

8. ทดสอบ Imagen 3

คุณลองใช้ Imagen ด้วยพรอมต์ข้อความของคุณเองได้ที่นี่ คุณสร้างรูปภาพได้ในหลากหลายสไตล์ ตั้งแต่ภาพถ่ายสมจริงไปจนถึงภาพเคลื่อนไหวและสไตล์ศิลปะต่างๆ นอกจากนี้ คุณยังระบุมุมกล้อง เลนส์ และอื่นๆ ที่ต้องการได้ด้วย นอกจากนี้ พรอมต์ข้อความต้นฉบับจะได้รับการเขียนใหม่ผ่านฟีเจอร์ที่ใช้ LLM ซึ่งมีจุดประสงค์เพื่อสร้างรูปภาพคุณภาพสูงขึ้นที่สะท้อนเจตนาของพรอมต์ต้นฉบับได้ดียิ่งขึ้น

หมายเหตุ: การสร้างรูปภาพบุคคลต้องมีสิทธิ์เข้าถึงเพิ่มเติม ในระหว่างนี้ คุณจะได้รับข้อผิดพลาดหากพรอมต์มีการสร้างบุคคลหรือใบหน้า

ตัวอย่างพรอมต์ที่คุณลองใช้ได้มีดังนี้

1. หมวกเบสบอลสีเบจที่มีคำว่า “good vibes” เขียนไว้ด้านบนด้วยตัวอักษรสีขาวแบบฟองสบู่ที่เย็บติดกันและมีเส้นขอบสีเขียวนีออน
2. ร้านขายลูกกวาดสุดแปลก
3. โปสการ์ดการ์ตูนของลาสเวกัสที่มีชื่อเมืองสะกดไว้และแสตมป์ที่มุมขวา
4. ลูกหมาและลูกแมวเล่นกับก้อนไหมพรม

9. ล้างข้อมูล

หยุดแอปพลิเคชัน

กลับไปที่เทอร์มินัลที่คุณเปิดแอปพลิเคชัน แล้วออกด้วย Ctrl C

ปิดใช้งานสภาพแวดล้อมเสมือน

ในเทอร์มินัลเดียวกัน ให้พิมพ์คำสั่งต่อไปนี้

deactivate

10. บทสรุป

ยินดีด้วย คุณทำ Codelab นี้เสร็จเรียบร้อยแล้วด้วยการสร้างแอปพลิเคชันด้วย Imagen และสร้างรูปภาพบางรูป

แบบสำรวจ

โปรดแสดงความคิดเห็นเกี่ยวกับ Codelab นี้โดยกรอกแบบสำรวจสั้นๆ นี้

ขั้นตอนถัดไป

• เอกสารประกอบเกี่ยวกับผลิตภัณฑ์ Imagen
• สมุดบันทึกการสร้างรูปภาพด้วย Imagen 3
• คู่มือสำหรับนักพัฒนาแอปเกี่ยวกับ Imagen 3 ใน Vertex AI