Update app.py

app.py

@@ -11,151 +11,89 @@ def create_reranking_interface(task_data):
     
     # Define helper functions before UI elements are created
     def generate_sortable_html(candidates, existing_ranks=None):
-        """Generate the HTML for simple ranking with numbered buttons."""
+        """Generate HTML with simple dropdowns for ranking."""
+        # Use existing ranks if available
+        ranks = [0] * len(candidates)
         if existing_ranks and len(existing_ranks) == len(candidates):
-            # Use existing ranks to determine the current order
-            order = sorted(range(len(candidates)), key=lambda i: existing_ranks[i])
-        else:
-            # Default to original order
-            order = list(range(len(candidates)))
-            
-        # Create an array to hold the documents in their current order
-        ordered_docs = []
-        for idx in order:
-            if idx < len(candidates):
-                ordered_docs.append({"doc_id": idx, "text": candidates[idx]})
-                
-        # Generate the HTML for the ranking interface
-        html = """
-        <div class="ranking-container">
-            <div class="docs-container">
+            ranks = existing_ranks.copy()
+        
+        # Generate a unique ID for this set of dropdowns to avoid conflicts
+        import random
+        import time
+        dropdown_group_id = f"rank_group_{int(time.time())}_{random.randint(1000, 9999)}"
+        
+        html = f"""
+        <div class="ranking-simple">
+            <input type="hidden" id="rank-order-state" value="">
+            <div class="rank-instructions">Select a rank (1-{len(candidates)}) for each document.</div>
         """
         
-        # Add each document with rank selection buttons
-        for i, doc in enumerate(ordered_docs):
+        # Add each document with a dropdown selector
+        for i, doc in enumerate(candidates):
             import html as html_escaper
-            escaped_doc = html_escaper.escape(doc["text"])
-            current_rank = i + 1
+            escaped_doc = html_escaper.escape(doc)
+            current_rank = ranks[i] if ranks[i] > 0 else i + 1
             
             html += f"""
-            <div class="doc-item" data-doc-id="{doc['doc_id']}">
+            <div class="rank-item" data-doc-id="{i}">
                 <div class="rank-selector">
-                    <div class="rank-number">{current_rank}</div>
-                    <div class="rank-buttons">
+                    <select class="rank-dropdown" data-doc-id="{i}" onchange="updateRankOrder('{dropdown_group_id}')">
             """
             
-            # Add numbered rank buttons
-            for rank_btn in range(1, len(candidates) + 1):
-                selected = "selected" if rank_btn == current_rank else ""
-                html += f'<button class="rank-btn {selected}" data-rank="{rank_btn}" onclick="setRank({doc["doc_id"]}, {rank_btn})">{rank_btn}</button>'
-                
-            html += """
-                    </div>
-                </div>
-                <div class="doc-content">
-                    """ + escaped_doc + """
+            # Add options 1 through N
+            for rank in range(1, len(candidates) + 1):
+                selected = "selected" if rank == current_rank else ""
+                html += f'<option value="{rank}" {selected}>{rank}</option>'
+            
+            html += f"""
+                    </select>
                 </div>
+                <div class="doc-content">{escaped_doc}</div>
             </div>
             """
-            
-        html += """
-            </div>
-        </div>
         
+        # Add the JavaScript for handling rank updates
+        html += f"""
         <script>
-        function setRank(docId, newRank) {
-            // Convert to numbers to ensure proper comparison
-            docId = parseInt(docId);
-            newRank = parseInt(newRank);
-            
-            // Get all doc items
-            const docItems = document.querySelectorAll('.doc-item');
-            
-            // First, find the document that currently has the requested rank
-            let targetDocItem = null;
-            let currentDocRank = 0;
-            
-            docItems.forEach((item, index) => {
-                const itemDocId = parseInt(item.getAttribute('data-doc-id'));
-                
-                // Find the current rank of the document we want to change
-                if (itemDocId === docId) {
-                    targetDocItem = item;
-                    currentDocRank = index + 1;
-                }
-                
-                // Update the selected button for this doc
-                const buttons = item.querySelectorAll('.rank-btn');
-                buttons.forEach(btn => {
-                    const btnRank = parseInt(btn.getAttribute('data-rank'));
-                    if (btnRank === newRank && itemDocId === docId) {
-                        btn.classList.add('selected');
-                    } else if (btnRank !== newRank && itemDocId === docId) {
-                        btn.classList.remove('selected');
-                    }
-                });
-            });
-            
-            // If we're not changing the rank, do nothing more
-            if (currentDocRank === newRank) {
-                updateOrderState();
-                return;
-            }
-            
-            // Get the container and convert nodelist to array so we can manipulate it
-            const container = document.querySelector('.docs-container');
-            const itemsArray = Array.from(docItems);
-            
-            // Remove the target doc from its current position
-            itemsArray.splice(currentDocRank - 1, 1);
-            
-            // Insert it at the new rank position
-            itemsArray.splice(newRank - 1, 0, targetDocItem);
-            
-            // Clear the container
-            while (container.firstChild) {
-                container.removeChild(container.firstChild);
-            }
-            
-            // Add items back in their new order
-            itemsArray.forEach((item, index) => {
-                // Update the displayed rank number
-                const rankNumber = item.querySelector('.rank-number');
-                rankNumber.textContent = index + 1;
+        // Function to update the hidden state when dropdowns change
+        function updateRankOrder(groupId) {{
+            const items = document.querySelectorAll('.rank-item');
+            const selectedRanks = new Map();
+            const docOrder = [];
+            
+            // First collect all selected ranks
+            items.forEach(item => {{
+                const docId = parseInt(item.getAttribute('data-doc-id'));
+                const dropdown = item.querySelector('.rank-dropdown');
+                const rank = parseInt(dropdown.value);
+                selectedRanks.set(docId, rank);
+            }});
+            
+            // Sort documents by their selected rank
+            const sortedDocs = Array.from(selectedRanks.entries())
+                .sort((a, b) => a[1] - b[1])
+                .map(entry => entry[0]);
                 
-                // Add back to container
-                container.appendChild(item);
-            });
-            
-            // Update the hidden state for submission
-            updateOrderState();
-        }
-        
-        function updateOrderState() {
-            // Get the current order of documents
-            const docItems = document.querySelectorAll('.doc-item');
-            const order = Array.from(docItems).map(item => 
-                parseInt(item.getAttribute('data-doc-id')));
-                
-            // Find the input field and update its value
+            // Update the order state
             const orderInput = document.querySelector('#current-order textarea');
-            if (orderInput) {
-                orderInput.value = JSON.stringify(order);
-                
-                // Trigger input event to notify Gradio
-                const event = new Event('input', { bubbles: true });
+            if (orderInput) {{
+                orderInput.value = JSON.stringify(sortedDocs);
+                const event = new Event('input', {{ bubbles: true }});
                 orderInput.dispatchEvent(event);
-            }
-        }
+            }}
+        }}
         
-        // Initialize the order state when the page loads
-        window.addEventListener('DOMContentLoaded', function() {
-            updateOrderState();
-        });
+        // Initialize on page load
+        document.addEventListener('DOMContentLoaded', function() {{
+            updateRankOrder('{dropdown_group_id}');
+        }});
         
         // Backup initialization for iframe environments
-        setTimeout(updateOrderState, 1000);
+        setTimeout(function() {{
+            updateRankOrder('{dropdown_group_id}');
+        }}, 1000);
         </script>
+        </div>
         """
         
         return html
@@ -269,94 +207,50 @@ def create_reranking_interface(task_data):
         
         js_code = """
         <style>
-        /* Simple and reliable ranking interface styles */
-        .ranking-container {
+        /* Simple dropdown ranking styles */
+        .ranking-simple {
             width: 100%;
             max-width: 100%;
             margin: 0 auto;
         }
 
-        .docs-container {
-            display: flex;
-            flex-direction: column;
-            gap: 15px;
+        .rank-instructions {
+            margin-bottom: 15px;
+            padding: 10px;
+            background-color: #f0f9ff;
+            border-left: 4px solid #3b82f6;
+            border-radius: 4px;
         }
 
-        .doc-item {
+        .rank-item {
             display: flex;
-            padding: 15px;
+            align-items: flex-start;
+            padding: 12px;
+            margin-bottom: 10px;
             background: white;
             border: 1px solid #e0e0e0;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            border-radius: 6px;
         }
 
         .rank-selector {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
             margin-right: 15px;
-            min-width: 40px;
-        }
-
-        .rank-number {
-            font-size: 18px;
-            font-weight: bold;
-            width: 30px;
-            height: 30px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: #3b82f6;
-            color: white;
-            border-radius: 50%;
-            margin-bottom: 8px;
-        }
-
-        .rank-buttons {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 3px;
-            max-width: 120px;
-            justify-content: center;
+            min-width: 70px;
         }
 
-        .rank-btn {
-            width: 26px;
-            height: 26px;
-            padding: 0;
-            font-size: 12px;
+        .rank-dropdown {
+            width: 60px;
+            padding: 6px;
             border: 1px solid #d1d5db;
-            background: #f9fafb;
             border-radius: 4px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .rank-btn:hover {
-            background: #e5e7eb;
-        }
-
-        .rank-btn.selected {
-            background: #3b82f6;
-            color: white;
-            border-color: #2563eb;
+            background-color: white;
+            font-size: 14px;
         }
 
         .doc-content {
             flex: 1;
-            padding: 5px;
             line-height: 1.5;
+            padding: 5px 0;
         }
-
-        /* Color coding the rank numbers by position */
-        .doc-item:nth-child(1) .rank-number { background-color: #10b981; /* green */ }
-        .doc-item:nth-child(2) .rank-number { background-color: #3b82f6; /* blue */ }
-        .doc-item:nth-child(3) .rank-number { background-color: #f59e0b; /* yellow */ }
-        .doc-item:nth-child(4) .rank-number { background-color: #ef4444; /* red */ }
-        .doc-item:nth-child(5) .rank-number { background-color: #8b5cf6; /* purple */ }
         </style>
         """
         gr.HTML(js_code)
@@ -627,7 +521,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                     return filename
                 return None
             
-            # Update the dropdown when refreshing results
+            # Update dropdown when refreshing results
             def update_result_dropdown():
                 return gr.Dropdown.update(choices=[f for f in os.listdir(".") if f.endswith("_human_results.json")])