Update app.py

app.py

@@ -165,31 +165,38 @@ with gr.Blocks(css="""
 }
     .gr-chatbot { background-color: white; border-radius: 15px; padding: 20px; }
 .custom-tabs .tab-nav {
-    background-color: #f9f9f7;
-    border-radius: 15px;
-    padding: 5px;
+    background-color: #ffffff;
+    border-radius: 50px;
+    padding: 8px;
     display: flex;
     justify-content: center;
+    gap: 8px;
+    border: 1px solid #e0e0e0;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }
-    .custom-tabs button[role="tab"] {
-        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 button[role="tab"][aria-selected="true"] {
-        background-color: #f0f0eb !important;
-        color: #333 !important;
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-    }
-    .custom-tabs button[role="tab"]:hover {
-        background-color: #ecece8 !important;
-    }
+
+.custom-tabs button[role="tab"] {
+    border-radius: 50px !important;
+    padding: 10px 30px !important;
+    font-weight: 500;
+    font-size: 16px;
+    color: #555 !important;
+    background-color: transparent;
+    border: none;
+    transition: 0.25s ease;
+}
+
+.custom-tabs button[role="tab"][aria-selected="true"] {
+    background-color: #b3f0ff;
+    color: #222 !important;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.custom-tabs button[role="tab"]:hover {
+    background-color: #e0f7ff;
+    transform: scale(1.05);
+}
+
     :root {
     --trim-region-color: rgba(255, 153, 0, 0.5);  /* Nice orange for example */
 
@@ -233,7 +240,7 @@ with gr.Blocks(css="""
 
     gr.Markdown("""
 <div style='width: 100%; text-align: center;'>
-  <img src="https://cdn-uploads.huggingface.co/production/uploads/6841b10b397a67a7c7a39b89/MdYcoR3PmfLgLLof_NFL7.png" style="width: 100%; height: auto; object-fit: contain;">
+  <img src="https://cdn-uploads.huggingface.co/production/uploads/6841b10b397a67a7c7a39b89/iudiYIVkr1ZcAqpEWaW3Z.png" style="width: 100%; height: auto; object-fit: contain;">
 </div>
 """)
 #https://cdn-uploads.huggingface.co/production/uploads/6841b10b397a67a7c7a39b89/MTR_dMHte-RCIbyujLW83.png
@@ -245,6 +252,7 @@ with gr.Blocks(css="""
     
 
 
+
     user_profile = gr.State({"interview_type": "", "field": "", "interview_in_progress": False})
     chat_history = gr.State([])
 
@@ -300,20 +308,20 @@ with gr.Blocks(css="""
         with gr.Column(elem_classes=["custom-tabs"]):
             with gr.Tabs():
 
-                with gr.Tab('<img src="https://cdn-uploads.huggingface.co/production/uploads/6841b10b397a67a7c7a39b89/pVS-KWvRlW96VKa34EZeZ.png" style="width:24px;height:24px;"> Text Mode'):
+                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"):
+                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"):
+                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")