Upload folder using huggingface_hub

app.py

@@ -252,42 +252,62 @@ def make_sim_bar(model_name: str) -> go.Figure:
     values = list(sims.values())
 
     bar_colors = [
-        "#1565c0",  # Clean
-        "#6a1b9a",  # SafeSpeech
-        "#1b5e20",  # Enkidu
-        "#e65100",  # Spectral
-        "#37474f",  # GR-Noise
-        "#880e4f",  # AntiFake
+        "#2563eb",  # Clean
+        "#7c3aed",  # SafeSpeech
+        "#059669",  # Enkidu
+        "#ea580c",  # Spectral
+        "#475569",  # GR-Noise
+        "#be123c",  # AntiFake
     ]
     # annotate drop vs clean
     clean_sim = sims["Clean"]
     text = [f"{v:.3f}" if k == "Clean" else f"{v:.3f}<br>↓{clean_sim - v:.3f}"
             for k, v in sims.items()]
+    hover_text = [
+        f"{label}<br>SIM: {value:.3f}<br>Drop from clean: {clean_sim - value:.3f}"
+        for label, value in zip(labels, values)
+    ]
 
     fig = go.Figure(go.Bar(
         x=labels, y=values,
         marker_color=bar_colors,
-        text=text, textposition="outside",
+        marker_line_color="rgba(15, 23, 42, 0.25)",
+        marker_line_width=1,
+        text=text,
+        textposition="outside",
+        hovertext=hover_text,
+        hoverinfo="text",
         cliponaxis=False,
     ))
     fig.update_layout(
-        title=dict(text=f"<b>{model_name}</b> — Speaker Similarity Under Each Protection",
-                   font=dict(size=14)),
-        yaxis=dict(title="SIM (Speaker Similarity)", range=[0, max(values) * 1.2]),
-        xaxis=dict(title="Condition"),
-        paper_bgcolor="white", plot_bgcolor="#f8f9fa",
-        margin=dict(t=60, b=40, l=50, r=20),
-        height=320,
+        title=dict(
+            text=f"<b>{model_name}</b> speaker similarity after protection",
+            font=dict(size=16, color="#0f172a"),
+            x=0.02,
+        ),
+        yaxis=dict(
+            title="SIM",
+            range=[0, min(0.75, max(values) * 1.28)],
+            gridcolor="#e2e8f0",
+            zeroline=False,
+        ),
+        xaxis=dict(title="", tickfont=dict(size=12)),
+        paper_bgcolor="white",
+        plot_bgcolor="#f8fafc",
+        margin=dict(t=62, b=42, l=48, r=24),
+        height=350,
         showlegend=False,
+        bargap=0.28,
+        font=dict(color="#334155"),
     )
     fig.add_trace(go.Scatter(
         x=labels,
         y=[clean_sim] * len(labels),
         mode="lines+text",
-        line=dict(color="#1565c0", dash="dot", width=1.5),
+        line=dict(color="#2563eb", dash="dot", width=1.5),
         text=[""] * (len(labels) - 1) + ["Clean baseline"],
         textposition="top right",
-        textfont=dict(size=10, color="#1565c0"),
+        textfont=dict(size=10, color="#2563eb"),
         hoverinfo="skip",
         showlegend=False,
     ))
@@ -506,31 +526,126 @@ def update_results_bar(metric: str) -> go.Figure:
 # ── UI constants ──────────────────────────────────────────────────────────────
 
 CSS = """
-#title { text-align: center; }
 footer { display: none !important; }
-.note-box { font-size: 1.05em; background: #f0f4ff; border-radius: 8px; padding: 8px 12px; }
+.gradio-container {
+    max-width: 1180px !important;
+    margin: 0 auto !important;
+}
+.hero {
+    padding: 28px 28px 22px;
+    border-radius: 12px;
+    background: linear-gradient(135deg, #0f172a 0%, #164e63 54%, #065f46 100%);
+    color: white;
+    margin-bottom: 18px;
+}
+.hero h1 {
+    margin: 0 0 8px;
+    font-size: 2.35rem;
+    line-height: 1.08;
+    letter-spacing: 0;
+}
+.hero p {
+    max-width: 760px;
+    margin: 0;
+    color: #dbeafe;
+    font-size: 1.05rem;
+}
+.hero a {
+    color: white !important;
+}
+.hero-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 16px;
+}
+.hero-links a {
+    text-decoration: none;
+}
+.stat-strip {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 10px;
+    margin: 14px 0 18px;
+}
+.stat-card {
+    border: 1px solid #d8dee9;
+    border-radius: 8px;
+    padding: 12px 14px;
+    background: #ffffff;
+}
+.stat-card b {
+    display: block;
+    font-size: 1.35rem;
+    color: #0f172a;
+    line-height: 1.1;
+}
+.stat-card span {
+    color: #475569;
+    font-size: 0.9rem;
+}
+.section-head {
+    margin: 18px 0 8px;
+    color: #0f172a;
+}
+.note-box {
+    font-size: 1.02em;
+    background: #eef6ff;
+    border: 1px solid #bfdbfe;
+    border-left: 4px solid #2563eb;
+    border-radius: 8px;
+    padding: 10px 12px;
+}
+.audio-panel {
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 12px;
+    background: #ffffff;
+}
+.audio-panel h3,
+.audio-panel h4 {
+    margin-top: 0;
+}
+.workflow-copy {
+    color: #475569;
+    margin-bottom: 12px;
+}
+@media (max-width: 760px) {
+    .hero {
+        padding: 22px 18px 18px;
+    }
+    .hero h1 {
+        font-size: 1.75rem;
+    }
+    .stat-strip {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
 """
 
 INTRO_MD = """
-<div id="title">
-
-# RVCBench ��� Voice Cloning & Protection Benchmark
-
-**Can audio protection prevent your voice from being cloned?**
-
-[![Paper](https://img.shields.io/badge/arXiv-2602.00443-b31b1b.svg)](https://arxiv.org/abs/2602.00443)
-[![Dataset](https://img.shields.io/badge/HuggingFace-Dataset-ffcc00.svg)](https://huggingface.co/datasets/Nanboy/RVCBench)
-[![GitHub](https://img.shields.io/badge/GitHub-RVCBench-181717.svg)](https://github.com/Nanboy-Ronan/RVCBench)
+<div class="hero">
+  <h1>RVCBench</h1>
+  <p>Voice cloning attacks and audio protection methods, compared through paired listening examples and speaker-similarity results.</p>
+  <div class="hero-links">
+    <a href="https://arxiv.org/abs/2602.00443"><img alt="Paper" src="https://img.shields.io/badge/arXiv-2602.00443-b31b1b.svg"></a>
+    <a href="https://huggingface.co/datasets/Nanboy/RVCBench"><img alt="Dataset" src="https://img.shields.io/badge/HuggingFace-Dataset-ffcc00.svg"></a>
+    <a href="https://github.com/Nanboy-Ronan/RVCBench"><img alt="GitHub" src="https://img.shields.io/badge/GitHub-RVCBench-181717.svg"></a>
+  </div>
+</div>
 
+<div class="stat-strip">
+  <div class="stat-card"><b>18</b><span>voice cloning models</span></div>
+  <div class="stat-card"><b>5</b><span>protection methods</span></div>
+  <div class="stat-card"><b>7</b><span>evaluation metrics</span></div>
+  <div class="stat-card"><b>10</b><span>speech datasets</span></div>
 </div>
 """
 
 GALLERY_INTRO_MD = """
-A voice cloning model uses the **Reference Voice** to clone the **Target Speech**.
-When protection (SafeSpeech adversarial perturbation) is applied to the reference first,
-the clone degrades — lower speaker similarity means protection is working.
-
-The bar chart below shows the SIM drop under **all 5 protection methods** for the selected model.
+<div class="workflow-copy">
+Select a cloning model, compare clean and protected audio, then inspect how much each protection method lowers speaker similarity.
+</div>
 """
 
 PROT_INTRO_MD = """
@@ -564,39 +679,39 @@ def build_demo():
             with gr.Tab("🎧  Voice Cloning Gallery"):
                 gr.Markdown(GALLERY_INTRO_MD)
 
-                model_dd = gr.Dropdown(
-                    choices=list(GALLERY_MODELS.keys()),
-                    value="ZipVoice",
-                    label="Voice Cloning Model",
-                )
-                load_btn = gr.Button("Load Example", variant="primary")
+                with gr.Row():
+                    model_dd = gr.Dropdown(
+                        choices=list(GALLERY_MODELS.keys()),
+                        value="ZipVoice",
+                        label="Voice Cloning Model",
+                        scale=3,
+                    )
+                    load_btn = gr.Button("Load Example", variant="primary", scale=1)
 
                 sim_note = gr.Markdown("", elem_classes="note-box")
 
                 with gr.Row():
-                    with gr.Column():
-                        gr.Markdown("### 1 · Reference Voice")
+                    with gr.Column(elem_classes="audio-panel"):
+                        gr.Markdown('<h3 class="section-head">1. Reference Voice</h3>')
                         gr.Markdown(f"*\"{REF_TEXT}\"*")
                         ref_out = gr.Audio(label="Reference (original)", interactive=False)
-                    with gr.Column():
-                        gr.Markdown("### 2 · Target Speech")
+                    with gr.Column(elem_classes="audio-panel"):
+                        gr.Markdown('<h3 class="section-head">2. Target Speech</h3>')
                         gr.Markdown(f"*\"{TARGET_TEXT}\"*")
                         target_out = gr.Audio(label="Target utterance", interactive=False)
 
-                gr.Markdown("---")
-                gr.Markdown("### 3 · Cloning Results — Clean vs. SafeSpeech-Protected")
+                gr.Markdown('<h3 class="section-head">3. Cloning Results</h3>')
 
                 with gr.Row():
-                    with gr.Column():
-                        gr.Markdown("#### Without Protection")
+                    with gr.Column(elem_classes="audio-panel"):
+                        gr.Markdown("#### Clean Reference")
                         clean_out = gr.Audio(label="Clean clone", interactive=False)
-                    with gr.Column():
-                        gr.Markdown("#### With SafeSpeech Protection")
+                    with gr.Column(elem_classes="audio-panel"):
+                        gr.Markdown("#### SafeSpeech-Protected Reference")
                         prot_ref_out   = gr.Audio(label="Protected reference", interactive=False)
                         prot_clone_out = gr.Audio(label="Clone from protected (degraded)", interactive=False)
 
-                gr.Markdown("---")
-                gr.Markdown("### 4 · Protection Effectiveness Across All Methods")
+                gr.Markdown('<h3 class="section-head">4. Protection Effectiveness Across Methods</h3>')
                 sim_chart = gr.Plot(label="", show_label=False)
 
                 gallery_outputs = [ref_out, target_out, clean_out, prot_ref_out,