Hugging Face's logo

Spaces:
dhruthick
/
moody-lyrics
Sleeping

App Files Community
dhruthick commited on
Commit
d9f9dd4
·
1 Parent(s): dd541ca

fixed minor issues

Browse files
Files changed (1) hide show
  1. frontend/index.html +33 -3
frontend/index.html CHANGED
@@ -115,7 +115,7 @@
115
  text-align: left;
116
  font-size: 0.9em;
117
  color: #333;
118
- padding: 0;
119
  border-radius: 10px;
120
  background: rgba(244, 244, 249, 0.9);
121
  }
@@ -129,6 +129,24 @@
129
  cursor: pointer;
130
  text-decoration: underline;
131
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
132
  </style>
133
  </head>
134
  <body>
@@ -141,22 +159,28 @@
141
  </form>
142
  <div id="results-container">
143
  <h2 id="mood-result"></h2>
 
 
 
144
  <canvas id="mood-chart"></canvas>
145
  <pre id="lyrics"></pre>
146
  </div>
147
  <div class="footer">
148
- 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.
149
  <br><br>
150
  <a href="#" id="more-info-link">Click here to learn more about how this web app works</a>
151
  <div id="more-info">
152
  <p><strong>How it Works:</strong></p>
153
- <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.</p>
154
  <p><strong>Technology:</strong></p>
155
  <ul>
156
  <li><strong>Model:</strong> BERT (Bidirectional Encoder Representations from Transformers) fine-tuned on song lyrics to classify moods.</li>
157
  <li><strong>Framework:</strong> PyTorch and Hugging Face Transformers library for model training and prediction.</li>
 
 
158
  <li><strong>Deployment:</strong> The web app is hosted and deployed using Hugging Face Spaces, which provides a simple interface for serving machine learning models.</li>
159
  </ul>
 
160
  </div>
161
  </div>
162
  </div>
@@ -206,6 +230,9 @@
206
  const title = document.getElementById('title').value;
207
  const artist = document.getElementById('artist').value;
208
 
 
 
 
209
  const response = await fetch('/predict', {
210
  method: 'POST',
211
  headers: {
@@ -217,6 +244,9 @@
217
  document.getElementById('mood-result').innerText = `Predicted Mood: ${data.mood}`;
218
  document.getElementById('lyrics').innerText = data.lyrics;
219
 
 
 
 
220
  // Scroll to the top of the container to ensure the form remains visible
221
  document.querySelector('.container').scrollTop = 0;
222
 
 
115
  text-align: left;
116
  font-size: 0.9em;
117
  color: #333;
118
+ padding: 20px;
119
  border-radius: 10px;
120
  background: rgba(244, 244, 249, 0.9);
121
  }
 
129
  cursor: pointer;
130
  text-decoration: underline;
131
  }
132
+ .spinner {
133
+ display: flex;
134
+ justify-content: center;
135
+ align-items: center;
136
+ height: 100px;
137
+ margin-top: 20px;
138
+ }
139
+ .spinner-border {
140
+ width: 3rem;
141
+ height: 3rem;
142
+ border: 0.3em solid rgba(0, 0, 0, 0.1);
143
+ border-radius: 50%;
144
+ border-top-color: #af4261;
145
+ animation: spin 0.75s linear infinite;
146
+ }
147
+ @keyframes spin {
148
+ to { transform: rotate(360deg); }
149
+ }
150
  </style>
151
  </head>
152
  <body>
 
159
  </form>
160
  <div id="results-container">
161
  <h2 id="mood-result"></h2>
162
+ <div id="spinner" class="spinner" style="display: none;">
163
+ <div class="spinner-border" role="status"></div>
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">Click here to learn more about how this web app works</a>
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>
175
  <p><strong>Technology:</strong></p>
176
  <ul>
177
  <li><strong>Model:</strong> BERT (Bidirectional Encoder Representations from Transformers) fine-tuned on song lyrics to classify moods.</li>
178
  <li><strong>Framework:</strong> PyTorch and Hugging Face Transformers library for model training and prediction.</li>
179
+ <li><strong>Frontend:</strong> HTML, CSS, and JavaScript.</li>
180
+ <li><strong>Backend:</strong> Flask.</li>
181
  <li><strong>Deployment:</strong> The web app is hosted and deployed using Hugging Face Spaces, which provides a simple interface for serving machine learning models.</li>
182
  </ul>
183
+ <p>For the source code, visit: <a href="https://github.com/ggopalai/moody-lyrics/tree/master" target="_blank">GitHub Repository</a></p>
184
  </div>
185
  </div>
186
  </div>
 
230
  const title = document.getElementById('title').value;
231
  const artist = document.getElementById('artist').value;
232
 
233
+ // Show the spinner
234
+ document.getElementById('spinner').style.display = 'flex';
235
+
236
  const response = await fetch('/predict', {
237
  method: 'POST',
238
  headers: {
 
244
  document.getElementById('mood-result').innerText = `Predicted Mood: ${data.mood}`;
245
  document.getElementById('lyrics').innerText = data.lyrics;
246
 
247
+ // Hide the spinner
248
+ document.getElementById('spinner').style.display = 'none';
249
+
250
  // Scroll to the top of the container to ensure the form remains visible
251
  document.querySelector('.container').scrollTop = 0;
252