I have updated the UI which can help in

app.py

@@ -446,14 +446,12 @@ def process_audio_input(audio, language, enable_tts):
 custom_css = """
 /* Import Google Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
-
 /* Global styles */
 .gradio-container {
     font-family: 'Poppins', sans-serif !important;
     background: white !important;
     min-height: 100vh;
 }
-
 /* Main container styling */
 .main-container {
     background: rgba(255, 255, 255, 0.95) !important;
@@ -463,7 +461,6 @@ custom_css = """
     margin: 20px !important;
     padding: 30px !important;
 }
-
 /* Header styling */
 .header-title {
     text-align: center !important;
@@ -476,7 +473,6 @@ custom_css = """
     margin-bottom: 20px !important;
     text-shadow: 2px 2px 4px rgba(0,0,0,0.1) !important;
 }
-
 .subtitle {
     text-align: center !important;
     color: #555 !important;
@@ -484,24 +480,69 @@ custom_css = """
     margin-bottom: 30px !important;
     line-height: 1.6 !important;
 }
-
+/* Features Section - Modern Card Design */
+.features-container {
+    background: white !important;
+    border-radius: 16px !important;
+    padding: 25px !important;
+    margin: 20px 0 !important;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
+    border: 1px solid #f0f0f0 !important;
+}
+.features-title {
+    font-size: 1.4rem !important;
+    font-weight: 600 !important;
+    margin-bottom: 20px !important;
+    color: #333 !important;
+    text-align: center !important;
+}
+.features-grid {
+    display: grid !important;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
+    gap: 15px !important;
+}
+.feature-card {
+    background: #f9f9f9 !important;
+    border-radius: 12px !important;
+    padding: 20px 15px !important;
+    text-align: center !important;
+    transition: all 0.3s ease !important;
+    border: 1px solid #eee !important;
+}
+.feature-card:hover {
+    transform: translateY(-5px) !important;
+    box-shadow: 0 6px 15px rgba(0,0,0,0.1) !important;
+    background: #f5f5f5 !important;
+}
+.feature-icon {
+    font-size: 2rem !important;
+    margin-bottom: 10px !important;
+}
+.feature-text {
+    font-weight: 500 !important;
+    color: #555 !important;
+    font-size: 0.95rem !important;
+}
+/* Option 1: Light blue accent */
+.feature-card {
+    background: #f8fafc !important;
+    border: 1px solid #e0e7ff !important;
+}
 /* Feature list styling */
 .features-container {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%) !important;
+    background: linear-gradient(145deg, #2c3e50 0%, #1e272e 100%) !important;
     border-radius: 15px !important;
     padding: 20px !important;
     margin: 20px 0 !important;
     color: white !important;
     text-align: center !important;
 }
-
 .features-title {
     font-size: 1.5rem !important;
     font-weight: 600 !important;
     margin-bottom: 15px !important;
     color: white !important;
 }
-
 .feature-item {
     display: inline-block !important;
     margin: 5px 15px !important;
@@ -511,29 +552,136 @@ custom_css = """
     backdrop-filter: blur(5px) !important;
     font-weight: 500 !important;
 }
-
-/* Control panel styling */
+/* Modern Control Panel - Fixed Checkbox Version */
 .control-panel {
-    background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%) !important;
-    border-radius: 15px !important;
-    padding: 25px !important;
+    background: white !important;
+    border-radius: 16px !important;
+    padding: 20px !important;
     margin: 20px 0 !important;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
+    gap: 20px !important;
+}
+.control-section {
+    padding: 20px !important;
+    border-radius: 12px !important;
+}
+.language-section {
+    background: linear-gradient(145deg, #2c3e50 0%, #1e272e 100%) !important;
+}
+.voice-section {
+    background: linear-gradient(145deg, #2c3e50 0%, #1e272e 100%) !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+.section-header {
+    color: white !important;
+    margin-bottom: 15px !important;
+    font-size: 1rem !important;
+    font-weight: 600 !important;
+}
+/* Fixed Checkbox Styling */
+.dark-checkbox {
+    --size: 18px;
+    margin: 0 !important;
+    align-items: center !important;
+}
+.dark-checkbox .wrap {
+    display: flex !important;
+    align-items: center !important;
+    gap: 12px !important;
+    color: white !important;
+}
+.dark-checkbox input[type="checkbox"] {
+    width: var(--size) !important;
+    height: var(--size) !important;
+    min-width: var(--size) !important;
+    min-height: var(--size) !important;
+}
+.dark-checkbox label {
+    color: white !important;
+    font-size: 0.95rem !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+/* Question Prompt Container */
+.question-prompt-container {
+    background: linear-gradient(145deg, #2c3e50 0%, #1e272e 100%);
+    border-radius: 16px;
+    padding: 25px;
+    margin-bottom: 20px;
+    text-align: center;
 }
-
-/* Question prompt styling */
 .question-prompt {
-    text-align: center !important;
-    font-size: 1.8rem !important;
+    color: white;
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0;
+}
+/* Custom Tabs */
+.custom-tabs {
+    background: linear-gradient(145deg, #2c3e50 0%, #1e272e 100%);
+    border-radius: 16px;
+    padding: 20px;
+    margin-bottom: 20px;
+}
+.custom-tabs .tab-nav {
+    margin-bottom: 20px;
+}
+.custom-tabs .tab-nav button {
+    color: white !important;
+    background: rgba(255,255,255,0.1) !important;
+    border: none !important;
+    border-radius: 8px !important;
+    margin-right: 10px !important;
+    padding: 10px 20px !important;
+    transition: all 0.3s ease !important;
+}
+.custom-tabs .tab-nav button.selected {
+    background: rgba(255,255,255,0.2) !important;
     font-weight: 600 !important;
-    color: #333 !important;
-    margin: 30px 0 20px 0 !important;
-    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%) !important;
-    padding: 20px !important;
-    border-radius: 15px !important;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
 }
-
+/* Question Input Group */
+.question-group {
+    background: #1a202c;
+    border-radius: 12px;
+    padding: 15px;
+    margin-bottom: 15px;
+}
+.question-label {
+    color: white !important;
+    font-size: 1.1rem !important;
+    margin-bottom: 10px !important;
+}
+.question-textbox {
+    background: #2d3748 !important;
+    color: white !important;
+    border: 1px solid #4a5568 !important;
+    border-radius: 10px !important;
+    padding: 15px !important;
+}
+.question-textbox::placeholder {
+    color: #a0aec0 !important;
+}
+.question-audio {
+    width: 100% !important;
+    border-radius: 10px !important;
+}
+/* Modern Button */
+.modern-btn {
+    background: white !important;
+    color: #2d3748 !important;
+    border: none !important;
+    border-radius: 50px !important;
+    padding: 12px 30px !important;
+    font-weight: 600 !important;
+    font-size: 1rem !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
+}
+.modern-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
+}
 /* Tab styling */
 .tab-nav button {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
@@ -545,16 +693,13 @@ custom_css = """
     margin-right: 5px !important;
     transition: all 0.3s ease !important;
 }
-
 .tab-nav button:hover {
     transform: translateY(-2px) !important;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
 }
-
 .tab-nav button.selected {
     background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
 }
-
 /* Input styling */
 .gr-textbox, .gr-dropdown {
     border: 2px solid #e1e8ed !important;
@@ -564,13 +709,11 @@ custom_css = """
     transition: all 0.3s ease !important;
     background: rgba(255, 255, 255, 0.9) !important;
 }
-
 .gr-textbox:focus, .gr-dropdown:focus {
     border-color: #667eea !important;
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
     transform: translateY(-2px) !important;
 }
-
 /* Button styling */
 .gr-button {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
@@ -583,12 +726,10 @@ custom_css = """
     transition: all 0.3s ease !important;
     box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
 }
-
 .gr-button:hover {
     transform: translateY(-3px) !important;
     box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
 }
-
 /* Output textbox styling */
 .output-textbox {
     border: 2px solid #e1e8ed !important;
@@ -599,45 +740,156 @@ custom_css = """
     line-height: 1.6 !important;
     padding: 20px !important;
 }
-
 /* Audio component styling */
 .gr-audio {
     border-radius: 12px !important;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
 }
-
-/* Example questions styling */
+/* Output Section */
+.output-section {
+    background: white;
+    border-radius: 16px;
+    padding: 25px;
+    margin: 20px 0;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+}
+.output-header {
+    text-align: center;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #2d3748;
+    margin-bottom: 20px;
+}
+.output-textbox {
+    border: 2px solid #e2e8f0 !important;
+    border-radius: 12px !important;
+    background: white !important;
+    padding: 20px !important;
+    font-size: 1rem !important;
+    line-height: 1.6 !important;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
+}
+.gr-audio {
+    border-radius: 12px !important;
+    background: white !important;
+    border: 2px solid #e2e8f0 !important;
+    padding: 15px !important;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
+    margin-top: 15px !important;
+}
+/* EXAMPLES SECTION STYLING */
 .examples-container {
-    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
-    border-radius: 15px !important;
-    padding: 25px !important;
-    margin: 30px 0 !important;
-    text-align: center !important;
+    background: linear-gradient(145deg, #2c3e50 0%, #1e272e 100%);
+    border-radius: 16px;
+    padding: 25px;
+    margin: 20px 0;
 }
-
-.examples-title {
-    font-size: 1.5rem !important;
-    font-weight: 600 !important;
-    color: #8B4513 !important;
-    margin-bottom: 15px !important;
+.examples-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+    color: white;
+    justify-content: center;
+}
+.examples-header h3 {
+    margin: 0;
+    font-size: 1.3rem;
+}
+.examples-icon {
+    font-size: 1.5rem;
+}
+.examples-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 12px;
 }
-
 .example-question {
-    background: rgba(255, 255, 255, 0.7) !important;
-    border-radius: 20px !important;
-    padding: 10px 20px !important;
-    margin: 8px !important;
-    display: inline-block !important;
-    font-weight: 500 !important;
-    color: #8B4513 !important;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
-    transition: transform 0.2s ease !important;
+    background: white;
+    color: black;
+    border-radius: 10px;
+    padding: 12px 15px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid rgba(255,255,255,0.2);
+    text-align: center;
 }
-
 .example-question:hover {
-    transform: translateY(-2px) !important;
+    background: rgba(255,255,255,0.2);
+    transform: translateY(-3px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+/* Modern Header Styles */
+.header-container {
+    text-align: center;
+    padding: 30px 20px;
+    margin-bottom: 20px;
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
+}
+.header-title {
+    font-size: 3.5rem;
+    font-weight: 800;
+    background: linear-gradient(145deg, #2c3e50 0%, #1e272e 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    margin-bottom: 15px;
+    letter-spacing: -1px;
+}
+.title-accent {
+    color: #000000;  /* Pure black */
+    font-weight: 800;
+    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
+}
+.title-accent {
+    color: #2d3748;  /* Pure black */
+    font-weight: 800;
+    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
+}
+.title-accent {
+    color: linear-gradient(145deg, #2c3e50 0%, #1e272e 100%); /* Matches your features section */
+}
+.header-subtitle {
+    font-size: 1.5rem;
+    color: #7f8c8d;
+    margin-bottom: 15px;
+    font-weight: 500;
+}
+.highlight {
+    background: linear-gradient(145deg, #2c3e50 0%, #1e272e 100%) !important;
+    background-repeat: no-repeat;
+    background-size: 100% 30%;
+    background-position: 0 85%;
+    padding: 0 4px;
+}
+.header-divider {
+    width: 100px;
+    height: 4px;
+    background: linear-gradient(to right, #3498db, #2ecc71);
+    margin: 0 auto 20px;
+    border-radius: 2px;
+}
+.header-tagline {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    flex-wrap: wrap;
+    color: #2c3e50;
+    font-weight: 500;
+    font-size: 1.1rem;
+}
+.header-tagline span {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+}
+/* Emoji styling */
+.emoji {
+    font-size: 1.2em;
+    vertical-align: middle;
 }
-
 /* Responsive design */
 @media (max-width: 768px) {
     .header-title {
@@ -653,13 +905,11 @@ custom_css = """
         margin: 5px 0 !important;
     }
 }
-
 /* Animation keyframes */
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
 }
-
 .gradio-container > div {
     animation: fadeIn 0.6s ease-out !important;
 }
@@ -675,12 +925,17 @@ def create_interface():
         with gr.Row():
             with gr.Column():
                 gr.HTML("""
-                <div class="header-title">
-                    🌍 Multilingual Tourist Guide Bot
-                </div>
-                <div class="subtitle">
-                    Your AI-powered travel companion that speaks your language!<br>
-                    Get personalized travel advice, destination information, and travel tips using RAG technology and live web data.
+                <div class="header-container">
+                    <div class="header-title">
+                        ✈️ <span class="title-accent">TravelGenie</span>
+                    </div>
+                    <div class="header-subtitle">
+                        Your <span class="highlight">AI-Powered</span> Travel Companion
+                    </div>
+                    <div class="header-divider"></div>
+                    <div class="header-tagline">
+                        Discover destinations • Get instant advice • Traveling tips
+                    </div>
                 </div>
                 """)
         
@@ -689,79 +944,106 @@ def create_interface():
             with gr.Column():
                 gr.HTML("""
                 <div class="features-container">
-                    <div class="features-title">✨ Features</div>
-                    <div>
-                        <span class="feature-item">🗣️ Voice Input & Output</span>
-                        <span class="feature-item">🌐 10+ Languages Support</span>
-                        <span class="feature-item">📚 RAG Technology</span>
-                        <span class="feature-item">🎯 Personalized Recommendations</span>
+                    <div class="features-title">✨ Key Features</div>
+                    <div class="features-grid">
+                        <div class="feature-card">
+                            <div class="feature-icon">🗣️</div>
+                            <div class="feature-text">Voice Input & Output</div>
+                        </div>
+                        <div class="feature-card">
+                            <div class="feature-icon">🌐</div>
+                            <div class="feature-text">10+ Languages</div>
+                        </div>
+                        <div class="feature-card">
+                            <div class="feature-icon">🤖</div>
+                            <div class="feature-text">AI Recommendations</div>
+                        </div>
+                        <div class="feature-card">
+                            <div class="feature-icon">⚡</div>
+                            <div class="feature-text">Fast Responses</div>
+                        </div>
                     </div>
                 </div>
                 """)
         
         # Control Panel
-        with gr.Row():
-            with gr.Column(scale=1, elem_classes="control-panel"):
+        with gr.Row(elem_classes="control-panel"):
+            # Language Section
+            with gr.Column(scale=1, min_width=300, elem_classes="control-section language-section"):
+                gr.Markdown("### 🌐 LANGUAGE", elem_classes="section-header")
                 language_dropdown = gr.Dropdown(
                     choices=list(bot.languages.keys()),
                     value="English",
-                    label="🌐 Select Your Language",
-                    info="Choose your preferred language for communication",
-                    elem_classes="gr-dropdown"
+                    label="Select your preferred language",
+                    elem_classes="dark-dropdown"
                 )
-                
+            
+            # Voice Section (Fixed)
+            with gr.Column(scale=1, min_width=300, elem_classes="control-section voice-section"):
+                gr.Markdown("### 🔊 VOICE", elem_classes="section-header")
                 enable_tts_checkbox = gr.Checkbox(
                     value=True,
-                    label="🔊 Enable Text-to-Speech",
-                    info="Generate audio response for better accessibility",
-                    elem_classes="gr-checkbox"
+                    label="Enable voice responses",
+                    elem_classes="dark-checkbox",
+                    interactive=True
                 )
+
+                    
         
-        # Question Prompt
+        # Question Prompt Section
         with gr.Row():
             with gr.Column():
                 gr.HTML("""
-                <div class="question-prompt">
-                    🎤 Ask your travel question in text or voice
+                <div class="question-prompt-container">
+                    <div class="question-prompt">
+                        🎤 Ask your travel question in text or voice
+                    </div>
                 </div>
                 """)
         
         # Input Tabs
-        with gr.Tabs():
+        with gr.Tabs(elem_classes="custom-tabs"):
             with gr.TabItem("💬 Text Input", elem_classes="tab-item"):
                 with gr.Row():
                     with gr.Column(scale=1):
-                        text_input = gr.Textbox(
-                            label="✍️ Your Travel Question",
-                            placeholder="Ask me anything about destinations, travel tips, local customs, best times to visit, budget advice, and more...",
-                            lines=4,
-                            elem_classes="gr-textbox"
-                        )
-                        text_submit_btn = gr.Button("🚀 Get Travel Advice", variant="primary", size="lg")
-                    
-            with gr.TabItem("🎤 Voice Input", elem_classes="tab-item"):
+                        with gr.Group(elem_classes="question-group"):
+                            gr.Markdown("✍️ Your Travel Question", elem_classes="question-label")
+                            text_input = gr.Textbox(
+                                placeholder="Ask me anything about destinations, travel tips, local customs...",
+                                lines=4,
+                                elem_classes="question-textbox"
+                            )
+                        text_submit_btn = gr.Button("Get Travel Advice", elem_classes="modern-btn")
+            
+            with gr.TabItem("🎤 Voice Input", elem_classes="tab-item", visible=enable_tts_checkbox.value) as voice_tab:
                 with gr.Row():
                     with gr.Column(scale=1):
-                        audio_input = gr.Audio(
-                            sources=["microphone"],
-                            type="filepath",
-                            label="🎤 Record Your Travel Question",
-                            elem_classes="gr-audio"
-                        )
-                        audio_submit_btn = gr.Button("🚀 Process Voice Question", variant="primary", size="lg")
+                        with gr.Group(elem_classes="question-group"):
+                            gr.Markdown("🎤 Record Your Travel Question", elem_classes="question-label")
+                            audio_input = gr.Audio(
+                                sources=["microphone"],
+                                type="filepath",
+                                elem_classes="question-audio"
+                            )
+                        audio_submit_btn = gr.Button("Process Voice Question", elem_classes="modern-btn")
+
+        # This makes voice tab visibility depend on the checkbox
+        enable_tts_checkbox.change(
+            lambda x: gr.update(visible=x),
+            inputs=[enable_tts_checkbox],
+            outputs=[voice_tab]
+        )
         
         # Output Section
-        with gr.Row():
+        with gr.Row(elem_classes="output-section"):
             with gr.Column():
                 gr.HTML("""
-                <div style="text-align: center; font-size: 1.5rem; font-weight: 600; color: #333; margin: 30px 0 20px 0;">
+                <div class="output-header">
                     📋 Your Travel Guide Response
                 </div>
                 """)
-        
-        with gr.Row():
-            with gr.Column():
-                # Text outputs
+                
+                # Single text output box
                 text_output = gr.Textbox(
                     label="💡 Travel Advice & Information",
                     lines=12,
@@ -770,47 +1052,41 @@ def create_interface():
                     elem_classes="output-textbox"
                 )
                 
-                audio_text_output = gr.Textbox(
-                    label="💡 Travel Advice & Information",
-                    lines=12,
-                    max_lines=20,
-                    show_copy_button=True,
-                    elem_classes="output-textbox",
-                    visible=False
-                )
-        
-        # Audio output section
-        with gr.Row():
-            with gr.Column(scale=1):
-                text_audio_output = gr.Audio(
-                    label="🔊 Audio Response",
-                    elem_classes="gr-audio"
-                )
-            with gr.Column(scale=1):
-                audio_audio_output = gr.Audio(
+                # Audio output (conditionally visible)
+                audio_output = gr.Audio(
                     label="🔊 Audio Response",
                     elem_classes="gr-audio",
                     visible=False
                 )
         
-        # Example Questions Section
-        with gr.Row():
+        # Connect TTS checkbox to audio output visibility
+        enable_tts_checkbox.change(
+            lambda x: gr.update(visible=x),
+            inputs=[enable_tts_checkbox],
+            outputs=[audio_output]
+        )
+
+        # ========== EXAMPLE QUESTIONS SECTION ==========
+        with gr.Row(elem_classes="examples-container"):
             with gr.Column():
                 gr.HTML("""
-                <div class="examples-container">
-                    <div class="examples-title">💡 Try These Example Questions</div>
-                    <div>
-                        <div class="example-question">"What are the best places to visit in Paris?"</div>
-                        <div class="example-question">"Give me travel tips for first-time international travelers"</div>
-                        <div class="example-question">"What's the best time to visit Japan?"</div>
-                        <div class="example-question">"How can I save money while traveling in Europe?"</div>
-                        <div class="example-question">"Tell me about local customs in Dubai"</div>
-                        <div class="example-question">"Best budget-friendly destinations in Southeast Asia"</div>
-                        <div class="example-question">"What documents do I need for international travel?"</div>
-                    </div>
+                <div class="examples-header">
+                    <span class="examples-icon">💡</span>
+                    <h3>Try These Example Questions</h3>
+                </div>
+                <div class="examples-grid">
+                    <div class="example-question">"What are the best places to visit in Paris?"</div>
+                    <div class="example-question">"Give me travel tips for first-time international travelers"</div>
+                    <div class="example-question">"What's the best time to visit Japan?"</div>
+                    <div class="example-question">"How can I save money while traveling in Europe?"</div>
+                    <div class="example-question">"Tell me about local customs in Dubai"</div>
+                    <div class="example-question">"Best budget-friendly destinations in Southeast Asia"</div>
+                    <div class="example-question">"What documents do I need for international travel?"</div>
                 </div>
                 """)
         
+        
+        
         # Event handlers for text input
         def handle_text_input(question, language, enable_tts):
             """Handle text input and show/hide appropriate outputs."""
@@ -830,22 +1106,22 @@ def create_interface():
         
         # Connect event handlers
         text_submit_btn.click(
-            fn=handle_text_input,
+            fn=process_text_input,
             inputs=[text_input, language_dropdown, enable_tts_checkbox],
-            outputs=[text_output, text_audio_output, text_output, audio_text_output]
+            outputs=[text_output, audio_output]
         )
         
         audio_submit_btn.click(
-            fn=handle_audio_input,
+            fn=process_audio_input,
             inputs=[audio_input, language_dropdown, enable_tts_checkbox],
-            outputs=[audio_text_output, audio_audio_output, text_output, audio_text_output]
+            outputs=[text_output, audio_output]
         )
         
         # Auto-submit on Enter for text input
         text_input.submit(
             fn=handle_text_input,
             inputs=[text_input, language_dropdown, enable_tts_checkbox],
-            outputs=[text_output, text_audio_output, text_output, audio_text_output]
+            outputs=[text_output, audio_output]
         )
         
         # Example question click handlers