Update app.py

app.py

@@ -142,9 +142,39 @@ def my_chatbot(prompt: str):
 
     
 
-demo = gr.Interface(fn=my_chatbot, 
-                    inputs=[gr.Textbox(label="Query", lines=3)],
-                    outputs=[gr.Textbox(label="Tool", lines = 1), gr.Textbox(label="Tool", lines = 10)],
-                    title="Demo Agent",
-                    description= "Flag responses where inappropriate tool is used")
+# demo = gr.Interface(fn=my_chatbot, 
+#                     inputs=[gr.Textbox(label="Query", lines=3)],
+#                     outputs=[gr.Textbox(label="Tool", lines = 1), gr.Textbox(label="Tool", lines = 10)],
+#                     title="Demo Agent",
+#                     description= "Flag responses where inappropriate tool is used")
+# demo.launch()
+
+
+
+# Define custom CSS for the Gradio interface
+custom_css = """
+input[type="text"], textarea {
+    font-size: 18px !important;
+}
+textarea {
+    height: auto !important;
+}
+.gr-textbox {
+    font-size: 18px !important;
+}
+"""
+
+# Create the interface with the desired layout and custom CSS
+with gr.Blocks(css=custom_css) as demo:
+    gr.Markdown("# Demo Agent\nFlag responses where inappropriate tool is used")
+    with gr.Row():
+        query_input = gr.Textbox(label="Query", lines=3, interactive=True)
+    with gr.Column():
+        tool_output = gr.Textbox(label="Tool", lines=1)
+        detailed_output = gr.Textbox(label="Detailed Response", lines=10)
+
+    # Define the interaction between input and outputs
+    query_input.submit(my_chatbot, inputs=query_input, outputs=[tool_output, detailed_output])
+
+# Launch the interface
 demo.launch()