Update design

app.py

@@ -29,159 +29,173 @@ def transcribe(audio, model_choice):
 def clear_all():
     return None, "Whisper (Recommended)", ""
 
-# Custom CSS with consistent professional color scheme
+# Custom CSS with dark theme
 custom_css = """
 /* 
-CONSISTENT COLOR PALETTE:
-- Primary: #2c3e50 (Dark slate blue - main text, headers)
-- Secondary: #34495e (Medium slate - buttons, accents) 
-- Tertiary: #5a6c7d (Light slate - secondary text)
-- Neutral: #6c757d (Gray - borders, dividers)
-- Light: #dee2e6 (Light gray - subtle borders)
-- Background: #f5f6fa (Very light blue-gray)
-- Surface: #ffffff (Pure white - cards, inputs)
+DARK THEME COLOR PALETTE:
+- Background: #000000 (Pure black - main background)
+- Surface Dark: #1a1a1a (Dark gray - cards, containers)
+- Surface Medium: #2d2d2d (Medium gray - inputs, components)
+- Border: #404040 (Gray - borders, dividers)
+- Text Primary: #ffffff (White - main text, headers)
+- Text Secondary: #b0b0b0 (Light gray - secondary text)
+- Accent: #4a9eff (Blue - buttons, highlights)
+- Accent Hover: #357abd (Darker blue - hover states)
+- Success: #28a745 (Green - success states)
+- Warning: #ffc107 (Yellow - warnings)
 */
 
 /* Global Styles */
 .gradio-container {
-    background: #f5f6fa !important;
+    background: #000000 !important;
     font-family: 'Georgia', 'Times New Roman', serif !important;
-    color: #2c3e50 !important;
+    color: #ffffff !important;
+    min-height: 100vh !important;
 }
 
 /* Header Styling */
 .header-section {
-    background: #ffffff;
-    border: 2px solid #dee2e6;
-    border-radius: 8px;
+    background: #1a1a1a;
+    border: 2px solid #404040;
+    border-radius: 12px;
     padding: 30px;
     margin-bottom: 25px;
-    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.08);
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
 }
 
 .header-section h1 {
-    color: #2c3e50 !important;
-    font-size: 2.2em !important;
-    font-weight: 600 !important;
+    color: #ffffff !important;
+    font-size: 2.4em !important;
+    font-weight: 700 !important;
     text-align: center;
     margin-bottom: 15px;
-    border-bottom: 3px solid #34495e;
+    border-bottom: 3px solid #4a9eff;
     padding-bottom: 15px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 .header-section p {
-    color: #5a6c7d;
+    color: #b0b0b0;
     font-size: 1.1em;
     text-align: center;
     margin: 8px 0;
-    line-height: 1.5;
+    line-height: 1.6;
 }
 
 /* Main Content Cards */
 .input-card, .output-card {
-    background: #ffffff;
-    border: 2px solid #dee2e6;
-    border-radius: 8px;
+    background: #1a1a1a;
+    border: 2px solid #404040;
+    border-radius: 12px;
     padding: 25px;
-    box-shadow: 0 2px 6px rgba(44, 62, 80, 0.06);
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
     margin-bottom: 20px;
 }
 
 /* Button Styling */
 .primary-button {
-    background: #34495e !important;
-    border: 2px solid #34495e !important;
-    border-radius: 6px !important;
-    padding: 12px 24px !important;
-    font-size: 1em !important;
+    background: linear-gradient(135deg, #4a9eff, #357abd) !important;
+    border: 2px solid #4a9eff !important;
+    border-radius: 8px !important;
+    padding: 14px 28px !important;
+    font-size: 1.1em !important;
     font-weight: 600 !important;
     color: #ffffff !important;
-    transition: all 0.2s ease !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3) !important;
 }
 
 .primary-button:hover {
-    background: #2c3e50 !important;
-    border-color: #2c3e50 !important;
+    background: linear-gradient(135deg, #357abd, #2a5d8f) !important;
+    border-color: #357abd !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 16px rgba(74, 158, 255, 0.4) !important;
 }
 
 .secondary-button {
-    background: #6c757d !important;
-    border: 2px solid #6c757d !important;
-    border-radius: 6px !important;
-    padding: 10px 20px !important;
-    font-size: 0.95em !important;
+    background: #2d2d2d !important;
+    border: 2px solid #404040 !important;
+    border-radius: 8px !important;
+    padding: 12px 24px !important;
+    font-size: 1em !important;
     font-weight: 500 !important;
     color: #ffffff !important;
-    transition: all 0.2s ease !important;
+    transition: all 0.3s ease !important;
 }
 
 .secondary-button:hover {
-    background: #5a6c7d !important;
-    border-color: #5a6c7d !important;
+    background: #404040 !important;
+    border-color: #555555 !important;
+    transform: translateY(-1px) !important;
 }
 
 /* Component Styling */
 .audio-component, .dropdown-component {
-    border-radius: 6px !important;
-    border: 2px solid #dee2e6 !important;
-    background: #ffffff !important;
+    border-radius: 8px !important;
+    border: 2px solid #404040 !important;
+    background: #2d2d2d !important;
+    color: #ffffff !important;
 }
 
 /* Text Styling */
 .output-text {
-    background: #ffffff !important;
-    border-radius: 6px !important;
-    border: 2px solid #dee2e6 !important;
+    background: #2d2d2d !important;
+    border-radius: 8px !important;
+    border: 2px solid #404040 !important;
     padding: 20px !important;
-    font-size: 1em !important;
-    line-height: 1.6 !important;
-    font-family: 'Courier New', monospace !important;
-    color: #2c3e50 !important;
+    font-size: 1.05em !important;
+    line-height: 1.7 !important;
+    font-family: 'Consolas', 'Courier New', monospace !important;
+    color: #ffffff !important;
 }
 
 /* Features Section */
 .features-section {
-    background: #ffffff;
-    border: 2px solid #dee2e6;
-    border-radius: 8px;
+    background: #1a1a1a;
+    border: 2px solid #404040;
+    border-radius: 12px;
     padding: 25px;
     margin-top: 25px;
-    box-shadow: 0 2px 6px rgba(44, 62, 80, 0.06);
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
 }
 
 .feature-item {
-    margin-bottom: 12px;
-    color: #5a6c7d;
-    font-size: 1em;
-    line-height: 1.5;
+    margin-bottom: 15px;
+    color: #b0b0b0;
+    font-size: 1.05em;
+    line-height: 1.6;
+    padding: 10px;
+    background: #2d2d2d;
+    border-radius: 6px;
+    border-left: 4px solid #4a9eff;
 }
 
 .feature-item strong {
-    color: #2c3e50;
+    color: #ffffff;
 }
 
 /* Typography */
 h3 {
     font-family: 'Georgia', 'Times New Roman', serif !important;
-    color: #2c3e50 !important;
+    color: #ffffff !important;
     font-weight: 600 !important;
     margin-bottom: 15px !important;
 }
 
 /* Component Overrides */
 label {
-    color: #2c3e50 !important;
+    color: #ffffff !important;
     font-weight: 500 !important;
     font-family: 'Georgia', 'Times New Roman', serif !important;
 }
 
 ::placeholder {
-    color: #5a6c7d !important;
-    opacity: 0.7;
+    color: #808080 !important;
+    opacity: 0.8;
 }
 
 *:focus {
-    outline: 2px solid #34495e !important;
+    outline: 2px solid #4a9eff !important;
     outline-offset: 2px !important;
 }
 
@@ -189,23 +203,69 @@ label {
 .gradio-textbox textarea,
 .gradio-dropdown,
 .gradio-audio {
-    border: 2px solid #dee2e6 !important;
-    border-radius: 6px !important;
-    background: #ffffff !important;
-    color: #2c3e50 !important;
+    border: 2px solid #404040 !important;
+    border-radius: 8px !important;
+    background: #2d2d2d !important;
+    color: #ffffff !important;
     font-family: inherit !important;
 }
 
+.gradio-textbox textarea:focus,
+.gradio-dropdown:focus,
+.gradio-audio:focus {
+    border-color: #4a9eff !important;
+    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2) !important;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1a1a1a;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #404040;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #4a9eff;
+}
+
+/* Selection Styling */
+::selection {
+    background: #4a9eff;
+    color: #ffffff;
+}
+
 /* Responsive Design */
 @media (max-width: 768px) {
     .header-section h1 {
-        font-size: 1.8em !important;
+        font-size: 2em !important;
     }
     
     .input-card, .output-card {
         padding: 20px;
         margin-bottom: 15px;
     }
+    
+    .primary-button, .secondary-button {
+        padding: 12px 20px !important;
+        font-size: 0.95em !important;
+    }
+}
+
+/* Animation for better UX */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.input-card, .output-card, .features-section, .header-section {
+    animation: fadeIn 0.5s ease-out;
 }
 """
 
@@ -223,7 +283,7 @@ with gr.Blocks(css=custom_css, title="CS-ASR | Code-Switching Speech Recognition
     with gr.Row():
         # Input Section
         with gr.Column(scale=1, elem_classes="input-card"):
-            gr.HTML("<h3 style='color: #2c3e50; margin-bottom: 20px; font-weight: 600;'>Audio Input</h3>")
+            gr.HTML("<h3 style='color: #ffffff; margin-bottom: 20px; font-weight: 600;'>Audio Input</h3>")
             
             audio_input = gr.Audio(
                 sources=["microphone", "upload"], 
@@ -234,10 +294,10 @@ with gr.Blocks(css=custom_css, title="CS-ASR | Code-Switching Speech Recognition
             
             model_selector = gr.Dropdown(
                 choices=[
-                    "Whisper (Recommended)", 
-                    "Wav2Vec2 (Fast)"
+                    "Whisper Model", 
+                    "Wav2Vec2 Model"
                 ], 
-                value="Whisper (Recommended)", 
+                value="Whisper Model", 
                 label="Select AI Model",
                 elem_classes="dropdown-component",
                 info="Choose the model that best fits your needs"
@@ -259,7 +319,7 @@ with gr.Blocks(css=custom_css, title="CS-ASR | Code-Switching Speech Recognition
         
         # Output Section  
         with gr.Column(scale=1, elem_classes="output-card"):
-            gr.HTML("<h3 style='color: #2c3e50; margin-bottom: 20px; font-weight: 600;'>Transcription Result</h3>")
+            gr.HTML("<h3 style='color: #ffffff; margin-bottom: 20px; font-weight: 600;'>Transcription Result</h3>")
             
             output_text = gr.Textbox(
                 label="Your Transcription Will Appear Here",
@@ -272,7 +332,7 @@ with gr.Blocks(css=custom_css, title="CS-ASR | Code-Switching Speech Recognition
     # Features Section
     with gr.Column(elem_classes="features-section"):
         gr.HTML("""
-            <h3 style='color: #2c3e50; margin-bottom: 20px; font-weight: 600; text-align: center;'>Key Features</h3>
+            <h3 style='color: #ffffff; margin-bottom: 20px; font-weight: 600; text-align: center;'>Key Features</h3>
             <div style='display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 20px;'>
                 <div class='feature-item'>
                     <strong>Dual Model Support:</strong> Choose between Whisper and Wav2Vec2 for optimal results