Upload app.py with huggingface_hub

app.py

@@ -161,28 +161,28 @@ def _result_card(best, best_txt, ranked_lbl, ranked_idx, probs, options, model_r
         pct = probs[i] * 100
         col = colors[r % len(colors)]
         rows += f"""
-        <div style="display:flex;align-items:center;gap:12px;margin:8px 0;padding:10px 14px;
+        <div style="display:flex;align-items:center;gap:14px;margin:10px 0;padding:12px 18px;
                     background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);
                     border-radius:10px;">
-          <span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:#64748b;
-                       font-weight:700;width:20px;">{medals[r]}</span>
-          <span style="width:24px;height:24px;border-radius:6px;background:{col}22;
+          <span style="font-family:'JetBrains Mono',monospace;font-size:12px;color:#64748b;
+                       font-weight:700;width:24px;">{medals[r]}</span>
+          <span style="width:28px;height:28px;border-radius:8px;background:{col}22;
                        border:1px solid {col}88;display:flex;align-items:center;justify-content:center;
-                       font-weight:900;color:{col};font-size:12px;font-family:'JetBrains Mono',monospace;">{OPTION_LABELS[i]}</span>
-          <div style="flex:1;background:#0d1424;border-radius:6px;height:24px;
+                       font-weight:900;color:{col};font-size:13px;font-family:'JetBrains Mono',monospace;">{OPTION_LABELS[i]}</span>
+          <div style="flex:1;background:#0d1424;border-radius:6px;height:28px;
                       overflow:hidden;border:1px solid rgba(255,255,255,0.08);">
             <div style="width:{pct:.1f}%;background:linear-gradient(90deg,{col}dd,{col}66);
                         height:100%;border-radius:6px;display:flex;align-items:center;
-                        padding-left:10px;min-width:2px;transition:width 0.8s ease;">
-              <span style="color:#ffffff;font-size:11px;font-weight:800;
+                        padding-left:12px;min-width:2px;transition:width 0.8s ease;">
+              <span style="color:#ffffff;font-size:12px;font-weight:800;
                            font-family:'JetBrains Mono',monospace;white-space:nowrap;
                            text-shadow:0 1px 2px rgba(0,0,0,0.8);">{pct:.1f}%</span>
             </div>
           </div>
-          <span style="color:#94a3b8;font-size:11px;width:110px;text-align:right;
+          <span style="color:#cbd5e1;font-size:13px;width:200px;text-align:right;
                        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
-                       font-family:'Inter',sans-serif;font-weight:500;">
-            {options[i][:22]}
+                       font-family:'Inter',sans-serif;font-weight:600;">
+            {options[i]}
           </span>
         </div>"""
 
@@ -200,10 +200,10 @@ def _result_card(best, best_txt, ranked_lbl, ranked_idx, probs, options, model_r
     <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
       <div style="font-size:11px;font-family:'JetBrains Mono',monospace;color:#94a3b8;
                   font-weight:700;letter-spacing:2px;text-transform:uppercase;">
-        MODEL PREDICTION
+        MODEL PREDICTION RESULT
       </div>
       <span style="background:rgba(0,245,212,0.15);border:1px solid rgba(0,245,212,0.4);
-                   color:#00f5d4;border-radius:6px;padding:4px 12px;font-size:10px;font-weight:800;
+                   color:#00f5d4;border-radius:6px;padding:4px 12px;font-size:11px;font-weight:800;
                    font-family:JetBrains Mono,monospace;letter-spacing:1px;">🤗 {model_repo}</span>
     </div>
     <!-- Answer -->
@@ -214,12 +214,12 @@ def _result_card(best, best_txt, ranked_lbl, ranked_idx, probs, options, model_r
                 -webkit-background-clip:text;-webkit-text-fill-color:transparent;
                 margin-bottom:14px;letter-spacing:-0.5px;">Option {best}</div>
     <div style="background:rgba(0,245,212,0.06);border:1px solid rgba(0,245,212,0.2);
-                border-radius:10px;padding:12px 16px;">
-      <div style="font-size:10px;color:#00f5d4;font-family:'JetBrains Mono',monospace;
+                border-radius:10px;padding:14px 18px;">
+      <div style="font-size:11px;color:#00f5d4;font-family:'JetBrains Mono',monospace;
                   font-weight:700;margin-bottom:4px;letter-spacing:1px;">// SELECTED ANSWER TEXT</div>
-      <div style="color:#f8fafc;font-size:15px;line-height:1.5;font-weight:500;">"{best_txt}"</div>
+      <div style="color:#f8fafc;font-size:16px;line-height:1.5;font-weight:600;">"{best_txt}"</div>
     </div>
-    <div style="margin-top:12px;font-size:10px;color:#818cf8;font-family:'JetBrains Mono',monospace;">
+    <div style="margin-top:12px;font-size:11px;color:#818cf8;font-family:'JetBrains Mono',monospace;">
       {inference_source}
     </div>
   </div>
@@ -260,7 +260,7 @@ EXAMPLES = [
      "Batch normalization reducing gradient flow"],
 ]
 
-# ── CSS Theme System ─────────────────────��────────────────────────────────────
+# ── CSS Theme System (Full-Width Responsive UI) ──────────────────────────────
 CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700;800&display=swap');
 
@@ -287,18 +287,20 @@ html, body {
     margin: 0 !important;
     padding: 0 !important;
     width: 100% !important;
+    max-width: 100% !important;
     background: #070a12 !important;
     color: #f8fafc !important;
     font-family: 'Inter', sans-serif !important;
 }
 
-.gradio-container {
+.gradio-container, .gradio-container-5-16-0, [class*="gradio-container"] {
     max-width: 100% !important;
     width: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
     min-height: 100vh !important;
     background: #070a12 !important;
+    box-sizing: border-color !important;
 }
 
 .gradio-container::before {
@@ -313,7 +315,7 @@ html, body {
     z-index: 0;
 }
 
-.main, .contain {
+.main, .contain, #root, div[class*="gradio-container"] > div {
     max-width: 100% !important;
     width: 100% !important;
     padding: 0 !important;
@@ -324,10 +326,11 @@ html, body {
 .tab-nav {
     background: #070a12 !important;
     border-bottom: 1px solid rgba(0, 245, 212, 0.2) !important;
-    padding: 0 40px !important;
+    padding: 0 30px !important;
     position: sticky !important;
     top: 0 !important;
     z-index: 100 !important;
+    width: 100% !important;
 }
 .tab-nav button {
     color: #94a3b8 !important;
@@ -352,6 +355,12 @@ html, body {
     background: transparent !important;
 }
 
+.tabitem {
+    padding: 20px 30px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+}
+
 .block, .form, .gr-group, .gr-box,
 [data-testid="block"], [data-testid="group"],
 [class*="block"], [class*="group"], [class*="panel"],
@@ -486,24 +495,27 @@ details[open] summary {
 }
 details[open] summary span { color: #00f5d4 !important; }
 
-.examples, [data-testid="examples"] {
+/* ── Full-Width Readable Table Formatting ───────────────────────────────────── */
+.examples, [data-testid="examples"], .table-container {
     background: #0d1424 !important;
-    border: 1px solid rgba(0, 245, 212, 0.2) !important;
-    border-radius: 14px !important;
+    border: 1px solid rgba(0, 245, 212, 0.25) !important;
+    border-radius: 16px !important;
     overflow: hidden !important;
-    margin-top: 14px !important;
+    margin-top: 24px !important;
+    width: 100% !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
 }
 .examples .label, [data-testid="examples"] > span {
     color: #00f5d4 !important;
     font-family: 'JetBrains Mono', monospace !important;
-    font-size: 11px !important;
-    font-weight: 700 !important;
-    letter-spacing: 1.5px !important;
+    font-size: 12px !important;
+    font-weight: 800 !important;
+    letter-spacing: 2px !important;
     text-transform: uppercase !important;
-    padding: 12px 16px !important;
+    padding: 16px 24px !important;
     display: block !important;
-    background: rgba(0, 245, 212, 0.05) !important;
-    border-bottom: 1px solid rgba(0, 245, 212, 0.15) !important;
+    background: rgba(0, 245, 212, 0.08) !important;
+    border-bottom: 1px solid rgba(0, 245, 212, 0.2) !important;
 }
 table {
     width: 100% !important;
@@ -511,6 +523,7 @@ table {
     font-family: 'Inter', sans-serif !important;
     font-size: 13px !important;
     background: #0d1424 !important;
+    table-layout: auto !important;
 }
 thead tr {
     background: #111a2e !important;
@@ -519,18 +532,21 @@ thead th {
     color: #00f5d4 !important;
     font-family: 'JetBrains Mono', monospace !important;
     font-size: 11px !important;
-    font-weight: 700 !important;
-    letter-spacing: 1px !important;
+    font-weight: 800 !important;
+    letter-spacing: 1.5px !important;
     text-transform: uppercase !important;
-    padding: 12px 14px !important;
-    border-bottom: 1px solid rgba(0, 245, 212, 0.2) !important;
+    padding: 14px 18px !important;
+    border-bottom: 1px solid rgba(0, 245, 212, 0.25) !important;
     text-align: left !important;
+    white-space: nowrap !important;
 }
 tbody td {
     color: #e2e8f0 !important;
-    padding: 12px 14px !important;
+    padding: 14px 18px !important;
     border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
     background: transparent !important;
+    line-height: 1.5 !important;
+    vertical-align: middle !important;
 }
 tbody tr:hover td {
     background: rgba(0, 245, 212, 0.08) !important;
@@ -590,21 +606,21 @@ TOPBAR = f"""
   <div style="width:4px;background:linear-gradient(180deg,#00f5d4 0%,#818cf8 100%);flex-shrink:0;"></div>
 
   <div style="flex:1;display:flex;align-items:center;justify-content:space-between;
-              padding:18px 40px;gap:24px;flex-wrap:wrap;">
+              padding:18px 30px;gap:24px;flex-wrap:wrap;">
 
     <div style="display:flex;align-items:center;gap:14px;">
-      <div style="width:40px;height:40px;background:linear-gradient(135deg,#00f5d4,#818cf8);
+      <div style="width:42px;height:42px;background:linear-gradient(135deg,#00f5d4,#818cf8);
                   border-radius:10px;display:flex;align-items:center;justify-content:center;
-                  font-size:20px;box-shadow:0 0 20px rgba(0,245,212,0.4);">🧠</div>
+                  font-size:22px;box-shadow:0 0 20px rgba(0,245,212,0.4);">🧠</div>
       <div>
-        <div style="font-size:18px;font-weight:900;font-family:'Inter',sans-serif;
+        <div style="font-size:20px;font-weight:900;font-family:'Inter',sans-serif;
                     background:linear-gradient(90deg,#00f5d4,#c7d2fe);
                     -webkit-background-clip:text;-webkit-text-fill-color:transparent;
                     letter-spacing:-0.5px;">
-          Multi-Model DeBERTa · MCQ Solver
+          Multi-Model DeBERTa · Smart MCQ Solver
         </div>
-        <div style="font-size:10px;color:#94a3b8;letter-spacing:2px;text-transform:uppercase;
-                    margin-top:2px;">Shitanshu06 Models (mcq-deberta-v3-large &amp; mcq-deberta-v3-best-v2)</div>
+        <div style="font-size:11px;color:#94a3b8;letter-spacing:2px;text-transform:uppercase;
+                    margin-top:2px;">Fine-Tuned PyTorch Models (mcq-deberta-v3-large &amp; mcq-deberta-v3-best-v2)</div>
       </div>
     </div>
 
@@ -635,55 +651,6 @@ TOPBAR = f"""
 </div>
 """
 
-MODEL_STATS = """
-<div style="font-family:'JetBrains Mono',monospace;">
-
-  <div style="background:#0d1424;border:1px solid rgba(0,245,212,0.2);
-              border-radius:14px;padding:18px;margin-bottom:14px;">
-    <div style="font-size:11px;color:#00f5d4;font-weight:800;letter-spacing:2px;
-                text-transform:uppercase;margin-bottom:12px;">MODEL METADATA</div>
-    <div style="display:flex;flex-direction:column;gap:8px;font-size:12px;">
-      <div style="display:flex;justify-content:space-between;padding-bottom:6px;
-                  border-bottom:1px solid rgba(255,255,255,0.06);">
-        <span style="color:#94a3b8;">Large Model</span>
-        <span style="color:#00f5d4;font-weight:700;">mcq-deberta-v3-large</span>
-      </div>
-      <div style="display:flex;justify-content:space-between;padding-bottom:6px;
-                  border-bottom:1px solid rgba(255,255,255,0.06);">
-        <span style="color:#94a3b8;">Base Model</span>
-        <span style="color:#818cf8;font-weight:700;">mcq-deberta-v3-best-v2</span>
-      </div>
-      <div style="display:flex;justify-content:space-between;padding-bottom:6px;
-                  border-bottom:1px solid rgba(255,255,255,0.06);">
-        <span style="color:#94a3b8;">Task Head</span>
-        <span style="color:#f8fafc;font-weight:600;">SequenceClassification</span>
-      </div>
-      <div style="display:flex;justify-content:space-between;padding-top:4px;">
-        <span style="color:#94a3b8;">Validation MAP@3</span>
-        <span style="color:#00f5d4;font-weight:800;">1.0000 ✓</span>
-      </div>
-    </div>
-  </div>
-
-  <div style="display:flex;flex-direction:column;gap:8px;">
-    <a href="https://huggingface.co/spaces/Shitanshu06/smart-mcq-solver" target="_blank"
-       style="display:flex;align-items:center;justify-content:space-between;
-              background:#131c31;border:1px solid rgba(0,245,212,0.3);
-              border-radius:10px;padding:10px 14px;text-decoration:none;">
-      <span style="font-size:12px;color:#00f5d4;font-weight:800;">🚀 Live HF Space</span>
-      <span style="color:#00f5d4;font-size:14px;">↗</span>
-    </a>
-    <a href="https://huggingface.co/Shitanshu06" target="_blank"
-       style="display:flex;align-items:center;justify-content:space-between;
-              background:#131c31;border:1px solid rgba(255,255,255,0.08);
-              border-radius:10px;padding:10px 14px;text-decoration:none;">
-      <span style="font-size:12px;color:#f8fafc;font-weight:700;">🤗 Shitanshu06 HuggingFace</span>
-      <span style="color:#00f5d4;font-size:14px;">↗</span>
-    </a>
-  </div>
-</div>
-"""
-
 with gr.Blocks(
     title="Smart MCQ Solver — DeBERTa-v3-large",
     theme=gr.themes.Base(),
@@ -695,12 +662,12 @@ with gr.Blocks(
     with gr.Tabs():
 
         with gr.TabItem("🔍  PREDICT & SOLVE"):
-            with gr.Row(equal_height=False):
 
-                with gr.Column(scale=2, min_width=280):
-                    gr.HTML(MODEL_STATS)
+            # ── Main 2-Column Dashboard Split ─────────────────────────────────
+            with gr.Row(equal_height=False):
 
-                with gr.Column(scale=5):
+                # ── Left Column: Inputs & Model Selector ──────────────────────
+                with gr.Column(scale=6):
 
                     with gr.Group():
                         gr.Markdown("#### 🤖 MODEL SELECTION")
@@ -734,27 +701,21 @@ with gr.Blocks(
                         pred_btn  = gr.Button("🔍  PREDICT ANSWER", variant="primary", size="lg", elem_id="pred_btn")
                         clear_btn = gr.Button("✕  CLEAR FIELDS", size="lg", elem_id="clear_btn")
 
-                    gr.Examples(
-                        examples=EXAMPLES,
-                        inputs=[prompt_in, opt_a, opt_b, opt_c, opt_d, opt_e],
-                        label="⚡ QUICK LOAD EXAMPLE CASES — CLICK ANY ROW TO AUTO-FILL",
-                        cache_examples=False,
-                    )
-
-                with gr.Column(scale=4):
-                    gr.Markdown("#### 📊 PREDICTION OUTPUT")
+                # ── Right Column: Outputs & Live Visualization ────────────────
+                with gr.Column(scale=6):
+                    gr.Markdown("#### 📊 PREDICTION OUTPUT & ANALYTICS")
 
                     result_html = gr.HTML(
                         value="""
-<div style="height:260px;display:flex;align-items:center;justify-content:center;
+<div style="height:280px;display:flex;align-items:center;justify-content:center;
             border:1px dashed rgba(0,245,212,0.3);border-radius:16px;
             background:#0d1424;font-family:'JetBrains Mono',monospace;">
   <div style="text-align:center;color:#94a3b8;">
-    <div style="font-size:36px;margin-bottom:10px;">🎯</div>
-    <div style="font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#00f5d4;">
+    <div style="font-size:42px;margin-bottom:12px;">🎯</div>
+    <div style="font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#00f5d4;">
       AWAITING_MODEL_INFERENCE
     </div>
-    <div style="font-size:12px;margin-top:6px;color:#94a3b8;">
+    <div style="font-size:12px;margin-top:8px;color:#94a3b8;">
       Enter question &amp; options then click Predict Answer
     </div>
   </div>
@@ -775,6 +736,16 @@ with gr.Blocks(
                         elem_id="prob_out",
                     )
 
+            # ── Full-Width Bottom Row: Long Examples Table ─────────────────────
+            with gr.Row():
+                with gr.Column(scale=12):
+                    gr.Examples(
+                        examples=EXAMPLES,
+                        inputs=[prompt_in, opt_a, opt_b, opt_c, opt_d, opt_e],
+                        label="⚡ QUICK LOAD EXAMPLE CASES — CLICK ANY ROW BELOW TO AUTO-FILL",
+                        cache_examples=False,
+                    )
+
         with gr.TabItem("🧪  TEST SUITE"):
             gr.HTML("""
 <div style="font-family:'JetBrains Mono',monospace;padding:16px 20px;">
@@ -822,7 +793,7 @@ with gr.Blocks(
         with gr.TabItem("ℹ️  ABOUT MODEL & PROJECT"):
             gr.HTML("""
 <div style="font-family:'Inter',sans-serif;padding:24px 32px;
-            display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;max-width:1400px;">
+            display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;max-width:100%;">
 
   <div style="background:#0d1424;border:1px solid rgba(0,245,212,0.2);
               border-radius:16px;padding:24px;">
@@ -877,15 +848,15 @@ with gr.Blocks(
     clear_btn.click(
         fn=lambda: (
             "", "", "", "", "", "",
-            """<div style="height:260px;display:flex;align-items:center;justify-content:center;
+            """<div style="height:280px;display:flex;align-items:center;justify-content:center;
                 border:1px dashed rgba(0,245,212,0.3);border-radius:16px;
                 background:#0d1424;font-family:'JetBrains Mono',monospace;">
               <div style="text-align:center;color:#94a3b8;">
-                <div style="font-size:36px;margin-bottom:10px;">🎯</div>
-                <div style="font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#00f5d4;">
+                <div style="font-size:42px;margin-bottom:12px;">🎯</div>
+                <div style="font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#00f5d4;">
                   AWAITING_MODEL_INFERENCE
                 </div>
-                <div style="font-size:12px;margin-top:6px;color:#94a3b8;">
+                <div style="font-size:12px;margin-top:8px;color:#94a3b8;">
                   Enter question &amp; options then click Predict Answer
                 </div>
               </div>