Update app.py

app.py

@@ -225,40 +225,17 @@ class XylariaChat:
 
         # Custom CSS for Inter font and improved styling
         custom_css = """
-        body {
-            background-color: #202123;
-            color: #ececf1;
-        }
-        .dark #banner-wrap {
-            background-color: #202123;
-        }
-        .dark #banner {
-            background-color: #202123;
-            color: #ececf1;
-        }
-        .dark .form-wrap {
-            background: none;
-            background-color: #343541;
-            border-color: #343541;
-        }
-        .dark .secondary-wrap {
-            background: none;
-            background-color: #202123;
-            border-color: #202123;
-        }
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
         body, .gradio-container {
             font-family: 'Inter', sans-serif !important;
         }
         .chatbot-container .message {
             font-family: 'Inter', sans-serif !important;
-            color: #ececf1;
         }
         .gradio-container input, 
         .gradio-container textarea, 
         .gradio-container button {
             font-family: 'Inter', sans-serif !important;
-            color: #ececf1;
         }
         /* Image Upload Styling */
         .image-container {
@@ -270,7 +247,7 @@ class XylariaChat:
             flex-direction: column;
             align-items: center;
             gap: 10px;
-            background-color: #343541;
+            background-color: #f8f8f8;
         }
         .image-preview {
             max-width: 200px;
@@ -292,122 +269,15 @@ class XylariaChat:
         .image-buttons button:hover {
             background-color: #367c39;
         }
-        .dark .gr-button-primary {
-            background-color: #585862;
-            color: #ececf1;
-        }
-        .dark .gr-button-secondary {
-            background-color: #444654;
-            color: #ececf1;
-        }
-        .dark .gr-button-secondary:hover {
-            background-color: #343541;
-            color: #ececf1;
-        }
-        .dark .gr-button-primary:hover {
-            background-color: #343541;
-            color: #ececf1;
-        }
-        .dark .gr-textbox {
-            background-color: #444654;
-            color: #ececf1;
-        }
-        .dark .gr-textbox::placeholder {
-            color: #888888;
-        }
-        .dark .gr-chatbot {
-            background-color: #343541;
-            color: #ececf1;
-        }
-        .dark .gr-chatbot .message {
-            background-color: #343541;
-            color: #ececf1;
-        }
-        .dark .gr-chatbot .user {
-            background-color: #343541;
-            color: #ececf1;
-        }
-        .dark .gr-chatbot .assistant {
-            background-color: #343541;
-            color: #ececf1;
-        }
-        .dark .gr-chatbot .user-response {
-            background-color: #343541;
-            color: #ececf1;
-        }
-        .dark .gr-chatbot .assistant-response {
-            background-color: #343541;
-            color: #ececf1;
-        }
-        .dark .gr-chatbot .user-response .gr-textbox {
-            background-color: #343541;
-            color: #ececf1;
-        }
-        .dark .gr-chatbot .assistant-response .gr-textbox {
-            background-color: #343541;
-            color: #ececf1;
-        }
-        .dark .gr-chatbot .user-response .gr-textbox::placeholder {
-            color: #888888;
-        }
-        .dark .gr-chatbot .assistant-response .gr-textbox::placeholder {
-            color: #888888;
-        }
-        .dark .gr-chatbot .user-response .gr-textbox:focus {
-            border-color: #888888;
-        }
-        .dark .gr-chatbot .assistant-response .gr-textbox:focus {
-            border-color: #888888;
-        }
-        .dark .gr-chatbot .user-response .gr-textbox:hover {
-            border-color: #888888;
-        }
-        .dark .gr-chatbot .assistant-response .gr-textbox:hover {
-            border-color: #888888;
-        }
-        .dark .gr-chatbot .user-response .gr-textbox:active {
-            border-color: #888888;
-        }
-        .dark .gr-chatbot .assistant-response .gr-textbox:active {
-            border-color: #888888;
-        }
-        .dark .gr-chatbot .user-response .gr-textbox:disabled {
-            background-color: #343541;
-            color: #888888;
-        }
-        .dark .gr-chatbot .assistant-response .gr-textbox:disabled {
-            background-color: #343541;
-            color: #888888;
-        }
-        .dark .gr-chatbot .user-response .gr-textbox:disabled::placeholder {
-            color: #888888;
-        }
-        .dark .gr-chatbot .assistant-response .gr-textbox:disabled::placeholder {
-            color: #888888;
-        }
-        .dark .gr-chatbot .user-response .gr-textbox:disabled:hover {
-            border-color: #888888;
-        }
-        .dark .gr-chatbot .assistant-response .gr-textbox:disabled:hover {
-            border-color: #888888;
-        }
-        .dark .gr-chatbot .user-response .gr-textbox:disabled:active {
-            border-color: #888888;
-        }
-        .dark .gr-chatbot .assistant-response .gr-textbox:disabled:active {
-            border-color: #888888;
-        }
         """
 
-        with gr.Blocks(theme='soft', css=custom_css, title="Xylaria") as demo:
+        with gr.Blocks(theme='soft', css=custom_css) as demo:
             # Chat interface with improved styling
             with gr.Column():
                 chatbot = gr.Chatbot(
                     label="Xylaria 1.5 Senoa (EXPERIMENTAL)",
                     height=500,
                     show_copy_button=True,
-                    bubble_full_width=False,
-                    render=False
                 )
 
                 # Enhanced Image Upload Section
@@ -424,18 +294,17 @@ class XylariaChat:
 
                 # Input row with improved layout
                 with gr.Row():
-                    with gr.Column(scale=85):
+                    with gr.Column(scale=4):
                         txt = gr.Textbox(
                             show_label=False,
-                            placeholder="What can I help with?",
+                            placeholder="Type your message...",
                             container=False
                         )
-                    with gr.Column(scale=15):
-                        btn = gr.Button("Send", variant="primary")
+                    btn = gr.Button("Send", scale=1)
 
                 # Clear history and memory buttons
                 with gr.Row():
-                    clear = gr.Button("Clear Conversation", variant="stop")
+                    clear = gr.Button("Clear Conversation")
                     clear_memory = gr.Button("Clear Memory")
 
                 # Clear image functionality