Update app.py

app.py

@@ -2,13 +2,13 @@ import gradio as gr
 from transformers import pipeline
 from PIL import Image
 
-# ---------- 1. Load model (AI part) ----------
+# ---------- 1. Load model ----------
 emotion_model = pipeline(
     task="image-classification",
     model="trpakov/vit-face-expression"
 )
 
-# ---------- 2. Mood → playlist mapping (Spotify-only, rule-based part) ----------
+# ---------- 2. Spotify-only playlists ----------
 mood_to_songs = {
     "happy": [
         "Happy – Pharrell Williams (https://open.spotify.com/search/Happy%20Pharrell%20Williams)",
@@ -42,165 +42,160 @@ mood_to_songs = {
     ]
 }
 
-
-# ---------- 3. Core logic ----------
-def analyze_image(image, min_confidence: float = 0.40) -> str:
-    """Main function: numpy image → markdown text."""
+# ---------- 3. AI logic ----------
+def analyze_image(image, min_confidence: float = 0.40):
     if image is None:
-        return "Please upload a photo with a clear view of your face 🙂"
+        return "Please upload a photo 🙂"
 
-    # Gradio gives a numpy array; convert to PIL
     img = Image.fromarray(image).convert("RGB")
-
-    # AI: emotion detection
     results = emotion_model(img)
+
     top = results[0]
     raw_label = top["label"].lower().strip()
     score = float(top["score"])
 
-    # Rule-based playlist choice
-    if (score < min_confidence) or (raw_label not in mood_to_songs):
-        final_mood = "neutral"
-    else:
-        final_mood = raw_label
+    mood = raw_label if raw_label in mood_to_songs and score >= min_confidence else "neutral"
+    songs = mood_to_songs[mood]
+
+    text = f"""
+### 🎵 Detected mood: **{mood.capitalize()}**
+**Confidence:** {score:.2f}
 
-    songs = mood_to_songs[final_mood]
+---
 
-    # Markdown output
-    text = f"### Detected mood: **{final_mood.capitalize()}** 🧠🎵\n"
-    text += f"Confidence: **{score:.2f}** (raw model label: `{raw_label}`)\n\n"
-    text += "#### Recommended Spotify tracks / playlists:\n"
+### 🔊 Spotify Recommendations:
+"""  
     for s in songs:
         text += f"- {s}\n"
 
-    text += "\n<details><summary>Show raw model predictions</summary>\n\n"
+    text += """
+<br>
+
+<details><summary>Raw model predictions</summary>
+"""
+
     for r in results:
-        text += f"- **{r['label']}**: {r['score']:.2f}\n"
-    text += "\n</details>"
+        text += f"- **{r['label']}** — {r['score']:.2f}\n"
+
+    text += "</details>"
 
     return text
 
 
-# ---------- 4. UI (Spotify x iOS inspired, using inline styles) ----------
+# ---------- 4. UI with TRUE Spotify Dark Mode ----------
 with gr.Blocks() as demo:
 
-    # Header card
-    gr.HTML(
-        """
+    # HEADER CARD
+    gr.HTML("""
 <div style="
-    background: radial-gradient(circle at top left, #1f2933 0, #020617 45%, #020617 100%);
-    border-radius: 24px;
-    padding: 20px 24px;
-    margin: 16px auto 20px auto;
-    max-width: 1100px;
-    box-shadow: 0 18px 45px rgba(0,0,0,0.6);
-    border: 1px solid rgba(148,163,184,0.25);
-    color: #e5e7eb;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
+    background:#181818;
+    border-radius:24px;
+    padding:24px;
+    margin:20px auto;
+    max-width:950px;
+    box-shadow:0 0 22px rgba(0,0,0,0.6);
+    border:1px solid #282828;
+    color:white;
+    font-family:system-ui,-apple-system,'SF Pro Text';
 ">
-  <div style="font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em;">
+  <div style="font-size:2.2rem;font-weight:700;">
     🌊 MoodWave
   </div>
-  <div style="opacity: 0.85; font-size: 0.95rem; margin-top: 4px;">
-    AI-powered mood-based music recommendations – 
-    <span style="color:#1DB954; font-weight:600;">Spotify only</span>
+  <div style="color:#1DB954;font-weight:600;font-size:1.1rem;margin-top:4px;">
+    Spotify Mood-Based Recommendations
   </div>
-  <p style="margin-top: 10px; font-size: 0.95rem; line-height: 1.5;">
-    Upload a selfie or any face picture and MoodWave will:<br>
-    1. Detect your <b>emotion</b> using a pre-trained computer vision model.<br>
-    2. Suggest a short <b>Spotify playlist</b> that matches your current vibe.
+  <p style="color:#B3B3B3;margin-top:8px;font-size:1rem;">
+    Upload a face photo. MoodWave detects your emotion and plays the right vibe.
   </p>
 </div>
-        """
-    )
+""")
 
     with gr.Row():
         # LEFT: upload
-        with gr.Column(scale=1):
-            gr.HTML(
-                """
+        with gr.Column():
+            gr.HTML("""
 <div style="
-    background: #111827;
-    border-radius: 20px;
-    padding: 16px 18px;
-    margin: 0 auto 12px auto;
-    max-width: 540px;
-    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
-    border: 1px solid rgba(55,65,81,0.7);
-    color: #e5e7eb;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
+    background:#181818;
+    border-radius:20px;
+    padding:18px;
+    margin:0 auto 16px auto;
+    max-width:450px;
+    border:1px solid #282828;
+    color:white;
+    font-family:system-ui,-apple-system,'SF Pro Text';
 ">
-  <h3 style="margin: 0 0 4px 0; font-size: 1.1rem;">1. Upload your photo</h3>
-  <p style="margin: 0; font-size: 0.9rem; opacity: 0.85;">
-    Use a clear face photo (like a profile picture) for better emotion detection.
-  </p>
+  <h3 style="margin:0 0 6px 0;">📸 Upload a photo</h3>
+  <p style="margin:0;color:#B3B3B3;">Use a clear face photo for best accuracy.</p>
 </div>
-                """
-            )
-            image_input = gr.Image(type="numpy", label="Face photo", height=320)
+""")
+
+            image_input = gr.Image(type="numpy", height=280, label="")
 
             submit_btn = gr.Button(
-                "🎧 Analyze mood & suggest Spotify music",
-                elem_id="mw-main-button"
+                "🎧 Analyze Mood",
+                elem_id="mw-btn"
             )
 
         # RIGHT: result
-        with gr.Column(scale=1):
-            gr.HTML(
-                """
+        with gr.Column():
+            gr.HTML("""
 <div style="
-    background: #111827;
-    border-radius: 20px;
-    padding: 16px 18px;
-    margin: 0 auto 12px auto;
-    max-width: 540px;
-    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
-    border: 1px solid rgba(55,65,81,0.7);
-    color: #e5e7eb;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
+    background:#181818;
+    border-radius:20px;
+    padding:18px;
+    margin:0 auto 16px auto;
+    max-width:450px;
+    border:1px solid #282828;
+    color:white;
+    font-family:system-ui,-apple-system,'SF Pro Text';
 ">
-  <h3 style="margin: 0 0 4px 0; font-size: 1.1rem;">2. Mood & recommendations</h3>
-  <p style="margin: 0; font-size: 0.9rem; opacity: 0.85;">
-    The detected mood and Spotify suggestions will appear below.
-  </p>
+  <h3 style="margin:0 0 6px 0;">🎶 Your Mood & Songs</h3>
+  <p style="margin:0;color:#B3B3B3;">Spotify playlist suggestions will appear here.</p>
 </div>
-                """
-            )
-            output_md = gr.Markdown(value="Waiting for an image…")
+""")
 
-    # Footer / technical card
-    gr.HTML(
-        """
+            output_md = gr.Markdown("Waiting for an image...", elem_id="mw-output")
+
+    # FOOTER CARD
+    gr.HTML("""
 <div style="
-    background: #020617;
-    border-radius: 20px;
-    padding: 16px 18px;
-    margin: 8px auto 24px auto;
-    max-width: 1100px;
-    box-shadow: 0 10px 28px rgba(0,0,0,0.6);
-    border: 1px solid rgba(30,64,175,0.6);
-    color: #e5e7eb;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
-    font-size: 0.9rem;
+    background:#181818;
+    border-radius:20px;
+    padding:18px;
+    margin:20px auto;
+    max-width:950px;
+    border:1px solid #282828;
+    color:#B3B3B3;
+    font-family:system-ui,-apple-system,'SF Pro Text';
+    font-size:0.95rem;
 ">
-  <h4 style="margin-top: 0;">How it works (technical view)</h4>
-  <ul style="margin-left: 1.1rem;">
-    <li>Uses a Hugging Face <code>transformers</code> <b>image-classification pipeline</b></li>
-    <li>Model: <code>trpakov/vit-face-expression</code> (Vision Transformer fine-tuned for facial expressions)</li>
-    <li>The predicted emotion label feeds a simple <b>rule-based recommender</b> (Python dictionary)</li>
-    <li>Built with <b>Python + Gradio</b>, deployed on <b>Hugging Face Spaces</b></li>
-    <li>All suggestions are <b>Spotify</b> search links for tracks or playlists</li>
-  </ul>
+  <h4 style="margin-top:0;color:white;">🧠 How it works</h4>
+  - Vision Transformer model (`trpakov/vit-face-expression`)  
+  - Hugging Face `transformers` pipeline  
+  - Custom rule-based Spotify recommender system  
+  - Fully deployed on Hugging Face Spaces  
 </div>
-        """
-    )
-
-    # Wire button to function
-    submit_btn.click(
-        fn=analyze_image,
-        inputs=image_input,
-        outputs=output_md
-    )
+""")
+
+    # Make button Spotify-green and circular
+    gr.HTML("""
+<style>
+#mw-btn {
+    background:#1DB954 !important;
+    color:black !important;
+    border:none !important;
+    font-weight:600 !important;
+    border-radius:999px !important;
+    padding:12px 26px !important;
+    font-size:1rem !important;
+}
+#mw-btn:hover {
+    filter:brightness(1.08);
+}
+</style>
+""")
+
+    submit_btn.click(analyze_image, image_input, output_md)
 
 
 if __name__ == "__main__":