Update app.py

app.py

@@ -97,100 +97,105 @@ theme_options = [
 
 language_options = ["English", "Urdu"]
 
-# Custom CSS for child-friendly interface
-custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
-
-.gradio-container {
-    font-family: 'Comic Neue', cursive !important;
-    background: linear-gradient(135deg, #ffafbd, #ffc3a0) !important;
-    padding: 20px !important;
-}
-
-.main-header {
-    text-align: center;
-    font-weight: bold !important;
-    font-size: 3.2em !important;
-    margin: 20px 0 !important;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
-    color: #12979B;
-}
-
-.story-container {
-    background: #fff5ee !important;
-    border-radius: 20px !important;
-    padding: 25px !important;
-    border: 5px solid #FFD166 !important;
-    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
-    min-height: 400px !important;
-    margin: 20px 0 !important;
-}
-
-.control-panel {
-    background: #fff5ee !important;
-    border-radius: 15px !important;
-    padding: 20px !important;
-    border: 3px dashed #4ECDC4 !important;
-    margin: 20px 0 !important;
-}
-
-.generate-btn {
-    background: linear-gradient(45deg, #FF6B6B, #FF9E7D) !important;
-    border: none !important;
-    border-radius: 50px !important;
-    padding: 15px 30px !important;
-    font-size: 1.2em !important;
-    font-weight: bold !important;
-    color: white !important;
-    margin: 20px 0 !important;
-    width: 100% !important;
-}
-
-.generate-btn:hover {
-    transform: scale(1.05) !important;
-    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4) !important;
-}
-
-.dropdown, .checkbox {
-    background: white !important;
-    border-radius: 10px !important;
-    border: 2px solid #96CEB4 !important;
-    margin: 10px 0 !important;
-}
-
-.audio-player {
-    border-radius: 15px !important;
-    margin: 20px 0 !important;
-}
-
-.subtitle {
-    text-align: center !important;
-    font-size: 1.5em !important;
-    font-weight: 600 !important;
-    color: white !important;
-    margin: 20px 0 !important;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.1) !important;
-}
-
-.footer {
-    text-align: center !important;
-    margin: 20px 0 !important;
-    color: #666 !important;
-    font-style: italic !important;
-    font-size: 1.1em !important;
-}
-
-.warning-box {
-    background: #fff3cd !important;
-    border: 2px solid #ffeaa7 !important;
-    border-radius: 10px !important;
-    padding: 15px !important;
-    margin: 20px 0 !important;
-}
-"""
-
-# Create the interface with CSS
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
+# Create the interface - WITHOUT css parameter
+with gr.Blocks() as iface:
+    
+    # Inject CSS as HTML
+    gr.HTML("""
+    <style>
+    @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
+    
+    .gradio-container {
+        font-family: 'Comic Neue', cursive !important;
+        background: linear-gradient(135deg, #ffafbd, #ffc3a0) !important;
+        padding: 20px;
+        min-height: 100vh;
+    }
+    
+    .main-header {
+        text-align: center;
+        font-weight: bold;
+        font-size: 3.2em;
+        margin: 20px 0;
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+        color: #12979B;
+    }
+    
+    .subtitle {
+        text-align: center;
+        font-size: 1.5em;
+        font-weight: 600;
+        color: white;
+        margin: 20px 0;
+        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+    }
+    
+    .control-panel {
+        background: #fff5ee;
+        border-radius: 15px;
+        padding: 20px;
+        border: 3px dashed #4ECDC4;
+        margin: 20px 0;
+    }
+    
+    .story-container {
+        background: #fff5ee;
+        border-radius: 20px;
+        padding: 25px;
+        border: 5px solid #FFD166;
+        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+        min-height: 400px;
+        margin: 20px 0;
+    }
+    
+    .generate-btn {
+        background: linear-gradient(45deg, #FF6B6B, #FF9E7D) !important;
+        border: none !important;
+        border-radius: 50px !important;
+        padding: 15px 30px !important;
+        font-size: 1.2em !important;
+        font-weight: bold !important;
+        color: white !important;
+        margin: 20px 0 !important;
+        width: 100% !important;
+        cursor: pointer !important;
+    }
+    
+    .generate-btn:hover {
+        transform: scale(1.05) !important;
+        box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4) !important;
+    }
+    
+    .footer {
+        text-align: center;
+        margin: 20px 0;
+        color: #666;
+        font-style: italic;
+        font-size: 1.1em;
+    }
+    
+    .warning-box {
+        background: #fff3cd;
+        border: 2px solid #ffeaa7;
+        border-radius: 10px;
+        padding: 15px;
+        margin: 20px 0;
+    }
+    
+    /* Style Gradio components */
+    .gradio-container .dropdown, .gradio-container .checkbox {
+        background: white !important;
+        border-radius: 10px !important;
+        border: 2px solid #96CEB4 !important;
+        margin: 10px 0 !important;
+    }
+    
+    .gradio-container .audio {
+        border-radius: 15px !important;
+        margin: 20px 0 !important;
+    }
+    </style>
+    """)
     
     # Header
     gr.HTML("""
@@ -252,11 +257,11 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
                 info="Generate audio narration"
             )
 
+            gr.HTML('</div>')
+            
             generate_btn = gr.Button(
-                "✨ Create Magical Story! ✨", 
-                elem_classes="generate-btn"
+                "✨ Create Magical Story! ✨"
             )
-            gr.HTML('</div>')
 
         # Right Column - Output
         with gr.Column(scale=2):
@@ -282,6 +287,24 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     </div>
     """)
 
+    # Apply button styling with JavaScript
+    gr.HTML("""
+    <script>
+    function styleButton() {
+        const buttons = document.querySelectorAll('button');
+        buttons.forEach(button => {
+            if (button.textContent.includes('Create Magical Story')) {
+                button.classList.add('generate-btn');
+            }
+        });
+    }
+    // Style button on load and when DOM changes
+    document.addEventListener('DOMContentLoaded', styleButton);
+    setTimeout(styleButton, 1000);
+    setInterval(styleButton, 2000);
+    </script>
+    """)
+
     generate_btn.click(
         create_story_interface,
         inputs=[age_input, theme_input, language_input, tts_input],