Update app.py

app.py

@@ -142,11 +142,37 @@ body, .gradio-container {
 .gr-input { font-family: 'Orbitron', sans-serif !important; }
 .gr-label { font-family: 'Orbitron', sans-serif !important; }
 .gr-chatbot .message { font-family: 'Orbitron', sans-serif !important; }
+
+/* Optional: Add custom CSS for the header image if you need specific styling */
+.header-image {
+    display: block; /* Ensures the image takes its own line */
+    margin-left: auto; /* Centers the image */
+    margin-right: auto; /* Centers the image */
+    max-width: 100%; /* Ensures it's responsive */
+    height: auto; /* Maintains aspect ratio */
+}
 """
 
+# Define your header image URL
+HEADER_IMAGE_URL = "https://cdn-uploads.huggingface.co/production/uploads/6540a02d1389943fef4d2640/92UZWGtPV_2Oa5DxIIMBR.png"
+
 # Create a Gradio Blocks layout for more control over the interface
 # Apply the dark theme and custom CSS
 with gr.Blocks(theme="dark", head=kofi_script, css=custom_css) as demo:
+    # Add the header image at the very top using gr.Image
+    gr.Image(
+        value=HEADER_IMAGE_URL,
+        label=None, # Set to None to remove the label text below the image
+        show_label=False, # Also hide the label
+        container=False, # Set to False to remove the default container styling
+        height="auto", # Adjust height as needed, e.g., 100, "200px", "auto"
+        width="100%", # Set width to fill the container
+        elem_classes=["header-image"] # Apply custom CSS class for centering/responsiveness
+    )
+    # You might want to add some spacing after the image if it blends too much with the chat.
+    # gr.Markdown("<br>") # Adds a line break for spacing
+
+
     # Create the chat interface component
     gr.ChatInterface(
         fn=respond,               # The function to call when a message is sent