Update app.py

app.py

@@ -122,7 +122,7 @@ def plot_metrics(metrics):
         'Accuracy (%)': [100, metrics['accuracy'], metrics['accuracy']]
     })
     
-    plt.figure(figsize=(8, 5))
+    plt.figure(figsize=(10, 6))  # Increased size for better readability
     sns.set_style("whitegrid")
     sns.set_palette("muted")
     
@@ -177,15 +177,15 @@ body {
     background: #3a3a3a; 
     border: 1px solid #4a4a4a; 
     border-radius: 8px; 
-    padding: 15px; 
+    padding: 20px;  /* Increased padding for better spacing */
     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 0; 
+    padding: 12px 20px;  /* Slightly larger padding for buttons */
+    margin: 8px 0;  /* Increased margin for better spacing */
     width: 100%; 
     text-align: center; 
     transition: background 0.3s ease; 
@@ -200,11 +200,19 @@ body {
     color: #e0e0e0; 
     border: 1px solid #4a4a4a; 
     border-radius: 5px; 
-    margin-bottom: 10px; 
-    font-size: 14px; 
+    margin-bottom: 15px;  /* Increased margin for better spacing */
+    font-size: 16px;  /* Larger font size for readability */
+    padding: 15px;  /* Increased padding for larger textboxes */
+    min-height: 120px;  /* Increased height for better readability */
+    width: 100%;  /* Ensure full width */
+}
+.gr-image { 
+    width: 100%;  /* Ensure the plot takes full width of container */
+    height: auto;  /* Maintain aspect ratio */
+    max-height: 400px;  /* Increased max height for larger plot */
 }
 #app-container { 
-    max-width: 800px; 
+    max-width: 900px;  /* Slightly wider container for better balance */
     width: 100%; 
     padding: 20px; 
     background: #252525; 
@@ -214,18 +222,18 @@ body {
 #button-container { 
     display: flex; 
     flex-direction: column; 
-    gap: 10px; 
-    padding: 15px; 
+    gap: 15px;  /* Increased gap for better spacing */
+    padding: 20px;  /* Increased padding for better alignment */
     background: #303030; 
     border-radius: 8px; 
     align-items: center; 
-    width: 100%; 
+    width: 100%;  /* Full width within parent column */
 }
 #output-container { 
     background: #303030; 
-    padding: 15px; 
+    padding: 20px;  /* Increased padding for larger output fields */
     border-radius: 8px; 
-    width: 100%; 
+    width: 100%;  /* Full width within parent column */
 }
 .text-center { 
     text-align: center; 
@@ -233,8 +241,9 @@ body {
 }
 #app-row { 
     display: flex; 
-    gap: 20px; 
+    gap: 30px;  /* Increased gap for better separation */
     justify-content: space-between; 
+    align-items: stretch;  /* Ensure columns stretch to same height */
 }
 """
 
@@ -249,14 +258,14 @@ with gr.Blocks(css=custom_css) as demo:
         # 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"):
+            with gr.Column(elem_id="output-container", scale=2):  # Increased scale for larger output area
                 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"):
+            with gr.Column(elem_id="button-container", scale=1):  # Adjusted scale for buttons
                 for question in unique_questions:
                     gr.Button(question).click(
                         fn=chat_interface,