ui improvements

app.py

@@ -104,9 +104,12 @@ def create_gradio_interface():
     
     with gr.Blocks() as demo:
         gr.Markdown("## Crowdsourcing Handwriting OCR Dataset")
-        gr.LoginButton()
+        with gr.Row():
+            with gr.Column(scale=1, min_width=100):  # Just use scale and min_width to constrain the column
+                gr.LoginButton()
+            with gr.Column(scale=4):
+                pass
         user_info = gr.Markdown()
-        # Hidden state to hold the user's OAuth profile as JSON.
         profile_state = gr.JSON(visible=False)
         
         gr.Markdown(
@@ -114,10 +117,24 @@ def create_gradio_interface():
             "If you wish to skip the current text, click 'Skip'."
         )
         
-        text_box = gr.Textbox(value=collector.current_text_block, label="Text to Handwrite", interactive=False, visible=False)
+        text_box = gr.Textbox(
+            value=collector.current_text_block, 
+            label="Text to Handwrite", 
+            interactive=False, 
+            visible=False,
+            lines=10,  # Allow multiple lines
+            show_copy_button=True  # Optional: allows users to easily copy the text
+        )
         image_input = gr.Image(type="pil", label="Upload Handwritten Image", sources=["upload"], visible=False)
-        # Toggle (using a radio button) for dataset choice.
-        dataset_radio = gr.Radio(choices=["Private", "Public"], label="Select Dataset", value="Private", visible=False)
+        
+        # Add checkboxes and explanation text
+        gr.Markdown("### Select Datasets")
+        with gr.Column():
+            private_checkbox = gr.Checkbox(value=True, label="Private", interactive=True, visible=False)
+            private_explanation = gr.Markdown("*Private: Creates a new dataset on your account named '/handwriting-ocr-private' and appends data there.*", visible=False)
+            
+            public_checkbox = gr.Checkbox(value=True, label="Public", interactive=True, visible=False)
+            public_explanation = gr.Markdown("*Public: Will be added to our public dataset. By submitting, you are giving permission to be added to the dataset.*", visible=False)
         
         with gr.Row(visible=False) as button_row:
             submit_btn = gr.Button("Submit")
@@ -129,13 +146,13 @@ def create_gradio_interface():
             # Use the username provided by the profile (from the "profile" scope)
             return f"Logged in as: {profile.username}", {"username": profile.username}
     
-        def handle_submit(profile, dataset_choice, image, text):
+        def handle_submit(profile, private_checkbox, public_checkbox, image, text):
             if not profile or "username" not in profile:
                 raise gr.Error("Please log in to use this application")
             username = profile["username"]
             repo_id = f"{username}/handwriting-ocr-private"
             
-            if dataset_choice == "Private":
+            if private_checkbox:
                 # Remove all metadata for privacy
                 stripped_image = strip_metadata(image)
                 
@@ -184,7 +201,7 @@ def create_gradio_interface():
                 
                 new_text = collector.get_random_text_block()
                 return None, new_text
-            else:
+            elif public_checkbox:
                 # Fallback to public submission
                 new_text = collector.submit_image(image, text, username)
                 return None, new_text
@@ -196,20 +213,27 @@ def create_gradio_interface():
 
         def update_visibility(profile: gr.OAuthProfile | None):
             is_visible = profile is not None
-            # Update the visibility of text_box, image_input, button_row, and dataset_radio.
             return [
-                gr.update(visible=is_visible),
-                gr.update(visible=is_visible),
-                gr.update(visible=is_visible),
-                gr.update(visible=is_visible)
+                gr.update(visible=is_visible),  # text_box
+                gr.update(visible=is_visible),  # image_input
+                gr.update(visible=is_visible),  # button_row
+                gr.update(visible=is_visible),  # private_checkbox
+                gr.update(visible=is_visible),  # public_checkbox
+                gr.update(visible=is_visible),  # private explanation
+                gr.update(visible=is_visible),  # public explanation
             ]
 
         # On load, update both the display message and the hidden profile state.
         demo.load(update_user_info, inputs=None, outputs=[user_info, profile_state])
-        demo.load(update_visibility, inputs=None, outputs=[text_box, image_input, button_row, dataset_radio])
+        demo.load(update_visibility, inputs=None, 
+                 outputs=[text_box, image_input, button_row, 
+                         private_checkbox, public_checkbox,
+                         private_explanation, public_explanation])
         
         # Bind the submit and skip actions with updated inputs.
-        submit_btn.click(handle_submit, inputs=[profile_state, dataset_radio, image_input, text_box], outputs=[image_input, text_box])
+        submit_btn.click(handle_submit, 
+                        inputs=[profile_state, private_checkbox, public_checkbox, image_input, text_box], 
+                        outputs=[image_input, text_box])
         skip_btn.click(handle_skip, inputs=[profile_state, text_box], outputs=text_box)
 
     return demo