Upload app.py with huggingface_hub

app.py

@@ -1,12 +1,13 @@
 import gradio as gr
 import numpy as np
 import torch
+import torch.nn.functional as F
 from transformers import AutoTokenizer, AutoModelForMultipleChoice
 
 # ── Config ──────────────────────────────────────────────────────────────────
 HF_MODEL_REPO = "Shitanshu06/mcq-deberta-v3-best-v2"
 OPTION_LABELS = ["A", "B", "C", "D", "E"]
-MAX_LENGTH = 192
+MAX_LENGTH = 256
 
 # ── Model loader (cached globally) ──────────────────────────────────────────
 _model = None
@@ -14,98 +15,42 @@ _tokenizer = None
 _device = None
 
 
-def load_model():
+def load_model(force_reload=False):
     global _model, _tokenizer, _device
-    if _model is None:
+    if _model is None or force_reload:
         _device = "cuda" if torch.cuda.is_available() else "cpu"
+        print(f"Loading tokenizer & model from '{HF_MODEL_REPO}' on {_device}...")
         _tokenizer = AutoTokenizer.from_pretrained(HF_MODEL_REPO)
         _model = AutoModelForMultipleChoice.from_pretrained(HF_MODEL_REPO)
         _model.to(_device)
         _model.eval()
+        print("Model loaded successfully!")
     return _model, _tokenizer, _device
 
 
-# ── Example Questions ────────────────────────────────────────────────────────
-EXAMPLES = [
-    {
-        "label": "🔬 Biology — Cell Organelle",
-        "question": "Which organelle is responsible for producing energy in the form of ATP through cellular respiration?",
-        "A": "Nucleus",
-        "B": "Ribosome",
-        "C": "Mitochondria",
-        "D": "Golgi apparatus",
-        "E": "Endoplasmic reticulum",
-    },
-    {
-        "label": "🧪 Chemistry — Periodic Table",
-        "question": "Which element has the highest electronegativity on the Pauling scale?",
-        "A": "Oxygen",
-        "B": "Chlorine",
-        "C": "Nitrogen",
-        "D": "Fluorine",
-        "E": "Bromine",
-    },
-    {
-        "label": "📐 Mathematics — Calculus",
-        "question": "What is the derivative of sin(x) with respect to x?",
-        "A": "-sin(x)",
-        "B": "cos(x)",
-        "C": "-cos(x)",
-        "D": "tan(x)",
-        "E": "sec²(x)",
-    },
-    {
-        "label": "💻 Computer Science — Data Structures",
-        "question": "Which data structure follows the Last-In-First-Out (LIFO) principle?",
-        "A": "Queue",
-        "B": "Linked List",
-        "C": "Stack",
-        "D": "Binary Tree",
-        "E": "Hash Table",
-    },
-    {
-        "label": "🌍 Geography — World Capitals",
-        "question": "Which city serves as the capital of Australia?",
-        "A": "Sydney",
-        "B": "Melbourne",
-        "C": "Brisbane",
-        "D": "Canberra",
-        "E": "Perth",
-    },
-    {
-        "label": "⚛️ Physics — Thermodynamics",
-        "question": "According to the second law of thermodynamics, which quantity always increases in an isolated system?",
-        "A": "Temperature",
-        "B": "Pressure",
-        "C": "Entropy",
-        "D": "Enthalpy",
-        "E": "Internal energy",
-    },
-]
-
-
 # ── Inference ────────────────────────────────────────────────────────────────
 @torch.no_grad()
 def predict(prompt, opt_a, opt_b, opt_c, opt_d, opt_e):
     options = [opt_a, opt_b, opt_c, opt_d, opt_e]
 
-    if not prompt.strip():
+    if not prompt or not prompt.strip():
         return (
-            "⚠️ Please enter a question.",
-            "",
-            {lb: 0.0 for lb in OPTION_LABELS},
+            "⚠️ **Please enter a question.**",
+            "N/A",
+            {lb: 0.20 for lb in OPTION_LABELS},
         )
-    if not all(o.strip() for o in options):
+    if not all(o and o.strip() for o in options):
         return (
-            "⚠️ Please fill in all 5 options.",
-            "",
-            {lb: 0.0 for lb in OPTION_LABELS},
+            "⚠️ **Please fill in all 5 options (A, B, C, D, E).**",
+            "N/A",
+            {lb: 0.20 for lb in OPTION_LABELS},
         )
 
     model, tokenizer, device = load_model()
 
+    # Pair prompt with each option
     encoded = tokenizer(
-        [prompt] * len(options),
+        [prompt] * 5,
         options,
         truncation=True,
         padding="max_length",
@@ -113,285 +58,255 @@ def predict(prompt, opt_a, opt_b, opt_c, opt_d, opt_e):
         return_tensors="pt",
     )
     inputs = {k: v.unsqueeze(0).to(device) for k, v in encoded.items()}
-    logits = model(**inputs).logits
-    probs = torch.softmax(logits, dim=1).cpu().numpy()[0]
+    
+    outputs = model(**inputs)
+    probs = F.softmax(outputs.logits, dim=1).cpu().numpy()[0]
 
     ranked_idx = np.argsort(probs)[::-1]
     ranked_labels = [OPTION_LABELS[i] for i in ranked_idx]
 
     top3_str = " → ".join(ranked_labels[:3])
-    best = ranked_labels[0]
-    best_prob = probs[ranked_idx[0]] * 100
-
-    prediction_str = (
-        f"## ✅ Predicted Answer: **{best}**\n\n"
-        f"**Confidence:** {best_prob:.1f}%\n\n"
-        f"**Top-3 Ranking (MAP@3):** `{top3_str}`"
-    )
-
-    prob_dict = {OPTION_LABELS[i]: float(probs[i]) for i in range(5)}
-
-    return prediction_str, top3_str, prob_dict
+    best_idx = ranked_idx[0]
+    best_label = OPTION_LABELS[best_idx]
+    best_text = options[best_idx]
+    best_prob = probs[best_idx] * 100
+
+    prediction_markdown = f"""### 🏆 Predicted Answer: **Option {best_label}** — *{best_text}*
+    
+**Confidence:** `{best_prob:.1f}%`  
+**Top-3 Order (MAP@3):** `{top3_str}`
+"""
 
+    prob_dict = {
+        f"Option {OPTION_LABELS[i]} ({options[i][:25]}...)": float(probs[i])
+        for i in range(5)
+    }
 
-def load_example(evt: gr.SelectData, examples_state):
-    ex = examples_state[evt.index]
-    return ex["question"], ex["A"], ex["B"], ex["C"], ex["D"], ex["E"]
+    return prediction_markdown, top3_str, prob_dict
 
 
-# ── CSS ───────────────────────────────────────────────────────────────────────
+# ── High-Contrast Readable CSS ────────────────────────────────────────────────
 CUSTOM_CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
 
 * { font-family: 'Inter', sans-serif !important; }
 
-/* ── Page background ── */
+/* Main Container */
 .gradio-container {
-    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #0f0c29 100%) !important;
-    min-height: 100vh;
+    background: #0f172a !important;
+    color: #f8fafc !important;
 }
 
-/* ── Hero banner ── */
+/* Hero Header Banner */
 #hero-banner {
-    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
+    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #0284c7 100%);
     border-radius: 16px;
-    padding: 28px 32px;
-    margin-bottom: 8px;
+    padding: 24px 32px;
+    margin-bottom: 16px;
     text-align: center;
-    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
+    box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4);
 }
 #hero-banner h1 {
-    font-size: 2rem !important;
-    font-weight: 700 !important;
-    color: white !important;
+    font-size: 2.2rem !important;
+    font-weight: 800 !important;
+    color: #ffffff !important;
     margin: 0 0 6px 0 !important;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
 }
 #hero-banner p {
-    color: rgba(255,255,255,0.85) !important;
-    font-size: 0.95rem !important;
+    color: #f1f5f9 !important;
+    font-size: 1rem !important;
     margin: 0 !important;
+    font-weight: 500;
 }
 
-/* ── Section cards ── */
+/* Card Containers */
 .section-card {
-    background: rgba(255,255,255,0.04) !important;
-    border: 1px solid rgba(255,255,255,0.10) !important;
+    background: #1e293b !important;
+    border: 1px solid #334155 !important;
     border-radius: 14px !important;
     padding: 20px !important;
-    backdrop-filter: blur(12px);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
 }
 
-/* ── Labels ── */
-label span, .gr-form label {
-    color: #a5b4fc !important;
-    font-weight: 500 !important;
-    font-size: 0.85rem !important;
-    letter-spacing: 0.03em !important;
+/* All Headings & Labels - Readable High Contrast */
+h1, h2, h3, h4, h5, h6 {
+    color: #f8fafc !important;
+    font-weight: 700 !important;
+}
+.section-heading, .section-heading h3 {
+    color: #38bdf8 !important;
+    font-weight: 700 !important;
+    font-size: 1rem !important;
+    letter-spacing: 0.05em !important;
+    text-transform: uppercase !important;
 }
 
-/* ── Textboxes ── */
+/* Labels on Textboxes */
+label, label span, .gr-form label span {
+    color: #93c5fd !important;
+    font-weight: 600 !important;
+    font-size: 0.88rem !important;
+}
+
+/* Input Fields - Deep contrasting background with crisp white text */
 textarea, input[type="text"] {
-    background: rgba(15, 12, 41, 0.7) !important;
-    border: 1px solid rgba(99, 102, 241, 0.35) !important;
+    background-color: #0f172a !important;
+    border: 1.5px solid #475569 !important;
     border-radius: 10px !important;
-    color: #e2e8f0 !important;
-    transition: border-color 0.2s, box-shadow 0.2s !important;
+    color: #ffffff !important;
+    font-size: 0.95rem !important;
+    font-weight: 500 !important;
+    transition: all 0.2s ease !important;
 }
 textarea:focus, input[type="text"]:focus {
     border-color: #6366f1 !important;
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
-    outline: none !important;
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3) !important;
+    background-color: #1e1b4b !important;
 }
 
-/* ── Predict button ── */
+/* Predict Button */
 #predict-btn {
     background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
     border: none !important;
     border-radius: 12px !important;
-    color: white !important;
+    color: #ffffff !important;
     font-weight: 700 !important;
-    font-size: 1rem !important;
+    font-size: 1.05rem !important;
     padding: 14px !important;
-    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5) !important;
-    transition: transform 0.15s, box-shadow 0.15s !important;
-    letter-spacing: 0.04em !important;
+    box-shadow: 0 4px 18px rgba(99, 102, 241, 0.4) !important;
+    transition: all 0.2s ease !important;
+    cursor: pointer !important;
 }
 #predict-btn:hover {
     transform: translateY(-2px) !important;
-    box-shadow: 0 8px 28px rgba(99, 102, 241, 0.65) !important;
+    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6) !important;
 }
-#predict-btn:active { transform: translateY(0) !important; }
 
-/* ── Results markdown ── */
+/* Result Markdown Box */
 #result-box {
-    background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(6,182,212,0.10)) !important;
-    border: 1px solid rgba(16,185,129,0.3) !important;
+    background: rgba(16, 185, 129, 0.15) !important;
+    border: 1.5px solid #10b981 !important;
     border-radius: 12px !important;
-    padding: 18px 20px !important;
-    color: #d1fae5 !important;
-    font-size: 1rem !important;
-    min-height: 90px;
+    padding: 16px 20px !important;
+    color: #f0fdf4 !important;
+}
+#result-box h3 {
+    color: #4ade80 !important;
+    font-size: 1.2rem !important;
+    margin-top: 0 !important;
 }
-#result-box h2 { color: #6ee7b7 !important; }
 
-/* ── Confidence label widget ── */
-.gr-label {
-    background: rgba(255,255,255,0.03) !important;
-    border: 1px solid rgba(99,102,241,0.2) !important;
-    border-radius: 12px !important;
+/* Top 3 Box */
+#top3-box textarea {
+    background-color: #0c4a6e !important;
+    border-color: #0284c7 !important;
+    color: #7dd3fc !important;
+    font-size: 1.1rem !important;
+    font-weight: 700 !important;
+    text-align: center !important;
 }
 
-/* ── Examples gallery ── */
-#example-gallery .gallery-item {
-    background: rgba(99, 102, 241, 0.08) !important;
-    border: 1px solid rgba(99,102,241,0.25) !important;
-    border-radius: 10px !important;
-    color: #c7d2fe !important;
-    font-weight: 500 !important;
-    font-size: 0.83rem !important;
-    transition: background 0.2s, border-color 0.2s, transform 0.15s !important;
-    padding: 10px 14px !important;
-    cursor: pointer !important;
+/* Confidence Score Widget */
+.gr-label {
+    background: #0f172a !important;
+    border: 1px solid #334155 !important;
+    border-radius: 12px !important;
+    color: #ffffff !important;
 }
-#example-gallery .gallery-item:hover {
-    background: rgba(99, 102, 241, 0.22) !important;
-    border-color: #6366f1 !important;
-    transform: translateY(-2px) !important;
+.gr-label .label-item {
+    color: #ffffff !important;
 }
 
-/* ── Section headings ── */
-.section-heading {
-    color: #c7d2fe !important;
-    font-weight: 700 !important;
-    font-size: 0.95rem !important;
-    letter-spacing: 0.06em !important;
-    text-transform: uppercase !important;
-    margin-bottom: 10px !important;
+/* Helper Notes */
+#hint-text, #hint-text p, blockquote, blockquote p {
+    color: #cbd5e1 !important;
+    font-size: 0.85rem !important;
 }
 
-/* ── Footer ── */
-footer { display: none !important; }
-
-/* ── Top-3 textbox ── */
-#top3-box textarea {
-    background: rgba(6,182,212,0.08) !important;
-    border-color: rgba(6,182,212,0.3) !important;
-    color: #67e8f9 !important;
-    font-weight: 600 !important;
-    text-align: center !important;
+/* Native Examples Table */
+.gr-examples {
+    background: #1e293b !important;
+    border: 1px solid #334155 !important;
+    border-radius: 14px !important;
+    padding: 16px !important;
+    margin-top: 16px !important;
+}
+.gr-examples table {
+    color: #e2e8f0 !important;
+}
+.gr-examples tr:hover {
+    background: #334155 !important;
+    cursor: pointer !important;
 }
 """
 
-# ── Hero HTML ─────────────────────────────────────────────────────────────────
+# ── Header HTML ───────────────────────────────────────────────────────────────
 HERO_HTML = """
 <div id="hero-banner">
   <h1>🧠 Smart MCQ Solver</h1>
-  <p>Powered by <strong>DeBERTa-v3</strong> fine-tuned on academic MCQ datasets &nbsp;·&nbsp;
-     IIT Madras BS Data Science — DL &amp; GenAI Project (T2-2026)</p>
+  <p>DeBERTa-v3 Multiple Choice Question Answering &nbsp;·&nbsp; IIT Madras BS DS Project</p>
 </div>
 """
 
-# ── Build UI ──────────────────────────────────────────────────────────────────
+# ── Build Gradio App ──────────────────────────────────────────────────────────
 with gr.Blocks(
     title="Smart MCQ Solver — DeBERTa-v3",
     css=CUSTOM_CSS,
 ) as demo:
 
-    # Hidden state holding examples list
-    examples_state = gr.State(EXAMPLES)
-
-    # Hero
     gr.HTML(HERO_HTML)
 
-    # ── Example picker ────────────────────────────────────────────────────────
-    with gr.Group(elem_classes=["section-card"]):
-        gr.Markdown("### 💡 Quick Examples — click any card to auto-fill", elem_classes=["section-heading"])
-        example_gallery = gr.Dataset(
-            components=["text"],
-            samples=[[ex["label"]] for ex in EXAMPLES],
-            label="",
-            elem_id="example-gallery",
-            samples_per_page=6,
-        )
-
-    gr.HTML("<div style='height:12px'></div>")
-
-    # ── Main body ─────────────────────────────────────────────────────────────
-    with gr.Row(equal_height=False):
-
-        # Left — Input
+    with gr.Row():
+        # Left Column — Question & Options Input
         with gr.Column(scale=3, elem_classes=["section-card"]):
-            gr.Markdown("### 📝 Question & Options", elem_classes=["section-heading"])
+            gr.Markdown("### 📝 QUESTION & OPTIONS", elem_classes=["section-heading"])
 
             prompt_input = gr.Textbox(
                 label="Question / Prompt",
-                placeholder="Type or paste your MCQ question here...",
+                placeholder="Enter your multiple-choice question here...",
                 lines=3,
                 elem_id="prompt",
             )
 
             with gr.Row():
-                opt_a = gr.Textbox(label="Option A", placeholder="Option A", elem_id="opt_a")
-                opt_b = gr.Textbox(label="Option B", placeholder="Option B", elem_id="opt_b")
+                opt_a = gr.Textbox(label="Option A", placeholder="First choice", elem_id="opt_a")
+                opt_b = gr.Textbox(label="Option B", placeholder="Second choice", elem_id="opt_b")
 
             with gr.Row():
-                opt_c = gr.Textbox(label="Option C", placeholder="Option C", elem_id="opt_c")
-                opt_d = gr.Textbox(label="Option D", placeholder="Option D", elem_id="opt_d")
+                opt_c = gr.Textbox(label="Option C", placeholder="Third choice", elem_id="opt_c")
+                opt_d = gr.Textbox(label="Option D", placeholder="Fourth choice", elem_id="opt_d")
 
-            opt_e = gr.Textbox(label="Option E", placeholder="Option E", elem_id="opt_e")
+            opt_e = gr.Textbox(label="Option E", placeholder="Fifth choice", elem_id="opt_e")
 
             predict_btn = gr.Button("🔍 Predict Answer", variant="primary", size="lg", elem_id="predict-btn")
 
-        # Right — Results
+        # Right Column — Model Predictions & Confidence Scores
         with gr.Column(scale=2, elem_classes=["section-card"]):
-            gr.Markdown("### 📊 Model Output", elem_classes=["section-heading"])
+            gr.Markdown("### 📊 MODEL OUTPUT", elem_classes=["section-heading"])
 
             prediction_out = gr.Markdown(
-                value="*Run the model to see results here.*",
-                label="Prediction",
+                value="*Select an example below or enter a question and click Predict Answer.*",
                 elem_id="result-box",
             )
 
             top3_out = gr.Textbox(
-                label="Top-3 Ranking  (MAP@3 order)",
+                label="Top-3 Ranking (MAP@3 Order)",
                 interactive=False,
                 elem_id="top3-box",
             )
 
             prob_out = gr.Label(
-                label="Confidence Scores — all 5 options",
+                label="Confidence Scores — All 5 Options",
                 num_top_classes=5,
             )
 
             gr.Markdown(
-                """
-> **How to read:** The bar chart shows normalised probabilities across all 5 options.  
-> A higher bar means the model is more confident about that choice.
-""",
+                "> **Note:** Probabilities are calculated using softmax logits from `DebertaV2ForMultipleChoice`.",
                 elem_id="hint-text",
             )
 
-    # ── Footer info ───────────────────────────────────────────────────────────
-    gr.HTML("""
-    <div style="
-        margin-top:24px;
-        padding:18px 24px;
-        background:rgba(255,255,255,0.03);
-        border:1px solid rgba(255,255,255,0.08);
-        border-radius:12px;
-        color:#94a3b8;
-        font-size:0.82rem;
-        line-height:1.8;
-        text-align:center;
-    ">
-        <strong style="color:#a5b4fc">Model:</strong> DeBERTa-v3-base — fine-tuned for 5-option MCQ &nbsp;|&nbsp;
-        <strong style="color:#a5b4fc">Architecture:</strong> DebertaV2ForMultipleChoice &nbsp;|&nbsp;
-        <strong style="color:#a5b4fc">Project:</strong> IIT Madras BS DS — DL &amp; GenAI T2-2026 &nbsp;|&nbsp;
-        <strong style="color:#a5b4fc">Author:</strong> Shitanshu Chaurasiya · Roll No. 24F2006167
-    </div>
-    """)
-
-    # ── Examples ──────────────────────────────────────────────────────────────
+    # Examples list
     gr.Examples(
         examples=[
             [
@@ -402,6 +317,14 @@ with gr.Blocks(
                 "Golgi apparatus",
                 "Endoplasmic reticulum",
             ],
+            [
+                "Which of the following is NOT a programming language?",
+                "Python",
+                "Java",
+                "HTML",
+                "C++",
+                "Ruby",
+            ],
             [
                 "Which element has the highest electronegativity on the Pauling scale?",
                 "Oxygen",
@@ -426,20 +349,33 @@ with gr.Blocks(
                 "Canberra",
                 "Perth",
             ],
-            [
-                "What is the derivative of sin(x) with respect to x?",
-                "-sin(x)",
-                "cos(x)",
-                "-cos(x)",
-                "tan(x)",
-                "sec²(x)",
-            ],
         ],
         inputs=[prompt_input, opt_a, opt_b, opt_c, opt_d, opt_e],
-        label="💡 Click on any Example Question below to load & test directly:",
+        outputs=[prediction_out, top3_out, prob_out],
+        fn=predict,
+        cache_examples=False,
+        label="💡 Click any example question below to load & test immediately:",
     )
 
-    # ── Event wiring ──────────────────────────────────────────────────────────
+    # Footer
+    gr.HTML("""
+    <div style="
+        margin-top:20px;
+        padding:16px;
+        background:#1e293b;
+        border:1px solid #334155;
+        border-radius:12px;
+        color:#94a3b8;
+        font-size:0.85rem;
+        text-align:center;
+    ">
+        <strong style="color:#38bdf8">Model:</strong> DeBERTa-v3-base &nbsp;|&nbsp;
+        <strong style="color:#38bdf8">Fine-tuned Repository:</strong> Shitanshu06/mcq-deberta-v3-best-v2 &nbsp;|&nbsp;
+        <strong style="color:#38bdf8">Author:</strong> Shitanshu Chaurasiya (24F2006167)
+    </div>
+    """)
+
+    # Event binding
     predict_btn.click(
         fn=predict,
         inputs=[prompt_input, opt_a, opt_b, opt_c, opt_d, opt_e],
@@ -447,4 +383,5 @@ with gr.Blocks(
     )
 
 if __name__ == "__main__":
+    load_model(force_reload=True)
     demo.launch()