Update UI to show demo images

ui.py

@@ -1,39 +1,113 @@
 import gradio as gr
 from api import check_liveness
 
+EXAMPLE_IMAGES = [
+    ["assets/1.jpg"],
+    ["assets/2.jpg"],
+    ["assets/3.jpg"],
+    ["assets/4.jpg"],
+    ["assets/5.jpg"],
+    ["assets/6.jpg"],
+]
+
+
+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", "")))
+
+    if isinstance(is_live, str):
+        is_live = is_live.lower() in ("true", "1", "yes", "real", "live")
+    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>
+            </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>
+        </div>
+        {f"<p style='margin-top: 12px; color: #64748b;'>{message}</p>" if message else ""}
+    </div>
+    """
+
 
 def process_image(image):
     if image is None:
-        return {"error": "Please upload an image first"}
+        return (
+            '<div style="padding:20px;color:#64748b;text-align:center;">'
+            "Upload or select an example image first</div>",
+            {"error": "Please upload an image first"},
+        )
 
     result = check_liveness(image)
     if "error" in result:
-        return {"error": result["error"]}
-    return result
+        return (
+            f'<div style="padding:20px;color:#ef4444;text-align:center;">{result["error"]}</div>',
+            result,
+        )
+
+    return _format_result_html(result), result
 
 
 def create_interface():
-    with gr.Blocks(title="MiniAiLive Face Liveness Detection") as demo:
+    with gr.Blocks(title="MiniAiLive Face Liveness Detection", theme=gr.themes.Soft()) as demo:
         gr.Markdown(
             """
-            # MiniAiLive Face Liveness Detection
+            # 🥇 MiniAiLive Face Liveness Detection
             **3D Passive Face Liveness Detection (Face Anti-Spoofing)**
 
-            Upload a face image to check liveness. The SDK server must be running at the configured API endpoint.
+            Upload a face image or click an example below to check liveness.
             """
         )
 
         with gr.Row():
-            with gr.Column():
-                image_input = gr.Image(label="Upload Image")
-                submit_btn = gr.Button("Check Liveness", variant="primary")
-            with gr.Column():
-                output = gr.JSON(label="Result")
+            with gr.Column(scale=1):
+                image_input = gr.Image(
+                    label="Upload Image",
+                    type="numpy",
+                )
+                submit_btn = gr.Button("🔍 Check Liveness", variant="primary", size="lg")
+
+                gr.Examples(
+                    examples=EXAMPLE_IMAGES,
+                    inputs=image_input,
+                    label="📸 Example Images",
+                )
+
+            with gr.Column(scale=1):
+                result_html = gr.HTML(label="Result")
+                raw_json = gr.JSON(label="Raw Response", visible=True)
 
         submit_btn.click(
             fn=process_image,
             inputs=image_input,
-            outputs=output,
+            outputs=[result_html, raw_json],
         )
 
     return demo