Improve UI: increase NER output size, add auto-resize to input, reorganize examples

app.py

@@ -1,6 +1,5 @@
 import json
 from collections import Counter
-
 import matplotlib.pyplot as plt
 import gradio as gr
 import pandas as pd
@@ -47,17 +46,31 @@ def run_ner(text):
     figure = plot_to_figure(grouped)
     return ner_content, rows, figure
 
-with gr.Blocks() as demo:
-    note = gr.Textbox(label="Note text", lines=8, max_lines=16)
+# Custom CSS to increase NER output size
+custom_css = """
+#ner-output {
+    min-height: 400px !important;
+    max-height: 600px !important;
+    overflow-y: auto !important;
+}
+"""
+
+with gr.Blocks(css=custom_css) as demo:
+    note = gr.Textbox(label="Note text", lines=8, max_lines=None, autoscroll=False)
     submit = gr.Button("Submit")
     gr.Markdown("**Examples:**")
-    with gr.Row():
-        for example in examples:
-            gr.Button(example).click(lambda e=example: e, outputs=note)
-    highlight = gr.HighlightedText(label="NER", combine_adjacent=True)
+    # Rearrange examples - display them in a cleaner column layout
+    with gr.Column():
+        for i in range(0, len(examples), 2):
+            with gr.Row():
+                for j in range(2):
+                    if i + j < len(examples):
+                        example = examples[i + j]
+                        gr.Button(example).click(lambda e=example: e, outputs=note)
+    highlight = gr.HighlightedText(label="NER", combine_adjacent=True, show_legend=True, elem_id="ner-output")
     table = gr.Dataframe(headers=["Entity", "Count"])
     plot = gr.Plot(label="Bar")
     submit.click(run_ner, [note], [highlight, table, plot])
     note.submit(run_ner, [note], [highlight, table, plot])
 
-demo.launch()
+demo.launch()