Update app.py

app.py

@@ -1,4 +1,17 @@
 import gradio as gr
+import os
+import base64
+
+with open("public/style.css") as f:
+    css = f.read()
+
+logo_path = os.path.join(os.getcwd(), "public/main-logo.png")
+
+def embed_image_base64(path):
+    with open(path, "rb") as f:
+        return "data:image/png;base64," + base64.b64encode(f.read()).decode()
+
+logo_b64 = embed_image_base64(logo_path)
 
 AGENT_URLS = {
     "delivery": "https://huggingface.co/spaces/shuv25/optimize_delivery_system",
@@ -6,262 +19,427 @@ AGENT_URLS = {
     "agent3": "https://huggingface.co/spaces/akankshar639/CustomerSupportAgent"
 }
 
+# ---------------------------
+# PREMIUM CARD COMPONENT
+# ---------------------------
 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:#168c44; color:white; padding:4px 12px; border-radius:12px; font-size:0.85em; font-weight:600;'>ACTIVE</span>"
+        status_badge = """
+            <span style='
+                border:2px solid #168c44;
+                color:#168c44;
+                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>"
-    
-    features_html = "".join([f"<li style='margin:8px 0; color:#4b5563;'>{feature}</li>" for feature in features])
-    
+        status_badge = """
+            <span style='
+                background:#6b7280;
+                color:white;
+                padding:4px 12px;
+                border-radius:12px;
+                font-size:0.85em;
+                font-weight:600;
+            '>
+            COMING SOON
+            </span>
+        """
+
+    features_html = "".join([f"<li style='margin:6px 0; color:#4b5563;'>{feature}</li>" for feature in features])
+
     if status == "active":
         button = f"""
-        <a href="{url}" target="_blank" rel="noopener noreferrer" class="launch-btn" style='
-            display: block;
-            text-align: center;
-            padding: 14px;
-            background: linear-gradient(135deg, #168c44, #0f6b33);
-            color: white;
-            text-decoration: none;
-            border-radius: 10px;
-            font-weight: 600;
-            font-size: 1em;
-            margin-top: 20px;
-            transition: all 0.25s ease;
-        ' 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>
+            <a href="{url}" target="_blank" rel="noopener noreferrer"
+            style='
+                display:block;
+                text-align:center;
+                padding:14px;
+                background:#204C6C;
+                color:white;
+                text-decoration:none;
+                border-radius:16px;
+                font-weight:600;
+                font-size:1em;
+                transition:0.25s ease;
+            '
+            onmouseover="this.style.transform='scale(1.04)'; this.style.opacity='0.92';"
+            onmouseout="this.style.transform='scale(1)'; this.style.opacity='1';">
+                Launch Agent
+            </a>
         """
     else:
-        button = f"""
+        button = """
+            <div style='
+                text-align:center;
+                padding:14px;
+                background:#e5e7eb;
+                color:#6b7280;
+                border-radius:10px;
+                font-weight:600;
+                font-size:1em;
+                cursor:not-allowed;
+            '>
+                Coming Soon
+            </div>
+        """
+
+    return f"""
         <div style='
-            text-align: center;
-            padding: 14px;
-            background: #e5e7eb;
-            color: #6b7280;
-            border-radius: 10px;
-            font-weight: 600;
-            font-size: 1em;
-            margin-top: 20px;
-            cursor: not-allowed;
+            padding:28px;
+            background:white;
+            min-height:400px;
+            display:flex;   
+            width:100%;
+            flex-direction:column;
+            justify-content:space-between;
+            box-shadow:0px 6px 16px rgba(0,0,0,0.07);
+            border-top:4px solid #204C6C;
         '>
-            Coming Soon
-        </div>
-        """
-    
-    card_html = f"""
-    <div style='
-        border-radius: 16px;
-        padding: 28px;
-        background: white;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-        height: 100%;
-        border-top: 4px solid {color};
-    '>
-        <div style='display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;'>
-            <h2 style='margin:0; color:#1f2937; font-size:1.5em;'>{title}</h2>
-            {status_badge}
-        </div>
-        
-        <p style='color:#6b7280; margin:12px 0 20px 0; line-height:1.6; font-size:0.95em;'>
-            {description}
-        </p>
-        
-        <div style='background:#f9fafb; padding:16px; border-radius:10px; margin:16px 0;'>
-            <h4 style='margin:0 0 12px 0; color:#374151; font-size:0.9em; font-weight:600;'>KEY FEATURES:</h4>
-            <ul style='margin:0; padding-left:20px;'>
-                {features_html}
-            </ul>
+            <div>
+                <div style='display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;'>
+                    <h2 style='margin:0; color:#1f2937; font-size:1.45em;'>{title}</h2>
+                    {status_badge}
+                </div>
+
+                <p style='color:#6b7280; margin:10px 0 18px 0; line-height:1.6; font-size:0.95em;'>
+                    {description}
+                </p>
+
+                <div style='background:#f9fafb; padding:16px; border-radius:10px;'>
+                    <h4 style='margin:0 0 0px 0; color:#374151; font-size:0.9em; font-weight:600;'>
+                        KEY FEATURES:
+                    </h4>
+                    <ul style='margin:0; padding-left:18px;'>
+                        {features_html}
+                    </ul>
+                </div>
+            </div>
+
+            <div style='margin-top:20px;'>{button}</div>
         </div>
-        
-        {button}
-    </div>
     """
-    
-    return card_html
 
 
+# ------------------------------------
+# MAIN UI (ENHANCED LAYOUT)
+# ------------------------------------
+
 with gr.Blocks(
-    theme=gr.themes.Soft(primary_hue="green", secondary_hue="green"),
-    title="Spark-Agent System Hub",
-    css="""
-        body, html {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            overflow-x: hidden;
-        }
-        .gradio-container {
-            max-width: 100% !important;
-            width: 100% !important;
-            padding: 0 !important;
-            margin: 0 auto !important;
-        }
-        .block {
-            width: 100% !important;
-        }
-        #root > div {
-            width: 100% !important;
-        }
-    """
+    theme=gr.themes.Soft(primary_hue="green"),
+    title="Spark-Agent System",
+    # css="""
+    #     body, html {
+    #         margin:0;
+    #         padding:0;
+    #         width:100%;
+    #         overflow-x:hidden;
+    #         font-family: Georgia, serif;
+    #         background-color: #17203D;            
+    #     }
+
+    #     .gradio-container {
+    #         max-width: 1900px !important;
+    #         # background-color: #17203D;            
+    #         margin:auto !important;
+    #     }
+    # """
+    css=css  
+   
 ) as demo:
-    
-    gr.HTML("""
-    <div style='
-        text-align: center;
-        padding: 50px 20px;
-        background: linear-gradient(135deg, #168c44 0%, #1aa850 100%);
-        border-radius: 20px;
-        color: white;
-        margin-bottom: 40px;
-        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
+
+    # HEADER SECTION -----------------------------------------------------
+    gr.HTML(f"""
+<div style='
+    padding:40px 30px;
+    background:
+        radial-gradient(circle at 20% 10%, rgba(255,255,255,0.25), transparent 55%),
+        radial-gradient(circle at 85% 20%, rgba(45,135,255,0.22), transparent 70%),
+        linear-gradient(135deg, #0e1a2b, #0f1032, #03011a);
+    color:white;
+    border-bottom-left-radius:40px;
+    border-bottom-right-radius:40px;
+    box-shadow:0 50px 90px -20px rgba(0,0,0,0.6);
+
+    display:flex;
+    justify-content:space-;
+    align-items:center;
+    width:100%;
+'>
+
+    <!-- LEFT: LOGO -->
+    <div style="flex:1; display:flex; justify-content:flex-start; width: 100px;">
+        <img src="{logo_b64}" width="120" style="margin-bottom:70px; opacity:0.95;">
+    </div>
+
+    <!-- CENTER: TITLE -->
+    <div style="flex:1; display:flex; justify-content:center;">
+        <h1 style='
+            margin:0;
+            font-size:2.5em;
+            font-weight:800;
+            letter-spacing:1px;
+            background:linear-gradient(to right, #fff 20%, #dce4ff 40%, #cedcff 60%);
+            -webkit-background-clip:text;
+            color:transparent;
+        '>
+            Spark-Agent System
         </h1>
-        <p style='margin: 20px 0 0 0; font-size: 1.4em; opacity: 0.95; font-weight: 300;'>
-            Specialized AI Agents for Different Tasks
-        </p>
-        <p style='margin: 12px 0 0 0; font-size: 1em; opacity: 0.85;'>
-            Choose an agent based on your specific needs
-        </p>
     </div>
+
+    <div style="flex:1;"></div>
+
+</div>
+
+<div style='text-align: center;'>
+ <p style='margin-top:20px; font-size:1.30em; opacity:0.92; color: white;'>
+        Specialized AI Agents Crafted for Precision & Performance
+    </p>
+
+    <p style='margin-top:5px; font-size:1.05em; opacity:0.85; color: white;'>
+        Gain deeper insights from your datasets with intelligent automation. SparkNova helps you clean, analyze, and visualize data effortlessly.
+    </p>
+</div>
+""")
+
+
+    # --------------------------------------
+    # AVAILABLE AGENTS TITLE
+    # --------------------------------------
+    gr.HTML("""
+        <div style='
+            font-size:2.2em;
+            text-align:center;
+            font-weight:800;
+            margin:30px 0 40px;
+            color: white;
+        '>
+            Available Agents
+        </div>
     """)
 
-    gr.Markdown("## Available Agents")
-    
-    with gr.Row():
-        with gr.Column():
+    # AGENT GRID ---------------------------------------------------------
+    with gr.Row(equal_height=True):
+
+        with gr.Column(scale=1):
             gr.HTML(create_agent_card(
                 title="SparkDelivery",
                 description="AI-powered logistics assistant that plans optimal routes, analyzes traffic and weather conditions, estimates delivery costs, and optimizes multi-stop deliveries with intelligent vehicle recommendations.",
                 features=[
-                    "Interactive route planning with visual maps",
-                    "Multi-destination route optimization",
+                    "Interactive route planning",
+                    "Multi-destination optimization",
                     "Real-time traffic analysis",
-                    "Current weather conditions + weather forecasting",
+                    "Weather forecasting",
                     "Smart cost estimation"
                 ],
                 url=AGENT_URLS["delivery"],
-                color="#168c44",
-                status="active"
+                color="#164d8c"
             ))
-        
-        with gr.Column():
+
+        with gr.Column(scale=1):
             gr.HTML(create_agent_card(
                 title="SparkNova",
-                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""",
+                description="SparkNova is an AI-powered data analysis tool that automatically explores, visualizes, and generates insights from uploaded CSV datasets through natural language queries efficiently.",
                 features=[
-                    "AI-driven Query Understanding ",
-                    "Smart Visualizations ",
+                    "AI-driven Query Understanding",
+                    "Smart Visualizations",
                     "Insight Generation",
-                    "Time-Efficient Analysis"
-                    "Decision-Making Support"
+                    "Time-Efficient Analysis",
+                    "Decision Support"
                 ],
                 url=AGENT_URLS["agent2"],
-                color="#168c44",
-                status="active"
+                color="#168c44"
             ))
-        
-        with gr.Column():
+
+        with gr.Column(scale=1):
             gr.HTML(create_agent_card(
                 title="SparkMart AI",
-                description="""SparkMart AI, a chatbot e-commerce customer service by automating order tracking, resolving complaints, 
-                            and offering personalized product recommendations or specific product recommendation.""",
+                description="""SparkMart AI is a chatbot for e-commerce customer service, automating order tracking, resolving complaints, and offering personalized and specific product recommendations to customers.""",
                 features=[
-                    "Intelligent Order Management",
-                    "Personalized Product Recommendations ",
-                    "Multi-Stage Complaint Resolution",
-                    "Conversational State Management",
-                    "General Query Assistance"
+                    "Order Management",
+                    "Personalized Recommendations",
+                    "Complaint Resolution",
+                    "Conversational State",
+                    "Query Assistance"
                 ],
                 url=AGENT_URLS["agent3"],
-                color="#168c44",
-                status="active"
+                color="#168c44"
             ))
+            
+    gr.HTML("""
 
-    gr.Markdown("---")
-    gr.Markdown("## How It Works")
-    
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown("""
-            ### Independent Agents
-            Each agent runs in its own environment:
-            - **Isolated**: Problems in one don't affect others  
-            - **Scalable**: Each can be updated independently  
-            - **Optimized**: Resources allocated per agent needs  
-            - **Specialized**: Focused on specific tasks  
-            """)
-        
-        with gr.Column():
-            gr.Markdown("""
-            ### Getting Started
-            1. **Choose** your agent based on your task  
-            2. **Click** "Launch Agent" button  
-            3. **Enter** your query in the agent interface  
-            4. **Get** instant AI-powered results  
-            5. **Download** or save your results  
-            """)
-        
-        with gr.Column():
-            gr.Markdown("""
-            ### Best Practices
-            - Be specific with your queries  
-            - Include all relevant details  
-            - Check example queries for guidance  
-            - Use agent-specific features  
-            - Save important results immediately  
-            """)
+    <div style='
+    margin-top: 50px;
+    padding: 35px;
+    background: linear-gradient(135deg, #e8f5ff 0%, #f3fff6 100%);
+    border-radius: 18px;
+    border-left: 6px solid #204c6c;
+    box-shadow: 0px 8px 25px rgba(0,0,0,0.08);
+'>
+
+    <h3 style='
+        margin:0 0 25px 0;
+        font-size:1.8em;
+        font-weight:800;
+        color:#0e1a2b;
+        letter-spacing:0.5px;
+    '>
+        System Status
+    </h3>
 
-    gr.HTML("""
     <div style='
-        margin-top: 40px;
-        padding: 30px;
-        background: #f0fdf4;
-        border-radius: 15px;
-        border-left: 5px solid #168c44;
+        display:flex;
+        gap:22px;
+        flex-wrap:wrap;
     '>
-        <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; 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; 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; 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>
+
+        <!-- ACTIVE AGENTS -->
+        <div style='
+            flex:1;
+            min-width:230px;
+            text-align:center;
+            padding:25px;
+            background:rgba(255,255,255,0.75);
+            border-radius:16px;
+            border:1px solid rgba(32,76,108,0.18);
+            backdrop-filter:blur(6px);
+            box-shadow:0 4px 14px rgba(32,76,108,0.15);
+            transition:0.3s ease;
+        '
+        onmouseover="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 10px 28px rgba(32,76,108,0.25)';"
+        onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 14px rgba(32,76,108,0.15)';"
+        >
+            <div style='font-size:2.4em; color:#204c6c; font-weight:700;'>3</div>
+            <div style='color:#334155; font-size:1em; margin-top:6px;'>Active Agents</div>
+        </div>
+
+        <!-- IN DEVELOPMENT -->
+        <div style='
+            flex:1;
+            min-width:230px;
+            text-align:center;
+            padding:25px;
+            background:rgba(255,255,255,0.75);
+            border-radius:16px;
+            border:1px solid rgba(32,76,108,0.18);
+            backdrop-filter:blur(6px);
+            box-shadow:0 4px 14px rgba(32,76,108,0.15);
+            transition:0.3s ease;
+        '
+        onmouseover="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 10px 28px rgba(32,76,108,0.25)';"
+        onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 14px rgba(32,76,108,0.15)';"
+        >
+            <div style='font-size:2.4em; color:#204c6c; font-weight:700;'>0</div>
+            <div style='color:#334155; font-size:1em; margin-top:6px;'>In Development</div>
+        </div>
+
+        <!-- TOTAL AGENTS -->
+        <div style='
+            flex:1;
+            min-width:230px;
+            text-align:center;
+            padding:25px;
+            background:rgba(255,255,255,0.75);
+            border-radius:16px;
+            border:1px solid rgba(32,76,108,0.18);
+            backdrop-filter:blur(6px);
+            box-shadow:0 4px 14px rgba(32,76,108,0.15);
+            transition:0.3s ease;
+        '
+        onmouseover="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 10px 28px rgba(32,76,108,0.25)';"
+        onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 14px rgba(32,76,108,0.15)';"
+        >
+            <div style='font-size:2.4em; color:#204c6c; font-weight:700;'>3</div>
+            <div style='color:#334155; font-size:1em; margin-top:6px;'>Total Agents</div>
         </div>
+
     </div>
+</div>
+
+
     """)
-    
+ 
+    # -----------------------------------
+    # HOW IT WORKS TITLE
+    # -----------------------------------
     gr.HTML("""
-    <div style='
-        text-align: center;
-        padding: 30px;
-        margin-top: 50px;
-        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;'>
-            DeepAgents | LangChain | Groq | OpenStreetMap | Gradio
-        </p>
-        <p style='margin: 15px 0 0 0; font-size: 0.85em; color: #9ca3af;'>
-            Deployed on Hugging Face Spaces | Open Source Architecture
-        </p>
-    </div>
+        <div style='
+            margin-top:60px;
+            text-align:center;
+            font-size:2.8em;
+            font-weight:800;
+            letter-spacing:1px;
+            color: #ffffff;
+        '>
+            How It Works
+        </div>
     """)
 
+    with gr.Row():
+
+        with gr.Column():   
+            gr.HTML("""
+                <div style='padding:20px 40px; text-align:left; margin-left: 130px; color: white;'>
+                    <h3>Independent Agents</h3>
+                    <ul>
+                        <li>Isolated environments</li>
+                        <li>Scalable + independently upgradable</li>
+                        <li>Optimized resource allocation</li>
+                        <li>Specialized task modules</li>
+                    </ul>
+                </div>
+            """)
+
+        with gr.Column():
+            gr.HTML("""
+                <div style='padding:20px 40px; text-align:left; margin-left: 130px;'>
+                    <h3>Getting Started</h3>
+                    <ul>
+                        <li>Choose your agent</li>
+                        <li>Click “Launch Agent”</li>
+                        <li>Enter your query & receive instant results</li>
+                        <li>Save or download output</li>
+                    </ul>
+                </div>
+            """)
+
+        with gr.Column():
+            gr.HTML("""
+                <div style='padding:20px 40px; text-align:left; margin-left: 130px;'>
+                    <h3>Best Practices</h3>
+                    <ul>
+                        <li>Be specific with queries</li>
+                        <li>Add relevant details</li>
+                        <li>Use examples as guidance</li>
+                        <li>Use agent-specific features</li>
+                    </ul>
+                </div>
+            """)
+            
+
+    # FOOTER --------------------------------------------------------------
+    # gr.HTML("""
+    #     <div style='
+    #         text-align:center;
+    #         padding:30px;
+    #         margin-top:60px;
+    #         background:#f0fdf4;
+    #         border-radius:15px;
+    #         border:2px solid #dcfce7;
+    #     '>
+    #         <h3 style='margin-bottom:10px;'>Built with Modern AI Stack</h3>
+    #         <p>DeepAgents • LangChain • Groq • OpenStreetMap • Gradio</p>
+    #         <p style='font-size:0.85em; color:#6b7280; margin-top:10px;'>
+    #             HuggingFace Spaces | Open Source Architecture
+    #         </p>
+    #     </div>
+    # """)
+
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(share=True)
+