Spaces:

dhruthick
/

moody-lyrics

Sleeping

App Files Files Community

dhruthick commited on Jul 2, 2024

Commit

4ed2091

1 Parent(s): 42d18ff

updated frontend (added css)

Browse files

Files changed (2) hide show

app.py +1 -1
frontend/index.html +112 -12

app.py CHANGED Viewed

@@ -69,7 +69,7 @@ def get_prediction(iids, ams):
 def classify_lyrics(lyrics):
     input_ids, attention_masks = tokenize_and_format([lyrics.replace('\n', ' ')])
     prediction = get_prediction(input_ids, attention_masks)
-    mood = ["angry", "happy", "relaxed", "sad"][prediction]
     return mood
 @app.route('/')

 def classify_lyrics(lyrics):
     input_ids, attention_masks = tokenize_and_format([lyrics.replace('\n', ' ')])
     prediction = get_prediction(input_ids, attention_masks)
+    mood = ["Angry", "Happy", "Relaxed", "Sad"][prediction]
     return mood
 @app.route('/')

frontend/index.html CHANGED Viewed

@@ -1,18 +1,97 @@
 <!DOCTYPE html>
-<html>
 <head>
-    <title>Lyrics Mood Predictor</title>
 </head>
 <body>
-    <h1>Enter Song Title and Artist</h1>
-    <form id="mood-form">
-        <input type="text" id="title" placeholder="Song Title" required>
-        <input type="text" id="artist" placeholder="Artist" required>
-        <button type="submit">Predict Mood</button>
-    </form>
-    <h2 id="mood-result"></h2>
-    <pre id="lyrics"></pre>
     <script>
         document.getElementById('mood-form').addEventListener('submit', async function(event) {
             event.preventDefault();
@@ -29,7 +108,28 @@
             const data = await response.json();
             document.getElementById('mood-result').innerText = `Predicted Mood: ${data.mood}`;
             document.getElementById('lyrics').innerText = data.lyrics;
         });
     </script>
 </body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Moody Lyrics</title>
+    <style>
+        body {
+            font-family: 'Georgia', serif;
+            background-color: #f4f4f9;
+            color: #333;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+        .container {
+            background: #fff;
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            max-width: 700px;
+            width: 100%;
+            text-align: center;
+            overflow-y: auto;
+            max-height: 90vh;
+        }
+        h1 {
+            color: #2c3e50;
+            font-size: 2.5em;
+            margin-bottom: 20px;
+        }
+        form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 20px;
+        }
+        input[type="text"] {
+            padding: 12px;
+            width: 80%;
+            border: 2px solid #2c3e50;
+            border-radius: 10px;
+            font-size: 1em;
+        }
+        button {
+            padding: 12px 30px;
+            background-color: #2c3e50;
+            color: #fff;
+            border: none;
+            border-radius: 10px;
+            font-size: 1.2em;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        button:hover {
+            background-color: #1a242f;
+        }
+        #mood-result {
+            margin-top: 30px;
+            font-size: 1.5em;
+        }
+        pre {
+            background: #f4f4f9;
+            padding: 20px;
+            border-radius: 10px;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            margin-top: 20px;
+            font-family: 'Courier New', Courier, monospace;
+            text-align: left;
+        }
+        #results-container {
+            margin-top: 30px;
+            padding: 20px;
+            border-radius: 10px;
+        }
+    </style>
 </head>
 <body>
+    <div class="container">
+        <h1>Moody Lyrics</h1>
+        <form id="mood-form">
+            <input type="text" id="title" placeholder="Song Title" required>
+            <input type="text" id="artist" placeholder="Artist" required>
+            <button type="submit">Predict Mood</button>
+        </form>
+        <div id="results-container">
+            <h2 id="mood-result"></h2>
+            <pre id="lyrics"></pre>
+        </div>
+    </div>
     <script>
         document.getElementById('mood-form').addEventListener('submit', async function(event) {
             event.preventDefault();
             const data = await response.json();
             document.getElementById('mood-result').innerText = `Predicted Mood: ${data.mood}`;
             document.getElementById('lyrics').innerText = data.lyrics;
+            // Scroll to the top of the container to ensure the form remains visible
+            document.querySelector('.container').scrollTop = 0;
+            // Change background color based on the predicted mood
+            const resultsContainer = document.getElementById('results-container');
+            switch (data.mood.toLowerCase()) {
+                case 'happy':
+                    resultsContainer.style.backgroundColor = '#fff9c4'; // light yellow
+                    break;
+                case 'angry':
+                    resultsContainer.style.backgroundColor = '#ffcdd2'; // light red
+                    break;
+                case 'relaxed':
+                    resultsContainer.style.backgroundColor = '#c8e6c9'; // light green
+                    break;
+                case 'sad':
+                    resultsContainer.style.backgroundColor = '#bbdefb'; // light blue
+                    break;
+                default:
+                    resultsContainer.style.backgroundColor = '#f4f4f9'; // default background color
+            }
         });
     </script>
 </body>
+</html>