Update app.py

app.py

@@ -39,6 +39,139 @@ 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
@@ -122,7 +255,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"),  # login_status
+            gr.update(value="⚠️ Please enter a valid ID", visible=True),  # login_status
             gr.update(),  # prompt
             gr.update(),  # response_a
             gr.update(),  # response_b
@@ -137,7 +270,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}"),  # login_status
+            gr.update(value=f"✅ All samples completed for user: {user_id}", visible=True),  # login_status
             gr.update(),  # prompt
             gr.update(),  # response_a
             gr.update(),  # response_b
@@ -148,11 +281,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=""),  # login_status
+        gr.update(value="", visible=False),  # 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}")  # progress
+        gr.update(value=f"📊 Progress: {current}/{total} samples", visible=True)  # progress
     )
 
 def annotate(choice: str, user_id: str) -> Tuple:
@@ -163,7 +296,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
@@ -182,19 +315,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!"),  # progress
-            gr.update(value="All annotations complete!", visible=True)  # status
+            gr.update(value=f"✅ Progress: {total}/{total} - Complete!", visible=True),  # progress
+            gr.update(value="🎊 All annotations complete! You can now logout.", 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}"),  # progress
-        gr.update(value="Annotation saved!", visible=True)  # status
+        gr.update(value=f"📊 Progress: {current}/{total} samples", visible=True),  # progress
+        gr.update(value="✅ Annotation saved!", visible=True)  # status
     )
 
 def logout() -> Tuple:
@@ -203,72 +336,118 @@ def logout() -> Tuple:
         gr.update(visible=True),   # login_interface
         gr.update(visible=False),  # annotation_interface
         "",  # user_state
-        gr.update(value=""),  # login_status
+        gr.update(value="", visible=False),  # login_status
         gr.update(value=""),  # prompt
         gr.update(value=""),  # response_a
         gr.update(value=""),  # response_b
-        gr.update(value="")   # progress
+        gr.update(value="", visible=False)   # progress
     )
 
 # Create Gradio interface
-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.")
+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")
     
     user_state = gr.State("")
     
     # Login Interface
-    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.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.Row():
             user_id_input = gr.Textbox(
                 label="Annotator ID",
-                placeholder="Enter your unique ID",
-                scale=3
+                placeholder="e.g., annotator_001",
+                scale=3,
+                elem_classes="login-input"
+            )
+            login_btn = gr.Button(
+                "🚀 Start Annotating", 
+                variant="primary", 
+                scale=1,
+                size="lg"
             )
-            login_btn = gr.Button("Login", variant="primary", scale=1)
         
-        login_status = gr.Markdown("")
+        login_status = gr.Markdown("", visible=False)
     
     # Annotation Interface
-    with gr.Group(visible=False) as annotation_interface:
-        progress_label = gr.Markdown("")
+    with gr.Group(visible=False, elem_classes="annotation-container") as annotation_interface:
+        # Progress bar
+        progress_label = gr.Markdown("", elem_classes="progress-container", visible=False)
         
         # Row 1: Prompt
+        gr.Markdown("### 📝 Prompt")
         with gr.Row():
             prompt_display = gr.Textbox(
-                label="Prompt",
+                label="",
                 interactive=False,
-                lines=3
+                lines=3,
+                elem_classes="prompt-box",
+                show_label=False
             )
         
+        gr.HTML('<div class="divider"></div>')
+        
         # Row 2: Responses
+        gr.Markdown("### 💬 Responses")
         with gr.Row():
-            response_a_display = gr.Textbox(
-                label="Response A",
-                interactive=False,
-                lines=6,
-                scale=1
-            )
-            response_b_display = gr.Textbox(
-                label="Response B",
-                interactive=False,
-                lines=6,
-                scale=1
-            )
+            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
+                )
         
-        # Row 3: Buttons
+        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")
-            btn_equal = gr.Button("Equally fluent", variant="secondary")
-            btn_b = gr.Button("B is more fluent", variant="primary")
+            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"
+            )
+            btn_b = gr.Button(
+                "✨ B is more fluent", 
+                variant="primary",
+                elem_classes="annotation-button",
+                size="lg"
+            )
         
-        status_message = gr.Markdown("", visible=False)
+        # Status message
+        status_message = gr.Markdown("", visible=False, elem_classes="status-message")
         
+        # Logout button
         with gr.Row():
-            logout_btn = gr.Button("Logout", variant="stop", size="sm")
+            gr.Column(scale=3)
+            logout_btn = gr.Button(
+                "🚪 Logout", 
+                variant="stop", 
+                size="sm",
+                scale=1
+            )
     
     # Event handlers
     login_btn.click(
@@ -311,6 +490,10 @@ with gr.Blocks(title="Dataset Annotation Tool") as app:
             progress_label,
             status_message
         ]
+    ).then(
+        lambda: gr.update(visible=False),
+        outputs=[status_message],
+        _js="() => setTimeout(() => true, 2000)"
     )
     
     btn_b.click(
@@ -323,6 +506,10 @@ with gr.Blocks(title="Dataset Annotation Tool") as app:
             progress_label,
             status_message
         ]
+    ).then(
+        lambda: gr.update(visible=False),
+        outputs=[status_message],
+        _js="() => setTimeout(() => true, 2000)"
     )
     
     btn_equal.click(
@@ -335,6 +522,10 @@ with gr.Blocks(title="Dataset Annotation Tool") as app:
             progress_label,
             status_message
         ]
+    ).then(
+        lambda: gr.update(visible=False),
+        outputs=[status_message],
+        _js="() => setTimeout(() => true, 2000)"
     )
     
     logout_btn.click(