Update app.py

app.py

@@ -5,13 +5,16 @@ from gtts import gTTS
 import re
 
 # Get API key from Hugging Face Secrets
-groq_key = os.environ.get("Groq_API_Key")
+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.")
+    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,43 +47,54 @@ 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"
     tts.save(filename)
     return filename
 
+
+# -------------------------------------------------------------
+# PROCESS STORY + AUDIO
+# -------------------------------------------------------------
 def create_story_interface(age, theme, language, tts_option):
     story = generate_story(age, theme, language)
 
     # Remove Markdown symbols
     story = re.sub(r'[*_#`~]', '', story)
 
-    # Split first line as title
+    # Extract title from first line
     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
+    # Urdu RTL formatting
+    if language.lower().startswith("u"):
         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
+    else:
         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
+    # Generate audio file
     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",
@@ -89,17 +103,18 @@ theme_options = [
 ]
 language_options = ["English", "Urdu"]
 
-# Custom CSS for child-friendly interface
+
+# -------------------------------------------------------------
+# CUSTOM CSS
+# -------------------------------------------------------------
 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;
@@ -109,7 +124,6 @@ custom_css = """
     text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
     color: #12979B;
 }
-
 .story-container {
     background:#fff5ee;
     border-radius: 20px;
@@ -119,9 +133,8 @@ custom_css = """
     min-height: 400px;
     margin-top: -20px !important;
 }
-
 .control-panel {
-    background: #fff5ee;;
+    background: #fff5ee;
     border-radius: 15px;
     padding: 20px;
     border: 3px dashed #4ECDC4;
@@ -129,7 +142,6 @@ custom_css = """
     font-weight: 600;
     margin-top: -20px !important;
 }
-
 .generate-btn {
     background: linear-gradient(45deg, #FF6B6B, #FF9E7D) !important;
     border: none !important;
@@ -140,23 +152,19 @@ 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;
@@ -166,15 +174,6 @@ custom_css = """
     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;
@@ -182,13 +181,20 @@ custom_css = """
     font-style: italic;
     font-size: 1.5em !important;
 }
-
 .main-header + div {
     margin-top: -145px !important;
 }
 """
 
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
+
+# -------------------------------------------------------------
+# BUILD GRADIO INTERFACE (Correct for Gradio 4.x)
+# -------------------------------------------------------------
+with gr.Blocks(theme=gr.themes.Soft()) as iface:
+
+    # Inject CSS manually (Gradio 4.x)
+    gr.HTML(f"<style>{custom_css}</style>")
+
     gr.HTML("""
     <div class="main-header">
         🌈 StoryTime AI🎪
@@ -202,28 +208,30 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     """)
 
     with gr.Row():
+        # LEFT PANEL
         with gr.Column(scale=1, min_width=300):
             with gr.Group(elem_classes="control-panel"):
                 gr.Markdown("### 🎨 Story Settings")
 
                 with gr.Group():
-                    gr.Markdown("👶 **Child's Age**")
+                    gr.Markdown("👶 *Child's Age*")
                     age_input = gr.Dropdown(age_options, label="", value="5", show_label=False)
 
                 with gr.Group():
-                    gr.Markdown("🎭 **Story Theme**")
+                    gr.Markdown("🎭 *Story Theme*")
                     theme_input = gr.Dropdown(theme_options, label="", value="Adventure", show_label=False)
 
                 with gr.Group():
-                    gr.Markdown("🌍 **Language**")
+                    gr.Markdown("🌍 *Language*")
                     language_input = gr.Dropdown(language_options, label="", value="English", show_label=False)
 
                 with gr.Group():
-                    gr.Markdown("🔊 **Audio Options**")
+                    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")
 
+        # RIGHT PANEL
         with gr.Column(scale=2):
             with gr.Group(elem_classes="story-container"):
                 gr.Markdown("### 📖 Your Magical Story")
@@ -242,7 +250,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
 
     gr.HTML("""
     <div class="footer">
-        Made with ❤️ for young readers everywhere! | Watch your stories come to life! ✨
+        Made with ❤ for young readers everywhere! | Watch your stories come to life! ✨
     </div>
     """)
 
@@ -251,5 +259,10 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
         [age_input, theme_input, language_input, tts_input],
         [story_output, audio_output]
     )
-if __name__ == "__main__":
-    iface.launch()
+
+
+# -------------------------------------------------------------
+# LAUNCH APP
+# -------------------------------------------------------------
+if _name_ == "_main_":
+    iface.launch()