Update app.py

app.py

@@ -1,7 +1,7 @@
 import gradio as gr
 from transformers import MarianMTModel, MarianTokenizer
 
-# ===== 1) โหลดโมเดลแปล (MarianMT) =====
+# 1) โหลดโมเดลแปล (MarianMT) 
 model_name = "Helsinki-NLP/opus-mt-th-en"
 tokenizer = MarianTokenizer.from_pretrained(model_name)
 model = MarianMTModel.from_pretrained(model_name)
@@ -15,7 +15,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 =====
+# 2) ข้อมูล (ภาษาไทย) สำหรับ Dropdown
 body_shapes_th = [
     "ตัวเหนียวขยุกขยิก", "ตัวปุกปุยกลม", "ตัวเต็มไปด้วยหนาม",
     "ตัวเล็กเหมือนแมลง", "ตัวโปร่งแสงลอยได้"
@@ -42,7 +42,7 @@ moods_th = [
     "ซนเป็นลิง", "ขี้อาย"
 ]
 
-# ===== 3) ฟังก์ชันสร้างมอนสเตอร์ =====
+# 3) ฟังก์ชันสร้าง Prompt
 def generate_monster_lab(
     body_dd, body_tb,
     head_dd, head_tb,
@@ -51,12 +51,7 @@ def generate_monster_lab(
     ability_dd, ability_tb,
     mood_dd, mood_tb,
 ):
-    """
-    ตรวจสอบว่าใน textbox แต่ละหมวดมีข้อความไหม
-    ถ้ามี ให้ใช้ข้อความนั้นแทนค่าใน dropdown
-    ถ้า textbox ว่าง ก็ใช้ค่าจาก dropdown
-    """
-    # (a) ตัดสินใจเลือกค่า "ภาษาไทย" แต่ละหมวด
+    # เลือกค่าจาก 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
@@ -64,14 +59,12 @@ def generate_monster_lab(
     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}!"
     )
 
-    # (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)
@@ -79,7 +72,6 @@ def generate_monster_lab(
     ability_en = translate_th_to_en(ability_th)
     mood_en = translate_th_to_en(mood_th)
 
-    # (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, "
@@ -88,7 +80,7 @@ def generate_monster_lab(
 
     return desc_th, prompt_en
 
-# ===== 4) สร้าง UI (Gradio) =====
+# 4) สร้าง UI Gradio (ไม่มีปุ่ม Copy ใน .click() แต่ใช้ HTML ปุ่ม)
 css_code = """
 body {
     background-color: #FFF7EA;
@@ -133,16 +125,39 @@ 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;"
+        onclick="copyPromptText()">
+  Copy Prompt
+</button>
+
+<script>
+function copyPromptText() {
+  // หยิบ Textbox 'prompt-en' (ภายใน Gradio) โดย id
+  const promptBox = document.querySelector('#prompt-en textarea');
+  if (!promptBox) {
+    alert('ไม่พบข้อความ Prompt!');
+    return;
+  }
+  // Copy
+  const promptText = promptBox.value;
+  navigator.clipboard.writeText(promptText);
+  alert('คัดลอก Prompt แล้ว!');
+}
+</script>
+"""
 
 with gr.Blocks(css=css_code) as demo:
-    gr.Markdown("<h1 id='title'>ZenityX Monster Lab (Dropdown + Textbox)</h1>")
+    gr.Markdown("<h1 id='title'>ZenityX Monster Lab (Dropdown + Textbox + Copy HTML)</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>
+        <p>หนูน้อยจ๊ะ เลือกได้ว่าจะใช้ค่าใน <strong>Dropdown</strong> หรือจะ <strong>พิมพ์เอง</strong></p>
+        <p>เมื่อกด <strong>"สร้างมอนสเตอร์!"</strong> แล้วจะได้ <i>รายละเอียด (ภาษาไทย)</i> และ <i>Prompt ภาษาอังกฤษ</i></p>
+        <p>ปุ่ม <strong>"Copy Prompt"</strong> ด้านล่าง จะคัดลอกข้อความในช่อง Prompt เพื่อให้ไปวางใน AI อื่นได้ง่าย</p>
     </div>
     """)
 
@@ -168,15 +183,14 @@ with gr.Blocks(css=css_code) as demo:
             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")
+    create_btn = 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 (English)", interactive=False, elem_id="prompt-en")
 
-    # Event: กดปุ่ม "สร้างมอนสเตอร์!"
+    # แทรกปุ่ม Copy ด้วย HTML
+    gr.HTML(copy_button_html)
+
     create_btn.click(
         fn=generate_monster_lab,
         inputs=[
@@ -190,16 +204,6 @@ with gr.Blocks(css=css_code) as demo:
         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()