Update app.py

app.py

@@ -1,13 +1,8 @@
 import gradio as gr
 import torch
-import matplotlib
-matplotlib.use("Agg")
-import matplotlib.pyplot as plt
-import matplotlib.patches as mpatches
-import numpy as np
 from transformers import pipeline
 
-# ── Model registry ───────────────────────────────────────────────────────────
+# ── Model registry ────────────────────────────────────────────────────────────
 MODELS = {
     ("fast", "kodf"):        "KoreaPeter/ms-eff-gcvit-deepfake-b0-kodf",
     ("fast", "celeb-df-v2"): "KoreaPeter/ms-eff-gcvit-deepfake-b0-celeb-df-v2",
@@ -32,81 +27,14 @@ def _get_pipeline(variant: str, dataset: str):
     return _cache[key]
 
 
-# ── Frame-level graph ─────────────────────────────────────────────────────────
-def _build_frame_graph(frame_scores: list, final_fake_prob: float):
-    scores = [round(float(s), 4) for s in frame_scores]
-    frames = list(range(1, len(scores) + 1))
-
-    colors = []
-    for s in scores:
-        if s >= 0.7:
-            colors.append("#FF4B4B")   # red — FAKE
-        elif s >= 0.4:
-            colors.append("#FFD700")   # yellow — UNCERTAIN
-        else:
-            colors.append("#39FF14")   # green — REAL
-
-    fig, ax = plt.subplots(figsize=(10, 4))
-    fig.patch.set_facecolor("#111111")
-    ax.set_facecolor("#1a1a1a")
-
-    # 영역 색칠
-    ax.axhspan(0.7, 1.0, color="#FF4B4B", alpha=0.08)
-    ax.axhspan(0.4, 0.7, color="#FFD700", alpha=0.08)
-    ax.axhspan(0.0, 0.4, color="#39FF14", alpha=0.08)
-
-    # 기준선
-    ax.axhline(0.7, color="#FF4B4B", linewidth=0.8, linestyle="--", alpha=0.5)
-    ax.axhline(0.4, color="#FFD700", linewidth=0.8, linestyle="--", alpha=0.5)
-
-    # 최종 스코어 수평선
-    ax.axhline(final_fake_prob, color="#ffffff", linewidth=1.2,
-               linestyle=":", alpha=0.6, label=f"Final score: {final_fake_prob:.4f}")
-
-    # 바 차트
-    ax.bar(frames, scores, color=colors, width=0.6, alpha=0.85, zorder=3)
-
-    # 선 연결
-    ax.plot(frames, scores, color="#aaaaaa", linewidth=1.0,
-            marker="o", markersize=4, alpha=0.7, zorder=4)
-
-    # 축 스타일
-    ax.set_xlim(0.3, len(frames) + 0.7)
-    ax.set_ylim(0.0, 1.05)
-    ax.set_xlabel("Frame", color="#aaaaaa", fontsize=11)
-    ax.set_ylabel("FAKE Probability", color="#aaaaaa", fontsize=11)
-    ax.set_title("Frame-level FAKE Probability", color="#e5e5e5", fontsize=13, pad=10)
-    ax.tick_params(colors="#aaaaaa")
-    for spine in ax.spines.values():
-        spine.set_edgecolor("#333333")
-
-    # 범례
-    patches = [
-        mpatches.Patch(color="#FF4B4B", alpha=0.7, label="FAKE (≥ 0.7)"),
-        mpatches.Patch(color="#FFD700", alpha=0.7, label="UNCERTAIN (0.4–0.7)"),
-        mpatches.Patch(color="#39FF14", alpha=0.7, label="REAL (< 0.4)"),
-    ]
-    ax.legend(handles=patches, facecolor="#1a1a1a", edgecolor="#333333",
-              labelcolor="#e5e5e5", fontsize=9, loc="upper right")
-
-    plt.tight_layout()
-    return fig
-
-
-# ── Inference ─────────────────────────────────────────────────────────────────
+# ── Inference ──────────────────────────────────────────────────────────────────
 def predict(
-    video_path: str,
-    variant: str,
-    dataset: str,
-    num_frames: int,
-    margin_ratio: float,
-    conf_thres: float,
-    min_face_ratio: float,
-    tta_hflip: float,
-    agg_mode: str,
+    video_path, variant, dataset,
+    num_frames, margin_ratio, conf_thres,
+    min_face_ratio, tta_hflip, agg_mode,
 ):
     if video_path is None:
-        return None, "⚠️ Please upload a video.", None
+        return None, _verdict_html("warning"), None
 
     try:
         pipe = _get_pipeline(variant, dataset)
@@ -121,136 +49,357 @@ def predict(
             return_frame_scores=True,
         )
     except Exception as e:
-        return None, f"❌ Pipeline error: {e}", None
+        return None, _verdict_html("error", str(e)), None
 
-    # no_face
     if results[0]["label"] == "no_face_detected":
-        return (
-            {"REAL": 0.0, "FAKE": 0.0},
-            "😶 No face detected.\nPlease use a video with a clearly visible face.",
-            None,
-        )
+        return {"REAL": 0.0, "FAKE": 0.0}, _verdict_html("no_face"), None
 
     scores = {r["label"].upper(): round(r["score"], 4)
               for r in results if r.get("label") in ("fake", "real")}
-
     fake_prob = scores.get("FAKE", 0.0)
 
     if fake_prob >= 0.7:
-        verdict = f"🔴 FAKE  ({fake_prob * 100:.1f}% confidence)"
+        verdict_html = _verdict_html("fake", fake_prob)
     elif fake_prob >= 0.4:
-        verdict = f"🟡 UNCERTAIN  (FAKE {fake_prob * 100:.1f}%)"
+        verdict_html = _verdict_html("uncertain", fake_prob)
     else:
-        verdict = f"🟢 REAL  ({(1 - fake_prob) * 100:.1f}% confidence)"
+        verdict_html = _verdict_html("real", fake_prob)
 
     frame_scores = next(
         (r["frame_scores"] for r in results if "frame_scores" in r), None
     )
 
-    fig = _build_frame_graph(frame_scores, fake_prob) if frame_scores else None
-
-    return scores, verdict, fig
+    table_data = None
+    if frame_scores:
+        table_data = []
+        for i, s in enumerate(frame_scores, 1):
+            s = round(float(s), 4)
+            if s >= 0.7:
+                tag = "🔴 FAKE"
+            elif s >= 0.4:
+                tag = "🟡 UNCERTAIN"
+            else:
+                tag = "🟢 REAL"
+            table_data.append([i, f"{s:.4f}", f"{s * 100:.1f}%", tag])
+
+    return scores, verdict_html, table_data
+
+
+def _verdict_html(state: str, value=None) -> str:
+    templates = {
+        "warning": (
+            "#fbbf24", "#1c1400",
+            "⚠️", "No Video Uploaded",
+            "Please upload a video file to begin analysis."
+        ),
+        "error": (
+            "#f87171", "#1c0000",
+            "❌", "Pipeline Error",
+            str(value)
+        ),
+        "no_face": (
+            "#94a3b8", "#0f172a",
+            "😶", "No Face Detected",
+            "Please use a video with a clearly visible face."
+        ),
+        "fake": (
+            "#f87171", "#1c0000",
+            "🔴", "FAKE DETECTED",
+            f"Confidence: {float(value) * 100:.1f}%"
+        ),
+        "uncertain": (
+            "#fbbf24", "#1c1400",
+            "🟡", "UNCERTAIN",
+            f"FAKE probability: {float(value) * 100:.1f}%"
+        ),
+        "real": (
+            "#4ade80", "#001c09",
+            "🟢", "REAL",
+            f"Confidence: {(1 - float(value)) * 100:.1f}%"
+        ),
+    }
+    color, bg, icon, title, sub = templates[state]
+    return f"""
+<div style="
+    background: {bg};
+    border: 1.5px solid {color}44;
+    border-left: 4px solid {color};
+    border-radius: 12px;
+    padding: 20px 24px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    font-family: 'Inter', sans-serif;
+">
+    <span style="font-size: 2.2rem; line-height: 1;">{icon}</span>
+    <div>
+        <div style="color: {color}; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.05em;">{title}</div>
+        <div style="color: #94a3b8; font-size: 0.9rem; margin-top: 2px;">{sub}</div>
+    </div>
+</div>
+"""
 
 
-# ── Theme & CSS ───────────────────────────────────────────────────────────────
+# ── Theme ──────────────────────────────────────────────────────────────────────
 THEME = gr.themes.Base(
-    primary_hue="green",
+    primary_hue="violet",
     neutral_hue="slate",
     font=gr.themes.GoogleFont("Inter"),
 ).set(
-    body_background_fill="#0a0a0a",
-    body_text_color="#e5e5e5",
-    block_background_fill="#111111",
-    block_border_color="#222222",
-    input_background_fill="#0d0d0d",
-    button_primary_background_fill="#1a2c50",
-    button_primary_text_color="#39FF14",
-    button_primary_border_color="#39FF14",
-    button_primary_background_fill_hover="#39FF14",
-    button_primary_text_color_hover="#000000",
+    body_background_fill="#0b0d17",
+    body_text_color="#e2e8f0",
+    block_background_fill="#111827",
+    block_border_color="#1e293b",
+    block_border_width="1px",
+    block_radius="12px",
+    block_label_text_color="#64748b",
+    block_label_text_size="sm",
+    input_background_fill="#0f172a",
+    input_border_color="#1e293b",
+    input_border_color_focus="#7c3aed",
+    button_primary_background_fill="linear-gradient(135deg, #6d28d9, #4f46e5)",
+    button_primary_background_fill_hover="linear-gradient(135deg, #7c3aed, #6366f1)",
+    button_primary_text_color="#ffffff",
+    button_primary_border_color="transparent",
+    button_secondary_background_fill="#1e293b",
+    button_secondary_text_color="#e2e8f0",
+    slider_color="#7c3aed",
 )
 
 CSS = """
-.result-box textarea { font-size: 1.1rem !important; font-weight: bold !important; text-align: center; }
+/* ── Global ── */
+body { background: #0b0d17 !important; }
 footer { display: none !important; }
-"""
 
-# ── Build UI ──────────────────────────────────────────────────────────────────
-with gr.Blocks(theme=THEME, css=CSS, title="DeepGuard Video") as demo:
+/* ── Hero banner ── */
+.hero-banner {
+    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
+    border-radius: 16px;
+    padding: 36px 40px;
+    margin-bottom: 8px;
+    border: 1px solid #312e81;
+    position: relative;
+    overflow: hidden;
+}
+.hero-banner::before {
+    content: '';
+    position: absolute;
+    top: -60px; right: -60px;
+    width: 220px; height: 220px;
+    background: radial-gradient(circle, #7c3aed33, transparent 70%);
+    border-radius: 50%;
+}
+.hero-title {
+    font-size: 2rem;
+    font-weight: 800;
+    background: linear-gradient(90deg, #a78bfa, #818cf8, #38bdf8);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin: 0 0 6px 0;
+    line-height: 1.2;
+}
+.hero-sub {
+    color: #94a3b8;
+    font-size: 0.95rem;
+    margin: 0 0 16px 0;
+}
+.badge-row { display: flex; gap: 8px; flex-wrap: wrap; }
+.badge {
+    background: #1e1b4b;
+    border: 1px solid #4338ca44;
+    color: #a5b4fc;
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: 999px;
+    letter-spacing: 0.03em;
+}
+.badge-green { background: #052e16; border-color: #16a34a44; color: #4ade80; }
+.badge-blue  { background: #0c1a2e; border-color: #2563eb44; color: #60a5fa; }
+
+/* ── Section label ── */
+.section-label {
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #475569;
+    margin: 0 0 8px 2px;
+}
 
-    gr.Markdown("""
-# 🎬 DeepGuard — Video Deepfake Detection
+/* ── Pills (radio) ── */
+.radio-group .wrap { gap: 8px !important; }
+.radio-group label {
+    border: 1px solid #1e293b !important;
+    border-radius: 8px !important;
+    padding: 8px 16px !important;
+    background: #0f172a !important;
+    transition: all 0.15s ease;
+    cursor: pointer;
+}
+.radio-group label:has(input:checked) {
+    border-color: #7c3aed !important;
+    background: #1e1b4b !important;
+    color: #a78bfa !important;
+}
 
-MS-EffGCViT-based deepfake detection demo for videos · Frame-level inference with aggregation
+/* ── Analyze button ── */
+.analyze-btn {
+    margin-top: 12px !important;
+    height: 52px !important;
+    font-size: 1rem !important;
+    font-weight: 700 !important;
+    letter-spacing: 0.04em !important;
+    border-radius: 10px !important;
+    box-shadow: 0 0 24px #7c3aed44 !important;
+    transition: box-shadow 0.2s ease !important;
+}
+.analyze-btn:hover {
+    box-shadow: 0 0 36px #7c3aed88 !important;
+}
+
+/* ── Score label ── */
+.score-label .label-wrap { gap: 10px !important; }
+.score-label .label-item { border-radius: 8px !important; }
+
+/* ── Dataframe ── */
+.frame-table table { border-collapse: separate; border-spacing: 0; }
+.frame-table thead th {
+    background: #1e293b !important;
+    color: #94a3b8 !important;
+    font-size: 0.75rem !important;
+    font-weight: 700 !important;
+    letter-spacing: 0.08em !important;
+    text-transform: uppercase;
+    padding: 10px 14px !important;
+}
+.frame-table tbody tr:hover td { background: #1e293b88 !important; }
+.frame-table tbody td { padding: 9px 14px !important; font-size: 0.88rem !important; }
+
+/* ── Accordion ── */
+.gr-accordion { border-radius: 12px !important; border-color: #1e293b !important; }
+"""
 
-🔗 [GitHub](https://github.com/HanMoonSub/DeepGuard) · 🤗 [HuggingFace](https://huggingface.co/KoreaPeter)
+
+# ── UI ─────────────────────────────────────────────────────────────────────────
+with gr.Blocks(theme=THEME, css=CSS, title="DeepGuard") as demo:
+
+    # Hero
+    gr.HTML("""
+<div class="hero-banner">
+    <p class="hero-title">🎬 DeepGuard</p>
+    <p class="hero-sub">MS-EffGCViT · Multi-Scale Efficient Global Context Vision Transformer</p>
+    <div class="badge-row">
+        <span class="badge">Video Deepfake Detection</span>
+        <span class="badge badge-green">Frame-level Inference</span>
+        <span class="badge badge-blue">6 Models Available</span>
+        <span class="badge">🔗 <a href="https://github.com/HanMoonSub/DeepGuard" target="_blank" style="color:inherit;text-decoration:none;">GitHub</a></span>
+        <span class="badge">🤗 <a href="https://huggingface.co/KoreaPeter" target="_blank" style="color:inherit;text-decoration:none;">HuggingFace</a></span>
+    </div>
+</div>
 """)
 
-    with gr.Row():
-        # ── Left: Model + Video ──────────────────────────────────────────────
+    with gr.Row(equal_height=False):
+        # ── Left panel ────────────────────────────────────────────────────────
         with gr.Column(scale=1, min_width=300):
             video_input = gr.Video(label="Upload Video")
 
-            gr.Markdown("### ⚡ Model Variant")
+            gr.HTML('<p class="section-label">⚡ Model Variant</p>')
             variant_radio = gr.Radio(
                 choices=["fast", "pro"],
                 value="fast",
                 label=None,
-                info="Fast (b0): 8.7M params  |  Pro (b5): 50.3M params",
+                info="Fast (b0) · 8.7M params  |  Pro (b5) · 50.3M params",
+                elem_classes=["radio-group"],
             )
 
-            gr.Markdown("### 🌍 Training Domain")
+            gr.HTML('<p class="section-label" style="margin-top:16px;">🌍 Training Domain</p>')
             dataset_radio = gr.Radio(
                 choices=[
-                    ("🇰🇷 KoDF — East Asian faces",      "kodf"),
-                    ("🌟 Celeb-DF-v2 — Celebrity faces",  "celeb-df-v2"),
-                    ("🌍 FF++ — Western faces",            "ff++"),
+                    ("🇰🇷  KoDF — East Asian faces",      "kodf"),
+                    ("🌟  Celeb-DF-v2 — Celebrity faces",  "celeb-df-v2"),
+                    ("🌍  FF++ — Western faces",            "ff++"),
                 ],
                 value="kodf",
                 label=None,
+                elem_classes=["radio-group"],
             )
 
-            run_btn = gr.Button("🔍 Analyze", variant="primary", size="lg")
+            run_btn = gr.Button(
+                "🔍  Analyze Video",
+                variant="primary",
+                size="lg",
+                elem_classes=["analyze-btn"],
+            )
 
-        # ── Right: Result ─────────────────────────────────────────────────────
+        # ── Right panel ───────────────────────────────────────────────────────
         with gr.Column(scale=1, min_width=300):
-            verdict_output = gr.Textbox(
-                label="Verdict",
-                interactive=False,
-                lines=2,
-                elem_classes=["result-box"],
+            verdict_output = gr.HTML(
+                value=_verdict_html("warning"),
+                label=None,
             )
-            score_output = gr.Label(label="Class Probabilities", num_top_classes=2)
-
-            gr.Markdown("""
----
-**Model Guide**
-
-| | ⚡ Fast (b0) | 🔥 Pro (b5) |
-|---|---|---|
-| **Params** | 8.7M | 50.3M |
-| **Resolution** | 224×224 | 384×384 |
-| **Speed** | Faster | Slower |
-| **Accuracy** | High | Higher |
-
-**Domain Guide**
-
-| Domain | Training Data | Best For |
-|---|---|---|
-| KoDF | 62K real / 175K fake (Korean) | East Asian faces |
-| Celeb-DF-v2 | 890 real / 5.6K fake (Celebrities) | Celebrity faces |
-| FF++ | 1K real / 6K fake (4 manipulation types) | Western faces |
+            score_output = gr.Label(
+                label="Class Probabilities",
+                num_top_classes=2,
+                elem_classes=["score-label"],
+            )
+
+            gr.HTML("""
+<div style="
+    background:#0f172a;
+    border:1px solid #1e293b;
+    border-radius:12px;
+    padding:18px 20px;
+    margin-top:4px;
+    font-size:0.82rem;
+    color:#64748b;
+    line-height:1.8;
+">
+<div style="color:#94a3b8;font-weight:700;font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:10px;">Model Reference</div>
+<table style="width:100%;border-collapse:collapse;color:#94a3b8;">
+  <thead>
+    <tr style="border-bottom:1px solid #1e293b;">
+      <th style="text-align:left;padding:4px 8px;color:#475569;font-size:0.72rem;letter-spacing:0.08em;">SPEC</th>
+      <th style="text-align:center;padding:4px 8px;color:#a78bfa;">⚡ Fast (b0)</th>
+      <th style="text-align:center;padding:4px 8px;color:#60a5fa;">🔥 Pro (b5)</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td style="padding:4px 8px;">Params</td><td style="text-align:center;">8.7M</td><td style="text-align:center;">50.3M</td></tr>
+    <tr><td style="padding:4px 8px;">Resolution</td><td style="text-align:center;">224×224</td><td style="text-align:center;">384×384</td></tr>
+    <tr><td style="padding:4px 8px;">Speed</td><td style="text-align:center;">Faster</td><td style="text-align:center;">Slower</td></tr>
+    <tr><td style="padding:4px 8px;">Accuracy</td><td style="text-align:center;">High</td><td style="text-align:center;">Higher</td></tr>
+  </tbody>
+</table>
+<div style="height:1px;background:#1e293b;margin:12px 0;"></div>
+<div style="color:#94a3b8;font-weight:700;font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:10px;">Domain Reference</div>
+<table style="width:100%;border-collapse:collapse;color:#94a3b8;">
+  <thead>
+    <tr style="border-bottom:1px solid #1e293b;">
+      <th style="text-align:left;padding:4px 8px;color:#475569;font-size:0.72rem;letter-spacing:0.08em;">DOMAIN</th>
+      <th style="text-align:left;padding:4px 8px;color:#475569;font-size:0.72rem;letter-spacing:0.08em;">TRAINING DATA</th>
+      <th style="text-align:left;padding:4px 8px;color:#475569;font-size:0.72rem;letter-spacing:0.08em;">BEST FOR</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td style="padding:4px 8px;">🇰🇷 KoDF</td><td style="padding:4px 8px;">62K real / 175K fake</td><td style="padding:4px 8px;">East Asian</td></tr>
+    <tr><td style="padding:4px 8px;">🌟 Celeb-DF-v2</td><td style="padding:4px 8px;">890 real / 5.6K fake</td><td style="padding:4px 8px;">Celebrity</td></tr>
+    <tr><td style="padding:4px 8px;">🌍 FF++</td><td style="padding:4px 8px;">1K real / 6K fake</td><td style="padding:4px 8px;">Western</td></tr>
+  </tbody>
+</table>
+</div>
 """)
 
-    # ── Advanced Settings ─────────────────────────────────────────────────────
-    with gr.Accordion("⚙️ Advanced Settings", open=True):
-        gr.Markdown("Adjust inference parameters. Defaults are recommended for most cases.")
+    # ── Advanced Settings ──────────────────────────────────────────────────────
+    with gr.Accordion("⚙️  Advanced Settings", open=False):
+        gr.HTML('<p style="color:#64748b;font-size:0.85rem;margin:0 0 12px 0;">Defaults are recommended for most cases.</p>')
         with gr.Row():
             with gr.Column():
                 num_frames_slider = gr.Slider(
                     minimum=5, maximum=60, value=20, step=1,
                     label="Num Frames",
-                    info="Number of frames sampled from the video",
+                    info="Frames sampled from the video",
                 )
                 margin_ratio_slider = gr.Slider(
                     minimum=0.0, maximum=0.5, value=0.2, step=0.05,
@@ -260,7 +409,7 @@ MS-EffGCViT-based deepfake detection demo for videos · Frame-level inference wi
                 tta_hflip_slider = gr.Slider(
                     minimum=0.0, maximum=1.0, value=0.0, step=0.1,
                     label="TTA Horizontal Flip",
-                    info="Probability of horizontal flip for test-time augmentation",
+                    info="Probability of horizontal flip for TTA",
                 )
             with gr.Column():
                 agg_radio = gr.Radio(
@@ -277,14 +426,21 @@ MS-EffGCViT-based deepfake detection demo for videos · Frame-level inference wi
                 min_face_ratio_slider = gr.Slider(
                     minimum=0.001, maximum=0.1, value=0.01, step=0.001,
                     label="Min Face Ratio",
-                    info="Minimum face-to-frame area ratio to process",
+                    info="Minimum face-to-frame area ratio",
                 )
 
-    # ── Frame-level Graph ─────────────────────────────────────────────────────
-    with gr.Accordion("📊 Frame-level Results", open=True):
-        frame_graph = gr.Plot(label="Frame-level FAKE Probability")
+    # ── Frame-level Table ──────────────────────────────────────────────────────
+    with gr.Accordion("📊  Frame-level Results", open=True):
+        frame_table = gr.Dataframe(
+            headers=["Frame", "FAKE Score", "FAKE %", "Verdict"],
+            datatype=["number", "str", "str", "str"],
+            label=None,
+            interactive=False,
+            wrap=True,
+            elem_classes=["frame-table"],
+        )
 
-    # ── Event bindings ────────────────────────────────────────────────────────
+    # ── Bindings ───────────────────────────────────────────────────────────────
     run_btn.click(
         fn=predict,
         inputs=[
@@ -292,7 +448,7 @@ MS-EffGCViT-based deepfake detection demo for videos · Frame-level inference wi
             num_frames_slider, margin_ratio_slider, conf_thres_slider,
             min_face_ratio_slider, tta_hflip_slider, agg_radio,
         ],
-        outputs=[score_output, verdict_output, frame_graph],
+        outputs=[score_output, verdict_output, frame_table],
     )
 
 if __name__ == "__main__":