Update app.py

app.py

@@ -717,29 +717,66 @@ div#component-70 th {
 }
 """
 
+# with gr.Blocks(css=custom_css) as demo:
+#      gr.HTML(
+#     f"""
+#     <div class='header'>
+#         <div class='header-logo'>
+#             <img src="{logo_b64}" width="120">
+#         </div>
+#         <h1>SparkMart</h1>
+#     </div>
+
+#     <div style='text-align: center;'>
+#         <p style='margin-top:20px; font-size:1.30em; opacity:0.92; color: white;'>
+#             A conversational AI solution for e-commerce that automates product inquiries, 
+#             order management, and complaint resolution while maintaining customer context, 
+#             history, and secure evidence-based complaint handling.
+#         </p>
+
+#         <p style='margin-top:5px; font-size:1.05em; opacity:0.85; color: white;'>
+#             Powered by SparkBrains
+#         </p>
+#     </div>
+#     """
+# )
+#     initial_session = int(uuid.uuid4().int % 1000000)
+#     session_state = gr.State(value=initial_session)
+
+#     with gr.Row():
+#         with gr.Column(scale=1, elem_classes="how-to-use"):
+#             gr.Markdown("""
+#             ### How to Use:
+#             1. **Chat**: Talk to AI for product recommendations, place orders, or file complaints
+#             2. **My Complaints**: Track complaint status and view evidence
+            
+#             """)
+
 with gr.Blocks(css=custom_css) as demo:
-     gr.HTML(
-    f"""
-    <div class='header'>
-        <div class='header-logo'>
-            <img src="{logo_b64}" width="120">
+    gr.HTML(
+        f"""
+        <div class='header'>
+            <div class='header-logo'>
+                <img src='{logo_b64}' width="120">
+            </div>
+            <h1>SparkMart</h1>
         </div>
-        <h1>SparkMart</h1>
-    </div>
-
-    <div style='text-align: center;'>
-        <p style='margin-top:20px; font-size:1.30em; opacity:0.92; color: white;'>
-            A conversational AI solution for e-commerce that automates product inquiries, 
-            order management, and complaint resolution while maintaining customer context, 
-            history, and secure evidence-based complaint handling.
-        </p>
-
-        <p style='margin-top:5px; font-size:1.05em; opacity:0.85; color: white;'>
-            Powered by SparkBrains
-        </p>
-    </div>
-    """
-)
+
+        <div style='text-align: center;'>
+            <p style='margin-top:20px; font-size:1.30em; opacity:0.92; color: white;'>
+                A conversational AI solution for e-commerce that automates product inquiries,
+                order management, and complaint resolution while maintaining customer context,
+                history, and secure evidence-based complaint handling.
+            </p>
+
+            <p style='margin-top:5px; font-size:1.05em; opacity:0.85; color: white;'>
+                Powered by SparkBrains
+            </p>
+        </div>
+        """
+    )
+
+    #  MUST BE ALIGNED WITH gr.HTML (same indentation)
     initial_session = int(uuid.uuid4().int % 1000000)
     session_state = gr.State(value=initial_session)
 
@@ -747,11 +784,12 @@ with gr.Blocks(css=custom_css) as demo:
         with gr.Column(scale=1, elem_classes="how-to-use"):
             gr.Markdown("""
             ### How to Use:
-            1. **Chat**: Talk to AI for product recommendations, place orders, or file complaints
+            1. **Chat**: Talk to AI for product recommendations, place orders, or file complaints  
             2. **My Complaints**: Track complaint status and view evidence
-            
             """)
 
+
+
         with gr.Column(scale=3):
             with gr.Tabs():
                 with gr.Tab("Chat with Support"):