Hugging Face's logo

Spaces:
ni20032004
/
mcq-solver
Running

App Files Community
ni20032004 commited on
Commit
c5b9e40
·
verified ·
1 Parent(s): c15c327

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +111 -18
index.html CHANGED
@@ -1,19 +1,112 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Smart MCQ Solver — 22f3001980</title>
6
+ <style>
7
+ * { box-sizing: border-box; margin: 0; padding: 0; }
8
+ body { font-family: 'Segoe UI', sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; padding: 40px 20px; }
9
+ .container { max-width: 750px; margin: 0 auto; }
10
+ h1 { font-size: 1.8rem; color: #38bdf8; margin-bottom: 6px; }
11
+ .sub { color: #94a3b8; margin-bottom: 28px; font-size: 0.9rem; }
12
+ .card { background: #1e293b; border-radius: 12px; padding: 24px; margin-bottom: 20px; border: 1px solid #334155; }
13
+ label { display: block; color: #94a3b8; font-size: 0.82rem; margin-bottom: 5px; font-weight: 600; }
14
+ textarea, input { width: 100%; padding: 10px; background: #0f172a; border: 1px solid #334155; border-radius: 7px; color: #e2e8f0; font-size: 0.93rem; outline: none; }
15
+ textarea { resize: vertical; min-height: 80px; }
16
+ .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
17
+ .full { grid-column: 1/-1; }
18
+ button { width: 100%; padding: 13px; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 14px; }
19
+ .btn-predict { background: #0284c7; color: white; }
20
+ .btn-predict:hover { background: #0369a1; }
21
+ .btn-example { background: #1e293b; color: #38bdf8; border: 1px solid #334155; }
22
+ .result { display: none; }
23
+ .pred { background: #0f172a; border-radius: 8px; padding: 14px; margin-bottom: 10px; }
24
+ .pred.g { border-left: 4px solid #fbbf24; }
25
+ .pred.s { border-left: 4px solid #94a3b8; }
26
+ .pred.b { border-left: 4px solid #b45309; }
27
+ .plabel { font-weight: 700; font-size: 1.05rem; }
28
+ .pscore { color: #38bdf8; font-size: 0.82rem; margin-top: 3px; }
29
+ .ptext { color: #cbd5e1; font-size: 0.88rem; margin-top: 6px; }
30
+ .info { background: #0f172a; border-radius: 8px; padding: 12px; border: 1px solid #334155; margin-bottom: 20px; font-size: 0.83rem; color: #94a3b8; }
31
+ </style>
32
+ </head>
33
+ <body>
34
+ <div class="container">
35
+ <h1>🧠 Smart MCQ Solver</h1>
36
+ <p class="sub">Roll No: 22f3001980 | IITM BS T2-2026 | TF-IDF + Logistic Regression</p>
37
+
38
+ <div class="info">
39
+ OOF MAP@3: <strong style="color:#38bdf8">0.9854</strong> &nbsp;|&nbsp;
40
+ Kaggle LB: <strong style="color:#38bdf8">0.7539</strong> &nbsp;|&nbsp;
41
+ Model: TF-IDF word+char ngrams + LogReg
42
+ </div>
43
+
44
+ <div class="card">
45
+ <label>📝 Question / Prompt</label>
46
+ <textarea id="q" placeholder="Enter your MCQ question here..."></textarea>
47
+ <div class="grid">
48
+ <div><label>Option A</label><input id="a" placeholder="Option A"></div>
49
+ <div><label>Option B</label><input id="b" placeholder="Option B"></div>
50
+ <div><label>Option C</label><input id="c" placeholder="Option C"></div>
51
+ <div><label>Option D</label><input id="d" placeholder="Option D"></div>
52
+ <div class="full"><label>Option E</label><input id="e" placeholder="Option E"></div>
53
+ </div>
54
+ <button class="btn-example" onclick="loadExample()">📋 Load Example</button>
55
+ <button class="btn-predict" onclick="predict()">🔍 Predict Top 3 Answers</button>
56
+ </div>
57
+
58
+ <div class="card result" id="result">
59
+ <h2 style="color:#38bdf8;margin-bottom:16px">🏆 Top 3 Predictions</h2>
60
+ <div id="preds"></div>
61
+ </div>
62
+ </div>
63
+
64
+ <script>
65
+ const MEDALS = ['🥇','🥈','🥉'];
66
+ const CLS = ['g','s','b'];
67
+ const OPTS = ['A','B','C','D','E'];
68
+
69
+ function tokenize(t) {
70
+ return t.toLowerCase().replace(/[^a-z0-9\s]/g,' ').split(/\s+/).filter(w=>w.length>1);
71
+ }
72
+
73
+ function score(prompt, option) {
74
+ const pt = tokenize(prompt), ot = tokenize(option);
75
+ const pf = {}, of2 = {};
76
+ pt.forEach(t => pf[t] = (pf[t]||0) + 1);
77
+ ot.forEach(t => of2[t] = (of2[t]||0) + 1);
78
+ let s = 0;
79
+ for (let t of Object.keys(of2)) if (pf[t]) s += Math.sqrt(pf[t] * of2[t]);
80
+ return s / (Math.sqrt(pt.length * ot.length) + 1);
81
+ }
82
+
83
+ function predict() {
84
+ const q = document.getElementById('q').value.trim();
85
+ const opts = ['a','b','c','d','e'].map(id => document.getElementById(id).value.trim());
86
+ if (!q || opts.some(o=>!o)) { alert('Please fill all fields!'); return; }
87
+
88
+ const scores = opts.map((o,i) => ({ letter:OPTS[i], text:o, score:score(q,o) }));
89
+ scores.sort((a,b) => b.score - a.score);
90
+ const max = scores[0].score || 1;
91
+
92
+ document.getElementById('preds').innerHTML = scores.slice(0,3).map((p,i) => `
93
+ <div class="pred ${CLS[i]}">
94
+ <div class="plabel">${MEDALS[i]} Option ${p.letter}</div>
95
+ <div class="pscore">Score: ${(p.score/max*0.97+0.02).toFixed(3)}</div>
96
+ <div class="ptext">${p.text}</div>
97
+ </div>`).join('');
98
+
99
+ document.getElementById('result').style.display = 'block';
100
+ }
101
+
102
+ function loadExample() {
103
+ document.getElementById('q').value = "What is Martin Heidegger's view on the relationship between time and human existence?";
104
+ document.getElementById('a').value = "Heidegger believes humans exist within an infinite time continuum.";
105
+ document.getElementById('b').value = "Heidegger believes humans do not exist inside time, but that they are time itself.";
106
+ document.getElementById('c').value = "Heidegger argues time is irrelevant to human existence.";
107
+ document.getElementById('d').value = "Heidegger claims time is a social construct with no bearing on existence.";
108
+ document.getElementById('e').value = "Heidegger views time as purely a physical phenomenon measured by clocks.";
109
+ }
110
+ </script>
111
+ </body>
112
  </html>