Update app.py

app.py

@@ -181,21 +181,24 @@ def main():
 
 # Define custom CSS to style the logo across the entire header
     custom_css = """
-    #header-container {
+        #header-container {
         width: 100%;
-        background-color: #fff;
+        background-color: black;
         padding: 15px 0;
-        margin-bottom: 20px;
         text-align: center;
-        }
+        margin-bottom: 20px;
+    }
 
-    .logo-image {
-        max-width: 100%;
-        height: auto; /* This ensures the aspect ratio is maintained */
-        max-height: none; /* Remove the height restriction */
-        display: block;
+    .logo-container {
+        max-width: 300px;
         margin: 0 auto;
-        }
+        padding: 10px;
+    }
+
+    .logo-image {
+        width: 100%;
+        height: auto;
+    }
 
     """
     
@@ -203,14 +206,27 @@ def main():
     
     # Create Gradio UI
     with gr.Blocks(css=custom_css) as ui:
+        # Header with logo
         with gr.Row(elem_id="header-container"):
-            if os.path.exists(logo_path):
-                # Using HTML for direct control over the image
-                gr.HTML(f'<img src="file/{logo_path}" class="logo-image" alt="Equinix Logo">')
-                print(f"Logo file found at {os.path.abspath(logo_path)}")
-            else:
-                gr.Markdown("<h2>Equinix</h2>")
-                print(f"Warning: Logo file {logo_path} not found")
+            with gr.Column(scale=1):
+                pass  # Spacer
+            
+            with gr.Column(scale=2, elem_classes="logo-container"):
+                # Check if the file exists before trying to display it
+                if os.path.exists(logo_path):
+                    gr.Image(value=logo_path, show_label=False, elem_classes="logo-image")
+                else:
+                    # Fallback to text + styling that mimics the logo
+                    gr.HTML("""
+                        <div style="text-align:center; color:white; background-color:black; padding:20px;">
+                            <div style="color:#FF0000; font-size:24px;">■■■■</div>
+                            <div style="font-size:28px; letter-spacing:5px; margin-top:10px;">EQUINIX</div>
+                        </div>
+                    """)
+                    print(f"Warning: Logo file {logo_path} not found")
+        
+            with gr.Column(scale=1):
+                pass  # Spacer
     
         
         # Title & Description