Update app.py

app.py

@@ -2,9 +2,7 @@ import gradio as gr
 from transformers import MarianMTModel, MarianTokenizer
 import random
 
-# ---------------------------
-# 1) โหลดโมเดลแปล (MarianMT)
-# ---------------------------
+# โหลดโมเดลแปล (MarianMT)
 model_name = "Helsinki-NLP/opus-mt-th-en"
 tokenizer = MarianTokenizer.from_pretrained(model_name)
 model = MarianMTModel.from_pretrained(model_name)
@@ -18,9 +16,7 @@ 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
-# ---------------------------
+# ตัวเลือก (ภาษาไทย) สำหรับ Dropdown
 body_shapes_th = [
     "ตัวเหนียวขยุกขยิก", "ตัวปุกปุยกลม", "ตัวเต็มไปด้วยหนาม",
     "ตัวเล็กเหมือนแมลง", "ตัวโปร่งแสงลอยได้", "ตัวโคลนยืดหยุ่น",
@@ -53,9 +49,6 @@ moods_th = [
     "เศร้าสร้อย", "จริงจัง", "มีความสุข", "ขี้ตกใจ"
 ]
 
-# ---------------------------
-# 3) ฟังก์ชันหลัก
-# ---------------------------
 def generate_monster_lab(
     body_dd, body_tb,
     head_dd, head_tb,
@@ -64,7 +57,7 @@ def generate_monster_lab(
     ability_dd, ability_tb,
     mood_dd, mood_tb,
 ):
-    # เลือกค่าจาก textbox หากไม่ว่าง, มิฉะนั้นใช้ dropdown
+    # ถ้า textbox มีข้อความ -> ใช้ค่านั้น, ถ้าว่าง -> ใช้ dropdown
     body_th = body_tb.strip() if body_tb.strip() else body_dd
     head_th = head_tb.strip() if head_tb.strip() else head_dd
     arms_th = arms_tb.strip() if arms_tb.strip() else arms_dd
@@ -94,27 +87,22 @@ def generate_monster_lab(
     return desc_th, prompt_en
 
 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)
     sk = random.choice(skin_patterns_th)
     ab = random.choice(abilities_th)
     md = random.choice(moods_th)
-
+    # Clear textbox
     return (bd, "", hd, "", ar, "", sk, "", ab, "", md, "")
 
-# ---------------------------
-# 4) สร้าง UI Gradio
-# ---------------------------
+# ---- CSS ----
 css_code = """
 body {
     background-color: #FFF7EA;
     font-family: "Kanit", sans-serif;
 }
+
 #title {
     color: #FF6F91;
     text-align: center;
@@ -133,28 +121,33 @@ body {
     color: #333;
     margin-bottom: 20px;
 }
+
+/* ปุ่มหลัก (สร้างมอนสเตอร์) */
 .btn-main {
     background-color: #FFC107;
     border: 2px solid #FFA000;
     font-weight: bold;
     font-size: 1.1rem;
-    padding: 10px 20px;
+    /* กำหนดความสูงและความยาว (horizontal padding) เยอะๆ */
+    padding: 10px 40px;  
     border-radius: 10px;
     margin-right: 10px;
 }
 
+/* ปุ่มสุ่ม (รอง) => ตัวเล็กลงในความยาว (horizontal padding) แต่ความสูงเท่ากัน */
 .btn-random {
-    /* เล็กกว่า, สีอ่อนลง */
-    background-color: #FFE08E; /* สีเหลืองซอฟต์ */
+    background-color: #FFE08E; 
     border: 2px solid #FFC107;
     font-weight: normal;
-    font-size: 0.9rem;
-    padding: 6px 15px;
+    font-size: 1.1rem;
+    /* ใช้ padding vertical เท่ากัน แต่ลด horizontal padding ลง */
+    padding: 10px 15px;
     border-radius: 8px;
 }
 .btn-random:hover {
     background-color: #FFF3C4;
 }
+
 #desc-th, #prompt-en {
     background-color: #FFFAE6;
     border: 2px solid #FFE082;
@@ -167,6 +160,7 @@ body {
 def initial_text():
     return "ยังไม่ได้สร้างมอนสเตอร์ ลองเลือกหรือพิมพ์ แล้วกด 'สร้างมอนสเตอร์!' หรือจะกดสุ่มดูก็ได้จ้า"
 
+# ปุ่ม copy
 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;"
@@ -192,9 +186,8 @@ 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> เพื่อคัดลอก Prompt ไปใช้กับ AI สร้างภาพได้เลย!</p>
+        <p>หากอยากลุ้นโชค กดปุ่ม (ขวามือ) <strong>"สุ่มมอนสเตอร์สุดเซอร์ไพรส์!"</strong></p>
+        <p>เมื่อพร้อมแล้ว กดปุ่ม (ซ้าย) <strong>"สร้างมอนสเตอร์!"</strong> เพื่อดูรายละเอียดและ Prompt</p>
     </div>
     """)
 
@@ -221,9 +214,9 @@ with gr.Blocks(css=css_code) as demo:
             mood_tb = gr.Textbox(label="หรือพิมพ์เอง", placeholder="ขี้เล่นเป็นพิเศษ...")
 
     with gr.Row():
-        # ปุ่มหลัก (สร้างมอนสเตอร์) -> อยู่ฝั่งซ้าย
+        # ปุ่มหลัก (สร้างมอนสเตอร์) -> อยู่ซ้าย
         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")
@@ -231,7 +224,7 @@ with gr.Blocks(css=css_code) as demo:
 
     gr.HTML(copy_button_html)
 
-    # กดสุ่ม -> คืน 12 ค่า (6 Dropdown, 6 Textbox)
+    # ปุ่มสุ่ม
     random_btn.click(
         fn=random_monster,
         inputs=[],
@@ -245,7 +238,7 @@ with gr.Blocks(css=css_code) as demo:
         ]
     )
 
-    # กดสร้าง -> generate_monster_lab
+    # ปุ่มสร้าง
     create_btn.click(
         fn=generate_monster_lab,
         inputs=[