Update app.py

app.py

@@ -18,6 +18,8 @@ from huggingface_hub import InferenceClient
 import spotipy
 from spotipy.oauth2 import SpotifyClientCredentials
 from difflib import SequenceMatcher
+import html as html_lib 
+
 
 # ---------- Load data ----------
 CLEAN_CSV_PATH = "df_combined_clean.csv"
@@ -168,54 +170,431 @@ def make_bg_style_html(query=None):
     return f"<style>:root {{--hf-bg-top:{base_top};--hf-bg-bottom:{base_bottom};}}</style>"
 
 def results_to_lux_html(results, query):
+    ...
+# ---------- CSS ----------
+app_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter...
+...
+# ---------- Background palette + helper ----------
+
+BG_PALETTE = [
+    ("#1e293b", "#020617"),
+    ("#0f172a", "#020617"),
+    ("#0b1120", "#020617"),
+    ("#111827", "#020617"),
+    ("#1f2937", "#020617"),
+]
+
+def make_bg_style_html():
+    """Pick a gradient pair from the palette and emit a <style> that sets CSS vars."""
+    top, bottom = random.choice(BG_PALETTE)
+    return f"<style>:root {{ --hf-bg-top: {top}; --hf-bg-bottom: {bottom}; }}</style>"
+
+# ---------- Theming + helpers ----------
+
+def infer_theme(query: str):
+    q = (query or "").lower()
+    if any(w in q for w in ["night", "drive", "highway", "city", "neon"]):
+        return {"name": "Midnight Drive", "emoji": "🌃"}
+    if any(w in q for w in ["party", "dance", "club", "crowd", "festival"]):
+        return {"name": "Nightclub Neon", "emoji": "🎉"}
+    if any(w in q for w in ["shower", "bathroom", "mirror", "getting ready"]):
+        return {"name": "Mirror Concert", "emoji": "🚿"}
+    if any(w in q for w in ["dog", "pet", "cat", "bloopers"]):
+        return {"name": "Pet Bloopers", "emoji": "🐶"}
+    # default
+    return {"name": "", "emoji": "🎧"}
+
+# ---------- DataFrame -> HTML ----------
+
+def results_to_lux_html(results: pd.DataFrame, query: str) -> str:
     if results is None or results.empty:
-        return "<div class='lux-empty'>🎧 Describe a vibe to start.</div>"
-    cards = []
-    for _, r in results.iterrows():
-        cover = f"<img src='{r['album_image']}' class='lux-cover'/>" if isinstance(r.get("album_image"), str) else "♪"
-        btn = f"<a href='{r['spotify_url']}' target='_blank' class='lux-btn'>▶ Play on Spotify</a>" if isinstance(r.get("spotify_url"), str) else ""
-        sim = f"{int(r['similarity_pct'])}%" if pd.notnull(r['similarity_pct']) else ""
-        vibe = r['vibes']
-        chip = "🎲 random pick" if r['is_random'] else ""
-        cards.append(
-            f"<div class='lux-card'>{cover}<div class='lux-meta'><h3>{r['song']}</h3><p>{r['artist']}</p><span>{vibe}</span> {sim} {chip}{btn}</div></div>"
-        )
-    return "<div id='lux-wrapper'>" + "".join(cards) + "</div>"
+        return """
+        <div id="lux-wrapper">
+          <div id="lux-header">
+            <div class="lux-subline">HarmoniFind • Semantic playlist</div>
+            <h1>🎧 Describe a vibe to start</h1>
+            <p style="font-size:0.9rem;color:rgba(156,163,175,0.95);margin-top:8px;">
+              Type a brief above, or click <strong>🎲</strong> for a fun prompt.
+            </p>
+          </div>
+        </div>
+        """
+
+    theme = infer_theme(query)
+    query_safe = html_lib.escape(query or "")
+    emoji = theme["emoji"]
+
+    cards_html = ""
+    tracks_plain = []
+
+    for _, row in results.iterrows():
+        raw_artist = str(row.get("artist", ""))
+        raw_song   = str(row.get("song", ""))
+
+        artist = html_lib.escape(raw_artist)
+        song   = html_lib.escape(raw_song)
+
+        # for clipboard list
+        tracks_plain.append(f"{raw_song} — {raw_artist}")
+
+        is_random = bool(row.get("is_random", False))
+
+        sim_pct = row.get("similarity_pct", None)
+        if pd.isna(sim_pct) or is_random:
+            sim_display = "—"
+            score_bg = "rgba(148,163,184,0.2)"
+            vibes = "pure random"
+        else:
+            sim_display = f"{float(sim_pct):.1f}%"
+            score_bg = "rgba(34,197,94,0.14)"
+            vibes = html_lib.escape(str(row.get("vibes", "")))
+
+        url = row.get("spotify_url", None)
+        img = row.get("album_image", None)
+
+        if isinstance(img, str) and img:
+            cover = f'<div class="lux-cover"><img src="{html_lib.escape(img)}"></div>'
+        else:
+            cover = '<div class="lux-cover">♪</div>'
+
+        if isinstance(url, str) and url:
+            play_btn = f'<a class="lux-play-btn" href="{html_lib.escape(url)}" target="_blank">▶︎ Play on Spotify</a>'
+        else:
+            play_btn = ""
+
+        random_chip = ""
+        if is_random:
+            random_chip = '<span class="lux-chip">🎲 random pick</span>'
+
+        cards_html += f"""
+        <div class="lux-card">
+          {cover}
+          <div class="lux-main">
+            <div class="lux-title-row">
+              <div>
+                <div class="lux-title">{song}</div>
+                <div class="lux-artist">{artist}</div>
+              </div>
+              <div class="lux-score">
+                <div class="lux-score-badge" style="background:{score_bg};">{sim_display}</div>
+                <div class="lux-vibes">{vibes}</div>
+              </div>
+            </div>
+            <div class="lux-bottom-row">
+              {play_btn}
+              {random_chip}
+            </div>
+          </div>
+        </div>
+        """
+
+    # Build track list text for clipboard
+    header_line = f"HarmoniFind results for: {query or ''}".strip()
+    if not header_line:
+        header_line = "HarmoniFind results"
+    list_text = header_line + "\n\n" + "\n".join(tracks_plain)
+    # escape for JS string
+    js_text = (
+        list_text
+        .replace("\\", "\\\\")
+        .replace("'", "\\'")
+        .replace("\n", "\\n")
+    )
 
-def get_random_vibe():
-    topics = ["late-night drives","dog bloopers","breakups","sunset beaches","college nostalgia"]
-    perspectives = ["first-person","third-person","group","inner monologue"]
-    contexts = ["dreamy","chaotic","romantic","melancholic"]
-    return f"Lyrics about {random.choice(topics)}, told in {random.choice(perspectives)}, {random.choice(contexts)}."
+    meta_html = f"""
+    <p>Semantic matches first, plus optional 🎲 discovery if you enabled it.</p>
+    <div class="lux-meta">
+      <span class="lux-badge">Tracks: {len(results)}</span>
+      <a class="lux-pill" href="javascript:void(0);" onclick="navigator.clipboard.writeText('{js_text}');">
+        🔗 Copy Your HarmoniFinds
+      </a>
+    </div>
+    """
 
-def clear_all():
-    return "", "<div class='lux-empty'>🎧 Describe a vibe to start.</div>", make_bg_style_html()
+    html = f"""
+    <div id="lux-wrapper">
+      <div id="lux-header">
+        <div class="lux-subline">HarmoniFind • Semantic playlist</div>
+        <h1>{emoji} {query_safe or "Untitled vibe"}</h1>
+        {meta_html}
+      </div>
+      <div class="lux-playlist-wrapper">
+        {cards_html}
+      </div>
+    </div>
+    """
+    return html
+
+# ---------- Search + bg wrapper ----------
+
+def core_search_html(query, k, random_extra):
+    # LLaMA expansion always ON
+    results = search_pipeline(
+        query=query or "",
+        k=int(k),
+        random_extra=int(random_extra),
+        use_llama=True,
+    )
+    return results_to_lux_html(results, query or "")
 
 def search_with_bg(query, k, random_extra):
-    res = search_pipeline(query, int(k), int(random_extra), use_llama=True)
-    return results_to_lux_html(res, query), make_bg_style_html(query)
+    """Return playlist HTML + a new background style snippet."""
+    playlist_html = core_search_html(query, k, random_extra)
+    bg_style_html = make_bg_style_html()
+    return playlist_html, bg_style_html
+
+def surprise_brief():
+    return get_random_vibe()
+
+def clear_all():
+    # reset query, results (empty state), and bg
+    empty_html = results_to_lux_html(None, "")
+    return "", empty_html, make_bg_style_html()
 
 # ---------- CSS ----------
+
 app_css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800;900&display=swap');
-body,.gradio-container{
-  background:radial-gradient(circle at 50% 0%,var(--hf-bg-top,#1e293b),var(--hf-bg-bottom,#020617) 80%)!important;
-  color:#e5e7eb;font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
-}
-.lux-card{background:rgba(255,255,255,0.05);border-radius:1rem;padding:1rem;margin:0.5rem;}
-.lux-cover{width:100%;border-radius:1rem;}
-.lux-btn{display:inline-block;margin-top:0.5rem;padding:0.4rem 0.8rem;background:#1db954;border-radius:9999px;color:white;text-decoration:none;}
-.primary-btn{background:#1db954;color:white;border-radius:1rem;}
-.secondary-btn{background:#334155;color:white;border-radius:1rem;}
+
+/* Shell + base uses CSS variables so we can change bg from Python */
+body, .gradio-container {
+  background: radial-gradient(
+      circle at 50% 0%,
+      var(--hf-bg-top, #1e293b),
+      var(--hf-bg-bottom, #020617) 80%
+  ) !important;
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
+  color: #e5e7eb;
+}
+.gradio-container .block {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* Inputs */
+.gradio-container input,
+.gradio-container textarea {
+  background: rgba(15,23,42,0.8) !important;
+  border: 1px solid rgba(148,163,184,0.6) !important;
+  color: #f9fafb !important;
+  border-radius: 12px !important;
+  font-size: 0.95rem !important;
+  transition: all 0.18s ease;
+}
+.gradio-container input:focus,
+.gradio-container textarea:focus {
+  border-color: #10b981 !important;
+  box-shadow: 0 0 0 2px rgba(16,185,129,0.3) !important;
+}
+
+/* Buttons */
+button.primary-btn {
+  background: linear-gradient(135deg,#10b981,#059669) !important;
+  border: none !important;
+  color: #ecfdf5 !important;
+  font-weight: 700 !important;
+  border-radius: 999px !important;
+  padding-inline: 18px !important;
+}
+button.primary-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 22px -8px rgba(16,185,129,0.6);
+}
+button.secondary-btn {
+  background: rgba(15,23,42,0.9) !important;
+  color: #cbd5f5 !important;
+  border-radius: 999px !important;
+  border: 1px solid rgba(148,163,184,0.8) !important;
+  padding-inline: 14px !important;
+}
+button.secondary-btn:hover {
+  background: rgba(30,64,175,0.9) !important;
+}
+
+/* Top shell + header */
+#hf-shell {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 24px 12px 40px;
+}
+#lux-header {
+  text-align: left;
+  padding: 14px 4px 8px;
+}
+#lux-header h1 {
+  font-size: 2.4rem;
+  font-weight: 900;
+  background: linear-gradient(to right,#f9fafb,#9ca3af);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin: 0;
+  letter-spacing: -0.06em;
+}
+.lux-subline {
+  text-transform: uppercase;
+  letter-spacing: 0.20em;
+  font-size: 0.75rem;
+  color: #10b981;
+  margin-bottom: 6px;
+  font-weight: 600;
+}
+#lux-header p {
+  color: #9ca3af;
+  font-size: 0.9rem;
+  margin-top: 8px;
+}
+
+/* Meta row for tracks + copy-link */
+.lux-meta {
+  display:flex;
+  flex-wrap:wrap;
+  gap:8px;
+  margin-top:8px;
+  align-items:center;
+  font-size:0.8rem;
+  color:#e5e7eb;
+}
+.lux-badge {
+  font-size: 0.75rem;
+  padding: 6px 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(148,163,184,0.6);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+.lux-pill {
+  font-size: 0.75rem;
+  padding: 6px 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(148,163,184,0.6);
+  background: rgba(255,255,255,0.04);
+  text-decoration:none;
+  color:#e5e7eb;
+}
+.lux-pill:hover {
+  background: rgba(255,255,255,0.08);
+}
+
+/* Playlist wrapper + cards */
+#lux-wrapper {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 24px 12px 40px;
+}
+.lux-playlist-wrapper {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.lux-card {
+  display: flex;
+  gap: 14px;
+  padding: 12px 14px;
+  border-radius: 18px;
+  background: rgba(15,23,42,0.94);
+  border: 1px solid rgba(148,163,184,0.22);
+}
+.lux-cover {
+  width: 72px;
+  height: 72px;
+  border-radius: 14px;
+  overflow: hidden;
+  background: #020617;
+  flex-shrink: 0;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:#6b7280;
+  font-size: 20px;
+}
+.lux-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.lux-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.lux-title-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  align-items: flex-start;
+}
+.lux-title {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #e5e7eb;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.lux-artist {
+  font-size: 0.8rem;
+  color: #9ca3af;
+}
+.lux-score {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+.lux-score-badge {
+  font-size: 0.7rem;
+  padding: 3px 8px;
+  border-radius: 999px;
+  background: rgba(34,197,94,0.14);
+  color: #bbf7d0;
+}
+.lux-vibes {
+  font-size: 0.7rem;
+  color: #9ca3af;
+}
+.lux-bottom-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-top: 2px;
+}
+.lux-play-btn {
+  display:inline-flex;
+  align-items:center;
+  gap:6px;
+  padding:7px 12px;
+  border-radius:999px;
+  background:#22c55e;
+  color:#022c22;
+  font-size:0.8rem;
+  font-weight:600;
+  text-decoration:none;
+}
+.lux-chip {
+  font-size:0.65rem;
+  border-radius:999px;
+  padding:3px 7px;
+  background:rgba(148,163,184,0.18);
+  color:#e5e7eb;
+}
 """
 
 # ---------- Gradio UI ----------
+
 with gr.Blocks(title="HarmoniFind") as demo:
-    # inject CSS manually (Gradio version on Spaces doesn't support css=...)
+    # inject CSS manually (HF version of Gradio may not support css=...)
     gr.HTML(f"<style>{app_css}</style>")
 
+    # dynamic bg style holder (updated on each search)
     bg_style = gr.HTML(make_bg_style_html())
 
+    # Header
     gr.HTML("""
     <div id="hf-shell">
       <div id="lux-header">
@@ -227,6 +606,7 @@ with gr.Blocks(title="HarmoniFind") as demo:
     """)
 
     with gr.Column():
+        # Textbox + stacked buttons on the right
         with gr.Row(variant="compact"):
             input_box = gr.Textbox(
                 placeholder="Lyrics about a carefree road trip with too many snack stops",
@@ -239,6 +619,7 @@ with gr.Blocks(title="HarmoniFind") as demo:
                 surprise_btn = gr.Button("🎲 Surprise me", elem_classes=["secondary-btn"])
                 clear_btn    = gr.Button("Clear", elem_classes=["secondary-btn"])
 
+        # Sliders only (LLaMA always on)
         with gr.Accordion("Search settings", open=False):
             with gr.Row():
                 k_slider    = gr.Slider(5, 50, value=10, step=1, label="# semantic matches")
@@ -246,6 +627,7 @@ with gr.Blocks(title="HarmoniFind") as demo:
 
     output_html = gr.HTML()
 
+    # Search updates playlist + bg
     input_box.submit(
         search_with_bg,
         [input_box, k_slider, rand_slider],
@@ -256,14 +638,18 @@ with gr.Blocks(title="HarmoniFind") as demo:
         [input_box, k_slider, rand_slider],
         [output_html, bg_style],
     )
+
+    # Surprise: fill box, then search + bg
     surprise_btn.click(
-        get_random_vibe,
+        surprise_brief,
         outputs=input_box,
     ).then(
         search_with_bg,
         [input_box, k_slider, rand_slider],
         [output_html, bg_style],
     )
+
+    # Clear
     clear_btn.click(
         clear_all,
         None,
@@ -271,4 +657,6 @@ with gr.Blocks(title="HarmoniFind") as demo:
     )
 
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+    port = int(os.getenv("PORT", 7860))
+    demo.launch(server_name="0.0.0.0", server_port=port)
+