Update app.py

app.py

@@ -60,14 +60,12 @@ def generate_story(age, theme, language):
 
 def story_to_speech(story, language_code='en'):
     try:
-        # For Hugging Face deployment, we'll use a simple audio generation
         from gtts import gTTS
         tts = gTTS(text=story, lang=language_code)
         filename = "story.mp3"
         tts.save(filename)
         return filename
     except Exception as e:
-        # Fallback: Return a message about audio being unavailable
         print(f"TTS Error: {e}")
         return None
 
@@ -77,27 +75,12 @@ def create_story_interface(age, theme, language, tts_option):
     # Remove Markdown symbols (*, #, _, etc.) to prevent asterisks showing up
     story = re.sub(r'[*_#`~]', '', story)
 
-    # Split first line as title
-    lines = story.split("\n", 1)
-    if len(lines) > 1:
-        title, rest_of_story = lines[0], lines[1]
-    else:
-        title, rest_of_story = lines[0], ""
-
+    # Generate audio if TTS is enabled
     if language.lower().startswith("u"):  # Urdu
-        story_html = (
-            f'<div style="text-align:center; font-size:1.3em; direction:rtl; margin-bottom:5px;">{title}</div>'
-            f'<div style="font-size:1.2em; direction:rtl; text-align:right;">{rest_of_story}</div>'
-        )
         lang_code = "ur"
     else:  # English
-        story_html = (
-            f'<div style="text-align:center; font-size:1.3em; direction:ltr; margin-bottom:5px;">{title}</div>'
-            f'<div style="font-size:1.2em; direction:ltr; text-align:left;">{rest_of_story}</div>'
-        )
         lang_code = "en"
 
-    # Generate audio if TTS is enabled
     audio_file = story_to_speech(story, lang_code) if tts_option else None
 
     return story, audio_file
@@ -114,119 +97,29 @@ theme_options = [
 
 language_options = ["English", "Urdu"]
 
-# Custom CSS for child-friendly interface - we'll use HTML injection instead
-custom_css = """
-<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;
-}
-
-.main-header {
-    text-align: center;
-    font-weight: bold !important;
-    font-size: 3.2em !important;
-    margin: 20px 0;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
-    color: #12979B;
-}
-
-.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;
-}
-
-.control-panel {
-    background: #fff5ee;
-    border-radius: 15px;
-    padding: 20px;
-    border: 3px dashed #4ECDC4;
-    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;
-    width: 100%;
-}
-
-.generate-btn:hover {
-    transform: scale(1.05);
-    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
-}
-
-.dropdown, .checkbox {
-    background: white !important;
-    border-radius: 10px !important;
-    border: 2px solid #96CEB4 !important;
-    margin: 10px 0;
-}
-
-.audio-player {
-    border-radius: 15px !important;
-    margin: 20px 0;
-}
-
-.subtitle {
-    text-align: center;
-    font-size: 1.5em !important;
-    font-weight: 600;
-    color: white;
-    margin: 20px 0;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-}
-
-.footer {
-    text-align: center;
-    margin: 20px 0;
-    color: #666;
-    font-style: italic;
-    font-size: 1.1em !important;
-}
-</style>
-"""
-
-# Create the interface without css parameter
-with gr.Blocks() as iface:
-    # Inject custom CSS as HTML
-    gr.HTML(custom_css)
+# Create the interface with simple styling
+with gr.Blocks(theme=gr.themes.Soft()) as iface:
     
-    gr.HTML("""
-    <div class="main-header">
-        🌈 StoryTime AI 🎪
-    </div>
-    """)
-
-    gr.HTML("""
-    <div class="subtitle">
-        🎯 Create amazing stories that spark imagination and teach valuable lessons!
-    </div>
-    """)
+    # Header
+    gr.Markdown(
+        """
+        <div style="text-align: center; background: linear-gradient(135deg, #ffafbd, #ffc3a0); padding: 30px; border-radius: 15px; margin-bottom: 20px;">
+            <h1 style="color: #12979B; margin: 0; font-size: 3em;">🌈 StoryTime AI 🎪</h1>
+            <p style="color: white; font-size: 1.5em; margin: 10px 0 0 0;">🎯 Create amazing stories that spark imagination and teach valuable lessons!</p>
+        </div>
+        """
+    )
     
     # API Key warning
     if not GROQ_API_KEY:
         gr.Warning("⚠️ Please set GROQ_API_KEY in Hugging Face Space secrets to use this app")
 
     with gr.Row():
+        # Left Column - Controls
         with gr.Column(scale=1, min_width=300):
+            gr.Markdown("### 🎨 Story Settings")
+            
             with gr.Group():
-                gr.HTML('<div class="control-panel">')
-                gr.Markdown("### 🎨 Story Settings")
-
                 age_input = gr.Dropdown(
                     age_options, 
                     label="👶 Child's Age", 
@@ -251,23 +144,23 @@ with gr.Blocks() as iface:
                 tts_input = gr.Checkbox(
                     label="🔊 Include Audio Story", 
                     value=True,
-                    info="Listen to the story (may not work in all environments)"
+                    info="Listen to the story"
                 )
 
-                generate_btn = gr.Button(
-                    "✨ Create Magical Story! ✨"
-                )
-                gr.HTML('</div>')
+            generate_btn = gr.Button(
+                "✨ Create Magical Story! ✨", 
+                size="lg",
+                variant="primary"
+            )
 
+        # Right Column - Output
         with gr.Column(scale=2):
             with gr.Group():
-                gr.HTML('<div class="story-container">')
                 gr.Markdown("### 📖 Your Magical Story")
                 story_output = gr.Markdown(
                     "Your story will appear here! Choose settings and click the magic button! 🎇",
                     show_label=False
                 )
-                gr.HTML('</div>')
 
             with gr.Group():
                 gr.Markdown("### 🎧 Listen to Your Story")
@@ -276,11 +169,14 @@ with gr.Blocks() as iface:
                     show_label=False
                 )
 
-    gr.HTML("""
-    <div class="footer">
-        Made with ❤️ for young readers everywhere! | Watch your stories come to life! ✨
-    </div>
-    """)
+    # Footer
+    gr.Markdown(
+        """
+        <div style="text-align: center; margin-top: 30px; padding: 20px; background: #f5f5f5; border-radius: 10px;">
+            <p style="color: #666; font-style: italic; margin: 0;">Made with ❤️ for young readers everywhere! | Watch your stories come to life! ✨</p>
+        </div>
+        """
+    )
 
     generate_btn.click(
         create_story_interface,