เกี่ยวกับ Codelab นี้
1 บทนำ
ลองจินตนาการว่าคุณสามารถเปลี่ยนคำอธิบายข้อความธรรมดาๆ ให้กลายเป็นรูปภาพที่สดใสและมีรายละเอียดภายในไม่กี่วินาที นี่คือพลังของ Generative Media ซึ่งเป็นสาขาที่พัฒนาอย่างรวดเร็วและกำลังเปลี่ยนรูปแบบการสร้างและโต้ตอบกับเนื้อหาภาพ โมเดลอย่าง 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 ตั้งค่าสภาพแวดล้อมและติดตั้งข้อกําหนดเบื้องต้น
- เปิด Cloud Shell Editor
- คลิกปุ่มเปิดเทอร์มินัลที่มุมขวาบน
- สร้างโฟลเดอร์ใหม่โดยป้อนคำสั่งต่อไปนี้ในเทอร์มินัล
mkdir my-imagen-app
- เปลี่ยนไดเรกทอรีไปยังโฟลเดอร์ใหม่โดยทำดังนี้
cd my-imagen-app
- สร้างสภาพแวดล้อมเสมือนใน Python 3
python3 -m venv myenv
- เปิดใช้งานสภาพแวดล้อมเสมือน โดยใช้คำสั่งต่อไปนี้
source myenv/bin/activate
- ติดตั้ง Mesop
pip3 install mesop
- ติดตั้ง Google Gen AI SDK สําหรับ Python
pip install google-genai
- สร้างไฟล์ Python
touch main.py
3 การตั้งค่าแอป
โค้ดทั้งหมดที่จําเป็นสําหรับการเรียกใช้แอป Mesop จะอยู่ใน main.py ในแต่ละขั้นตอนถัดไป ให้คัดลอกและวางตามลำดับในไฟล์นี้ในเครื่องมือแก้ไข Cloud Shell
นำเข้าไลบรารี
import base64
import mesop as me
from google import genai
from google.genai import types
ตั้งค่าข้อมูลโปรเจ็กต์ Google Cloud และสร้างไคลเอ็นต์
- ตั้งค่ารหัสโปรเจ็กต์
PROJECT_ID = "[your-project-id]"
แทนที่ [your-project-id] ด้วยชื่อโปรเจ็กต์ Google Cloud เมื่อคุณคัดลอกโค้ดบรรทัดนี้
- สร้างลูกค้า
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, 4aspect_ratio: 1:1, 9:16, 16:9, 3:4, 4:3safety_filter_level: BLOCK_LOW_AND_ABOVE, BLOCK_MEDIUM_AND_ABOVE, BLOCK_ONLY_HIGH, BLOCK_NONEperson_generation: DONT_ALLOW, ALLOW_ADULT, ALLOW_ALL
หมายเหตุ: ตัวเลือกเดียวที่จะทํางานได้โดยไม่ต้องเพิ่มรายการที่อนุญาตคือ DONT_ALLOW
6 เลย์เอาต์แอปของ Structure
@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
- เมื่อคัดลอกข้อมูลโค้ดทั้งหมดลงใน
main.pyแล้ว คุณจะเรียกใช้แอปพลิเคชัน Mesop จากเทอร์มินัล Cloud Shell ได้mesop main.py - ตอนนี้ให้คลิกปุ่มแสดงตัวอย่างเว็บที่มุมขวาบน แล้วคลิกเปลี่ยนพอร์ต พิมพ์ 32123 ในช่องหมายเลขพอร์ต แล้วคลิก "เปลี่ยนและแสดงตัวอย่าง" หน้าต่างใหม่จะเปิดขึ้นเพื่อให้คุณดูแอปที่โหลดได้ ซึ่งควรมีลักษณะดังนี้
8 ทดสอบ Imagen 3
คุณสามารถลองใช้ Imagen กับพรอมต์ข้อความของคุณเองได้ที่นี่ คุณสามารถสร้างรูปภาพในหลากหลายสไตล์ ตั้งแต่ภาพเหมือนจริง ภาพเคลื่อนไหว ไปจนถึงสไตล์ศิลปะต่างๆ นอกจากนี้ คุณยังระบุมุมกล้อง เลนส์ และอื่นๆ ที่เจาะจงได้ด้วย ระบบจะเขียนพรอมต์ข้อความต้นฉบับของคุณใหม่ผ่านฟีเจอร์ที่อิงตาม LLM ซึ่งมีไว้เพื่อสร้างรูปภาพที่มีคุณภาพสูงขึ้นซึ่งสะท้อนถึงเจตนาของพรอมต์ต้นฉบับได้ดีขึ้น
หมายเหตุ: การสร้างรูปภาพบุคคลต้องใช้สิทธิ์เข้าถึงเพิ่มเติม ในระหว่างนี้ คุณจะได้รับข้อผิดพลาดหากพรอมต์ของคุณมีการสร้างบุคคลหรือใบหน้า
ตัวอย่างพรอมต์ที่คุณลองใช้ได้มีดังนี้
- หมวกเบสบอลสีเบจที่มีคำว่า "good vibes" เขียนอยู่ด้านบนด้วยตัวอักษรสีขาวแบบปุ่มปักที่มีเส้นขอบสีเขียวนีออน
- ร้านขายลูกกวาดที่แปลกตา
- โปสการ์ดการ์ตูนของลาสเวกัสที่มีชื่อเมืองเป็นตัวพิมพ์เต็มและมีตราไปรษณีย์ที่มุมขวา
- ลูกสุนัขและลูกแมวเล่นกับก้อนไหมพรม
9 ล้างข้อมูล
หยุดแอปพลิเคชัน
กลับไปที่เทอร์มินอลที่คุณเปิดแอปพลิเคชันและออกด้วย Ctrl C
ปิดใช้งานสภาพแวดล้อมเสมือน
ในเทอร์มินัลเดียวกัน ให้พิมพ์คำสั่งต่อไปนี้
deactivate