[release] speechIQ layout imprv

app.py

@@ -26,11 +26,27 @@ def load_speechiq_data():
         # Sort by Speech IQ score in descending order
         df = df.sort_values('Speech IQ', ascending=False)
         
+        # Add ranking with medal emojis
+        df['Rank'] = ''
+        for i in range(len(df)):
+            if i == 0:
+                df.iloc[i, df.columns.get_loc('Rank')] = '🥇'
+            elif i == 1:
+                df.iloc[i, df.columns.get_loc('Rank')] = '🥈'
+            elif i == 2:
+                df.iloc[i, df.columns.get_loc('Rank')] = '🥉'
+            else:
+                df.iloc[i, df.columns.get_loc('Rank')] = f'{i+1}'
+        
+        # Reorder columns to put Speech IQ first, then Rank
+        column_order = ['Rank', 'Speech IQ', 'Remember', 'Understand', 'Apply', 'Model Type', 'Setup', 'Audio Encoder']
+        df = df[column_order]
+        
         return df
     except Exception as e:
         print(f"Error loading SpeechIQ data: {e}")
         # Return empty dataframe with expected columns if file not found
-        return pd.DataFrame(columns=['Model Type', 'Setup', 'Audio Encoder', 'Remember', 'Understand', 'Apply', 'Speech IQ'])
+        return pd.DataFrame(columns=['Rank', 'Speech IQ', 'Remember', 'Understand', 'Apply', 'Model Type', 'Setup', 'Audio Encoder'])
 
 def get_top_performers(df):
     """Get statistics about top performers."""
@@ -44,15 +60,15 @@ def get_top_performers(df):
     end2end_best = df[df['Model Type'].str.contains('End2End', na=False)]['Speech IQ'].max() if not df[df['Model Type'].str.contains('End2End', na=False)].empty else 0
     
     stats_text = f"""
-    ### 📊 Leaderboard Statistics
-    
-    **🏆 Top Performer:** {top_model['Setup']} (Score: {top_score})
+    ## 📊 Leaderboard Statistics
     
-    **🤖 Best Agentic Model:** {agentic_best}
-    
-    **🔄 Best End2End Model:** {end2end_best}
-    
-    **📈 Total Models Evaluated:** {len(df)}
+    | Metric | Value |
+    |--------|-------|
+    | 🏆 **Top Performer** | {top_model['Setup']} |
+    | 🎯 **Highest Score** | **{top_score}** |
+    | 🤖 **Best Agentic Model** | {agentic_best} |
+    | 🔄 **Best End2End Model** | {end2end_best} |
+    | 📈 **Total Models** | {len(df)} |
     """
     
     return stats_text
@@ -70,16 +86,17 @@ with demo:
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
         with gr.TabItem("🏅 SpeechIQ Leaderboard", elem_id="speechiq-leaderboard-tab", id=0):
             
-            # Statistics section
+            # Statistics section - moved before table
             with gr.Row():
-                gr.Markdown(get_top_performers(speechiq_df), elem_classes="markdown-text")
+                gr.Markdown(get_top_performers(speechiq_df), elem_classes="markdown-text stats-section")
             
             # Main leaderboard table
             with gr.Row():
                 leaderboard_table = gr.Dataframe(
                     value=speechiq_df,
-                    headers=speechiq_df.columns.tolist() if not speechiq_df.empty else ['Model Type', 'Setup', 'Audio Encoder', 'Remember', 'Understand', 'Apply', 'Speech IQ'],
-                    interactive=False
+                    headers=speechiq_df.columns.tolist() if not speechiq_df.empty else ['Rank', 'Speech IQ', 'Remember', 'Understand', 'Apply', 'Model Type', 'Setup', 'Audio Encoder'],
+                    interactive=False,
+                    elem_classes="leaderboard-table"
                 )
             
             # Legend and explanation
@@ -87,13 +104,14 @@ with demo:
                 gr.Markdown("""
                 ### 📋 Column Explanations
                 
-                - **Model Type**: Architecture approach (Agentic vs End2End)
-                - **Setup**: Specific model configuration and components
-                - **Audio Encoder**: The audio processing component used
+                - **Rank**: Position ranking with 🥇🥈🥉 medals for top 3 performers
+                - **Speech IQ**: Overall intelligence quotient combining all dimensions (primary metric)
                 - **Remember**: Verbatim accuracy score (WER-based)
                 - **Understand**: Semantic interpretation similarity score
                 - **Apply**: Downstream task performance score
-                - **Speech IQ**: Overall intelligence quotient combining all dimensions
+                - **Model Type**: Architecture approach (Agentic vs End2End)
+                - **Setup**: Specific model configuration and components
+                - **Audio Encoder**: The audio processing component used
                 
                 *Higher scores indicate better performance across all metrics.*
                 """, elem_classes="markdown-text")

src/display/css_html_js.py

@@ -4,6 +4,52 @@ custom_css = """
     font-size: 16px !important;
 }
 
+.stats-section {
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 10px;
+    margin-bottom: 20px;
+    border-left: 4px solid #007bff;
+}
+
+/* Style for leaderboard table */
+.leaderboard-table table {
+    font-size: 14px !important;
+    border-collapse: collapse !important;
+}
+
+.leaderboard-table td,
+.leaderboard-table th {
+    padding: 8px !important;
+    border: 1px solid #dee2e6 !important;
+}
+
+/* Make Model Type, Setup, and Audio Encoder columns smaller */
+.leaderboard-table td:nth-child(6),  /* Model Type */
+.leaderboard-table td:nth-child(7),  /* Setup */
+.leaderboard-table td:nth-child(8),  /* Audio Encoder */
+.leaderboard-table th:nth-child(6),
+.leaderboard-table th:nth-child(7),
+.leaderboard-table th:nth-child(8) {
+    font-size: 11px !important;
+    line-height: 1.2 !important;
+}
+
+/* Highlight Speech IQ column */
+.leaderboard-table td:nth-child(2),  /* Speech IQ */
+.leaderboard-table th:nth-child(2) {
+    font-weight: bold !important;
+    background-color: #fff3cd !important;
+}
+
+/* Style rank column */
+.leaderboard-table td:nth-child(1),  /* Rank */
+.leaderboard-table th:nth-child(1) {
+    text-align: center !important;
+    font-size: 18px !important;
+    font-weight: bold !important;
+}
+
 #models-to-add-text {
     font-size: 18px !important;
 }