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.", [], {}
+        return "Invalid query. Please select a question.", "", "", None
     
     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)}", [], {}
+        return f"Error embedding query: {str(e)}", "", "", None
     
     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 buttons and single output panel
+# Gradio interface with stacked buttons and single output
 def chat_interface(query):
     try:
         response, retrieved_faqs, metrics = rag_process(query)
@@ -167,6 +167,11 @@ 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; 
@@ -180,8 +185,11 @@ body {
     color: white; 
     border-radius: 5px; 
     padding: 10px 20px; 
-    margin: 5px; 
+    margin: 5px 0; 
+    width: 100%; 
+    text-align: center; 
     transition: background 0.3s ease; 
+    font-size: 16px; 
 }
 .gr-button:hover { 
     background: #1c86ee; 
@@ -192,22 +200,41 @@ 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-wrap: wrap; 
+    flex-direction: column; 
     gap: 10px; 
-    justify-content: center; 
-    padding: 20px; 
-    background: #252525; 
+    padding: 15px; 
+    background: #303030; 
     border-radius: 8px; 
-    margin-bottom: 20px; 
+    align-items: center; 
+    width: 100%; 
 }
 #output-container { 
     background: #303030; 
-    padding: 20px; 
+    padding: 15px; 
     border-radius: 8px; 
-    margin: 10px 0; 
+    width: 100%; 
+}
+.text-center { 
+    text-align: center; 
+    margin-bottom: 20px; 
+}
+#app-row { 
+    display: flex; 
+    gap: 20px; 
+    justify-content: space-between; 
 }
 """
 
@@ -215,28 +242,31 @@ body {
 unique_questions = faq_data['question'].tolist()
 
 with gr.Blocks(css=custom_css) as demo:
-    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")
+    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")
+        
+        # Layout: outputs on left, buttons on right
+        with gr.Row(elem_id="app-row"):
+            # Single output panel (left 2/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")
+            
+            # Stacked buttons (right 1/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=[
+                            response_output,
+                            faq_output,
+                            cleanup_output,
+                            plot_output
+                        ]
+                    )
 
 demo.launch()