Update app.py

app.py

@@ -60,6 +60,22 @@ def generate_text(input_text, selected_model, history):
     
     return generated_response, history, history  # Return three values
 
+# Inject custom CSS directly into the Gradio interface for scrollbars
+css = """
+    #response-output {
+        height: 150px;
+        overflow: auto;
+        border: 1px solid #ddd;
+        padding: 10px;
+    }
+    #history-output {
+        height: 300px;
+        overflow: auto;
+        border: 1px solid #ddd;
+        padding: 10px;
+    }
+"""
+
 # Create Gradio interface with a dropdown for model selection
 iface = gr.Interface(
     fn=generate_text,
@@ -69,11 +85,12 @@ iface = gr.Interface(
         gr.State()  # This is where we maintain the history state (input)
     ],
     outputs=[
-        gr.Textbox(label="Response", placeholder="Response will be shown here"),
-        gr.Textbox(label="History", placeholder="Interaction history will be shown here", lines=10, interactive=False),
+        gr.Textbox(label="Response", placeholder="Response will be shown here", elem_id="response-output"),
+        gr.Textbox(label="History", placeholder="Interaction history will be shown here", lines=10, interactive=False, elem_id="history-output"),
         gr.State()  # History needs to be output as well
     ],
-    title="Chat with OpenRouter Models"
+    title="Chat with OpenRouter Models",
+    css=css  # Apply the custom CSS here
 )
 
 iface.launch()