Clean up the code and add ABOUT

app.py

@@ -9,6 +9,13 @@ def restart_space():
     API.restart_space(repo_id=REPO_ID)
 
 
+CITATION_TEXT = r"""@misc{cloneval,
+    author={Christop, Iwona and Kuczyński, Tomasz and Kubis, Marek},
+    title={{ClonEval: An Open Voice Cloning Benchmark}},
+    year={2025},
+}"""
+
+
 app = gr.Blocks(css=custom_css)
 
 with app:
@@ -24,39 +31,16 @@ with app:
     """
 
     # Title and Description of the Leaderboard
-    gr.HTML("""
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
-    </style>
-    <h1 style="text-align: center; font-family: 'Ubuntu', sans-serif; font-size: 36px; color: #002d69;">
-        Open Voice Cloning Leaderboard
-    </h1>
-    <p style="text-align:center; font-size: 15px; width: 85%; margin: 0 auto;">
-        The <b>Open Voice Cloning Leaderboard</b> ranks and evaluates the voice cloning models across 
-        diverse datasets, including emotional speech.<br>It also delivers an in-depth analysis of how 
-        different acoustic features shape the final results.
-    </p>
-    """)
-
+    gr.HTML(open("pages/description.html", "r").read())
 
-    """
-    ============
-    Leaderboard
-    ============
-    """
+    # LEADERBOARD
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
         with gr.TabItem("🏅 Leaderboard", elem_id="Leaderboard", id=0, elem_classes="tab-item"):
 
-            '''
-            ========
-            Overall
-            ========
-            '''
+            # OVERALL
             with gr.TabItem("Overall", elem_id="Overall", id=1, elem_classes="tab-item"):
-                gr.Markdown(value="""
-                The results represent the cosine similarity between the speaker embeddings 
-                of the original and cloned samples, generated by the WavLM model.
-                """)
+                gr.Markdown(open("pages/overall.md", "r").read())
+
                 # Create and display leaderboard table
                 leaderboard_dataframe = leaderboard.create_leaderboard_data('All', 'wavlm', 'emotion')
                 leaderboard_table = gr.DataFrame(leaderboard_dataframe,
@@ -64,17 +48,9 @@ with app:
                                                  interactive=False,
                 )
 
-            '''
-            =========
-            Emotions
-            =========
-            '''
+            # EMOTIONS
             with gr.TabItem("Emotions", elem_id="Emotions", id=2, elem_classes="tab-item"):
-                gr.Markdown(value="""
-                The results represent the cosine similarity between the speaker embeddings 
-                of the original and cloned samples, generated by the WavLM model. The values 
-                can be filtered by dataset or emotional state.
-                """)
+                gr.Markdown(open("pages/emotions.md", "r").read())
 
                 # UI for selecting dataset and emotion options
                 with gr.Row():
@@ -109,17 +85,9 @@ with app:
                 )
 
 
-            '''
-            =========
-            Features
-            =========
-            '''
+            # FEATURES
             with gr.TabItem("Features", elem_id="Features", id=3, elem_classes="tab-item"):
-                gr.Markdown(value="""
-                The results represent the cosine similarity between the values of selected 
-                acoustic features of the original and cloned samples. The values 
-                can be filtered by dataset or emotional state.
-                """)
+                gr.Markdown(open("pages/features.md", "r").read())
 
                 # UI for selecting dataset, emotion, and feature options
                 with gr.Row():
@@ -166,48 +134,23 @@ with app:
                     [leaderboard_table]
                 )
 
-
-        '''
-        ======
-        About
-        ======
-        '''
+        # ABOUT
         with gr.TabItem("📝 About", elem_id="About", id=4):
-            gr.Markdown('TO DO', elem_classes="markdown-text")
-
+            gr.Markdown(open("pages/about.md", "r").read())
 
-        '''
-        =============
-        Submit here!
-        =============
-        '''
+        # SUBMIT HERE
         with gr.TabItem("🚀 Submit here! ", elem_id="Submit", id=5):
-            with gr.Row():
-                gr.Markdown(
-                    """
-                    <h1 style="text-align:center; font-size:2rem; margin-bottom:0.5rem;">
-                        ✉️✨ <b>Submit Your Model Here!</b> ✨✉️
-                    </h1>
-                    <p style="text-align:center; font-size:1rem; margin-top:0; color:gray;">
-                        Help us improve the leaderboard by submitting your voice cloning model.
-                    </p>
-                    """,
-                    elem_classes="markdown-text"
-                )
-            with gr.Row():
-                gr.Markdown(
-                    """
-                    <div style="background: linear-gradient(135deg, #007B83, #2E2E2E); padding:1.5rem; border-radius:10px; color:#EEEEEE; font-size:1rem; line-height:1.8;">
-                        <h2>📌 <b>How to Submit Your Model:</b></h2>
-                        <div style="margin-left:1rem;">
-                            <p style="margin-bottom:1rem;">✉️ <b>Step 1:</b> Send an email to <b><a href="mailto:cloneval@csi.wmi.amu.edu.pl" style="color:#FFD369; text-decoration:none;" onmouseover="this.style.color='#FFF'" onmouseout="this.style.color='#FFD369'">cloneval@csi.wmi.amu.edu.pl</a></b>.</p>
-                            <p style="margin-bottom:1rem;">🔗 <b>Step 2:</b> Include the link to your voice cloning model.</p>
-                            <p style="margin-bottom:1rem;">🏆 <b>Step 3:</b> Once evaluated, your model will join the leaderboard.</p>
-                        </div>
-                        <p style="margin-top:1rem; font-style:italic; text-align:center;">Thanks for sharing your work with us and making this project even better!</p>
-                    </div>
-                    """
-                )
+            gr.Markdown(open("pages/submit.md", "r").read())
+
+    with gr.Column():
+        with gr.Accordion("📙 Citation", open=False):
+            citation_button = gr.Textbox(
+                label="",
+                value=CITATION_TEXT,
+                lines=5,
+                elem_id="citation-button",
+                show_copy_button=True,
+            )
 
 
 scheduler = BackgroundScheduler()

pages/about.md

@@ -0,0 +1,17 @@
+# 📝 About
+
+The **Open Voice Cloning Leaderboard** is part of the **ClonEval** benchmark. In addition to the Leaderboard, the benchmark consists of:
+- a deterministic evaluation protocol that sets defaults for data, metrics, and models to be used in the voice cloning assessment process,
+- an open-source software library that can be used to evaluate voice cloning models in a reproducible manner.
+
+## Evaluation Procedure
+
+The evaluation procedure involves two stages. First, samples are generated using a voice cloning model. The model must take as input a sample of voice to be cloned and a text sample of an utterance.
+
+Following the generation of samples through the voice cloning model, an evaluation is conducted by obtaining speaker embeddings with the [**WavLM**](https://huggingface.co/microsoft/wavlm-base-plus-sv) model. For each pair of samples (reference and generated), the cosine similarity between their speaker embeddings from WavLM and between the values of acoustic features extracted from samples is calculated. The similarity values obtained on all samples from a given dataset are averaged to obtain the final evaluation result.
+
+For the purpose of conducting fine-grained error analysis, we also extract acoustic features from each sample with Librosa.
+
+## Software Library
+
+The code for the evaluation procedure is available in the GitHub repository ([here](https://github.com/amu-cai/cloneval)).

pages/description.html

@@ -0,0 +1,11 @@
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
+</style>
+<h1 style="text-align: center; font-family: 'Ubuntu', sans-serif; font-size: 36px; color: #002d69;">
+    Open Voice Cloning Leaderboard
+</h1>
+<p style="text-align:center; font-size: 15px; width: 85%; margin: 0 auto;">
+    The <b>Open Voice Cloning Leaderboard</b> ranks and evaluates the voice cloning models across 
+    diverse datasets, including emotional speech.<br>It also delivers an in-depth analysis of how 
+    different acoustic features shape the final results.
+</p>

pages/emotions.md

@@ -0,0 +1 @@
+The results represent the cosine similarity between the speaker embeddings of the original and cloned samples, generated by the WavLM model. The values can be filtered by dataset or emotional state.

pages/features.md

@@ -0,0 +1 @@
+The results represent the cosine similarity between the values of selected acoustic features of the original and cloned samples. The values can be filtered by dataset or emotional state.

pages/overall.md

@@ -0,0 +1 @@
+The results represent the cosine similarity between the speaker embeddings of the original and cloned samples, generated by the WavLM model.

pages/submit.md

@@ -0,0 +1,13 @@
+# ✉️✨ Submit Your Model Here! ✨✉️
+
+Help us improve the leaderboard by submitting your voice cloning model.
+
+## 📌 How to Submit Your Model:
+
+✉️ **Step 1:** Send an email to [**cloneval@csi.wmi.amu.edu.pl**](mailto:cloneval@csi.wmi.amu.edu.pl).
+
+🔗 **Step 2:** Include the link to your voice cloning model.
+
+🏆 **Step 3:** Once evaluated, your model will join the leaderboard.
+
+Thanks for sharing your work with us and making this project even better!