Update app.py

app.py

@@ -1,5 +1,6 @@
 import gradio as gr
 import os
+    
 css = """
 :root {
         --bg-primary: #0a0a0a;
@@ -12,7 +13,6 @@ css = """
         --accent-blue: #3b82f6;
         --gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
     }
-    /* Only change colors, not spacing */
     .gradio-container {
         background: var(--bg-primary) !important;
         color: var(--text-primary) !important;
@@ -82,23 +82,6 @@ css = """
         background: var(--accent-blue) !important;
         color: white !important;
     }
-    /* Tab styling */
-    button[role="tab"] {
-        background: transparent !important;
-        color: var(--text-secondary) !important;
-        border: none !important;
-        border-radius: 8px !important;
-        font-weight: 500 !important;
-        transition: all 0.2s ease !important;
-    }
-    button[role="tab"]:hover {
-        background: var(--bg-hover) !important;
-        color: var(--text-primary) !important;
-    }
-    button[role="tab"][aria-selected="true"] {
-        background: var(--accent-blue) !important;
-        color: white !important;
-    }
     /* Card backgrounds */
     .gr-group {
         background: var(--bg-card) !important;
@@ -120,6 +103,34 @@ css = """
         border-radius: 50% !important;
         cursor: pointer !important;
     }
+    /* Audio upload styling */
+    .gr-audio {
+        background: var(--bg-secondary) !important;
+        border: 1px solid var(--border-color) !important;
+        border-radius: 8px !important;
+    }
+    /* Label styling */
+    label {
+        color: var(--text-secondary) !important;
+        font-weight: 500 !important;
+        margin-bottom: 0.5rem !important;
+    }
+    /* Accordion styling */
+    .gr-accordion {
+        background: var(--bg-card) !important;
+        border: 1px solid var(--border-color) !important;
+        border-radius: 8px !important;
+    }
+    button.gr-accordion-header {
+        background: transparent !important;
+        color: var(--text-primary) !important;
+        border: none !important;
+        padding: 1rem !important;
+        font-weight: 500 !important;
+    }
+    button.gr-accordion-header:hover {
+        background: var(--bg-hover) !important;
+    }
     /* Info message */
     .info-message {
         background: rgba(59, 130, 246, 0.1);
@@ -135,14 +146,16 @@ css = """
         padding: 3rem 0 2rem;
         margin-top: 4rem;
         border-top: 1px solid var(--border-color);
+        color: var(--text-secondary);
+    }
+    a {
         color: var(--text-secondary) !important;
     }
-    a{
-      color: var(--text-secondary) !important;
+    /* Hide default Gradio branding */
+    #huggingface-space-header, footer, huggingface-space-header { 
+        display: none !important; 
     }
-    footer, #huggingface-space-header, huggingface-space-header { display: none !important; }
     """
-
 token = os.environ["TOKEN"]
 model=os.environ["MODEL"]
 with gr.Blocks(fill_height=False,fill_width=False,css=css,js="""
@@ -154,6 +167,15 @@ with gr.Blocks(fill_height=False,fill_width=False,css=css,js="""
     link.href = 'https://cms.cypherchat.app/uploads/favicon_8bc904ca6b.svg';
     document.getElementsByTagName('head')[0].appendChild(link);
 }
-""") as demo:
+""",theme=gr.themes.Default(
+        primary_hue="blue",
+        neutral_hue="gray",
+        text_size="md"
+    ).set(
+        body_background_fill="#0a0a0a",
+        body_background_fill_dark="#0a0a0a",
+        block_background_fill="#1a1a1a",
+        block_background_fill_dark="#1a1a1a"
+    )) as demo:
     loaded_demo = gr.load(model, src="spaces", token=token)
 demo.launch(show_api=False, show_error=False, quiet=True, debug=False)