Update app.py

app.py

@@ -89,10 +89,14 @@ def _merge_ner_entities(entities, original_text):
     merged = []
     for ent in entities:
         word = original_text[ent['start']:ent['end']]
-        if merged and ent['start'] <= merged[-1]['end'] + 2:  # ← +1 tolerance
+        if merged and ent['start'] <= merged[-1]['end'] + 2:
+            # Merge regardless of entity group — same word split across tokens
             merged[-1]['word'] = original_text[merged[-1]['start']:ent['end']]
             merged[-1]['end'] = ent['end']
             merged[-1]['score'] = (merged[-1]['score'] + float(ent['score'])) / 2
+            # Keep the entity group with higher score
+            if float(ent['score']) > merged[-1]['score']:
+                merged[-1]['entity_group'] = ent['entity_group']
         else:
             merged.append({
                 'word': word,
@@ -415,14 +419,28 @@ CSS = """
     font-weight: 700 !important;
     letter-spacing: 1px !important;
 }
-/* Remove default gradio component backgrounds */
-.gradio-container .gr-box,
-.gradio-container .gr-form,
-.gradio-container label,
-.gradio-container .gr-block {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
+#input-card, #verdict-card, #shap-card, #ner-card {
+    border: 1.5px solid #3a5fc8 !important;
+    border-radius: 12px !important;
+    box-shadow: 0 4px 12px rgba(58,95,200,0.15) !important;
+    padding: 16px !important;
+}
+.example-btn {
+    border: 1.5px solid #3a5fc8 !important;
+    border-radius: 8px !important;
+    background: white !important;
+    font-size: 0.82rem !important;
+    font-weight: 600 !important;
+    white-space: normal !important;
+    height: auto !important;
+    text-align: center !important;
+    line-height: 1.4 !important;
+    padding: 12px !important;
+    color: #222 !important;
+}
+.example-btn:hover {
+    background: #eef2ff !important;
+    cursor: pointer !important;
 }
 """
 
@@ -430,10 +448,9 @@ with gr.Blocks(css=CSS, theme=gr.themes.Base()) as demo:
     gr.HTML('<h1 id="title">⚕ ADR Severity Analyzer</h1>')
     gr.HTML('<p id="subtitle">Adverse Drug Reaction · Severity Classification · SHAP Explainability · This is a demo, do not use for medical advice.</p>')
 
-    # ── Input + Verdict row ──
+    # ── Input + Verdict ──
     with gr.Row():
-        with gr.Column(scale=1):
-            gr.HTML("<div style='background:white; border:1.5px solid #3a5fc8; border-radius:12px; box-shadow:0 4px 12px rgba(58,95,200,0.15); padding:24px;'>")
+        with gr.Column(scale=1, elem_id="input-card"):
             gr.HTML("<h3 style='text-align:center; margin-top:0;'>📝 Please Enter Your Drug Reaction</h3>")
             text_input = gr.Textbox(
                 label="",
@@ -441,41 +458,33 @@ with gr.Blocks(css=CSS, theme=gr.themes.Base()) as demo:
                 lines=5,
             )
             analyze_btn = gr.Button("🔍 Analyze Reaction", variant="primary")
-            gr.HTML("</div>")
-        with gr.Column(scale=1):
-            gr.HTML("<div style='background:white; border:1.5px solid #3a5fc8; border-radius:12px; box-shadow:0 4px 12px rgba(58,95,200,0.15); padding:24px;'>")
+        with gr.Column(scale=1, elem_id="verdict-card"):
             gr.HTML("<h3 style='text-align:center; margin-top:0;'>⚕ Severity Classification</h3>")
             verdict_out = gr.HTML()
-            gr.HTML("</div>")
 
-    # ── Examples row ──
-    gr.HTML("<div style='background:white; border:1.5px solid #3a5fc8; border-radius:12px; box-shadow:0 4px 12px rgba(58,95,200,0.15); padding:24px; margin-bottom:16px;'>")
-    gr.HTML("<h3 style='text-align:center; margin-top:0;'>💡 Try an Example</h3>")
+    # ── Examples ──
+    gr.HTML("<h3 style='text-align:center;'>💡 Try an Example</h3>")
     with gr.Row():
         ex_btns = []
         for example in EXAMPLES:
             btn = gr.Button(
-                example[0],
+                f'"{example[0][:80]}..."',
                 size="sm",
+                elem_classes="example-btn"
             )
             ex_btns.append((btn, example[0]))
-    gr.HTML("</div>")
 
     for btn, text in ex_btns:
         btn.click(fn=lambda t=text: t, inputs=[], outputs=text_input)
 
-    # ── SHAP + NER row ──
+    # ── SHAP + NER ──
     with gr.Row():
-        with gr.Column(scale=1):
-            gr.HTML("<div style='background:white; border:1.5px solid #3a5fc8; border-radius:12px; box-shadow:0 4px 12px rgba(58,95,200,0.15); padding:24px;'>")
+        with gr.Column(scale=1, elem_id="shap-card"):
             gr.HTML("<h3 style='text-align:center; margin-top:0;'>🎨 Word-Level SHAP Highlights</h3>")
             highlight_out = gr.HTML()
-            gr.HTML("</div>")
-        with gr.Column(scale=1):
-            gr.HTML("<div style='background:white; border:1.5px solid #3a5fc8; border-radius:12px; box-shadow:0 4px 12px rgba(58,95,200,0.15); padding:24px;'>")
+        with gr.Column(scale=1, elem_id="ner-card"):
             gr.HTML("<h3 style='text-align:center; margin-top:0;'>🏥 Medical Entity Recognition</h3>")
             ner_out = gr.HTML()
-            gr.HTML("</div>")
 
     analyze_btn.click(
         fn=predict,