ui updated

app.py

@@ -59,132 +59,175 @@ def process_audio(audio_path, model_name):
         real_prob = 1 - prob
         fake_prob = prob
         
-        # Return formatted results with emojis
+        # Return formatted results
         return {
-            "🎵 Real": float(real_prob),
-            "🤖 Fake": float(fake_prob)
+            "Real": float(real_prob),
+            "Fake": float(fake_prob)
         }
 
     except Exception as e:
-        return {"❌ Error": str(e)}
+        return {"Error": str(e)}
 
 
 def predict(audio_file, model_name):
     """Gradio interface function"""
     if audio_file is None:
-        return {"⚠️ Message": "Please upload an audio file"}
+        return {"Message": "Please upload an audio file"}
     return process_audio(audio_file, model_name)
 
 
-# Custom CSS for styling
+# Custom CSS for styling - Dark theme with black background
 css = """
 :root {
-    --primary-color: #6366f1;
-    --secondary-color: #8b5cf6;
-    --accent-color: #ec4899;
-    --background-color: #f8fafc;
-    --text-color: #1e293b;
-    --border-radius: 10px;
+    --primary-bg: #000000;
+    --secondary-bg: #111111;
+    --panel-bg: #1e1e1e;
+    --text-color: #ffffff;
+    --text-secondary: #bbbbbb;
+    --border-color: #333333;
+    --analyze-button-color: #ffa500;
+    --analyze-button-hover: #ff8c00;
+    --accent-color: #4a78e5;
 }
 
-.gradio-container {
-    background-color: var(--background-color);
+body, .gradio-container {
+    background-color: var(--primary-bg) !important;
+    color: var(--text-color) !important;
 }
 
-.gr-button {
-    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
-    border: none !important;
+.footer, .header-container, .accordion-content {
+    background-color: var(--secondary-bg) !important;
+    color: var(--text-color) !important;
+}
+
+/* Headers and text */
+h1, h2, h3 {
+    color: var(--text-color) !important;
+}
+
+p {
+    color: var(--text-secondary) !important;
+}
+
+/* Button styling */
+button#submit_btn {
+    background-color: var(--analyze-button-color) !important;
     color: white !important;
-    border-radius: var(--border-radius) !important;
+    border: none !important;
+    font-weight: bold !important;
+    padding: 10px 20px !important;
+    font-size: 16px !important;
+    border-radius: 8px !important;
 }
 
-.gr-button:hover {
-    background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
-    transform: translateY(-2px);
-    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
-    transition: all 0.3s ease;
+button#submit_btn:hover {
+    background-color: var(--analyze-button-hover) !important;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
+    transform: translateY(-2px) !important;
+    transition: all 0.2s ease !important;
 }
 
-.gr-form {
-    border-radius: var(--border-radius) !important;
-    border: 1px solid #e2e8f0 !important;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
+/* Panel backgrounds */
+.gr-panel, .gr-box, .gr-form, .gr-input-label, .gr-input {
+    background-color: var(--panel-bg) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 8px !important;
+    color: var(--text-color) !important;
 }
 
-.footer {
-    margin-top: 20px;
-    text-align: center;
-    font-size: 0.9em;
-    color: #64748b;
+/* Results panel */
+#output {
+    background-color: var(--panel-bg) !important;
+    border-radius: 8px !important;
+    padding: 10px !important;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
+    border: 1px solid var(--border-color) !important;
 }
 
-.gradient-text {
-    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-fill-color: transparent;
+/* Resource links */
+.resource-link {
+    background-color: var(--secondary-bg) !important;
+    color: var(--accent-color) !important;
+    border: 1px solid var(--border-color) !important;
+    padding: 8px 16px !important;
+    border-radius: 20px !important;
+    margin: 5px !important;
+    text-decoration: none !important;
+    display: inline-block !important;
+    font-weight: 500 !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
 }
 
-.logo-container {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 1rem;
+.resource-link:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4) !important;
+    transition: all 0.2s ease !important;
+    background-color: #222222 !important;
 }
 
 .header-container {
-    text-align: center;
-    margin-bottom: 2rem;
-    padding: 1.5rem;
-    background: rgba(255, 255, 255, 0.8);
-    border-radius: var(--border-radius);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+    padding: 20px !important;
+    border-radius: 10px !important;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
+    margin-bottom: 20px !important;
+    border: 1px solid var(--border-color) !important;
 }
 
-.resource-links {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    flex-wrap: wrap;
-    margin-bottom: 1.5rem;
+/* Accordion styling */
+.gr-accordion {
+    border: 1px solid var(--border-color) !important;
+    border-radius: 8px !important;
+    overflow: hidden !important;
+    background-color: var(--panel-bg) !important;
 }
 
-.resource-link {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    background: white;
-    border-radius: var(--border-radius);
-    color: var(--primary-color);
-    text-decoration: none;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    transition: all 0.2s ease;
+.gr-accordion-header {
+    background-color: var(--secondary-bg) !important;
+    padding: 10px 15px !important;
+    font-weight: 600 !important;
+    color: var(--text-color) !important;
 }
 
-.resource-link:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+/* Audio player */
+.audio-player {
+    background-color: var(--panel-bg) !important;
+    border-radius: 8px !important;
+    overflow: hidden !important;
+}
+
+/* Dropdown & Input fields */
+select, input, .gr-dropdown {
+    background-color: var(--panel-bg) !important;
+    color: var(--text-color) !important;
+    border: 1px solid var(--border-color) !important;
 }
 
-.label-container {
-    border-radius: var(--border-radius);
-    overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+/* Labels */
+label, .gr-label {
+    color: var(--text-secondary) !important;
+}
+
+/* Footer styling */
+.footer {
+    border-top: 1px solid var(--border-color) !important;
+    margin-top: 30px !important;
+    padding: 15px !important;
 }
 """
 
 # Create Gradio interface
-with gr.Blocks(css=css) as demo:
-    # Title, Subtitle, and Logo
+with gr.Blocks(css=css, theme=gr.themes.Default()) as demo:
+    # Title and Logo
     gr.HTML(
         """
         <div class="header-container">
-            <div class="logo-container">
+            <div style="display: flex; justify-content: center; margin-bottom: 20px;">
                 <img src="https://i.postimg.cc/3Jx3yZ5b/real-vs-fake-sonics-w-logo.jpg" 
-                     style="max-width: 180px; border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
+                     style="max-width: 150px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.3);">
             </div>
-            <h1 class="gradient-text">🎵 SONICS: Synthetic Or Not - Identifying Counterfeit Songs 🤖</h1>
-            <h3>ICLR 2025 [Poster]</h3>
-            <p style="font-size: 1.1em; color: #64748b; margin: 15px 0;">
+            <h1 style="text-align: center; font-size: 28px; margin-bottom: 10px; color: #ffffff;">SONICS: Synthetic Or Not - Identifying Counterfeit Songs</h1>
+            <h3 style="text-align: center; color: #bbbbbb; margin-bottom: 15px;">ICLR 2025 [Poster]</h3>
+            <p style="text-align: center; font-size: 16px; margin: 0; color: #aaaaaa;">
                 Detect if a song is real or AI-generated with our state-of-the-art models.
                 Simply upload an audio file to verify its authenticity!
             </p>
@@ -192,10 +235,10 @@ with gr.Blocks(css=css) as demo:
         """
     )
 
-    # Resource Links
+    # Resource Links - Simplified
     gr.HTML(
         """
-        <div class="resource-links">
+        <div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 25px;">
             <a href="https://openreview.net/forum?id=PY7KSh29Z8" target="_blank" class="resource-link">
                 📄 Paper
             </a>
@@ -219,15 +262,16 @@ with gr.Blocks(css=css) as demo:
     with gr.Row(equal_height=True):
         with gr.Column():
             audio_input = gr.Audio(
-                label="🎧 Upload Audio File",
+                label="Upload Audio File",
                 type="filepath",
-                elem_id="audio_input"
+                elem_id="audio_input",
+                elem_classes="audio-player"
             )
             
             model_dropdown = gr.Dropdown(
                 choices=list(MODEL_IDS.keys()),
                 value="SpecTTTra-γ (5s)",
-                label="🔍 Select Model",
+                label="Select Model",
                 elem_id="model_dropdown"
             )
             
@@ -239,33 +283,33 @@ with gr.Blocks(css=css) as demo:
         with gr.Column():
             # Define output before using it in Examples
             output = gr.Label(
-                label="📊 Analysis Result",
+                label="Analysis Result",
                 num_top_classes=2,
-                elem_id="output",
-                elem_classes="label-container"
+                elem_id="output"
             )
             
-            with gr.Accordion("ℹ️ How It Works", open=False):
+            with gr.Accordion("How It Works", open=True):
                 gr.Markdown("""
-                    The SONICS classifier analyzes your audio to determine if it's an authentic song (Human created) or 
-                    generated by AI. Our models are trained on a diverse dataset of real and AI-generated songs from Suno and Udio.
+                    ## The SONICS classifier
+                    
+                    The SONICS classifier analyzes your audio to determine if it's an authentic song (human created) or generated by AI. Our models are trained on a diverse dataset of real and AI-generated songs from Suno and Udio.
                     
-                    **Models available:**
-                    - **SpecTTTra-γ**: Optimized for speed
-                    - **SpecTTTra-β**: Balanced performance
-                    - **SpecTTTra-α**: Highest accuracy
+                    ### Models available:
+                    - **SpecTTTra-α**: Optimized for speed
+                    - **SpecTTTra-β**: Balanced performance 
+                    - **SpecTTTra-γ**: Highest accuracy
                     
-                    **Duration variants:**
+                    ### Duration variants:
                     - **5s**: Analyzes a 5-second clip (faster)
                     - **120s**: Analyzes up to 2 minutes (more accurate)
                 """)
 
     # Add Examples section after output is defined
-    with gr.Accordion("🎬 Example Audio Files", open=True):
+    with gr.Accordion("Example Audio Files", open=True):
         gr.Examples(
             examples=[
-                ["example/real_song.mp3", "SpecTTTra-γ (5s)"],
-                ["example/fake_song.mp3", "SpecTTTra-γ (5s)"],
+                ["demo/real_song.mp3", "SpecTTTra-γ (5s)"],
+                ["demo/fake_song.mp3", "SpecTTTra-γ (5s)"],
             ],
             inputs=[audio_input, model_dropdown],
             outputs=[output],
@@ -276,9 +320,9 @@ with gr.Blocks(css=css) as demo:
     # Footer
     gr.HTML(
         """
-        <div class="footer">
-            <p>SONICS: Synthetic Or Not - Identifying Counterfeit Songs | Created by SONICS Team</p>
-            <p>© 2025 - For research purposes only</p>
+        <div class="footer" style="text-align: center;">
+            <p style="color: #bbbbbb; font-size: 14px;">SONICS: Synthetic Or Not - Identifying Counterfeit Songs | ICLR 2025</p>
+            <p style="color: #777777; font-size: 12px;">For research purposes only</p>
         </div>
         """
     )
@@ -287,4 +331,5 @@ with gr.Blocks(css=css) as demo:
     submit_btn.click(fn=predict, inputs=[audio_input, model_dropdown], outputs=[output])
 
 if __name__ == "__main__":
+    # Use dark theme as base and then apply custom CSS on top
     demo.launch()