Update app.py

app.py

@@ -78,9 +78,19 @@ def create_reranking_interface(task_data):
             return f"Error: {str(e)}", f"Progress: {sum(completed_samples.values())}/{len(samples)}"
     
     with gr.Blocks(theme=gr.themes.Soft()) as demo:
-        gr.Markdown(f"# {task_data['task_name']} - Human Reranking Evaluation")
+        # Header section with title and progress indicators
+        with gr.Row(equal_height=True):
+            with gr.Column(scale=3):
+                gr.Markdown(f"# {task_data['task_name']} - Human Reranking Evaluation")
+            with gr.Column(scale=1):
+                progress_text = gr.Textbox(
+                    label="Progress", 
+                    value=f"Progress: 0/{len(samples)}", 
+                    interactive=False
+                )
         
-        with gr.Accordion("Instructions", open=True):
+        # Instructions in a collapsible section
+        with gr.Accordion("📋 Task Instructions", open=False):
             gr.Markdown("""
             ## Task Instructions
             
@@ -96,77 +106,180 @@ def create_reranking_interface(task_data):
             7. Your rankings are automatically saved when you submit or navigate
             """.format(instructions=task_data.get("instructions", "Rank documents by their relevance to the query.")))
         
+        # Hidden state variables
         current_sample_id = gr.State(value=samples[0]["id"])
         auto_save_enabled = gr.State(value=True)
         
-        with gr.Row():
-            progress_text = gr.Textbox(label="Progress", value=f"Progress: 0/{len(samples)}", interactive=False)
-            status_box = gr.Textbox(label="Status", value="Ready to start evaluation", interactive=False)
-            auto_save_toggle = gr.Checkbox(label="Auto-save when navigating", value=True)
+        # Status and control section
+        with gr.Row(equal_height=True):
+            with gr.Column(scale=3):
+                status_box = gr.Textbox(
+                    label="Status", 
+                    value="Ready to start evaluation", 
+                    interactive=False
+                )
+            with gr.Column(scale=1):
+                auto_save_toggle = gr.Checkbox(
+                    label="Auto-save when navigating", 
+                    value=True
+                )
         
+        # Main content area
         with gr.Group():
-            gr.Markdown("## Query:")
-            query_text = gr.Textbox(value=samples[0]["query"], label="", interactive=False)
+            # Query section with clear visual distinction
+            with gr.Box():
+                gr.Markdown("## 📝 Query")
+                query_text = gr.Textbox(
+                    value=samples[0]["query"], 
+                    label="", 
+                    interactive=False,
+                    elem_classes=["query-text"]
+                )
+            
+            # Quick ranking tools in a nicely formatted bar
+            with gr.Row(equal_height=True):
+                gr.Markdown("### 🔄 Quick Ranking Tools:", elem_classes=["tool-heading"])
+                sequential_btn = gr.Button("Rank in Order (1,2,3...)", elem_classes=["tool-button"])
+                reverse_btn = gr.Button("Reverse Order (n,n-1,...)", elem_classes=["tool-button"])
+                clear_btn = gr.Button("Clear All Rankings", elem_classes=["tool-button"])
             
-            gr.Markdown("## Documents to Rank:")
+            # Documents section with improved layout
+            gr.Markdown("## 📄 Documents to Rank")
             
-            # Create document displays and ranking inputs in synchronized pairs
+            # Container for documents and rankings
             doc_containers = []
             ranking_inputs = []
             validation_indicators = []
             
-            with gr.Column():
-                # Quick ranking tools
-                with gr.Row():
-                    gr.Markdown("### Quick Ranking Options:")
-                    sequential_btn = gr.Button("Rank in Order (1,2,3...)")
-                    reverse_btn = gr.Button("Reverse Order (n,n-1,...)")
-                    clear_btn = gr.Button("Clear All Rankings")
-                
-                # Document display with better UI for ranking
+            # Create a better visual layout for documents
+            with gr.Box():
                 for i, doc in enumerate(samples[0]["candidates"]):
-                    with gr.Row():
-                        with gr.Column(scale=4):
+                    row_class = "document-row-even" if i % 2 == 0 else "document-row-odd"
+                    with gr.Row(equal_height=True, elem_classes=["document-row", row_class]):
+                        with gr.Column(scale=1, min_width=50):
+                            gr.HTML(f"<div class='doc-number'>{i+1}</div>")
+                        
+                        with gr.Column(scale=6):
                             doc_box = gr.Textbox(
                                 value=doc, 
                                 label=f"Document {i+1}",
-                                interactive=False
+                                interactive=False,
+                                elem_classes=["document-text"]
                             )
                             doc_containers.append(doc_box)
                         
-                        with gr.Column(scale=1):
-                            # Use Dropdown instead of Radio for compatibility with Gradio 3.x
+                        with gr.Column(scale=2):
+                            # Dropdown for ranking
                             rank_input = gr.Dropdown(
                                 choices=[str(j) for j in range(1, len(samples[0]["candidates"])+1)],
                                 label=f"Rank",
-                                value=""
+                                value="",
+                                elem_classes=["rank-dropdown"]
                             )
                             ranking_inputs.append(rank_input)
                         
-                        # Add validation indicator
-                        with gr.Column(scale=1, min_width=50):
+                        with gr.Column(scale=2):
+                            # Validation indicator
                             validation = gr.HTML(value="")
                             validation_indicators.append(validation)
             
-            with gr.Row():
+            # Navigation and submission controls
+            with gr.Row(equal_height=True):
                 prev_btn = gr.Button("← Previous Query", size="sm")
                 submit_btn = gr.Button("Submit Rankings", size="lg", variant="primary")
                 next_btn = gr.Button("Next Query →", size="sm")
             
+            # Save results button
             with gr.Row():
-                save_btn = gr.Button("💾 Save All Results", variant="secondary")
+                save_btn = gr.Button("💾 Save All Results", variant="secondary", size="sm")
                 results_info = gr.HTML(value=f"<p>Results will be saved to <code>{task_data['task_name']}_human_results.json</code></p>")
         
+        # CSS for styling
+        gr.HTML("""
+        <style>
+            .query-text textarea {
+                font-size: 16px !important;
+                font-weight: bold !important;
+                background-color: #f8f9fa !important;
+                border-left: 4px solid #2c7be5 !important;
+                padding-left: 10px !important;
+            }
+            
+            .document-row {
+                border-bottom: 1px solid #e0e0e0;
+                padding: 10px 0;
+                margin-bottom: 5px !important;
+            }
+            
+            .document-text textarea {
+                font-size: 14px !important;
+                line-height: 1.5 !important;
+            }
+            
+            .rank-dropdown select {
+                font-weight: bold !important;
+                text-align: center !important;
+            }
+            
+            .tool-button button {
+                min-width: 120px !important;
+            }
+            
+            .tool-heading {
+                padding-top: 8px !important;
+            }
+            
+            .document-row-even {
+                background-color: #f8f9fa;
+            }
+            
+            .document-row-odd {
+                background-color: #ffffff;
+            }
+            
+            .document-row:hover {
+                background-color: #e9ecef;
+            }
+            
+            .doc-number {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;
+                background-color: #2c7be5;
+                color: white;
+                font-weight: bold;
+                margin: 0 auto;
+            }
+            
+            .rank-dropdown select {
+                font-weight: bold !important;
+                font-size: 16px !important;
+                text-align: center !important;
+                padding: 8px !important;
+                border-radius: 5px !important;
+                border: 2px solid #2c7be5 !important;
+            }
+            
+            .rank-dropdown select:focus {
+                border-color: #007bff !important;
+                box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
+            }
+        </style>
+        """)
+        
         def validate_rankings(*rankings):
-            """Validate rankings and update indicators."""
+            """Validate rankings and update indicators with visual cues."""
             results = []
             all_valid = True
             for rank in rankings:
                 if rank is None or rank == "":
-                    results.append("⚠️")
+                    results.append('<span style="color: #dc3545; font-weight: bold;">⚠️ Missing</span>')
                     all_valid = False
                 else:
-                    results.append("✓")
+                    results.append('<span style="color: #28a745; font-weight: bold;">✓ Rank ' + str(rank) + '</span>')
             
             return results + [all_valid]  # Return validation indicators and validity flag
         
@@ -284,6 +397,7 @@ def create_reranking_interface(task_data):
         
         # Define a function that collects all ranking values and validates them
         def submit_rankings(*args):
+            """Submit rankings with improved validation and user feedback."""
             # Get the last argument (sample_id) and the rankings
             if len(args) < 1:
                 return "Error: No arguments provided", progress_text.value
@@ -305,14 +419,84 @@ def create_reranking_interface(task_data):
                 if i < len(validation_indicators):
                     validation_indicators[i].update(value=result)
             
+            # Check for duplicate rankings
+            if all_valid:
+                try:
+                    processed_rankings = [int(r) for r in rankings]
+                    if len(set(processed_rankings)) != len(processed_rankings):
+                        dup_ranks = {}
+                        for i, r in enumerate(processed_rankings):
+                            if r in dup_ranks:
+                                dup_ranks[r].append(i)
+                            else:
+                                dup_ranks[r] = [i]
+                        
+                        # Highlight duplicates with error styling
+                        for rank, indices in dup_ranks.items():
+                            if len(indices) > 1:
+                                for idx in indices:
+                                    if idx < len(validation_indicators):
+                                        validation_indicators[idx].update(
+                                            value=f'<span style="color: #dc3545; font-weight: bold;">⚠️ Duplicate rank {rank}</span>'
+                                        )
+                        
+                        return "⚠️ Each document must have a unique rank. Please fix duplicate rankings.", progress_text.value
+                except:
+                    pass
+            
             # If not all valid, return error message
             if not all_valid:
                 return "⚠️ Please assign a rank to all documents before submitting", progress_text.value
             
             # Save the validated rankings
             status, progress = save_ranking(rankings, sample_id)
+            
+            # Provide clear success feedback
+            if "✅" in status:
+                for i in range(len(validation_indicators)):
+                    validation_indicators[i].update(
+                        value=f'<span style="color: #28a745; font-weight: bold;">✓ Saved</span>'
+                    )
+            
             return status, progress
         
+        # Update ranking input's event handling for immediate validation
+        def on_ranking_change(*rankings):
+            """Validate rankings whenever any ranking dropdown changes."""
+            validation_results = validate_rankings(*rankings)
+            return validation_results[:-1]  # Return only the validation indicators
+        
+        # Check for overlapping ranks and duplicate assignments
+        def check_for_duplicates(*rankings):
+            """Highlight duplicate rankings with visual feedback."""
+            clean_rankings = []
+            for r in rankings:
+                if r is not None and r != "":
+                    clean_rankings.append(int(r))
+            
+            if len(clean_rankings) != len(set(clean_rankings)):
+                used_ranks = {}
+                for i, r in enumerate(rankings):
+                    if r is not None and r != "":
+                        rank = int(r)
+                        if rank in used_ranks:
+                            used_ranks[rank].append(i)
+                        else:
+                            used_ranks[rank] = [i]
+            
+            results = []
+            for i, r in enumerate(rankings):
+                if r is not None and r != "":
+                    rank = int(r)
+                    if len(used_ranks[rank]) > 1:
+                        results.append(f'<span style="color: #dc3545; font-weight: bold;">⚠️ Duplicate rank {rank}</span>')
+                    else:
+                        results.append(f'<span style="color: #28a745; font-weight: bold;">✓ Rank {rank}</span>')
+                else:
+                    results.append('<span style="color: #dc3545; font-weight: bold;">⚠️ Missing</span>')
+            
+            return results
+        
         # Wire up events (Gradio 3.x syntax)
         submit_btn.click(
             fn=submit_rankings,
@@ -389,6 +573,190 @@ def create_reranking_interface(task_data):
             inputs=[auto_save_toggle],
             outputs=[auto_save_enabled]
         )
+        
+        # Connect validation to ranking inputs for real-time feedback
+        for i, ranking in enumerate(ranking_inputs):
+            ranking.change(
+                fn=on_ranking_change,
+                inputs=ranking_inputs,
+                outputs=validation_indicators
+            )
+        
+        # Add a real-time validation for the entire set to check for duplicates
+        def validate_all_inputs(*rankings):
+            """Check all inputs for duplicate ranks and provide feedback."""
+            validation_results = validate_rankings(*rankings)
+            all_valid = validation_results[-1]
+            validation_indicators_values = validation_results[:-1]
+            
+            # Show clear button status based on validation
+            submit_status = "Ready to submit" if all_valid else "Please assign unique ranks to all documents"
+            
+            return validation_indicators_values + [submit_status]
+        
+        # Connect this validation to all ranking inputs
+        for ranking in ranking_inputs:
+            ranking.change(
+                fn=validate_all_inputs,
+                inputs=ranking_inputs,
+                outputs=validation_indicators + [status_box]
+            )
+            
+        # Helper function for ranking - sort documents by rankings
+        def rank_by_relevance(*args):
+            """Sorts the documents by their current rankings for a clearer view."""
+            # Last argument is sample_id
+            sample_id = args[-1]
+            rankings = args[:-1]
+            
+            # Check if we have valid rankings
+            valid_rankings = []
+            for i, r in enumerate(rankings):
+                if r is not None and r != "":
+                    try:
+                        valid_rankings.append((i, int(r)))
+                    except:
+                        pass
+            
+            # If we don't have enough valid rankings, do nothing
+            if len(valid_rankings) < 2:
+                return [status_box.value]
+            
+            # Sort by rank
+            valid_rankings.sort(key=lambda x: x[1])
+            
+            # Generate message showing the ranking order
+            result = "<p><strong>Current ranking order:</strong></p><ol>"
+            for idx, _ in valid_rankings:
+                doc_text = doc_containers[idx].value
+                # Truncate if too long
+                if len(doc_text) > 100:
+                    doc_text = doc_text[:97] + "..."
+                result += f"<li>Doc {idx+1}: {doc_text}</li>"
+            result += "</ol>"
+            
+            return [result]
+        
+        # Add a "Show Current Ranking" button
+        with gr.Row():
+            show_ranking_btn = gr.Button("👁️ Show Current Ranking Order", variant="secondary")
+            ranking_display = gr.HTML("")
+        
+        # Connect the show ranking button
+        show_ranking_btn.click(
+            fn=rank_by_relevance,
+            inputs=ranking_inputs + [current_sample_id],
+            outputs=[ranking_display]
+        )
+        
+        # Add a ranking preview section that shows documents in their ranked order
+        def generate_ranking_preview(*rankings):
+            """Creates a visual preview of current rankings."""
+            # Create list of (index, rank) pairs for valid rankings
+            ranked_docs = []
+            for i, rank in enumerate(rankings):
+                if rank and rank.strip():
+                    try:
+                        ranked_docs.append((i, int(rank)))
+                    except:
+                        continue
+            
+            # Sort by rank
+            ranked_docs.sort(key=lambda x: x[1])
+            
+            # Generate HTML for the preview
+            if not ranked_docs:
+                return "<p><i>No rankings assigned yet. Assign ranks to see a preview.</i></p>"
+            
+            html = "<div class='ranking-preview'>"
+            html += "<h3>Current Ranking Preview</h3>"
+            html += "<ol class='ranked-docs'>"
+            
+            for doc_idx, rank in ranked_docs:
+                if doc_idx < len(doc_containers):
+                    doc_text = doc_containers[doc_idx].value
+                    # Truncate if too long
+                    if len(doc_text) > 100:
+                        doc_text = doc_text[:97] + "..."
+                    
+                    html += f"""
+                    <li class='ranked-doc'>
+                        <div class='rank-badge'>#{rank}</div>
+                        <div class='doc-index'>Document {doc_idx+1}</div>
+                        <div class='doc-content'>{doc_text}</div>
+                    </li>
+                    """
+            
+            html += "</ol></div>"
+            
+            # Add CSS for the preview
+            html += """
+            <style>
+                .ranking-preview {
+                    margin-top: 20px;
+                    padding: 10px;
+                    border: 1px solid #e0e0e0;
+                    border-radius: 5px;
+                    background-color: #f8f9fa;
+                }
+                
+                .ranked-docs {
+                    list-style-type: none;
+                    padding: 0;
+                }
+                
+                .ranked-doc {
+                    display: flex;
+                    align-items: center;
+                    padding: 10px;
+                    margin-bottom: 5px;
+                    border: 1px solid #ddd;
+                    border-radius: 5px;
+                    background-color: white;
+                }
+                
+                .rank-badge {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 50%;
+                    background-color: #2c7be5;
+                    color: white;
+                    font-weight: bold;
+                    margin-right: 10px;
+                }
+                
+                .doc-index {
+                    font-weight: bold;
+                    width: 120px;
+                }
+                
+                .doc-content {
+                    flex-grow: 1;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            </style>
+            """
+            
+            return html
+        
+        # Add ranking preview
+        ranking_preview = gr.HTML("<p><i>No rankings assigned yet. Assign ranks to see a preview.</i></p>")
+        
+        # Update the ranking preview whenever a ranking changes
+        for ranking in ranking_inputs:
+            ranking.change(
+                fn=generate_ranking_preview,
+                inputs=ranking_inputs,
+                outputs=[ranking_preview]
+            )
+            
+        # Show preview section
+        with gr.Accordion("📊 Ranking Preview", open=True):
+            ranking_preview
     
     return demo
 
@@ -400,6 +768,45 @@ def create_main_app():
         task_container = gr.HTML()
         loaded_task_info = gr.JSON(label="Loaded Task Information", visible=False)
         
+        # CSS for consistent styling throughout the app
+        gr.HTML("""
+        <style>
+            /* Main App Styling */
+            .tab-content {
+                padding: 15px !important;
+            }
+            
+            .btn-primary {
+                background-color: #2c7be5 !important;
+            }
+            
+            .btn-secondary {
+                background-color: #6c757d !important;
+            }
+            
+            /* Status messages */
+            .status-message {
+                font-weight: bold !important;
+            }
+            
+            /* Box styling */
+            .content-box {
+                border: 1px solid #e0e0e0;
+                border-radius: 5px;
+                padding: 15px;
+                margin-bottom: 15px;
+                background-color: #f8f9fa;
+            }
+            
+            /* Section headers */
+            .section-header {
+                border-bottom: 2px solid #2c7be5;
+                padding-bottom: 5px;
+                margin-bottom: 15px;
+            }
+        </style>
+        """)
+        
         tabs = gr.Tabs()
         
         with tabs:
@@ -408,7 +815,7 @@ def create_main_app():
                 ## MTEB Human Evaluation Interface
                 
                 This interface allows you to evaluate the relevance of documents for reranking tasks.
-                """)
+                """, elem_classes=["section-header"])
                 
                 # Function to get the most recent task file
                 def get_latest_task_file():
@@ -447,76 +854,80 @@ def create_main_app():
                 # Load the task file
                 task_file = get_latest_task_file()
                 
-                if task_file:
-                    try:
-                        with open(task_file, "r") as f:
-                            task_data = json.load(f)
-                        
-                        # Show which task is currently loaded
-                        gr.Markdown(f"**Current Task: {task_data['task_name']}** ({len(task_data['samples'])} samples)")
-                        
-                        # Display the interface
-                        demo = create_reranking_interface(task_data)
-                        task_container.update(value=f"<p>Task loaded: {task_file}</p>")
-                    except Exception as e:
-                        gr.Markdown(f"**Error loading task: {str(e)}**")
+                with gr.Box(elem_classes=["content-box"]):
+                    if task_file:
+                        try:
+                            with open(task_file, "r") as f:
+                                task_data = json.load(f)
+                            
+                            # Show which task is currently loaded
+                            gr.Markdown(f"**Current Task: {task_data['task_name']}** ({len(task_data['samples'])} samples)")
+                            
+                            # Display the interface
+                            demo = create_reranking_interface(task_data)
+                            task_container.update(value=f"<p>Task loaded: {task_file}</p>")
+                        except Exception as e:
+                            gr.Markdown(f"**Error loading task: {str(e)}**", elem_classes=["status-message"])
+                            gr.Markdown("Please upload a valid task file in the 'Upload & Evaluate' tab.")
+                    else:
+                        gr.Markdown("**No task file found**", elem_classes=["status-message"])
                         gr.Markdown("Please upload a valid task file in the 'Upload & Evaluate' tab.")
-                else:
-                    gr.Markdown("**No task file found**")
-                    gr.Markdown("Please upload a valid task file in the 'Upload & Evaluate' tab.")
             
             with gr.TabItem("Upload & Evaluate"):
                 gr.Markdown("""
                 ## Upload Your Own Task File
                 
                 If you have a prepared task file, you can upload it here to create an evaluation interface.
-                """)
+                """, elem_classes=["section-header"])
                 
                 with gr.Row():
                     with gr.Column(scale=1):
-                        file_input = gr.File(label="Upload a task file (JSON)")
-                        load_btn = gr.Button("Load Task")
-                        message = gr.Textbox(label="Status", interactive=False)
+                        with gr.Box(elem_classes=["content-box"]):
+                            file_input = gr.File(label="Upload a task file (JSON)")
+                            load_btn = gr.Button("Load Task", variant="primary")
+                            message = gr.Textbox(label="Status", interactive=False, elem_classes=["status-message"])
                         
                         # Add task list for previously uploaded tasks
-                        gr.Markdown("### Previous Uploads")
-                        
-                        # Function to list existing task files in the tasks directory
-                        def list_task_files():
-                            os.makedirs("uploaded_tasks", exist_ok=True)
-                            tasks = [f for f in os.listdir("uploaded_tasks") if f.endswith(".json")]
-                            if not tasks:
-                                return "No task files uploaded yet."
-                            return "\n".join([f"- {t}" for t in tasks])
-                        
-                        task_list = gr.Markdown(list_task_files())
-                        refresh_btn = gr.Button("Refresh List")
+                        with gr.Box(elem_classes=["content-box"]):
+                            gr.Markdown("### Previous Uploads", elem_classes=["section-header"])
+                            
+                            # Function to list existing task files in the tasks directory
+                            def list_task_files():
+                                os.makedirs("uploaded_tasks", exist_ok=True)
+                                tasks = [f for f in os.listdir("uploaded_tasks") if f.endswith(".json")]
+                                if not tasks:
+                                    return "No task files uploaded yet."
+                                return "\n".join([f"- {t}" for t in tasks])
+                            
+                            task_list = gr.Markdown(list_task_files())
+                            refresh_btn = gr.Button("Refresh List")
                         
                         # Add results management section
-                        gr.Markdown("### Results Management")
-                        
-                        # Function to list existing result files
-                        def list_result_files():
-                            results = [f for f in os.listdir(".") if f.endswith("_human_results.json")]
-                            if not results:
-                                return "No result files available yet."
+                        with gr.Box(elem_classes=["content-box"]):
+                            gr.Markdown("### Results Management", elem_classes=["section-header"])
                             
-                            result_links = []
-                            for r in results:
-                                # Calculate completion stats
-                                try:
-                                    with open(r, "r") as f:
-                                        result_data = json.load(f)
-                                    annotation_count = len(result_data.get("annotations", []))
-                                    task_name = result_data.get("task_name", "Unknown")
-                                    result_links.append(f"- {r} ({annotation_count} annotations for {task_name})")
-                                except:
-                                    result_links.append(f"- {r}")
+                            # Function to list existing result files
+                            def list_result_files():
+                                results = [f for f in os.listdir(".") if f.endswith("_human_results.json")]
+                                if not results:
+                                    return "No result files available yet."
+                                
+                                result_links = []
+                                for r in results:
+                                    # Calculate completion stats
+                                    try:
+                                        with open(r, "r") as f:
+                                            result_data = json.load(f)
+                                        annotation_count = len(result_data.get("annotations", []))
+                                        task_name = result_data.get("task_name", "Unknown")
+                                        result_links.append(f"- {r} ({annotation_count} annotations for {task_name})")
+                                    except:
+                                        result_links.append(f"- {r}")
+                                
+                                return "\n".join(result_links)
                             
-                            return "\n".join(result_links)
-                        
-                        results_list = gr.Markdown(list_result_files())
-                        download_results_btn = gr.Button("Download Results")
+                            results_list = gr.Markdown(list_result_files())
+                            download_results_btn = gr.Button("Download Results")
                 
                 # Handle file upload and storage
                 def handle_upload(file):
@@ -540,8 +951,8 @@ def create_main_app():
                         with open(task_filename, "w") as f:
                             json.dump(task_data, f, indent=2)
                         
-                        return f"Task '{task_data['task_name']}' uploaded successfully with {len(task_data['samples'])} samples. Please refresh the app and use the Demo tab to evaluate it.", list_task_files(), f"""
-                        <div style="padding: 20px; background-color: #f0f0f0; border-radius: 10px;">
+                        return f"✅ Task '{task_data['task_name']}' uploaded successfully with {len(task_data['samples'])} samples. Please refresh the app and use the Demo tab to evaluate it.", list_task_files(), f"""
+                        <div class="content-box">
                             <h3>Task uploaded successfully!</h3>
                             <p>Task Name: {task_data['task_name']}</p>
                             <p>Samples: {len(task_data['samples'])}</p>
@@ -555,7 +966,7 @@ def create_main_app():
                         </div>
                         """
                     except Exception as e:
-                        return f"Error processing task file: {str(e)}", task_list.value, ""
+                        return f"⚠️ Error processing task file: {str(e)}", task_list.value, ""
                 
                 # Function to prepare results for download
                 def prepare_results_for_download():
@@ -596,7 +1007,7 @@ def create_main_app():
                 ## Manage Evaluation Results
                 
                 View, download, and analyze your evaluation results.
-                """)
+                """, elem_classes=["section-header"])
                 
                 # Function to load and display result stats
                 def get_result_stats():
@@ -642,14 +1053,17 @@ def create_main_app():
                     
                     return "\n\n".join(stats)
                 
-                result_stats = gr.Markdown(get_result_stats())
-                refresh_results_btn = gr.Button("Refresh Results")
+                with gr.Box(elem_classes=["content-box"]):
+                    result_stats = gr.Markdown(get_result_stats())
+                    refresh_results_btn = gr.Button("Refresh Results", variant="secondary")
                 
                 # Add download options
-                with gr.Row():
-                    download_all_btn = gr.Button("Download All Results (ZIP)")
-                    result_select = gr.Dropdown(choices=[f for f in os.listdir(".") if f.endswith("_human_results.json")], label="Select Result to Download")
-                    download_selected_btn = gr.Button("Download Selected")
+                with gr.Box(elem_classes=["content-box"]):
+                    gr.Markdown("### Download Options", elem_classes=["section-header"])
+                    with gr.Row():
+                        download_all_btn = gr.Button("Download All Results (ZIP)", variant="primary")
+                        result_select = gr.Dropdown(choices=[f for f in os.listdir(".") if f.endswith("_human_results.json")], label="Select Result to Download")
+                        download_selected_btn = gr.Button("Download Selected", variant="secondary")
                 
                 # Function to prepare all results for download as ZIP
                 def prepare_all_results():