Update app.py

app.py

@@ -30,8 +30,9 @@ DEFAILT_USERNAME_MESSAGE = "You must be logged in befor starting to label images
 REPO_URL = "glitchbench/GlitchBenchReviewData"
 DATASET_URL = "glitchbench/GlitchBench"
 
-SUBMIT_MESSAGE = "Submit the description"
-SKIP_MESSAGE = "Skip, I can not spot the bug!"
+SUBMIT_MESSAGE = "✅  Submit the description"
+IDUNNU_MESSAGE = "🤷 I don't know what to do with this image"
+SKIP_MESSAGE = "⏭️ Skip, for now"
 
 glitchbench_dataset = load_dataset(DATASET_URL)["validation"]
 dataset_size = len(glitchbench_dataset)
@@ -44,6 +45,61 @@ JSON_DATASET_DATA_DIR = JSON_DATASET_DIR / "data"
 JSON_DATASET_PATH = JSON_DATASET_DATA_DIR / f"labels-{uuid4()}.json"
 
 
+INSTRUCTIONS = """
+            <div>
+                <section>
+                    <h2>Introduction</h2>
+                    <p>Welcome to the GlitchBench Dataset Labeling Tool! Your contribution is vital in helping us clean and label the dataset accurately. This tool is designed to be intuitive and user-friendly, allowing you to view images from the dataset and provide descriptions.</p>
+                </section>
+
+                <section>
+                    <h2>How to Label Images</h2>
+                    <ol>
+                        <li><strong>Login:</strong> Use the login button at the top to login with your Hugging Face Account.</li>
+                        <li><strong>Start Labeling:</strong> Click the 'Start Labeling' button to begin.</li>
+                        <li><strong>View Image:</strong> An image from the GlitchBench dataset will be displayed.</li>
+                        <li><strong>Describe the Image:</strong> Write a brief description about what is wrong or unusual about the image, focusing on the strange/unusual aspect. The description should be brief and concise.</li>
+                        <li><strong>Submit:</strong> Click 'Submit' to save your description. You can also use 'I Don't Know' if you can't spot the bug or unusual part of the image, or 'Skip' if you don't want to provide a description for the given image.</li>
+                        <li><strong>Continue:</strong> Move on to the next image and repeat the process.</li>
+                    </ol>
+                </section>
+
+
+                <section>
+                    <h2>Examples</h2>
+                    <table style="width:100%">
+                        <tr>
+                            <th>Image</th>
+                            <th>Sample Description</th>
+                            <th>Image</th>
+                            <th>Sample Description</th>
+                        </tr>
+                        <tr>
+                            <td><img src="https://glitchbench.github.io/static/instructions/flying-horse.jpeg" alt="flying horse" style="width:100%; max-width:300px;"></td>
+                            <td>"A horse floating in the air", or "A person riding a horse flying in the air"</td>
+                            <td><img src="https://glitchbench.github.io/static/instructions/t-pose.jpeg" alt="t-pose" style="width:100%; max-width:300px;"></td>
+                            <td>"A character performing a T-pose"</td>
+                        </tr>
+                        <tr>
+                            <td><img src="https://glitchbench.github.io/static/instructions/a-dog-clipping-with-door.webp" alt="dog in the door" style="width:100%; max-width:300px;"></td>
+                            <td>"A dog is clipping through the door"</td>
+                            <td><img src="https://glitchbench.github.io/static/instructions/low-poly-face.avif" alt="low-poly face" style="width:100%; max-width:300px;"></td>
+                            <td>"A person with a low-poly face"</td>
+                        </tr>
+                        <tr>
+                            <td><img src="https://glitchbench.github.io/static/instructions/unnatural-hand-position.jpeg" alt="unnatural hands" style="width:100%; max-width:300px;"></td>
+                            <td>"A person with unnatural hand positions."</td>
+                            <td><img src="https://glitchbench.github.io/static/instructions/stretched_neck.jpeg" alt="unnatural neck" style="width:100%; max-width:300px;"></td>
+                            <td>"A person with a stretched neck."</td>
+                        </tr>
+                    </table>
+                </section>
+
+
+            </div>
+        """
+
+
 if not JSON_DATASET_DIR.exists():
     JSON_DATASET_DIR.mkdir()
 
@@ -141,7 +197,10 @@ def write_user_description(username_label, image_id, user_description, skip_or_s
 
 with gr.Blocks() as demo:
     gr.Markdown("## GlitchBench Dataset Labeling Tool")
-    gr.Markdown("Help us to clean and label the GlitchBench dataset.")
+    gr.Markdown("Help us to improve our GlitchBench dataset.")
+
+    with gr.Accordion("Instructions"):
+        gr.HTML(INSTRUCTIONS)
 
     with gr.Row():
         username_label = gr.Text(label="Username", interactive=False)
@@ -152,14 +211,15 @@ with gr.Blocks() as demo:
 
     username_label.attach_load_event(set_username, None)
 
-    glitch_image = gr.Image(label="Image")
-    glitch_image_id = gr.Textbox(label="Image ID", visible=False)
-
     with gr.Row():
-        user_description = gr.Textbox(lines=5, label="Description")
-        with gr.Column():
-            submit_button = gr.Button(SUBMIT_MESSAGE)
-            Skip_btton = gr.Button(SKIP_MESSAGE)
+        with gr.Column(scale=5, min_width=500):
+            glitch_image = gr.Image(label="Image")
+            glitch_image_id = gr.Textbox(label="Image ID", visible=False)
+        with gr.Column(scale=3, min_width=200):
+            user_description = gr.Textbox(lines=5, label="Description")
+            submit_btn = gr.Button(SUBMIT_MESSAGE)
+            idunnu_btn = gr.Button(IDUNNU_MESSAGE)
+            skip_btn = gr.Button(SKIP_MESSAGE)
 
     remaining_batch = gr.State()
 
@@ -171,9 +231,9 @@ with gr.Blocks() as demo:
         outputs=[glitch_image, glitch_image_id, user_description],
     )
 
-    submit_button.click(
+    submit_btn.click(
         write_user_description,
-        inputs=[username_label, glitch_image_id, user_description, submit_button],
+        inputs=[username_label, glitch_image_id, user_description, submit_btn],
         outputs=[],
     ).then(
         show_random_sample,
@@ -181,9 +241,9 @@ with gr.Blocks() as demo:
         outputs=[glitch_image, glitch_image_id, user_description],
     )
 
-    Skip_btton.click(
+    idunnu_btn.click(
         write_user_description,
-        inputs=[username_label, glitch_image_id, user_description, Skip_btton],
+        inputs=[username_label, glitch_image_id, user_description, idunnu_btn],
         outputs=[],
     ).then(
         show_random_sample,