Update app.py

app.py

@@ -100,10 +100,18 @@ def create_reranking_interface(task_data):
             1. Read the query at the top
             2. Review each document carefully
             3. Assign a rank to each document (1 = most relevant, higher numbers = less relevant)
+               - Use the rank buttons for quick ranking
+               - Or use the dropdown menus for more options
             4. Each document must have a unique rank
-            5. Click "Submit Rankings" when you're done with the current query
+            5. Click "Submit Rankings" to save rankings for the current query
             6. Use "Previous" and "Next" to navigate between queries
-            7. Your rankings are automatically saved when you submit or navigate
+            7. Your rankings are automatically saved when you submit or navigate (if auto-save is enabled)
+            8. Click "Save All Results" periodically to ensure all your work is saved to disk
+            
+            **Button Explanations:**
+            - **Submit Rankings**: Saves rankings for the CURRENT query only
+            - **Save All Results**: Saves ALL submitted rankings to a file on disk
+            - **Auto-save**: When enabled, automatically saves rankings when navigating between queries
             """.format(instructions=task_data.get("instructions", "Rank documents by their relevance to the query.")))
         
         # Hidden state variables
@@ -168,6 +176,15 @@ def create_reranking_interface(task_data):
                             )
                             doc_containers.append(doc_box)
                         
+                        # Add rank buttons for quick ranking
+                        with gr.Column(scale=2):
+                            # Create row of quick buttons for ranks 1-5
+                            rank_buttons = []
+                            with gr.Row():
+                                for rank in range(1, min(6, len(samples[0]["candidates"])+1)):
+                                    btn = gr.Button(f"{rank}", size="sm")
+                                    rank_buttons.append((btn, rank))
+                        
                         with gr.Column(scale=2):
                             # Dropdown for ranking
                             rank_input = gr.Dropdown(
@@ -198,27 +215,38 @@ def create_reranking_interface(task_data):
         gr.HTML("""
         <style>
             .query-text textarea {
-                font-size: 16px !important;
+                font-size: 18px !important;
                 font-weight: bold !important;
                 background-color: #f8f9fa !important;
                 border-left: 4px solid #2c7be5 !important;
                 padding-left: 10px !important;
+                line-height: 1.6 !important;
             }
             
             .document-row {
                 border-bottom: 1px solid #e0e0e0;
-                padding: 10px 0;
-                margin-bottom: 5px !important;
+                padding: 12px 0;
+                margin-bottom: 8px !important;
             }
             
             .document-text textarea {
-                font-size: 14px !important;
-                line-height: 1.5 !important;
+                font-size: 16px !important;
+                line-height: 1.6 !important;
+                padding: 10px !important;
             }
             
             .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;
             }
             
             .tool-button button {
@@ -253,20 +281,6 @@ def create_reranking_interface(task_data):
                 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>
         """)
         
@@ -637,126 +651,25 @@ def create_reranking_interface(task_data):
             
             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] + "..."
+        # Connect rank buttons to their corresponding documents
+        for i, doc_rank_input in enumerate(ranking_inputs):
+            # Get the buttons for this row
+            row_buttons = rank_buttons[i*5:(i+1)*5] if i*5 < len(rank_buttons) else []
+            for btn, rank in row_buttons:
+                # Create a function to set this specific rank
+                def set_rank(rank_value=rank, doc_index=i):
+                    def set_this_rank():
+                        result = [""] * len(ranking_inputs)
+                        result[doc_index] = str(rank_value)
+                        return result
+                    return set_this_rank
                     
-                    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
+                # Connect button to ranking input
+                btn.click(
+                    fn=set_rank(),
+                    inputs=None,
+                    outputs=[doc_rank_input]
+                )
     
     return demo