Update app.py

app.py

@@ -1,51 +1,103 @@
 import gradio as gr
+from transformers import MarianMTModel, MarianTokenizer
 
-# หมวดหมู่ต่าง ๆ พร้อมตัวเลือก (ตัวอย่าง)
-body_shapes = [
-    "slimy blob body", "furry ball body", "spiky ogre body", 
-    "tiny insect body", "floating jelly body"
+# ==============================
+# 1) โหลดโมเดลแปลภาษา (MarianMT) จาก Hugging Face
+#    ใช้โมเดล "Helsinki-NLP/opus-mt-th-en"
+# ==============================
+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) ตัวเลือก (ภาษาไทย) สำหรับมอนสเตอร์
+# ==============================
+body_shapes_th = [
+    "ตัวเหนียวขยุกขยิก", "ตัวปุกปุยกลม", "ตัวเต็มไปด้วยหนาม",
+    "ตัวเล็กเหมือนแมลง", "ตัวโปร่งแสงลอยได้"
 ]
-heads = [
-    "one-eyed head", "two-headed dragon skull", "giant horned head",
-    "smiling ghost face", "cute bunny ears head"
+heads_th = [
+    "หัวตาเดียว", "หัวสองเขาเหมือนมังกร", "หัวมีเขาใหญ่มาก",
+    "หัวผีแสยะยิ้ม", "หัวกระต่ายน่ารัก"
 ]
-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"
+arms_legs_th = [
+    "แขนหนวดปลาหมึกและขาปลาหมึก", "แขนกลและเท้าสเก็ต",
+    "ปีกขนนกและอุ้งเท้าสิงโต", "แขนเรืองแสงและขายานโฮเวอร์",
+    "แขนไม้หุ่นเชิดและขายักษ์แมงมุม"
 ]
-skin_patterns = [
-    "rainbow stripes", "glowing purple spots", "metallic scales", 
-    "sparkling feathers", "glittery polka dots"
+skin_patterns_th = [
+    "ลายสีรุ้ง", "จุดม่วงเรืองแสง", "เกล็ดเหล็ก",
+    "ขนนกวิบวับ", "จุดกลมกากเพชร"
 ]
-abilities = [
-    "breathing fire", "shooting bubbles", "controlling lightning", 
-    "singing lullabies", "teleporting short distances"
+abilities_th = [
+    "พ่นไฟ", "ปล่อยฟองสบู่", "ควบคุมสายฟ้า",
+    "ร้องเพลงกล่อม", "วาร์ประยะสั้น"
 ]
-moods = [
-    "friendly", "grumpy", "silly", "mischievous", "shy"
+moods_th = [
+    "เป็นมิตร", "ขี้หงุดหงิด", "ตลกโปกฮา",
+    "ซนเป็นลิง", "ขี้อาย"
 ]
 
-def generate_monster_prompt(body, head, arms, skin, ability, mood):
+# ==============================
+# 3) ฟังก์ชันสร้าง Prompt
+# ==============================
+def generate_monster_lab(body_th, head_th, arms_th, skin_th, ability_th, mood_th):
     """
-    สร้างประโยค (Prompt) บรรยายมอนสเตอร์ตามตัวเลือกที่เด็กเลือก
+    สร้าง 'รายละเอียดมอนสเตอร์ (ภาษาไทย)' + Prompt ภาษาอังกฤษ
     """
-    prompt = (
-        f"This is a {mood} monster with a {body}, a {head}, "
-        f"{arms}, covered in {skin} skin, and it can {ability}!"
+    # (a) รวมรายละเอียดมอนสเตอร์ (ภาษาไทย)
+    desc_th = (
+        f"มอนสเตอร์อารมณ์{mood_th} มี{body_th} "
+        f"พร้อมด้วย{head_th}, {arms_th}, "
+        f"ผิว/ลายแบบ{skin_th}, และพลังพิเศษคือ{ability_th}!"
+    )
+
+    # (b) แปลทีละส่วน
+    body_en = translate_th_to_en(body_th)
+    head_en = translate_th_to_en(head_th)
+    arms_en = translate_th_to_en(arms_th)
+    skin_en = translate_th_to_en(skin_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]!"
+    prompt_en = (
+        f"This is a {mood_en} monster with {body_en}, "
+        f"a {head_en}, {arms_en}, covered in {skin_en} skin, "
+        f"and it can {ability_en}!"
     )
-    return prompt
 
+    return desc_th, prompt_en
+
+# ==============================
+# 4) สร้าง UI (Gradio)
+# ==============================
 css_code = """
 body {
-    background-color: #FFFCF2;
-    font-family: "Comic Sans MS", cursive;
+    background-color: #FFF7EA;
+    font-family: "Kanit", sans-serif;
 }
 
 #title {
-    color: #F96C85;
+    color: #FF6F91;
     text-align: center;
-    font-size: 2.1rem;
+    font-size: 2rem;
     margin-top: 20px;
     margin-bottom: 10px;
     font-weight: bold;
@@ -60,57 +112,68 @@ body {
     color: #333;
 }
 .monster-btn {
-    background-color: #FFB74D;
-    border: 2px solid #FFA726;
+    background-color: #FFC107;
+    border: 2px solid #FFA000;
     font-weight: bold;
     font-size: 1.1rem;
     padding: 10px 20px;
     border-radius: 10px;
 }
 .monster-btn:hover {
-    background-color: #FFD180;
+    background-color: #FFD54F;
 }
-#prompt-box {
-    font-size: 18px;
-    background-color: #FFF8E1;
-    border: 2px solid #FFE0B2;
+#desc-th, #prompt-en {
+    background-color: #FFFAE6;
+    border: 2px solid #FFE082;
     border-radius: 10px;
     padding: 10px;
+    margin-bottom: 20px;
 }
 """
 
+def initial_text():
+    """
+    แสดงข้อความเริ่มต้นเมื่อเปิดเว็บครั้งแรก
+    """
+    return "ยังไม่ได้สร้างมอนสเตอร์นะจ๊ะ เลือกค่าต่าง ๆ แล้วกด 'สร้างมอนสเตอร์!' ดูสิ"
+
 with gr.Blocks(css=css_code) as demo:
-    gr.Markdown("<h1 id='title'>ZenityX Monster Lab</h1>")
+    gr.Markdown("<h1 id='title'>ZenityX Monster Lab (Thai -> English)</h1>")
     gr.Markdown(
         """
         <div class="game-desc">
-            <p>ยินดีต้อนรับจ้า หนูน้อยนักทดลอง! ที่นี่คือห้องทดลองลับของ ZenityX!</p>
-            <p>มาออกแบบมอนสเตอร์กันเถอะ: เลือกรูปร่าง, หัว, แขนขา, สีผิว, พลังพิเศษ, 
-               และอารมณ์สุดเพี้ยน. จากนั้นกดปุ่ม <strong>"Activate Lab!"</strong></p>
-            <p>ลองดูสิ ว่ามอนสเตอร์ของหนูน้อยจะออกมาเป็นแบบไหน?</p>
+            <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>
         """
     )
     
-    # ส่วนเลือกค่าแต่ละหมวด
-    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])
+    # 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("Activate Lab!", elem_classes="monster-btn")
+    create_button = gr.Button("สร้างมอนสเตอร์!", elem_classes="monster-btn")
     
-    # ช่องแสดงผล Prompt
-    monster_prompt_out = gr.Textbox(label="Your Monster Prompt", interactive=False, elem_id="prompt-box")
+    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")
 
-    # เมื่อกดปุ่ม -> สร้าง Prompt
+    # เมื่อกดปุ่ม -> เรียก generate_monster_lab
     create_button.click(
-        fn=generate_monster_prompt,
-        inputs=[body_dropdown, head_dropdown, arms_dropdown, skin_dropdown, ability_dropdown, mood_dropdown],
-        outputs=monster_prompt_out
+        fn=generate_monster_lab,
+        inputs=[dd_body, dd_head, dd_arms, dd_skin, dd_ability, dd_mood],
+        outputs=[monster_desc_th, monster_prompt_en]
     )
 
+    # เมื่อโหลดเว็บครั้งแรก
+    demo.load(fn=initial_text, inputs=None, outputs=monster_desc_th)
+
 demo.launch()