Spaces:
Sleeping
Sleeping
added feedback option to frontend
Browse files- frontend/index.html +38 -3
frontend/index.html
CHANGED
|
@@ -147,6 +147,17 @@
|
|
| 147 |
@keyframes spin {
|
| 148 |
to { transform: rotate(360deg); }
|
| 149 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 150 |
</style>
|
| 151 |
</head>
|
| 152 |
<body>
|
|
@@ -164,11 +175,17 @@
|
|
| 164 |
</div>
|
| 165 |
<canvas id="mood-chart"></canvas>
|
| 166 |
<pre id="lyrics"></pre>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 167 |
</div>
|
| 168 |
<div class="footer">
|
| 169 |
This app analyzes song lyrics to predict their mood. Enter a song title and artist, and get mood predictions along with the lyrics. Deployed using Hugging Face Spaces. The model may be inaccurate in some cases.
|
| 170 |
<br><br>
|
| 171 |
-
<a href="#" id="more-info-link">
|
| 172 |
<div id="more-info">
|
| 173 |
<p><strong>How it Works:</strong></p>
|
| 174 |
<p>This web app utilizes a fine-tuned BERT model to analyze the mood of song lyrics. Upon entering a song title and artist, the app retrieves the song's lyrics from Genius, processes them through the BERT model, and predicts the mood. The model's accuracy is 93% on its test set.</p>
|
|
@@ -278,20 +295,38 @@
|
|
| 278 |
// Update chart with new data
|
| 279 |
moodChart.data.datasets[0].data = data.probabilities || [0, 0, 0, 0];
|
| 280 |
moodChart.update();
|
|
|
|
|
|
|
|
|
|
| 281 |
});
|
| 282 |
|
| 283 |
-
// Toggle detailed description with smooth effect
|
| 284 |
document.getElementById('more-info-link').addEventListener('click', function(event) {
|
| 285 |
event.preventDefault();
|
| 286 |
const moreInfo = document.getElementById('more-info');
|
| 287 |
if (moreInfo.style.display === 'none' || !moreInfo.style.display) {
|
| 288 |
moreInfo.style.display = 'block';
|
| 289 |
-
setTimeout(() =>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 290 |
} else {
|
| 291 |
moreInfo.classList.remove('show');
|
| 292 |
setTimeout(() => moreInfo.style.display = 'none', 500);
|
| 293 |
}
|
| 294 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 295 |
</script>
|
| 296 |
</body>
|
| 297 |
</html>
|
|
|
|
| 147 |
@keyframes spin {
|
| 148 |
to { transform: rotate(360deg); }
|
| 149 |
}
|
| 150 |
+
#accuracy-test {
|
| 151 |
+
display: none;
|
| 152 |
+
margin-top: 20px;
|
| 153 |
+
text-align: center;
|
| 154 |
+
}
|
| 155 |
+
#accuracy-test button {
|
| 156 |
+
padding: 10px 20px;
|
| 157 |
+
margin: 0 10px;
|
| 158 |
+
font-size: 1em;
|
| 159 |
+
cursor: pointer;
|
| 160 |
+
}
|
| 161 |
</style>
|
| 162 |
</head>
|
| 163 |
<body>
|
|
|
|
| 175 |
</div>
|
| 176 |
<canvas id="mood-chart"></canvas>
|
| 177 |
<pre id="lyrics"></pre>
|
| 178 |
+
<!-- Feedback and Accuracy Test -->
|
| 179 |
+
<div id="accuracy-test">
|
| 180 |
+
<p>Did the model get the mood right?</p>
|
| 181 |
+
<button id="correct" title="Yes">Yes</button>
|
| 182 |
+
<button id="incorrect" title="No">No</button>
|
| 183 |
+
</div>
|
| 184 |
</div>
|
| 185 |
<div class="footer">
|
| 186 |
This app analyzes song lyrics to predict their mood. Enter a song title and artist, and get mood predictions along with the lyrics. Deployed using Hugging Face Spaces. The model may be inaccurate in some cases.
|
| 187 |
<br><br>
|
| 188 |
+
<a href="#" id="more-info-link">Learn more.</a>
|
| 189 |
<div id="more-info">
|
| 190 |
<p><strong>How it Works:</strong></p>
|
| 191 |
<p>This web app utilizes a fine-tuned BERT model to analyze the mood of song lyrics. Upon entering a song title and artist, the app retrieves the song's lyrics from Genius, processes them through the BERT model, and predicts the mood. The model's accuracy is 93% on its test set.</p>
|
|
|
|
| 295 |
// Update chart with new data
|
| 296 |
moodChart.data.datasets[0].data = data.probabilities || [0, 0, 0, 0];
|
| 297 |
moodChart.update();
|
| 298 |
+
|
| 299 |
+
// Show feedback section
|
| 300 |
+
document.getElementById('accuracy-test').style.display = 'block';
|
| 301 |
});
|
| 302 |
|
| 303 |
+
// Toggle detailed description with smooth effect and scroll to it
|
| 304 |
document.getElementById('more-info-link').addEventListener('click', function(event) {
|
| 305 |
event.preventDefault();
|
| 306 |
const moreInfo = document.getElementById('more-info');
|
| 307 |
if (moreInfo.style.display === 'none' || !moreInfo.style.display) {
|
| 308 |
moreInfo.style.display = 'block';
|
| 309 |
+
setTimeout(() => {
|
| 310 |
+
moreInfo.classList.add('show');
|
| 311 |
+
// Scroll to the more-info section smoothly
|
| 312 |
+
moreInfo.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
| 313 |
+
}, 10);
|
| 314 |
} else {
|
| 315 |
moreInfo.classList.remove('show');
|
| 316 |
setTimeout(() => moreInfo.style.display = 'none', 500);
|
| 317 |
}
|
| 318 |
});
|
| 319 |
+
|
| 320 |
+
// Handle accuracy test
|
| 321 |
+
document.getElementById('correct').addEventListener('click', function() {
|
| 322 |
+
alert('Thank you for the feedback!');
|
| 323 |
+
// Send correct feedback to the server if needed
|
| 324 |
+
});
|
| 325 |
+
|
| 326 |
+
document.getElementById('incorrect').addEventListener('click', function() {
|
| 327 |
+
alert('Thank you for the feedback!');
|
| 328 |
+
// Send incorrect feedback to the server if needed
|
| 329 |
+
});
|
| 330 |
</script>
|
| 331 |
</body>
|
| 332 |
</html>
|