Update app.py

app.py

@@ -1,18 +1,23 @@
+import os
+from groq import Groq
 import gradio as gr
-import requests
-import json
+from gtts import gTTS
 import re
-import os
 
-# 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"
+# 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)
 
 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**\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"
-    
+    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"
@@ -21,186 +26,172 @@ def generate_story(age, theme, language):
     else:
         length = "1000 words"
 
-    # Prepare the request payload for Groq API
-    payload = {
-        "messages": [
-            {
-                "role": "system",
-                "content": "You write age-appropriate stories with complete endings and a moral."
-            },
-            {
-                "role": "user",
-                "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",
-        "max_tokens": 2000,
-        "temperature": 0.8
+    user_msg = {
+        "role": "user",
+        "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."
+        )
     }
 
-    headers = {
-        "Authorization": f"Bearer {GROQ_API_KEY}",
-        "Content-Type": "application/json"
-    }
+    response = client.chat.completions.create(
+        messages=[system_msg, user_msg],
+        model="llama-3.3-70b-versatile",
+        max_tokens=2000,
+        temperature=0.8
+    )
 
-    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)}\n\nPlease check your API key and try again."
+    return response.choices[0].message.content.strip()
 
 def story_to_speech(story, language_code='en'):
-    try:
-        from gtts import gTTS
-        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
+    tts = gTTS(text=story, lang=language_code)
+    filename = "story.mp3"
+    tts.save(filename)
+    return filename
 
 def create_story_interface(age, theme, language, tts_option):
     story = generate_story(age, theme, language)
 
-    # Remove Markdown symbols (*, #, _, etc.) to prevent asterisks showing up
+    # Remove Markdown symbols
     story = re.sub(r'[*_#`~]', '', story)
 
-    # Generate audio if TTS is enabled
+    # 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>'
+            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: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, audio_file
+    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"
 ]
-
 language_options = ["English", "Urdu"]
 
-# Create the interface - WITHOUT css parameter
-with gr.Blocks() as iface:
-    
-    # Inject CSS as HTML
-    gr.HTML("""
-    <style>
-    @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;
-        min-height: 100vh;
-    }
-    
-    .main-header {
-        text-align: center;
-        font-weight: bold;
-        font-size: 3.2em;
-        margin: 20px 0;
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
-        color: #12979B;
-    }
-    
-    .subtitle {
-        text-align: center;
-        font-size: 1.5em;
-        font-weight: 600;
-        color: white;
-        margin: 20px 0;
-        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-    }
-    
-    .control-panel {
-        background: #fff5ee;
-        border-radius: 15px;
-        padding: 20px;
-        border: 3px dashed #4ECDC4;
-        margin: 20px 0;
-    }
-    
-    .story-container {
-        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: 20px 0;
-    }
-    
-    .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;
-        cursor: pointer !important;
-    }
-    
-    .generate-btn:hover {
-        transform: scale(1.05) !important;
-        box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4) !important;
-    }
-    
-    .footer {
-        text-align: center;
-        margin: 20px 0;
-        color: #666;
-        font-style: italic;
-        font-size: 1.1em;
-    }
-    
-    .warning-box {
-        background: #fff3cd;
-        border: 2px solid #ffeaa7;
-        border-radius: 10px;
-        padding: 15px;
-        margin: 20px 0;
-    }
-    
-    /* Style Gradio components */
-    .gradio-container .dropdown, .gradio-container .checkbox {
-        background: white !important;
-        border-radius: 10px !important;
-        border: 2px solid #96CEB4 !important;
-        margin: 10px 0 !important;
-    }
-    
-    .gradio-container .audio {
-        border-radius: 15px !important;
-        margin: 20px 0 !important;
-    }
-    </style>
-    """)
-    
-    # Header
+# 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;
+    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;
+}
+
+.story-container {
+    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;
+    border-radius: 50px !important;
+    padding: 10px 22px !important;
+    font-size: 1em !important;
+    font-weight: bold !important;
+    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;
+}
+"""
+
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     gr.HTML("""
     <div class="main-header">
-        🌈 StoryTime AI 🎪
+        🌈 StoryTime AI🎪
     </div>
     """)
 
@@ -209,108 +200,57 @@ with gr.Blocks() as iface:
         🎯 Create amazing stories that spark imagination and teach valuable lessons!
     </div>
     """)
-    
-    # API Key warning
-    if not GROQ_API_KEY:
-        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():
-        # 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",
-                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="Generate audio narration"
-            )
-
-            gr.HTML('</div>')
-            
-            generate_btn = gr.Button(
-                "✨ Create Magical Story! ✨"
-            )
-
-        # Right Column - Output
+            with gr.Group(elem_classes="control-panel"):
+                gr.Markdown("### 🎨 Story Settings")
+
+                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):
-            gr.HTML('<div class="story-container">')
-            gr.Markdown("### 📖 Your Magical Story")
-            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="",
-                show_label=False,
-                interactive=False
-            )
-
-    # Footer
+            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(
+                    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>
     """)
 
-    # Apply button styling with JavaScript
-    gr.HTML("""
-    <script>
-    function styleButton() {
-        const buttons = document.querySelectorAll('button');
-        buttons.forEach(button => {
-            if (button.textContent.includes('Create Magical Story')) {
-                button.classList.add('generate-btn');
-            }
-        });
-    }
-    // Style button on load and when DOM changes
-    document.addEventListener('DOMContentLoaded', styleButton);
-    setTimeout(styleButton, 1000);
-    setInterval(styleButton, 2000);
-    </script>
-    """)
-
     generate_btn.click(
         create_story_interface,
-        inputs=[age_input, theme_input, language_input, tts_input],
-        outputs=[story_output, audio_output]
+        [age_input, theme_input, language_input, tts_input],
+        [story_output, audio_output]
     )
 
-# Launch without SSR to avoid the warning
 if __name__ == "__main__":
-    iface.launch(ssr_mode=False)
+    iface.launch()