fmt

app.py

@@ -88,10 +88,10 @@ HTML_FACE_COMPARISON_EXPLANATION = """
 <h3 style="color:#2E86C1;">🔍 Face Comparison Results Explanation</h3>
 <p>The system compares two photos and provides one of four results:</p>
 <ul>
-    <li><strong style="color:#28A745;">Same Person</strong>: The same person appears in both photos.</li>
-    <li><strong style="color:#DC3545;">Different Person</strong>: The photos show different individuals.</li>
-    <li><strong style="color:#F39C12;">Same Photo</strong>: Identical faces detected, possibly indicating a duplicate or edited image.</li>
-    <li><strong style="color:#6C757D;">Failure</strong>: Face comparison failed due to undetected or unclear faces.</li>
+    <li><strong style="color:#2ECC71;">Same Person</strong>: The same person appears in both photos.</li>
+    <li><strong style="color:#E74C3C;">Different Person</strong>: The photos show different individuals.</li>
+    <li><strong style="color:#F1C40F;">Same Photo</strong>: Identical faces detected, possibly indicating a duplicate or edited image.</li>
+    <li><strong style="color:#95A5A6;">Failure</strong>: Face comparison failed due to undetected or unclear faces.</li>
 </ul>
 """
 
@@ -105,8 +105,8 @@ def check_liveness(file_path):
         liveness_result = response.json()
 
         if (
-                "ran_checks" not in liveness_result.keys()
-                or len(liveness_result["ran_checks"]) == 0
+            "ran_checks" not in liveness_result.keys()
+            or len(liveness_result["ran_checks"]) == 0
         ):
             msg = ""
         elif liveness_result["ran_checks"] == ["ImageQuality"]:
@@ -129,13 +129,13 @@ def check_liveness(file_path):
 
 def map_fc_result(api_status: str):
     mapping = {
-        "FaceComparisonVerified": {"label": "Same Person", "color": "green"},
-        "FaceComparisonUnknown": {"label": "Failure", "color": "gray"},
+        "FaceComparisonVerified": {"label": "Same Person", "color": "#2ECC71"},
+        "FaceComparisonUnknown": {"label": "Failure", "color": "#95A5A6"},
         "FaceComparisonFailedDifferentFaces": {
             "label": "Different Person",
-            "color": "red",
+            "color": "#E74C3C",
         },
-        "FaceComparisonFailedSamePhotos": {"label": "Same Photo", "color": "#F39C12"},
+        "FaceComparisonFailedSamePhotos": {"label": "Same Photo", "color": "#F1C40F"},
     }
     status = api_status["status"] if "status" in api_status.keys() else ""
     return mapping.get(status, {"label": "Unknown", "color": "gray"})
@@ -159,7 +159,53 @@ def compare_faces(image1_path, image2_path):
         return comparison_result, "", False
 
 
-with gr.Blocks(theme=gr.themes.Soft()) as Demo:
+tabs_css = """
+/* Style all Gradio tab buttons */
+button[role="tab"] {
+    font-size: 14px !important;
+    font-family: 'Montserrat', sans-serif !important;
+    font-weight: 600 !important;
+    padding: 12px 24px !important;
+    margin: 0 6px !important;
+    background-color: #0B0F19 !important;
+    color: #F3F4F6 !important;
+    border-radius: 8px !important;
+    border: 1px solid #1a1a1a !important;
+    box-shadow: none !important;
+    transition: all 0.2s ease !important;
+}
+
+/* Style selected tab button */
+button[role="tab"].selected {
+    background-color: #635bff !important;
+    color: white !important;
+    box-shadow: 0 0 6px rgba(99, 91, 255, 0.5) !important;
+}
+
+/* Inactive tab style */
+button[role="tab"]:not(.selected) {
+    font-size: 14px !important;
+    font-family: 'Montserrat', sans-serif !important;
+    font-weight: 600 !important;
+    padding: 12px 24px !important;
+    margin: 0 6px !important;
+    background-color: #9D2C53 !important;
+    color: #F3F4F6 !important;
+    border-radius: 8px !important;
+    border: 1px solid #1a1a1a !important;
+    box-shadow: none !important;
+    transition: all 0.2s ease !important;
+}
+
+/* Optional: hover effect */
+button[role="tab"]:hover {
+    background-color: #1a1a2b !important;
+    color: white !important;
+}
+"""
+
+
+with gr.Blocks(theme=gr.themes.Soft(), css=tabs_css) as Demo:
     with gr.Tabs():
         with gr.Tab("Liveness Detection"):
             header_box = gr.HTML(HTML_HEADER)
@@ -239,5 +285,6 @@ with gr.Blocks(theme=gr.themes.Soft()) as Demo:
                 outputs=[comparison_result, comparison_state],
             )
 
+
 if __name__ == "__main__":
     Demo.launch()