Upload templates/leaderboard.html with huggingface_hub

templates/leaderboard.html

@@ -6,6 +6,11 @@
 
 {% block extra_head %}
 <style>
+    .leaderboard-page {
+        direction: ltr;
+        text-align: left;
+    }
+
     .leaderboard-container {
         background: white;
         border-radius: var(--radius);
@@ -17,21 +22,22 @@
 
     .leaderboard-header {
         display: grid;
-        grid-template-columns: 80px 1fr 120px 120px 120px;
+        grid-template-columns: 60px 1fr 120px 100px 100px 100px;
         padding: 16px;
         background-color: var(--light-gray);
         border-bottom: 1px solid var(--border-color);
         font-weight: 600;
-        min-width: 600px; /* Ensure minimum width for the grid */
+        min-width: 700px;
     }
 
     .leaderboard-row {
         display: grid;
-        grid-template-columns: 80px 1fr 120px 120px 120px;
+        grid-template-columns: 60px 1fr 120px 100px 100px 100px;
         padding: 16px;
         border-bottom: 1px solid var(--border-color);
         align-items: center;
-        min-width: 600px; /* Ensure minimum width for the grid */
+        min-width: 700px;
+        position: relative;
     }
 
     .leaderboard-row:last-child {
@@ -55,6 +61,33 @@
         color: var(--text-color);
     }
 
+    .voice-name {
+        color: #888;
+        font-weight: 400;
+        font-size: 13px;
+    }
+
+    .model-tooltip {
+        display: none;
+        position: absolute;
+        z-index: 100;
+        top: 100%;
+        left: 60px;
+        background-color: rgba(0, 0, 0, 0.85);
+        color: white;
+        padding: 8px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 400;
+        white-space: nowrap;
+        pointer-events: none;
+        font-family: monospace;
+    }
+
+    .leaderboard-row:hover .model-tooltip {
+        display: block;
+    }
+
     .model-name-link:hover {
         text-decoration: underline;
     }
@@ -763,6 +796,7 @@
 {% endblock %}
 
 {% block content %}
+<div class="leaderboard-page">
 <div class="tabs">
     <div class="tab active" data-tab="tts">TTS</div>
     <div class="tab" data-tab="conversational">Conversational</div>
@@ -840,11 +874,12 @@
             <div class="leaderboard-header">
                 <div>Rank</div>
                 <div>Model</div>
+                <div>Voice</div>
                 <div style="text-align: right">Win Rate</div>
                 <div style="text-align: right" class="total-votes-header">Total Votes</div>
                 <div style="text-align: right">ELO</div>
             </div>
-            
+
             {% for model in tts_leaderboard %}
             <div class="leaderboard-row {{ model.tier }}">
                 <div class="rank">#{{ model.rank }}</div>
@@ -856,21 +891,12 @@
                         <span class="tooltip">Proprietary model</span>
                         {% endif %}
                     </div>
-                    {% if model.id == "lanternfish-1" %}
-                    <div class="disputed-badge">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
-                            <line x1="12" y1="9" x2="12" y2="13"/>
-                            <line x1="12" y1="17" x2="12" y2="17"/>
-                        </svg>
-                        <span>Disputed</span>
-                        <span class="tooltip">Potential vote manipulation</span>
-                    </div>
-                    {% endif %}
                 </div>
+                <div class="voice-name">{{ model.voice }}</div>
                 <div class="win-rate">{{ model.win_rate }}</div>
                 <div class="total-votes">{{ model.total_votes }}</div>
                 <div class="elo-score">{{ model.elo }}</div>
+                <div class="model-tooltip">{{ model.api_model_id }}{% if model.voice %} / voice: {{ model.voice }}{% endif %}</div>
             </div>
             {% endfor %}
         </div>
@@ -1513,4 +1539,5 @@
         });
     });
 </script>
-{% endblock %} 
+</div><!-- .leaderboard-page -->
+{% endblock %}