Update app.py

app.py

@@ -476,23 +476,16 @@ def display_documents():
         label="Select documents to query"
     )
 
-# Define the checkbox outside the demo block
-document_selector = gr.CheckboxGroup(label="Select documents to query")
-
-use_web_search = gr.Checkbox(label="Use Web Search", value=True)
-
-demo = gr.ChatInterface(
-    respond,
-    additional_inputs=[
-        gr.Dropdown(choices=MODELS, label="Select Model", value=MODELS[3]),
-        gr.Slider(minimum=0.1, maximum=1.0, value=0.2, step=0.1, label="Temperature"),
-        gr.Slider(minimum=1, maximum=5, value=1, step=1, label="Number of API Calls"),
-        use_web_search,
-        document_selector  # Add the document selector to the chat interface
-    ],
-    title="AI-powered Web Search and PDF Chat Assistant",
-    description="Chat with your PDFs or use web search to answer questions (Please use toggle under Additional Inputs to swithc between PDF and Web Search, Default Value Web Search)",
-    theme=gr.themes.Soft(
+def create_interface():
+    # Define components outside the main interface
+    model_dropdown = gr.Dropdown(choices=MODELS, label="Select Model", value=MODELS[3])
+    temperature_slider = gr.Slider(minimum=0.1, maximum=1.0, value=0.2, step=0.1, label="Temperature")
+    api_calls_slider = gr.Slider(minimum=1, maximum=5, value=1, step=1, label="Number of API Calls")
+    use_web_search = gr.Checkbox(label="Use Web Search", value=True)
+    document_selector = gr.CheckboxGroup(label="Select documents to query")
+
+    # Create the main demo layout
+    with gr.Blocks(css=css, theme=gr.themes.Soft(
         primary_hue="orange",
         secondary_hue="amber",
         neutral_hue="gray",
@@ -509,45 +502,69 @@ demo = gr.ChatInterface(
         background_fill_secondary_dark="#0c0505",
         color_accent_soft_dark="transparent",
         code_background_fill_dark="#140b0b"
-    ),
-    css=css,
-    examples=[
-        ["Tell me about the contents of the uploaded PDFs."],
-        ["What are the main topics discussed in the documents?"],
-        ["Can you summarize the key points from the PDFs?"]
-    ],
-    cache_examples=False,
-    analytics_enabled=False,
-)
+    )) as demo:
+        gr.Markdown("# AI-powered Web Search and PDF Chat Assistant")
+        gr.Markdown("Chat with your PDFs or use web search to answer questions")
+        
+        with gr.Row():
+            with gr.Column(scale=3):
+                chatbot = gr.Chatbot(height=600)
+                msg = gr.Textbox(label="Enter your message")
+                clear = gr.Button("Clear")
+            
+            with gr.Column(scale=1):
+                model_dropdown
+                temperature_slider
+                api_calls_slider
+                use_web_search
+                document_selector
+        
+        gr.Markdown("## Upload PDF Documents")
+        with gr.Row():
+            file_input = gr.Files(label="Upload your PDF documents", file_types=[".pdf"])
+            parser_dropdown = gr.Dropdown(choices=["pypdf", "llamaparse"], label="Select PDF Parser", value="llamaparse")
+            update_button = gr.Button("Upload Document")
+        
+        update_output = gr.Textbox(label="Update Status")
+        
+        # Update both the output text and the document selector
+        update_button.click(update_vectors, 
+                            inputs=[file_input, parser_dropdown], 
+                            outputs=[update_output, document_selector])
+
+        # Set up the chat functionality
+        msg.submit(chatbot_interface, 
+                   inputs=[msg, chatbot, use_web_search, model_dropdown, temperature_slider, api_calls_slider, document_selector],
+                   outputs=[chatbot])
+        clear.click(lambda: None, None, chatbot, queue=False)
+
+        gr.Markdown(
+        """
+        ## How to use
+        1. Upload PDF documents using the file input at the top.
+        2. Select the PDF parser (pypdf or llamaparse) and click "Upload Document" to update the vector store.
+        3. Select the documents you want to query using the checkboxes.
+        4. Ask questions in the chat interface. 
+        5. Toggle "Use Web Search" to switch between PDF chat and web search.
+        6. Adjust Temperature and Number of API Calls to fine-tune the response generation.
+        7. Use the provided examples or ask your own questions.
+        """
+        )
 
-# Add file upload functionality
-with demo:
-    gr.Markdown("## Upload PDF Documents")
+        # Add examples
+        gr.Examples(
+            examples=[
+                ["Tell me about the contents of the uploaded PDFs."],
+                ["What are the main topics discussed in the documents?"],
+                ["Can you summarize the key points from the PDFs?"]
+            ],
+            inputs=msg,
+        )
 
-    with gr.Row():
-        file_input = gr.Files(label="Upload your PDF documents", file_types=[".pdf"])
-        parser_dropdown = gr.Dropdown(choices=["pypdf", "llamaparse"], label="Select PDF Parser", value="llamaparse")
-        update_button = gr.Button("Upload Document")
-    
-    update_output = gr.Textbox(label="Update Status")
-    
-    # Update both the output text and the document selector
-    update_button.click(update_vectors, 
-                        inputs=[file_input, parser_dropdown], 
-                        outputs=[update_output, document_selector])
-
-    gr.Markdown(
-    """
-    ## How to use
-    1. Upload PDF documents using the file input at the top.
-    2. Select the PDF parser (pypdf or llamaparse) and click "Upload Document" to update the vector store.
-    3. Select the documents you want to query using the checkboxes.
-    4. Ask questions in the chat interface. 
-    5. Toggle "Use Web Search" to switch between PDF chat and web search.
-    6. Adjust Temperature and Number of API Calls to fine-tune the response generation.
-    7. Use the provided examples or ask your own questions.
-    """
-    )
+    return demo
+
+# Use the function to create the interface
+demo = create_interface()
 
 if __name__ == "__main__":
     demo.launch(share=True)