Update app.py

app.py

@@ -153,7 +153,7 @@ def describe_oxygen_th_to_en(desc_th):
         return "high oxygen"
 
 ###################################
-# ฟังก์ชันบรรยาย (ภาษาไทย)
+# 5) ฟังก์ชันบรรยาย (ภาษาไทย)
 ###################################
 def describe_distance(distance_au):
     if distance_au < 0.5:
@@ -232,35 +232,60 @@ def describe_oxygen(oxygen_percent):
         return "ออกซิเจนสูง"
 
 ###################################
-# 5) สร้าง Prompt 3 แบบ (Pre-translate dictionary)
+# 6) สร้าง Prompt 3 แบบ (Pre-translate dictionary) พร้อมสไตล์
 ###################################
 def build_prompts_en(
     planet_name_en, star_type_en,
-    dist_desc_en, temp_desc_en, grav_desc_en, tilt_desc_en, moon_desc_en, oxygen_desc_en, life_en
+    dist_desc_en, temp_desc_en, grav_desc_en, tilt_desc_en, moon_desc_en, oxygen_desc_en, life_en, style_en
 ):
+    # ถ้าเลือกสไตล์มาตรฐาน ไม่เพิ่มสไตล์ลงในพรอมพ์
+    if style_en.lower() != "standard":
+        style_text = f"in the style of {style_en}"
+    else:
+        style_text = ""
+
     # Prompt 1
     prompt1 = (
         f"A vibrant space painting of planet '{planet_name_en}' orbiting a {star_type_en} star. "
         f"It is {dist_desc_en}, with {temp_desc_en} conditions and {grav_desc_en} gravity. "
-        f"{tilt_desc_en}, {moon_desc_en}, atmosphere has {oxygen_desc_en}. Cinematic details."
+        f"{tilt_desc_en}, {moon_desc_en}, atmosphere has {oxygen_desc_en}. "
+        f"{style_text}. Cinematic details."
     )
 
     # Prompt 2
     prompt2 = (
         f"On planet '{planet_name_en}', we discover {life_en} thriving in {temp_desc_en} weather, "
-        f"{grav_desc_en} pull, and {oxygen_desc_en} in the air. Surreal alien ecosystem, rich concept art."
+        f"{grav_desc_en} pull, and {oxygen_desc_en} in the air. {style_text.capitalize()} "
+        f"alien ecosystem, rich concept art."
     )
 
     # Prompt 3
     prompt3 = (
         f"Exploring the surface of '{planet_name_en}': {temp_desc_en} climate, {grav_desc_en}, "
-        f"{tilt_desc_en} tilt, and {moon_desc_en}. Epic environment design, atmospheric perspective."
+        f"{tilt_desc_en} tilt, and {moon_desc_en}. {style_text.capitalize()} "
+        f"environment design, atmospheric perspective."
     )
 
     return prompt1, prompt2, prompt3
 
 ###################################
-# 6) ฟังก์ชันหลัก generate_planet_info
+# 7) สร้าง Dropdown สำหรับเลือกสไตล์
+###################################
+style_options = [
+    "Standard",
+    "Disney-Pixar",
+    "Studio Ghibli",
+    "Cartoon",
+    "Superhero",
+    "Fairy Tale",
+    "Adventure",
+    "Sci-Fi",
+    "Anime",
+    "Comic Book"
+]
+
+###################################
+# 8) ฟังก์ชันหลัก generate_planet_info พร้อมสไตล์
 ###################################
 def generate_planet_info(
     planet_name_th,
@@ -271,7 +296,8 @@ def generate_planet_info(
     moon_value,
     oxygen_percent,
     planet_type_th,  
-    life_th
+    life_th,
+    style_selected
 ):
     # parse
     try:
@@ -366,7 +392,7 @@ def generate_planet_info(
     )
 
     # -----------------------------
-    # (C) สร้าง Prompt อังกฤษ 3 แบบ
+    # (C) สร้าง Prompt อังกฤษ 3 แบบ พร้อมสไตล์
     # -----------------------------
     # 1) แปลชื่อดาว, สิ่งมีชีวิต (เฉพาะ user input) ผ่านแคช
     planet_name_en = translate_th_to_en(planet_name_th)
@@ -398,7 +424,8 @@ def generate_planet_info(
         tilt_desc_en,
         moon_desc_en,
         oxygen_desc_en,
-        life_en
+        life_en,
+        style_selected
     )
 
     return child_summary, detail_th, prompt1, prompt2, prompt3
@@ -408,30 +435,62 @@ def generate_planet_info(
 ###################################
 formula_text = r"""
 **สูตรอุณหภูมิ (Stefan-Boltzmann) แบบง่าย**  
-\\[
+\[
 T = \left(\frac{(1 - A) \times L}{16 \pi \sigma \, d^2}\right)^{\frac{1}{4}} - 273.15 + 15^\circ\text{C (Greenhouse)}
-\\]
+\]
 
-- \\(A\\) = Albedo  
-- \\(L\\) = ความสว่างของดาว (W)  
-- \\(\sigma\\) = 5.67\\times10^{-8}  
-- \\(d\\) = ระยะทาง (m)
+- \(A\) = Albedo  
+- \(L\) = ความสว่างของดาว (W)  
+- \(\sigma\) = 5.67\times10^{-8}  
+- \(d\) = ระยะทาง (m)
 
 **สูตรแรงโน้มถ่วงนิวตัน**  
-\\(g = \frac{G M}{R^2}\\)  
-(เราใช้สมมุติว่า \\(M \propto R^3\\) => \\(g \propto R\\))
+\(g = \frac{G M}{R^2}\)  
+(เราใช้สมมุติว่า \(M \propto R^3\) => \(g \propto R\))
 """
 
 ###################################
-# สร้าง UI ด้วย Gradio
+# ส���้าง UI ด้วย Gradio พร้อมรองรับ Dark Mode
 ###################################
 css_code = """
+/* ใช้ CSS Variables สำหรับรองรับ Light และ Dark Mode */
+:root {
+    --background-color: #F9FBFF;
+    --text-color: #333333;
+    --title-color: #4A90E2;
+    --game-desc-bg: #ECF6FF;
+    --game-desc-border: #B3DAFF;
+    --btn-main-bg: #FFE066;
+    --btn-main-border: #FFCA28;
+    --output-bg: #FFFDF5;
+    --output-border: #FFE082;
+    --copy-btn-bg: #F06292;
+    --copy-btn-border: #E91E63;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: #121212;
+        --text-color: #FFFFFF;
+        --title-color: #BB86FC;
+        --game-desc-bg: #1F1F1F;
+        --game-desc-border: #333333;
+        --btn-main-bg: #BB86FC;
+        --btn-main-border: #3700B3;
+        --output-bg: #2C2C2C;
+        --output-border: #BB86FC;
+        --copy-btn-bg: #CF6679;
+        --copy-btn-border: #B00020;
+    }
+}
+
 body {
-    background-color: #F9FBFF;
+    background-color: var(--background-color);
+    color: var(--text-color);
     font-family: "Kanit", sans-serif;
 }
 #title {
-    color: #4A90E2;
+    color: var(--title-color);
     text-align: center;
     font-size: 2rem;
     margin-top: 20px;
@@ -441,37 +500,48 @@ body {
 .game-desc {
     margin: 0 auto;
     width: 90%;
-    background-color: #ECF6FF;
-    border: 2px dashed #B3DAFF;
+    background-color: var(--game-desc-bg);
+    border: 2px dashed var(--game-desc-border);
     border-radius: 10px;
     padding: 15px;
-    color: #333;
+    color: var(--text-color);
     margin-bottom: 20px;
 }
 .btn-main {
-    background-color: #FFE066;
-    border: 2px solid #FFCA28;
+    background-color: var(--btn-main-bg);
+    border: 2px solid var(--btn-main-border);
     font-weight: bold;
     font-size: 1.1rem;
     padding: 10px 30px;
     border-radius: 10px;
     margin-right: 10px;
+    color: var(--text-color);
+    cursor: pointer;
+}
+.btn-main:hover {
+    opacity: 0.8;
 }
 #child-summary, #detail-th, #prompt1-en, #prompt2-en, #prompt3-en, #formula-box {
-    background-color: #FFFDF5;
-    border: 2px solid #FFE082;
+    background-color: var(--output-bg);
+    border: 2px solid var(--output-border);
     border-radius: 10px;
     padding: 10px;
     margin-bottom: 20px;
+    color: var(--text-color);
 }
 .copy-btn {
-    background-color: #F06292; 
-    border: 2px solid #E91E63; 
+    background-color: var(--copy-btn-bg); 
+    border: 2px solid var(--copy-btn-border); 
     font-weight: bold; 
     font-size: 0.8rem; 
     padding: 5px 10px; 
     border-radius: 5px;
     margin-top: 5px;
+    color: var(--text-color);
+    cursor: pointer;
+}
+.copy-btn:hover {
+    opacity: 0.8;
 }
 """
 
@@ -522,6 +592,13 @@ with gr.Blocks(css=css_code) as demo:
             oxygen_slider = gr.Slider(0, 100, step=1, value=21, label="% ออกซิเจน")
             life_th = gr.Textbox(label="สิ่งมีชีวิต (ไทย)", placeholder="เช่น แมลงยักษ์เรืองแสง...")
 
+    with gr.Row():
+        style_selected = gr.Dropdown(
+            label="เลือกสไตล์ของพรอมพ์",
+            choices=style_options,
+            value="Standard"
+        )
+
     create_btn = gr.Button("สร้างโลกแฟนตาซี", elem_classes="btn-main")
 
     child_summary_out = gr.Textbox(label="สรุปสำหรับเด็ก (ไทย)", interactive=False, elem_id="child-summary")
@@ -553,7 +630,7 @@ with gr.Blocks(css=css_code) as demo:
     gr.HTML(copy_button_html)
 
     def generate_wrapper(
-        p_name_th, s_type_en, dist_au, dia_fac, tilt_val, moon_val, oxy_val, p_type_th, l_th
+        p_name_th, s_type_en, dist_au, dia_fac, tilt_val, moon_val, oxy_val, p_type_th, l_th, style_sel
     ):
         return generate_planet_info(
             planet_name_th=p_name_th,
@@ -564,7 +641,8 @@ with gr.Blocks(css=css_code) as demo:
             moon_value=str(moon_val),
             oxygen_percent=oxy_val,
             planet_type_th=p_type_th,
-            life_th=l_th
+            life_th=l_th,
+            style_selected=style_sel
         )
 
     create_btn.click(
@@ -578,7 +656,8 @@ with gr.Blocks(css=css_code) as demo:
             moon_slider,
             oxygen_slider,
             planet_type_th,
-            life_th
+            life_th,
+            style_selected
         ],
         outputs=[
             child_summary_out,