ui update

app.py

@@ -76,142 +76,75 @@ def predict(audio_file, model_name):
     return process_audio(audio_file, model_name)
 
 
-# Custom CSS for styling - Dark theme with black background
+# Updated CSS with better color scheme for resource links
 css = """
-:root {
-    --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;
+/* Custom CSS that works with Ocean theme */
+.sonics-header {
+    text-align: center;
+    padding: 20px;
+    margin-bottom: 20px;
+    border-radius: 10px;
 }
 
-body, .gradio-container {
-    background-color: var(--primary-bg) !important;
-    color: var(--text-color) !important;
+.sonics-logo {
+    max-width: 150px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
 }
 
-.footer, .header-container, .accordion-content {
-    background-color: var(--secondary-bg) !important;
-    color: var(--text-color) !important;
+.sonics-title {
+    font-size: 28px;
+    margin-bottom: 10px;
 }
 
-/* Headers and text */
-h1, h2, h3 {
-    color: var(--text-color) !important;
+.sonics-subtitle {
+    margin-bottom: 15px;
 }
 
-p {
-    color: var(--text-secondary) !important;
+.sonics-description {
+    font-size: 16px;
+    margin: 0;
 }
 
-/* Button styling */
-button#submit_btn {
-    background-color: var(--analyze-button-color) !important;
-    color: white !important;
-    border: none !important;
-    font-weight: bold !important;
-    padding: 10px 20px !important;
-    font-size: 16px !important;
-    border-radius: 8px !important;
+/* Resource links styling */
+.resource-links {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 25px;
 }
 
-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;
-}
-
-/* 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;
-}
-
-/* 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;
-}
-
-/* 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;
+    background-color: #222222;
+    color: #4aedd6;
+    border: 1px solid #333333;
+    padding: 8px 16px;
+    border-radius: 20px;
+    margin: 5px;
+    text-decoration: none;
+    display: inline-block;
+    font-weight: 500;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    transition: all 0.2s ease;
 }
 
 .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 {
-    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;
-}
-
-/* Accordion styling */
-.gr-accordion {
-    border: 1px solid var(--border-color) !important;
-    border-radius: 8px !important;
-    overflow: hidden !important;
-    background-color: var(--panel-bg) !important;
-}
-
-.gr-accordion-header {
-    background-color: var(--secondary-bg) !important;
-    padding: 10px 15px !important;
-    font-weight: 600 !important;
-    color: var(--text-color) !important;
-}
-
-/* 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;
+    background-color: #333333;
+    transform: translateY(-2px);
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
+    transition: all 0.2s ease;
 }
 
-/* Labels */
-label, .gr-label {
-    color: var(--text-secondary) !important;
+.resource-link-icon {
+    margin-right: 5px;
 }
 
 /* Footer styling */
-.footer {
-    border-top: 1px solid var(--border-color) !important;
-    margin-top: 30px !important;
-    padding: 15px !important;
+.sonics-footer {
+    text-align: center;
+    margin-top: 30px;
+    padding: 15px;
 }
 """
 
@@ -220,14 +153,13 @@ with gr.Blocks(css=css, theme=gr.themes.Ocean()) as demo:
     # Title and Logo
     gr.HTML(
         """
-        <div class="header-container">
+        <div class="sonics-header">
             <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: 150px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.3);">
+                <img src="https://i.postimg.cc/3Jx3yZ5b/real-vs-fake-sonics-w-logo.jpg" class="sonics-logo">
             </div>
-            <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;">
+            <h1 class="sonics-title">SONICS: Synthetic Or Not - Identifying Counterfeit Songs</h1>
+            <h3 class="sonics-subtitle">ICLR 2025 [Poster]</h3>
+            <p class="sonics-description">
                 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>
@@ -235,24 +167,24 @@ with gr.Blocks(css=css, theme=gr.themes.Ocean()) as demo:
         """
     )
 
-    # Resource Links - Simplified
+    # Resource Links - Updated with custom styling to match screenshot
     gr.HTML(
         """
-        <div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 25px;">
+        <div class="resource-links">
             <a href="https://openreview.net/forum?id=PY7KSh29Z8" target="_blank" class="resource-link">
-                📄 Paper
+                <span class="resource-link-icon">📄</span>Paper
             </a>
             <a href="https://huggingface.co/datasets/awsaf49/sonics" target="_blank" class="resource-link">
-                🎵 Dataset
+                <span class="resource-link-icon">🎵</span>Dataset
             </a>
             <a href="https://huggingface.co/collections/awsaf49/sonics-spectttra-67bb6517b3920fd18e409013" target="_blank" class="resource-link">
-                🤖 Models
+                <span class="resource-link-icon">🤖</span>Models
             </a>
             <a href="https://arxiv.org/abs/2408.14080" target="_blank" class="resource-link">
-                🔬 ArXiv
+                <span class="resource-link-icon">🔬</span>ArXiv
             </a>
             <a href="https://github.com/awsaf49/sonics" target="_blank" class="resource-link">
-                💻 GitHub
+                <span class="resource-link-icon">💻</span>GitHub
             </a>
         </div>
         """
@@ -264,8 +196,7 @@ with gr.Blocks(css=css, theme=gr.themes.Ocean()) as demo:
             audio_input = gr.Audio(
                 label="Upload Audio File",
                 type="filepath",
-                elem_id="audio_input",
-                elem_classes="audio-player"
+                elem_id="audio_input"
             )
             
             model_dropdown = gr.Dropdown(
@@ -320,9 +251,9 @@ with gr.Blocks(css=css, theme=gr.themes.Ocean()) as demo:
     # Footer
     gr.HTML(
         """
-        <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 class="sonics-footer">
+            <p>SONICS: Synthetic Or Not - Identifying Counterfeit Songs | ICLR 2025</p>
+            <p style="font-size: 12px;">For research purposes only</p>
         </div>
         """
     )
@@ -331,5 +262,4 @@ with gr.Blocks(css=css, theme=gr.themes.Ocean()) 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()