app.py

import gradio as gr
import os
import base64


BASE_DIR = os.path.dirname(os.path.abspath(__file__))
css_path = os.path.join(BASE_DIR, "style.css")

with open(css_path, "r") as f:
    css = f.read()





logo_path = os.path.join(BASE_DIR, "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",
    "agent2": "https://huggingface.co/spaces/Tamannathakur/SPARKNOVA",
    "agent3": "https://huggingface.co/spaces/akankshar639/SparkMartAI"
}

# ---------------------------
# PREMIUM CARD COMPONENT
# ---------------------------
def create_agent_card(title, description, features, url, color, status="active"):

    if status == "active":
        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:6px 0; color:#4b5563;'>{feature}</li>" for feature in features])

    if status == "active":
        button = f"""
            <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 = """
            <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='
            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;
        '>
            <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>
    """


# ------------------------------------
# MAIN UI (ENHANCED LAYOUT)
# ------------------------------------

with gr.Blocks(
    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:

    # 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>
    </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>
    """)

    # 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",
                    "Multi-destination optimization",
                    "Real-time traffic analysis",
                    "Weather forecasting",
                    "Smart cost estimation"
                ],
                url=AGENT_URLS["delivery"],
                color="#164d8c"
            ))

        with gr.Column(scale=1):
            gr.HTML(create_agent_card(
                title="SparkNova",
                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",
                    "Insight Generation",
                    "Time-Efficient Analysis",
                    "Decision Support"
                ],
                url=AGENT_URLS["agent2"],
                color="#168c44"
            ))

        with gr.Column(scale=1):
            gr.HTML(create_agent_card(
                title="SparkMart AI",
                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=[
                    "Order Management",
                    "Personalized Recommendations",
                    "Complaint Resolution",
                    "Conversational State",
                    "Query Assistance"
                ],
                url=AGENT_URLS["agent3"],
                color="#168c44"
            ))
            
    gr.HTML("""

    <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>

    <div style='
        display:flex;
        gap:22px;
        flex-wrap:wrap;
    '>

        <!-- 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='
            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(share=True)