Update app.py

app.py

@@ -649,6 +649,7 @@ def refresh_documents():
     uploaded_documents = load_documents()
     return display_documents()
 
+
 # Define the checkbox outside the demo block
 document_selector = gr.CheckboxGroup(label="Select documents to query")
 
@@ -658,7 +659,32 @@ custom_placeholder = "Ask a question (Note: You can toggle between Web Search an
 
 # Update the demo interface
 # Update the Gradio interface
-demo = gr.ChatInterface(
+import gradio as gr
+
+# Define a custom CSS for dark mode
+dark_mode_css = """
+.dark-mode {
+    background-color: #1a1a1a;
+    color: #ffffff;
+}
+.dark-mode .gradio-slider input[type="range"] {
+    background-color: #4a4a4a;
+}
+.dark-mode .gradio-button {
+    background-color: #4a4a4a;
+    color: #ffffff;
+}
+"""
+
+# Create a function to toggle dark mode
+def toggle_dark_mode(dark_mode):
+    return not dark_mode, gr.update(value="Light Mode" if dark_mode else "Dark Mode")
+
+# Combine the existing CSS with dark mode CSS
+combined_css = css + dark_mode_css
+
+# Create the ChatInterface
+chat_interface = gr.ChatInterface(
     respond,
     additional_inputs_accordion=gr.Accordion(label="⚙️ Parameters", open=True, render=False),
     additional_inputs=[
@@ -671,7 +697,7 @@ demo = gr.ChatInterface(
     title="AI-powered PDF Chat and Web Search Assistant",
     description="Chat with your PDFs or use web search to answer questions.",
     theme=gr.Theme.from_hub("JohnSmith9982/small_and_pretty"),
-    css=css,
+    css=combined_css,
     examples=[
         ["Tell me about the contents of the uploaded PDFs."],
         ["What are the main topics discussed in the documents?"],
@@ -690,12 +716,18 @@ demo = gr.ChatInterface(
     )
 )
 
-# Initialize dark mode state
-dark_mode = gr.State(False)
+# Create the main Blocks interface
+demo = gr.Blocks(css=combined_css)
 
-# Add file upload functionality
-# Add file upload functionality
 with demo:
+    dark_mode = gr.State(False)
+    
+    with gr.Row():
+        dark_mode_button = gr.Button("Dark Mode")
+    
+    # Add the ChatInterface
+    chat_interface.render()
+    
     gr.Markdown("## Upload and Manage PDF Documents")
     with gr.Row():
         file_input = gr.Files(label="Upload your PDF documents", file_types=[".pdf"])
@@ -710,23 +742,23 @@ with demo:
     update_button.click(
         update_vectors, 
         inputs=[file_input, parser_dropdown], 
-        outputs=[update_output, demo.additional_inputs[-1]]  # Use the CheckboxGroup from additional_inputs
+        outputs=[update_output, chat_interface.additional_inputs[-1]]
     )
     
     # Add the refresh button functionality
     refresh_button.click(
         refresh_documents, 
         inputs=[], 
-        outputs=[demo.additional_inputs[-1]]  # Use the CheckboxGroup from additional_inputs
+        outputs=[chat_interface.additional_inputs[-1]]
     )
     
     # Add the delete button functionality
     delete_button.click(
         delete_documents,
-        inputs=[demo.additional_inputs[-1]],  # Use the CheckboxGroup from additional_inputs
-        outputs=[update_output, demo.additional_inputs[-1]]
+        inputs=[chat_interface.additional_inputs[-1]],
+        outputs=[update_output, chat_interface.additional_inputs[-1]]
     )
-
+    
     gr.Markdown(
     """
     ## How to use
@@ -739,6 +771,26 @@ with demo:
     7. Use the provided examples or ask your own questions.
     """
     )
+    
+    # Add the dark mode toggle functionality
+    dark_mode_button.click(
+        toggle_dark_mode,
+        inputs=[dark_mode],
+        outputs=[dark_mode, dark_mode_button]
+    )
+    
+    # Add a function to update the CSS classes based on dark mode state
+    def update_dark_mode(dark_mode):
+        return {
+            "body": "dark-mode" if dark_mode else "",
+            ".gradio-container": "dark-mode" if dark_mode else "",
+        }
+    
+    dark_mode.change(
+        update_dark_mode,
+        inputs=[dark_mode],
+        outputs=[gr.outputs.HTMLClasses()]
+    )
 
 if __name__ == "__main__":
     demo.launch(share=True)