Update app.py

app.py

@@ -1,18 +1,17 @@
-import os
-from groq import Groq
 import gradio as gr
+from groq import Groq
 from gtts import gTTS
 import re
 
-# Get API key from HuggingFace Secrets
-client = Groq(api_key=os.environ["GROQ_API_KEY"])
+# Initialize Groq client
+client = Groq()
 
 def generate_story(age, theme, language):
     system_msg = {
         "role": "system",
         "content": "You write age-appropriate stories with complete endings and a moral."
     }
-
+    
     age_i = int(age)
     if age_i <= 6:
         length = "300 words"
@@ -20,7 +19,7 @@ def generate_story(age, theme, language):
         length = "600 words"
     else:
         length = "1000 words"
-
+        
     user_msg = {
         "role": "user",
         "content": (
@@ -29,36 +28,41 @@ def generate_story(age, theme, language):
             "End with a clear moral of the story."
         )
     }
-
-    response = client.chat.completions.create(
-        messages=[system_msg, user_msg],
-        model="openai/gpt-oss-20b",
-        max_tokens=2000,
-        temperature=0.8
-    )
-
-    story = response.choices[0].message.content.strip()
-    return story
-
+    
+    try:
+        response = client.chat.completions.create(
+            messages=[system_msg, user_msg],
+            model="openai/gpt-oss-20b",
+            max_tokens=2000,
+            temperature=0.8
+        )
+        return response.choices[0].message.content.strip()
+    except Exception as e:
+        return f"Error generating story: {str(e)}"
 
 def story_to_speech(story, language_code='en'):
-    filename = "story.mp3"
-    tts = gTTS(text=story, lang=language_code)
-    tts.save(filename)
-    return filename
-
+    try:
+        tts = gTTS(text=story, lang=language_code)
+        filename = "story.mp3"
+        tts.save(filename)
+        return filename
+    except Exception as e:
+        print(f"TTS Error: {e}")
+        return None
 
 def create_story_interface(age, theme, language, tts_option):
     story = generate_story(age, theme, language)
-
-    story = re.sub(r'[*_#`~]', '', story)
-
+    
+    # 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], ""
-
+    
     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>'
@@ -71,30 +75,33 @@ def create_story_interface(age, theme, language, tts_option):
             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_html, audio_file
 
-
+# Age options
 age_options = [str(i) for i in range(3, 13)]
+
+# Theme options
 theme_options = [
-    "Adventure", "Animals", "Fantasy", "Educational",
-    "Friendship", "Magic", "Science", "Mystery",
-    "Space", "Nature", "Kindness", "Courage"
+    "Adventure", "Animals", "Fantasy", "Educational", "Friendship", 
+    "Magic", "Science", "Mystery", "Space", "Nature", "Kindness", "Courage"
 ]
+
+# Language 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-top: 10px !important;
     margin-top: -70px !important;
 }
-
 .main-header {
     text-align: center;
     font-weight: bold !important;
@@ -104,7 +111,6 @@ custom_css = """
     text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
     color: #12979B;
 }
-
 .story-container {
     background:#fff5ee;
     border-radius: 20px;
@@ -114,7 +120,6 @@ custom_css = """
     min-height: 400px;
     margin-top: -20px !important;
 }
-
 .control-panel {
     background: #fff5ee;
     border-radius: 15px;
@@ -124,7 +129,6 @@ custom_css = """
     font-weight: 600;
     margin-top: -20px !important;
 }
-
 .generate-btn {
     background: linear-gradient(45deg, #FF6B6B, #FF9E7D) !important;
     border: none !important;
@@ -135,52 +139,110 @@ custom_css = """
     color: white !important;
     margin-top: 20px !important;
 }
-
 .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;
+}
 .audio-player {
     border-radius: 15px !important;
     margin-top: 20px;
 }
-
 .subtitle {
+    text-align: left;
     font-size: 1.5em !important;
     font-weight: 600;
     color: white;
+    margin-top: -10px !important;
     margin-bottom: 20px;
     text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
+.control-panel .gr-Markdown {
+    font-size: 1.5em !important;
+}
+.story-container .gr-Markdown {
+    font-size: 1.5em !important;
+}
+.footer {
+    text-align: center;
+    margin-top: 20px;
+    color: #666;
+    font-style: italic;
+    font-size: 1.5em !important;
+}
+.main-header + div {
+    margin-top: -145px !important;
+}
 """
 
+# Create the interface
 with gr.Blocks(css=custom_css, 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>")
-
+    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>
+    """)
+    
     with gr.Row():
         with gr.Column(scale=1, min_width=300):
             with gr.Group(elem_classes="control-panel"):
                 gr.Markdown("### 🎨 Story Settings")
-
-                age_input = gr.Dropdown(age_options, label="", value="5")
-                theme_input = gr.Dropdown(theme_options, label="", value="Adventure")
-                language_input = gr.Dropdown(language_options, label="", value="English")
-                tts_input = gr.Checkbox(label="🎵 Include Audio Story", value=True)
-
-                generate_btn = gr.Button("✨ Create Magical Story! ✨", elem_classes="generate-btn")
-
+                
+                with gr.Group():
+                    gr.Markdown("👶 **Child's Age**")
+                    age_input = gr.Dropdown(age_options, label="", value="5", show_label=False)
+                
+                with gr.Group():
+                    gr.Markdown("🎭 **Story Theme**")
+                    theme_input = gr.Dropdown(theme_options, label="", value="Adventure", show_label=False)
+                
+                with gr.Group():
+                    gr.Markdown("🌍 **Language**")
+                    language_input = gr.Dropdown(language_options, label="", value="English", show_label=False)
+                
+                with gr.Group():
+                    gr.Markdown("🔊 **Audio Options**")
+                    tts_input = gr.Checkbox(label="🎵 Include Audio Story", value=True)
+                
+                generate_btn = gr.Button("✨ Create Magical Story! ✨", elem_classes="generate-btn", size="lg")
+        
         with gr.Column(scale=2):
             with gr.Group(elem_classes="story-container"):
-                story_output = gr.HTML("Your story will appear here! 🎇")
-
-            audio_output = gr.Audio(label="Audio Story", elem_classes="audio-player")
-
+                gr.Markdown("### 📖 Your Magical Story")
+                story_output = gr.Markdown(
+                    "Your story will appear here! Choose settings and click the magic button! 🎇",
+                    show_label=False
+                )
+            
+            with gr.Group():
+                gr.Markdown("### 🎧 Listen to Your Story")
+                audio_output = gr.Audio(
+                    label="Audio Story",
+                    elem_classes="audio-player",
+                    show_label=False
+                )
+    
+    gr.HTML("""
+    <div class="footer">
+    Made with ❤️ for young readers everywhere! | Watch your stories come to life! ✨
+    </div>
+    """)
+    
     generate_btn.click(
         create_story_interface,
         [age_input, theme_input, language_input, tts_input],
         [story_output, audio_output]
     )
 
-iface.launch()
+if __name__ == "__main__":
+    iface.launch()