Update app.py

app.py

@@ -1,63 +1,214 @@
-import os
 import gradio as gr
 from groq import Groq
+import os
 
-# -------------------------------------------------
-# Groq Client (uses HF secret GROQ_API_KEY)
-# -------------------------------------------------
-client = Groq(api_key=os.getenv("GROQ_API_KEY"))
-
-# -------------------------------------------------
-# Chat streaming generator (Groq correct usage)
-# -------------------------------------------------
-def chat_stream(message, history):
-    messages = [
-        {
-            "role": "system",
-            "content": "act like a storyboard generator"
-        }
-    ]
-
-    # rebuild conversation from Gradio history
-    for user, assistant in history:
-        messages.append({"role": "user", "content": user})
-        messages.append({"role": "assistant", "content": assistant})
+# Initialize Groq client
+client = Groq(api_key=os.environ.get("GROQ_API_KEY"))
 
-    messages.append({"role": "user", "content": message})
+# System prompt for storyboard generation
+SYSTEM_PROMPT = """You are an expert storyboard generator assistant. You help users create detailed, professional storyboards for:
+- Films and Television productions
+- Animation projects
+- Advertisements and commercials
+- Video games
+- Comics and Graphic Novels
+- Music videos
+- Educational content
 
-    completion = client.chat.completions.create(
-        model="llama-3.3-70b-versatile",
-        messages=messages,
-        temperature=1,
-        max_completion_tokens=1024,
-        top_p=1,
-    )
+When generating storyboards, ALWAYS include:
+1. **Shot Number** - Sequential numbering
+2. **Visual Description** - Detailed scene description
+3. **Camera Angle** - (Wide, Medium, Close-up, POV, etc.)
+4. **Camera Movement** - (Pan, Tilt, Zoom, Dolly, Static, etc.)
+5. **Action/Movement** - What's happening in the scene
+6. **Dialogue** - Any spoken lines
+7. **Sound Effects/Music** - Audio elements
+8. **Duration** - Estimated time for each shot
+9. **Mood/Lighting** - Atmosphere description
+10. **Transitions** - How shots connect (Cut, Fade, Dissolve, etc.)
+
+Format storyboards as organized markdown tables. Be creative, detailed, and cinematic in your descriptions. 
+Ask clarifying questions about genre, tone, target audience, and style when needed."""
 
-    response = ""
-    for chunk in completion:
-        delta = chunk.choices[0].delta.content
-        if delta:
-            response += delta
-            yield history + [(message, response)]
 
-# -------------------------------------------------
-# UI
-# -------------------------------------------------
-with gr.Blocks() as demo:
-    gr.Markdown("# 📖 Storyboard Assistant (Groq Streaming)")
+def generate_response(message, history):
+    """Generate streaming response from Groq API"""
+    
+    # Build messages list from history
+    messages = [{"role": "system", "content": SYSTEM_PROMPT}]
+    
+    # Add conversation history
+    for user_msg, assistant_msg in history:
+        if user_msg:
+            messages.append({"role": "user", "content": user_msg})
+        if assistant_msg:
+            messages.append({"role": "assistant", "content": assistant_msg})
+    
+    # Add current message
+    messages.append({"role": "user", "content": message})
+    
+    # Create streaming completion
+    try:
+        completion = client.chat.completions.create(
+            model="llama-3.3-70b-versatile",
+            messages=messages,
+            temperature=0.9,
+            max_completion_tokens=2048,
+            top_p=1,
+            stream=True,
+        )
+        
+        # Stream the response
+        response = ""
+        for chunk in completion:
+            content = chunk.choices[0].delta.content or ""
+            response += content
+            yield response
+            
+    except Exception as e:
+        yield f"❌ Error: {str(e)}. Please check your API key and try again."
 
-    chatbot = gr.Chatbot(height=450)
 
-    user_input = gr.Textbox(
-        placeholder="Ask about storyboarding..."
-    )
+# Example prompts for users
+EXAMPLES = [
+    "Create a storyboard for a 30-second coffee commercial",
+    "Generate a storyboard for the opening scene of a horror movie in a haunted house",
+    "Design a storyboard for a 2-minute animated short about a robot learning to dance",
+    "Create a storyboard for a car chase scene in an action movie",
+    "Generate a storyboard for a romantic comedy meet-cute scene at a bookstore",
+    "Design a storyboard for a video game cinematic trailer for a fantasy RPG",
+    "Create a storyboard for a music video with a dreamy, surreal aesthetic",
+    "Generate a 6-panel comic storyboard about a superhero's origin story",
+]
 
-    send = gr.Button("Send")
+# Custom CSS for better appearance
+CUSTOM_CSS = """
+.gradio-container {
+    font-family: 'Inter', sans-serif !important;
+}
+.chat-message {
+    padding: 1rem;
+    border-radius: 8px;
+}
+footer {
+    display: none !important;
+}
+.example-btn {
+    font-size: 0.85rem !important;
+}
+"""
 
-    send.click(
-        chat_stream,
-        inputs=[user_input, chatbot],
-        outputs=chatbot
+# Create Gradio interface
+with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Soft(
+    primary_hue="indigo",
+    secondary_hue="purple",
+)) as demo:
+    
+    # Header
+    gr.Markdown("""
+    # 🎬 Storyboard Generator AI
+    
+    **Create professional storyboards for films, animations, ads, games, and more!**
+    
+    Simply describe your project or scene, and I'll generate a detailed storyboard with:
+    - Shot compositions & camera angles
+    - Visual descriptions & actions
+    - Dialogue & sound effects
+    - Timing & transitions
+    """)
+    
+    # Main chatbot interface
+    chatbot = gr.Chatbot(
+        label="Storyboard Assistant",
+        height=500,
+        show_copy_button=True,
+        avatar_images=(None, "https://em-content.zobj.net/source/twitter/376/clapper-board_1f3ac.png"),
+        bubble_full_width=False,
+    )
+    
+    # Input area
+    with gr.Row():
+        msg = gr.Textbox(
+            label="Your Message",
+            placeholder="Describe the scene or project you want to storyboard...",
+            lines=2,
+            scale=4,
+        )
+        submit_btn = gr.Button("🎬 Generate", variant="primary", scale=1)
+    
+    # Clear button
+    clear_btn = gr.Button("🗑️ Clear Chat", variant="secondary")
+    
+    # Examples section
+    gr.Markdown("### 💡 Try these examples:")
+    gr.Examples(
+        examples=EXAMPLES,
+        inputs=msg,
+        label="",
+    )
+    
+    # Tips section
+    with gr.Accordion("📖 Tips for Better Storyboards", open=False):
+        gr.Markdown("""
+        **For best results, include:**
+        - **Genre/Style**: Horror, comedy, documentary, anime, etc.
+        - **Duration**: How long is the final video/scene?
+        - **Target Audience**: Who is this for?
+        - **Mood/Tone**: Dark, uplifting, suspenseful, whimsical?
+        - **Key Elements**: Must-have shots or moments
+        - **Reference**: Any films/shows with similar style
+        
+        **Example detailed prompt:**
+        > "Create a storyboard for a 60-second environmental awareness ad targeting young adults. 
+        > Style: Documentary with emotional impact. Show the contrast between polluted and clean environments. 
+        > End with a hopeful call-to-action. Inspired by Apple's visual storytelling."
+        """)
+    
+    # Event handlers
+    def user_submit(user_message, history):
+        return "", history + [[user_message, None]]
+    
+    def bot_response(history):
+        user_message = history[-1][0]
+        history[-1][1] = ""
+        for chunk in generate_response(user_message, history[:-1]):
+            history[-1][1] = chunk
+            yield history
+    
+    # Submit on button click
+    submit_btn.click(
+        user_submit,
+        [msg, chatbot],
+        [msg, chatbot],
+        queue=False
+    ).then(
+        bot_response,
+        chatbot,
+        chatbot
+    )
+    
+    # Submit on Enter key
+    msg.submit(
+        user_submit,
+        [msg, chatbot],
+        [msg, chatbot],
+        queue=False
+    ).then(
+        bot_response,
+        chatbot,
+        chatbot
     )
+    
+    # Clear chat
+    clear_btn.click(lambda: [], None, chatbot, queue=False)
+    
+    # Footer
+    gr.Markdown("""
+    ---
+    *Powered by Llama 3.3 70B via Groq* | *Built with Gradio*
+    """)
 
-demo.launch()
+# Launch the app
+if __name__ == "__main__":
+    demo.queue()
+    demo.launch()