Update app.py

app.py

@@ -192,7 +192,40 @@ with gr.Blocks(css="""
     }
     :root {
     --trim-region-color: rgba(255, 153, 0, 0.5);  /* Nice orange for example */
-}
+
+
+    .custom-tabs button[role="tab"]:nth-child(1)::before {
+        content: "";
+        background: url("https://cdn-icons-png.flaticon.com/512/1384/1384031.png") no-repeat center center;
+        background-size: contain;
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        margin-right: 8px;
+        vertical-align: middle;
+    }
+
+    .custom-tabs button[role="tab"]:nth-child(2)::before {
+        content: "";
+        background: url("https://cdn-icons-png.flaticon.com/512/727/727245.png") no-repeat center center;
+        background-size: contain;
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        margin-right: 8px;
+        vertical-align: middle;
+    }
+
+    .custom-tabs button[role="tab"]:nth-child(3)::before {
+        content: "";
+        background: url("https://cdn-icons-png.flaticon.com/512/2921/2921823.png") no-repeat center center;
+        background-size: contain;
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        margin-right: 8px;
+        vertical-align: middle;
+    }
 
 
 
@@ -200,15 +233,15 @@ with gr.Blocks(css="""
 
     gr.Markdown("""
 <div style='width: 100%; text-align: center;'>
-  <img src="https://cdn-uploads.huggingface.co/production/uploads/6841b10b397a67a7c7a39b89/zK_LYI3Rn1j81FnR9LPmu.png" style="width: 100%; height: auto; object-fit: contain;">
+  <img src="https://cdn-uploads.huggingface.co/production/uploads/6841b10b397a67a7c7a39b89/MdYcoR3PmfLgLLof_NFL7.png" style="width: 100%; height: auto; object-fit: contain;">
 </div>
 """)
 #https://cdn-uploads.huggingface.co/production/uploads/6841b10b397a67a7c7a39b89/MTR_dMHte-RCIbyujLW83.png
-    gr.Markdown("""
-<div style='width: 90%; text-align: center;'>
-  <img src="https://cdn-uploads.huggingface.co/production/uploads/6841b10b397a67a7c7a39b89/H6VqF7bDhPQ9k8lQo7fqO.png" style="width: 100%; height: auto; object-fit: contain;">
-</div>
-""")
+#     gr.Markdown("""
+# <div style='width: 90%; text-align: center;'>
+#   <img src="https://cdn-uploads.huggingface.co/production/uploads/6841b10b397a67a7c7a39b89/H6VqF7bDhPQ9k8lQo7fqO.png" style="width: 100%; height: auto; object-fit: contain;">
+# </div>
+# """)
     
 
 
@@ -216,17 +249,17 @@ with gr.Blocks(css="""
     chat_history = gr.State([])
 
 
-    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>
-""")
+#     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():