Update app.py

app.py

@@ -184,7 +184,89 @@ Only provide the raw values, no headers.
 
 
 with gr.Blocks(
-    title="Comic Generator", css="style.css") as demo:
+    title="Comic Generator", css="""
+    body {
+        background: #f2f6fa;
+    }
+    .gradio-container {
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+        border-radius: 16px;
+        padding: 24px;
+        background: #ffffff;
+        font-family: 'Segoe UI', sans-serif;
+    }
+
+    .gr-button {
+        border-radius: 8px;
+        font-weight: 600;
+        transition: 0.3s all ease-in-out;
+    }
+
+    /* Button Styling via IDs */
+    #generate-btn {
+        background-color: #007acc;
+        color: white;
+    }
+    #ai-write-btn {
+        background-color: #34495e;
+        color: white;
+    }
+    #recreate-btn {
+        background-color: #5dade2;
+        color: white;
+    }
+    #next-btn {
+        background-color: #85929e;
+        color: white;
+    }
+    #done-btn {
+        background-color: #2e86c1;
+        color: white;
+    }
+    #tts-btn {
+        background-color: #aab7b8;
+        color: white;
+    }
+
+    /* Sections */
+    .gr-accordion {
+        background-color: #e8f1f9;
+        border: 1px solid #d6eaf8;
+        border-radius: 10px;
+        padding: 8px;
+    }
+
+    .gr-markdown h2 {
+        color: #2e4053;
+    }
+
+    .gr-textbox textarea,
+    .gr-number input,
+    .gr-dropdown select {
+        border: 1px solid #d0d3d4;
+        border-radius: 6px;
+    }
+
+    .gr-image {
+        border: 1px solid #d6eaf8;
+        background-color: #f8f9f9;
+        border-radius: 12px;
+        padding: 8px;
+    }
+
+    .gr-audio {
+        background-color: #ecf0f1;
+        border-radius: 8px;
+        padding: 10px;
+    }
+
+    .gr-file {
+        background-color: #f7f9f9;
+        border: 1px dashed #bfc9ca;
+        border-radius: 10px;
+        padding: 10px;
+    }
+""") 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.")
 
@@ -206,12 +288,10 @@ with gr.Blocks(
         bg_style = gr.Dropdown(label="🎨 Background Style", choices=["Realistic", "Cartoon", "Fantasy", "Dark Fantasy"], value="Fantasy")
 
     with gr.Row():
-        generate_btn = gr.Button("➕ Generate This Scene")
-        ai_coauthor_btn = gr.Button("🤖 Let AI Write This One")
-        recreate_btn = gr.Button("🔄 Recreate This Scene")
-        next_btn = gr.Button("⏭️ Next Scene")
-    # last_image_display = gr.Image(label="📸 Last Scene Image", type="pil")
-
+        generate_btn = gr.Button("➕ Generate This Scene", elem_id="generate-btn")
+        ai_coauthor_btn = gr.Button("🤖 Let AI Write This One", elem_id="ai-write-btn")
+        recreate_btn = gr.Button("🔄 Recreate This Scene", elem_id="recreate-btn")
+        next_btn = gr.Button("⏭️ Next Scene", elem_id="next-btn")
 
     status = gr.Markdown()
     image_output = gr.Image(label="🖼️ Scene Image", type="pil")
@@ -219,10 +299,10 @@ with gr.Blocks(
     explanation_output = gr.Textbox(label="📖 Scene Explanation", lines=6)
 
     with gr.Row():
-        tts_btn = gr.Button("🔊 Read Aloud")
+        tts_btn = gr.Button("🔊 Read Aloud", elem_id="tts-btn")
         tts_audio = gr.Audio(label="Audio", autoplay=False)
 
-    done_btn = gr.Button("✅ Finalize Story & Export", visible=False)
+    done_btn = gr.Button("✅ Finalize Story & Export", visible=False, elem_id="done-btn")
     txt_file = gr.File(label="📄 Explanations (.txt)")
     pdf_file = gr.File(label="📘 Scene PDF")
 
@@ -245,7 +325,6 @@ with gr.Blocks(
         ]
     )
 
-
     recreate_btn.click(
         fn=generate_scene,
         inputs=[
@@ -260,7 +339,6 @@ with gr.Blocks(
         ]
     )
 
-
     next_btn.click(
         fn=generate_scene,
         inputs=[
@@ -271,18 +349,16 @@ with gr.Blocks(
         outputs=[
             image_output, summary_output, explanation_output,
             scene_images, scene_summaries, scene_explanations,
-            status, done_btn]
+            status, done_btn
+        ]
     )
 
-
-
     ai_coauthor_btn.click(
         fn=ai_write_scene,
         inputs=[theme, scene_total, scene_summaries],
         outputs=[character_names, dialogue, dialogue_speaker, char_styles, char_moods, bg_style, status]
     )
 
-
     done_btn.click(
         fn=finalize_story,
         inputs=[scene_images, scene_explanations],