Update app.py

app.py

@@ -221,11 +221,11 @@ with gr.Blocks(
     }
     
     .gr-button {
-        border-radius: 8px;
-        font-weight: 600;
-        padding: 10px 18px;
-        transition: 0.3s ease;
-        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+        border-radius: 10px;
+        font-weight: bold;
+        padding: 12px 24px;
+        transition: all 0.4s ease;
+        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
     }
     
     #generate-btn,
@@ -235,8 +235,8 @@ with gr.Blocks(
     #done-btn,
     #tts-btn,
     #recreate-scene-index {
-        background-color: #ffffff;
-        color: black;
+        background-color: linear-gradient(135deg, #a18cd1, #fbc2eb);
+        color: white;
         border: 1px solid #000000;
     }
     
@@ -265,10 +265,10 @@ with gr.Blocks(
     #reset-btn:hover,
     #done-btn:hover,
     #tts-btn:hover{
-        background: linear-gradient(to right, #3498db, #2980b9);
-        color: white;
+        background: linear-gradient(135deg, #ff9a9e, #fad0c4);
+        transform: scale(1.05);
+        color: #000;
         cursor: pointer;
-        transition: background 0.3s ease;
     }
 
     #theme-input,
@@ -302,6 +302,27 @@ with gr.Blocks(
         outline: none;
         
     }
+
+    input, textarea, select {
+        border-radius: 8px !important;
+        border: 1px solid #ccc !important;
+        padding: 10px !important;
+        background-color: #fff5fc;
+        box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
+        transition: all 0.2s ease-in-out;
+    }
+    input:focus, textarea:focus, select:focus {
+        border-color: #ff80ab !important;
+        box-shadow: 0 0 6px rgba(255, 105, 180, 0.3);
+        outline: none;
+    }
+    
+    /* 🎆 Scene Image Border */
+    .gr-image img {
+        border: 4px dashed #ffb6b9;
+        border-radius: 16px;
+        padding: 4px;
+    }
     
     .gr-accordion {
         background-color: #d4a373;
@@ -335,10 +356,27 @@ with gr.Blocks(
         font-family: 'Comic Sans MS', cursive, sans-serif;
     }
     
-    @keyframes float {
-        0% { transform: translateY(0px); }
-        50% { transform: translateY(-10px); }
-        100% { transform: translateY(0px); }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+    
+        @keyframes floatX {
+        0%   { transform: translateX(0); }
+        50%  { transform: translateX(15px); }
+        100% { transform: translateX(0); }
+    }
+    
+    @keyframes pulseColor {
+        0% { color: #ff4081; }
+        50% { color: #7e57c2; }
+        100% { color: #42a5f5; }
+    }
+    
+    @keyframes backgroundMove {
+        0% { background-position: 0% 50%; }
+        100% { background-position: 100% 50%; }
     }
 
 """) as demo:
@@ -346,24 +384,24 @@ with gr.Blocks(
     gr.Markdown("Describe your story one scene at a time, with AI-generated images, summaries, and explanations.\nPut your own GOOGLE API KEY (named as GOOGLE_API_KEY) in the SECRET VARIABLE.")
 
     with gr.Accordion("🧩 Story Setup", open=True):
-        title = gr.Textbox(label="📖 Story Title", placeholder="e.g. The Enchanted Forest")
-        scene_total = gr.Number(label="🔢 Number of Scenes", precision=0, value=3, elem_id="scene-count")
-        theme = gr.Textbox(label="🌍 Global Theme", placeholder="e.g. A magical forest full of glowing creatures", elem_id="theme-input")
+        title = gr.Textbox(label="📖 Story Title", placeholder="e.g. The Enchanted Forest",elem_id="textarea")
+        scene_total = gr.Number(label="🔢 Number of Scenes", precision=0, value=3, elem_id="input")
+        theme = gr.Textbox(label="🌍 Global Theme", placeholder="e.g. A magical forest full of glowing creatures", elem_id="textarea")
 
     gr.Markdown("### ✨ Describe Your Next Scene")
 
     with gr.Group():
         with gr.Row():
-            char_count = gr.Number(label="👥 Number of Characters", precision=0, value=2, elem_id="char-count")
-            character_names = gr.Textbox(label="🧙‍♂️ Character Names", elem_id="char-names")
+            char_count = gr.Number(label="👥 Number of Characters", precision=0, value=2, elem_id="input")
+            character_names = gr.Textbox(label="🧙‍♂️ Character Names", elem_id="textarea")
         with gr.Row():
-            dialogue = gr.Textbox(label="💬 Dialogue (optional)", placeholder="e.g. 'Protect the forest!'", elem_id="dialogue-input")
-            dialogue_speaker = gr.Textbox(label="🗣️ Who says the dialogue?", placeholder="e.g. Bramble", elem_id = "dialogue-speaker")
+            dialogue = gr.Textbox(label="💬 Dialogue (optional)", placeholder="e.g. 'Protect the forest!'", elem_id="textarea")
+            dialogue_speaker = gr.Textbox(label="🗣️ Who says the dialogue?", placeholder="e.g. Bramble", elem_id = "txtarea")
 
         with gr.Row():
-            char_styles = gr.Textbox(label="🧥 Outfit Descriptions", placeholder="e.g. Elora wears a leafy cloak, Bramble has a warrior vest", elem_id="char-styles")
-            char_moods = gr.Textbox(label="😠 Character Moods", placeholder="e.g. Elora is cautious, Bramble is brave", elem_id="char-moods")
-            bg_style = gr.Dropdown(label="🎨 Background Style", choices=["Realistic", "Cartoon", "Fantasy", "Dark Fantasy"], value="Fantasy", elem_id="bg-style")
+            char_styles = gr.Textbox(label="🧥 Outfit Descriptions", placeholder="e.g. Elora wears a leafy cloak, Bramble has a warrior vest", elem_id="textarea")
+            char_moods = gr.Textbox(label="😠 Character Moods", placeholder="e.g. Elora is cautious, Bramble is brave", elem_id="textarea")
+            bg_style = gr.Dropdown(label="🎨 Background Style", choices=["Realistic", "Cartoon", "Fantasy", "Dark Fantasy"], value="Fantasy", elem_id="select")
 
     with gr.Row():
         generate_btn = gr.Button("➕ Generate The Scene", elem_id="generate-btn")
@@ -373,7 +411,7 @@ with gr.Blocks(
         recreate_btn = gr.Button("🔄 Recreate The Scene", elem_id="recreate-btn")
         reset_btn = gr.Button("\n⏭️ Reset", elem_id="reset-btn")
 
-    status = gr.Markdown()
+    status = gr.Markdown(class=gr-image)
     image_output = gr.Image(label="🖼️ Scene Image", type="pil")
     summary_output = gr.Markdown(label="📝 Scene Summary")
     explanation_output = gr.Textbox(label="📖 Scene Explanation", lines=6)