Update app.py

app.py

@@ -1,101 +1,116 @@
 import gradio as gr
-import random
 
-# ----- 1) กำหนดหมวดต่าง ๆ -----
-characters = [
-    "shy kitten", "brave puppy", "tiny fairy", "silly robot", "kind princess",
-    "friendly dragon", "playful elf", "curious mermaid", "gentle unicorn", "happy ninja"
+# หมวดหมู่ต่าง ๆ พร้อมตัวเลือก (ตัวอย่าง)
+body_shapes = [
+    "slimy blob body", "furry ball body", "spiky ogre body", 
+    "tiny insect body", "floating jelly body"
 ]
-places = [
-    "in a fluffy cloud kingdom", "on a giant rainbow slide", "inside a magical treehouse",
-    "near a crystal waterfall", "in a cotton-candy land", "on a floating island",
-    "beside a sparkling river", "at a mushroom village", "inside a glowing cave", "on a giant lily pad"
+heads = [
+    "one-eyed head", "two-headed dragon skull", "giant horned head",
+    "smiling ghost face", "cute bunny ears head"
 ]
-activities = [
-    "singing a funny song", "dancing with butterflies", "riding a magical bike",
-    "painting colorful stars", "telling hilarious jokes", "juggling shining orbs",
-    "building candy houses", "playing hide-and-seek", "collecting glowing gems", "spinning in circles"
+arms_legs = [
+    "tentacle arms and octopus legs", "mechanical arms and roller-skate feet",
+    "feathered wings and lion paws", "glowing hands and hoverboard legs",
+    "wooden puppet arms and spider legs"
 ]
-styles = [
-    "cartoon style", "pastel style", "watercolor style", "3D clay style", "pixel art style",
-    "comic style", "chibi style", "neon style", "storybook style", "fantasy style"
+skin_patterns = [
+    "rainbow stripes", "glowing purple spots", "metallic scales", 
+    "sparkling feathers", "glittery polka dots"
 ]
-weirds = [
-    "with giant lollipops", "surrounded by friendly ghosts", "while time is frozen",
-    "under a raining confetti sky", "next to floating musical notes",
-    "with oversized flowers", "where everything is upside down", 
-    "in a world without gravity", "amidst talking clouds", "inside a giant soap bubble"
+abilities = [
+    "breathing fire", "shooting bubbles", "controlling lightning", 
+    "singing lullabies", "teleporting short distances"
+]
+moods = [
+    "friendly", "grumpy", "silly", "mischievous", "shy"
 ]
 
-# ----- 2) ฟังก์ชันสร้าง Prompt -----
-def spin_the_wheel():
-    c = random.choice(characters)
-    p = random.choice(places)
-    a = random.choice(activities)
-    s = random.choice(styles)
-    w = random.choice(weirds)
-
-    # โครงสร้างประโยค
-    # "Behold a [character], [activity] [place] in [style] [weird]!"
-    prompt = f"Behold a {c}, {a} {p} in {s} {w}!"
+def generate_monster_prompt(body, head, arms, skin, ability, mood):
+    """
+    สร้างประโยค (Prompt) บรรยายมอนสเตอร์ตามตัวเลือกที่เด็กเลือก
+    """
+    prompt = (
+        f"This is a {mood} monster with a {body}, a {head}, "
+        f"{arms}, covered in {skin} skin, and it can {ability}!"
+    )
     return prompt
 
-# ----- 3) สร้าง UI Gradio -----
-custom_css = """
+css_code = """
 body {
-    background-color: #FFFEE0;
-    font-family: "Comic Sans MS", "Comic Sans", cursive;
+    background-color: #FFFCF2;
+    font-family: "Comic Sans MS", cursive;
 }
 
 #title {
+    color: #F96C85;
     text-align: center;
-    color: #FF6F91;
+    font-size: 2.1rem;
     margin-top: 20px;
-    font-size: 2.2rem;
+    margin-bottom: 10px;
     font-weight: bold;
 }
-
-#subtitle {
-    text-align: center;
+.game-desc {
+    margin: 0 auto;
+    width: 80%;
+    background-color: #FFF2F0;
+    border: 2px dashed #FAB1A0;
+    border-radius: 10px;
+    padding: 15px;
     color: #333;
-    margin-bottom: 20px;
 }
-
+.monster-btn {
+    background-color: #FFB74D;
+    border: 2px solid #FFA726;
+    font-weight: bold;
+    font-size: 1.1rem;
+    padding: 10px 20px;
+    border-radius: 10px;
+}
+.monster-btn:hover {
+    background-color: #FFD180;
+}
 #prompt-box {
-    font-size: 20px;
-    min-height: 60px;
+    font-size: 18px;
+    background-color: #FFF8E1;
+    border: 2px solid #FFE0B2;
+    border-radius: 10px;
     padding: 10px;
-    text-align: center;
-    border: 2px solid #FFB74D;
-    border-radius: 12px;
-    background-color: #FFF3E0;
 }
 """
 
-with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown("<h1 id='title'>ZenityX Dream Explorers</h1>")
-    gr.Markdown("""
-    <p id='subtitle'>
-    สวัสดีจ้า หนูน้อย! พร้อมหรือยังที่จะหมุนวงล้อ<br>
-    เพื่อสร้าง Prompt สุดแฟนตาซีสำหรับ AI เจนภาพ?
-    </p>
-    """)
+with gr.Blocks(css=css_code) as demo:
+    gr.Markdown("<h1 id='title'>ZenityX Monster Lab</h1>")
+    gr.Markdown(
+        """
+        <div class="game-desc">
+            <p>ยินดีต้อนรับจ้า หนูน้อยนักทดลอง! ที่นี่คือห้องทดลองลับของ ZenityX!</p>
+            <p>มาออกแบบมอนสเตอร์กันเถอะ: เลือกรูปร่าง, หัว, แขนขา, สีผิว, พลังพิเศษ, 
+               และอารมณ์สุดเพี้ยน. จากนั้นกดปุ่ม <strong>"Activate Lab!"</strong></p>
+            <p>ลองดูสิ ว่ามอนสเตอร์ของหนูน้อยจะออกมาเป็นแบบไหน?</p>
+        </div>
+        """
+    )
     
-    # ปุ่ม Spin
-    spin_btn = gr.Button("Spin the Wheel!")
+    # ส่วนเลือกค่าแต่ละหมวด
+    body_dropdown = gr.Dropdown(label="Body Shape", choices=body_shapes, value=body_shapes[0])
+    head_dropdown = gr.Dropdown(label="Head & Face", choices=heads, value=heads[0])
+    arms_dropdown = gr.Dropdown(label="Arms & Legs", choices=arms_legs, value=arms_legs[0])
+    skin_dropdown = gr.Dropdown(label="Skin Color / Pattern", choices=skin_patterns, value=skin_patterns[0])
+    ability_dropdown = gr.Dropdown(label="Special Ability", choices=abilities, value=abilities[0])
+    mood_dropdown = gr.Dropdown(label="Mood / Personality", choices=moods, value=moods[0])
     
-    # กล่องแสดง Prompt
-    prompt_output = gr.Textbox(
-        label="Dream Prompt",
-        interactive=False,
-        elem_id="prompt-box"
-    )
+    # ปุ่มกด
+    create_button = gr.Button("Activate Lab!", elem_classes="monster-btn")
     
-    # Event: เมื่อกดปุ่ม -> สร้าง Prompt
-    spin_btn.click(
-        fn=spin_the_wheel,
-        inputs=[],
-        outputs=prompt_output
+    # ช่องแสดงผล Prompt
+    monster_prompt_out = gr.Textbox(label="Your Monster Prompt", interactive=False, elem_id="prompt-box")
+
+    # เมื่อกดปุ่ม -> สร้าง Prompt
+    create_button.click(
+        fn=generate_monster_prompt,
+        inputs=[body_dropdown, head_dropdown, arms_dropdown, skin_dropdown, ability_dropdown, mood_dropdown],
+        outputs=monster_prompt_out
     )
 
 demo.launch()