Update app.py

app.py

@@ -2,7 +2,9 @@ import gradio as gr
 from transformers import MarianMTModel, MarianTokenizer
 import random
 
+# ---------------------------
 # 1) โหลดโมเดลแปล (MarianMT)
+# ---------------------------
 model_name = "Helsinki-NLP/opus-mt-th-en"
 tokenizer = MarianTokenizer.from_pretrained(model_name)
 model = MarianMTModel.from_pretrained(model_name)
@@ -16,7 +18,9 @@ def translate_th_to_en(th_text: str) -> str:
     en_text = tokenizer.decode(translation_tokens[0], skip_special_tokens=True)
     return en_text
 
+# ---------------------------
 # 2) ข้อมูล (ภาษาไทย) สำหรับ Dropdown
+# ---------------------------
 body_shapes_th = [
     "ตัวเหนียวขยุกขยิก", "ตัวปุกปุยกลม", "ตัวเต็มไปด้วยหนาม",
     "ตัวเล็กเหมือนแมลง", "ตัวโปร่งแสงลอยได้", "ตัวโคลนยืดหยุ่น",
@@ -49,7 +53,9 @@ moods_th = [
     "เศร้าสร้อย", "จริงจัง", "มีความสุข", "ขี้ตกใจ"
 ]
 
-# 3) ฟังก์ชันสร้าง Prompt
+# ---------------------------
+# 3) ฟังก์ชันหลัก
+# ---------------------------
 def generate_monster_lab(
     body_dd, body_tb,
     head_dd, head_tb,
@@ -87,11 +93,11 @@ def generate_monster_lab(
 
     return desc_th, prompt_en
 
-# 3.1) ฟังก์ชันสุ่มค่าจาก Dropdown
 def random_monster():
     """
     สุ่มค่า Dropdown ทั้ง 6 หมวด, พร้อมเคลียร์ช่อง Textbox ทั้ง 6
     """
+    import random
     bd = random.choice(body_shapes_th)
     hd = random.choice(heads_th)
     ar = random.choice(arms_legs_th)
@@ -99,18 +105,11 @@ def random_monster():
     ab = random.choice(abilities_th)
     md = random.choice(moods_th)
 
-    # แต่ละหมวดมี 2 ช่อง (Dropdown, Textbox) => รวม 12 ค่า
-    # Dropdown = ค่าที่สุ่มได้, Textbox = ""
-    return (
-        bd, "",    # body_dd, body_tb
-        hd, "",    # head_dd, head_tb
-        ar, "",    # arms_dd, arms_tb
-        sk, "",    # skin_dd, skin_tb
-        ab, "",    # ability_dd, ability_tb
-        md, ""     # mood_dd, mood_tb
-    )
+    return (bd, "", hd, "", ar, "", sk, "", ab, "", md, "")
 
+# ---------------------------
 # 4) สร้าง UI Gradio
+# ---------------------------
 css_code = """
 body {
     background-color: #FFF7EA;
@@ -132,8 +131,9 @@ body {
     border-radius: 10px;
     padding: 15px;
     color: #333;
+    margin-bottom: 20px;
 }
-.monster-btn {
+.btn-main {
     background-color: #FFC107;
     border: 2px solid #FFA000;
     font-weight: bold;
@@ -142,8 +142,18 @@ body {
     border-radius: 10px;
     margin-right: 10px;
 }
-.monster-btn:hover {
-    background-color: #FFD54F;
+
+.btn-random {
+    /* เล็กกว่า, สีอ่อนลง */
+    background-color: #FFE08E; /* สีเหลืองซอฟต์ */
+    border: 2px solid #FFC107;
+    font-weight: normal;
+    font-size: 0.9rem;
+    padding: 6px 15px;
+    border-radius: 8px;
+}
+.btn-random:hover {
+    background-color: #FFF3C4;
 }
 #desc-th, #prompt-en {
     background-color: #FFFAE6;
@@ -155,9 +165,8 @@ body {
 """
 
 def initial_text():
-    return "ยังไม่ได้สร้างมอนสเตอร์ ลองเลือกหรือพิมพ์ แล้วกด 'สร้างมอนสเตอร์!' หรือกดสุ่มดูสิจ๊ะ!"
+    return "ยังไม่ได้สร้างมอนสเตอร์ ลองเลือกหรือพิมพ์ แล้วกด 'สร้างมอนสเตอร์!' หรือจะกดสุ่มดูก็ได้จ้า"
 
-# สร้างปุ่ม Copy ด้วย HTML + JS
 copy_button_html = """
 <button style="background-color: #F06292; border: 2px solid #E91E63; font-weight: bold; 
                font-size: 1.1rem; padding: 10px 20px; border-radius: 10px;"
@@ -183,10 +192,9 @@ with gr.Blocks(css=css_code) as demo:
     gr.Markdown("""
     <div class="game-desc">
         <p>หนูน้อยจ๊ะ เลือกได้ว่าจะใช้ค่าใน <strong>Dropdown</strong> หรือจะ <strong>พิมพ์เอง</strong></p>
-        <p>ถ้าอยากลุ้นโชค กดปุ่ม <strong>"สุ่มมอนสเตอร์สุดเซอร์ไพรส์!"</strong> ดูสิ!</p>
-        <p>เมื่อพร้อมแล้ว กด <strong>"สร้างมอนสเตอร์!"</strong> เพื่อดูรายละเอียด (ไทย) และ Prompt (อังกฤษ)</p>
-        <p>อย่าลืมกด <strong>"Copy Prompt"</strong> (ปุ่มชมพู) เพื่อคัดลอกไป AI เจน��าพอื่นนะจ๊ะ</p>
-        <p><strong>ZenityX</strong> ยินดีต้อนรับทุกคนจ้า!</p>
+        <p>หากอยากลุ้นโชค ให้กดปุ่ม <strong>"สุ่มมอนสเตอร์สุดเซอร์ไพรส์!"</strong> (ปุ่มเล็ก)</p>
+        <p>เมื่อพร้อมแล้ว กดปุ่ม <strong>"สร้างมอนสเตอร์!"</strong> (ปุ่มหลักด้านซ้าย) เพื่อดูรายละเอียด (ไทย) และ Prompt (อังกฤษ)</p>
+        <p>กดปุ่ม <strong>"Copy Prompt"</strong> เพื่อคัดลอก Prompt ไปใช้กับ AI สร้างภาพได้เลย!</p>
     </div>
     """)
 
@@ -213,16 +221,17 @@ with gr.Blocks(css=css_code) as demo:
             mood_tb = gr.Textbox(label="หรือพิมพ์เอง", placeholder="ขี้เล่นเป็นพิเศษ...")
 
     with gr.Row():
-        random_btn = gr.Button("สุ่มมอนสเตอร์สุดเซอร์ไพรส์!", elem_classes="monster-btn")
-        create_btn = gr.Button("สร้างมอนสเตอร์!", elem_classes="monster-btn")
+        # ปุ่มหลัก (สร้างมอนสเตอร์) -> อยู่ฝั่งซ้าย
+        create_btn = gr.Button("สร้างมอนสเตอร์!", elem_classes="btn-main")
+        # ปุ่มสุ่ม (เล็ก, สีอ่อน) -> อยู่ฝั่งขวา
+        random_btn = gr.Button("สุ่มมอนสเตอร์สุดเซอร์ไพรส์!", elem_classes="btn-random")
 
     monster_desc_th = gr.Textbox(label="รายละเอียด (ภาษาไทย)", interactive=False, elem_id="desc-th")
     monster_prompt_en = gr.Textbox(label="Prompt (English)", interactive=False, elem_id="prompt-en")
 
-    # ปุ่ม Copy Prompt (HTML + JS)
     gr.HTML(copy_button_html)
 
-    # ปุ่มสุ่ม: คืนค่าทั้ง 12 ตัว (6 Dropdown, 6 Textbox)
+    # กดสุ่ม -> คืน 12 ค่า (6 Dropdown, 6 Textbox)
     random_btn.click(
         fn=random_monster,
         inputs=[],
@@ -236,7 +245,7 @@ with gr.Blocks(css=css_code) as demo:
         ]
     )
 
-    # ปุ่มสร้าง Prompt
+    # กดสร้าง -> generate_monster_lab
     create_btn.click(
         fn=generate_monster_lab,
         inputs=[