Update app.py

app.py

@@ -82,17 +82,121 @@ def analyze_image(image, min_confidence: float = 0.40) -> str:
     return text
 
 
-# ---------- 4. Simple, stable Gradio interface ----------
-demo = gr.Interface(
-    fn=analyze_image,
-    inputs=gr.Image(type="numpy", label="Upload a face photo"),
-    outputs=gr.Markdown(label="MoodWave result"),
-    title="🌊 MoodWave – AI Music Recommender (Spotify)",
-    description=(
-        "Upload a selfie or any face picture. MoodWave uses a pre-trained computer vision model "
-        "to detect your emotion and then suggests Spotify tracks or playlists that match your vibe."
-    ),
-)
+# ---------- 4. UI with Blocks + inline CSS (Spotify x iOS aesthetic) ----------
+with gr.Blocks() as demo:
+    # Global styles + header (inline CSS so it works on older Gradio)
+    gr.Markdown(
+        """
+<style>
+body {
+    background: radial-gradient(circle at top left, #101418 0, #02040a 45%, #02040a 100%);
+    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>
+  </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>
+</div>
+        """
+    )
+
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.Markdown(
+                """
+<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>
+                """
+            )
+            image_input = gr.Image(type="numpy", label="Face photo", height=320)
+            submit_btn = gr.Button("Analyze mood & suggest Spotify music")
+
+        with gr.Column(scale=1):
+            gr.Markdown(
+                """
+<div class="mw-card">
+  <h3>2. Mood & recommendations</h3>
+  <p>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>
+    <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>
+</div>
+                """
+            )
+
+    # Wire button to function
+    submit_btn.click(
+        fn=analyze_image,
+        inputs=image_input,
+        outputs=output_md
+    )
+
 
 if __name__ == "__main__":
     demo.launch()