added buttons

tabs/leaderboard_v2.py

@@ -1008,11 +1008,186 @@ def create_leaderboard_v2_tab():
     
     gr.HTML(custom_css)
     
+    # Header button above title
     gr.HTML("""
-    <div style="text-align: center; padding: 40px 0 20px 0;">
+    <style>
+    /* Enhanced button styling with better gradio compatibility */
+    .custom-button-container {
+        text-align: center;
+        padding: 20px 0 10px 0;
+        margin-bottom: 10px;
+    }
+    
+    .header-action-button {
+        display: inline-block !important;
+        padding: 14px 28px !important;
+        background: linear-gradient(135deg, #E35454 0%, #C84545 100%) !important;
+        color: #FFFFFF !important;
+        text-decoration: none !important;
+        border-radius: 16px !important;
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
+        font-weight: 700 !important;
+        font-size: 1.1rem !important;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        border: none !important;
+        cursor: pointer !important;
+        box-shadow: 0 8px 24px rgba(227, 84, 84, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+        position: relative !important;
+        overflow: hidden !important;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
+    }
+    
+    .header-action-button::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+        transition: left 0.6s;
+    }
+    
+    .header-action-button:hover::before {
+        left: 100%;
+    }
+    
+    .header-action-button:hover {
+        transform: translateY(-3px) !important;
+        box-shadow: 0 12px 32px rgba(227, 84, 84, 0.5), 0 8px 16px rgba(0, 0, 0, 0.4) !important;
+        background: linear-gradient(135deg, #F46464 0%, #D84F4F 100%) !important;
+        color: #FFFFFF !important;
+        text-decoration: none !important;
+    }
+    
+    .header-action-button:active {
+        transform: translateY(-1px) !important;
+    }
+    
+    .action-button-icon {
+        font-size: 1.2rem !important;
+        margin-right: 8px !important;
+        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
+    }
+    
+    /* Navigation buttons styling */
+    .nav-buttons-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 16px;
+        flex-wrap: wrap;
+        margin: 24px 0;
+        padding: 0 20px;
+    }
+    
+    .nav-link-button {
+        display: inline-flex !important;
+        align-items: center !important;
+        gap: 8px !important;
+        padding: 12px 20px !important;
+        background: rgba(1, 9, 26, 0.8) !important;
+        color: #F5F6F7 !important;
+        text-decoration: none !important;
+        border-radius: 12px !important;
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
+        font-weight: 600 !important;
+        font-size: 0.95rem !important;
+        transition: all 0.3s ease !important;
+        border: 2px solid rgba(245, 246, 247, 0.15) !important;
+        backdrop-filter: blur(10px) !important;
+        -webkit-backdrop-filter: blur(10px) !important;
+        position: relative !important;
+        overflow: hidden !important;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
+    }
+    
+    .nav-link-button::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(135deg, rgba(227, 84, 84, 0.1) 0%, rgba(16, 152, 247, 0.1) 100%);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+    
+    .nav-link-button:hover::before {
+        opacity: 1;
+    }
+    
+    .nav-link-button:hover {
+        transform: translateY(-3px) scale(1.02) !important;
+        border-color: #E35454 !important;
+        box-shadow: 0 8px 24px rgba(227, 84, 84, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+        text-decoration: none !important;
+        color: #FFFFFF !important;
+    }
+    
+    .nav-link-button.primary-nav {
+        background: linear-gradient(135deg, #1098F7 0%, #0A6BC4 100%) !important;
+        border-color: #1098F7 !important;
+        color: #FFFFFF !important;
+        font-weight: 700 !important;
+    }
+    
+    .nav-link-button.primary-nav:hover {
+        background: linear-gradient(135deg, #2AA8FF 0%, #0550A0 100%) !important;
+        border-color: #2AA8FF !important;
+        box-shadow: 0 8px 24px rgba(16, 152, 247, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+        color: #FFFFFF !important;
+    }
+    
+    .nav-button-icon {
+        font-size: 1.1rem !important;
+        filter: drop-shadow(0 0 6px currentColor);
+    }
+    
+    /* Responsive design */
+    @media (max-width: 768px) {
+        .nav-buttons-container {
+            gap: 12px;
+            padding: 0 10px;
+        }
+        
+        .nav-link-button {
+            font-size: 0.85rem !important;
+            padding: 10px 16px !important;
+        }
+        
+        .header-action-button {
+            font-size: 1rem !important;
+            padding: 12px 24px !important;
+        }
+    }
+    
+    @media (max-width: 480px) {
+        .nav-buttons-container {
+            flex-direction: column;
+            gap: 8px;
+        }
+        
+        .nav-link-button {
+            width: 200px;
+            justify-content: center;
+        }
+    }
+    </style>
+    
+    <div class="custom-button-container">
+        <a href="https://app.galileo.ai/sign-up" target="_blank" class="header-action-button">
+            <span class="action-button-icon">🚀</span>Evaluate your GenAI for free
+        </a>
+    </div>
+    """)
+    
+    gr.HTML("""
+    <div style="text-align: center; padding: 20px 0;">
         <h1 style="font-size: 3rem; margin-bottom: 12px; color: var(--text-primary);
                    text-shadow: 0 0 20px rgba(227, 84, 84, 0.3); font-family: 'Geist', sans-serif; font-weight: 800;">
-            🚀 Galileo Agent Leaderboard V2
+            🚀 Galileo Agent Leaderboard v2
         </h1>
         <p style="color: var(--text-secondary); font-size: 1.2rem; margin-top: 0; font-family: 'Geist', sans-serif;">
             Comprehensive performance metrics for LLM agents across business domains
@@ -1020,6 +1195,28 @@ def create_leaderboard_v2_tab():
     </div>
     """)
     
+    # Links section below title
+    gr.HTML("""
+    <div class="nav-buttons-container">
+        <a href="http://galileo.ai/blog/agent-leaderboard-v2" target="_blank" class="nav-link-button">
+            <span class="nav-button-icon">📝</span>
+            Blog
+        </a>
+        <a href="https://github.com/rungalileo/agent-leaderboard" target="_blank" class="nav-link-button">
+            <span class="nav-button-icon">🐙</span>
+            GitHub
+        </a>
+        <a href="https://huggingface.co/datasets/galileo-ai/agent-leaderboard-v2" target="_blank" class="nav-link-button">
+            <span class="nav-button-icon">🤗</span>
+            Dataset
+        </a>
+        <a href="https://huggingface.co/spaces/galileo-ai/agent-leaderboard/discussions/new" target="_blank" class="nav-link-button">
+            <span class="nav-button-icon">➕</span>
+            Add Model
+        </a>
+    </div>
+    """)
+    
     # Metrics overview cards with insights
     gr.HTML("""
     <div style="margin-bottom: 40px;">
@@ -1789,7 +1986,7 @@ def create_leaderboard_v2_tab():
                 <div style="space-y: 12px;">
                     <div style="margin-bottom: 12px;">
                         <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px; font-family: 'Geist Mono', monospace; font-size: 0.9rem;">
-                            📊 Avg Action Completion
+                            📊 Action Completion
                         </div>
                         <div style="color: var(--text-secondary); font-size: 0.9rem; line-height: 1.4; margin-bottom: 6px;">
                             Measures how well the agent accomplishes user goals and completes tasks successfully.
@@ -1803,7 +2000,7 @@ def create_leaderboard_v2_tab():
                     
                     <div style="border-top: 1px solid var(--border-subtle); padding-top: 12px;">
                         <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px; font-family: 'Geist Mono', monospace; font-size: 0.9rem;">
-                            🛠️ Avg Tool Selection Quality
+                            🛠️ Tool Selection Quality
                         </div>
                         <div style="color: var(--text-secondary); font-size: 0.9rem; line-height: 1.4; margin-bottom: 6px;">
                             Evaluates the accuracy of selecting the right tools and using them with correct parameters.