Update app.py

app.py

@@ -87,14 +87,14 @@ except Exception as e:
 # RAG process
 def rag_process(query, k=2):
     if not query.strip() or len(query) < 5:
-        return "Invalid query. Please select a question.", "", "", None
+        return "Invalid query. Please select a question.", [], {}
     
     start_time = time.perf_counter()
     try:
         query_embedding = embedder.encode([query], show_progress_bar=False)
         embed_time = time.perf_counter() - start_time
     except Exception as e:
-        return f"Error embedding query: {str(e)}", "", "", None
+        return f"Error embedding query: {str(e)}", [], {}
     
     start_time = time.perf_counter()
     distances, indices = index.search(query_embedding.astype(np.float32), k)
@@ -141,7 +141,7 @@ def plot_metrics(metrics):
     plt.close()
     return 'rag_plot.png'
 
-# Gradio interface with stacked buttons and single output
+# Gradio interface with buttons and single output panel
 def chat_interface(query):
     try:
         response, retrieved_faqs, metrics = rag_process(query)
@@ -167,11 +167,6 @@ body {
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); 
     color: #e0e0e0; 
     font-family: 'Arial', sans-serif; 
-    display: flex; 
-    justify-content: center; 
-    align-items: center; 
-    min-height: 100vh; 
-    margin: 0; 
 }
 .gr-box { 
     background: #3a3a3a; 
@@ -185,12 +180,8 @@ body {
     color: white; 
     border-radius: 5px; 
     padding: 10px 20px; 
-    margin: 5px 0; 
-    width: 80%; 
-    align-self: center; 
-    text-align: center; 
+    margin: 5px; 
     transition: background 0.3s ease; 
-    font-size: 16px; 
 }
 .gr-button:hover { 
     background: #1c86ee; 
@@ -201,43 +192,22 @@ body {
     color: #e0e0e0; 
     border: 1px solid #4a4a4a; 
     border-radius: 5px; 
-    margin-bottom: 10px; 
-    font-size: 14px; 
-}
-#app-container { 
-    max-width: 800px; 
-    width: 100%; 
-    padding: 20px; 
-    background: #252525; 
-    border-radius: 12px; 
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); 
 }
 #button-container { 
     display: flex; 
-    flex-direction: column; 
+    flex-wrap: wrap; 
     gap: 10px; 
-    padding: 15px; 
-    background: #303030; 
+    justify-content: center; 
+    padding: 20px; 
+    background: #252525; 
     border-radius: 8px; 
     margin-bottom: 20px; 
-    align-items: center; 
-    width: 66%; 
 }
 #output-container { 
     background: #303030; 
-    padding: 15px; 
+    padding: 20px; 
     border-radius: 8px; 
-    margin-top: 20px; 
-    width: 100%; 
-}
-.text-center { 
-    text-align: center; 
-    margin-bottom: 20px; 
-}
-#app-row { 
-    display: flex; 
-    gap: 20px; 
-    justify-content: space-between; 
+    margin: 10px 0; 
 }
 """
 
@@ -245,31 +215,28 @@ body {
 unique_questions = faq_data['question'].tolist()
 
 with gr.Blocks(css=custom_css) as demo:
-    with gr.Column(elem_id="app-container"):
-        gr.Markdown("# Customer Experience Bot Demo", elem_classes="text-center")
-        gr.Markdown("Select a question to see the bot's response, retrieved FAQs, and call center data cleanup stats.", elem_classes="text-center")
-        
-        # Rule of thirds layout: buttons on left 2/3, outputs on right 1/3
-        with gr.Row(elem_id="app-row"):
-            # Buttons (left 2/3)
-            with gr.Column(elem_id="button-container"):
-                for question in unique_questions:
-                    gr.Button(question).click(
-                        fn=chat_interface,
-                        inputs=gr.State(value=question),
-                        outputs=[
-                            gr.Textbox(label="Bot Response", elem_id="response-output"),
-                            gr.Textbox(label="Retrieved FAQs", elem_id="faq-output"),
-                            gr.Textbox(label="Data Cleanup Stats", elem_id="cleanup-output"),
-                            gr.Image(label="RAG Pipeline Metrics", elem_id="plot-output")
-                        ]
-                    )
-            
-            # Single output panel (right 1/3)
-            with gr.Column(elem_id="output-container"):
-                response_output = gr.Textbox(label="Bot Response", elem_id="response-output")
-                faq_output = gr.Textbox(label="Retrieved FAQs", elem_id="faq-output")
-                cleanup_output = gr.Textbox(label="Data Cleanup Stats", elem_id="cleanup-output")
-                plot_output = gr.Image(label="RAG Pipeline Metrics", elem_id="plot-output")
+    gr.Markdown("# Customer Experience Bot Demo", elem_classes="text-center")
+    gr.Markdown("Select a question to see the bot's response, retrieved FAQs, and call center data cleanup stats.", elem_classes="text-center")
+    
+    # Button container for questions
+    with gr.Row(elem_id="button-container"):
+        for question in unique_questions:
+            gr.Button(question).click(
+                fn=chat_interface,
+                inputs=gr.State(value=question),
+                outputs=[
+                    gr.Textbox(label="Bot Response"),
+                    gr.Textbox(label="Retrieved FAQs"),
+                    gr.Textbox(label="Data Cleanup Stats"),
+                    gr.Image(label="RAG Pipeline Metrics")
+                ]
+            )
+    
+    # Single output panel
+    with gr.Column(elem_id="output-container"):
+        response_output = gr.Textbox(label="Bot Response")
+        faq_output = gr.Textbox(label="Retrieved FAQs")
+        cleanup_output = gr.Textbox(label="Data Cleanup Stats")
+        plot_output = gr.Image(label="RAG Pipeline Metrics")
 
 demo.launch()