Update app.py

app.py

@@ -119,33 +119,84 @@ def handle_audio(audio_file, chat_history, user_profile):
         return chat_history
     return respond(transcribed, chat_history, user_profile)
 
-# Gradio UI
-with gr.Blocks(css="""body { background-color: #161b24; font-family: 'Nato', sans-serif !important; }""") as demo:
-    gr.Markdown("# 🎤 Welcome to Intervu")
+# Full UI
+with gr.Blocks(css="""
+    body { background-color: #161b24; font-family: 'Nato', sans-serif !important; }
+    h1 { text-align: center; color: #2c3e50; }
+    img { display: block; margin: auto; width: 100px; border-radius: 20px; }
+    button { 
+    font-size: 16px; 
+    padding: 10px 20px; 
+    border-radius: 10px; 
+    border: 2px solid rgba(124, 248, 255, 0.4); 
+    background-color: rgba(124, 248, 255, 0.4); 
+    color: #fafdff; 
+    transition: all 0.2s ease;
+}
+    button:hover {
+    background-color: #49888f;
+    border-color: #7cf8ff;
+    transform: scale(1.05);
+}
+    .gr-chatbot { background-color: white; border-radius: 15px; padding: 20px; }
+""") as demo:
+
+    gr.Markdown("""
+<div style='width: 100%; text-align: center;'>
+  <img src="https://cdn-uploads.huggingface.co/production/uploads/6841b10b397a67a7c7a39b89/MTR_dMHte-RCIbyujLW83.png" style="width: 100%; height: auto; object-fit: contain;">
+</div>
+""")
 
     user_profile = gr.State({"interview_type": "", "field": "", "interview_in_progress": False})
     chat_history = gr.State([])
 
-    # Step 1
+    gr.Markdown("""<div style='
+    font-family: 'Lato', sans-serif;
+    text-align: center;
+    padding: 30px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+'>
+    <h1 style='font-size: 89.5px; color: #fafdff;'>Welcome to <b><span style='color: #7cf8ff;'>Intervu</span></b></h1>
+    <p style='font-size: 22.1px; color: #fafdff; margin-top: 30px; text-align: center; margin-bottom: 30px;'>Before you begin, complete Step 1 to select your interview type and Step 2 to enter your background. Practice is available through text, speech, or webcam.</p>
+</div>
+""")
+
+    # Step 1: Interview Type
     with gr.Row():
-        with gr.Column():
+        with gr.Column(scale=2):
+            gr.Markdown("""
+                <div style="
+                    background: rgba(255, 255, 255, 0.1); 
+                    padding: 20px; 
+                    border-radius: 15px; 
+                    backdrop-filter: blur(5px); 
+                    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+                ">
+                    <h3>Step 1: Choose Interview Type</h3>
+                    <p>Select the type of interview you want to practice.</p>
+                </div>
+            """)
             btn1 = gr.Button("Technical")
             btn2 = gr.Button("Competency-Based Interview")
             btn3 = gr.Button("Case")
-        type_output = gr.Textbox(label="Bot Response", interactive=False)
+
+        with gr.Column(scale=2):
+            type_output = gr.Textbox(label="Bot Response", interactive=False)
 
     btn1.click(set_type, inputs=[gr.Textbox(value="Technical", visible=False), user_profile], outputs=[type_output, user_profile])
     btn2.click(set_type, inputs=[gr.Textbox(value="Competency-Based Interview", visible=False), user_profile], outputs=[type_output, user_profile])
     btn3.click(set_type, inputs=[gr.Textbox(value="Case", visible=False), user_profile], outputs=[type_output, user_profile])
 
-    # Step 2
+    # Step 2: Background
+    gr.Markdown("### Step 2: Enter Your Background")
     background = gr.Textbox(label="Your background and field/goal")
     background_btn = gr.Button("Submit")
     background_output = gr.Textbox(label="Bot response", interactive=False)
     background_btn.click(save_background, inputs=[background, user_profile], outputs=[background_output, user_profile])
 
-    # Step 3 - Tabs
-    gr.Markdown("### Choose Chat Mode")
+    # 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")