ui improvements for logged in vs not

app.py

@@ -1,11 +1,13 @@
 import gradio as gr
-import random
-import os
-from datetime import datetime
-from huggingface_hub import HfApi
-from typing import Optional
-from PIL import Image  # Needed for working with PIL images
-import datasets
+# Import statements that should only run once
+if gr.NO_RELOAD:
+    import random
+    import os
+    from datetime import datetime
+    from huggingface_hub import HfApi
+    from typing import Optional
+    from PIL import Image  # Needed for working with PIL images
+    import datasets
 
 # The list of sentences from our previous conversation.
 sentences = [
@@ -64,13 +66,19 @@ sentences = [
 class OCRDataCollector:
     def __init__(self):
         self.collected_pairs = []
-        self.current_text_block = self.get_random_text_block()
+        self.current_text_block = self.get_random_text_block(201)  # Default max words
         self.hf_api = HfApi()
 
-    def get_random_text_block(self):
+    def get_random_text_block(self, max_words: int):
         block_length = random.randint(1, 5)
         start_index = random.randint(0, len(sentences) - block_length)
         block = " ".join(sentences[start_index:start_index + block_length])
+        
+        # Truncate to max_words if necessary
+        words = block.split()
+        if len(words) > max_words:
+            block = " ".join(words[:max_words])
+        
         return block
 
     def submit_image(self, image, text_block, username: Optional[str] = None):
@@ -82,10 +90,10 @@ class OCRDataCollector:
                 "timestamp": timestamp,
                 "username": username
             })
-        return self.get_random_text_block()
+        return self.get_random_text_block(201)
 
     def skip_text(self, text_block, username: Optional[str] = None):
-        return self.get_random_text_block()
+        return self.get_random_text_block(201)
 
 
 def strip_metadata(image: Image.Image) -> Image.Image:
@@ -103,50 +111,118 @@ def create_gradio_interface():
     collector = OCRDataCollector()
     
     with gr.Blocks() as demo:
-        gr.Markdown("## Crowdsourcing Handwriting OCR Dataset")
+        gr.Markdown("# Handwriting OCR Dataset Creator")
+        gr.Markdown("## After almost 100 years, handwriting recognition still sucks. Together, we can change that.")
+        gr.Markdown("### Step 1: Log in with your Hugging Face account to use this app.")
+        # Login section - centered
         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):
+            with gr.Column(scale=1):
+                pass
+            with gr.Column(scale=2, min_width=200):
+                login_btn = gr.LoginButton(elem_id="login_btn")
+                user_info = gr.Markdown(
+                    value="<center>Please log in with your Hugging Face account to contribute to the dataset.</center>",
+                    elem_id="user_info"
+                )
+                profile_state = gr.JSON(visible=False, elem_id="profile_state")
+            with gr.Column(scale=1):
                 pass
-        user_info = gr.Markdown()
-        profile_state = gr.JSON(visible=False)
         
+        # Instructions (always visible)
         gr.Markdown(
+            "### Step 2: Read the text. "
             "You will be shown between 1 and 5 consecutive sentences. Please handwrite them on paper and upload an image of your handwriting. "
+            "You can change the maximum number of words you are willing to write by using the slider below. "
             "If you wish to skip the current text, click 'Skip'."
         )
         
+        # Main interface elements (initially visible)
         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
+            value=collector.current_text_block,
+            label="Text to Handwrite",
+            interactive=False,
+            lines=10,
+            show_copy_button=True,
+            visible=True,
+            elem_id="text_box"
+        )
+
+        max_words_slider = gr.Slider(
+            1, 201, step=5, value=201,
+            label="Maximum Number of Words",
+            interactive=True,
+            visible=True,
+            elem_id="max_words_slider"
+        )
+
+        regenerate_btn = gr.Button(
+            "Regenerate Text",
+            visible=True,
+            elem_id="regenerate_btn"
         )
-        image_input = gr.Image(type="pil", label="Upload Handwritten Image", sources=["upload"], visible=False)
+
+        # Step 3 section
+        gr.Markdown("### Step 3: Upload an image of your handwritten version of the text")
         
-        # 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)
+        # Message that changes based on login state
+        upload_info = gr.Markdown(
+            value="You must be logged in to do this, to help us prevent spam submissions",
+            elem_id="upload_info"
+        )
+
+        # Image upload and related components
+        image_input = gr.Image(
+            type="pil",
+            label="Upload Handwritten Image",
+            sources=["upload"],
+            visible=False,
+            elem_id="image_input"
+        )
+
+        with gr.Column(visible=False) as dataset_options:
+            private_checkbox = gr.Checkbox(
+                value=True,
+                label="Private",
+                interactive=True,
+                elem_id="private_cb"
+            )
+            private_explanation = gr.Markdown(
+                "*Private: Creates a new dataset on your account named '/handwriting-ocr-private' and appends data there.*",
+                elem_id="private_exp"
+            )
             
-            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)
+            public_checkbox = gr.Checkbox(
+                value=True,
+                label="Public",
+                interactive=True,
+                elem_id="public_cb"
+            )
+            public_explanation = gr.Markdown(
+                "*Public: Will be added to our public dataset. By submitting, you are giving permission to be added to the dataset.*",
+                elem_id="public_exp"
+            )
         
         with gr.Row(visible=False) as button_row:
-            submit_btn = gr.Button("Submit")
-            skip_btn = gr.Button("Skip")
-        
-        def update_user_info(profile: gr.OAuthProfile | None):
+            submit_btn = gr.Button("Submit", elem_id="submit_btn")
+
+        def update_ui_visibility(profile: gr.OAuthProfile | None) -> dict:
+            """Update visibility of UI elements based on login state"""
+            is_logged_in = profile is not None
+            message = "Please upload your handwritten image of the text below." if is_logged_in else "You must be logged in to do this, to help us prevent spam submissions"
+            
+            return {
+                upload_info: gr.update(value=message),
+                image_input: gr.update(visible=is_logged_in),
+                dataset_options: gr.update(visible=is_logged_in),
+                button_row: gr.update(visible=is_logged_in)
+            }
+
+        def update_user_info(profile: Optional[dict]) -> tuple[str, dict]:
             if profile is None:
-                return "Please log in with your Hugging Face account to contribute to the dataset.", {}
-            # 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, private_checkbox, public_checkbox, image, text):
+                return "<center>Please log in with your Hugging Face account to contribute to the dataset.</center>", {}
+            return f"<center>Logged in as: {profile['username']}</center>", {"username": profile["username"]}
+
+        def handle_submit(profile, private_checkbox, public_checkbox, image, text, max_words):
             if not profile or "username" not in profile:
                 raise gr.Error("Please log in to use this application")
             username = profile["username"]
@@ -199,42 +275,51 @@ def create_gradio_interface():
                     "dataset": "private"
                 })
                 
-                new_text = collector.get_random_text_block()
+                new_text = collector.get_random_text_block(max_words)
                 return None, new_text
             elif public_checkbox:
                 # Fallback to public submission
-                new_text = collector.submit_image(image, text, username)
+                new_text = collector.get_random_text_block(max_words)
                 return None, new_text
 
-        def handle_skip(profile, text):
-            if not profile or "username" not in profile:
-                raise gr.Error("Please log in to use this application")
-            return collector.skip_text(text, profile["username"])
-
-        def update_visibility(profile: gr.OAuthProfile | None):
-            is_visible = profile is not None
-            return [
-                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
-            ]
+        def handle_regenerate(profile, text, max_words):
+            # Remove the login check - allow anyone to regenerate text
+            return collector.get_random_text_block(max_words)
 
         # 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, 
-                         private_checkbox, public_checkbox,
-                         private_explanation, public_explanation])
+        demo.load(
+            fn=update_user_info,
+            inputs=None,
+            outputs=[user_info, profile_state]
+        )
+        
+        # Update UI when login state changes
+        demo.load(
+            fn=update_ui_visibility,
+            inputs=None,
+            outputs=[
+                upload_info,
+                image_input,
+                dataset_options,
+                button_row
+            ]
+        )
         
-        # Bind the submit and skip actions with updated inputs.
-        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)
+        # Bind the submit and skip actions
+        submit_btn.click(
+            fn=handle_submit,
+            inputs=[
+                profile_state, private_checkbox, public_checkbox,
+                image_input, text_box, max_words_slider
+            ],
+            outputs=[image_input, text_box]
+        )
+        
+        regenerate_btn.click(
+            fn=handle_regenerate,
+            inputs=[profile_state, text_box, max_words_slider],
+            outputs=text_box
+        )
 
     return demo