improved layout

components/prediction_components.py

@@ -299,14 +299,14 @@ def create_ac_prediction_chart(df, domain_filter="All", model_type_filter="All")
             '<b style="color: #28a745;">Cost Efficiency:</b><br>'
             '• <b>Avg Session Cost:</b> $%{customdata[4]:.4f}<br>'
             '<br>'
-            '<i style="color: #B1B5B9; font-size: 11px;">Performance at release time</i>'
+            '<i style="color: #B1B5B9; font-size: 13px;">Performance at release time</i>'
             '<extra></extra>'
         ),
         text=df_clean['Model'].values,
         hoverlabel=dict(
             bgcolor='rgba(26, 26, 46, 0.95)',
             bordercolor='rgba(227, 84, 84, 0.5)',
-            font=dict(size=12, color='#F5F6F7', family='Geist, sans-serif'),
+            font=dict(size=14, color='#F5F6F7', family='Geist, sans-serif'),
             align='left',
             namelength=-1
         )
@@ -349,7 +349,7 @@ def create_ac_prediction_chart(df, domain_filter="All", model_type_filter="All")
             best_model_at_date
         )),
         hovertemplate=(
-            '<b style="font-size: 16px; color: #E35454;">📈 Best Performance Frontier</b><br>'
+            '<b style="font-size: 20px; color: #E35454;">📈 Best Performance Frontier</b><br>'
             '<br>'
             '<b>Date:</b> %{x|%B %Y}<br>'
             '<b>Leading Model:</b> %{customdata[3]}<br>'
@@ -360,13 +360,13 @@ def create_ac_prediction_chart(df, domain_filter="All", model_type_filter="All")
             '• Growth Rate: <span style="color: #28a745;">+%{customdata[1]:.1f}%</span><br>'
             '• Gap to 99%: <span style="color: #1098F7;">%{customdata[2]:.1%}</span><br>'
             '<br>'
-            '<i style="color: #B1B5B9;">This represents the best performance achieved by any model up to this date</i>'
+            '<i style="color: #B1B5B9; font-size: 13px;">This represents the best performance achieved by any model up to this date</i>'
             '<extra></extra>'
         ),
         hoverlabel=dict(
             bgcolor='rgba(26, 26, 46, 0.95)',
             bordercolor='rgba(227, 84, 84, 0.5)',
-            font=dict(size=12, color='#F5F6F7', family='Geist, sans-serif'),
+            font=dict(size=14, color='#F5F6F7', family='Geist, sans-serif'),
             align='left',
             namelength=-1
         )
@@ -406,13 +406,13 @@ def create_ac_prediction_chart(df, domain_filter="All", model_type_filter="All")
             f'• <b>Algorithm:</b> {best_model.capitalize()}<br>'
             '• <b>R² Score:</b> %{customdata[3]:.3f}<br>'
             '<br>'
-            '<i style="color: #B1B5B9; font-size: 11px;">Based on historical performance trends</i>'
+            '<i style="color: #B1B5B9; font-size: 13px;">Based on historical performance trends</i>'
             '<extra></extra>'
         ),
         hoverlabel=dict(
             bgcolor='rgba(26, 26, 46, 0.95)',
             bordercolor='rgba(16, 152, 247, 0.5)',
-            font=dict(size=12, color='#F5F6F7', family='Geist, sans-serif'),
+            font=dict(size=14, color='#F5F6F7', family='Geist, sans-serif'),
             align='left',
             namelength=-1
         )
@@ -471,7 +471,7 @@ def create_ac_prediction_chart(df, domain_filter="All", model_type_filter="All")
             hoverlabel=dict(
                 bgcolor='rgba(26, 26, 46, 0.95)',
                 bordercolor='rgba(40, 167, 69, 0.5)',
-                font=dict(size=12, color='#F5F6F7', family='Geist, sans-serif'),
+                font=dict(size=14, color='#F5F6F7', family='Geist, sans-serif'),
                 align='left',
                 namelength=-1
             )
@@ -589,4 +589,7 @@ def create_ac_prediction_chart(df, domain_filter="All", model_type_filter="All")
     )
 
 
-    return fig, date_99, months_from_now
+    # Get the current best AC value (last value in y_data)
+    current_best_ac = y_data[-1] if len(y_data) > 0 else None
+
+    return fig, date_99, months_from_now, current_best_ac

tabs/leaderboard_v2.py

@@ -1655,24 +1655,14 @@ def create_leaderboard_v2_tab():
         </p>
     """)
 
-    # Add prediction chart - make it reactive
-    gr.HTML('<div class="chart-container">')
-
     # Create initial prediction with default filters
-    initial_prediction_chart, initial_date_99, initial_months_to_99 = create_ac_prediction_chart(
+    initial_prediction_chart, initial_date_99, initial_months_to_99, initial_best_ac = create_ac_prediction_chart(
         load_leaderboard_data(), domain_filter="All", model_type_filter="All"
     )
 
-    prediction_plot = gr.Plot(
-        label="",
-        value=initial_prediction_chart,
-        elem_classes=["prediction-chart", "plot-container"]
-    )
-    gr.HTML('</div>')
-
-    # Add dynamic insights section
-    def generate_insight_html(date_99, months_to_99, domain_filter="All", model_type_filter="All"):
-        """Generate insight HTML based on prediction results and filters"""
+    # Add dynamic insights section with visual cards
+    def generate_insight_html(date_99, months_to_99, domain_filter="All", model_type_filter="All", current_best_ac=None):
+        """Generate insight HTML with visual cards/badges based on prediction results and filters"""
         # Clean up filter names
         if domain_filter.startswith('🌐'):
             domain_clean = "All Domains"
@@ -1690,60 +1680,310 @@ def create_leaderboard_v2_tab():
             domain_clean = domain_filter
 
         filter_context = ""
+        filter_badge = ""
         if domain_clean != "All Domains" or model_type_filter != "All":
-            filter_context = " for "
+            parts = []
             if domain_clean != "All Domains":
-                filter_context += f"<strong>{domain_clean}</strong>"
+                parts.append(domain_clean)
             if model_type_filter != "All":
-                if domain_clean != "All Domains":
-                    filter_context += f" ({model_type_filter} models)"
-                else:
-                    filter_context += f"<strong>{model_type_filter} models</strong>"
+                parts.append(f"{model_type_filter} Models")
+            filter_badge = f"""
+            <span style="
+                display: inline-flex;
+                align-items: center;
+                gap: 4px;
+                padding: 4px 10px;
+                background: rgba(16, 152, 247, 0.15);
+                border: 1px solid rgba(16, 152, 247, 0.3);
+                border-radius: 20px;
+                font-size: 0.85rem;
+                font-weight: 600;
+                color: var(--accent-primary);
+                margin-left: 12px;
+            ">
+                <span style="font-size: 0.9rem;">🔍</span>
+                {' • '.join(parts)}
+            </span>
+            """
 
         if date_99 and months_to_99:
             if months_to_99 > 0:
+                # Calculate percentage progress (assuming 100% at 99% AC)
+                # If current_best_ac is provided, use it; otherwise default to 85%
+                if current_best_ac is not None:
+                    # Scale from 0-99% AC to 0-100% progress
+                    current_progress = min(100, int((current_best_ac / 0.99) * 100))
+                else:
+                    current_progress = 85  # Fallback if not provided
+
                 return f"""
-                <div style="margin-top: 20px; padding: 16px; background: linear-gradient(145deg, rgba(16, 152, 247, 0.1) 0%, rgba(227, 84, 84, 0.05) 100%); border: 1px solid var(--border-subtle); border-radius: 12px;">
-                    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
-                        <span style="font-size: 1.5rem;">🎯</span>
-                        <span style="font-weight: 700; color: var(--text-primary); font-size: 1.1rem;">Key Prediction Insights{filter_context}</span>
+                <div style="margin-bottom: 24px;">
+                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
+                        <h3 style="margin: 0; color: var(--text-primary); font-size: 1.3rem; font-weight: 700;">
+                            Key Predictions
+                        </h3>
+                        {filter_badge}
+                    </div>
+
+                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
+                        <!-- Enterprise Ready Date Card -->
+                        <div style="
+                            padding: 20px;
+                            background: linear-gradient(135deg, rgba(16, 152, 247, 0.1) 0%, rgba(16, 152, 247, 0.05) 100%);
+                            border: 1px solid rgba(16, 152, 247, 0.2);
+                            border-radius: 16px;
+                            position: relative;
+                            overflow: hidden;
+                        ">
+                            <div style="
+                                position: absolute;
+                                top: -20px;
+                                right: -20px;
+                                width: 60px;
+                                height: 60px;
+                                background: radial-gradient(circle, rgba(16, 152, 247, 0.2) 0%, transparent 70%);
+                                border-radius: 50%;
+                            "></div>
+                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                                <span style="font-size: 1.8rem;">📅</span>
+                                <span style="color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Target Date</span>
+                            </div>
+                            <div style="font-size: 1.8rem; font-weight: 800; color: var(--text-primary); margin-bottom: 4px;">
+                                {date_99.strftime('%b %Y')}
+                            </div>
+                            <div style="color: var(--text-secondary); font-size: 0.95rem;">
+                                99% AC Threshold
+                            </div>
+                        </div>
+
+                        <!-- Time Remaining Card -->
+                        <div style="
+                            padding: 20px;
+                            background: linear-gradient(135deg, rgba(227, 84, 84, 0.1) 0%, rgba(227, 84, 84, 0.05) 100%);
+                            border: 1px solid rgba(227, 84, 84, 0.2);
+                            border-radius: 16px;
+                            position: relative;
+                            overflow: hidden;
+                        ">
+                            <div style="
+                                position: absolute;
+                                top: -20px;
+                                right: -20px;
+                                width: 60px;
+                                height: 60px;
+                                background: radial-gradient(circle, rgba(227, 84, 84, 0.2) 0%, transparent 70%);
+                                border-radius: 50%;
+                            "></div>
+                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                                <span style="font-size: 1.8rem;">⏱️</span>
+                                <span style="color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Timeline</span>
+                            </div>
+                            <div style="font-size: 1.8rem; font-weight: 800; color: var(--text-primary); margin-bottom: 4px;">
+                                ~{months_to_99:.0f}
+                            </div>
+                            <div style="color: var(--text-secondary); font-size: 0.95rem;">
+                                Months to 99% AC
+                            </div>
+                        </div>
+
+                        <!-- Current Performance Card -->
+                        <div style="
+                            padding: 20px;
+                            background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(40, 167, 69, 0.05) 100%);
+                            border: 1px solid rgba(40, 167, 69, 0.2);
+                            border-radius: 16px;
+                            position: relative;
+                            overflow: hidden;
+                        ">
+                            <div style="
+                                position: absolute;
+                                top: -20px;
+                                right: -20px;
+                                width: 60px;
+                                height: 60px;
+                                background: radial-gradient(circle, rgba(40, 167, 69, 0.2) 0%, transparent 70%);
+                                border-radius: 50%;
+                            "></div>
+                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                                <span style="font-size: 1.8rem;">📈</span>
+                                <span style="color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Current Best</span>
+                            </div>
+                            <div style="font-size: 1.8rem; font-weight: 800; color: var(--text-primary); margin-bottom: 4px;">
+                                {current_best_ac*100:.0f}%
+                            </div>
+                            <div style="color: var(--text-secondary); font-size: 0.95rem;">
+                                AC Score Achieved
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Progress Bar -->
+                    <div style="margin-top: 20px; padding: 16px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-subtle); border-radius: 12px;">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+                            <span style="color: var(--text-secondary); font-size: 0.9rem; font-weight: 600;">PROGRESS TO ENTERPRISE READY</span>
+                            <span style="color: var(--accent-primary); font-size: 0.9rem; font-weight: 700;">{current_progress}%</span>
+                        </div>
+                        <div style="width: 100%; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden;">
+                            <div style="width: {current_progress}%; height: 100%; background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 100%); border-radius: 4px; transition: width 0.3s ease;"></div>
+                        </div>
                     </div>
-                    <ul style="color: var(--text-secondary); margin: 0; padding-left: 20px; line-height: 1.8;">
-                        <li><strong style="color: var(--accent-primary);">Enterprise threshold (99% AC)</strong> predicted by <strong style="color: var(--accent-secondary);">{date_99.strftime('%B %Y')}</strong></li>
-                        <li>Approximately <strong style="color: var(--accent-primary);">{months_to_99:.0f} months</strong> from current date</li>
-                        <li>Performance trends based on <strong>historical data{filter_context}</strong></li>
-                        <li>Early adopters who invest now gain <strong>{months_to_99:.0f} months</strong> of competitive advantage</li>
-                    </ul>
                 </div>
                 """
             else:
                 return f"""
-                <div style="margin-top: 20px; padding: 16px; background: linear-gradient(145deg, rgba(40, 167, 69, 0.1) 0%, rgba(227, 84, 84, 0.05) 100%); border: 1px solid var(--border-subtle); border-radius: 12px;">
-                    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
-                        <span style="font-size: 1.5rem;">✅</span>
-                        <span style="font-weight: 700; color: var(--text-primary); font-size: 1.1rem;">Enterprise Ready{filter_context}!</span>
+                <div style="margin-bottom: 24px;">
+                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
+                        <h3 style="margin: 0; color: var(--text-primary); font-size: 1.3rem; font-weight: 700;">
+                            Achievement Status
+                        </h3>
+                        {filter_badge}
+                    </div>
+
+                    <div style="
+                        padding: 24px;
+                        background: linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(40, 167, 69, 0.05) 100%);
+                        border: 2px solid rgba(40, 167, 69, 0.3);
+                        border-radius: 16px;
+                        text-align: center;
+                    ">
+                        <span style="font-size: 3rem; margin-bottom: 12px; display: block;">🎉</span>
+                        <h2 style="margin: 0 0 12px 0; color: var(--text-primary); font-size: 1.8rem; font-weight: 800;">
+                            Enterprise Ready!
+                        </h2>
+                        <p style="color: var(--text-secondary); font-size: 1.1rem; margin: 0 0 20px 0;">
+                            Models have achieved enterprise-grade reliability
+                        </p>
+
+                        <div style="display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;">
+                            <span style="
+                                display: inline-flex;
+                                align-items: center;
+                                gap: 6px;
+                                padding: 8px 16px;
+                                background: rgba(40, 167, 69, 0.1);
+                                border: 1px solid rgba(40, 167, 69, 0.3);
+                                border-radius: 24px;
+                                font-size: 0.95rem;
+                                font-weight: 600;
+                                color: #28a745;
+                            ">
+                                ✓ 99% AC Achieved
+                            </span>
+                            <span style="
+                                display: inline-flex;
+                                align-items: center;
+                                gap: 6px;
+                                padding: 8px 16px;
+                                background: rgba(16, 152, 247, 0.1);
+                                border: 1px solid rgba(16, 152, 247, 0.3);
+                                border-radius: 24px;
+                                font-size: 0.95rem;
+                                font-weight: 600;
+                                color: var(--accent-primary);
+                            ">
+                                ⚡ Ready for Scaling
+                            </span>
+                            <span style="
+                                display: inline-flex;
+                                align-items: center;
+                                gap: 6px;
+                                padding: 8px 16px;
+                                background: rgba(227, 84, 84, 0.1);
+                                border: 1px solid rgba(227, 84, 84, 0.3);
+                                border-radius: 24px;
+                                font-size: 0.95rem;
+                                font-weight: 600;
+                                color: var(--accent-secondary);
+                            ">
+                                🛡️ Focus on Guardrails
+                            </span>
+                        </div>
                     </div>
-                    <ul style="color: var(--text-secondary); margin: 0; padding-left: 20px; line-height: 1.8;">
-                        <li>Models{filter_context} have <strong style="color: #28a745;">already achieved</strong> near-enterprise reliability</li>
-                        <li>Focus should shift to <strong>implementation and scaling</strong></li>
-                        <li>Investment in guardrails and observability is <strong>critical now</strong></li>
-                    </ul>
                 </div>
                 """
         else:
             return f"""
-            <div style="margin-top: 20px; padding: 16px; background: rgba(245, 246, 247, 0.03); border: 1px solid var(--border-subtle); border-radius: 12px;">
-                <p style="color: var(--text-secondary); margin: 0;">
-                    {'Insufficient data' + filter_context + ' to make reliable predictions. More models need to be evaluated in this category.' if (domain_clean != "All Domains" or model_type_filter != "All") else 'Based on current data trends, we are tracking the exponential improvement in AI agent capabilities. As more models are released, our predictions will become more accurate.'}
-                </p>
+            <div style="margin-bottom: 24px;">
+                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
+                    <h3 style="margin: 0; color: var(--text-primary); font-size: 1.3rem; font-weight: 700;">
+                        Prediction Status
+                    </h3>
+                    {filter_badge}
+                </div>
+
+                <div style="
+                    padding: 20px;
+                    background: rgba(255, 193, 7, 0.08);
+                    border: 1px solid rgba(255, 193, 7, 0.2);
+                    border-radius: 16px;
+                    display: flex;
+                    align-items: center;
+                    gap: 16px;
+                ">
+                    <span style="font-size: 2.5rem;">📊</span>
+                    <div>
+                        <h4 style="margin: 0 0 8px 0; color: var(--text-primary); font-size: 1.1rem; font-weight: 700;">
+                            Insufficient Data for Predictions
+                        </h4>
+                        <p style="color: var(--text-secondary); margin: 0; font-size: 0.95rem; line-height: 1.5;">
+                            {'More models need to be evaluated in this category to generate reliable predictions.' if (domain_clean != "All Domains" or model_type_filter != "All") else 'As more models are released and evaluated, our predictions will become more accurate.'}
+                        </p>
+                    </div>
+                </div>
             </div>
             """
 
-    # Create the insights HTML component
+    # Create the insights HTML component ABOVE the chart
     prediction_insights = gr.HTML(
-        generate_insight_html(initial_date_99, initial_months_to_99, "All", "All")
+        generate_insight_html(initial_date_99, initial_months_to_99, "All", "All", initial_best_ac)
+    )
+
+    # Add prediction chart - make it reactive
+    gr.HTML('<div class="chart-container">')
+
+    prediction_plot = gr.Plot(
+        label="",
+        value=initial_prediction_chart,
+        elem_classes=["prediction-chart", "plot-container"]
     )
 
+    gr.HTML('</div>')
+
+    # Add methodology note
+    gr.HTML("""
+    <div style="
+        margin-top: 20px;
+        margin-bottom: 24px;
+        padding: 16px;
+        background: rgba(16, 152, 247, 0.05);
+        border-left: 3px solid var(--accent-primary);
+        border-radius: 8px;
+    ">
+        <div style="display: flex; align-items: flex-start; gap: 12px;">
+            <span style="font-size: 1.2rem; color: var(--accent-primary); margin-top: 2px;">📊</span>
+            <div>
+                <h4 style="margin: 0 0 8px 0; color: var(--text-primary); font-size: 1rem; font-weight: 600;">
+                    Methodology Note
+                </h4>
+                <p style="color: var(--text-secondary); margin: 0; font-size: 0.95rem; line-height: 1.6;">
+                    Our current prediction uses a <strong>conservative linear projection with a 50% diminishing returns factor</strong>.
+                    This simple approach assumes that future AI improvements will occur at half the current rate, accounting for
+                    increasing technical challenges as models approach higher performance levels.
+                </p>
+                <p style="color: var(--text-secondary); margin: 8px 0 0 0; font-size: 0.95rem; line-height: 1.6;">
+                    <strong>Why this approach?</strong> With limited data points currently available, complex curve fitting
+                    (exponential, logistic) would lead to overfitting. As we evaluate more models and gather additional data points,
+                    we will refine our methodology to incorporate more sophisticated growth models that better capture the true
+                    trajectory of AI agent capabilities.
+                </p>
+                <p style="color: var(--accent-primary); margin: 8px 0 0 0; font-size: 0.9rem; font-weight: 600;">
+                    🔄 This projection will automatically update as new models are added to the leaderboard.
+                </p>
+            </div>
+        </div>
+    </div>
+    """)
+
     gr.HTML("</div>")
 
     # Radar Chart Section
@@ -1959,12 +2199,12 @@ def create_leaderboard_v2_tab():
         df = load_leaderboard_data()
 
         # Create new prediction chart with filters
-        chart, date_99, months_to_99 = create_ac_prediction_chart(
+        chart, date_99, months_to_99, current_best_ac = create_ac_prediction_chart(
             df, domain_filter=domain_filter, model_type_filter=model_type_filter
         )
 
-        # Generate new insights HTML
-        insights_html = generate_insight_html(date_99, months_to_99, domain_filter, model_type_filter)
+        # Generate new insights HTML with current best AC for progress bar
+        insights_html = generate_insight_html(date_99, months_to_99, domain_filter, model_type_filter, current_best_ac)
 
         return chart, insights_html