Update app.py

app.py

@@ -4,13 +4,14 @@ import json
 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."
+        return "❌ **Please set your GROQ_API_KEY in Hugging Face Space secrets**\n\nTo use this app:\n1. Go to your Space Settings → Repository secrets\n2. Add a new secret:\n   - Name: `GROQ_API_KEY`\n   - Value: Your Groq API key from https://console.groq.com\n3. Restart the Space"
     
     age_i = int(age)
     if age_i <= 6:
@@ -20,6 +21,7 @@ def generate_story(age, theme, language):
     else:
         length = "1000 words"
 
+    # Prepare the request payload for Groq API
     payload = {
         "messages": [
             {
@@ -48,11 +50,13 @@ def generate_story(age, theme, language):
     try:
         response = requests.post(GROQ_API_URL, json=payload, headers=headers)
         response.raise_for_status()
+        
         data = response.json()
         story = data["choices"][0]["message"]["content"].strip()
         return story
+        
     except Exception as e:
-        return f"Error generating story: {str(e)}"
+        return f"Error generating story: {str(e)}\n\nPlease check your API key and try again."
 
 def story_to_speech(story, language_code='en'):
     try:
@@ -67,54 +71,223 @@ def story_to_speech(story, language_code='en'):
 
 def create_story_interface(age, theme, language, tts_option):
     story = generate_story(age, theme, language)
+
+    # Remove Markdown symbols (*, #, _, etc.) to prevent asterisks showing up
     story = re.sub(r'[*_#`~]', '', story)
 
-    if language.lower().startswith("u"):
+    # Generate audio if TTS is enabled
+    if language.lower().startswith("u"):  # Urdu
         lang_code = "ur"
-    else:
+    else:  # English
         lang_code = "en"
 
     audio_file = story_to_speech(story, lang_code) if tts_option else None
+
     return story, audio_file
 
-# Options
+# Age options
 age_options = [str(i) for i in range(3, 13)]
-theme_options = ["Adventure", "Animals", "Fantasy", "Educational", "Friendship", "Magic", "Science", "Mystery", "Space", "Nature", "Kindness", "Courage"]
+
+# Theme options
+theme_options = [
+    "Adventure", "Animals", "Fantasy", "Educational",
+    "Friendship", "Magic", "Science", "Mystery",
+    "Space", "Nature", "Kindness", "Courage"
+]
+
 language_options = ["English", "Urdu"]
 
-# Simple interface without complex styling
-with gr.Blocks(title="StoryTime AI - Magical Story Generator") as iface:
+# 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 !important;
+}
+
+.main-header {
+    text-align: center;
+    font-weight: bold !important;
+    font-size: 3.2em !important;
+    margin: 20px 0 !important;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+    color: #12979B;
+}
+
+.story-container {
+    background: #fff5ee !important;
+    border-radius: 20px !important;
+    padding: 25px !important;
+    border: 5px solid #FFD166 !important;
+    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
+    min-height: 400px !important;
+    margin: 20px 0 !important;
+}
+
+.control-panel {
+    background: #fff5ee !important;
+    border-radius: 15px !important;
+    padding: 20px !important;
+    border: 3px dashed #4ECDC4 !important;
+    margin: 20px 0 !important;
+}
+
+.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 !important;
+    width: 100% !important;
+}
+
+.generate-btn:hover {
+    transform: scale(1.05) !important;
+    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4) !important;
+}
+
+.dropdown, .checkbox {
+    background: white !important;
+    border-radius: 10px !important;
+    border: 2px solid #96CEB4 !important;
+    margin: 10px 0 !important;
+}
+
+.audio-player {
+    border-radius: 15px !important;
+    margin: 20px 0 !important;
+}
+
+.subtitle {
+    text-align: center !important;
+    font-size: 1.5em !important;
+    font-weight: 600 !important;
+    color: white !important;
+    margin: 20px 0 !important;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.1) !important;
+}
+
+.footer {
+    text-align: center !important;
+    margin: 20px 0 !important;
+    color: #666 !important;
+    font-style: italic !important;
+    font-size: 1.1em !important;
+}
+
+.warning-box {
+    background: #fff3cd !important;
+    border: 2px solid #ffeaa7 !important;
+    border-radius: 10px !important;
+    padding: 15px !important;
+    margin: 20px 0 !important;
+}
+"""
+
+# Create the interface with CSS
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     
-    gr.Markdown("# 🌈 StoryTime AI 🎪")
-    gr.Markdown("### 🎯 Create amazing stories that spark imagination and teach valuable lessons!")
+    # Header
+    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>
+    """)
     
+    # API Key warning
     if not GROQ_API_KEY:
-        gr.Warning("⚠️ Please set GROQ_API_KEY in Hugging Face Space secrets")
+        gr.HTML("""
+        <div class="warning-box">
+            <h3 style="color: #856404; margin: 0 0 10px 0;">⚠️ Setup Required</h3>
+            <p style="color: #856404; margin: 0;">
+                To generate stories, please add your <strong>GROQ_API_KEY</strong> in the Hugging Face Space settings:<br>
+                1. Go to your Space → Settings → Repository secrets<br>
+                2. Add new secret: Name = <code>GROQ_API_KEY</code>, Value = your_api_key<br>
+                3. Get your API key from: <a href="https://console.groq.com" target="_blank">https://console.groq.com</a>
+            </p>
+        </div>
+        """)
 
     with gr.Row():
-        with gr.Column():
+        # Left Column - Controls
+        with gr.Column(scale=1, min_width=300):
+            gr.HTML('<div class="control-panel">')
             gr.Markdown("### 🎨 Story Settings")
-            age_input = gr.Dropdown(age_options, label="👶 Child's Age", value="5")
-            theme_input = gr.Dropdown(theme_options, label="🎭 Story Theme", value="Adventure")
-            language_input = gr.Dropdown(language_options, label="🌍 Language", value="English")
-            tts_input = gr.Checkbox(label="🔊 Include Audio Story", value=True)
-            generate_btn = gr.Button("✨ Create Magical Story! ✨", variant="primary")
+            
+            age_input = gr.Dropdown(
+                age_options, 
+                label="👶 Child's Age", 
+                value="5",
+                info="Select age 3-12 years"
+            )
 
-        with gr.Column():
+            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="Generate audio narration"
+            )
+
+            generate_btn = gr.Button(
+                "✨ Create Magical Story! ✨", 
+                elem_classes="generate-btn"
+            )
+            gr.HTML('</div>')
+
+        # Right Column - Output
+        with gr.Column(scale=2):
+            gr.HTML('<div class="story-container">')
             gr.Markdown("### 📖 Your Magical Story")
-            story_output = gr.Markdown("Your story will appear here! 🎇")
-            
+            story_output = gr.Markdown(
+                "🌟 **Welcome to StoryTime AI!** 🌟\n\nChoose your story settings on the left and click the magic button to create a wonderful story! Your adventure begins here...",
+                show_label=False
+            )
+            gr.HTML('</div>')
+
             gr.Markdown("### 🎧 Listen to Your Story")
-            audio_output = gr.Audio(label="Audio Story")
+            audio_output = gr.Audio(
+                label="",
+                show_label=False,
+                interactive=False
+            )
 
-    gr.Markdown("---")
-    gr.Markdown("Made with ❤️ for young readers everywhere! | Watch your stories come to life! ✨")
+    # Footer
+    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]
+        inputs=[age_input, theme_input, language_input, tts_input],
+        outputs=[story_output, audio_output]
     )
 
+# Launch without SSR to avoid the warning
 if __name__ == "__main__":
-    iface.launch()
+    iface.launch(ssr_mode=False)