Update app.py

app.py

@@ -186,85 +186,97 @@ Only provide the raw values, no headers.
 with gr.Blocks(
     title="Comic Generator", css="""
     body {
-        background: #f2f6fa;
+        background: linear-gradient(to bottom right, #e8f0fe, #fdfbfb);
     }
+
     .gradio-container {
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-        border-radius: 16px;
-        padding: 24px;
+        max-width: 960px;
+        margin: 2rem auto;
+        padding: 32px;
         background: #ffffff;
+        border-radius: 20px;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
         font-family: 'Segoe UI', sans-serif;
     }
 
+    .gr-markdown h2, .gr-markdown h3 {
+        color: #2e4053;
+    }
+
     .gr-button {
         border-radius: 8px;
         font-weight: 600;
-        transition: 0.3s all ease-in-out;
+        padding: 10px 18px;
+        transition: 0.3s ease;
+        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
     }
 
-    /* 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;
+    /* Text fields, dropdowns, and numbers */
+    textarea, input[type='number'], select {
+        border: 1px solid #d0d3d4 !important;
+        border-radius: 8px !important;
+        padding: 10px !important;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+        transition: all 0.2s ease-in-out;
     }
 
-    .gr-markdown h2 {
-        color: #2e4053;
-    }
-
-    .gr-textbox textarea,
-    .gr-number input,
-    .gr-dropdown select {
-        border: 1px solid #d0d3d4;
-        border-radius: 6px;
+    textarea:focus, input[type='number']:focus, select:focus {
+        border-color: #5dade2 !important;
+        box-shadow: 0 0 5px rgba(93, 173, 226, 0.3);
+        outline: none;
     }
 
-    .gr-image {
+    /* Accordions */
+    .gr-accordion {
+        background-color: #f0f6fc;
         border: 1px solid #d6eaf8;
-        background-color: #f8f9f9;
         border-radius: 12px;
-        padding: 8px;
+        padding: 12px;
+        margin-bottom: 12px;
     }
 
-    .gr-audio {
-        background-color: #ecf0f1;
-        border-radius: 8px;
-        padding: 10px;
+    .gr-accordion .gr-box {
+        background-color: #ffffff;
+        border-radius: 10px;
+        padding: 12px;
     }
 
-    .gr-file {
-        background-color: #f7f9f9;
-        border: 1px dashed #bfc9ca;
-        border-radius: 10px;
-        padding: 10px;
+    /* Image and audio box */
+    .gr-image, .gr-audio, .gr-file {
+        border: 1px solid #d6eaf8;
+        border-radius: 12px;
+        background-color: #f9fbfd;
+        padding: 12px;
     }
 """) as demo:
     gr.Markdown("## 🎬 AI Scene-by-Scene Story Creator")
@@ -276,16 +288,18 @@ with gr.Blocks(
 
     gr.Markdown("### ✨ Describe Your Next Scene")
 
-    with gr.Row():
-        char_count = gr.Number(label="👥 Number of Characters", precision=0, value=2)
-        character_names = gr.Textbox(label="🧙‍♂️ Character Names", placeholder="e.g. Elora, Bramble the Bear")
-        dialogue = gr.Textbox(label="💬 Dialogue (optional)", placeholder="e.g. 'Protect the forest!'")
+    with gr.Group():
+        with gr.Row():
+            char_count = gr.Number(label="👥 Number of Characters", precision=0, value=2)
+            character_names = gr.Textbox(label="🧙‍♂️ Character Names", placeholder="e.g. Elora, Bramble the Bear")
+        with gr.Row():
+            dialogue = gr.Textbox(label="💬 Dialogue (optional)", placeholder="e.g. 'Protect the forest!'")
+            dialogue_speaker = gr.Textbox(label="🗣️ Who says the dialogue?", placeholder="e.g. Bramble")
 
-    with gr.Row():
-        dialogue_speaker = gr.Textbox(label="🗣️ Who says the dialogue?", placeholder="e.g. Bramble")
-        char_styles = gr.Textbox(label="🧥 Outfit Descriptions", placeholder="e.g. Elora wears a leafy cloak, Bramble has a warrior vest")
-        char_moods = gr.Textbox(label="😠 Character Moods", placeholder="e.g. Elora is cautious, Bramble is brave")
-        bg_style = gr.Dropdown(label="🎨 Background Style", choices=["Realistic", "Cartoon", "Fantasy", "Dark Fantasy"], value="Fantasy")
+        with gr.Row():
+            char_styles = gr.Textbox(label="🧥 Outfit Descriptions", placeholder="e.g. Elora wears a leafy cloak, Bramble has a warrior vest")
+            char_moods = gr.Textbox(label="😠 Character Moods", placeholder="e.g. Elora is cautious, Bramble is brave")
+            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", elem_id="generate-btn")
@@ -306,7 +320,7 @@ with gr.Blocks(
     txt_file = gr.File(label="📄 Explanations (.txt)")
     pdf_file = gr.File(label="📘 Scene PDF")
 
-    # Persistent session states
+    # States
     scene_images = gr.State([])
     scene_explanations = gr.State([])
     scene_summaries = gr.State([])