Update app.py

app.py

@@ -39,139 +39,6 @@ DUMMY_DATASET = [
     }
 ]
 
-# Custom CSS for better styling
-custom_css = """
-.gradio-container {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
-}
-
-.login-container {
-    max-width: 500px;
-    margin: auto;
-    padding: 2rem;
-}
-
-.annotation-container {
-    max-width: 1200px;
-    margin: auto;
-}
-
-/* Header styling */
-h1 {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-align: center;
-    font-size: 2.5rem !important;
-    margin-bottom: 0.5rem !important;
-}
-
-h2 {
-    color: #4a5568;
-    text-align: center;
-}
-
-/* Card-like appearance for groups */
-.gr-group {
-    background: white;
-    border-radius: 12px;
-    padding: 1.5rem;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    border: 1px solid #e2e8f0;
-}
-
-/* Prompt box styling */
-.prompt-box textarea {
-    background: linear-gradient(135deg, #f5f7fa 0%, #f0f4f8 100%);
-    border: 2px solid #e2e8f0;
-    border-radius: 8px;
-    font-size: 1.1rem;
-    line-height: 1.6;
-    padding: 1rem;
-}
-
-/* Response boxes styling */
-.response-box textarea {
-    background: #ffffff;
-    border: 2px solid #e2e8f0;
-    border-radius: 8px;
-    font-size: 1rem;
-    line-height: 1.5;
-    transition: all 0.3s ease;
-}
-
-.response-box:hover textarea {
-    border-color: #cbd5e0;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-}
-
-/* Button styling */
-.annotation-button {
-    font-weight: 600;
-    padding: 0.75rem 1.5rem;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-    font-size: 0.9rem;
-}
-
-/* Progress bar styling */
-.progress-container {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    padding: 0.75rem 1.25rem;
-    border-radius: 8px;
-    font-weight: 600;
-    text-align: center;
-    margin-bottom: 1rem;
-}
-
-/* Status message styling */
-.status-message {
-    background: #10b981;
-    color: white;
-    padding: 0.5rem 1rem;
-    border-radius: 6px;
-    text-align: center;
-    animation: slideIn 0.3s ease;
-}
-
-@keyframes slideIn {
-    from {
-        opacity: 0;
-        transform: translateY(-10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Login form styling */
-.login-input input {
-    font-size: 1.1rem;
-    padding: 0.75rem;
-}
-
-/* Divider styling */
-.divider {
-    height: 1px;
-    background: linear-gradient(to right, transparent, #e2e8f0, transparent);
-    margin: 1.5rem 0;
-}
-
-/* Label improvements */
-label {
-    font-weight: 600;
-    color: #4a5568;
-    font-size: 0.875rem;
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-}
-"""
-
 class AnnotationManager:
     def __init__(self):
         self.annotations = {}  # Store annotations by user_id
@@ -255,7 +122,7 @@ def login(user_id: str) -> Tuple:
             gr.update(visible=True),  # login_interface
             gr.update(visible=False),  # annotation_interface
             "",  # user_state
-            gr.update(value="⚠️ Please enter a valid ID", visible=True),  # login_status
+            gr.update(value="Please enter a valid ID"),  # login_status
             gr.update(),  # prompt
             gr.update(),  # response_a
             gr.update(),  # response_b
@@ -270,7 +137,7 @@ def login(user_id: str) -> Tuple:
             gr.update(visible=True),  # login_interface
             gr.update(visible=False),  # annotation_interface
             user_id,  # user_state
-            gr.update(value=f"✅ All samples completed for user: {user_id}", visible=True),  # login_status
+            gr.update(value=f"All samples completed for user: {user_id}"),  # login_status
             gr.update(),  # prompt
             gr.update(),  # response_a
             gr.update(),  # response_b
@@ -281,11 +148,11 @@ def login(user_id: str) -> Tuple:
         gr.update(visible=False),  # login_interface
         gr.update(visible=True),   # annotation_interface
         user_id,  # user_state
-        gr.update(value="", visible=False),  # login_status
+        gr.update(value=""),  # login_status
         gr.update(value=sample["prompt"]),  # prompt
         gr.update(value=sample["response_a"]),  # response_a
         gr.update(value=sample["response_b"]),  # response_b
-        gr.update(value=f"📊 Progress: {current}/{total} samples", visible=True)  # progress
+        gr.update(value=f"Progress: {current}/{total}")  # progress
     )
 
 def annotate(choice: str, user_id: str) -> Tuple:
@@ -296,7 +163,7 @@ def annotate(choice: str, user_id: str) -> Tuple:
             gr.update(),  # response_a
             gr.update(),  # response_b
             gr.update(),  # progress
-            gr.update(value="❌ Error: No user logged in", visible=True)  # status
+            gr.update(value="Error: No user logged in", visible=True)  # status
         )
     
     # Get current sample to save annotation
@@ -315,19 +182,19 @@ def annotate(choice: str, user_id: str) -> Tuple:
     
     if next_sample is None:
         return (
-            gr.update(value="🎉 All samples completed! Thank you for your annotations."),  # prompt
+            gr.update(value="All samples completed! Thank you for your annotations."),  # prompt
             gr.update(value=""),  # response_a
             gr.update(value=""),  # response_b
-            gr.update(value=f"✅ Progress: {total}/{total} - Complete!", visible=True),  # progress
-            gr.update(value="🎊 All annotations complete! You can now logout.", visible=True)  # status
+            gr.update(value=f"Progress: {total}/{total} - Complete!"),  # progress
+            gr.update(value="All annotations complete!", visible=True)  # status
         )
     
     return (
         gr.update(value=next_sample["prompt"]),  # prompt
         gr.update(value=next_sample["response_a"]),  # response_a
         gr.update(value=next_sample["response_b"]),  # response_b
-        gr.update(value=f"📊 Progress: {current}/{total} samples", visible=True),  # progress
-        gr.update(value="✅ Annotation saved!", visible=True)  # status
+        gr.update(value=f"Progress: {current}/{total}"),  # progress
+        gr.update(value="Annotation saved!", visible=True)  # status
     )
 
 def logout() -> Tuple:
@@ -336,118 +203,72 @@ def logout() -> Tuple:
         gr.update(visible=True),   # login_interface
         gr.update(visible=False),  # annotation_interface
         "",  # user_state
-        gr.update(value="", visible=False),  # login_status
+        gr.update(value=""),  # login_status
         gr.update(value=""),  # prompt
         gr.update(value=""),  # response_a
         gr.update(value=""),  # response_b
-        gr.update(value="", visible=False)   # progress
+        gr.update(value="")   # progress
     )
 
 # Create Gradio interface
-with gr.Blocks(title="Dataset Annotation Tool", theme=gr.themes.Soft(), css=custom_css) as app:
-    gr.Markdown("# 🎯 Fluency Annotation Tool")
-    gr.Markdown("Compare and annotate response fluency for AI-generated text")
+with gr.Blocks(title="Dataset Annotation Tool") as app:
+    gr.Markdown("# Dataset Annotation Tool")
+    gr.Markdown("Annotate which response is more fluent for each prompt.")
     
     user_state = gr.State("")
     
     # Login Interface
-    with gr.Group(visible=True, elem_classes="login-container") as login_interface:
-        gr.Markdown("## 👤 Annotator Login")
-        gr.Markdown("Enter your unique annotator ID to begin. Your ID determines the order of samples you'll see and tracks your progress.")
+    with gr.Group(visible=True) as login_interface:
+        gr.Markdown("## Login")
+        gr.Markdown("Enter your annotator ID to begin. Your ID determines the order of samples you'll see.")
         
         with gr.Row():
             user_id_input = gr.Textbox(
                 label="Annotator ID",
-                placeholder="e.g., annotator_001",
-                scale=3,
-                elem_classes="login-input"
-            )
-            login_btn = gr.Button(
-                "🚀 Start Annotating", 
-                variant="primary", 
-                scale=1,
-                size="lg"
+                placeholder="Enter your unique ID",
+                scale=3
             )
+            login_btn = gr.Button("Login", variant="primary", scale=1)
         
-        login_status = gr.Markdown("", visible=False)
+        login_status = gr.Markdown("")
     
     # Annotation Interface
-    with gr.Group(visible=False, elem_classes="annotation-container") as annotation_interface:
-        # Progress bar
-        progress_label = gr.Markdown("", elem_classes="progress-container", visible=False)
+    with gr.Group(visible=False) as annotation_interface:
+        progress_label = gr.Markdown("")
         
         # Row 1: Prompt
-        gr.Markdown("### 📝 Prompt")
         with gr.Row():
             prompt_display = gr.Textbox(
-                label="",
+                label="Prompt",
                 interactive=False,
-                lines=3,
-                elem_classes="prompt-box",
-                show_label=False
+                lines=3
             )
         
-        gr.HTML('<div class="divider"></div>')
-        
         # Row 2: Responses
-        gr.Markdown("### 💬 Responses")
         with gr.Row():
-            with gr.Column(scale=1):
-                gr.Markdown("**Response A**")
-                response_a_display = gr.Textbox(
-                    label="",
-                    interactive=False,
-                    lines=6,
-                    elem_classes="response-box",
-                    show_label=False
-                )
-            
-            with gr.Column(scale=1):
-                gr.Markdown("**Response B**")
-                response_b_display = gr.Textbox(
-                    label="",
-                    interactive=False,
-                    lines=6,
-                    elem_classes="response-box",
-                    show_label=False
-                )
-        
-        gr.HTML('<div class="divider"></div>')
-        
-        # Row 3: Annotation Buttons
-        gr.Markdown("### 🎯 Which response is more fluent?")
-        with gr.Row():
-            btn_a = gr.Button(
-                "✨ A is more fluent", 
-                variant="primary",
-                elem_classes="annotation-button",
-                size="lg"
-            )
-            btn_equal = gr.Button(
-                "⚖️ Equally fluent", 
-                variant="secondary",
-                elem_classes="annotation-button",
-                size="lg"
+            response_a_display = gr.Textbox(
+                label="Response A",
+                interactive=False,
+                lines=6,
+                scale=1
             )
-            btn_b = gr.Button(
-                "✨ B is more fluent", 
-                variant="primary",
-                elem_classes="annotation-button",
-                size="lg"
+            response_b_display = gr.Textbox(
+                label="Response B",
+                interactive=False,
+                lines=6,
+                scale=1
             )
         
-        # Status message
-        status_message = gr.Markdown("", visible=False, elem_classes="status-message")
+        # Row 3: Buttons
+        with gr.Row():
+            btn_a = gr.Button("A is more fluent", variant="primary")
+            btn_equal = gr.Button("Equally fluent", variant="secondary")
+            btn_b = gr.Button("B is more fluent", variant="primary")
+        
+        status_message = gr.Markdown("", visible=False)
         
-        # Logout button
         with gr.Row():
-            gr.Column(scale=3)
-            logout_btn = gr.Button(
-                "🚪 Logout", 
-                variant="stop", 
-                size="sm",
-                scale=1
-            )
+            logout_btn = gr.Button("Logout", variant="stop", size="sm")
     
     # Event handlers
     login_btn.click(