Update app.py

app.py

@@ -12,17 +12,21 @@ def create_reranking_interface(task_data):
     def save_ranking(rankings, sample_id):
         """Save the current set of rankings."""
         try:
+            # Convert to integers with error handling
+            processed_rankings = []
+            for r in rankings:
+                if r is None or r == "":
+                    processed_rankings.append(None)
+                else:
+                    try:
+                        processed_rankings.append(int(r))
+                    except ValueError:
+                        return "⚠️ Invalid ranking value. Please use only numbers.", f"Progress: {sum(completed_samples.values())}/{len(samples)}"
+            
             # Check if all documents have rankings
-            all_ranked = all(r is not None and r != "" for r in rankings)
-            if not all_ranked:
+            if None in processed_rankings:
                 return "⚠️ Please assign a rank to all documents before submitting", f"Progress: {sum(completed_samples.values())}/{len(samples)}"
             
-            # Convert rankings to integers with better error handling
-            try:
-                processed_rankings = [int(r) for r in rankings]
-            except ValueError:
-                return "⚠️ Invalid ranking value. Please use only numbers.", f"Progress: {sum(completed_samples.values())}/{len(samples)}"
-            
             # Check for duplicate rankings
             if len(set(processed_rankings)) != len(processed_rankings):
                 return "⚠️ Each document must have a unique rank. Please review your rankings.", f"Progress: {sum(completed_samples.values())}/{len(samples)}"
@@ -86,342 +90,40 @@ def create_reranking_interface(task_data):
             
             gr.Markdown("## Documents to Rank:")
             
-            # Create document displays and ranking dropdowns in synchronized pairs
+            # Create document displays and ranking inputs in synchronized pairs
             doc_containers = []
-            ranking_dropdowns = []
+            ranking_inputs = []
             
             with gr.Column():
                 for i, doc in enumerate(samples[0]["candidates"]):
-                    with gr.Row():
+                    with gr.Box():
+                        gr.Markdown(f"### Document {i+1}")
                         doc_box = gr.Textbox(
                             value=doc, 
-                            label=f"Document {i+1}",
+                            label=None,
                             interactive=False,
-                            elem_classes="doc-box"
+                            lines=4
                         )
-                        dropdown = gr.Dropdown(
-                            choices=[str(j) for j in range(1, len(samples[0]["candidates"])+1)],
-                            label=f"Rank",
+                        doc_containers.append(doc_box)
+                        
+                        rank_input = gr.Number(
                             value=None,
-                            elem_classes="ranking-dropdown"
+                            label=f"Rank (1 = highest, {len(samples[0]['candidates'])} = lowest)",
+                            minimum=1,
+                            maximum=len(samples[0]['candidates']),
+                            step=1
                         )
-                        # Add Quick Rank buttons for fast selection
-                        with gr.Column(min_width=120):
-                            gr.Markdown(f"Quick Rank", elem_classes="quick-rank-label")
-                            with gr.Row():
-                                # Add first 5 rank buttons (or fewer if there are fewer candidates)
-                                num_buttons = min(5, len(samples[0]["candidates"]))
-                                for r in range(1, num_buttons + 1):
-                                    button = gr.Button(f"{r}", size="sm", elem_classes=f"quick-rank-btn quick-rank-btn-{i}-{r}")
-                                    # Use JavaScript to set the dropdown value when clicked
-                                    button.click(
-                                        None,
-                                        [],
-                                        [],
-                                        _js=f"() => {{ document.querySelectorAll('.ranking-dropdown')[{i}].value = '{r}'; return []; }}"
-                                    )
-                        
-                        doc_containers.append(doc_box)
-                        ranking_dropdowns.append(dropdown)
+                        ranking_inputs.append(rank_input)
             
-            # Add keyboard shortcuts explanation
-            with gr.Accordion("Keyboard Shortcuts", open=False):
+            # Add simple instructions for ranking
+            with gr.Accordion("Ranking Instructions", open=True):
                 gr.Markdown("""
-                ### Keyboard Shortcuts
-                - When a document text box is focused:
-                  - Press number keys (1-9) to assign rankings quickly
-                - Navigation:
-                  - Press 'n' to go to the next query
-                  - Press 'p' to go to the previous query
-                  - Press 's' to submit the current rankings
-                """)
-            
-            # Add JavaScript for keyboard shortcuts
-            gr.HTML("""
-            <script>
-            document.addEventListener('DOMContentLoaded', function() {
-                // Wait for Gradio elements to be fully loaded
-                setTimeout(() => {
-                    // Get all document textboxes
-                    const docBoxes = document.querySelectorAll('.doc-box');
-                    const dropdowns = document.querySelectorAll('.ranking-dropdown');
-                    
-                    // Add event listeners to document boxes
-                    docBoxes.forEach((box, index) => {
-                        box.addEventListener('click', function() {
-                            // Mark this box as active for keyboard shortcuts
-                            docBoxes.forEach(b => b.classList.remove('active-doc'));
-                            box.classList.add('active-doc');
-                        });
-                    });
-                    
-                    // Add event listeners to dropdowns for color coding
-                    dropdowns.forEach((dropdown, index) => {
-                        dropdown.addEventListener('change', function() {
-                            updateDropdownColor(dropdown, docBoxes[index]);
-                        });
-                    });
-                    
-                    // Function to update color based on rank
-                    function updateDropdownColor(dropdown, docBox) {
-                        const value = dropdown.value;
-                        if (!value) return;
-                        
-                        // Remove existing color classes
-                        dropdown.classList.remove('rank-1', 'rank-2', 'rank-3', 'rank-4', 'rank-5', 'rank-high');
-                        
-                        // Add appropriate color class
-                        if (value === '1') dropdown.classList.add('rank-1');
-                        else if (value === '2') dropdown.classList.add('rank-2');
-                        else if (value === '3') dropdown.classList.add('rank-3');
-                        else if (value === '4') dropdown.classList.add('rank-4');
-                        else if (value === '5') dropdown.classList.add('rank-5');
-                        else dropdown.classList.add('rank-high');
-                        
-                        // Add highlighting to document box
-                        docBox.classList.add('ranked-doc');
-                    }
-                    
-                    // Add global keyboard listener
-                    document.addEventListener('keydown', function(e) {
-                        // Number keys 1-9 for ranking
-                        if (e.key >= '1' && e.key <= '9') {
-                            const activeDoc = document.querySelector('.active-doc');
-                            if (activeDoc) {
-                                const index = Array.from(docBoxes).indexOf(activeDoc);
-                                const dropdown = document.querySelectorAll('.ranking-dropdown')[index];
-                                if (dropdown) {
-                                    dropdown.value = e.key;
-                                    dropdown.dispatchEvent(new Event('change'));
-                                    updateDropdownColor(dropdown, activeDoc);
-                                }
-                            }
-                        }
-                        
-                        // Navigation shortcuts
-                        if (e.key === 'n') {
-                            // Next query
-                            document.querySelector('#next-btn').click();
-                        } else if (e.key === 'p') {
-                            // Previous query
-                            document.querySelector('#prev-btn').click();
-                        } else if (e.key === 's') {
-                            // Submit rankings
-                            document.querySelector('#submit-btn').click();
-                        }
-                    });
-                    
-                    // Add some CSS for active document
-                    const style = document.createElement('style');
-                    style.textContent = `
-                        .active-doc {
-                            border-left: 3px solid #3B82F6 !important;
-                            background-color: rgba(59, 130, 246, 0.05) !important;
-                        }
-                        .ranked-doc {
-                            border-bottom: 2px solid #4ADE80 !important;
-                        }
-                        .rank-1 {
-                            background-color: rgba(74, 222, 128, 0.2) !important;
-                            font-weight: bold !important;
-                        }
-                        .rank-2 {
-                            background-color: rgba(74, 222, 128, 0.15) !important;
-                        }
-                        .rank-3 {
-                            background-color: rgba(251, 191, 36, 0.15) !important;
-                        }
-                        .rank-4 {
-                            background-color: rgba(251, 191, 36, 0.1) !important;
-                        }
-                        .rank-5 {
-                            background-color: rgba(239, 68, 68, 0.1) !important;
-                        }
-                        .rank-high {
-                            background-color: rgba(239, 68, 68, 0.05) !important;
-                        }
-                        .quick-rank-label {
-                            margin-bottom: 0 !important;
-                            font-size: 0.8rem !important;
-                            opacity: 0.8;
-                        }
-                        .quick-rank-btn {
-                            min-width: 20px !important;
-                            height: 24px !important;
-                            line-height: 1 !important;
-                            padding: 2px 6px !important;
-                        }
-                    `;
-                    document.head.appendChild(style);
-                }, 1000);
-            });
-            </script>
-            """)
-            
-            # Add visual ranking mode option
-            with gr.Row():
-                visual_mode_btn = gr.Button("Toggle Visual Ranking Mode", size="sm")
-                reset_rankings_btn = gr.Button("Reset Rankings", size="sm", variant="secondary")
-            
-            # Visual ranking display
-            with gr.Column(visible=False) as visual_ranking_container:
-                gr.Markdown("## Current Rankings (Most to Least Relevant)")
-                ranked_display = gr.HTML("No rankings yet")
-            
-            # Function to toggle visual ranking mode
-            def toggle_visual_mode(visible):
-                return not visible
-            
-            # Function to update visual ranking display
-            def update_visual_ranking(*rankings):
-                # Convert to integers with error handling
-                clean_rankings = []
-                for r in rankings:
-                    try:
-                        if r and r.strip():
-                            clean_rankings.append(int(r))
-                        else:
-                            clean_rankings.append(None)
-                    except ValueError:
-                        clean_rankings.append(None)
-                
-                # Check if any rankings exist
-                if not any(r is not None for r in clean_rankings):
-                    return "<p>No rankings assigned yet.</p>"
-                
-                # Create sorted order
-                ranked_indices = []
-                for rank in range(1, len(clean_rankings) + 1):
-                    try:
-                        idx = clean_rankings.index(rank)
-                        ranked_indices.append(idx)
-                    except ValueError:
-                        pass
-                
-                # Build HTML
-                html = "<div class='visual-ranking'>"
-                for i, idx in enumerate(ranked_indices):
-                    rank = i + 1
-                    doc_text = doc_containers[idx].value
-                    
-                    # Apply color classes based on rank
-                    rank_class = ""
-                    if rank == 1:
-                        rank_class = "visual-rank-1"
-                    elif rank == 2:
-                        rank_class = "visual-rank-2"
-                    elif rank == 3:
-                        rank_class = "visual-rank-3"
-                    elif rank <= 5:
-                        rank_class = "visual-rank-45"
-                    else:
-                        rank_class = "visual-rank-high"
-                    
-                    html += f"""
-                    <div class='visual-rank-item {rank_class}'>
-                        <div class='visual-rank-number'>{rank}</div>
-                        <div class='visual-rank-content'>{doc_text}</div>
-                    </div>
-                    """
-                
-                # Add unranked items if any
-                unranked_indices = [i for i, r in enumerate(clean_rankings) if r is None]
-                if unranked_indices:
-                    html += "<h3>Unranked Documents</h3>"
-                    for idx in unranked_indices:
-                        doc_text = doc_containers[idx].value
-                        html += f"""
-                        <div class='visual-rank-item visual-rank-unranked'>
-                            <div class='visual-rank-number'>?</div>
-                            <div class='visual-rank-content'>{doc_text}</div>
-                        </div>
-                        """
-                
-                html += "</div>"
-                
-                # Add CSS
-                html += """
-                <style>
-                .visual-ranking {
-                    margin-top: 15px;
-                }
-                .visual-rank-item {
-                    display: flex;
-                    margin-bottom: 15px;
-                    padding: 10px;
-                    border-radius: 8px;
-                }
-                .visual-rank-number {
-                    font-size: 18px;
-                    font-weight: bold;
-                    margin-right: 10px;
-                    min-width: 30px;
-                    height: 30px;
-                    border-radius: 15px;
-                    background-color: #e5e7eb;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                }
-                .visual-rank-content {
-                    flex: 1;
-                }
-                .visual-rank-1 {
-                    background-color: rgba(74, 222, 128, 0.2);
-                    border-left: 4px solid #4ADE80;
-                }
-                .visual-rank-2 {
-                    background-color: rgba(74, 222, 128, 0.15);
-                    border-left: 3px solid #4ADE80;
-                }
-                .visual-rank-3 {
-                    background-color: rgba(251, 191, 36, 0.15);
-                    border-left: 3px solid #FBBF24;
-                }
-                .visual-rank-45 {
-                    background-color: rgba(251, 191, 36, 0.1);
-                    border-left: 2px solid #FBBF24;
-                }
-                .visual-rank-high {
-                    background-color: rgba(239, 68, 68, 0.05);
-                    border-left: 2px solid #EF4444;
-                }
-                .visual-rank-unranked {
-                    background-color: #f9fafb;
-                    border: 1px dashed #d1d5db;
-                }
-                .visual-rank-unranked .visual-rank-number {
-                    background-color: #d1d5db;
-                }
-                </style>
-                """
-                
-                return html
-            
-            # Function to reset all rankings
-            def reset_rankings():
-                return ["" for _ in ranking_dropdowns]
-            
-            # Connect events
-            visual_mode_btn.click(
-                toggle_visual_mode,
-                inputs=[visual_ranking_container],
-                outputs=[visual_ranking_container]
-            )
-            
-            # Update visual ranking when any dropdown changes
-            for dropdown in ranking_dropdowns:
-                dropdown.change(
-                    update_visual_ranking,
-                    inputs=ranking_dropdowns,
-                    outputs=[ranked_display]
-                )
-            
-            # Reset rankings button
-            reset_rankings_btn.click(
-                reset_rankings,
-                outputs=ranking_dropdowns
-            )
+                ### Ranking Documents:
+                - Enter a number from 1 to {max_rank} for each document
+                - 1 = most relevant document
+                - Higher numbers = less relevant documents
+                - Each document must have a unique rank
+                """.format(max_rank=len(samples[0]["candidates"])))
             
             with gr.Row():
                 prev_btn = gr.Button("← Previous Query", size="sm", elem_id="prev-btn")
@@ -434,7 +136,7 @@ def create_reranking_interface(task_data):
             """Load a specific sample into the interface."""
             sample = next((s for s in samples if s["id"] == sample_id), None)
             if not sample:
-                return [query_text.value] + [d.value for d in doc_containers] + [""] * len(ranking_dropdowns) + [current_sample_id.value, progress_text.value, status_box.value]
+                return [query_text.value] + [d.value for d in doc_containers] + [None] * len(ranking_inputs) + [current_sample_id.value, progress_text.value, status_box.value]
             
             # Update query
             new_query = sample["query"]
@@ -446,7 +148,7 @@ def create_reranking_interface(task_data):
                     new_docs.append(doc)
                     
             # Initialize rankings
-            new_rankings = [""] * len(ranking_dropdowns)
+            new_rankings = [None] * len(ranking_inputs)
             
             # Check if this sample has already been annotated
             existing_annotation = next((a for a in results["annotations"] if a["sample_id"] == sample_id), None)
@@ -454,7 +156,7 @@ def create_reranking_interface(task_data):
                 # Restore previous rankings
                 for i, rank in enumerate(existing_annotation["rankings"]):
                     if i < len(new_rankings) and rank is not None:
-                        new_rankings[i] = str(rank)
+                        new_rankings[i] = rank
             
             # Update progress
             current_idx = samples.index(sample)
@@ -497,22 +199,64 @@ def create_reranking_interface(task_data):
                 json.dump(results, f, indent=2)
             return f"✅ Results saved to {output_path} ({len(results['annotations'])} annotations)"
         
-        # Define a wrapper function that collects all the dropdown values into a list
-        def save_ranking_wrapper(*args):
-            # The last argument is the sample_id, all others are rankings
-            rankings = args[:-1]
-            sample_id = args[-1]
-            return save_ranking(rankings, sample_id)
+        # Resolve rank conflicts automatically
+        def resolve_rank_conflicts(*ranks):
+            ranks = list(ranks)
+            # Convert to integers with validation
+            int_ranks = []
+            for r in ranks:
+                try:
+                    r_int = int(r) if r is not None else None
+                    if r_int is not None and (r_int < 1 or r_int > len(ranks)):
+                        r_int = None
+                    int_ranks.append(r_int)
+                except:
+                    int_ranks.append(None)
+            
+            # Find duplicates
+            seen = set()
+            duplicates = set()
+            for i, r in enumerate(int_ranks):
+                if r is None:
+                    continue
+                if r in seen:
+                    duplicates.add(r)
+                seen.add(r)
+            
+            # Resolve duplicates by incrementing/shifting
+            for dup in sorted(duplicates):
+                indices = [i for i, r in enumerate(int_ranks) if r == dup]
+                # Keep the first occurrence, shift others
+                for idx in indices[1:]:
+                    # Find the next available rank
+                    next_rank = dup + 1
+                    while next_rank in int_ranks and next_rank <= len(ranks):
+                        next_rank += 1
+                    if next_rank <= len(ranks):
+                        int_ranks[idx] = next_rank
+                    else:
+                        # If no ranks available, find the first empty spot
+                        for j in range(1, len(ranks) + 1):
+                            if j not in int_ranks:
+                                int_ranks[idx] = j
+                                break
+            
+            # Convert back to original type
+            return int_ranks
+        
+        # Connect events
+        for i, rank_input in enumerate(ranking_inputs):
+            rank_input.change(
+                resolve_rank_conflicts,
+                inputs=ranking_inputs,
+                outputs=ranking_inputs
+            )
         
         # Connect events
         submit_btn.click(
-            save_ranking_wrapper,
-            inputs=ranking_dropdowns + [current_sample_id],
+            save_ranking,
+            inputs=ranking_inputs + [current_sample_id],
             outputs=[status_box, progress_text]
-        ).then(
-            update_visual_ranking,
-            inputs=ranking_dropdowns,
-            outputs=[ranked_display]
         )
         
         next_btn.click(
@@ -522,11 +266,7 @@ def create_reranking_interface(task_data):
         ).then(
             load_sample,
             inputs=[current_sample_id],
-            outputs=[query_text] + doc_containers + ranking_dropdowns + [current_sample_id, progress_text, status_box]
-        ).then(
-            update_visual_ranking,
-            inputs=ranking_dropdowns,
-            outputs=[ranked_display]
+            outputs=[query_text] + doc_containers + ranking_inputs + [current_sample_id, progress_text, status_box]
         )
         
         prev_btn.click(
@@ -536,11 +276,7 @@ def create_reranking_interface(task_data):
         ).then(
             load_sample,
             inputs=[current_sample_id],
-            outputs=[query_text] + doc_containers + ranking_dropdowns + [current_sample_id, progress_text, status_box]
-        ).then(
-            update_visual_ranking,
-            inputs=ranking_dropdowns,
-            outputs=[ranked_display]
+            outputs=[query_text] + doc_containers + ranking_inputs + [current_sample_id, progress_text, status_box]
         )
         
         save_btn.click(save_results, outputs=[status_box])
@@ -754,9 +490,11 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             
             # 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.Column():
+                    download_all_btn = gr.Button("Download All Results (ZIP)")
+                with gr.Column():
+                    result_select = gr.Dropdown(choices=[f for f in os.listdir(".") if f.endswith("_human_results.json")], label="Select Result to Download", value=None)
+                    download_selected_btn = gr.Button("Download Selected")
             
             # Add results visualization placeholder
             gr.Markdown("### Results Visualization")