Update app.py

app.py

@@ -1,84 +1,103 @@
-import gradio as gr
-import joblib
-import numpy as np
-from sklearn.preprocessing import LabelEncoder
-import warnings
-
-# Suppress warnings
-warnings.filterwarnings("ignore")
-
-# Load model and encoder
-emotion_model = joblib.load("emotion_model.pkl")
-song_encoder = joblib.load("song_encoder.pkl")
-emotion_decoder = joblib.load("emotion_decoder.pkl")  # For converting predicted label to text
-
-css = """
-body {
-    background-image: url('https://i.postimg.cc/Y0gQkvSb/music-mood-bg.jpg');
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-}
-.gradio-container, .gradio-interface, .gradio-box, .title-box {
-    background-color: rgba(255, 255, 255, 0.7) !important;
-    border-radius: 10px !important;
-    padding: 20px !important;
-}
-.track-btn {
-    background: linear-gradient(135deg, #6a11cb, #2575fc) !important;
-    border: none !important;
-    color: white !important;
-    margin-top: 15px !important;
-    font-weight: bold !important;
-    border-radius: 25px !important;
-    padding: 10px 25px !important;
-    font-size: 16px !important;
-    box-shadow: 0 4px 8px rgba(106, 17, 203, 0.3) !important;
-    transition: all 0.3s ease !important;
-}
-.track-btn:hover {
-    background: linear-gradient(135deg, #2575fc, #6a11cb) !important;
-    transform: translateY(-2px) !important;
-}
-"""
-
-def predict_emotion(song_name):
-    try:
-        # Encode input song
-        encoded_song = song_encoder.transform([song_name])
-        emotion_label = emotion_model.predict(np.array(encoded_song).reshape(1, -1))[0]
-        emotion = emotion_decoder.inverse_transform([emotion_label])[0]
-    except Exception as e:
-        return f"<p style='color: red;'>Error: {str(e)}</p>", gr.update(visible=False)
-    
-    return f"""
-    <div style='text-align: center;'>
-        <h2>🎵 Mood Detected 🎵</h2>
-        <p>Your current emotional vibe is:</p>
-        <h1 style='font-size: 2.5em; color: #6a11cb;'>{emotion}</h1>
-    </div>
-    """, gr.update(visible=True)
-
-def clear_form():
-    return "", "", gr.update(visible=False)
-
-# Gradio interface
-with gr.Blocks(title="🎧 Song2Mood Tracker", theme=gr.themes.Soft(), css=css) as app:
-    with gr.Column(elem_classes="title-box"):
-        gr.Markdown("""
-        <div style="text-align: center;">
-            <h1>🎧 Song2Mood Tracker</h1>
-            <p>Type a song that reflects your vibe right now—and we'll tell you your mood.</p>
-        </div>
-        """)
-    
-    song_input = gr.Textbox(label="🎵 What song are you listening to?", placeholder="e.g., Heather by Conan Gray")
-
-    submit_btn = gr.Button("Track Emotion 🎶", elem_classes="track-btn")
-    output_html = gr.HTML()
-    clear_btn = gr.Button("Try Another Song", visible=False, elem_classes="track-btn")
-
-    submit_btn.click(predict_emotion, inputs=song_input, outputs=[output_html, clear_btn])
-    clear_btn.click(clear_form, inputs=None, outputs=[output_html, song_input, clear_btn])
-
-app.launch()
+import gradio as gr
+import joblib
+import numpy as np
+import warnings
+
+# Suppress warnings
+warnings.filterwarnings("ignore")
+
+# Load model and encoders
+emotion_model = joblib.load("emotion_model.pkl")
+song_encoder = joblib.load("song_encoder.pkl")
+emotion_decoder = joblib.load("emotion_decoder.pkl")
+
+# CSS for funky retro aesthetic
+css = """
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+body {
+    background-image: url('https://i.postimg.cc/tRnqqyLn/retrowave.gif');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    font-family: 'Press Start 2P', cursive;
+    color: #00ffff;
+}
+
+.gradio-container, .gradio-interface, .gradio-box, .title-box {
+    background-color: rgba(0, 0, 0, 0.75) !important;
+    border-radius: 15px !important;
+    padding: 25px !important;
+    box-shadow: 0 0 20px #00ffff;
+    font-family: 'Press Start 2P', cursive !important;
+    color: #00ffff;
+}
+
+input, textarea, .gr-textbox, .gr-input {
+    background-color: #111 !important;
+    color: #00ffff !important;
+    border: 2px solid #00ffff !important;
+    font-family: 'Press Start 2P', cursive !important;
+}
+
+.track-btn {
+    background: linear-gradient(135deg, #ff00cc, #3333ff) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: bold !important;
+    border-radius: 10px !important;
+    padding: 10px 25px !important;
+    font-size: 12px !important;
+    font-family: 'Press Start 2P', cursive !important;
+    box-shadow: 0 0 10px #ff00cc;
+    transition: all 0.3s ease !important;
+    margin-top: 20px !important;
+}
+.track-btn:hover {
+    transform: scale(1.05);
+    background: linear-gradient(135deg, #3333ff, #ff00cc) !important;
+}
+"""
+
+def predict_emotion(song_name):
+    try:
+        encoded_song = song_encoder.transform([song_name])
+        emotion_label = emotion_model.predict(np.array(encoded_song).reshape(1, -1))[0]
+        emotion = emotion_decoder.inverse_transform([emotion_label])[0]
+    except Exception as e:
+        return f"<p style='color: #ff4444;'>Error: {str(e)}</p>", gr.update(visible=False)
+
+    return f"""
+    <div style='text-align: center; font-family: "Press Start 2P", cursive;'>
+        <h2 style="color: #ff00cc;">💽 Mood Tracker Results 💽</h2>
+        <p>Your current pixel-powered emotion is:</p>
+        <h1 style='font-size: 2.2em; color: #00ffff;'>{emotion.upper()}</h1>
+    </div>
+    """, gr.update(visible=True)
+
+def clear_form():
+    return "", "", gr.update(visible=False)
+
+# Gradio interface
+with gr.Blocks(title="🎮 8-Bit Song2Mood Tracker", theme=gr.themes.Soft(), css=css) as app:
+    with gr.Column(elem_classes="title-box"):
+        gr.Markdown("""
+        <div style="text-align: center;">
+            <h1 style="color: #ff00cc;">🎮 SONG2MOOD TRACKER 🎧</h1>
+            <p>Type a song. Get the vibe. Unlock the emotion.</p>
+        </div>
+        """)
+
+    song_input = gr.Textbox(
+        label="🎵 Type your song below:",
+        placeholder="e.g., Blinding Lights by The Weeknd"
+    )
+
+    submit_btn = gr.Button("🎚️ Decode My Mood", elem_classes="track-btn")
+    output_html = gr.HTML()
+    clear_btn = gr.Button("🔁 Try Another Track", visible=False, elem_classes="track-btn")
+
+    submit_btn.click(predict_emotion, inputs=song_input, outputs=[output_html, clear_btn])
+    clear_btn.click(clear_form, inputs=None, outputs=[output_html, song_input, clear_btn])
+
+app.launch()