Update app.py

app.py

@@ -182,69 +182,121 @@ Only provide the raw values, no headers.
 
 # -------------------- UI --------------------
 
-with gr.Blocks(title="Scene-by-Scene Story Generator") as demo:
+
+with gr.Blocks(title="Comic Generator", css=".gradio-container { box-shadow: 0 2px 12px rgba(0,0,0,0.05); border-radius: 12px; }") as demo:
+
     gr.Markdown("## 🎬 AI Scene-by-Scene Story Creator")
     gr.Markdown("Describe your story one scene at a time, with AI-generated images, summaries, and explanations.")
     gr.HTML("""
     <style>
+    /* ===== Global Background & Fonts ===== */
     body {
-        background-color: #f5f7fa;
+        background-color: #f2f6fa;  /* light blue-grey */
         font-family: 'Segoe UI', sans-serif;
+        margin: 0;
     }
     
     .gradio-container {
         background-color: #ffffff;
         color: #2c3e50;
+        border-radius: 12px;
+        padding: 16px;
     }
     
-    button, .gr-button {
-        background-color: #2980b9 !important;
-        color: #fff !important;
-        border-radius: 8px !important;
-        padding: 10px 16px;
-        font-weight: 600;
-        transition: background-color 0.3s ease;
-    }
-    
-    button:hover, .gr-button:hover {
-        background-color: #1f6692 !important;
-    }
-    
+    /* ===== Input Boxes & Dropdowns ===== */
     input, textarea, select, .gr-textbox, .gr-number, .gr-dropdown {
-        background-color: #ecf0f1 !important;
-        border: 1px solid #bdc3c7 !important;
-        border-radius: 6px !important;
+        background-color: #f7f9fb !important;  /* very light grey-blue */
+        border: 1px solid #d0dae3 !important;
+        border-radius: 8px !important;
         padding: 10px !important;
     }
     
+    /* ===== Accordion Panels ===== */
     .gr-accordion .panel {
-        background-color: #dce3ea !important;
-        border-radius: 8px;
-        border: 1px solid #aab7c4 !important;
+        background-color: #e9f1f7 !important; /* soft blue-grey */
+        border-radius: 10px;
+        border: 1px solid #c6d2db !important;
+        padding: 10px;
     }
     
+    /* ===== Markdown Titles and Labels ===== */
     .gr-markdown, label {
         color: #2c3e50;
         font-weight: 500;
     }
     
     h1, h2, h3 {
-        color: #1f6692;
+        color: #1a5276;
     }
     
+    /* ===== Image & Audio Containers ===== */
     .audio-preview, .gr-image-preview {
-        border-radius: 8px;
-        border: 1px solid #c0cfd9;
+        border-radius: 10px;
+        border: 1px solid #d3dfe8;
+        background-color: #fefefe;
     }
     
     .file-preview {
-        border: 1px solid #95a5a6;
-        background-color: #ecf0f1;
+        border: 1px solid #cfd8dc;
+        background-color: #f4f6f7;
         border-radius: 8px;
     }
+    
+    /* ===== Individual Button Styling ===== */
+    
+    /* ➕ Generate This Scene */
+    button:has-text("➕ Generate This Scene") {
+        background-color: #d6eaf8 !important;
+        color: #1a5276 !important;
+    }
+    
+    /* 🤖 Let AI Write This One */
+    button:has-text("🤖 Let AI Write This One") {
+        background-color: #eafaf1 !important;
+        color: #117a65 !important;
+    }
+    
+    /* 🔄 Recreate This Scene */
+    button:has-text("🔄 Recreate This Scene") {
+        background-color: #fffbe6 !important;
+        color: #b7950b !important;
+    }
+    
+    /* ⏭️ Next Scene */
+    button:has-text("⏭️ Next Scene") {
+        background-color: #f8ecf9 !important;
+        color: #7d3c98 !important;
+    }
+    
+    /* ✅ Finalize Story & Export */
+    button:has-text("✅ Finalize Story & Export") {
+        background-color: #e8f8f5 !important;
+        color: #1e8449 !important;
+    }
+    
+    /* 🔊 Read Aloud */
+    button:has-text("🔊 Read Aloud") {
+        background-color: #f0f3f4 !important;
+        color: #2c3e50 !important;
+    }
+    
+    /* General Button Style */
+    button, .gr-button {
+        border-radius: 8px !important;
+        font-weight: 600;
+        transition: background-color 0.3s ease;
+        border: none;
+        padding: 10px 16px;
+    }
+    
+    /* Hover Effect */
+    button:hover, .gr-button:hover {
+        filter: brightness(95%);
+    }
     </style>
     """)
 
+
     with gr.Accordion("🧩 Story Setup", open=True):
         scene_total = gr.Number(label="🔢 Number of Scenes", precision=0, value=3)
         theme = gr.Textbox(label="🌍 Global Theme", placeholder="e.g. A magical forest full of glowing creatures")