Update app.py

app.py

@@ -2,21 +2,29 @@ import gradio as gr
 from groq import Groq
 import os
 
+# -------------------------
+# Groq Client
+# -------------------------
 client = Groq(api_key=os.environ.get("GROQ_API_KEY"))
 
-SYSTEM_PROMPT = """You are an expert in storyboarding. Provide structured and insightful responses to queries 
-about creating and refining storyboards"""
+SYSTEM_PROMPT = """You are an expert in storyboarding.
+Provide structured, creative, and insightful responses about creating and refining storyboards.
+Use clear sections, shots, and visual descriptions when possible.
+"""
 
+# -------------------------
+# Chat Function
+# -------------------------
 def respond(message, history, model, temperature, max_tokens):
     messages = [{"role": "system", "content": SYSTEM_PROMPT}]
-    
+
     for h in history:
         messages.append({"role": "user", "content": h[0]})
         if h[1]:
             messages.append({"role": "assistant", "content": h[1]})
-    
+
     messages.append({"role": "user", "content": message})
-    
+
     try:
         response = client.chat.completions.create(
             model=model,
@@ -25,48 +33,104 @@ def respond(message, history, model, temperature, max_tokens):
             max_completion_tokens=max_tokens,
         )
         return response.choices[0].message.content
+
     except Exception as e:
-        return f"Error: {str(e)}"
-
-# ChatInterface with additional inputs for parameters
-demo = gr.ChatInterface(
-    fn=respond,
-    title=" The Magical Storyboard ^O^",
-    description="Create your storyboards to simulate your imagination by only one click!",
-    additional_inputs=[
-        gr.Dropdown(
-            choices=[
-                "llama-3.3-70b-versatile",
-                "llama-3.1-8b-instant",
-            ],
-            value="llama-3.3-70b-versatile",
-            label="Model",
-            info="Select the AI model to use"
-        ),
-        gr.Slider(
-            minimum=0,
-            maximum=2,
-            value=0.9,
-            step=0.1,
-            label="Temperature",
-            info="Controls randomness. Lower = more focused, Higher = more creative"
-        ),
-        gr.Slider(
-            minimum=256,
-            maximum=8192,
-            value=2048,
-            step=256,
-            label="Max Tokens",
-            info="Maximum length of the response"
-        ),
-    ],
-    examples=[
-        ["Create a storyboard for a 30-second coffee commercial"],
-        ["Generate a horror movie opening scene storyboard"],
-        ["Design a storyboard for a romantic comedy meet-cute at a bookstore"],
-    ],
-  
-)
+        return f"❌ Error: {str(e)}"
+
+# -------------------------
+# Custom CSS
+# -------------------------
+custom_css = """
+body {
+    background: linear-gradient(135deg, #0f172a, #1e293b);
+}
+
+#title {
+    text-align: center;
+    font-size: 32px;
+    font-weight: bold;
+    color: #fbbf24;
+}
+
+#subtitle {
+    text-align: center;
+    font-size: 16px;
+    color: #e5e7eb;
+}
+"""
+
+# -------------------------
+# UI
+# -------------------------
+with gr.Blocks(css=custom_css) as demo:
+
+    gr.Markdown(" 🎨 ⚡ The Magical Storyboard ⚡ 🎬 ^O^", elem_id="title")
+    gr.Markdown(
+        "Turn your imagination into **cinematic storyboards** using AI — one prompt at a time.",
+        elem_id="subtitle",
+    )
+
+    with gr.Row():
+        with gr.Column(scale=3):
+            chatbot = gr.Chatbot(height=420)
+            msg = gr.Textbox(
+                placeholder="Describe your scene, commercial, or movie moment...",
+                label="Your Idea"
+            )
+
+            send = gr.Button("🎥 Create Storyboard")
+            clear = gr.Button("🧹 Clear Chat")
+
+        with gr.Column(scale=1):
+            gr.Markdown("### ⚙️ Controls")
+
+            model = gr.Dropdown(
+                choices=[
+                    "llama-3.3-70b-versatile",
+                    "llama-3.1-8b-instant",
+                ],
+                value="llama-3.3-70b-versatile",
+                label="Model",
+            )
+
+            temperature = gr.Slider(
+                0, 2, value=0.9, step=0.1,
+                label="Creativity (Temperature)"
+            )
+
+            max_tokens = gr.Slider(
+                256, 8192, value=2048, step=256,
+                label="Max Tokens"
+            )
+
+            gr.Markdown("### ✨ Examples")
+            ex1 = gr.Button("☕ 30s Coffee Commercial")
+            ex2 = gr.Button("👻 Horror Movie Opening")
+            ex3 = gr.Button("📚 Romantic Bookstore Meet-Cute")
+
+    # -------------------------
+    # Interactions
+    # -------------------------
+    send.click(
+        respond,
+        inputs=[msg, chatbot, model, temperature, max_tokens],
+        outputs=chatbot,
+    )
+
+    msg.submit(
+        respond,
+        inputs=[msg, chatbot, model, temperature, max_tokens],
+        outputs=chatbot,
+    )
+
+    clear.click(lambda: [], None, chatbot)
+
+    ex1.click(lambda: "Create a storyboard for a 30-second coffee commercial", None, msg)
+    ex2.click(lambda: "Generate a horror movie opening scene storyboard", None, msg)
+    ex3.click(lambda: "Design a storyboard for a romantic comedy meet-cute at a bookstore", None, msg)
 
+# -------------------------
+# Launch
+# -------------------------
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()