Update app.py

app.py

@@ -23,6 +23,7 @@ ID2TAG = model.config.id2label
 BOS_ID = 2
 EOS_ID = 3
 
+# ── Entity config — Sindhi labels ─────────────────
 ENTITY_CONFIG = {
     "PERSON":       {"color": "#c084fc", "bg": "rgba(192,132,252,0.15)", "sindhi": "ماڻهو"},
     "LOCATION":     {"color": "#818cf8", "bg": "rgba(129,140,248,0.15)", "sindhi": "جڳهه"},
@@ -33,9 +34,9 @@ ENTITY_CONFIG = {
 }
 
 FALLBACK_CFG = {
-    "color": "#6b7280",
-    "bg":    "rgba(107,114,128,0.15)",
-    "sindhi": "ٻيو",
+    "color":  "#6b7280",
+    "bg":     "rgba(107,114,128,0.15)",
+    "sindhi": "ادارو",   # unknown entities shown as ادارو
 }
 
 
@@ -133,7 +134,9 @@ def predict_ner(sentence):
     <div style="
         background:linear-gradient(135deg,#1a0533 0%,#0f0f2e 100%);
         border:1px solid #7c3aed30;border-radius:16px;
-        padding:24px 28px;font-size:1.25em;line-height:3.4em;
+        padding:24px 28px;
+        font-size:1.3em;
+        line-height:3.2em;
         direction:rtl;text-align:right;
         font-family:'Lateef','Scheherazade New',serif;
         min-height:90px;">
@@ -156,7 +159,7 @@ def _empty_html():
         border:1px solid #7c3aed20;border-radius:16px;
         padding:40px;text-align:center;min-height:90px;
         display:flex;align-items:center;justify-content:center;">
-        <span style="color:#4c1d95;font-size:1.1em;
+        <span style="color:#4c1d95;font-size:1.2em;
             font-family:'Lateef','Scheherazade New',serif;">
             ڪو بہ سنڌي جملو لکو
         </span>
@@ -168,7 +171,8 @@ def _empty_summary():
     <div style="
         background:#1a0533;border:1px solid #7c3aed20;
         border-radius:16px;padding:24px;
-        text-align:center;color:#4c1d95;font-size:0.9em;
+        text-align:center;color:#4c1d95;
+        font-size:1.1em;
         font-family:'Lateef','Scheherazade New',serif;">
         اعتماد جوڳا نتيجا نہ مليا
     </div>
@@ -179,7 +183,6 @@ def _build_summary(entities):
         return _empty_summary()
 
     counts = Counter(e["type"] for e in entities)
-    total  = len(entities)
     cards  = ""
 
     for etype, cnt in sorted(counts.items(), key=lambda x: -x[1]):
@@ -190,36 +193,27 @@ def _build_summary(entities):
             border-radius:10px;padding:10px 14px;
             display:flex;justify-content:space-between;
             align-items:center;margin-bottom:8px;direction:rtl;">
-            <span style="color:{cfg['color']};font-weight:600;font-size:0.9em;
+            <span style="color:{cfg['color']};font-weight:600;font-size:1em;
                 font-family:'Lateef','Scheherazade New',serif;">
                 {cfg['sindhi']}
             </span>
             <span style="
                 background:{cfg['color']};color:#0a0a1a;
                 font-weight:800;border-radius:20px;
-                padding:1px 10px;font-size:0.82em;
+                padding:1px 10px;font-size:0.85em;
                 min-width:24px;text-align:center;">
                 {cnt}
             </span>
         </div>
         """
 
+    # No مجموعي header — just cards directly
     return f"""
     <div style="
         background:linear-gradient(135deg,#1a0533,#0f0f2e);
         border:1px solid #7c3aed30;border-radius:16px;
-        padding:18px 16px;">
-        <div style="
-            color:#c084fc;font-weight:700;font-size:0.9em;
-            margin-bottom:12px;padding-bottom:10px;
-            border-bottom:1px solid #7c3aed25;
-            direction:rtl;text-align:right;
-            font-family:'Lateef','Scheherazade New',serif;">
-            مجموعي:
-            <span style="color:#f1f5f9;font-size:1.1em;">{total}</span>
-            سڃاڻپ
-        </div>
-        <div>{cards}</div>
+        padding:16px 14px;">
+        {cards}
     </div>
     """
 
@@ -229,14 +223,14 @@ def _build_confidence(entities):
 
     bars = ""
     for ent in entities:
-        cfg   = ENTITY_CONFIG.get(ent["type"], FALLBACK_CFG)
-        pct   = int(ent["score"] * 100)
+        cfg = ENTITY_CONFIG.get(ent["type"], FALLBACK_CFG)
+        pct = int(ent["score"] * 100)
 
         bars += f"""
         <div style="margin-bottom:16px;direction:rtl;">
             <div style="display:flex;justify-content:space-between;
                 align-items:center;margin-bottom:6px;">
-                <span style="color:#e2e8f0;font-size:1em;font-weight:500;
+                <span style="color:#e2e8f0;font-size:1.1em;font-weight:500;
                     font-family:'Lateef','Scheherazade New',serif;">
                     {ent['text']}
                 </span>
@@ -245,7 +239,7 @@ def _build_confidence(entities):
                         background:{cfg['color']}18;
                         border:1px solid {cfg['color']}40;
                         color:{cfg['color']};
-                        font-size:0.7em;padding:2px 8px;
+                        font-size:0.85em;padding:2px 8px;
                         border-radius:4px;font-weight:700;
                         font-family:'Lateef','Scheherazade New',serif;">
                         {ent['sindhi']}
@@ -284,16 +278,16 @@ def _build_confidence(entities):
     """
 
 def _build_legend(entities):
-    """Only show legend for entity types that were actually found."""
-    found_types = set(e["type"] for e in entities)
+    """Show only entity types found in this result."""
+    found_types = list(dict.fromkeys(e["type"] for e in entities))  # preserve order
     items = ""
     for etype in found_types:
         cfg = ENTITY_CONFIG.get(etype, FALLBACK_CFG)
         items += (
             f'<span style="background:{cfg["bg"]};'
             f'border:1px solid {cfg["color"]}40;'
-            f'color:{cfg["color"]};padding:4px 12px;'
-            f'border-radius:6px;font-size:0.82em;font-weight:600;'
+            f'color:{cfg["color"]};padding:5px 14px;'
+            f'border-radius:6px;font-size:1em;font-weight:600;'
             f'font-family:\'Lateef\',\'Scheherazade New\',serif;">'
             f'{cfg["sindhi"]}</span>'
         )
@@ -301,13 +295,7 @@ def _build_legend(entities):
     <div style="
         background:linear-gradient(135deg,#1a0533,#0f0f2e);
         border:1px solid #7c3aed20;border-radius:14px;
-        padding:14px 18px;">
-        <div style="color:#9333ea;font-weight:700;font-size:0.8em;
-            letter-spacing:0.5px;margin-bottom:10px;
-            direction:rtl;text-align:right;
-            font-family:'Lateef','Scheherazade New',serif;">
-            اسمن جي نشاندهي
-        </div>
+        padding:14px 18px;margin-top:4px;">
         <div style="display:flex;flex-wrap:wrap;gap:8px;direction:rtl;">
             {items}
         </div>
@@ -332,8 +320,9 @@ def _build_csv(entities):
 
 
 CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Lateef&family=Scheherazade+New:wght@400;700&family=Outfit:wght@400;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lateef:wght@400;700&family=Scheherazade+New:wght@400;700&family=Outfit:wght@400;600;700;800&display=swap');
 
+/* Base — Outfit for UI chrome only */
 *, body, .gradio-container {
     font-family: 'Outfit', sans-serif !important;
 }
@@ -345,62 +334,106 @@ body, .gradio-container {
     margin: 0 auto !important;
     padding: 16px !important;
 }
+
+/* Labels */
 label > span {
     color: #9333ea !important;
     font-size: 0.82em !important;
     font-weight: 700 !important;
     letter-spacing: 0.8px !important;
     text-transform: uppercase !important;
+    font-family: 'Outfit', sans-serif !important;
 }
+
+/* Textarea — Lateef font, large size */
 textarea {
     background: #130825 !important;
     border: 1px solid #6d28d960 !important;
     border-radius: 14px !important;
     color: #e2e8f0 !important;
-    font-size: 1.15em !important;
+    font-size: 1.4em !important;
     direction: rtl !important;
     font-family: 'Lateef', 'Scheherazade New', serif !important;
     caret-color: #c084fc !important;
-    line-height: 2em !important;
+    line-height: 2.2em !important;
+    padding: 14px 16px !important;
 }
 textarea:focus {
     border-color: #c084fc !important;
     box-shadow: 0 0 0 3px #7c3aed15 !important;
     outline: none !important;
 }
+textarea::placeholder {
+    color: #4c1d95 !important;
+    font-family: 'Lateef', 'Scheherazade New', serif !important;
+    font-size: 1em !important;
+}
+
+/* Search button */
 button.primary {
     background: linear-gradient(135deg, #6d28d9, #9333ea, #c084fc) !important;
     border: none !important;
     border-radius: 12px !important;
     color: #fff !important;
     font-weight: 800 !important;
-    font-size: 0.95em !important;
+    font-size: 1em !important;
+    font-family: 'Lateef', 'Scheherazade New', serif !important;
     letter-spacing: 0.5px !important;
     transition: all 0.3s ease !important;
-    padding: 13px !important;
+    padding: 14px !important;
     width: 100% !important;
+    margin-top: 8px !important;
 }
 button.primary:hover {
     box-shadow: 0 6px 24px #7c3aed50 !important;
     transform: translateY(-1px) !important;
 }
-.examples-holder, .examples table {
+
+/* Examples — below button, clean look */
+.examples-holder {
+    background: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+    margin-top: 10px !important;
+}
+.examples-holder > .label-wrap {
+    display: none !important;
+}
+.examples table {
     background: #130825 !important;
     border: 1px solid #6d28d930 !important;
     border-radius: 10px !important;
-    margin-top: 0 !important;
+    width: 100% !important;
+}
+.examples table thead {
+    display: none !important;
 }
 .examples table td {
     color: #94a3b8 !important;
     font-family: 'Lateef', 'Scheherazade New', serif !important;
-    font-size: 1em !important;
+    font-size: 1.15em !important;
     direction: rtl !important;
+    text-align: right !important;
+    padding: 8px 14px !important;
+    border-bottom: 1px solid #1e1040 !important;
+}
+.examples table tr:last-child td {
+    border-bottom: none !important;
 }
 .examples table tr:hover td {
     color: #c084fc !important;
     background: #1a0533 !important;
     cursor: pointer !important;
 }
+
+/* File download */
+.file-preview {
+    background: #130825 !important;
+    border: 1px solid #6d28d940 !important;
+    border-radius: 10px !important;
+}
+
+/* Scrollbar */
 ::-webkit-scrollbar { width: 5px; }
 ::-webkit-scrollbar-track { background: #08081a; }
 ::-webkit-scrollbar-thumb { background: #6d28d9; border-radius: 3px; }
@@ -410,7 +443,7 @@ HEADER = """
 <div style="
     background:linear-gradient(135deg,#1a0533 0%,#0f0f2e 60%,#160a2e 100%);
     border:1px solid #7c3aed25;border-radius:20px;
-    padding:32px 28px 24px;margin-bottom:20px;
+    padding:28px 28px 22px;margin-bottom:20px;
     text-align:center;position:relative;overflow:hidden;">
     <div style="
         position:absolute;top:0;left:0;right:0;bottom:0;
@@ -425,7 +458,7 @@ HEADER = """
             سنڌي اسمن جي سڃاڻپ
         </h1>
         <p style="
-            font-family:'Outfit',monospace;
+            font-family:'Outfit',sans-serif;
             color:#6d28d9;font-size:0.72em;
             letter-spacing:3px;margin:0;">
             SINDHI NAMED ENTITY RECOGNITION
@@ -434,7 +467,6 @@ HEADER = """
 </div>
 """
 
-
 EXAMPLES = [
     ["شيخ اياز شڪارپور ۾ پيدا ٿيو"],
     ["يونيورسٽي آف سنڌ حيدرآباد ۾ آھي"],
@@ -450,7 +482,7 @@ with gr.Blocks(css=CSS, title="سنڌي NER") as demo:
     gr.HTML(HEADER)
 
     with gr.Row():
-        # ── Left: input + examples + button ──────────
+        # ── Left column: input → button → examples ──
         with gr.Column(scale=3):
             inp = gr.Textbox(
                 label="سنڌي جملو لکو",
@@ -458,27 +490,28 @@ with gr.Blocks(css=CSS, title="سنڌي NER") as demo:
                 lines=4,
                 rtl=True
             )
-            # Examples inside the same column, above button
+            btn = gr.Button("🔍  ڳوليو", variant="primary")
+
+            # Examples BELOW button
             gr.Examples(
-                label="مثالي جملا",
                 examples=EXAMPLES,
                 inputs=inp,
+                label=None,
             )
-            btn = gr.Button("🔍  ڳوليو", variant="primary")
 
-        # ── Right: summary ────────────────────────────
+        # ── Right column: summary ────────────────────
         with gr.Column(scale=2):
             summary_out = gr.HTML(value=_empty_summary())
 
     gr.HTML("<div style='height:6px'></div>")
 
-    # Highlighted result
+    # Highlighted output
     highlighted_out = gr.HTML(value=_empty_html())
 
     # Confidence bars
     conf_out = gr.HTML()
 
-    # Legend — hidden until search runs
+    # Legend — hidden until search, no header text
     legend_out = gr.HTML(visible=False)
 
     # CSV download
@@ -496,6 +529,7 @@ with gr.Blocks(css=CSS, title="سنڌي NER") as demo:
     </div>
     """)
 
+    # Wire up both click and enter
     btn.click(
         fn=predict_ner,
         inputs=inp,