Update app.py

app.py

@@ -14,22 +14,22 @@ css_path = os.path.join(BASE_DIR, "style1.css")
 with open(css_path, "r") as f:
     css = f.read()
 
-
-
-
-
-logo_path = os.path.join(BASE_DIR, "public/main-logo.png")
+logo_path = os.path.join(BASE_DIR, "public/linkedin.png") 
+email_path = os.path.join(BASE_DIR, "public/email_icon.png") 
 
 def embed_image_base64(path):
     with open(path, "rb") as f:
-        return "data:image/png;base64," + base64.b64encode(f.read()).decode()
+        return "data:image/svg;base64," + base64.b64encode(f.read()).decode()
 
-logo_b64 = embed_image_base64(logo_path)
+linkedin_logo = embed_image_base64(logo_path)
+email_logo = embed_image_base64(email_path)
+# 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/Tamannathakur/SparkMart"
+    "agent3": "https://huggingface.co/spaces/Tamannathakur/SparkMart",
+    "agent4": "https://huggingface.co/spaces/SparkBrainsAI/AI_Trade_Analyzer"
 }
 
 # ---------------------------
@@ -105,6 +105,7 @@ def create_agent_card(title, description, features, url, color, status="active")
     return f"""
         <div style='
             padding:28px;
+            margin-top: 20px;
             background:white;
             min-height:400px;
             display:flex;   
@@ -187,7 +188,7 @@ with gr.Blocks(
 
     <!-- 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;">
+        <img src="{''}" width="120" style="margin-bottom:70px; opacity:0.95;">
     </div>
 
     <!-- CENTER: TITLE -->
@@ -229,10 +230,11 @@ with gr.Blocks(
             font-size:2.2em;
             text-align:center;
             font-weight:800;
-            margin:30px 0 40px;
+            margin:60px 0 60px;
             color: white;
         '>
             Available Agents
+            <hr style='margin:0px;'/>
         </div>
     """)
 
@@ -283,11 +285,32 @@ with gr.Blocks(
                 url=AGENT_URLS["agent3"],
                 color="#168c44"
             ))
-            
+        
+        with gr.Column(scale=1):
+            gr.HTML(create_agent_card(
+                title="SparkTrade Analyzer",
+                description="""SparkTrade Analyzer is an AI-powered trading intelligence agent that analyzes stock market queries, evaluates technical indicators, and generates actionable intraday insights to support smarter trading decisions.""",
+                features=[
+                    "AI-driven Stock Analysis",
+                    "Technical Indicator Evaluation",
+                    "Intraday Trade Signals",
+                    "Risk & Confidence Scoring",
+                    "Visual Price Trend Insights"
+                ],
+                url=AGENT_URLS["agent4"],
+                color="#168c44"
+            ))
+        
+        with gr.Column(scale=1):
+            gr.HTML('')
+        
+        with gr.Column(scale=1):
+            gr.HTML('')
+
     gr.HTML("""
 
     <div style='
-    margin-top: 50px;
+    margin-top: 80px;
     padding: 35px;
     background: linear-gradient(135deg, #e8f5ff 0%, #f3fff6 100%);
     border-radius: 18px;
@@ -327,7 +350,7 @@ with gr.Blocks(
         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='font-size:2.4em; color:#204c6c; font-weight:700;'>4</div>
             <div style='color:#334155; font-size:1em; margin-top:6px;'>Active Agents</div>
         </div>
 
@@ -367,7 +390,7 @@ with gr.Blocks(
         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='font-size:2.4em; color:#204c6c; font-weight:700;'>4</div>
             <div style='color:#334155; font-size:1em; margin-top:6px;'>Total Agents</div>
         </div>
 
@@ -433,26 +456,82 @@ with gr.Blocks(
                     </ul>
                 </div>
             """)
+#     gr.HTML("""
+# <div style="
+#     margin: 90px auto 40px;
+#     text-align: center;
+# ">
+#     <a href="https://sparkbrains.ai" target="_blank" rel="noopener noreferrer"
+#        style="
+#         display: inline-block;
+#         padding: 16px 38px;
+#         font-size: 1.1em;
+#         font-weight: 700;
+#         color: white;
+#         text-decoration: none;
+#         border-top: 1px solid #168c44
+#         border-radius: 999px;
+#         background: linear-gradient(135deg, #204C6C, #168c44);
+#         box-shadow: 0 10px 30px rgba(32, 76, 108, 0.35);
+#         transition: all 0.3s ease;
+#        "
+#        onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 18px 40px rgba(32,76,108,0.45)'"
+#        onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(32,76,108,0.35)'"
+#     >
+#         Visit SparkBrains →
+#     </a>
+
+#     <p style="
+#         margin-top: 14px;
+#         font-size: 0.9em;
+#         color: #cbd5f5;
+#         opacity: 0.85;
+#     ">
+#         Explore our full AI ecosystem, products & research
+#     </p>
+# </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>
-    # """)
+    gr.HTML(f"""
+<div class="spark-footer">
+
+    <div class="footer-top">
+        <a href="https://www.linkedin.com/company/sparkbrains/"
+           target="_blank"
+           class="icon-text-wrap">
+            <img src="{linkedin_logo}" class="footer-icon"/>
+            <span class="linkedin_text">LinkedIn</span>
+        </a>
+
+        <a href="mailto:sales@sparkbrains.in"
+           class="icon-text-wrap">
+            <img src="{email_logo}" class="footer-icon"/>
+            <span class="linkedin_text">sales@sparkbrains.in</span>
+        </a>
+    </div>
+
+    <a href="https://sparkbrains.in"
+       target="_blank"
+       rel="noopener noreferrer"
+       class="footer-cta">
+        Visit SparkBrains →
+    </a>
+
+    <div class="footer-bottom">
+        © 2026 SparkBrains AI · Building Intelligent Systems
+    </div>
+
+</div>
+""")
+
 
 if __name__ == "__main__":
     demo.launch(share=True)
-  
+#   <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>