Update UI

api.py

@@ -9,11 +9,23 @@ API_URL = os.environ.get(
 )
 
 
-def check_liveness(image: np.ndarray) -> dict:
+def _load_image(image):
     if image is None:
+        return None
+    if isinstance(image, str):
+        img = cv2.imread(image)
+        if img is None:
+            return None
+        return img
+    return image
+
+
+def check_liveness(image) -> dict:
+    img = _load_image(image)
+    if img is None:
         return {"error": "No image provided"}
 
-    success, img_encoded = cv2.imencode('.jpg', image, [cv2.IMWRITE_JPEG_QUALITY, 95])
+    success, img_encoded = cv2.imencode('.jpg', img, [cv2.IMWRITE_JPEG_QUALITY, 95])
     if not success:
         return {"error": "Failed to encode image"}
 

ui.py

@@ -11,64 +11,117 @@ EXAMPLE_IMAGES = [
 ]
 
 
+def _normalize_keys(d: dict) -> dict:
+    return {k.strip().replace(" ", "_"): v for k, v in d.items()}
+
+
 def _format_result_html(result: dict) -> str:
-    is_live = result.get("real", result.get("live", result.get("is_live", False)))
-    score = result.get("score", result.get("confidence", result.get("liveness_score", 0)))
-    message = result.get("message", result.get("msg", result.get("detail", "")))
+    r = _normalize_keys(result)
+
+    liveness_text = r.get("liveness_result", "").lower()
+    is_genuine = "genuine" in liveness_text
+
+    probability = r.get("probability", 0)
+    if isinstance(probability, str):
+        try:
+            probability = float(probability)
+        except (ValueError, TypeError):
+            probability = 0
 
-    if isinstance(is_live, str):
-        is_live = is_live.lower() in ("true", "1", "yes", "real", "live")
+    score = r.get("score", 0)
     if isinstance(score, str):
         try:
             score = float(score)
         except (ValueError, TypeError):
             score = 0
-    if score > 1:
-        score = score / 100
-
-    pct = max(0, min(100, round(score * 100)))
-    badge_color = "#22c55e" if is_live else "#ef4444"
-    badge_text = "REAL / LIVE" if is_live else "SPOOF / FAKE"
-    icon = "✅" if is_live else "❌"
-
-    return f"""
-    <div style="padding: 20px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0;">
-        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
-            <span style="font-size: 28px;">{icon}</span>
-            <span style="font-size: 24px; font-weight: 700;">Liveness Result</span>
-        </div>
-        <div style="display: inline-block; padding: 8px 20px; border-radius: 20px;
-                    background: {badge_color}; color: white; font-weight: 700;
-                    font-size: 18px; margin-bottom: 16px;">
-            {badge_text}
-        </div>
-        <div style="margin-top: 14px;">
-            <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
-                <span style="font-weight: 600;">Confidence</span>
-                <span>{pct}%</span>
+
+    quality = r.get("quality", 0)
+    if isinstance(quality, str):
+        try:
+            quality = float(quality)
+        except (ValueError, TypeError):
+            quality = 0
+
+    pct = round(max(0, min(probability, 1)) * 100)
+
+    if is_genuine:
+        badge_text = "✅  GENUINE / LIVE"
+        badge_color = "#059669"
+        bg_color = "#ecfdf5"
+        border_color = "#a7f3d0"
+        score_color = "#059669"
+    else:
+        badge_text = "❌  SPOOF / FAKE"
+        badge_color = "#dc2626"
+        bg_color = "#fef2f2"
+        border_color = "#fecaca"
+        score_color = "#dc2626"
+
+    html = f"""
+    <div style="padding: 12px 0;">
+        <div style="background: {bg_color}; border: 2px solid {border_color};
+                    border-radius: 16px; padding: 24px;">
+            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
+                <span style="font-size: 22px; font-weight: 700; color: #1e293b;">
+                    Liveness Result
+                </span>
+            </div>
+
+            <div style="display: inline-block; padding: 8px 24px; border-radius: 999px;
+                        background: {badge_color}; color: white; font-weight: 700;
+                        font-size: 18px; letter-spacing: 0.5px; margin-bottom: 20px;">
+                {badge_text}
+            </div>
+
+            <div style="margin-top: 16px;">
+                <div style="display: flex; justify-content: space-between; margin-bottom: 6px;">
+                    <span style="font-weight: 600; color: #475569;">Confidence</span>
+                    <span style="font-weight: 700; color: {score_color};">{pct}%</span>
+                </div>
+                <div style="background: #e2e8f0; border-radius: 999px; height: 10px; overflow: hidden;">
+                    <div style="width: {pct}%; height: 100%; background: {badge_color};
+                                border-radius: 999px;"></div>
+                </div>
             </div>
-            <div style="background: #e2e8f0; border-radius: 8px; height: 12px; overflow: hidden;">
-                <div style="width: {pct}%; height: 100%; background: {badge_color};
-                            border-radius: 8px; transition: width 0.5s;"></div>
+
+            <div style="margin-top: 14px; display: flex; gap: 24px;">
+                <div>
+                    <span style="font-size: 13px; color: #94a3b8;">Quality</span>
+                    <div style="font-weight: 600; color: #334155;">
+                        {round(quality * 100)}%
+                    </div>
+                </div>
+                <div>
+                    <span style="font-size: 13px; color: #94a3b8;">Score</span>
+                    <div style="font-weight: 600; color: #334155;">
+                        {score:.4f}
+                    </div>
+                </div>
+                <div>
+                    <span style="font-size: 13px; color: #94a3b8;">Status</span>
+                    <div style="font-weight: 600; color: #334155;">
+                        {r.get("state", "")}
+                    </div>
+                </div>
             </div>
         </div>
-        {f"<p style='margin-top: 12px; color: #64748b;'>{message}</p>" if message else ""}
     </div>
     """
+    return html
 
 
 def process_image(image):
     if image is None:
         return (
-            '<div style="padding:20px;color:#64748b;text-align:center;">'
-            "Upload or select an example image first</div>",
-            {"error": "Please upload an image first"},
+            '<div style="padding:20px;text-align:center;color:#94a3b8;">'
+            "Upload or select an example image</div>",
+            {"error": "No image provided"},
         )
 
     result = check_liveness(image)
     if "error" in result:
         return (
-            f'<div style="padding:20px;color:#ef4444;text-align:center;">{result["error"]}</div>',
+            f'<div style="padding:20px;text-align:center;color:#dc2626;">{result["error"]}</div>',
             result,
         )
 
@@ -76,33 +129,41 @@ def process_image(image):
 
 
 def create_interface():
-    with gr.Blocks(title="MiniAiLive Face Liveness Detection", theme=gr.themes.Soft()) as demo:
+    with gr.Blocks(
+        title="MiniAiLive Face Liveness Detection",
+        theme=gr.themes.Soft(
+            primary_hue="emerald",
+            neutral_hue="slate",
+        ),
+        css="""
+            footer {display: none !important;}
+    """,
+    ) as demo:
         gr.Markdown(
             """
             # 🥇 MiniAiLive Face Liveness Detection
-            **3D Passive Face Liveness Detection (Face Anti-Spoofing)**
+            **3D Passive Face Liveness Detection · Face Anti-Spoofing**
 
             Upload a face image or click an example below to check liveness.
             """
         )
 
-        with gr.Row():
-            with gr.Column(scale=1):
-                image_input = gr.Image(
-                    label="Upload Image",
-                    type="numpy",
+        with gr.Row(equal_height=False):
+            with gr.Column(scale=1, min_width=400):
+                image_input = gr.Image(label="Upload Image")
+                submit_btn = gr.Button(
+                    "Check Liveness", variant="primary", size="lg"
                 )
-                submit_btn = gr.Button("🔍 Check Liveness", variant="primary", size="lg")
 
                 gr.Examples(
                     examples=EXAMPLE_IMAGES,
                     inputs=image_input,
-                    label="📸 Example Images",
+                    label="Example Images",
                 )
 
-            with gr.Column(scale=1):
+            with gr.Column(scale=1, min_width=400):
                 result_html = gr.HTML(label="Result")
-                raw_json = gr.JSON(label="Raw Response", visible=True)
+                raw_json = gr.JSON(label="Raw Response")
 
         submit_btn.click(
             fn=process_image,