Update app.py

app.py

@@ -162,6 +162,37 @@ with gr.Blocks(css="""
     transform: scale(1.05);
 }
     .gr-chatbot { background-color: white; border-radius: 15px; padding: 20px; }
+    /* CUSTOM TABS DESIGN (only affects Step 3 Tabs) */
+.custom-tabs .gr-tabs { 
+    background-color: #f9f9f7; 
+    border-radius: 15px; 
+    padding: 5px; 
+    display: flex; 
+    justify-content: center; 
+}
+
+.custom-tabs .gr-tab-button { 
+    border-radius: 12px !important; 
+    padding: 10px 24px !important; 
+    margin: 4px !important; 
+    font-weight: 500; 
+    font-size: 16px; 
+    color: #888 !important; 
+    background-color: #ffffff; 
+    border: none !important; 
+    transition: 0.3s ease; 
+}
+
+.custom-tabs .gr-tab-button.selected { 
+    background-color: #f0f0eb !important; 
+    color: #333 !important; 
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); 
+}
+
+.custom-tabs .gr-tab-button:hover { 
+    background-color: #ecece8 !important; 
+}
+
 """) as demo:
 
     gr.Markdown("""
@@ -220,24 +251,27 @@ with gr.Blocks(css="""
 
     # Step 3: Chat Mode Tabs
     gr.Markdown("### Step 3: Choose Chat Mode")
-    with gr.Tabs():
-        with gr.Tab("Text Mode"):
-            chatbot_text = gr.Chatbot(label="Interview Chat (Text Mode)", type="messages")
-            msg = gr.Textbox(label="Type 'start' to begin")
-            send_btn = gr.Button("Send")
-            send_btn.click(respond, inputs=[msg, chat_history, user_profile], outputs=[chatbot_text], queue=False)
-            send_btn.click(lambda: "", None, msg, queue=False)
-
-        with gr.Tab("Audio Mode"):
-            chatbot_audio = gr.Chatbot(label="Interview Chat (Audio Mode)", type="messages")
-            audio_input = gr.Audio(type="filepath", label="Record Your Answer")
-            audio_btn = gr.Button("Send Audio")
-            audio_btn.click(handle_audio, inputs=[audio_input, chat_history, user_profile], outputs=[chatbot_audio], queue=False)
-        with gr.Tab("📸 Webcam Mode"):
-            img_upload = gr.Image(type="pil", label="Upload an Image")
-            posture_output = gr.Textbox(label="Posture Feedback")
-            posture_btn = gr.Button("Analyze Posture")
-            posture_btn.click(classify_image, inputs=[img_upload], outputs=[posture_output])
+    with gr.Row():
+        with gr.Column(elem_classes=["custom-tabs"]):
+            with gr.Tabs():
+                with gr.Tab("💬 Text Mode"):
+                    chatbot_text = gr.Chatbot(label="Interview Chat (Text Mode)", type="messages")
+                    msg = gr.Textbox(label="Type 'start' to begin")
+                    send_btn = gr.Button("Send")
+                    send_btn.click(respond, inputs=[msg, chat_history, user_profile], outputs=[chatbot_text], queue=False)
+                    send_btn.click(lambda: "", None, msg, queue=False)
+
+                with gr.Tab("🎙️ Audio Mode"):
+                    chatbot_audio = gr.Chatbot(label="Interview Chat (Audio Mode)", type="messages")
+                    audio_input = gr.Audio(type="filepath", label="Record Your Answer")
+                    audio_btn = gr.Button("Send Audio")
+                    audio_btn.click(handle_audio, inputs=[audio_input, chat_history, user_profile], outputs=[chatbot_audio], queue=False)
+
+                with gr.Tab("📸 Webcam Mode"):
+                    img_upload = gr.Image(source="webcam", type="pil", label="Capture Posture")
+                    posture_output = gr.Textbox(label="Posture Feedback")
+                    posture_btn = gr.Button("Analyze Posture")
+                    posture_btn.click(classify_image, inputs=[img_upload], outputs=[posture_output])
 
 
 demo.launch()