Refactor leaderboard HTML code (#1)

- Refactor new leaderboard html (d09e6c4a8164da67964a75214bfc411b6854eeb2)

app.py

@@ -5,6 +5,7 @@ from PIL import Image
 from io import BytesIO
 import os
 import tempfile
+from src.leaderboard.leaderboard_html import create_leaderboard_html
 
 BASE_URL = "https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main"
 
@@ -107,13 +108,7 @@ with gr.Blocks(title="World-in-World: Building a Closed-Loop World Interface to
 
 
         with gr.TabItem("📊 Leaderboard"):
-            leaderboard_table = gr.DataFrame(
-                value=create_leaderboard(),
-                headers=COLUMNS,
-                datatype=["str", "str", "str", "str", "str", "number", "number"],
-                interactive=False,
-                wrap=True
-            )
+            gr.HTML(create_leaderboard_html())
         
         with gr.TabItem("📝 About"):
             gr.Markdown("""

src/leaderboard/leaderboard_html.py

@@ -0,0 +1,191 @@
+# Refactored code for leaderboard tab based on `task_sucess_leaderboard.html`
+def create_leaderboard_html():
+    
+    html_content = """
+    <div style="
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+        background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
+        color: #ffffff;
+        margin: 0;
+        padding: 20px;
+        min-height: 100vh;
+        border-radius: 12px;
+    ">
+        <div style="
+            max-width: 1200px;
+            margin: 0 auto;
+            background: rgba(0, 0, 0, 0.4);
+            border-radius: 16px;
+            padding: 40px;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        ">
+            <div style="text-align: center; margin-bottom: 40px;">
+                <h1 style="
+                    font-size: 3rem;
+                    font-weight: 700;
+                    margin: 0 0 16px 0;
+                    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
+                    background-clip: text;
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+                ">Video World Models Leaderboard</h1>
+                <p style="
+                    font-size: 1.2rem;
+                    color: #b0b0b0;
+                    margin: 0;
+                    font-weight: 300;
+                ">Measuring performance on task success and generation quality</p>
+            </div>
+
+            <div class="legend-row"
+                style="
+                display: flex;
+                justify-content: center;
+                gap: 30px;
+                margin: 30px 0;
+                padding: 20px;
+                background: rgba(255, 255, 255, 0.02);
+                border-radius: 8px;
+                flex-wrap: wrap;
+                --body-text-color:#fff
+            ">
+                <div style="display: flex; align-items: center; gap: 8px; font-size: 0.9rem;">
+                    <div style="width: 16px; height: 16px; border-radius: 3px; background: #ec4899;"></div>
+                    <span>Zero-Shot Video Models</span>
+                </div>
+                <div style="display: flex; align-items: center; gap: 8px; font-size: 0.9rem;">
+                    <div style="width: 16px; height: 16px; border-radius: 3px; background: #06b6d4;"></div>
+                    <span>Post-Trained Video Models</span>
+                </div>
+            </div>
+
+            <h2 style="
+                font-size: 2rem;
+                font-weight: 600;
+                margin: 0 0 30px 0;
+                color: #ffffff;
+            ">Performance Rankings</h2>
+            
+            <div style="
+                background: rgba(255, 255, 255, 0.02);
+                border-radius: 12px;
+                padding: 20px;
+                border: 1px solid rgba(255, 255, 255, 0.05);
+            ">
+    """
+    
+    # Ranking data
+    models_data = [
+        {"rank": 1, "name": "Wan2.1†", "category": "Alibaba • Video Generation", "task_success": "62.6%", "gen_quality": "0.380", "type": "research", "success_width": 100, "quality_width": 79},
+        {"rank": 2, "name": "SVD†", "category": "Stability AI • Video Generation", "task_success": "61.0%", "gen_quality": "0.363", "type": "research", "success_width": 97, "quality_width": 76},
+        {"rank": 3, "name": "Cosmos†", "category": "Nvidia • Video Generation", "task_success": "60.3%", "gen_quality": "0.360", "type": "research", "success_width": 96, "quality_width": 75},
+        {"rank": 4, "name": "Wan2.1", "category": "Alibaba • Video Generation", "task_success": "58.3%", "gen_quality": "0.478", "type": "commercial", "success_width": 93, "quality_width": 100},
+        {"rank": 5, "name": "Hunyuan", "category": "Tencent • Video Generation", "task_success": "57.7%", "gen_quality": "0.396", "type": "commercial", "success_width": 92, "quality_width": 83},
+        {"rank": 5, "name": "SVD", "category": "Stability AI • Video Generation", "task_success": "57.7%", "gen_quality": "0.371", "type": "commercial", "success_width": 92, "quality_width": 78},
+        {"rank": 7, "name": "SE3DS", "category": "Open Source • 3D Scene", "task_success": "57.5%", "gen_quality": "0.365", "type": "open-source", "success_width": 92, "quality_width": 76},
+        {"rank": 7, "name": "LTX†", "category": "Lightricks • Video Generation", "task_success": "57.5%", "gen_quality": "0.340", "type": "research", "success_width": 92, "quality_width": 71},
+        {"rank": 9, "name": "NWM", "category": "Meta • World Models", "task_success": "57.4%", "gen_quality": "0.325", "type": "open-source", "success_width": 92, "quality_width": 68},
+        {"rank": 10, "name": "Pathdreamer", "category": "Open Source • Pano Path Generation", "task_success": "57.0%", "gen_quality": "0.339", "type": "open-source", "success_width": 91, "quality_width": 71},
+        {"rank": 11, "name": "Wan2.2†", "category": "Alibaba • Video Generation", "task_success": "56.3%", "gen_quality": "0.380", "type": "research", "success_width": 90, "quality_width": 79},
+        {"rank": 12, "name": "Cosmos", "category": "Nvidia • Video Generation", "task_success": "55.4%", "gen_quality": "0.480", "type": "commercial", "success_width": 89, "quality_width": 100},
+    ]
+    
+    # Mapping of model type -> highlight color
+    type_colors = {
+        "commercial": "#ec4899",
+        "research": "#06b6d4", 
+        "open-source": "#10b981"
+    }
+    
+    # Loop through models and render each row
+    for model in models_data:
+        border_color = type_colors.get(model["type"], "#ffffff")
+        
+        html_content += f"""
+        <div style="
+            display: flex;
+            align-items: center;
+            margin-bottom: 12px;
+            padding: 16px;
+            background: rgba(255, 255, 255, 0.03);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+            border-left: 4px solid {border_color};
+        " onmouseover="this.style.background='rgba(255, 255, 255, 0.08)'; this.style.transform='translateX(4px)';" 
+           onmouseout="this.style.background='rgba(255, 255, 255, 0.03)'; this.style.transform='translateX(0)';">
+            
+            <div style="
+                background: rgba(255, 255, 255, 0.1);
+                width: 36px;
+                height: 36px;
+                border-radius: 8px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: 700;
+                margin-right: 20px;
+                font-size: 16px;
+                min-width: 36px;
+                color: #ffffff !important;
+            ">{model["rank"]}</div>
+            
+            <div style="flex: 1; margin-right: 20px; min-width: 200px;">
+                <div style="font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; color: #ffffff !important;">{model["name"]}</div>
+                <div style="font-size: 0.85rem; color: #cccccc !important; opacity: 1;">{model["category"]}</div>
+            </div>
+            
+            <div style="display: flex; flex-direction: column; gap: 8px; width: 200px; margin: 0 20px;">
+                <div style="height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden;">
+                    <div style="height: 100%; background: linear-gradient(90deg, #10b981, #f59e0b); border-radius: 3px; width: {model["success_width"]}%; transition: all 1.2s ease-in-out;"></div>
+                </div>
+                <div style="height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden;">
+                    <div style="height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 3px; width: {model["quality_width"]}%; transition: all 1.2s ease-in-out;"></div>
+                </div>
+            </div>
+            
+            <div style="display: flex; align-items: center; gap: 20px; margin-left: auto;">
+                <div style="text-align: center; min-width: 120px;">
+                    <div style="font-size: 0.75rem; color: #aaaaaa !important; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Task Success</div>
+                    <div style="font-size: 1.2rem; font-weight: 700; color: #f59e0b !important;">{model["task_success"]}</div>
+                </div>
+                <div style="text-align: center; min-width: 120px;">
+                    <div style="font-size: 0.75rem; color: #aaaaaa !important; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Gen Quality</div>
+                    <div style="font-size: 1.2rem; font-weight: 700; color: #6366f1 !important;">{model["gen_quality"]}</div>
+                </div>
+            </div>
+        </div>
+        """
+    
+    html_content += """
+            </div>
+
+            <div style="text-align: center; margin-top: 40px; color: #cccccc !important; font-size: 0.9rem;">
+                <p style="color: #cccccc !important;">Task Success Rate measures completion of video generation objectives • Generation Quality measures visual fidelity and coherence</p>
+            </div>
+        </div>
+    </div>
+
+    <style>
+        @media (max-width: 968px) {
+            .model-item {
+                flex-direction: column !important;
+                align-items: flex-start !important;
+                gap: 12px !important;
+            }
+            
+            .metrics-section {
+                width: 100% !important;
+                justify-content: space-between !important;
+            }
+            
+            .progress-bars {
+                width: 100% !important;
+                margin: 12px 0 !important;
+            }
+        }
+    </style>
+    """
+    
+    return html_content