Update app.py

app.py

@@ -76,6 +76,10 @@ light_css = """
 #send-button:hover {
     opacity: 0.7;
 }
+
+#settings-container {
+    margin-top: 20px;
+}
 """
 
 # Dark mode CSS
@@ -105,6 +109,10 @@ dark_css = """
 }
 """
 
+# Function to toggle dark mode
+def toggle_dark_mode(is_dark):
+    return dark_css if is_dark else light_css
+
 # Create Gradio interface
 def create_interface():
     with gr.Blocks() as demo:
@@ -119,7 +127,7 @@ def create_interface():
             send_btn = gr.Button("➤", elem_id="send-button")
 
         # Settings section
-        with gr.Accordion("⚙️ Settings", open=False):
+        with gr.Accordion("⚙️ Settings", open=False, elem_id="settings-container"):
             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)
@@ -127,8 +135,8 @@ def create_interface():
         # Button click event
         send_btn.click(call_api, inputs=[message, model, preset], outputs=chatbox)
 
-        # Toggle dark mode
-        dark_mode.change(lambda x: demo.css = dark_css if x else light_css, inputs=[dark_mode])
+        # Change CSS based on dark mode toggle
+        dark_mode.change(lambda x: demo.css.update(toggle_dark_mode(x)), inputs=[dark_mode])
 
     return demo