modify the layout of input and output

app.py

@@ -45,7 +45,14 @@ def chat(user_input, max_new_tokens=2048):
     thread.join()
 
 # Create a custom layout using Blocks
-with gr.Blocks() as demo:
+with gr.Blocks(css="""
+    #markdown-output {
+        height: 300px;
+        overflow-y: auto;
+        border: 1px solid #ddd;
+        padding: 10px;
+    }
+""") as demo:
     gr.Markdown(
         "## Ling-lite-1.5 AI Assistant\n"
         "Based on [inclusionAI/Ling-lite-1.5](https://huggingface.co/inclusionAI/Ling-lite-1.5) "
@@ -55,7 +62,7 @@ with gr.Blocks() as demo:
         max_tokens_slider = gr.Slider(minimum=100, maximum=2048, step=50, label="Generated length")
 
 #    output_box = gr.Textbox(lines=10, label="Response")
-    output_box = gr.Markdown(lines=8, label="Response")
+    output_box = gr.Markdown(label="Response", elem_id="markdown-output")
     input_box = gr.Textbox(lines=8, label="Input you question")
 
     examples = gr.Examples(