Update app.py

app.py

@@ -1,32 +1,21 @@
 import gradio as gr
 from transformers import MarianMTModel, MarianTokenizer
 
-# ==============================
-# 1) โหลดโมเดลแปลภาษา (MarianMT) จาก Hugging Face
-#    ใช้โมเดล "Helsinki-NLP/opus-mt-th-en"
-# ==============================
+# ===== 1) โหลดโมเดลแปล (MarianMT) =====
 model_name = "Helsinki-NLP/opus-mt-th-en"
 tokenizer = MarianTokenizer.from_pretrained(model_name)
 model = MarianMTModel.from_pretrained(model_name)
 
 def translate_th_to_en(th_text: str) -> str:
-    """
-    แปลข้อความภาษาไทยเป็นอังกฤษ ใช้ MarianMTModel แบบ Offline
-    """
     th_text = th_text.strip()
     if not th_text:
         return ""
-    # สร้าง input token
     inputs = tokenizer(th_text, return_tensors="pt", max_length=512, truncation=True)
-    # สร้าง output token (การแปล)
     translation_tokens = model.generate(**inputs, max_length=512)
-    # ถอดรหัสเป็น string
     en_text = tokenizer.decode(translation_tokens[0], skip_special_tokens=True)
     return en_text
 
-# ==============================
-# 2) ตัวเลือก (ภาษาไทย) สำหรับมอนสเตอร์
-# ==============================
+# ===== 2) ตัวเลือก (ภาษาไทย) สำหรับ Dropdown =====
 body_shapes_th = [
     "ตัวเหนียวขยุกขยิก", "ตัวปุกปุยกลม", "ตัวเต็มไปด้วยหนาม",
     "ตัวเล็กเหมือนแมลง", "ตัวโปร่งแสงลอยได้"
@@ -53,21 +42,36 @@ moods_th = [
     "ซนเป็นลิง", "ขี้อาย"
 ]
 
-# ==============================
-# 3) ฟังก์ชันสร้าง Prompt
-# ==============================
-def generate_monster_lab(body_th, head_th, arms_th, skin_th, ability_th, mood_th):
+# ===== 3) ฟังก์ชันสร้างมอนสเตอร์ =====
+def generate_monster_lab(
+    body_dd, body_tb,
+    head_dd, head_tb,
+    arms_dd, arms_tb,
+    skin_dd, skin_tb,
+    ability_dd, ability_tb,
+    mood_dd, mood_tb,
+):
     """
-    สร้าง 'รายละเอียดมอนสเตอร์ (ภาษาไทย)' + Prompt ภาษาอังกฤษ
+    ตรวจสอบว่าใน textbox แต่ละหมวดมีข้อความไหม
+    ถ้ามี ให้ใช้ข้อความนั้นแทนค่าใน dropdown
+    ถ้า textbox ว่าง ก็ใช้ค่าจาก dropdown
     """
-    # (a) รวมรายละเอียดมอนสเตอร์ (ภาษาไทย)
+    # (a) ตัดสินใจเลือกค่า "ภาษาไทย" แต่ละหมวด
+    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
+    skin_th = skin_tb.strip() if skin_tb.strip() else skin_dd
+    ability_th = ability_tb.strip() if ability_tb.strip() else ability_dd
+    mood_th = mood_tb.strip() if mood_tb.strip() else mood_dd
+
+    # (b) สร้าง “รายละเอียด (ไทย)”
     desc_th = (
         f"มอนสเตอร์อารมณ์{mood_th} มี{body_th} "
         f"พร้อมด้วย{head_th}, {arms_th}, "
         f"ผิว/ลายแบบ{skin_th}, และพลังพิเศษคือ{ability_th}!"
     )
 
-    # (b) แปลทีละส่วน
+    # (c) แปล -> อังกฤษ
     body_en = translate_th_to_en(body_th)
     head_en = translate_th_to_en(head_th)
     arms_en = translate_th_to_en(arms_th)
@@ -75,8 +79,7 @@ def generate_monster_lab(body_th, head_th, arms_th, skin_th, ability_th, mood_th
     ability_en = translate_th_to_en(ability_th)
     mood_en = translate_th_to_en(mood_th)
 
-    # (c) ประกอบประโยคภาษาอังกฤษง่าย ๆ
-    #    ex: "This is a [mood_en] monster with [body_en], a [head_en], [arms_en], covered in [skin_en] skin, and it can [ability_en]!"
+    # (d) ประกอบ Prompt อังกฤษ
     prompt_en = (
         f"This is a {mood_en} monster with {body_en}, "
         f"a {head_en}, {arms_en}, covered in {skin_en} skin, "
@@ -85,15 +88,12 @@ def generate_monster_lab(body_th, head_th, arms_th, skin_th, ability_th, mood_th
 
     return desc_th, prompt_en
 
-# ==============================
-# 4) สร้าง UI (Gradio)
-# ==============================
+# ===== 4) สร้าง UI (Gradio) =====
 css_code = """
 body {
     background-color: #FFF7EA;
     font-family: "Kanit", sans-serif;
 }
-
 #title {
     color: #FF6F91;
     text-align: center;
@@ -118,6 +118,7 @@ body {
     font-size: 1.1rem;
     padding: 10px 20px;
     border-radius: 10px;
+    margin-right: 10px;
 }
 .monster-btn:hover {
     background-color: #FFD54F;
@@ -132,48 +133,73 @@ body {
 """
 
 def initial_text():
-    """
-    แสดงข้อความเริ่มต้นเมื่อเปิดเว็บครั้งแรก
-    """
-    return "ยังไม่ได้สร้างมอนสเตอร์นะจ๊ะ เลือกค่าต่าง ๆ แล้วกด 'สร้างมอนสเตอร์!' ดูสิ"
+    return "ยังไม่ได้สร้างมอนสเตอร์นะจ๊ะ ลองเลือก/พิมพ์ แล้วกด 'สร้างมอนสเตอร์!'"
 
 with gr.Blocks(css=css_code) as demo:
-    gr.Markdown("<h1 id='title'>ZenityX Monster Lab (Thai -> English)</h1>")
-    gr.Markdown(
-        """
-        <div class="game-desc">
-            <p><strong>วิธีเล่น:</strong></p>
-            <ol>
-                <li>เลือกค่าต่าง ๆ ของมอนสเตอร์ (ภาษาไทย)</li>
-                <li>กดปุ่ม <strong>"สร้างมอนสเตอร์!"</strong></li>
-                <li>ชม <u>รายละเอียดมอนสเตอร์ (ภาษาไทย)</u> และ <u>Prompt ภาษาอังกฤษ</u> สำหรับ AI</li>
-            </ol>
-            <p>ลองเลยจ้า! (โมเดล "Helsinki-NLP/opus-mt-th-en" ทำงานออฟไลน์ได้ใน Hugging Face Spaces)</p>
-        </div>
-        """
-    )
-    
-    # Dropdown หรือจะปรับเป็น Textbox ก็ได้
-    dd_body = gr.Dropdown(label="รูปร่างมอนสเตอร์", choices=body_shapes_th, value=body_shapes_th[0])
-    dd_head = gr.Dropdown(label="หัว/ใบหน้า", choices=heads_th, value=heads_th[0])
-    dd_arms = gr.Dropdown(label="แขนขา", choices=arms_legs_th, value=arms_legs_th[0])
-    dd_skin = gr.Dropdown(label="สีผิว/ลวดลาย", choices=skin_patterns_th, value=skin_patterns_th[0])
-    dd_ability = gr.Dropdown(label="พลังพิเศษ", choices=abilities_th, value=abilities_th[0])
-    dd_mood = gr.Dropdown(label="อารมณ์/บุคลิก", choices=moods_th, value=moods_th[0])
-    
-    create_button = gr.Button("สร้างมอนสเตอร์!", elem_classes="monster-btn")
-    
-    monster_desc_th = gr.Textbox(label="รายละเอียดมอนสเตอร์ (ภาษาไทย)", interactive=False, elem_id="desc-th")
-    monster_prompt_en = gr.Textbox(label="Prompt ภาษาอังกฤษ (สำหรับ AI)", interactive=False, elem_id="prompt-en")
-
-    # เมื่อกดปุ่ม -> เรียก generate_monster_lab
-    create_button.click(
+    gr.Markdown("<h1 id='title'>ZenityX Monster Lab (Dropdown + Textbox)</h1>")
+    gr.Markdown("""
+    <div class="game-desc">
+        <p>หนูน้อยจ๊ะ เลือกได้เลยว่าจะใช้ค่าใน <strong>Dropdown</strong> หรือจะ <strong>พิมพ์เอง</strong> 
+           (ถ้าพิมพ์เอง ช่อง Dropdown จะถูกข้าม) นะจ๊ะ</p>
+        <p>เมื่อกด <strong>"สร้างมอนสเตอร์!"</strong> แล้วจะได้ <i>รายละเอียด (ไทย)</i> และ <i>Prompt ภาษาอังกฤษ</i> สำหรับ AI</p>
+        <p>อย่าลืมกดปุ่ม <strong>"Copy Prompt"</strong> ถ้าอยากคัดลอกไปใช้ใน AI สร้างภาพด้วยล่ะ!</p>
+    </div>
+    """)
+
+    with gr.Row():
+        with gr.Column():
+            body_dd = gr.Dropdown(body_shapes_th, label="รูปร่าง (Dropdown)", value=body_shapes_th[0])
+            body_tb = gr.Textbox(label="หรือพิมพ์เอง (Body)", placeholder="ตัวโคลนยืดหยุ่น...")
+
+            head_dd = gr.Dropdown(heads_th, label="หัว/ใบหน้า (Dropdown)", value=heads_th[0])
+            head_tb = gr.Textbox(label="หรือพิมพ์เอง (Head)", placeholder="หัวปลาหมึกสุดแปลก...")
+
+        with gr.Column():
+            arms_dd = gr.Dropdown(arms_legs_th, label="แขนขา (Dropdown)", value=arms_legs_th[0])
+            arms_tb = gr.Textbox(label="หรือพิมพ์เอง (Arms/Legs)", placeholder="แขนออกรากไม้...")
+
+            skin_dd = gr.Dropdown(skin_patterns_th, label="ผิว/ลวดลาย (Dropdown)", value=skin_patterns_th[0])
+            skin_tb = gr.Textbox(label="หรือพิมพ์เอง (Skin)", placeholder="ลายทางสีทอง...")
+
+        with gr.Column():
+            ability_dd = gr.Dropdown(abilities_th, label="พลังพิเศษ (Dropdown)", value=abilities_th[0])
+            ability_tb = gr.Textbox(label="หรือพิมพ์เอง (Ability)", placeholder="สร้างภาพลวงตา...")
+
+            mood_dd = gr.Dropdown(moods_th, label="อารมณ์ (Dropdown)", value=moods_th[0])
+            mood_tb = gr.Textbox(label="หรือพิมพ์เอง (Mood)", placeholder="ขี้เล่นเป็นพิเศษ...")
+
+    # ปุ่มสร้าง + ปุ่ม Copy
+    with gr.Row():
+        create_btn = gr.Button("สร้างมอนสเตอร์!", elem_classes="monster-btn")
+        copy_btn = gr.Button("Copy Prompt", elem_classes="monster-btn")
+
+    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")
+
+    # Event: กดปุ่ม "สร้างมอนสเตอร์!"
+    create_btn.click(
         fn=generate_monster_lab,
-        inputs=[dd_body, dd_head, dd_arms, dd_skin, dd_ability, dd_mood],
+        inputs=[
+            body_dd, body_tb,
+            head_dd, head_tb,
+            arms_dd, arms_tb,
+            skin_dd, skin_tb,
+            ability_dd, ability_tb,
+            mood_dd, mood_tb
+        ],
         outputs=[monster_desc_th, monster_prompt_en]
     )
 
-    # เมื่อโหลดเว็บครั้งแรก
+    # Event: กดปุ่ม "Copy Prompt" -> ใช้ JS copy to clipboard
+    # inputs: monster_prompt_en (string)
+    # no outputs
+    copy_btn.click(
+        fn=None,
+        _js="function(txt) {navigator.clipboard.writeText(txt);}",
+        inputs=monster_prompt_en,
+        outputs=[]
+    )
+
     demo.load(fn=initial_text, inputs=None, outputs=monster_desc_th)
 
 demo.launch()