Update app.py

app.py

@@ -1,17 +1,15 @@
 import gradio as gr
-from groq import Groq
+import requests
+import json
 from gtts import gTTS
 import re
+import os
 
-# Initialize Groq client
-client = Groq()
+# Groq API configuration
+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):
-    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"
@@ -20,29 +18,52 @@ def generate_story(age, theme, language):
     else:
         length = "1000 words"
         
-    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."
-        )
+    # 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
+    payload = {
+        "messages": [
+            {
+                "role": "system",
+                "content": "You write age-appropriate stories with complete endings and a moral."
+            },
+            {
+                "role": "user",
+                "content": prompt
+            }
+        ],
+        "model": "llama-3.1-8b-instant",  # Using a model that's available on Groq
+        "max_tokens": 2000,
+        "temperature": 0.8
+    }
+    
+    headers = {
+        "Authorization": f"Bearer {GROQ_API_KEY}",
+        "Content-Type": "application/json"
     }
     
     try:
-        response = client.chat.completions.create(
-            messages=[system_msg, user_msg],
-            model="openai/gpt-oss-20b",
-            max_tokens=2000,
-            temperature=0.8
-        )
-        return response.choices[0].message.content.strip()
+        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:
-        tts = gTTS(text=story, lang=language_code)
+        # Clean story for TTS
+        clean_story = re.sub(r'[*_#~`]', '', story)
+        tts = gTTS(text=clean_story, lang=language_code, slow=False)
         filename = "story.mp3"
         tts.save(filename)
         return filename
@@ -51,10 +72,14 @@ def story_to_speech(story, language_code='en'):
         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 (*, #, _, etc.) to prevent asterisks showing up
-    story = re.sub(r'[*_#~]', '', story)
+    # Remove Markdown symbols
+    story = re.sub(r'[*_#~`]', '', story)
     
     # Split first line as title
     lines = story.split("\n", 1)
@@ -63,16 +88,16 @@ def create_story_interface(age, theme, language, tts_option):
     else:
         title, rest_of_story = lines[0], ""
     
-    if language.lower().startswith("u"):  # Urdu
+    if language.lower() == "urdu":  # 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>'
+            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>'
         )
         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>'
+            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>'
         )
         lang_code = "en"
     
@@ -99,45 +124,47 @@ custom_css = """
 .gradio-container {
     font-family: 'Comic Neue', cursive !important;
     background: linear-gradient(135deg, #ffafbd, #ffc3a0) !important;
-    padding-top: 10px !important;
-    margin-top: -70px !important;
+    padding: 20px;
 }
 .main-header {
     text-align: center;
     font-weight: bold !important;
-    font-size: 3.2em !important;
-    margin-top: 40px !important;
-    margin-bottom: 20px !important;
+    font-size: 3em !important;
+    margin: 20px 0;
     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;
     border-radius: 50px !important;
-    padding: 10px 22px !important;
-    font-size: 1em !important;
+    padding: 15px 30px !important;
+    font-size: 1.2em !important;
     font-weight: bold !important;
     color: white !important;
-    margin-top: 20px !important;
+    margin: 20px 0;
+    width: 100%;
 }
 .generate-btn:hover {
     transform: scale(1.05);
@@ -147,35 +174,17 @@ custom_css = """
     background: white !important;
     border-radius: 10px !important;
     border: 2px solid #96CEB4 !important;
+    margin: 10px 0;
 }
 .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;
+    margin: 20px 0;
 }
 .footer {
     text-align: center;
     margin-top: 20px;
     color: #666;
     font-style: italic;
-    font-size: 1.5em !important;
-}
-.main-header + div {
-    margin-top: -145px !important;
 }
 """
 
@@ -183,7 +192,7 @@ custom_css = """
 with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     gr.HTML("""
     <div class="main-header">
-    🌈 StoryTime AI🎪
+    🌈 StoryTime AI 🎪
     </div>
     """)
     
@@ -198,37 +207,49 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
             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)
+                age_input = gr.Dropdown(
+                    age_options, 
+                    label="👶 Child's Age", 
+                    value="5",
+                    info="Select age 3-12 years"
+                )
                 
-                with gr.Group():
-                    gr.Markdown("🎭 **Story Theme**")
-                    theme_input = gr.Dropdown(theme_options, label="", value="Adventure", show_label=False)
+                theme_input = gr.Dropdown(
+                    theme_options, 
+                    label="🎭 Story Theme", 
+                    value="Adventure",
+                    info="Choose your favorite theme"
+                )
                 
-                with gr.Group():
-                    gr.Markdown("🌍 **Language**")
-                    language_input = gr.Dropdown(language_options, label="", value="English", show_label=False)
+                language_input = gr.Dropdown(
+                    language_options, 
+                    label="🌍 Language", 
+                    value="English",
+                    info="English or Urdu"
+                )
                 
-                with gr.Group():
-                    gr.Markdown("🔊 **Audio Options**")
-                    tts_input = gr.Checkbox(label="🎵 Include Audio Story", value=True)
+                tts_input = gr.Checkbox(
+                    label="🔊 Include Audio Story", 
+                    value=True,
+                    info="Listen to the story"
+                )
                 
-                generate_btn = gr.Button("✨ Create Magical Story! ✨", elem_classes="generate-btn", size="lg")
+                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.Markdown(
-                    "Your story will appear here! Choose settings and click the magic button! 🎇",
-                    show_label=False
+                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>"
                 )
             
             with gr.Group():
                 gr.Markdown("### 🎧 Listen to Your Story")
                 audio_output = gr.Audio(
-                    label="Audio Story",
-                    elem_classes="audio-player",
+                    label="",
                     show_label=False
                 )
     
@@ -238,6 +259,17 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     </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],
@@ -245,4 +277,4 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     )
 
 if __name__ == "__main__":
-    iface.launch()
+    iface.launch(share=False)