Update app.py

app.py

@@ -44,23 +44,71 @@ def respond(message, history):
 header_image_path = "https://cdn-uploads.huggingface.co/production/uploads/6540a02d1389943fef4d2640/j61iZTDaK9g0UW3aWGwWi.gif"
 
 
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
+# --- Gradio Interface Definition ---
 
+header_image_path = "https://cdn-uploads.huggingface.co/production/uploads/6540a02d1389943fef4d2640/j61iZTDaK9g0UW3aWGwWi.gif"
+
+kofi_script = """
+<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
+<script>
+  kofiWidgetOverlay.draw('sonnydesorbo', {
+    'type': 'floating-chat',
+    'floating-chat.donateButton.text': 'Support me',
+    'floating-chat.donateButton.background-color': '#00b9fe',
+    'floating-chat.donateButton.text-color': '#fff'
+  });
+</script>
+"""
+
+kofi_button_html = """
+<div style="text-align: center; padding: 20px;">
+    <a href='https://ko-fi.com/Z8Z51E5TIG' target='_blank'>
+        <img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi5.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' />
+    </a>
+</div>
+"""
+
+custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
+body, .gradio-container {
+    font-family: 'Orbitron', sans-serif !important;
+}
+/* You might need to target more specific Gradio elements if the above doesn't apply universally */
+.gr-button { font-family: 'Orbitron', sans-serif !important; }
+.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; }
+"""
+
+# 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:
+    # Display an image at the top of the chatbot interface
     gr.Image(
-        value=header_image_path,
-        label="Chatbot Header",
-        show_label=False,
-        interactive=False,
-        height=100,
-        elem_id="chatbot-logo"
+        value=header_image_path, # Source of the image
+        label="Chatbot Header",   # Alt text or label (not shown due to show_label=False)
+        show_label=False,         # Hide the label text
+        interactive=False,        # Make the image non-interactive
+        height=150,               # Set the height of the image
+        elem_id="chatbot-logo"    # Assign an HTML ID for potential CSS styling
     )
 
+    # Create the chat interface component
     gr.ChatInterface(
-        respond,
-        chatbot=gr.Chatbot(
-            height=700
+        fn=respond,               # The function to call when a message is sent
+        chatbot=gr.Chatbot(       # Configure the chatbot display area
+            height=650,           # Set the height of the chat history display
+            label="Xortron Chat"  # Label for the chatbot area (can be removed if not desired)
         )
+        # title and description parameters removed as per request
+        # examples=[["Hello!", None], ["What is Gradio?", None]], # Optional examples
+        # retry_btn=None, # Removes the retry button
+        # undo_btn="Delete Previous", # Customizes the undo button
+        # clear_btn="Clear Chat", # Customizes the clear button
     )
 
+    # Add the Ko-fi button at the bottom
+    gr.HTML(kofi_button_html)
+
 if __name__ == "__main__":
     demo.launch(show_api=False, share=True)