backup

app.py

@@ -312,190 +312,348 @@ def update_button_styles(verdict):
     return a_better_style, b_better_style, neither_style, tie_style
 
 
-# Create Gradio interface
-with gr.Blocks() as demo:
+# Add at the top after imports
+def create_instruction_page(html_content, image_path=None):
+    """Helper function to create consistent instruction pages"""
+    with gr.Column():
+        gr.HTML(html_content)
+        if image_path:
+            gr.Image(image_path, container=False)
 
-    # Add instruction panel at the top
-    gr.HTML(
-        """
-        <div style="padding: 0.8rem; margin-bottom: 0.8rem; border-radius: 0.5rem; color: white; text-align: center;">
-            <div style="font-size: 1.2rem; margin-bottom: 0.5rem;">Read the user instruction, look at the source image, then evaluate which edit (A or B) best satisfies the request better.</div>
-            <div style="font-size: 1rem;">
-                <strong>🤝 Tie</strong> &nbsp;&nbsp;|&nbsp;&nbsp;
-                <strong>👈 A is better</strong> &nbsp;&nbsp;|&nbsp;&nbsp; 
-                <strong>👉 B is better</strong>
-            </div>
-            <div style="color: #ff4444; font-size: 0.9rem; margin-top: 0.5rem;">
-                Please ignore any watermark on the image. Your rating should not be affected by any watermark on the image.
-            </div>
-        </div>
-    """
-    )
 
-    with gr.Row():
-        simplified_instruction = gr.Textbox(
-            label="Simplified Instruction", show_label=True, visible=False
-        )
-        instruction = gr.Markdown(label="Original Instruction", show_label=True)
-
-    with gr.Row():
-        with gr.Column():
-            source_image = gr.Image(label="Source Image", show_label=True, height=500)
-            gr.HTML("<h2 style='text-align: center;'>Source Image</h2>")
-            tie_btn = gr.Button("🤝 Tie", variant="secondary")
-        with gr.Column():
-            image_a = gr.Image(label="Image A", show_label=True, height=500)
-            gr.HTML("<h2 style='text-align: center;'>Image A</h2>")
-            a_better_btn = gr.Button("👈 A is better", variant="secondary")
-        with gr.Column():
-            image_b = gr.Image(label="Image B", show_label=True, height=500)
-            gr.HTML("<h2 style='text-align: center;'>Image B</h2>")
-            b_better_btn = gr.Button("👉 B is better", variant="secondary")
-
-    # Add confirmation button in new row
-    with gr.Row():
-        confirm_btn = gr.Button("Confirm Selection", variant="primary", visible=False)
-    with gr.Row():
-        neither_btn = gr.Button("👎 Both are bad", variant="secondary", visible=False)
-
-    with gr.Accordion("DEBUG", open=False):
-        with gr.Column():
-            post_id_display = gr.Textbox(
-                label="Post ID", show_label=True, interactive=False
+# Add before the main Gradio interface
+def handle_username_submit(username, current_page):
+    """Handle username submission and advance to next page"""
+    if not username or len(username.strip()) < 2:
+        # Just stay on current page if validation fails
+        return current_page, gr.update(value=username)
+    return 2, gr.update(value="")  # Advance to page 2 and clear the input
+
+
+def advance_page(current_page):
+    """Handle next button clicks to advance pages"""
+    return current_page + 1
+
+
+# Modify the main interface
+with gr.Blocks() as demo:
+    # Add states for page management and user info
+    current_page = gr.State(1)  # Start at page 1
+    username_state = gr.State(None)
+
+    # Create container for all pages
+    with gr.Column() as page_container:
+        # Page 1 - Username Collection
+        with gr.Column(visible=True) as page1:
+            create_instruction_page(
+                """
+                <div style="text-align: center; padding: 20px;">
+                    <h1>Welcome to the Image Edit Evaluation</h1>
+                    <p>Help us evaluate AI-generated image edits!</p>
+                    <!-- Add more welcome content here -->
+                </div>
+                """,
+                image_path="./instructions/home.jpg",
             )
-            model_info = gr.Textbox(label="Model Information", show_label=True)
-            simplified_instruction_debug = gr.Textbox(
-                label="Simplified Instruction", show_label=True, interactive=False
+            username_input = gr.Textbox(
+                label="Please enter your username",
+                placeholder="Username (min 2 characters)",
+            )
+            validation_text = gr.HTML(
+                visible=False,
+                value='<p style="color: red;">Please enter a valid username (min 2 characters)</p>',
+            )
+            start_btn = gr.Button("Start", variant="primary")
+
+        # Page 2 - First instruction page
+        with gr.Column(visible=False) as page2:
+            create_instruction_page(
+                """
+                <div style="text-align: center; padding: 20px;">
+                    <h1>How to Evaluate Edits</h1>
+                    <p>You'll be shown pairs of edited images...</p>
+                    <!-- Add instruction content here -->
+                </div>
+                """,
+                image_path="./instructions/page2.jpg",  # Replace with actual image path
+            )
+            next_btn1 = gr.Button("Next", variant="primary")
+
+        # Page 3 - Second instruction page
+        with gr.Column(visible=False) as page3:
+            create_instruction_page(
+                """
+                <div style="text-align: center; padding: 20px;">
+                    <h1>Making Your Decision</h1>
+                    <p>Compare the edits carefully...</p>
+                    <!-- Add more instruction content here -->
+                </div>
+                """,
+                image_path="./instructions/page3.jpg",  # Replace with actual image path
+            )
+            next_btn2 = gr.Button("Start Evaluation", variant="primary")
+
+        # Main Evaluation UI (existing code)
+        with gr.Column(visible=False) as main_ui:
+            # ... existing evaluation UI code ...
+            # Move all the existing UI elements here
+
+            # Add instruction panel at the top
+            gr.HTML(
+                """
+                <div style="padding: 0.8rem; margin-bottom: 0.8rem; border-radius: 0.5rem; color: white; text-align: center;">
+                    <div style="font-size: 1.2rem; margin-bottom: 0.5rem;">Read the user instruction, look at the source image, then evaluate which edit (A or B) best satisfies the request better.</div>
+                    <div style="font-size: 1rem;">
+                        <strong>🤝 Tie</strong> &nbsp;&nbsp;|&nbsp;&nbsp;
+                        <strong>👈 A is better</strong> &nbsp;&nbsp;|&nbsp;&nbsp; 
+                        <strong>👉 B is better</strong>
+                    </div>
+                    <div style="color: #ff4444; font-size: 0.9rem; margin-top: 0.5rem;">
+                        Please ignore any watermark on the image. Your rating should not be affected by any watermark on the image.
+                    </div>
+                </div>
+            """
             )
-    state = gr.State()
-    selected_verdict = gr.State()
-
-    # Add states for button selection
-    a_better_selected = gr.Checkbox(visible=False)
-    b_better_selected = gr.Checkbox(visible=False)
-    neither_selected = gr.Checkbox(visible=False)
-    tie_selected = gr.Checkbox(visible=False)
-
-    def update_confirm_visibility(a_better, b_better, neither, tie):
-        # Update button text based on selection
-        if a_better:
-            return gr.update(visible=True, value="Confirm A is better")
-        elif b_better:
-            return gr.update(visible=True, value="Confirm B is better")
-        elif neither:
-            return gr.update(visible=True, value="Confirm Neither is good")
-        elif tie:
-            return gr.update(visible=True, value="Confirm Tie")
-        return gr.update(visible=False)
-
-    # Initialize the interface
-    demo.load(
-        initialize,
-        outputs=[
-            source_image,
-            image_a,
-            image_b,
-            instruction,
-            simplified_instruction,
-            model_info,
-            state,
-            selected_verdict,
-            a_better_selected,
-            b_better_selected,
-            neither_selected,
-            tie_selected,
-            post_id_display,
-            simplified_instruction_debug,
-        ],
-    )
 
-    # Handle first step button clicks
-    a_better_btn.click(
-        lambda state: select_verdict("A is better", state),
-        inputs=[state],
-        outputs=[
-            selected_verdict,
-            a_better_selected,
-            b_better_selected,
-            neither_selected,
-            tie_selected,
-        ],
-    ).then(
-        update_button_styles,
-        inputs=[selected_verdict],
-        outputs=[a_better_btn, b_better_btn, neither_btn, tie_btn],
-    )
+            with gr.Row():
+                simplified_instruction = gr.Textbox(
+                    label="Simplified Instruction", show_label=True, visible=False
+                )
+                instruction = gr.Markdown(label="Original Instruction", show_label=True)
+
+            with gr.Row():
+                with gr.Column():
+                    source_image = gr.Image(
+                        label="Source Image", show_label=True, height=500
+                    )
+                    gr.HTML("<h2 style='text-align: center;'>Source Image</h2>")
+                    tie_btn = gr.Button("🤝 Tie", variant="secondary")
+                with gr.Column():
+                    image_a = gr.Image(label="Image A", show_label=True, height=500)
+                    gr.HTML("<h2 style='text-align: center;'>Image A</h2>")
+                    a_better_btn = gr.Button("👈 A is better", variant="secondary")
+                with gr.Column():
+                    image_b = gr.Image(label="Image B", show_label=True, height=500)
+                    gr.HTML("<h2 style='text-align: center;'>Image B</h2>")
+                    b_better_btn = gr.Button("👉 B is better", variant="secondary")
+
+            # Add confirmation button in new row
+            with gr.Row():
+                confirm_btn = gr.Button(
+                    "Confirm Selection", variant="primary", visible=False
+                )
+            with gr.Row():
+                neither_btn = gr.Button(
+                    "👎 Both are bad", variant="secondary", visible=False
+                )
+
+            with gr.Accordion("DEBUG", open=False):
+                with gr.Column():
+                    post_id_display = gr.Textbox(
+                        label="Post ID", show_label=True, interactive=False
+                    )
+                    model_info = gr.Textbox(label="Model Information", show_label=True)
+                    simplified_instruction_debug = gr.Textbox(
+                        label="Simplified Instruction",
+                        show_label=True,
+                        interactive=False,
+                    )
+            state = gr.State()
+            selected_verdict = gr.State()
+
+            # Add states for button selection
+            a_better_selected = gr.Checkbox(visible=False)
+            b_better_selected = gr.Checkbox(visible=False)
+            neither_selected = gr.Checkbox(visible=False)
+            tie_selected = gr.Checkbox(visible=False)
+
+            def update_confirm_visibility(a_better, b_better, neither, tie):
+                # Update button text based on selection
+                if a_better:
+                    return gr.update(visible=True, value="Confirm A is better")
+                elif b_better:
+                    return gr.update(visible=True, value="Confirm B is better")
+                elif neither:
+                    return gr.update(visible=True, value="Confirm Neither is good")
+                elif tie:
+                    return gr.update(visible=True, value="Confirm Tie")
+                return gr.update(visible=False)
+
+            # Initialize the interface
+            demo.load(
+                initialize,
+                outputs=[
+                    source_image,
+                    image_a,
+                    image_b,
+                    instruction,
+                    simplified_instruction,
+                    model_info,
+                    state,
+                    selected_verdict,
+                    a_better_selected,
+                    b_better_selected,
+                    neither_selected,
+                    tie_selected,
+                    post_id_display,
+                    simplified_instruction_debug,
+                ],
+            )
 
-    b_better_btn.click(
-        lambda state: select_verdict("B is better", state),
-        inputs=[state],
-        outputs=[
-            selected_verdict,
-            a_better_selected,
-            b_better_selected,
-            neither_selected,
-            tie_selected,
-        ],
-    ).then(
-        update_button_styles,
-        inputs=[selected_verdict],
-        outputs=[a_better_btn, b_better_btn, neither_btn, tie_btn],
-    )
+            # Handle first step button clicks
+            a_better_btn.click(
+                lambda state: select_verdict("A is better", state),
+                inputs=[state],
+                outputs=[
+                    selected_verdict,
+                    a_better_selected,
+                    b_better_selected,
+                    neither_selected,
+                    tie_selected,
+                ],
+            ).then(
+                update_button_styles,
+                inputs=[selected_verdict],
+                outputs=[a_better_btn, b_better_btn, neither_btn, tie_btn],
+            )
 
-    neither_btn.click(
-        lambda state: select_verdict("Neither is good", state),
-        inputs=[state],
-        outputs=[
-            selected_verdict,
-            a_better_selected,
-            b_better_selected,
-            neither_selected,
-            tie_selected,
-        ],
-    ).then(
-        update_button_styles,
-        inputs=[selected_verdict],
-        outputs=[a_better_btn, b_better_btn, neither_btn, tie_btn],
-    )
+            b_better_btn.click(
+                lambda state: select_verdict("B is better", state),
+                inputs=[state],
+                outputs=[
+                    selected_verdict,
+                    a_better_selected,
+                    b_better_selected,
+                    neither_selected,
+                    tie_selected,
+                ],
+            ).then(
+                update_button_styles,
+                inputs=[selected_verdict],
+                outputs=[a_better_btn, b_better_btn, neither_btn, tie_btn],
+            )
 
-    tie_btn.click(
-        lambda state: select_verdict("Tie", state),
-        inputs=[state],
-        outputs=[
-            selected_verdict,
-            a_better_selected,
-            b_better_selected,
-            neither_selected,
-            tie_selected,
-        ],
-    ).then(
-        update_button_styles,
-        inputs=[selected_verdict],
-        outputs=[a_better_btn, b_better_btn, neither_btn, tie_btn],
-    )
+            neither_btn.click(
+                lambda state: select_verdict("Neither is good", state),
+                inputs=[state],
+                outputs=[
+                    selected_verdict,
+                    a_better_selected,
+                    b_better_selected,
+                    neither_selected,
+                    tie_selected,
+                ],
+            ).then(
+                update_button_styles,
+                inputs=[selected_verdict],
+                outputs=[a_better_btn, b_better_btn, neither_btn, tie_btn],
+            )
+
+            tie_btn.click(
+                lambda state: select_verdict("Tie", state),
+                inputs=[state],
+                outputs=[
+                    selected_verdict,
+                    a_better_selected,
+                    b_better_selected,
+                    neither_selected,
+                    tie_selected,
+                ],
+            ).then(
+                update_button_styles,
+                inputs=[selected_verdict],
+                outputs=[a_better_btn, b_better_btn, neither_btn, tie_btn],
+            )
 
-    # Update confirm button visibility when selection changes
-    for checkbox in [
-        a_better_selected,
-        b_better_selected,
-        neither_selected,
-        tie_selected,
-    ]:
-        checkbox.change(
-            update_confirm_visibility,
-            inputs=[
+            # Update confirm button visibility when selection changes
+            for checkbox in [
                 a_better_selected,
                 b_better_selected,
                 neither_selected,
                 tie_selected,
-            ],
-            outputs=[confirm_btn],
-        )
+            ]:
+                checkbox.change(
+                    update_confirm_visibility,
+                    inputs=[
+                        a_better_selected,
+                        b_better_selected,
+                        neither_selected,
+                        tie_selected,
+                    ],
+                    outputs=[confirm_btn],
+                )
+
+            # Handle confirmation button click
+            confirm_btn.click(
+                lambda verdict, state: evaluate(verdict, state),
+                inputs=[selected_verdict, state],
+                outputs=[
+                    source_image,
+                    image_a,
+                    image_b,
+                    instruction,
+                    simplified_instruction,
+                    model_info,
+                    state,
+                    selected_verdict,
+                    a_better_selected,
+                    b_better_selected,
+                    neither_selected,
+                    tie_selected,
+                    a_better_btn,
+                    b_better_btn,
+                    neither_btn,
+                    tie_btn,
+                    post_id_display,
+                    simplified_instruction_debug,
+                ],
+            )
 
-    # Handle confirmation button click
-    confirm_btn.click(
-        lambda verdict, state: evaluate(verdict, state),
-        inputs=[selected_verdict, state],
+    # Handle page visibility
+    def update_page_visibility(page_num):
+        """Return visibility updates for each page column"""
+        return [
+            gr.update(visible=(page_num == 1)),  # page1
+            gr.update(visible=(page_num == 2)),  # page2
+            gr.update(visible=(page_num == 3)),  # page3
+            gr.update(visible=(page_num == 4)),  # main_ui
+        ]
+
+    # Connect button clicks to page navigation
+    start_btn.click(
+        handle_username_submit,
+        inputs=[username_input, current_page],
+        outputs=[current_page, username_input],
+    ).then(
+        update_page_visibility,
+        inputs=[current_page],
+        outputs=[page1, page2, page3, main_ui],  # Control column visibility
+    ).then(
+        lambda x: gr.update(visible=x is None),
+        inputs=[current_page],
+        outputs=[validation_text],
+    )
+
+    next_btn1.click(
+        advance_page,
+        inputs=[current_page],
+        outputs=current_page,
+    ).then(
+        update_page_visibility,
+        inputs=[current_page],
+        outputs=[page1, page2, page3, main_ui],  # Control column visibility
+    )
+
+    next_btn2.click(
+        advance_page,
+        inputs=[current_page],
+        outputs=current_page,
+    ).then(
+        update_page_visibility,
+        inputs=[current_page],
+        outputs=[page1, page2, page3, main_ui],  # Control column visibility
+    ).then(
+        initialize,
         outputs=[
             source_image,
             image_a,
@@ -509,10 +667,6 @@ with gr.Blocks() as demo:
             b_better_selected,
             neither_selected,
             tie_selected,
-            a_better_btn,
-            b_better_btn,
-            neither_btn,
-            tie_btn,
             post_id_display,
             simplified_instruction_debug,
         ],