Update app.py

app.py

@@ -1,15 +1,18 @@
 import gradio as gr
 import requests
 import json
-from gtts import gTTS
 import re
 import os
 
-# Groq API configuration
+# Groq API configuration - will be set via Hugging Face secrets
 GROQ_API_KEY = os.environ.get("GROQ_API_KEY")
 GROQ_API_URL = "https://api.groq.com/openai/v1/chat/completions"
 
 def generate_story(age, theme, language):
+    # Check if API key is available
+    if not GROQ_API_KEY:
+        return "❌ Please set your GROQ_API_KEY in Hugging Face Space secrets to generate stories."
+    
     age_i = int(age)
     if age_i <= 6:
         length = "300 words"
@@ -17,16 +20,8 @@ def generate_story(age, theme, language):
         length = "600 words"
     else:
         length = "1000 words"
-        
-    # Prepare the prompt
-    prompt = (
-        f"Write a complete story for a {age}-year-old child. "
-        f"Theme: {theme}. Language: {language}. Length about {length}. "
-        "End with a clear moral of the story. "
-        "Make it engaging and age-appropriate."
-    )
-    
-    # Prepare the request payload
+
+    # Prepare the request payload for Groq API
     payload = {
         "messages": [
             {
@@ -35,19 +30,23 @@ def generate_story(age, theme, language):
             },
             {
                 "role": "user",
-                "content": prompt
+                "content": (
+                    f"Write a complete story for a {age}-year-old child. "
+                    f"Theme: {theme}. Language: {language}. Length about {length}. "
+                    "End with a clear moral of the story."
+                )
             }
         ],
-        "model": "llama-3.1-8b-instant",  # Using a model that's available on Groq
+        "model": "llama-3.1-8b-instant",
         "max_tokens": 2000,
         "temperature": 0.8
     }
-    
+
     headers = {
         "Authorization": f"Bearer {GROQ_API_KEY}",
         "Content-Type": "application/json"
     }
-    
+
     try:
         response = requests.post(GROQ_API_URL, json=payload, headers=headers)
         response.raise_for_status()
@@ -61,100 +60,101 @@ def generate_story(age, theme, language):
 
 def story_to_speech(story, language_code='en'):
     try:
-        # Clean story for TTS
-        clean_story = re.sub(r'[*_#~`]', '', story)
-        tts = gTTS(text=clean_story, lang=language_code, slow=False)
+        # For Hugging Face deployment, we'll use a simple audio generation
+        # Note: gTTS might not work reliably on Hugging Face, so we provide alternative
+        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
 
 def create_story_interface(age, theme, language, tts_option):
-    if not GROQ_API_KEY:
-        error_html = '<div style="color: red; text-align: center; font-size: 1.5em;">⚠️ Please set your GROQ_API_KEY in the Hugging Face Space secrets</div>'
-        return error_html, None
-    
     story = generate_story(age, theme, language)
-    
-    # Remove Markdown symbols
-    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() == "urdu":  # Urdu
+
+    if language.lower().startswith("u"):  # Urdu
         story_html = (
-            f'<div style="text-align:center; font-size:1.3em; direction:rtl; margin-bottom:15px; font-weight: bold; color: #2c5530;">{title}</div>'
-            f'<div style="font-size:1.2em; direction:rtl; text-align:right; line-height: 1.6;">{rest_of_story}</div>'
+            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:15px; font-weight: bold; color: #2c5530;">{title}</div>'
-            f'<div style="font-size:1.2em; direction:ltr; text-align:left; line-height: 1.6;">{rest_of_story}</div>'
+            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_html, audio_file
+
+    return story, 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: 20px;
+    padding-top: 10px !important;
 }
+
 .main-header {
     text-align: center;
     font-weight: bold !important;
-    font-size: 3em !important;
-    margin: 20px 0;
+    font-size: 3.2em !important;
+    margin-top: 40px !important;
+    margin-bottom: 20px !important;
     text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
     color: #12979B;
 }
-.subtitle {
-    text-align: center;
-    font-size: 1.3em !important;
-    color: white;
-    margin-bottom: 30px;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-}
+
 .story-container {
-    background: #fff5ee;
+    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-top: 20px !important;
 }
+
 .control-panel {
     background: #fff5ee;
     border-radius: 15px;
     padding: 20px;
     border: 3px dashed #4ECDC4;
+    font-size: 1.2em !important;
+    font-weight: 600;
+    margin-top: 20px !important;
 }
+
 .generate-btn {
     background: linear-gradient(45deg, #FF6B6B, #FF9E7D) !important;
     border: none !important;
@@ -163,113 +163,120 @@ custom_css = """
     font-size: 1.2em !important;
     font-weight: bold !important;
     color: white !important;
-    margin: 20px 0;
+    margin-top: 20px !important;
     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;
+    margin-top: 20px;
+}
+
+.subtitle {
+    text-align: center;
+    font-size: 1.5em !important;
+    font-weight: 600;
+    color: white;
+    margin-bottom: 20px;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
+
 .footer {
     text-align: center;
     margin-top: 20px;
     color: #666;
     font-style: italic;
+    font-size: 1.1em !important;
 }
 """
 
-# Create the interface
 with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     gr.HTML("""
     <div class="main-header">
-    🌈 StoryTime AI 🎪
+        🌈 StoryTime AI 🎪
     </div>
     """)
-    
+
     gr.HTML("""
     <div class="subtitle">
-    🎯 Create amazing stories that spark imagination and teach valuable lessons!
+        🎯 Create amazing stories that spark imagination and teach valuable lessons!
     </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():
         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="👶 Child's Age", 
                     value="5",
                     info="Select age 3-12 years"
                 )
-                
+
                 theme_input = gr.Dropdown(
                     theme_options, 
                     label="🎭 Story Theme", 
                     value="Adventure",
                     info="Choose your favorite theme"
                 )
-                
+
                 language_input = gr.Dropdown(
                     language_options, 
                     label="🌍 Language", 
                     value="English",
                     info="English or Urdu"
                 )
-                
+
                 tts_input = gr.Checkbox(
                     label="🔊 Include Audio Story", 
                     value=True,
-                    info="Listen to the story"
+                    info="Listen to the story (may not work in all environments)"
                 )
-                
+
                 generate_btn = gr.Button(
                     "✨ Create Magical Story! ✨", 
                     elem_classes="generate-btn"
                 )
-        
+
         with gr.Column(scale=2):
             with gr.Group(elem_classes="story-container"):
                 gr.Markdown("### 📖 Your Magical Story")
-                story_output = gr.HTML(
-                    "<div style='text-align: center; color: #666; font-style: italic;'>Your story will appear here! Choose settings and click the magic button! 🎇</div>"
+                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="",
+                    label="Audio Story",
                     show_label=False
                 )
-    
+
     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>
     """)
-    
-    # Handle the case when API key is not set
-    if not GROQ_API_KEY:
-        gr.HTML("""
-        <div style="background: #ffebee; padding: 20px; border-radius: 10px; border: 2px solid #f44336; margin: 20px 0;">
-            <h3 style="color: #c62828; margin: 0;">⚠️ Configuration Required</h3>
-            <p style="margin: 10px 0 0 0; color: #d32f2f;">
-                Please set your GROQ_API_KEY in the Hugging Face Space secrets to use this app.
-            </p>
-        </div>
-        """)
-    
+
     generate_btn.click(
         create_story_interface,
         [age_input, theme_input, language_input, tts_input],
@@ -277,4 +284,4 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     )
 
 if __name__ == "__main__":
-    iface.launch(share=False)
+    iface.launch()