Update app.py

app.py

@@ -10,7 +10,7 @@ def create_agent_card(title, description, features, url, color, status="active")
     """Create a card for each agent"""
     
     if status == "active":
-        status_badge = "<span style='background:#10b981; color:white; padding:4px 12px; border-radius:12px; font-size:0.85em; font-weight:600;'>ACTIVE</span>"
+        status_badge = "<span style='background:#168c44; color:white; padding:4px 12px; border-radius:12px; font-size:0.85em; font-weight:600;'>ACTIVE</span>"
     else:
         status_badge = "<span style='background:#6b7280; color:white; padding:4px 12px; border-radius:12px; font-size:0.85em; font-weight:600;'>COMING SOON</span>"
     
@@ -22,7 +22,7 @@ def create_agent_card(title, description, features, url, color, status="active")
             display: block;
             text-align: center;
             padding: 14px;
-            background: linear-gradient(135deg, #f97316, #ea580c);
+            background: linear-gradient(135deg, #168c44, #0f6b33);
             color: white;
             text-decoration: none;
             border-radius: 10px;
@@ -30,8 +30,8 @@ def create_agent_card(title, description, features, url, color, status="active")
             font-size: 1em;
             margin-top: 20px;
             transition: all 0.25s ease;
-        ' onmouseover="this.style.background='linear-gradient(135deg, #fb923c, #f59e0b)'; this.style.transform='scale(1.03)'"
-          onmouseout="this.style.background='linear-gradient(135deg, #f97316, #ea580c)'; this.style.transform='scale(1)'">
+        ' onmouseover="this.style.background='linear-gradient(135deg, #1aa850, #168c44)'; this.style.transform='scale(1.03)'"
+          onmouseout="this.style.background='linear-gradient(135deg, #168c44, #0f6b33)'; this.style.transform='scale(1)'">
             🚀 Launch Agent
         </a>
         """
@@ -85,7 +85,7 @@ def create_agent_card(title, description, features, url, color, status="active")
 
 
 with gr.Blocks(
-    theme=gr.themes.Soft(primary_hue="orange", secondary_hue="amber"),
+    theme=gr.themes.Soft(primary_hue="green", secondary_hue="green"),
     title="Spark-Agent System Hub",
     css="""
         body, html {
@@ -113,14 +113,14 @@ with gr.Blocks(
     <div style='
         text-align: center;
         padding: 50px 20px;
-        background: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
+        background: linear-gradient(135deg, #168c44 0%, #1aa850 100%);
         border-radius: 20px;
         color: white;
         margin-bottom: 40px;
-        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
+        box-shadow: 0 20px 25px -5px rgba(22,140,68,0.3);
     '>
         <h1 style='margin: 0; font-size: 3em; font-weight: 800; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);'>
-            Spark-Agent System Hub
+            Saprk-Agent System Hub
         </h1>
         <p style='margin: 20px 0 0 0; font-size: 1.4em; opacity: 0.95; font-weight: 300;'>
             Specialized AI Agents for Different Tasks
@@ -136,7 +136,7 @@ with gr.Blocks(
     with gr.Row():
         with gr.Column():
             gr.HTML(create_agent_card(
-                title="SparkDeliver AI",
+                title="Delivery Optimization Agent",
                 description="Real-time route planning, cost optimization, and traffic analysis using OpenStreetMap data. Get optimized delivery routes with accurate cost estimates.",
                 features=[
                     "Interactive maps with turn-by-turn directions",
@@ -145,13 +145,13 @@ with gr.Blocks(
                     "Multiple route comparison and selection"
                 ],
                 url=AGENT_URLS["delivery"],
-                color="linear-gradient(135deg, #f97316, #ea580c)",
+                color="#168c44",
                 status="active"
             ))
         
         with gr.Column():
             gr.HTML(create_agent_card(
-                title="SparkNova AI",
+                title="Data Analyzer Agent",
                 description="""Data Analyzer is an AI-powered data analysis tool that automatically explore, visualize, 
                             and generate insights from uploaded CSV datasets through natural language queries""",
                 features=[
@@ -162,15 +162,15 @@ with gr.Blocks(
                     "Decision-Making Support"
                 ],
                 url=AGENT_URLS["agent2"],
-                color="linear-gradient(135deg, #6366f1, #8b5cf6)",
+                color="#168c44",
                 status="active"
             ))
         
         with gr.Column():
             gr.HTML(create_agent_card(
                 title="SparkMart AI",
-                description="""SparkMart AI, a chatbot e-commerce customer service by automating order related issues, resolving complaints, 
-                                and offering personalized product recommendations or specific product recommendation.""",
+                description="""SparkMart AI, a chatbot e-commerce customer service by automating order tracking, resolving complaints, 
+                            and offering personalized product recommendations or specific product recommendation.""",
                 features=[
                     "Intelligent Order Management",
                     "Personalized Product Recommendations ",
@@ -179,7 +179,7 @@ with gr.Blocks(
                     "General Query Assistance"
                 ],
                 url=AGENT_URLS["agent3"],
-                color="linear-gradient(135deg, #4facfe, #00f2fe)",
+                color="#168c44",
                 status="active"
             ))
 
@@ -221,22 +221,22 @@ with gr.Blocks(
     <div style='
         margin-top: 40px;
         padding: 30px;
-        background: #fff7ed;
+        background: #f0fdf4;
         border-radius: 15px;
-        border-left: 5px solid #f97316;
+        border-left: 5px solid #168c44;
     '>
         <h3 style='margin: 0 0 15px 0; color:#1f2937;'>System Status</h3>
         <div style='display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:20px;'>
-            <div style='text-align:center; padding:15px; background:white; border-radius:10px;'>
-                <div style='font-size:2em; color:#10b981; margin-bottom:8px;'>1</div>
+            <div style='text-align:center; padding:15px; background:white; border-radius:10px; border: 2px solid #dcfce7;'>
+                <div style='font-size:2em; color:#168c44; margin-bottom:8px;'>3</div>
                 <div style='color:#6b7280; font-size:0.9em;'>Active Agents</div>
             </div>
-            <div style='text-align:center; padding:15px; background:white; border-radius:10px;'>
-                <div style='font-size:2em; color:#f59e0b; margin-bottom:8px;'>2</div>
+            <div style='text-align:center; padding:15px; background:white; border-radius:10px; border: 2px solid #dcfce7;'>
+                <div style='font-size:2em; color:#1aa850; margin-bottom:8px;'>0</div>
                 <div style='color:#6b7280; font-size:0.9em;'>In Development</div>
             </div>
-            <div style='text-align:center; padding:15px; background:white; border-radius:10px;'>
-                <div style='font-size:2em; color:#3b82f6; margin-bottom:8px;'>3</div>
+            <div style='text-align:center; padding:15px; background:white; border-radius:10px; border: 2px solid #dcfce7;'>
+                <div style='font-size:2em; color:#0f6b33; margin-bottom:8px;'>3</div>
                 <div style='color:#6b7280; font-size:0.9em;'>Total Agents</div>
             </div>
         </div>
@@ -248,8 +248,9 @@ with gr.Blocks(
         text-align: center;
         padding: 30px;
         margin-top: 50px;
-        background: #fff7ed;
+        background: #f0fdf4;
         border-radius: 15px;
+        border: 2px solid #dcfce7;
     '>
         <h3 style='margin: 0 0 15px 0; color:#1f2937;'>Built with Modern AI Stack</h3>
         <p style='margin: 0; color: #6b7280; font-size:0.95em;'>
@@ -262,4 +263,4 @@ with gr.Blocks(
     """)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()