fix: dropbox, layout(ko)

tabs/leaderboard_v1_en.py

@@ -791,9 +791,9 @@ def create_leaderboard_v2_tab():
     }
     
     #hero-banner {
-        max-width: 960px;
-        margin: 0 auto 20px auto;
-        border-radius: 16px;
+        width: 100%;
+        margin: 0 0 20px 0;
+        border-radius: 0;
         overflow: hidden;
         box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
     }
@@ -1093,7 +1093,7 @@ def create_leaderboard_v2_tab():
     """)
 
     gr.Image(
-        value="banner.png",
+        value="banner_wide.png",
         show_label=False,
         interactive=False,
         type="filepath",

tabs/leaderboard_v1_kr.py

@@ -791,17 +791,24 @@ def create_leaderboard_v2_tab():
     }
     
     #hero-banner {
-        max-width: 960px;
-        margin: 0 auto 20px auto;
-        border-radius: 16px;
-        overflow: hidden;
-        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
+        width: 100vw !important;
+        margin: 0 calc(-50vw + 50%) 20px calc(-50vw + 50%) !important;
+        border-radius: 0 !important;
+        overflow: hidden !important;
+        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
+        position: relative !important;
+        left: 50% !important;
+        right: 50% !important;
+        margin-left: -50vw !important;
+        margin-right: -50vw !important;
+        max-width: none !important;
     }
     
     #hero-banner img {
         width: 100%;
         height: auto;
         display: block;
+        object-fit: cover;
     }
     
     .hero-title {
@@ -1093,7 +1100,7 @@ def create_leaderboard_v2_tab():
     """)
 
     gr.Image(
-        value="banner.png",
+        value="banner_wide.png",
         show_label=False,
         interactive=False,
         type="filepath",
@@ -1188,8 +1195,9 @@ def create_leaderboard_v2_tab():
         <div class="scenario-body">
             <p>네이버, 지도, 카카오, 웹사이트 등 한국 실사용 환경 기반의 API를 기반으로<br> 국내 사용자의 일상과 밀접한 '약속 예약', '블로그 후기 검색'과 같은 현실적인 문제 해결 시나리오를 구현했습니다.</p>
         </div>
-        <div class="section-flow">⌄</div>
+        
     </div>
+        <div class="section-flow">⌄</div>
     """)
 
     # Section 3: 핵심 평가 기준
@@ -1947,67 +1955,128 @@ def create_leaderboard_v2_tab():
         padding: 12px 20px !important;
         font-size: 0.95rem !important;
     }
+    
+    /* Leaderboard controls row styling */
+    .leaderboard-controls-row {
+        margin: 20px 0 !important;
+        padding: 20px !important;
+        background: transparent !important;
+        border: none !important;
+        gap: 40px !important;
+    }
+    
+    .leaderboard-controls-row .gr-column,
+    .leaderboard-controls-row .gr-row,
+    .leaderboard-controls-row .gr-box,
+    .leaderboard-controls-row .gradio-column,
+    .leaderboard-controls-row .gradio-row,
+    .leaderboard-controls-row .gradio-group {
+        background: transparent !important;
+        border: none !important;
+        box-shadow: none !important;
+        padding: 0 !important;
+    }
+    
+    /* Remove all container backgrounds for leaderboard controls */
+    .leaderboard-controls-row * {
+        background-color: transparent !important;
+        background-image: none !important;
+        border: none !important;
+        box-shadow: none !important;
+    }
+    
+    .leaderboard-controls-row .inline-radio,
+    .leaderboard-controls-row .domain-radio {
+        background: transparent !important;
+        border: none !important;
+        box-shadow: none !important;
+    }
+    
+    /* Inline radio styling for integrated controls */
+    .inline-radio {
+        background: transparent !important;
+        border: none !important;
+        box-shadow: none !important;
+        padding: 0 !important;
+    }
+    
+    .inline-radio .wrap {
+        display: flex !important;
+        gap: 8px !important;
+        flex-wrap: wrap !important;
+        justify-content: flex-start !important;
+        background: transparent !important;
+        border: none !important;
+        box-shadow: none !important;
+        padding: 0 !important;
+    }
+    
+    .inline-radio label {
+        padding: 8px 16px !important;
+        background: rgba(245, 246, 247, 0.06) !important;
+        border: 1px solid var(--border-subtle) !important;
+        border-radius: 20px !important;
+        font-size: 0.85rem !important;
+        color: var(--text-primary) !important;
+        transition: all 0.2s ease !important;
+        cursor: pointer !important;
+    }
+    
+    .inline-radio label:hover {
+        background: rgba(255, 210, 30, 0.12) !important;
+        border-color: var(--accent-primary) !important;
+    }
+    
+    .inline-radio input[type="radio"]:checked + label,
+    .inline-radio label[aria-checked="true"] {
+        background: rgba(255, 210, 30, 0.2) !important;
+        border-color: var(--accent-primary) !important;
+        color: white !important;
+        font-weight: 600 !important;
+    }
     </style>
     
     """)
     
     level_options = list(level_details.keys())
     
-    with gr.Column(elem_classes=["domain-selector-container"], elem_id="task-level-selector"):
-        gr.HTML("""
-        <div class="domain-header">
-            <h2 class="domain-title" style="color: white;">🧠 태스크 레벨 선택</h2>
-            <p class="domain-subtitle" style="color: white;">Ko-AgentBench의 ALL · 모델별 에이전트 수행 능력을 단계별로 측정해보세요.</p>
-        </div>
-        """)
-        domain_filter = gr.Radio(
-            choices=level_options,
-            value=default_level,
-            label="",
-            interactive=True,
-            container=False,
-            elem_classes=["domain-radio"]
-        )
+    # Main leaderboard table with dynamic title and integrated controls
+    leaderboard_title = gr.HTML(update_leaderboard_title(default_level))
     
-    # Filter controls with domain styling
-    with gr.Column(elem_classes=["domain-selector-container", "filters-sorting-container"], elem_id="filters-sorting-container"):
-        gr.HTML("""
-        <div class="domain-header">
-            <h2 class="domain-title" style="color: white;">🔍 필터 및 정렬</h2>
-            <p class="domain-subtitle" style="color: white;">모델 접근 방식과 정렬 순서를 선택해 맞춤 뷰를 구성하세요.</p>
-        </div>
-        """)
-        with gr.Row(elem_classes=["filters-sorting-row"]):
-            with gr.Column(scale=1, elem_classes=["filter-group"]):
-                with gr.Row(elem_classes=["filter-group-row"]):
-                    gr.HTML("<span class='filter-group-label' style='color: white;'>모델 접근</span>")
-                    model_type_filter = gr.Radio(
-                        choices=["All", "OSS", "API"],
-                        value="All",
-                        label="",
-                        elem_classes=["domain-radio"],
-                        container=False
-                    )
-            with gr.Column(scale=1, elem_classes=["filter-group"]):
-                with gr.Row(elem_classes=["filter-group-row"]):
-                    gr.HTML("<span class='filter-group-label' style='color: white;'>정렬 순서</span>")
-                    sort_order = gr.Radio(
-                        choices=["Descending", "Ascending"],
-                        value="Descending",
-                        label="",
-                        elem_classes=["domain-radio"],
-                        container=False
-                    )
+    # Integrated controls within leaderboard section - stacked vertically
+    gr.HTML("<h3 style='color: white; margin: 5px 0 5px 0; font-size: 1.1rem;'>🧠 태스크 레벨 선택</h3>")
+    domain_filter = gr.Radio(
+        choices=level_options,
+        value=default_level,
+        label="",
+        interactive=True,
+        container=False,
+        elem_classes=["domain-radio", "inline-radio"]
+    )
     
-    # Main leaderboard table with dynamic title
-    leaderboard_title = gr.HTML(update_leaderboard_title(default_level))
+    gr.HTML("<h3 style='color: white; margin: 5px 0 0px 0; font-size: 1.1rem;'>🔍 필터 및 정렬</h3>")
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.HTML("<span style='color: white; font-size: 0.9rem; margin-bottom: 5px; display: block;'>모델 접근</span>")
+            model_type_filter = gr.Radio(
+                choices=["All", "OSS", "API"],
+                value="All",
+                label="",
+                elem_classes=["domain-radio", "inline-radio"],
+                container=False
+            )
+        with gr.Column(scale=1):
+            gr.HTML("<span style='color: white; font-size: 0.9rem; margin-bottom: 5px; display: block;'>정렬 순서</span>")
+            sort_order = gr.Radio(
+                choices=["Descending", "Ascending"],
+                value="Descending",
+                label="",
+                elem_classes=["domain-radio", "inline-radio"],
+                container=False
+            )
     
     leaderboard_table = gr.HTML(initial_table)
     
-    gr.HTML("""
-        </div>
-    </div>""")
-    
     # Radar Chart Section
     gr.HTML("""
     <div class="domain-selector-container domain-performance-container">
@@ -2017,22 +2086,16 @@ def create_leaderboard_v2_tab():
         </div>
     """)
     
-    with gr.Column(elem_classes=["domain-selector-container", "model-selector-container"], elem_id="radar-model-selector"):
-        gr.HTML("""
-        <div class="domain-header">
-            <h2 class="domain-title" style="color: white;">🎯 비교할 모델 선택</h2>
-            <p class="domain-subtitle" style="color: white;">역량 레이더에 표시할 모델을 최대 5개까지 선택하세요.</p>
-        </div>
-        """)
-        model_selector = gr.Dropdown(
-            choices=initial_df['Model'].tolist()[:10],
-            value=initial_df['Model'].tolist()[:5],
-            multiselect=True,
-            label="",
-            info=None,
-            container=False,
-            # elem_classes=["model-dropdown"]
-        )
+    gr.HTML("<h3 style='color: white; margin: 10px 0 0 0; font-size: 1.3rem;'>🎯 비교할 모델 선택</h3>")
+    gr.HTML("<p style='color: #b0b0b0; margin: 0 0 10px 0; font-size: 0.9rem;'>모델은 최대 5개까지 선택 가능 합니다.</p>")
+    model_selector = gr.Dropdown(
+        choices=initial_df['Model'].tolist()[:10],
+        value=initial_df['Model'].tolist()[:5],
+        multiselect=True,
+        label="",
+        info=None,
+        container=False,
+    )
     
     # Radar chart plot - wrapped in centered container
     gr.HTML('<div class="chart-container radar-chart-container">')
@@ -2048,309 +2111,46 @@ def create_leaderboard_v2_tab():
     
     gr.HTML("</div>")
     
-    # Level metric breakdown section
-    gr.HTML("""
-    <div class="domain-selector-container domain-performance-container level-metrics-wrapper">
-        <div class="domain-header">
-            <h2 class="domain-title" style="color: white;">레벨별 상세 지표</h2>
-            <p class="domain-subtitle" style="color: white;">각 Ko-AgentBench 단계별 고유 평가 지표를 통해 모델 점수를 비교하고 더 자세히 살펴보세요.</p>
-        </div>
-    """)
-    
-    with gr.Column(elem_classes=["domain-selector-container", "level-selector-container"], elem_id="level-selector-box"):
-        gr.HTML("""
-        <div class="domain-header">
-            <h2 class="domain-title" style="color: white;">🧭 태스크 레벨 및 모델 선택</h2>
-            <p class="domain-subtitle" style="color: white;">레벨과 모델(최대 5개)을 선택하여 상세 SR(성공률) 기반 지표를 탐색하세요.</p>
-        </div>
-        """)
-        level_metric_selector = gr.Dropdown(
-            choices=level_ids,
-            value=level_ids[0] if level_ids else None,
-            multiselect=False,
-            label="",
-            info=None,
-            container=False,
-            elem_classes=["level-dropdown"]
-        )
-        level_model_selector = gr.Dropdown(
-            choices=initial_level_model_choices,
-            value=initial_level_model_values,
-            multiselect=True,
-            label="",
-            info=None,
-            container=False,
-            elem_classes=["model-dropdown", "level-model-dropdown"]
-        )
-    
-    gr.HTML('<div class="chart-container level-metric-chart-container">')
-    level_metric_chart = gr.Plot(
-        label="",
-        value=initial_level_metric_chart,
-        elem_classes=["level-metric-plot", "plot-container"]
-    )
-    gr.HTML("""
-        </div>
-    </div>
-    """)
-    
-    # Heatmap section
-    gr.HTML("""
-    <div class="domain-selector-container domain-performance-container heatmap-wrapper">
-        <div class="domain-header">
-            <h2 class="domain-title" style="color: white;">종합 성능 히트맵</h2>
-            <p class="domain-subtitle" style="color: white;">각 모델의 L1~L7 Ko-AgentBench SR(성공률) 점수를 한눈에 보세요.</p>
-        </div>
-        <div class="chart-container heatmap-chart-container">
-    """)
-    heatmap_chart = gr.Plot(
-        label="",
-        value=initial_heatmap,
-        elem_classes=["heatmap-plot", "plot-container"]
-    )
-    gr.HTML("""
-        </div>
-    </div>
-    """)
-    
-    # Update functions
-    def get_optimal_sort_order(sort_by_value):
-        """Return the optimal sort order for a given metric"""
-        # Metrics where higher is better (descending)
-        descending_metrics = ["Overall Success"] + [sr_column_map[level] for level in level_ids]
-        
-        # Metrics where lower is better (ascending)  
-        ascending_metrics = []
+
+    # Define generate_performance_card function before using it
+    def generate_performance_card(model_name):
+        """Generate HTML for the model performance card"""
+        if not model_name:
+            return """<div style="text-align: center; color: var(--text-secondary); padding: 40px;">
+                Please select a model to generate its performance card
+            </div>"""
         
-        if sort_by_value in descending_metrics:
-            return "Descending"
-        elif sort_by_value in ascending_metrics:
-            return "Ascending"
-        else:
-            return "Descending"  # Default fallback
-    
-    def update_table(level_filter, model_type_filter, sort_order):
-        title_html = update_leaderboard_title(level_filter)
-        sort_metric = "Overall Success" if level_filter == "ALL" else sr_column_map.get(resolve_level(level_filter), "Overall Success")
-        table_html = filter_and_sort_data(level_filter, model_type_filter, sort_metric, sort_order)
-        return title_html, table_html
-    
-    def update_radar_chart(domain_filter, model_type_filter, sort_order, selected_models, selected_level, level_selected_models):
-        # Get filtered dataframe
+        # Get model data
         df = load_leaderboard_data()
-        sort_metric = "Overall Success" if domain_filter == "ALL" else sr_column_map.get(resolve_level(domain_filter), "Overall Success")
-        filtered_df, _, _ = apply_filters(df, domain_filter, model_type_filter, sort_order, sort_metric)
+        model_data = df[df['Model'] == model_name]
         
-        # Update model selector choices based on filtered data
-        available_models_all = filtered_df['Model'].tolist()
-        available_models = available_models_all[:15]  # Top 15 from filtered results
+        if model_data.empty:
+            return """<div style="text-align: center; color: var(--text-secondary); padding: 40px;">
+                Model not found in the database
+            </div>"""
         
-        # If selected models are not in available models, reset to top 5
-        if selected_models:
-            valid_selected = [m for m in selected_models if m in available_models]
-            if not valid_selected:
-                valid_selected = available_models[:5]
-        else:
-            valid_selected = available_models[:5]
+        row = model_data.iloc[0]
         
-        # Create radar chart
-        chart = create_domain_radar_chart(filtered_df, valid_selected)
+        # Get overall rank based on overall success
+        df_with_success = df.copy()
+        df_with_success['Overall Success'] = pd.to_numeric(df_with_success.get('Overall Success', pd.Series()), errors='coerce')
+        df_with_success = df_with_success[df_with_success['Overall Success'].notna()]
+        df_sorted = df_with_success.sort_values('Overall Success', ascending=False).reset_index(drop=True)
+        try:
+            rank = df_sorted[df_sorted['Model'] == model_name].index[0] + 1
+        except:
+            rank = 'N/A'
         
-        # Prepare heatmap order prioritizing selected models
-        heatmap_order = []
-        for model in valid_selected:
-            if model not in heatmap_order:
-                heatmap_order.append(model)
-        for model in available_models_all:
-            if model not in heatmap_order:
-                heatmap_order.append(model)
-        heatmap_order = heatmap_order[:12]
-        heatmap_fig = create_performance_heatmap(filtered_df, heatmap_order)
+        # Format values
+        def format_value(val, decimals=3, prefix='', suffix=''):
+            if pd.isna(val) or val == '':
+                return 'N/A'
+            return f"{prefix}{float(val):.{decimals}f}{suffix}"
         
-        # Level metric chart
-        effective_level = selected_level if selected_level in level_ids else (level_ids[0] if level_ids else None)
-        available_level_models = available_models_all
-        if level_selected_models:
-            valid_level_models = [m for m in level_selected_models if m in available_level_models][:5]
-            if not valid_level_models:
-                valid_level_models = available_level_models[:5]
-        else:
-            valid_level_models = available_level_models[:5]
-        level_metric_fig = create_level_metric_chart(filtered_df, effective_level, valid_level_models) if effective_level else create_empty_level_metric_chart("Select a level to view its metrics")
-        
-        return (
-            gr.Dropdown(
-                choices=available_models,
-                value=valid_selected,
-                multiselect=True,
-                label="",
-                info=None,
-                container=False,
-                # elem_classes=["model-dropdown"]
-            ),
-            chart,
-            heatmap_fig,
-            gr.Dropdown(
-                choices=available_level_models,
-                value=valid_level_models,
-                multiselect=True,
-                label="",
-                info=None,
-                container=False,
-                elem_classes=["model-dropdown", "level-model-dropdown"]
-            ),
-            level_metric_fig,
-        )
-    
-    def update_radar_only(domain_filter, model_type_filter, sort_order, selected_models, selected_level, level_selected_models):
-        # Get filtered dataframe
-        df = load_leaderboard_data()
-        sort_metric = "Overall Success" if domain_filter == "ALL" else sr_column_map.get(resolve_level(domain_filter), "Overall Success")
-        filtered_df, _, _ = apply_filters(df, domain_filter, model_type_filter, sort_order, sort_metric)
-        
-        available_models_all = filtered_df['Model'].tolist()
-        if selected_models:
-            valid_selected = [m for m in selected_models if m in available_models_all]
-            if not valid_selected:
-                valid_selected = available_models_all[:5]
-        else:
-            valid_selected = available_models_all[:5]
-        
-        heatmap_order = []
-        for model in valid_selected:
-            if model not in heatmap_order:
-                heatmap_order.append(model)
-        for model in available_models_all:
-            if model not in heatmap_order:
-                heatmap_order.append(model)
-        heatmap_order = heatmap_order[:12]
-        
-        effective_level = selected_level if selected_level in level_ids else (level_ids[0] if level_ids else None)
-        available_level_models = available_models_all
-        if level_selected_models:
-            valid_level_models = [m for m in level_selected_models if m in available_level_models][:5]
-            if not valid_level_models:
-                valid_level_models = available_level_models[:5]
-        else:
-            valid_level_models = available_level_models[:5]
-        level_metric_fig = create_level_metric_chart(filtered_df, effective_level, valid_level_models) if effective_level else create_empty_level_metric_chart("Select a level to view its metrics")
-        
-        return (
-            create_domain_radar_chart(filtered_df, valid_selected),
-            create_performance_heatmap(filtered_df, heatmap_order),
-            gr.Dropdown(
-                choices=available_level_models,
-                value=valid_level_models,
-                multiselect=True,
-                label="",
-                info=None,
-                container=False,
-                elem_classes=["model-dropdown", "level-model-dropdown"]
-            ),
-            level_metric_fig,
-        )
-    
-    def update_level_metric_only(domain_filter, model_type_filter, sort_order, selected_models, selected_level, level_selected_models):
-        df = load_leaderboard_data()
-        sort_metric = "Overall Success" if domain_filter == "ALL" else sr_column_map.get(resolve_level(domain_filter), "Overall Success")
-        filtered_df, _, _ = apply_filters(df, domain_filter, model_type_filter, sort_order, sort_metric)
-        available_models = filtered_df['Model'].tolist()
-        if level_selected_models:
-            valid_level_models = [m for m in level_selected_models if m in available_models][:5]
-            if not valid_level_models:
-                valid_level_models = available_models[:5]
-        else:
-            valid_level_models = available_models[:5]
-        effective_level = selected_level if selected_level in level_ids else (level_ids[0] if level_ids else None)
-        level_chart = create_level_metric_chart(filtered_df, effective_level, valid_level_models) if effective_level else create_empty_level_metric_chart("Select a level to view its metrics")
-        return (
-            gr.Dropdown(
-                choices=available_models,
-                value=valid_level_models,
-                multiselect=True,
-                label="",
-                info=None,
-                container=False,
-                elem_classes=["model-dropdown", "level-model-dropdown"]
-            ),
-            level_chart,
-        )
-
-    # Update table when filters change
-    filter_inputs = [domain_filter, model_type_filter, sort_order]
-
-    for input_component in filter_inputs:
-        input_component.change(
-            fn=update_table,
-            inputs=filter_inputs,
-            outputs=[leaderboard_title, leaderboard_table]
-        )
-        
-        # Also update radar chart when filters change
-        input_component.change(
-            fn=update_radar_chart,
-            inputs=filter_inputs + [model_selector, level_metric_selector, level_model_selector],
-            outputs=[model_selector, radar_chart, heatmap_chart, level_model_selector, level_metric_chart]
-        )
-
-    # Update radar chart when model selection changes
-    model_selector.change(
-        fn=update_radar_only,
-        inputs=filter_inputs + [model_selector, level_metric_selector, level_model_selector],
-        outputs=[radar_chart, heatmap_chart, level_model_selector, level_metric_chart]
-    )
-
-    level_metric_selector.change(
-        fn=update_level_metric_only,
-        inputs=filter_inputs + [model_selector, level_metric_selector, level_model_selector],
-        outputs=[level_model_selector, level_metric_chart]
-    )
-
-    level_model_selector.change(
-        fn=update_level_metric_only,
-        inputs=filter_inputs + [model_selector, level_metric_selector, level_model_selector],
-        outputs=[level_model_selector, level_metric_chart]
-    )
-    
-    # Define generate_performance_card function before using it
-    def generate_performance_card(model_name):
-        """Generate HTML for the model performance card"""
-        if not model_name:
-            return """<div style="text-align: center; color: var(--text-secondary); padding: 40px;">
-                Please select a model to generate its performance card
-            </div>"""
-        
-        # Get model data
-        df = load_leaderboard_data()
-        model_data = df[df['Model'] == model_name]
-        
-        if model_data.empty:
-            return """<div style="text-align: center; color: var(--text-secondary); padding: 40px;">
-                Model not found in the database
-            </div>"""
-        
-        row = model_data.iloc[0]
-        
-        # Get overall rank based on overall success
-        df_with_success = df.copy()
-        df_with_success['Overall Success'] = pd.to_numeric(df_with_success.get('Overall Success', pd.Series()), errors='coerce')
-        df_with_success = df_with_success[df_with_success['Overall Success'].notna()]
-        df_sorted = df_with_success.sort_values('Overall Success', ascending=False).reset_index(drop=True)
-        try:
-            rank = df_sorted[df_sorted['Model'] == model_name].index[0] + 1
-        except:
-            rank = 'N/A'
-        
-        # Format values
-        def format_value(val, decimals=3, prefix='', suffix=''):
-            if pd.isna(val) or val == '':
-                return 'N/A'
-            return f"{prefix}{float(val):.{decimals}f}{suffix}"
-        
-        def format_score(value):
-            if pd.isna(value) or value == '':
-                return 'N/A'
-            return f"{float(value):.3f}"
+        def format_score(value):
+            if pd.isna(value) or value == '':
+                return 'N/A'
+            return f"{float(value):.3f}"
         
         radar_metrics = [
             ("기초 수행력", row.get('Execution Accuracy')),
@@ -2478,7 +2278,7 @@ def create_leaderboard_v2_tab():
     with gr.Column(elem_classes=["domain-selector-container", "model-selector-container"], elem_id="model-selector-box"):
         gr.HTML("""
         <div class="domain-header">
-            <h2 class="domain-title" style="color: white;">🤖 모델 선택</h2>
+            <h2 class="domain-title" style="color: white;">모델 선택</h2>
             <p class="domain-subtitle" style="color: white;">분석 카드에 포함할 모델을 선택하세요.</p>
         </div>
         """)
@@ -2510,6 +2310,280 @@ def create_leaderboard_v2_tab():
         </div>
     </div>
     """)
+
+
+    # Level metric breakdown section
+    gr.HTML("""
+    <div class="domain-selector-container domain-performance-container level-metrics-wrapper">
+        <div class="domain-header">
+            <h2 class="domain-title" style="color: white;">레벨별 상세 지표</h2>
+            <p class="domain-subtitle" style="color: white;">각 Ko-AgentBench 단계별 고유 평가 지표를 통해 모델 점수를 비교하고 더 자세히 살펴보세요.</p>
+        </div>
+    """)
+    
+    gr.HTML("""
+    <h2 style="color: white; text-align: center; margin: 20px 0 10px 0; font-size: 1.8rem;">🧭 태스크 레벨 및 모델 선택</h2>
+    <p style="color: white; text-align: center; margin: 0 0 20px 0; font-size: 1rem;">레벨과 모델(최대 5개)을 선택하여 상세 SR(성공률) 기반 지표를 탐색하세요.</p>
+    """)
+    
+    with gr.Column(elem_classes=["domain-selector-container", "level-selector-container"], elem_id="level-selector-box"):
+        level_metric_selector = gr.Dropdown(
+            choices=level_ids,
+            value=level_ids[0] if level_ids else None,
+            multiselect=False,
+            label="",
+            info=None,
+            container=False,
+            elem_classes=["level-dropdown"]
+        )
+        level_model_selector = gr.Dropdown(
+            choices=initial_level_model_choices,
+            value=initial_level_model_values,
+            multiselect=True,
+            label="",
+            info=None,
+            container=False,
+            elem_classes=["model-dropdown", "level-model-dropdown"]
+        )
+    
+    gr.HTML('<div class="chart-container level-metric-chart-container">')
+    level_metric_chart = gr.Plot(
+        label="",
+        value=initial_level_metric_chart,
+        elem_classes=["level-metric-plot", "plot-container"]
+    )
+    gr.HTML("""
+        </div>
+    </div>
+    """)
+    
+    # # Heatmap section
+    # gr.HTML("""
+    # <div class="domain-selector-container domain-performance-container heatmap-wrapper">
+    #     <div class="domain-header">
+    #         <h2 class="domain-title" style="color: white;">종합 성능 히트맵</h2>
+    #         <p class="domain-subtitle" style="color: white;">각 모델의 L1~L7 Ko-AgentBench SR(성공률) 점수를 한눈에 보세요.</p>
+    #     </div>
+    #     <div class="chart-container heatmap-chart-container">
+    # """)
+    # heatmap_chart = gr.Plot(
+    #     label="",
+    #     value=initial_heatmap,
+    #     elem_classes=["heatmap-plot", "plot-container"]
+    # )
+    # gr.HTML("""
+    #     </div>
+    # </div>
+    # """)
+    
+    # Update functions
+    def get_optimal_sort_order(sort_by_value):
+        """Return the optimal sort order for a given metric"""
+        # Metrics where higher is better (descending)
+        descending_metrics = ["Overall Success"] + [sr_column_map[level] for level in level_ids]
+        
+        # Metrics where lower is better (ascending)  
+        ascending_metrics = []
+        
+        if sort_by_value in descending_metrics:
+            return "Descending"
+        elif sort_by_value in ascending_metrics:
+            return "Ascending"
+        else:
+            return "Descending"  # Default fallback
+    
+
+    
+    def update_table(level_filter, model_type_filter, sort_order):
+        title_html = update_leaderboard_title(level_filter)
+        sort_metric = "Overall Success" if level_filter == "ALL" else sr_column_map.get(resolve_level(level_filter), "Overall Success")
+        table_html = filter_and_sort_data(level_filter, model_type_filter, sort_metric, sort_order)
+        return title_html, table_html
+    
+    def update_radar_chart(domain_filter, model_type_filter, sort_order, selected_models, selected_level, level_selected_models):
+        # Get filtered dataframe
+        df = load_leaderboard_data()
+        sort_metric = "Overall Success" if domain_filter == "ALL" else sr_column_map.get(resolve_level(domain_filter), "Overall Success")
+        filtered_df, _, _ = apply_filters(df, domain_filter, model_type_filter, sort_order, sort_metric)
+        
+        # Update model selector choices based on filtered data
+        available_models_all = filtered_df['Model'].tolist()
+        available_models = available_models_all[:15]  # Top 15 from filtered results
+        
+        # If selected models are not in available models, reset to top 5
+        if selected_models:
+            valid_selected = [m for m in selected_models if m in available_models]
+            # Check if more than 5 models are selected and show alert
+            if len(valid_selected) > 5:
+                gr.Warning("최대 5개 까지만 선택 가능합니다")
+                # Remove the last selected item (6th item) instead of keeping first 5
+                valid_selected = valid_selected[:-1]
+            if not valid_selected:
+                valid_selected = available_models[:5]
+        else:
+            valid_selected = available_models[:5]
+        
+        # Create radar chart
+        chart = create_domain_radar_chart(filtered_df, valid_selected)
+        
+        # Prepare heatmap order prioritizing selected models
+
+        
+        # Level metric chart
+        effective_level = selected_level if selected_level in level_ids else (level_ids[0] if level_ids else None)
+        available_level_models = available_models_all
+        if level_selected_models:
+            valid_level_models = [m for m in level_selected_models if m in available_level_models][:5]
+            if not valid_level_models:
+                valid_level_models = available_level_models[:5]
+        else:
+            valid_level_models = available_level_models[:5]
+        level_metric_fig = create_level_metric_chart(filtered_df, effective_level, valid_level_models) if effective_level else create_empty_level_metric_chart("Select a level to view its metrics")
+        
+        return (
+            gr.Dropdown(
+                choices=available_models,
+                value=valid_selected,
+                multiselect=True,
+                label="",
+                info=None,
+                container=False,
+                # elem_classes=["model-dropdown"]
+            ),
+            chart,
+            gr.Dropdown(
+                choices=available_level_models,
+                value=valid_level_models,
+                multiselect=True,
+                label="",
+                info=None,
+                container=False,
+                elem_classes=["model-dropdown", "level-model-dropdown"]
+            ),
+            level_metric_fig,
+        )
+    
+    def update_radar_only(domain_filter, model_type_filter, sort_order, selected_models, selected_level, level_selected_models):
+        # Get filtered dataframe
+        df = load_leaderboard_data()
+        sort_metric = "Overall Success" if domain_filter == "ALL" else sr_column_map.get(resolve_level(domain_filter), "Overall Success")
+        filtered_df, _, _ = apply_filters(df, domain_filter, model_type_filter, sort_order, sort_metric)
+        
+        available_models_all = filtered_df['Model'].tolist()
+        if selected_models:
+            valid_selected = [m for m in selected_models if m in available_models_all]
+            # Check if more than 5 models are selected and show alert
+            if len(valid_selected) > 5:
+                # JavaScript alert for exceeding 5 models
+                gr.Warning("최대 5개 까지만 선택 가능합니다")
+                # Remove the last selected item (6th item) instead of keeping first 5
+                valid_selected = valid_selected[:-1]
+            if not valid_selected:
+                valid_selected = available_models_all[:5]
+        else:
+            valid_selected = available_models_all[:5]
+        
+
+        
+        effective_level = selected_level if selected_level in level_ids else (level_ids[0] if level_ids else None)
+        available_level_models = available_models_all
+        if level_selected_models:
+            valid_level_models = [m for m in level_selected_models if m in available_level_models][:5]
+            if not valid_level_models:
+                valid_level_models = available_level_models[:5]
+        else:
+            valid_level_models = available_level_models[:5]
+        level_metric_fig = create_level_metric_chart(filtered_df, effective_level, valid_level_models) if effective_level else create_empty_level_metric_chart("Select a level to view its metrics")
+        
+        return (
+            gr.Dropdown(
+                choices=available_models_all[:15],
+                value=valid_selected,
+                multiselect=True,
+                label="",
+                info=None,
+                container=False,
+            ),
+            create_domain_radar_chart(filtered_df, valid_selected),
+            gr.Dropdown(
+                choices=available_level_models,
+                value=valid_level_models,
+                multiselect=True,
+                label="",
+                info=None,
+                container=False,
+                elem_classes=["model-dropdown", "level-model-dropdown"]
+            ),
+            level_metric_fig,
+        )
+    
+    def update_level_metric_only(domain_filter, model_type_filter, sort_order, selected_models, selected_level, level_selected_models):
+        df = load_leaderboard_data()
+        sort_metric = "Overall Success" if domain_filter == "ALL" else sr_column_map.get(resolve_level(domain_filter), "Overall Success")
+        filtered_df, _, _ = apply_filters(df, domain_filter, model_type_filter, sort_order, sort_metric)
+        available_models = filtered_df['Model'].tolist()
+        if level_selected_models:
+            valid_level_models = [m for m in level_selected_models if m in available_models]
+            # Check if more than 5 models are selected and show alert
+            if len(valid_level_models) > 5:
+                gr.Warning("최대 5개 까지만 선택 가능합니다")
+                # Remove the last selected item (6th item) instead of keeping first 5
+                valid_level_models = valid_level_models[:-1]
+            if not valid_level_models:
+                valid_level_models = available_models[:5]
+        else:
+            valid_level_models = available_models[:5]
+        effective_level = selected_level if selected_level in level_ids else (level_ids[0] if level_ids else None)
+        level_chart = create_level_metric_chart(filtered_df, effective_level, valid_level_models) if effective_level else create_empty_level_metric_chart("Select a level to view its metrics")
+        return (
+            gr.Dropdown(
+                choices=available_models,
+                value=valid_level_models,
+                multiselect=True,
+                label="",
+                info=None,
+                container=False,
+                elem_classes=["model-dropdown", "level-model-dropdown"]
+            ),
+            level_chart,
+        )
+
+    # Update table when filters change
+    filter_inputs = [domain_filter, model_type_filter, sort_order]
+
+    for input_component in filter_inputs:
+        input_component.change(
+            fn=update_table,
+            inputs=filter_inputs,
+            outputs=[leaderboard_title, leaderboard_table]
+        )
+        
+        # Also update radar chart when filters change
+        input_component.change(
+            fn=update_radar_chart,
+            inputs=filter_inputs + [model_selector, level_metric_selector, level_model_selector],
+            outputs=[model_selector, radar_chart, level_model_selector, level_metric_chart]
+        )
+
+    # Update radar chart when model selection changes
+    model_selector.change(
+        fn=update_radar_only,
+        inputs=filter_inputs + [model_selector, level_metric_selector, level_model_selector],
+        outputs=[model_selector, radar_chart, level_model_selector, level_metric_chart]
+    )
+
+    level_metric_selector.change(
+        fn=update_level_metric_only,
+        inputs=filter_inputs + [model_selector, level_metric_selector, level_model_selector],
+        outputs=[level_model_selector, level_metric_chart]
+    )
+
+    level_model_selector.change(
+        fn=update_level_metric_only,
+        inputs=filter_inputs + [model_selector, level_metric_selector, level_model_selector],
+        outputs=[level_model_selector, level_metric_chart]
+    )
+    
     
     # Add custom CSS for the performance card
     gr.HTML("""