Update app.py

app.py

@@ -52,7 +52,58 @@ def create_reranking_interface(task_data):
             # Return specific error message
             return f"Error: {str(e)}", f"Progress: {sum(completed_samples.values())}/{len(samples)}"
     
-    with gr.Blocks(theme=gr.themes.Soft()) as demo:
+    with gr.Blocks(theme=gr.themes.Soft(), css="""
+        .document-text {
+            font-size: 16px;
+            padding: 10px;
+            border-radius: 8px;
+            background-color: #f8f9fa;
+            border-left: 5px solid #4CAF50;
+        }
+        .query-box {
+            background-color: #e3f2fd;
+            padding: 16px;
+            border-radius: 8px;
+            border-left: 5px solid #2196F3;
+            font-size: 18px;
+            margin-bottom: 20px;
+        }
+        .progress-indicator {
+            font-weight: bold;
+            text-align: center;
+            padding: 12px;
+            background-color: #f1f8e9;
+            border-radius: 8px;
+            margin: 10px 0;
+        }
+        .status-box {
+            font-weight: bold;
+            text-align: center;
+        }
+        .ranking-box {
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 12px;
+            transition: all 0.3s;
+        }
+        .ranking-box:hover {
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        }
+        /* Add different colors for rank levels */
+        .rank-1, .rank-2, .rank-3 {
+            border-left: 5px solid #4CAF50; /* Green for top ranks */
+        }
+        .rank-4, .rank-5, .rank-6, .rank-7 {
+            border-left: 5px solid #FFC107; /* Yellow for mid ranks */
+        }
+        .rank-8, .rank-9, .rank-10 {
+            border-left: 5px solid #FF5722; /* Orange for lower ranks */
+        }
+        .rank-11, .rank-12, .rank-13, .rank-14, .rank-15, .rank-16, .rank-17, .rank-18, .rank-19, .rank-20 {
+            border-left: 5px solid #9E9E9E; /* Gray for lowest ranks */
+        }
+    """) as demo:
         gr.Markdown(f"# {task_data['task_name']} - Human Reranking Evaluation")
         
         with gr.Accordion("Instructions", open=True):
@@ -73,13 +124,13 @@ def create_reranking_interface(task_data):
         
         current_sample_id = gr.State(value=samples[0]["id"])
         
-        with gr.Row():
+        with gr.Row(elem_classes=["progress-indicator"]):
             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)
+            status_box = gr.Textbox(label="Status", value="Ready to start evaluation", interactive=False, elem_classes=["status-box"])
         
         with gr.Group():
             gr.Markdown("## Query:")
-            query_text = gr.Textbox(value=samples[0]["query"], label="", interactive=False)
+            query_text = gr.Textbox(value=samples[0]["query"], label="", interactive=False, elem_classes=["query-box"])
             
             gr.Markdown("## Documents (Arrange in order of relevance, most relevant at top):")
             
@@ -118,9 +169,14 @@ def create_reranking_interface(task_data):
                 for i in range(len(document_containers)):
                     if i < len(docs):
                         doc_idx = current_order[i]
-                        document_containers[i].value = f"Document {doc_idx+1} (Rank: {i+1}): {docs[doc_idx]}"
+                        rank_class = f"rank-{i+1}"
+                        document_containers[i].update(
+                            value=f"[RANK {i+1}] Document {doc_idx+1}: {docs[doc_idx]}",
+                            visible=True,
+                            elem_classes=["document-text", rank_class]
+                        )
                     else:
-                        document_containers[i].value = ""  # Clear unused containers
+                        document_containers[i].update(value="", visible=False)
                 
                 # Status message
                 status = f"Viewing query {samples.index(sample) + 1} of {len(samples)}"
@@ -131,17 +187,32 @@ def create_reranking_interface(task_data):
             
             # Create document display containers with up/down buttons
             with gr.Column():
+                gr.Markdown("""
+                ### Instructions for Ranking:
+                - Documents are initially shown in their original order
+                - The most relevant document should be at the TOP (Rank 1)
+                - Use the "Move Up" and "Move Down" buttons to rearrange documents
+                - The rank is shown at the beginning of each document: [RANK X]
+                - When you're satisfied with the order, click "Submit Rankings"
+                """)
+                
                 for i in range(20):  # Now handling up to 20 documents per sample
                     with gr.Group():
-                        with gr.Row():
-                            doc_text = gr.Textbox(label=f"Document {i+1}", interactive=False)
+                        with gr.Box():
+                            with gr.Row():
+                                rank_label = gr.Markdown(f"**Document #{i+1}**")
+                                with gr.Column(scale=1):
+                                    up_btn = gr.Button("⬆️ Move Up", size="sm", variant="primary")
+                                    down_btn = gr.Button("⬇️ Move Down", size="sm", variant="secondary")
+                            
+                            doc_text = gr.Textbox(
+                                label="", 
+                                interactive=False,
+                                elem_id=f"doc-text-{i}",
+                                elem_classes=["document-text"]
+                            )
                             document_containers.append(doc_text)
                         
-                        with gr.Row():
-                            # Create unique buttons for each document to avoid closure issues
-                            up_btn = gr.Button(f"⬆️ Move Up #{i+1}", size="sm")
-                            down_btn = gr.Button(f"⬇️ Move Down #{i+1}", size="sm")
-                        
                         # Create a closure that properly captures the current index
                         def make_up_handler(idx):
                             def up_handler():
@@ -157,11 +228,18 @@ def create_reranking_interface(task_data):
                                     if sample:
                                         docs = sample["candidates"]
                                         updates = []
-                                        for j, doc_idx in enumerate(current_order):
-                                            if j < len(document_containers) and doc_idx < len(docs):
-                                                updates.append(gr.update(value=f"Document {doc_idx+1} (Rank: {j+1}): {docs[doc_idx]}"))
+                                        for j in range(len(document_containers)):
+                                            if j < len(current_order) and j < len(docs):
+                                                doc_idx = current_order[j]
+                                                # Add rank-specific class for styling
+                                                rank_class = f"rank-{j+1}"
+                                                updates.append(gr.update(
+                                                    value=f"[RANK {j+1}] Document {doc_idx+1}: {docs[doc_idx]}",
+                                                    visible=True,
+                                                    elem_classes=["document-text", rank_class]
+                                                ))
                                             else:
-                                                updates.append(gr.update(value=""))
+                                                updates.append(gr.update(value="", visible=False))
                                         return updates
                                 return [gr.update() for _ in document_containers]
                             return up_handler
@@ -180,11 +258,18 @@ def create_reranking_interface(task_data):
                                     if sample:
                                         docs = sample["candidates"]
                                         updates = []
-                                        for j, doc_idx in enumerate(current_order):
-                                            if j < len(document_containers) and doc_idx < len(docs):
-                                                updates.append(gr.update(value=f"Document {doc_idx+1} (Rank: {j+1}): {docs[doc_idx]}"))
+                                        for j in range(len(document_containers)):
+                                            if j < len(current_order) and j < len(docs):
+                                                doc_idx = current_order[j]
+                                                # Add rank-specific class for styling
+                                                rank_class = f"rank-{j+1}"
+                                                updates.append(gr.update(
+                                                    value=f"[RANK {j+1}] Document {doc_idx+1}: {docs[doc_idx]}",
+                                                    visible=True,
+                                                    elem_classes=["document-text", rank_class]
+                                                ))
                                             else:
-                                                updates.append(gr.update(value=""))
+                                                updates.append(gr.update(value="", visible=False))
                                         return updates
                                 return [gr.update() for _ in document_containers]
                             return down_handler
@@ -202,12 +287,15 @@ def create_reranking_interface(task_data):
                             outputs=document_containers
                         )
             
-            with gr.Row():
-                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")
+            with gr.Row(equal_height=True):
+                prev_btn = gr.Button("← Previous Query", size="lg", variant="secondary")
+                submit_btn = gr.Button("💾 Submit Rankings", size="lg", variant="primary")
+                next_btn = gr.Button("Next Query →", size="lg", variant="secondary")
             
-            save_btn = gr.Button("💾 Save All Results", variant="secondary")
+            with gr.Row():
+                save_btn = gr.Button("💾 Save All Results", variant="primary", size="lg")
+                # Add a clear button to reset rankings
+                clear_btn = gr.Button("🔄 Reset Order", variant="secondary", size="lg")
         
         # Initialize the document list for the first sample
         status_val, progress_val = initialize_document_list(samples[0]["id"])
@@ -273,6 +361,40 @@ def create_reranking_interface(task_data):
             outputs=[status_box, progress_text]
         )
         
+        # Add function to reset the current ranking order
+        def reset_order():
+            nonlocal current_order
+            sample = next((s for s in samples if s["id"] == current_sample_id.value), None)
+            if not sample:
+                return [gr.update() for _ in document_containers]
+            
+            docs = sample["candidates"]
+            # Reset to original order
+            current_order = list(range(len(docs)))
+            
+            # Update UI
+            updates = []
+            for i in range(len(document_containers)):
+                if i < len(docs):
+                    doc_idx = current_order[i]
+                    rank_class = f"rank-{i+1}"
+                    updates.append(gr.update(
+                        value=f"[RANK {i+1}] Document {doc_idx+1}: {docs[doc_idx]}",
+                        visible=True,
+                        elem_classes=["document-text", rank_class]
+                    ))
+                else:
+                    updates.append(gr.update(value="", visible=False))
+            
+            return updates
+        
+        # Connect reset button
+        clear_btn.click(
+            reset_order,
+            inputs=[],
+            outputs=document_containers
+        )
+        
         # Save all results
         def save_results():
             """Save all collected results to a file."""