Final Release: Premium Glassmorphism UI & Ansari Bilal Branding

README.md

@@ -11,18 +11,26 @@ license: mit
 short_description: Turn your feelings into AI-generated music
 ---
 
-# 🎵 Emotion2Music AI
+# 🎵 Emotion2Music AI — Final Release
 
-**Turn your feelings into music — powered by AI.**
+**Developed by [Ansari Bilal](https://ansaribilal.com)**
 
-This app analyzes your mood from a text description and instantly generates a custom music clip that matches your emotional tone.
+Turn your feelings into a cinematic musical experience. This premium application analyzes your complex emotional states and uses Meta's MusicGen to compose a custom soundtrack that resonates with your soul.
 
-## How It Works
+## ✨ Premium Features
 
-1. **Describe your mood** — Type how you're feeling (e.g., *"I feel hopeful but a little sad"*)
-2. **AI detects your emotion** — A fine-tuned DistilRoBERTa model classifies your text into one of 7 emotions
-3. **Music is generated** — Meta's MusicGen creates a unique audio clip matching your detected mood
-4. **Listen & download** — Play the generated track right in the browser
+- **Advanced Emotional Intelligence** — Uses DistilRoBERTa to detect 7 distinct emotional states with confidence visualization.
+- **Glassmorphism UI** — High-end, responsive interface with deep blurs and mesh gradients.
+- **Adaptive Duration** — Control your composition length (5s - 15s).
+- **Pro Performance** — Built-in ZeroGPU support for near-instant (3s-5s) music generation on Hugging Face PRO.
+- **Queue System** — Robust handling of multiple requests with real-time progress tracking.
+
+## 🛠️ How It Works
+
+1. **Express Yourself** — Describe your current state in the text area.
+2. **AI Analysis** — The AI identifies your dominant emotion and creates a descriptive musical prompt.
+3. **Pure Composition** — MusicGen generates High-Fidelity 32kHz audio matching the prompt.
+4. **Instant Playback** — Listen and download your unique AI-generated track.
 
 ## Supported Emotions
 

app.py

@@ -208,98 +208,154 @@ else:
 
 
 # ---------------------------------------------------------------------------
-# Custom CSS for premium dark theme
+# Custom CSS for Premium Glassmorphism Theme
 # ---------------------------------------------------------------------------
 CUSTOM_CSS = """
-/* Global */
+/* Import modern font */
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+
+:root {
+    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
+    --glass-bg: rgba(255, 255, 255, 0.03);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+}
+
+/* Base Container & Background */
 .gradio-container {
-    max-width: 900px !important;
+    max-width: 1100px !important;
     margin: 0 auto !important;
+    background: transparent !important;
+    font-family: 'Space+Grotesk', sans-serif !important;
 }
 
-/* Header gradient */
-#header-text {
+/* Mesh Gradient Background for the whole page */
+body {
+    background-color: #05070a !important;
+    background-image: 
+        radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
+        radial-gradient(at 50% 0%, hsla(225,39%,20%,1) 0, transparent 50%), 
+        radial-gradient(at 100% 0%, hsla(339,49%,20%,1) 0, transparent 50%) !important;
+    background-attachment: fixed !important;
+}
+
+/* Glassmorphism Cards */
+.glass-card {
+    background: var(--glass-bg) !important;
+    backdrop-filter: blur(16px) !important;
+    -webkit-backdrop-filter: blur(16px) !important;
+    border: 1px solid var(--glass-border) !important;
+    border-radius: 24px !important;
+    padding: 20px !important;
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
+    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
+}
+
+.glass-card:hover {
+    box-shadow: 0 12px 48px 0 rgba(0, 0, 0, 0.5) !important;
+}
+
+/* Branding & Typography */
+#brand-header {
     text-align: center;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+    padding: 40px 0;
+}
+
+.main-title {
+    background: var(--primary-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    background-clip: text;
-    font-size: 2.8em !important;
+    font-size: 3.5rem !important;
     font-weight: 800 !important;
-    margin-bottom: 0 !important;
-    padding-bottom: 0 !important;
+    letter-spacing: -0.05em !important;
+    margin-bottom: 8px !important;
 }
 
-#subtitle-text {
-    text-align: center;
-    font-size: 1.15em !important;
-    opacity: 0.8;
-    margin-top: 0 !important;
+.creator-tag {
+    color: var(--text-muted);
+    font-size: 1.1rem !important;
+    font-weight: 400 !important;
+    letter-spacing: 0.1em !important;
+    text-transform: uppercase;
 }
 
-/* Generate button */
-#generate-btn {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    border: none !important;
-    color: white !important;
-    font-size: 1.1em !important;
+.creator-link {
+    color: #a855f7 !important;
+    text-decoration: none !important;
     font-weight: 600 !important;
-    padding: 12px 32px !important;
-    border-radius: 12px !important;
-    transition: all 0.3s ease !important;
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+    border-bottom: 2px solid transparent;
+    transition: all 0.3s ease;
 }
 
-#generate-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
+.creator-link:hover {
+    border-bottom: 2px solid #a855f7;
+    text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
 }
 
-/* Input styling */
+/* Component Styling */
 #mood-input textarea {
-    font-size: 1.05em !important;
-    border-radius: 10px !important;
-    border: 2px solid rgba(102, 126, 234, 0.3) !important;
-    transition: border-color 0.3s ease !important;
+    background: rgba(0, 0, 0, 0.2) !important;
+    border: 1px solid var(--glass-border) !important;
+    border-radius: 16px !important;
+    color: var(--text-main) !important;
+    font-size: 1.1rem !important;
+    padding: 16px !important;
+}
+
+/* Primary Button */
+#generate-btn {
+    background: var(--primary-gradient) !important;
+    border: none !important;
+    border-radius: 16px !important;
+    color: white !important;
+    font-weight: 700 !important;
+    font-size: 1.2rem !important;
+    padding: 16px 32px !important;
+    cursor: pointer;
+    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3) !important;
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
 }
 
-#mood-input textarea:focus {
-    border-color: #667eea !important;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
+#generate-btn:hover {
+    transform: scale(1.02) translateY(-2px) !important;
+    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5) !important;
 }
 
-/* Results sections */
-#emotion-results {
-    border-radius: 12px !important;
-    border: 1px solid rgba(102, 126, 234, 0.2) !important;
+/* Slider styling */
+.slider-container {
+    padding-top: 20px !important;
 }
 
-#audio-output {
-    border-radius: 12px !important;
-    border: 1px solid rgba(102, 126, 234, 0.2) !important;
+/* Result visualization */
+.emotion-bar-container {
+    margin-top: 10px !important;
 }
 
-#gen-info {
-    border-radius: 12px !important;
-    opacity: 0.85;
+/* Audio Player */
+audio {
+    width: 100% !important;
+    filter: invert(1) hue-rotate(180deg) brightness(1.5);
 }
 
-/* Duration slider */
-#duration-slider input[type="range"] {
-    accent-color: #667eea !important;
+/* Footer Styling */
+#footer-area {
+    margin-top: 60px;
+    padding: 40px;
+    border-top: 1px solid var(--glass-border);
+    text-align: center;
 }
 
-/* Examples section */
-.examples-table {
-    border-radius: 10px !important;
+.footer-link {
+    margin: 0 15px;
+    color: var(--text-muted) !important;
+    text-decoration: none !important;
+    font-size: 0.95rem;
+    transition: color 0.3s ease;
 }
 
-/* Footer */
-#footer-text {
-    text-align: center;
-    opacity: 0.5;
-    font-size: 0.85em !important;
-    margin-top: 20px !important;
+.footer-link:hover {
+    color: var(--text-main) !important;
 }
 """
 
@@ -313,77 +369,79 @@ theme = gr.themes.Soft(
     font=gr.themes.GoogleFont("Inter"),
 )
 
-with gr.Blocks(theme=theme, css=CUSTOM_CSS, title="Emotion2Music AI") as demo:
+with gr.Blocks(theme=theme, css=CUSTOM_CSS, title="Emotion2Music AI — Final Release") as demo:
 
-    # --- Header ---
-    gr.Markdown("# 🎵 Emotion2Music AI", elem_id="header-text")
-    gr.Markdown(
-        "Turn your feelings into a unique AI-generated music track. "
-        "Just describe your mood and let the AI do the rest.",
-        elem_id="subtitle-text",
-    )
+    # --- Header Branding ---
+    with gr.Div(elem_id="brand-header"):
+        gr.HTML("""
+            <h1 class='main-title'>Emotion2Music AI</h1>
+            <p class='creator-tag'>Developed by <a href='https://ansaribilal.com' target='_blank' class='creator-link'>Ansari Bilal</a></p>
+        """)
 
-    gr.HTML("<hr style='border: 1px solid rgba(102, 126, 234, 0.15); margin: 10px 0 20px 0;'>")
-
-    # --- Input Section ---
-    with gr.Group():
-        with gr.Row():
-            with gr.Column(scale=4):
-                text_input = gr.Textbox(
-                    label="💭 How are you feeling?",
-                    placeholder="e.g., I feel hopeful but a little anxious about tomorrow...",
-                    lines=3,
-                    max_lines=5,
-                    elem_id="mood-input",
-                )
-            with gr.Column(scale=1, min_width=160):
+    # --- Layout Grid ---
+    with gr.Row():
+        # --- LEFT COLUMN: Input & Control ---
+        with gr.Column(scale=1, elem_classes="glass-card"):
+            gr.Markdown("### 🌑 Step 1: Mood Expression")
+            text_input = gr.Textbox(
+                label="",
+                placeholder="How is your soul feeling right now? Describe it in a sentence...",
+                lines=4,
+                elem_id="mood-input",
+            )
+            
+            with gr.Div(elem_classes="slider-container"):
+                gr.Markdown("### ⏱️ Step 2: Duration")
                 duration_slider = gr.Slider(
                     minimum=5,
                     maximum=15,
                     value=8,
                     step=1,
-                    label="⏱️ Duration (seconds)",
+                    label="",
                     elem_id="duration-slider",
                 )
 
-        generate_btn = gr.Button(
-            "🎶 Generate Music",
-            variant="primary",
-            size="lg",
-            elem_id="generate-btn",
-        )
-
-    # --- Examples ---
-    gr.Examples(
-        examples=[
-            ["I'm so excited! I just got my dream job and I can't stop smiling!"],
-            ["I feel really down today, nothing seems to go right..."],
-            ["Something just jumped out at me and I screamed!"],
-            ["I'm furious about the injustice I witnessed today."],
-            ["I feel calm and content, just relaxing at home."],
-            ["That food was absolutely revolting, I can't believe I tried it."],
-            ["I feel hopeful but a little anxious about tomorrow."],
-        ],
-        inputs=text_input,
-        label="💡 Try these examples",
-    )
-
-    gr.HTML("<hr style='border: 1px solid rgba(102, 126, 234, 0.15); margin: 20px 0;'>")
+            generate_btn = gr.Button(
+                "✨ COMPOSING MUSIC",
+                variant="primary",
+                elem_id="generate-btn",
+            )
 
-    # --- Output Section ---
-    with gr.Row():
-        with gr.Column(scale=1):
-            emotion_output = gr.Markdown(
-                label="Emotion Analysis",
-                value="*Your emotion analysis will appear here...*",
-                elem_id="emotion-results",
+            # Examples within the card
+            gr.Markdown("---")
+            gr.Markdown("### 💡 Suggestions")
+            gr.Examples(
+                examples=[
+                    ["A warm sunset over a quiet ocean, feeling peaceful."],
+                    ["Thunder crashing in the distance, heart racing with adrenaline."],
+                    ["Lost in a crowded city, feeling invisible yet hopeful."],
+                    ["Dancing in the rain like nobody is watching!"],
+                    ["The silence of an empty house, echoing with memories."]
+                ],
+                inputs=text_input,
+                label="",
             )
-        with gr.Column(scale=1):
+
+        # --- RIGHT COLUMN: Results & Insights ---
+        with gr.Column(scale=1, elem_classes="glass-card"):
+            gr.Markdown("### 🧠 Step 3: AI Insights")
+            
+            with gr.Div(elem_classes="emotion-bar-container"):
+                emotion_output = gr.Markdown(
+                    value="*Analysis will appear here after detection...*",
+                    elem_id="emotion-results",
+                )
+            
+            gr.Markdown("---")
+            gr.Markdown("### 🔊 Step 4: Your Composition")
+            
             audio_output = gr.Audio(
-                label="🎧 Generated Music",
+                label="",
                 type="numpy",
                 elem_id="audio-output",
+                interactive=False,
             )
+            
             gen_info = gr.Markdown(
                 value="",
                 elem_id="gen-info",
@@ -396,21 +454,22 @@ with gr.Blocks(theme=theme, css=CUSTOM_CSS, title="Emotion2Music AI") as demo:
         outputs=[emotion_output, audio_output, gen_info],
     )
 
-    # Also trigger on Enter key
     text_input.submit(
         fn=generate_music,
         inputs=[text_input, duration_slider],
         outputs=[emotion_output, audio_output, gen_info],
     )
 
-    # --- Footer ---
-    gr.Markdown(
-        "Built with ❤️ using "
-        "[DistilRoBERTa](https://huggingface.co/j-hartmann/emotion-english-distilroberta-base) · "
-        "[MusicGen](https://huggingface.co/facebook/musicgen-small) · "
-        "[Gradio](https://gradio.app)",
-        elem_id="footer-text",
-    )
+    # --- Footer Branding ---
+    with gr.Div(elem_id="footer-area"):
+        gr.HTML(f"""
+            <p style='color: white; margin-bottom: 20px;'>© 2026 Ansari Bilal. All rights reserved.</p>
+            <div style='display: flex; justify-content: center; gap: 20px;'>
+                <a href='https://ansaribilal.com' target='_blank' class='footer-link'>Portfolio</a>
+                <a href='https://huggingface.co/Nick021402' target='_blank' class='footer-link'>HF Profile</a>
+                <a href='mailto:contact@ansaribilal.com' class='footer-link'>Contact</a>
+            </div>
+        """)
 
 # ---------------------------------------------------------------------------
 # Launch