-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpipeline.html
More file actions
137 lines (127 loc) · 7.12 KB
/
Copy pathpipeline.html
File metadata and controls
137 lines (127 loc) · 7.12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pipeline — ExplainGrade Architecture</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bg-blobs">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
</div>
<nav class="navbar" id="navbar">
<div class="container">
<a href="index.html" class="nav-logo">🔬 ExplainGrade</a>
<ul class="nav-links">
<li><a href="index.html" class="nav-link">Home</a></li>
<li><a href="pipeline.html" class="nav-link active">Pipeline</a></li>
<li><a href="research.html" class="nav-link">Research</a></li>
<li><a href="usage.html" class="nav-link">How to Use</a></li>
<li><a href="chat.html" class="nav-link">Assistant 💬</a></li>
</ul>
</div>
</nav>
<main class="section container" style="margin-top: 100px;">
<span class="badge">Architecture</span>
<h1 class="hero-title">Two-Stage Grading </h1>
<p class="hero-subtitle">Transparent by design — every point is traceable to a specific text comparison.</p>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 4rem;">
<div>
<div class="glass-card" style="margin-bottom: 2rem;">
<h3 style="margin-bottom: 1rem;"><span class="text-accent2">Stage 1:</span> Rule-Based Floor</h3>
<p style="color: var(--text-dim); margin-bottom: 1.5rem;">Calculates a guaranteed minimum score
based on literal technical term coverage. Students cannot score below what they explicitly
mentioned.</p>
<div
style="padding: 1rem; background: rgba(0,0,0,0.2); border-radius: 8px; font-family: 'JetBrains Mono'; font-size: 0.85rem; border-left: 4px solid var(--accent3);">
Score = (MatchedTerms / TotalTerms) * MaxMarks
</div>
</div>
<div class="glass-card">
<h3 style="margin-bottom: 1rem;"><span class="text-primary">Stage 2:</span> Semantic Grading</h3>
<p style="color: var(--text-dim); margin-bottom: 1.5rem;">Applies the PMC12171532 equations using
NLP metrics and Semantic Similarity to award points for meaning and conceptual understanding.
</p>
<div
style="padding: 1rem; background: rgba(0,0,0,0.2); border-radius: 8px; font-family: 'JetBrains Mono'; font-size: 0.85rem; border-left: 4px solid var(--primary);">
Score = min(MaxMarks, Stage1 + (F * MaxMarks))
</div>
</div>
</div>
<div>
<h3 class="mb-4">Scoring Metrics & Weights</h3>
<div class="metrics-grid" style="display: grid; gap: 1rem;">
<!-- Metric Card -->
<div class="glass-card" style="padding: 1.5rem; display: flex; align-items: center; gap: 1.5rem;">
<div style="font-size: 2rem;">🧠</div>
<div>
<h4 style="margin: 0;">Semantic Similarity (50%)</h4>
<p style="font-size: 0.85rem; color: var(--text-dim);">TF-Cosine proxy for USE contextual
meaning.</p>
</div>
</div>
<div class="glass-card" style="padding: 1.5rem; display: flex; align-items: center; gap: 1.5rem;">
<div style="font-size: 2rem;">🔗</div>
<div>
<h4 style="margin: 0;">Jaccard Similarity (15%)</h4>
<p style="font-size: 0.85rem; color: var(--text-dim);">Token-set intersection for vocabulary
usage.</p>
</div>
</div>
<div class="glass-card" style="padding: 1.5rem; display: flex; align-items: center; gap: 1.5rem;">
<div style="font-size: 2rem;">📐</div>
<div>
<h4 style="margin: 0;">Cosine Frequency (15%)</h4>
<p style="font-size: 0.85rem; color: var(--text-dim);">Word frequency vector angle for
synonymous phrasing.</p>
</div>
</div>
<div class="glass-card" style="padding: 1.5rem; display: flex; align-items: center; gap: 1.5rem;">
<div style="font-size: 2rem;">📝</div>
<div>
<h4 style="margin: 0;">Normalized Word Count (15%)</h4>
<p style="font-size: 0.85rem; color: var(--text-dim);">Ratio-based length checks to prevent
inflation.</p>
</div>
</div>
<div class="glass-card" style="padding: 1.5rem; display: flex; align-items: center; gap: 1.5rem;">
<div style="font-size: 2rem;">🖋️</div>
<div>
<h4 style="margin: 0;">Edit Similarity (5%)</h4>
<p style="font-size: 0.85rem; color: var(--text-dim);">Normalized Levenshtein for typo
tolerance.</p>
</div>
</div>
</div>
</div>
</div>
<div class="glass-card" style="margin-top: 4rem;">
<h3 class="mb-4">📋 Equations from PMC12171532</h3>
<div
style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; font-family: 'JetBrains Mono'; font-size: 0.9rem;">
<div style="padding: 1rem; background: rgba(0,0,0,0.2); border-radius: 8px;">
<p style="color: var(--accent2); margin-bottom: 0.5rem;">// Confidence Score (C)</p>
C = 0.5 * Stf + 0.5 * (0.15*Sj + 0.05*Se + 0.15*Sc + 0.15*Sw)
</div>
<div style="padding: 1rem; background: rgba(0,0,0,0.2); border-radius: 8px;">
<p style="color: var(--accent1); margin-bottom: 0.5rem;">// Final Scoring Rule (F)</p>
if (Stf < 0.2) return 0.0<br>
if (Stf >= 0.9 && Sw >= 0.8) return 1.0<br>
else return C
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<p>© 2026 ExplainGrade · Pipeline Documentation</p>
</div>
</footer>
</body>
</html>