-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
298 lines (263 loc) · 11.1 KB
/
index.html
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> ML 7641 Project Group 50 </title>
<style>
* {
border: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
margin: 0 auto;
padding: 0;
}
.navbar {
background-color: #333;
overflow: hidden;
display: flex;
justify-content: center; /* Center the content */
align-items: center;
width: 100%;
padding: 20px 0; /* Add vertical padding */
}
.navbar-center {
text-align: center; /* Center-align the inner content */
}
.navbar-title {
color: white;
font-size: xx-large;
margin-bottom: 10px; /* Space between title and names */
}
.navbar-info {
color: white;
margin-bottom: 10px; /* Space between names and GitHub button */
}
.github-btn {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
font-size: 14px;
}
.github-btn:hover {
background-color: #45a049;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
h1, h2 {
margin-bottom: 20px;
margin-top: 20px;
}
a {
display: inline-block;
margin-top: 20px;
padding: 10px 15px;
background-color: #007BFF;
color: #FFF;
text-decoration: none;
border-radius: 5px;
}
.dropdown {
margin: 20px 0;
}
.dropdown select {
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
}
.output {
margin-top: 20px;
padding: 15px;
background-color: #f0f0f0;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 5em;
}
.team-contributions {
margin-top: 20px;
}
.team-contributions h2 {
margin-bottom: 10px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
margin-bottom: 40px;
}
table, th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="navbar-center">
<div class="navbar-title">
Enhancing Question-Answering Systems with BERT - Project Group 50
</div>
<div class="navbar-info">
Ayushi Chakrabarty, Cameron Potter, Kshitij Pathania, Prateek Yadav, Sneha Maheshwari
</div>
<a href="https://github.gatech.edu/ML-7641-Project-Group-50/ML-7641-Project-Group-50" target="_blank" class="github-btn">GitHub Repository</a>
</div>
</nav>
<div class="container">
<h1>Advancements in QA Systems Using BERT</h1>
<p>Our project on Natural Language Processing with BERT has concluded with significant advancements. We focused on integrating BERT into QA systems and have achieved remarkable results, addressing challenges such as hyperparameter tuning, scalability, and robustness.</p>
<h2>Problem Definition</h2>
<p>Our final investigation into BERT for QA systems has led to innovative solutions and breakthroughs in key areas, including enhanced model tuning and system scalability.</p>
<h2>Methods and Results</h2>
<p>We employed advanced methods in data preprocessing, model training, and evaluation. Our final results demonstrate substantial improvements in prediction accuracy and system efficiency.</p>
<h2>Project Insights</h2>
<p>The conclusion of our project offers deep insights into BERT's capabilities. We have explored and documented its transformative impact on QA system performance.</p>
<div class="button-group">
<a href="./ML_Project_Proposal.pdf" target="_blank">View Initial Proposal</a>
<a href="./ML_Midterm_Report.pdf" target="_blank">View Midterm Report</a>
<a href="./ML_Final_Report.pdf" target="_blank">View Final Report</a>
</div>
<h2>Try Our Model</h2>
<p>Select a question and context pair to see how our model responds:</p>
<div class="dropdown">
<select id="question-dropdown">
<option value="">Select Question and Context</option>
<!-- Options will be added dynamically by JavaScript -->
</select>
</div>
<div id="model-output" class="output">Model response will appear here...</div>
<div class="team-contributions">
<h2>Team Contributions</h2>
<table>
<tr>
<th>Student Name</th>
<th>Contributed Aspects</th>
</tr>
<tr>
<td>Ayushi Chakrabarty</td>
<td>Problem Definition, Documentation, Report Writing</td>
</tr>
<tr>
<td>Cameron George Potter</td>
<td>Ideation, Methods, Model Training</td>
</tr>
<tr>
<td>Kshitij Pathania</td>
<td>Model Evaluation, Results Compilation, Data Visualization</td>
</tr>
<tr>
<td>Prateek</td>
<td>Problem Definition, Ideation, Documentation</td>
</tr>
<tr>
<td>Sneha Maheshwari</td>
<td>Problem Definition, Report Writing, Documentation</td>
</tr>
</table>
</div>
</div>
<script>
var queryContextPairs = {
"1": {
"query": "Who led the expedition?",
"context": "In 1804, Meriwether Lewis and William Clark led an expedition to explore the newly acquired western portion of the United States after the Louisiana Purchase. Meanwhile, in the same year, Napoleon Bonaparte declared himself the emperor of France.",
"response": "Meriwether Lewis and William Clark"
},
"2": {
"query": "What is the capital of Australia?",
"context": "Sydney is the largest city in Australia and is often mistaken for the capital. However, the actual capital of Australia is Canberra.",
"response": "Canberra"
},
"3": {
"query": "Who wrote '1984'?",
"context": "'1984' is a dystopian novel by English novelist George Orwell. It was published in 1949 and is set in a future totalitarian society.",
"response": "George Orwell"
},
"4": {
"query": "What is the boiling point of water?",
"context": "The boiling point of water depends on the atmospheric pressure. At sea level, it boils at 100 degrees Celsius (212 degrees Fahrenheit).",
"response": "100 degrees Celsius"
},
"5": {
"query": "Who discovered penicillin?",
"context": "Penicillin was discovered in 1928 by Scottish scientist Alexander Fleming. It was a breakthrough in the field of medicine.",
"response": "Alexander Fleming"
},
"6": {
"query": "What is the largest planet in our solar system?",
"context": "The largest planet in our solar system is Jupiter. It is a gas giant and is known for its prominent Great Red Spot.",
"response": "Jupiter"
},
"7": {
"query": "When did the First World War start?",
"context": "The First World War, also known as the Great War, started in 1914 after the assassination of Archduke Franz Ferdinand of Austria.",
"response": "1914"
},
"8": {
"query": "What is the currency of Japan?",
"context": "The currency of Japan is the Japanese Yen. It is widely used throughout the country and is recognized by the symbol ¥.",
"response": "Japanese Yen"
},
"9": {
"query": "Who painted the Mona Lisa?",
"context": "The Mona Lisa is a famous painting by the Italian artist Leonardo da Vinci. It was completed in the early 16th century.",
"response": "Leonardo da Vinci"
},
"10": {
"query": "What is the distance from Earth to the Moon?",
"context": "The distance from Earth to the Moon varies due to the Moon's elliptical orbit. On average, it is about 384,400 kilometers.",
"response": "384,400 kilometers"
}
// Add more query-context pairs if needed
};
// Function to add options to the dropdown
function populateDropdown() {
var dropdown = document.getElementById('question-dropdown');
for (var key in queryContextPairs) {
var option = document.createElement("option");
option.value = key;
option.text = "Question: " + queryContextPairs[key].query + " | Context: " + truncate(queryContextPairs[key].context);
dropdown.appendChild(option);
}
}
function truncate(str) {
return str.length > 50 ? str.substring(0, 50) + "..." : str;
}
// Event listener for dropdown change
document.getElementById('question-dropdown').addEventListener('change', function() {
var outputDiv = document.getElementById('model-output');
var selectedValue = this.value;
if (selectedValue) {
var queryContext = queryContextPairs[selectedValue];
outputDiv.innerHTML = 'Processing...';
// Simulate a delay to mimic chatbot-like response
setTimeout(function() {
outputDiv.innerHTML = '<strong>Query:</strong> ' + queryContext.query + '<br><strong>Context:</strong> ' + queryContext.context + '<br><strong>Model Response:</strong> ' + queryContext.response;
}, 2000); // 2 seconds delay
} else {
outputDiv.innerHTML = 'Model response will appear here...';
}
});
// Populate the dropdown on page load
populateDropdown();
</script>
</body>
</html>