Update app.py

app.py

@@ -110,10 +110,10 @@ def rag_query(query, retriever):
         # Create context from retrieved documents
         context = "\n".join([doc.page_content for doc in docs])
         prompt = f"""Context:\n{context}
-Current Date: {current_date}
-Current Time: {current_time}
-Question: {query}
-Answer directly and concisely, using the current date and time information if relevant:"""
+        Current Date: {current_date}
+        Current Time: {current_time}
+        Question: {query}
+        Answer directly and concisely, using the current date and time information if relevant:"""
 
         response = llm.invoke(prompt)
         return response.content
@@ -165,72 +165,90 @@ def query_router(query, method, retriever):
 def reset_query_field():
     return ""  # Reset only the query input
 
-
 # Function to update the clock
 def update_datetime():
     date, time = get_current_datetime()
     return date, time
 
+# Debug function to check logo file availability
+def check_logo_file(logo_path):
+    print(f"Looking for logo at: {os.path.abspath(logo_path)}")
+    print(f"Logo file exists: {os.path.exists(logo_path)}")
+    print(f"Files in directory: {os.listdir()}")
+    return os.path.exists(logo_path)
+
 # Main function to create and launch the Gradio interface
 def main():
     # Initialize retriever
     print("Initializing retriever...")
     retriever = initialize_retriever()
     
-   
-
-# Define custom CSS to style the logo across the entire header
+    # Define custom CSS to style the logo and header
     custom_css = """
-        #header-container {
+    #header-container {
         width: 100%;
         background-color: black;
         padding: 15px 0;
         text-align: center;
         margin-bottom: 20px;
     }
-
     
-
-    /* Hide the download button for images */
-    #header-container .image-container .absolute {
+    #logo-image {
+        max-height: 80px;
+        margin: 0 auto;
+        display: block;
+    }
+    
+    /* Hide download buttons and controls */
+    #logo-wrapper .svelte-1b6r3t8 {
+        display: none !important;
+    }
+    
+    .gradio-container .wrap.svelte-19hvt5v {
         display: none !important;
     }
     
-    /* Hide any download buttons and interactive elements in the header */
+    /* Hide any interactive elements in the header */
     #header-container button,
-    #header-container .gr-button,
-    #header-container .gr-panel {
+    #header-container .gr-button {
         display: none !important;
     }
-
+    
+    /* Make date-time display more prominent */
+    .datetime-display input {
+        font-size: 16px;
+        text-align: center;
+        font-weight: bold;
+    }
     """
     
-    logo_path = "Equinix-LOGO.jpeg"  # Make sure this file exists or update the path
+    logo_path = "Equinix-LOGO.jpeg"  # Make sure this file exists in the Space
     
     # Create Gradio UI
     with gr.Blocks(css=custom_css) as ui:
+        # Check if logo exists before creating UI
+        logo_exists = check_logo_file(logo_path)
+        
         # Header with logo
         with gr.Row(elem_id="header-container"):
-            with gr.Column(scale=1):
-                pass  # Spacer
-            
-            with gr.Column(scale=2):
-                # Option 1: Using gr.Image with interactive=False
-                if os.path.exists(logo_path):
-                    gr.Image(value=logo_path, show_label=False, interactive=False, show_download_button=False)
+            with gr.Column():
+                if logo_exists:
+                    # Use HTML for more control over logo display
+                    gr.HTML(f"""
+                        <div style="text-align:center;">
+                            <img id="logo-image" src="file/{logo_path}" alt="Equinix Logo" 
+                                 style="max-height:80px; margin:0 auto; display:block;">
+                        </div>
+                    """)
                 else:
-                    # Fallback to HTML method
+                    # Fallback text-based logo
                     gr.HTML("""
-                        <div style="text-align:center; color:white; background-color:black; padding:20px;">
+                        <div style="text-align:center; color:white; padding:10px;">
                             <div style="color:#FF0000; font-size:24px;">■■■■</div>
-                            <div style="font-size:28px; letter-spacing:5px; margin-top:10px;">EQUINIX</div>
+                            <div style="font-size:28px; letter-spacing:5px; margin-top:5px;">EQUINIX</div>
                         </div>
                     """)
         
-            with gr.Column(scale=1):
-                pass  # Spacer
-    
-        
         # Title & Description
         gr.Markdown("<h1 style='text-align: center; color: black;'>Equinix Chatbot for Automation Team</h1>")
         
@@ -239,7 +257,7 @@ def main():
             date_display = gr.Textbox(label="Date", interactive=False)
             time_display = gr.Textbox(label="Time", interactive=False)
         
-        # Update date and time using Gradio's interval functionality
+        # Update date and time initially
         date_val, time_val = get_current_datetime()
         date_display.value = date_val
         time_display.value = time_val
@@ -255,7 +273,7 @@ def main():
             query_input = gr.Textbox(label="Enter your query")
             query_method = gr.Dropdown(["Team Query", "General Query"], label="Select Query Type", value="Team Query")
 
-        # Output Textbox - Define it BEFORE you reference it in any callbacks
+        # Output Textbox
         output_box = gr.Textbox(label="Response", interactive=False)
         
         # Buttons Section
@@ -263,17 +281,17 @@ def main():
             submit_button = gr.Button("Submit")
             reset_button = gr.Button("Reset Query")
         
-        # Button Click Events - Now output_box is defined before it's used in these callbacks
+        # Button Click Events
         submit_button.click(
             lambda query, method: query_router(query, method, retriever), 
             inputs=[query_input, query_method], 
             outputs=output_box
         )
         
-        # Reset only the query input, not the dropdown
+        # Reset only the query input
         reset_button.click(reset_query_field, inputs=[], outputs=[query_input])
 
-        # This callback will update the date and time whenever the user submits a query
+        # Update date and time on submission
         submit_button.click(
             fn=update_datetime,
             inputs=[],