Update app.py

app.py

@@ -46,7 +46,6 @@ mood_to_songs = {
 # ---------- 3. Core logic ----------
 def analyze_image(image, min_confidence: float = 0.40) -> str:
     """Main function: numpy image → markdown text."""
-
     if image is None:
         return "Please upload a photo with a clear view of your face 🙂"
 
@@ -82,104 +81,110 @@ def analyze_image(image, min_confidence: float = 0.40) -> str:
     return text
 
 
-# ---------- 4. UI with Blocks + inline CSS (Spotify x iOS aesthetic) ----------
+# ---------- 4. UI (Spotify x iOS inspired, using inline styles) ----------
 with gr.Blocks() as demo:
-    # Global styles + header (inline CSS so it works on older Gradio)
-    gr.Markdown(
+
+    # Header card
+    gr.HTML(
         """
-<style>
-body {
-    background: radial-gradient(circle at top left, #101418 0, #02040a 45%, #02040a 100%);
+<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;
-}
-.gradio-container {
-    max-width: 1100px !important;
-    margin: 0 auto !important;
-    padding-top: 24px;
-}
-.mw-card {
-    background: rgba(15,23,42,0.95);
-    border-radius: 20px;
-    padding: 18px 20px;
-    box-shadow: 0 18px 45px rgba(0,0,0,0.45);
-    border: 1px solid rgba(148,163,184,0.22);
-}
-.mw-title {
-    font-size: 2.1rem;
-    font-weight: 700;
-    letter-spacing: -0.03em;
-}
-.mw-subtitle {
-    opacity: 0.85;
-    font-size: 0.95rem;
-}
-.mw-highlight {
-    color: #22c55e;
-    font-weight: 600;
-}
-.gr-button {
-    border-radius: 999px !important;
-    background: linear-gradient(135deg, #1DB954, #16a34a) !important;
-    color: #0b0f16 !important;
-    font-weight: 600 !important;
-    border: none !important;
-    padding: 0.65rem 1.6rem !important;
-    font-size: 0.98rem !important;
-}
-.gr-button:hover {
-    filter: brightness(1.04);
-}
-.gr-image img {
-    border-radius: 22px !important;
-}
-</style>
-
-<div class="mw-card">
-  <div class="mw-title">🌊 MoodWave</div>
-  <div class="mw-subtitle">
-    AI-powered mood-based music recommendations – <span class="mw-highlight">Spotify only</span>
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
+">
+  <div style="font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em;">
+    🌊 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>
-  <p>
-    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="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>
 </div>
         """
     )
 
     with gr.Row():
+        # LEFT: upload
         with gr.Column(scale=1):
-            gr.Markdown(
+            gr.HTML(
                 """
-<div class="mw-card">
-  <h3>1. Upload your photo</h3>
-  <p>Use a clear face photo (like a profile picture) for better emotion detection.</p>
+<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;
+">
+  <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>
 </div>
                 """
             )
             image_input = gr.Image(type="numpy", label="Face photo", height=320)
-            submit_btn = gr.Button("Analyze mood & suggest Spotify music")
 
+            submit_btn = gr.Button(
+                "🎧 Analyze mood & suggest Spotify music",
+                elem_id="mw-main-button"
+            )
+
+        # RIGHT: result
         with gr.Column(scale=1):
-            gr.Markdown(
+            gr.HTML(
                 """
-<div class="mw-card">
-  <h3>2. Mood & recommendations</h3>
-  <p>The detected mood and Spotify suggestions will appear below.</p>
+<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;
+">
+  <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>
 </div>
                 """
             )
             output_md = gr.Markdown(value="Waiting for an image…")
 
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown(
-                """
-<div class="mw-card">
-  <h4>How it works (technical view)</h4>
-  <ul>
+    # Footer / technical 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;
+">
+  <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>
@@ -187,8 +192,8 @@ body {
     <li>All suggestions are <b>Spotify</b> search links for tracks or playlists</li>
   </ul>
 </div>
-                """
-            )
+        """
+    )
 
     # Wire button to function
     submit_btn.click(