Update app.py

app.py

@@ -141,7 +141,7 @@ def plot_metrics(metrics):
     plt.close()
     return 'rag_plot.png'
 
-# Gradio interface with buttons
+# Gradio interface with buttons and single output panel
 def chat_interface(query):
     try:
         response, retrieved_faqs, metrics = rag_process(query)
@@ -161,23 +161,65 @@ def chat_interface(query):
     except Exception as e:
         return f"Error: {str(e)}", "", "", None
 
-# Dark theme CSS
+# Dark theme CSS with improved styling
 custom_css = """
-body { background-color: #2a2a2a; color: #e0e0e0; }
-.gr-box { background-color: #3a3a3a; border: 1px solid #4a4a4a; }
-.gr-button { background-color: #1e90ff; color: white; margin: 5px; }
-.gr-button:hover { background-color: #1c86ee; }
+body { 
+    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); 
+    color: #e0e0e0; 
+    font-family: 'Arial', sans-serif; 
+}
+.gr-box { 
+    background: #3a3a3a; 
+    border: 1px solid #4a4a4a; 
+    border-radius: 8px; 
+    padding: 15px; 
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
+}
+.gr-button { 
+    background: #1e90ff; 
+    color: white; 
+    border-radius: 5px; 
+    padding: 10px 20px; 
+    margin: 5px; 
+    transition: background 0.3s ease; 
+}
+.gr-button:hover { 
+    background: #1c86ee; 
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 
+}
+.gr-textbox { 
+    background: #2f2f2f; 
+    color: #e0e0e0; 
+    border: 1px solid #4a4a4a; 
+    border-radius: 5px; 
+}
+#button-container { 
+    display: flex; 
+    flex-wrap: wrap; 
+    gap: 10px; 
+    justify-content: center; 
+    padding: 20px; 
+    background: #252525; 
+    border-radius: 8px; 
+    margin-bottom: 20px; 
+}
+#output-container { 
+    background: #303030; 
+    padding: 20px; 
+    border-radius: 8px; 
+    margin: 10px 0; 
+}
 """
 
 # Get unique questions for buttons (after cleanup)
 unique_questions = faq_data['question'].tolist()
 
 with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown("# Customer Experience Bot Demo")
-    gr.Markdown("Select a question to see the bot's response, retrieved FAQs, and call center data cleanup stats.")
+    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")
     
-    # Create buttons for each question
-    with gr.Row():
+    # Button container for questions
+    with gr.Row(elem_id="button-container"):
         for question in unique_questions:
             gr.Button(question).click(
                 fn=chat_interface,
@@ -190,9 +232,11 @@ with gr.Blocks(css=custom_css) as demo:
                 ]
             )
     
-    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")
+    # 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()