Update design

app.py

@@ -13,143 +13,154 @@ def clean_transcript(text: str) -> str:
 
 def transcribe(audio, model_choice):
     if audio is None:
-        return "❌ Please upload or record an audio file first!"
+        return "Please upload or record an audio file first."
     
     try:
-        if model_choice == "🎯 Whisper (Recommended)":
+        if model_choice == "Whisper (Recommended)":
             result = whisper_asr(audio)
-            return f"✅ **Transcription Complete**\n\n{result['text']}"
+            return f"Transcription Complete:\n\n{result['text']}"
         else:
             result = wav2vec_asr(audio)
             cleaned_text = clean_transcript(result["text"])
-            return f"✅ **Transcription Complete**\n\n{cleaned_text}"
+            return f"Transcription Complete:\n\n{cleaned_text}"
     except Exception as e:
-        return f"❌ Error during transcription: {str(e)}"
+        return f"Error during transcription: {str(e)}"
 
 def clear_all():
-    return None, "🎯 Whisper (Recommended)", ""
+    return None, "Whisper (Recommended)", ""
 
-# Custom CSS for modern styling
+# Custom CSS for classic professional styling
 custom_css = """
 /* Global Styles */
 .gradio-container {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
+    background: #f8f9fa !important;
+    font-family: 'Times New Roman', Georgia, serif !important;
+    color: #2c3e50 !important;
 }
 
 /* Header Styling */
 .header-section {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 20px;
+    background: #ffffff;
+    border: 2px solid #dee2e6;
+    border-radius: 8px;
     padding: 30px;
     margin-bottom: 25px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .header-section h1 {
-    background: linear-gradient(45deg, #667eea, #764ba2);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-size: 2.5em !important;
-    font-weight: 700 !important;
+    color: #2c3e50 !important;
+    font-size: 2.2em !important;
+    font-weight: 600 !important;
     text-align: center;
     margin-bottom: 15px;
+    border-bottom: 3px solid #34495e;
+    padding-bottom: 15px;
 }
 
 .header-section p {
-    color: #555;
+    color: #5a6c7d;
     font-size: 1.1em;
     text-align: center;
-    margin: 0;
-    line-height: 1.6;
+    margin: 8px 0;
+    line-height: 1.5;
 }
 
 /* Main Content Cards */
 .input-card, .output-card {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 15px;
+    background: #ffffff;
+    border: 2px solid #dee2e6;
+    border-radius: 8px;
     padding: 25px;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
     margin-bottom: 20px;
 }
 
 /* Button Styling */
 .primary-button {
-    background: linear-gradient(45deg, #667eea, #764ba2) !important;
-    border: none !important;
-    border-radius: 12px !important;
-    padding: 15px 30px !important;
-    font-size: 1.1em !important;
+    background: #34495e !important;
+    border: 2px solid #2c3e50 !important;
+    border-radius: 6px !important;
+    padding: 12px 24px !important;
+    font-size: 1em !important;
     font-weight: 600 !important;
     color: white !important;
-    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
-    transition: all 0.3s ease !important;
+    transition: all 0.2s ease !important;
 }
 
 .primary-button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6) !important;
+    background: #2c3e50 !important;
+    border-color: #1a252f !important;
 }
 
 .secondary-button {
-    background: linear-gradient(45deg, #ff6b6b, #ee5a24) !important;
-    border: none !important;
-    border-radius: 12px !important;
-    padding: 12px 25px !important;
-    font-size: 1em !important;
-    font-weight: 600 !important;
+    background: #6c757d !important;
+    border: 2px solid #5a6268 !important;
+    border-radius: 6px !important;
+    padding: 10px 20px !important;
+    font-size: 0.95em !important;
+    font-weight: 500 !important;
     color: white !important;
-    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4) !important;
+}
+
+.secondary-button:hover {
+    background: #5a6268 !important;
+    border-color: #495057 !important;
 }
 
 /* Audio Component Styling */
 .audio-component {
-    border-radius: 12px !important;
-    border: 2px solid #e1e8f7 !important;
-    background: #f8faff !important;
+    border-radius: 6px !important;
+    border: 2px solid #ced4da !important;
+    background: #ffffff !important;
 }
 
 /* Dropdown Styling */
 .dropdown-component {
-    border-radius: 12px !important;
-    border: 2px solid #e1e8f7 !important;
+    border-radius: 6px !important;
+    border: 2px solid #ced4da !important;
+    background: #ffffff !important;
 }
 
 /* Output Text Styling */
 .output-text {
-    background: #f8faff !important;
-    border-radius: 12px !important;
-    border: 2px solid #e1e8f7 !important;
+    background: #ffffff !important;
+    border-radius: 6px !important;
+    border: 2px solid #ced4da !important;
     padding: 20px !important;
-    font-size: 1.05em !important;
+    font-size: 1em !important;
     line-height: 1.6 !important;
+    font-family: 'Courier New', monospace !important;
 }
 
 /* Features Section */
 .features-section {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 15px;
+    background: #ffffff;
+    border: 2px solid #dee2e6;
+    border-radius: 8px;
     padding: 25px;
     margin-top: 25px;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
 }
 
 .feature-item {
-    margin-bottom: 10px;
-    color: #555;
-    font-size: 1.05em;
+    margin-bottom: 12px;
+    color: #495057;
+    font-size: 1em;
+    line-height: 1.5;
+}
+
+/* Professional Typography */
+h3 {
+    font-family: 'Times New Roman', Georgia, serif !important;
+    color: #2c3e50 !important;
+    font-weight: 600 !important;
 }
 
 /* Responsive Design */
 @media (max-width: 768px) {
     .header-section h1 {
-        font-size: 2em !important;
+        font-size: 1.8em !important;
     }
     
     .input-card, .output-card {
@@ -160,20 +171,20 @@ custom_css = """
 """
 
 # Create the main interface
-with gr.Blocks(css=custom_css, title="🎙️ CS-ASR | Code-Switching Speech Recognition") as demo:
+with gr.Blocks(css=custom_css, title="CS-ASR | Code-Switching Speech Recognition") as demo:
     # Header Section
     with gr.Column(elem_classes="header-section"):
         gr.HTML("""
-            <h1>🎙️ Code-Switching ASR Studio</h1>
-            <p>Advanced Speech Recognition for Khmer-English Code-Switching</p>
-            <p>✨ Powered by state-of-the-art Whisper and Wav2Vec2 models ✨</p>
+            <h1>Code-Switching ASR Platform</h1>
+            <p>Professional Speech Recognition for Khmer-English Code-Switching</p>
+            <p>Powered by Advanced Whisper and Wav2Vec2 Models</p>
         """)
     
     # Main Content
     with gr.Row():
         # Input Section
         with gr.Column(scale=1, elem_classes="input-card"):
-            gr.HTML("<h3 style='color: #667eea; margin-bottom: 20px; font-weight: 600;'>🎵 Audio Input</h3>")
+            gr.HTML("<h3 style='color: #2c3e50; margin-bottom: 20px; font-weight: 600;'>Audio Input</h3>")
             
             audio_input = gr.Audio(
                 sources=["microphone", "upload"], 
@@ -184,11 +195,11 @@ with gr.Blocks(css=custom_css, title="🎙️ CS-ASR | Code-Switching Speech Rec
             
             model_selector = gr.Dropdown(
                 choices=[
-                    "🎯 Whisper (Recommended)", 
-                    "⚡ Wav2Vec2 (Fast)"
+                    "Whisper (Recommended)", 
+                    "Wav2Vec2 (Fast)"
                 ], 
-                value="🎯 Whisper (Recommended)", 
-                label="🤖 Select AI Model",
+                value="Whisper (Recommended)", 
+                label="Select AI Model",
                 elem_classes="dropdown-component",
                 info="Choose the model that best fits your needs"
             )
@@ -196,24 +207,24 @@ with gr.Blocks(css=custom_css, title="🎙️ CS-ASR | Code-Switching Speech Rec
             # Action Buttons
             with gr.Row():
                 transcribe_button = gr.Button(
-                    "🚀 Start Transcription", 
+                    "Start Transcription", 
                     variant="primary",
                     elem_classes="primary-button",
                     scale=2
                 )
                 clear_button = gr.Button(
-                    "🗑️ Clear All", 
+                    "Clear All", 
                     elem_classes="secondary-button",
                     scale=1
                 )
         
         # Output Section  
         with gr.Column(scale=1, elem_classes="output-card"):
-            gr.HTML("<h3 style='color: #667eea; margin-bottom: 20px; font-weight: 600;'>📝 Transcription Result</h3>")
+            gr.HTML("<h3 style='color: #2c3e50; margin-bottom: 20px; font-weight: 600;'>Transcription Result</h3>")
             
             output_text = gr.Textbox(
                 label="Your Transcription Will Appear Here",
-                placeholder="🎤 Upload an audio file and click 'Start Transcription' to see the magic happen!",
+                placeholder="Upload an audio file and click 'Start Transcription' to begin processing.",
                 lines=12,
                 elem_classes="output-text",
                 interactive=False
@@ -222,25 +233,25 @@ with gr.Blocks(css=custom_css, title="🎙️ CS-ASR | Code-Switching Speech Rec
     # Features Section
     with gr.Column(elem_classes="features-section"):
         gr.HTML("""
-            <h3 style='color: #667eea; margin-bottom: 20px; font-weight: 600; text-align: center;'>🌟 Key Features</h3>
+            <h3 style='color: #2c3e50; 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
+                    <strong>Dual Model Support:</strong> Choose between Whisper and Wav2Vec2 for optimal results
                 </div>
                 <div class='feature-item'>
-                    <strong>🌍 Code-Switching Ready:</strong> Seamlessly handles Khmer-English mixed speech
+                    <strong>Code-Switching Ready:</strong> Seamlessly handles Khmer-English mixed speech
                 </div>
                 <div class='feature-item'>
-                    <strong>🎤 Flexible Input:</strong> Record live or upload existing audio files
+                    <strong>Flexible Input:</strong> Record live or upload existing audio files
                 </div>
                 <div class='feature-item'>
-                    <strong>⚡ Real-time Processing:</strong> Fast and accurate transcription results
+                    <strong>Real-time Processing:</strong> Fast and accurate transcription results
                 </div>
                 <div class='feature-item'>
-                    <strong>🎨 Modern Interface:</strong> Beautiful, responsive design for all devices
+                    <strong>Professional Interface:</strong> Clean, responsive design for all devices
                 </div>
                 <div class='feature-item'>
-                    <strong>🔧 Easy to Use:</strong> No technical knowledge required - just click and transcribe!
+                    <strong>Easy to Use:</strong> No technical knowledge required - just click and transcribe
                 </div>
             </div>
         """)