Update app.py

app.py

@@ -27,80 +27,27 @@ def call_api(message, model, preset):
     except Exception as e:
         return f"Error: {str(e)}"
 
-# Dark mode CSS
-dark_css = """
-.gradio-container {
-    background-color: #1e1e1e; /* Dark background */
-    color: white;              /* Light text color */
-}
-#chatbox {
-    background-color: #2e2e2e; /* Dark chatbox */
-    color: white;              /* Light text color */
-}
-#input-container {
-    display: flex;
-    align-items: center;
-    background-color: #2e2e2e; /* Dark input container */
-    border: 1px solid #444;    /* Dark border */
-    border-radius: 20px;       /* Rounded corners */
-    padding: 5px;
-}
-#message-input {
-    flex: 1;
-    background-color: #3e3e3e; /* Dark input field */
-    color: white;              /* Light text color */
-    border: none;
-    border-radius: 20px;       /* Rounded corners for input */
-    padding: 10px 15px;
-    font-size: 14px;
-}
-#message-input:focus {
-    outline: none;
-}
-#send-button {
-    background-color: #007BFF; /* Button background color */
-    color: white;              /* Button text color */
-    border: none;              /* No border */
-    border-radius: 20px;       /* Rounded corners */
-    padding: 10px 20px;        /* Padding for the button */
-    font-size: 14px;           /* Font size for the button text */
-    margin-left: 10px;         /* Space between input and button */
-    cursor: pointer;           /* Pointer cursor */
-    transition: background-color 0.3s ease; /* Smooth hover transition */
-}
-#send-button:hover {
-    background-color: #0056b3; /* Darker hover color */
-}
-"""
-
-# Function to toggle dark mode
-def toggle_dark_mode(is_dark):
-    return dark_css if is_dark else ""
-
 # Create Gradio interface
 def create_interface():
-    with gr.Blocks(css=dark_css) as demo:
+    with gr.Blocks() as demo:
         gr.Markdown("## 💬 Chatbot")
 
         # Chat display area
-        chatbox = gr.Textbox(label="", interactive=False, elem_id="chatbox", lines=12)
+        chatbox = gr.Textbox(label="", interactive=False, lines=12)
 
-        # Custom input field with button
-        with gr.Row(elem_id="input-container"):
-            message = gr.Textbox(placeholder="Type a message...", elem_id="message-input", lines=1, show_label=False)
-            send_btn = gr.Button("Send", elem_id="send-button")
+        # Input box for user messages
+        user_input = gr.Textbox(label="Type your message here...", placeholder="Enter your message...", lines=1)
+
+        # Send button
+        send_button = gr.Button("Send")
 
         # Settings section
         with gr.Accordion("⚙️ Settings", open=False):
             model = gr.Dropdown(choices=["Lake 1 Base"], label="Model", value="Lake 1 Base")
             preset = gr.Dropdown(choices=["Fast", "Normal", "Quality", "Unreal Performance"], label="Preset", value="Fast")
-            dark_mode = gr.Checkbox(label="Enable Dark Mode", value=False)
-
-        # Button click event
-        send_btn.click(call_api, inputs=[message, model, preset], outputs=chatbox)
 
-        # Change CSS based on dark mode toggle
-        dark_mode.change(lambda x: demo.css.update(toggle_dark_mode(x)), inputs=[dark_mode])
+        # Define the action for the send button
+        send_button.click(fn=call_api, inputs=[user_input, model, preset], outputs=chatbox)
 
     return demo