Update app.py

app.py

@@ -4,13 +4,16 @@ import gradio as gr
 from gtts import gTTS
 import re
 
+# Get API key from Hugging Face Secrets
 groq_key = os.environ.get("Groq_API_Key")
 if not groq_key:
     raise ValueError("Groq_API_Key not found in environment variables. Please add it to your Hugging Face Space secrets.")
 
 client = Groq(api_key=groq_key)
 
-
+# -------------------------------------------------------------
+# STORY GENERATION LOGIC
+# -------------------------------------------------------------
 def generate_story(age, theme, language):
     system_msg = {
         "role": "system",
@@ -44,6 +47,9 @@ def generate_story(age, theme, language):
     return response.choices[0].message.content.strip()
 
 
+# -------------------------------------------------------------
+# TEXT TO SPEECH
+# -------------------------------------------------------------
 def story_to_speech(story, language_code="en"):
     tts = gTTS(text=story, lang=language_code)
     filename = "story.mp3"
@@ -51,6 +57,9 @@ def story_to_speech(story, language_code="en"):
     return filename
 
 
+# -------------------------------------------------------------
+# PROCESS STORY + AUDIO
+# -------------------------------------------------------------
 def create_story_interface(age, theme, language, tts_option):
     story = generate_story(age, theme, language)
     story = re.sub(r'[*_#`~]', '', story)
@@ -75,10 +84,12 @@ def create_story_interface(age, theme, language, tts_option):
         lang_code = "en"
 
     audio_file = story_to_speech(story, lang_code) if tts_option else None
-
     return story_html, audio_file
 
 
+# -------------------------------------------------------------
+# UI OPTIONS
+# -------------------------------------------------------------
 age_options = [str(i) for i in range(3, 13)]
 theme_options = [
     "Adventure", "Animals", "Fantasy", "Educational",
@@ -88,6 +99,9 @@ theme_options = [
 language_options = ["English", "Urdu"]
 
 
+# -------------------------------------------------------------
+# CUSTOM CSS
+# -------------------------------------------------------------
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
 .gradio-container {
@@ -168,19 +182,19 @@ custom_css = """
 """
 
 
+# -------------------------------------------------------------
+# BUILD GRADIO INTERFACE
+# -------------------------------------------------------------
 with gr.Blocks(theme=gr.themes.Soft()) as iface:
 
+    # Inject CSS manually
     gr.HTML(f"<style>{custom_css}</style>")
 
-    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():
+        # LEFT PANEL
         with gr.Column(scale=1, min_width=300):
             with gr.Group(elem_classes="control-panel"):
                 gr.Markdown("### 🎨 Story Settings")
@@ -203,21 +217,17 @@ with gr.Blocks(theme=gr.themes.Soft()) as iface:
 
                 generate_btn = gr.Button("✨ Create Magical Story! ✨", elem_classes="generate-btn")
 
+        # RIGHT PANEL
         with gr.Column(scale=2):
             with gr.Group(elem_classes="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
                 )
 
-            with gr.Group():
-                gr.Markdown("### 🎧 Listen to Your Story")
-                audio_output = gr.Audio(elem_classes="audio-player", show_label=False)
+            audio_output = gr.Audio(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>
-    """)
+    gr.HTML('<div class="footer">Made with ❤ for young readers everywhere! | Watch your stories come to life! ✨</div>')
 
     generate_btn.click(
         create_story_interface,
@@ -225,6 +235,8 @@ with gr.Blocks(theme=gr.themes.Soft()) as iface:
         [story_output, audio_output]
     )
 
-
-if _name_ == "_main_":
-    iface.launch()
+# -------------------------------------------------------------
+# LAUNCH APP
+# -------------------------------------------------------------
+if __name__ == "__main__":
+    iface.launch()