Update app.py

app.py

@@ -106,9 +106,9 @@ def save_choice(text_id, original_text, summary_a, summary_b, choice, notes=""):
     success, message = push_to_hf_dataset(new_row)
     
     if success:
-        return f"Selected {chosen_summary} for text {text_id}. Pushed to HuggingFace."
+        return f"Selection saved for text ID: {text_id}! You chose {'Summary A' if choice == 'Summary A' else 'Summary B'}. Pushed to HuggingFace."
     else:
-        return f"Selected {chosen_summary} for text {text_id}. Local save only: {message}"
+        return f"Selection saved locally for text ID: {text_id}. HuggingFace push failed: {message}"
 
 class SummaryChooser:
     def __init__(self):
@@ -159,119 +159,38 @@ class SummaryChooser:
     def get_hf_status(self):
         """Get the status of HuggingFace integration"""
         success, message = self.hf_status
-        return f"HF: {'✓' if success else '✗'} {message.split(':')[-1].strip()}"
-    
-    def select_summary_a(self):
-        """Helper function to select Summary A"""
-        return "Summary A"
-    
-    def select_summary_b(self):
-        """Helper function to select Summary B"""
-        return "Summary B"
+        return f"HuggingFace Status: {'Connected' if success else 'Not Connected'} - {message}"
 
 # Create the application
 app = SummaryChooser()
 
-# Custom CSS for clickable summaries
-css = """
-.clickable-summary {
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 16px;
-    cursor: pointer;
-    transition: all 0.3s;
-    height: 100%;
-}
-.clickable-summary:hover {
-    border-color: #2196F3;
-    box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
-}
-.clickable-summary.selected {
-    border-color: #2196F3;
-    background-color: rgba(33, 150, 243, 0.1);
-    box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
-}
-.info-box {
-    padding: 8px 12px;
-    border-radius: 4px;
-    background-color: #f5f5f5;
-    border: 1px solid #ddd;
-    font-size: 14px;
-    flex: 1;
-    margin: 0 4px;
-}
-.status-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-}
-"""
-
 # Define the Gradio interface
-with gr.Blocks(title="Summary Chooser", css=css) as interface:
+with gr.Blocks(title="Summary Chooser") as interface:
     gr.Markdown("# Summary Comparison Tool")
-    gr.Markdown("Choose the better summary for each text by clicking on it")
-    
-    # Hidden variable to track the selection
-    selected_summary = gr.Radio(
-        choices=["Summary A", "Summary B"],
-        label="Selected Summary",
-        visible=False
-    )
+    gr.Markdown("Choose the better summary for each text")
     
-    # Status row with equal-sized elements
-    with gr.Row(equal_height=True):
-        with gr.Column(scale=1):
-            text_id_box = gr.Textbox(label="Text ID", interactive=False, elem_classes=["info-box"])
-        with gr.Column(scale=1):
-            progress_label = gr.Textbox(label="Progress", interactive=False, elem_classes=["info-box"])
-        with gr.Column(scale=1):
-            hf_status = gr.Textbox(label="Status", value=app.get_hf_status(), interactive=False, elem_classes=["info-box"])
+    with gr.Row():
+        with gr.Column():
+            progress_label = gr.Label(label="Progress")  
+        with gr.Column():
+            hf_status = gr.Label(label="HuggingFace Status", value=app.get_hf_status())
+        with gr.Column():
+            text_id_box = gr.Textbox(label="Text ID", interactive=False)
     
     with gr.Row():
         text_box = gr.TextArea(label="Original Text", lines=8)
     
-    # Clickable summary boxes
-    with gr.Row(equal_height=True):
+    with gr.Row():
         with gr.Column():
-            with gr.Group(elem_classes=["clickable-summary"]) as summary_a_box:
-                summary_a_title = gr.Markdown("### Summary A")
-                summary_a = gr.TextArea(label="", lines=5, interactive=False)
-        
+            summary_a = gr.TextArea(label="Summary A", lines=5)
         with gr.Column():
-            with gr.Group(elem_classes=["clickable-summary"]) as summary_b_box:
-                summary_b_title = gr.Markdown("### Summary B")
-                summary_b = gr.TextArea(label="", lines=5, interactive=False)
-    
-    # Client-side JavaScript for clickable behavior
-    summary_a_box.click(
-        fn=app.select_summary_a,
-        inputs=[],
-        outputs=[selected_summary],
-        _js="""
-        () => {
-            // Add selected class to summary A and remove from summary B
-            document.querySelectorAll('.clickable-summary')[0].classList.add('selected');
-            document.querySelectorAll('.clickable-summary')[1].classList.remove('selected');
-            return "Summary A";
-        }
-        """
-    )
+            summary_b = gr.TextArea(label="Summary B", lines=5)
     
-    summary_b_box.click(
-        fn=app.select_summary_b,
-        inputs=[],
-        outputs=[selected_summary],
-        _js="""
-        () => {
-            // Add selected class to summary B and remove from summary A
-            document.querySelectorAll('.clickable-summary')[1].classList.add('selected');
-            document.querySelectorAll('.clickable-summary')[0].classList.remove('selected');
-            return "Summary B";
-        }
-        """
-    )
+    with gr.Row():
+        choice_radio = gr.Radio(
+            choices=["Summary A", "Summary B"],
+            label="Select the better summary"
+        )
     
     with gr.Row():
         notes_box = gr.TextArea(label="Notes (optional)", lines=2)
@@ -294,32 +213,14 @@ with gr.Blocks(title="Summary Chooser", css=css) as interface:
     # Set up event handlers
     submit_button.click(
         fn=app.next_item,
-        inputs=[selected_summary, notes_box],
-        outputs=[text_id_box, text_box, summary_a, summary_b, progress_label, result_box],
-        _js="""
-        function(choice, notes) {
-            // Reset selection highlight
-            document.querySelectorAll('.clickable-summary').forEach(el => {
-                el.classList.remove('selected');
-            });
-            return [choice, notes];
-        }
-        """
+        inputs=[choice_radio, notes_box],
+        outputs=[text_id_box, text_box, summary_a, summary_b, progress_label, result_box]
     )
     
     prev_button.click(
         fn=app.prev_item,
         inputs=[],
-        outputs=[text_id_box, text_box, summary_a, summary_b, progress_label, result_box],
-        _js="""
-        function() {
-            // Reset selection highlight
-            document.querySelectorAll('.clickable-summary').forEach(el => {
-                el.classList.remove('selected');
-            });
-            return [];
-        }
-        """
+        outputs=[text_id_box, text_box, summary_a, summary_b, progress_label, result_box]
     )
 
 # Launch the application