reverting frontend

app.py

@@ -164,6 +164,20 @@ with gr.Blocks() as demo:
         # Generate random user ID for this session
         session_user_id = str(uuid.uuid4())[:8]
         faq_button = gc.Button("Process")
+        # Loading animation HTML
+        loading_html = """
+        <div style="display: flex; justify-content: center; align-items: center; min-height: 100px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9;">
+            <div style="display: inline-block; width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite;"></div>
+            <style>
+                @keyframes spin {
+                    0% { transform: rotate(0deg); }
+                    100% { transform: rotate(360deg); }
+                }
+            </style>
+        </div>
+        """
+        
+        faq_loading = gc.HTML(value="", visible=False)
         faq_output = gc.Markdown(label="Response", value="*Click 'Process' to get a response...*")
         with gr.Row():  # type: ignore
             thumbs_down = gc.Button("Report bad response", elem_id="thumbs-down", interactive=True)
@@ -174,11 +188,22 @@ with gr.Blocks() as demo:
 
         thumbs_down.click(report_bad_response, outputs=[feedback_msg, thumbs_down])
 
-        # Re-enable report button and clear feedback when a new FAQ is processed
-        def reset_feedback(*args):
-            return gr.update(interactive=True), gr.update(value="", visible=False)
-        faq_button.click(reset_feedback, outputs=[thumbs_down, feedback_msg], preprocess=False)
-        faq_button.click(lambda q, m: faq_wrapper(q, session_user_id, m), inputs=[faq_input, model_selector], outputs=faq_output)
+        # Combined function to handle loading state and processing
+        def process_with_loading(question, model):
+            # Show loading, hide response
+            yield gr.update(value=loading_html, visible=True), gr.update(value="", visible=False), gr.update(interactive=True), gr.update(value="", visible=False)
+            
+            # Process the question
+            result = faq_wrapper(question, session_user_id, model)
+            
+            # Hide loading, show response
+            yield gr.update(value="", visible=False), gr.update(value=result, visible=True), gr.update(interactive=True), gr.update(value="", visible=False)
+        
+        faq_button.click(
+            process_with_loading, 
+            inputs=[faq_input, model_selector], 
+            outputs=[faq_loading, faq_output, thumbs_down, feedback_msg]
+        )
     with gr.Tab(label="Elasticsearch"):  # type: ignore
         gc.Markdown("### Step 1: Natural Language to Query")
         natural_input = gc.Textbox(label="Describe what you want to search for", lines=3, placeholder="Example: Find all documents containing 'machine learning' in the title")