Update app.py

app.py

@@ -142,7 +142,7 @@ def plot_metrics(metrics):
     return 'rag_plot.png'
 
 # Gradio interface with stacked buttons and single output
-def chat_interface(query, response_output, faq_output, cleanup_output, plot_output):
+def chat_interface(query):
     try:
         response, retrieved_faqs, metrics = rag_process(query)
         plot_path = plot_metrics(metrics)
@@ -186,9 +186,11 @@ body {
     border-radius: 5px; 
     padding: 10px 20px; 
     margin: 5px 0; 
-    width: 100%; 
+    width: 80%; 
+    align-self: center; 
     text-align: center; 
     transition: background 0.3s ease; 
+    font-size: 16px; 
 }
 .gr-button:hover { 
     background: #1c86ee; 
@@ -200,9 +202,10 @@ body {
     border: 1px solid #4a4a4a; 
     border-radius: 5px; 
     margin-bottom: 10px; 
+    font-size: 14px; 
 }
 #app-container { 
-    max-width: 600px; 
+    max-width: 800px; 
     width: 100%; 
     padding: 20px; 
     background: #252525; 
@@ -217,17 +220,25 @@ body {
     background: #303030; 
     border-radius: 8px; 
     margin-bottom: 20px; 
+    align-items: center; 
+    width: 66%; 
 }
 #output-container { 
     background: #303030; 
     padding: 15px; 
     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; 
+}
 """
 
 # Get unique questions for buttons (after cleanup)
@@ -238,31 +249,42 @@ 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")
         
-        # Single output panel (defined once)
-        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")
-        
-        # Stacked buttons in a single column
-        with gr.Column(elem_id="button-container"):
-            for question in unique_questions:
-                gr.Button(question).click(
-                    fn=chat_interface,
-                    inputs=[
-                        gr.State(value=question),
-                        response_output,
-                        faq_output,
-                        cleanup_output,
-                        plot_output
-                    ],
-                    outputs=[
-                        response_output,
-                        faq_output,
-                        cleanup_output,
-                        plot_output
-                    ]
-                )
+        # 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.State(),
+                            gr.State(),
+                            gr.State(),
+                            gr.State()
+                        ],
+                        _js="() => {return [arguments[0], document.querySelector('#response-output').value, document.querySelector('#faq-output').value, document.querySelector('#cleanup-output').value, document.querySelector('#plot-output').value]}"
+                    ).then(
+                        fn=lambda response, faq_text, cleanup_stats, plot_path: (response, faq_text, cleanup_stats, plot_path),
+                        inputs=[
+                            gr.State(),
+                            gr.State(),
+                            gr.State(),
+                            gr.State()
+                        ],
+                        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")
 
 demo.launch()