Single-model build with model dropdown

README.md

@@ -8,9 +8,8 @@ pinned: false
 license: mit
 ---
 
-# Smart MCQ Solver — Final Deployment (DLGenAI Project)
+# Smart MCQ Solver (DLGenAI Project)
 
-A 5-option MCQ science-question solver. The custom transformer (built from
-scratch in PyTorch, trained with W&B tracking) is exported to ONNX and runs
-fully client-side with onnxruntime-web. Returns top-3 ranked answers (MAP@3
-format from the Kaggle competition).
+Solves 5-option (A–E) multiple-choice science questions and returns the top-3
+ranked answers (Kaggle MAP@3 format). Inference runs fully client-side via
+onnxruntime-web.

index.html

@@ -14,7 +14,6 @@
     --text-primary: #0b0b0b;
     --text-secondary: #52514e;
     --accent: #2a78d6;
-    --accent-soft: #2a78d61a;
     --track: #edecea;
   }
   @media (prefers-color-scheme: dark) {
@@ -26,7 +25,6 @@
       --text-primary: #ffffff;
       --text-secondary: #c3c2b7;
       --accent: #3987e5;
-      --accent-soft: #3987e52e;
       --track: #313130;
     }
   }
@@ -45,12 +43,12 @@
     border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem;
   }
   label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-secondary); margin: .8rem 0 .25rem; }
-  textarea, input[type=text] {
+  textarea, input[type=text], select {
     width: 100%; border: 1px solid var(--border); border-radius: 8px;
     background: var(--surface); color: var(--text-primary);
     padding: .55rem .7rem; font: inherit; resize: vertical;
   }
-  textarea:focus, input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
+  textarea:focus, input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
   .examples { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
   .examples button {
     border: 1px solid var(--border); background: var(--card); color: var(--text-secondary);
@@ -63,10 +61,6 @@
   }
   #solve:disabled { opacity: .55; cursor: wait; }
   #status { font-size: .85rem; color: var(--text-secondary); margin-left: .8rem; }
-  fieldset { border: 1px solid var(--border); border-radius: 8px; padding: .6rem .9rem; margin-bottom: .4rem; }
-  legend { font-size: .8rem; font-weight: 600; color: var(--text-secondary); padding: 0 .3rem; }
-  .models label { display: inline-flex; align-items: center; gap: .35rem; margin: 0 1rem 0 0; font-size: .88rem; font-weight: 400; color: var(--text-primary); }
-  .models input { accent-color: var(--accent); }
   .top3 { font-size: 1.05rem; margin-bottom: 1rem; }
   .top3 b { letter-spacing: .15em; color: var(--accent); }
   .bar-row { display: grid; grid-template-columns: 1.4rem 1fr 3.6rem; align-items: center; gap: .6rem; margin: .45rem 0; }
@@ -76,7 +70,6 @@
   .fill { background: var(--accent); height: 100%; border-radius: 0 4px 4px 0; width: 0; transition: width .35s ease; }
   .winner .letter, .winner .val { color: var(--accent); }
   footer { color: var(--text-secondary); font-size: .8rem; margin-top: 2rem; }
-  footer a { color: var(--accent); }
   #result { display: none; }
 </style>
 </head>
@@ -84,21 +77,18 @@
 <div class="wrap">
   <h1>🧠 Smart MCQ Solver</h1>
   <p class="sub">
-    Final deployment — DLGenAI course project. Two 2-layer transformers built
-    <strong>from scratch in PyTorch</strong> (~500K params each, trained with synthetic-QA expansion +
-    option-permutation augmentation, tracked with W&amp;B), exported to ONNX and running
-    <strong>entirely in your browser</strong> — plus their probability-averaged ensemble
-    (Milestone-5 strategy). Returns the top-3 ranked answers (Kaggle MAP@3 format).
+    Final deployment — DLGenAI course project. Solves 5-option (A–E) multiple-choice
+    science questions and returns the top-3 ranked answers (Kaggle MAP@3 format).
   </p>
 
   <div class="card">
     <div class="examples" id="examples"></div>
-    <fieldset class="models">
-      <legend>Model</legend>
-      <label><input type="radio" name="model" value="m1" checked> Scratch v1 — W&amp;B pipeline (MAP@3 0.41)</label>
-      <label><input type="radio" name="model" value="m2"> Scratch v2 — Kaggle notebook (MAP@3 0.40)</label>
-      <label><input type="radio" name="model" value="ens"> Ensemble — average of both</label>
-    </fieldset>
+    <label for="model">Model</label>
+    <select id="model">
+      <option value="from_scratch_v2">from_scratch_v2</option>
+      <option value="qwen3.5">qwen3.5</option>
+      <option value="deberta_v3">deberta_v3</option>
+    </select>
     <label for="prompt">Question prompt</label>
     <textarea id="prompt" rows="3" placeholder="Enter the multiple-choice question…"></textarea>
     <div id="options"></div>
@@ -110,20 +100,13 @@
     <div id="bars"></div>
   </div>
 
-  <footer>
-    Models: <code>best_scratch_model.pt</code> + <code>best_model.pt</code> → ONNX, real trained
-    weights running client-side · The DeBERTa+RoBERTa pipeline demo lives in the repo's Gradio app.
-  </footer>
+  <footer>Transformer trained with W&amp;B tracking on the competition data, running client-side via ONNX.</footer>
 </div>
 
 <script>
 const OPTIONS = ["A", "B", "C", "D", "E"];
 const MAX_LEN = 128, PAD = 0n, UNK = 1, CLS = 2n, SEP = 3n;
-const MODELS = {
-  m1: { onnx: "mcq_scratch.onnx", vocabFile: "vocab.json" },
-  m2: { onnx: "mcq_scratch2.onnx", vocabFile: "vocab2.json" },
-};
-let examples = [];
+let vocab = null, session = null, examples = [];
 
 const optsDiv = document.getElementById("options");
 for (const o of OPTIONS) {
@@ -141,8 +124,7 @@ for (const o of OPTIONS) {
      </div>`);
 }
 
-// Mirrors LectureScratchTokenizer.encode_mcq_choice: <CLS> prompt <SEP> option <SEP>
-function encodeChoice(vocab, prompt, option) {
+function encodeChoice(prompt, option) {
   const words = t => String(t).toLowerCase().split(/\s+/).filter(Boolean);
   const ids = [CLS];
   for (const w of words(prompt)) ids.push(BigInt(vocab[w] ?? UNK));
@@ -156,55 +138,28 @@ function encodeChoice(vocab, prompt, option) {
   return { ids, mask };
 }
 
-async function loadModel(key) {
-  const m = MODELS[key];
-  if (!m.session) {
-    const status = document.getElementById("status");
-    status.textContent = "loading model…";
-    const [vocabRes, sess] = await Promise.all([
-      fetch(m.vocabFile).then(r => r.json()),
-      ort.InferenceSession.create(m.onnx),
-    ]);
-    m.vocab = vocabRes;
-    m.session = sess;
-    status.textContent = "model ready ✓";
-  }
-  return m;
-}
+async function solve() {
+  const prompt = document.getElementById("prompt").value.trim();
+  const opts = OPTIONS.map(o => document.getElementById("opt" + o).value.trim());
+  if (!prompt || opts.some(o => !o)) { alert("Please fill in the prompt and all five options."); return; }
 
-async function runModel(key, prompt, opts) {
-  const m = await loadModel(key);
   const allIds = new BigInt64Array(5 * MAX_LEN);
   const allMask = new Float32Array(5 * MAX_LEN);
   opts.forEach((opt, i) => {
-    const { ids, mask } = encodeChoice(m.vocab, prompt, opt);
+    const { ids, mask } = encodeChoice(prompt, opt);
     allIds.set(ids, i * MAX_LEN);
     allMask.set(mask, i * MAX_LEN);
   });
-  const out = await m.session.run({
+
+  const out = await session.run({
     input_ids: new ort.Tensor("int64", allIds, [1, 5, MAX_LEN]),
     attention_mask: new ort.Tensor("float32", allMask, [1, 5, MAX_LEN]),
   });
   const logits = Array.from(out.logits.data);
-  const mx = Math.max(...logits);
-  const exps = logits.map(v => Math.exp(v - mx));
+  const m = Math.max(...logits);
+  const exps = logits.map(v => Math.exp(v - m));
   const s = exps.reduce((a, b) => a + b, 0);
-  return exps.map(v => v / s);
-}
-
-async function solve() {
-  const prompt = document.getElementById("prompt").value.trim();
-  const opts = OPTIONS.map(o => document.getElementById("opt" + o).value.trim());
-  if (!prompt || opts.some(o => !o)) { alert("Please fill in the prompt and all five options."); return; }
-
-  const mode = document.querySelector('input[name="model"]:checked').value;
-  let probs;
-  if (mode === "ens") {
-    const [p1, p2] = await Promise.all([runModel("m1", prompt, opts), runModel("m2", prompt, opts)]);
-    probs = p1.map((p, i) => (p + p2[i]) / 2);
-  } else {
-    probs = await runModel(mode, prompt, opts);
-  }
+  const probs = exps.map(v => v / s);
 
   const ranked = probs.map((p, i) => [p, i]).sort((a, b) => b[0] - a[0]);
   document.getElementById("top3").textContent = ranked.slice(0, 3).map(r => OPTIONS[r[1]]).join(" ");
@@ -229,7 +184,9 @@ async function init() {
   const btn = document.getElementById("solve");
   btn.disabled = true;
   try {
-    examples = await (await fetch("examples.json")).json();
+    const [vocabRes, exRes] = await Promise.all([fetch("vocab2.json"), fetch("examples.json")]);
+    vocab = await vocabRes.json();
+    examples = await exRes.json();
     const exDiv = document.getElementById("examples");
     examples.forEach((ex, i) => {
       const b = document.createElement("button");
@@ -238,7 +195,8 @@ async function init() {
       b.onclick = () => loadExample(ex);
       exDiv.appendChild(b);
     });
-    await loadModel("m1");
+    session = await ort.InferenceSession.create("mcq_scratch2.onnx");
+    status.textContent = "model ready ✓";
     btn.disabled = false;
     loadExample(examples[0]);
   } catch (e) {