UX Optimizations (#3)

- Update the Generate button value and interactivity to clarify when the system is generating (7894bef49b93a70c3210ef5bbad5db2f1e516651)
- Provide only a single hands-on example, to expedite generation (8834ce585ba6b459b6d72c9c0b9850d24daaa16b)
- Fix typos (9706b48ae93bf82579e585fa19bc3c7e3195c335)
- Update the Space title, so that browser tabs use the standard capitalization (ee678658c03554a8e5ffa381d11c2f0ae4ba9b25)


Co-authored-by: Neal DeBuhr <[email protected]>

README.md

@@ -1,5 +1,5 @@
 ---
-title: Synthid Text
+title: SynthID Text
 emoji: 🏃
 colorFrom: pink
 colorTo: gray

app.py

@@ -23,8 +23,8 @@ _DETECTOR_IDENTIFIER = 'google/synthid-spaces-demo-detector'
 
 _PROMPTS: Tuple[str] = (
     'Write an essay about my pets, a cat named Mika and a dog named Cleo.',
-    'Tell me everything you can about Portugal.',
-    'What is Hugging Face?',
+    '',
+    '',
 )
 
 _TORCH_DEVICE = (
@@ -144,13 +144,13 @@ with gr.Blocks() as demo:
 
     1.  How to use SynthID Text to apply a watermark to text generated by your
         model; and
-    1.  How to indetify that text using a ready-made detector.
+    1.  How to identify that text using a ready-made detector.
 
-    Note that this detector is trained specifically fore this demonstration. You
+    Note that this detector is trained specifically for this demonstration. You
     should maintain a specific watermarking configuration for every model you
     use and protect that configuration as you would any other secret. See the
     [end-to-end guide][synthid-hf-detector-e2e] for more on training your own
-    detectors, and the [SynthID Text documentaiton][raitk-synthid] for more on
+    detectors, and the [SynthID Text documentation][raitk-synthid] for more on
     how this technology works.
 
     ## Applying a watermark
@@ -215,10 +215,10 @@ with gr.Blocks() as demo:
     Lets use [Gemma 2B IT][gemma] to help you understand how watermarking works.
 
     Using the text boxes below enter up to three prompts then click the generate
-    button. Some examples are provided to help get you started, but they are
+    button. An example is provided to help get you started, but the cells are
     fully editable.
 
-    Gemma will then generate watermarked and non-watermarked repsonses for each
+    Gemma will then generate watermarked and non-watermarked responses for each
     non-empty prompt you provided.
 
     [cloud-parameter-values]: https://cloud.google.com/vertex-ai/generative-ai/docs/learn/prompts/adjust-parameter-values
@@ -244,7 +244,7 @@ with gr.Blocks() as demo:
       ## Human recognition of watermarked text
 
       The primary goal of SynthID Text is to apply a watermark to generated text
-      wihtout affecting generation quality. Another way to think about this is
+      without affecting generation quality. Another way to think about this is
       that generated text that carries a watermark should be imperceptible to
       you, the reader, but easily perceived by a watermark detector.
 
@@ -253,7 +253,7 @@ with gr.Blocks() as demo:
       see the true values.
 
       The [research paper][synthid-nature] has an in-depth study examining human
-      perception of watermared versus non-watermarked text.
+      perception of watermarked versus non-watermarked text.
 
       [synthid-nature]: https://www.nature.com/articles/s41586-024-08025-4
       '''
@@ -277,7 +277,7 @@ with gr.Blocks() as demo:
       [end-to-end example][synthid-hf-detector-e2e] of how to train one of these
       detectors.
 
-      You can see how your guesses compared to the actaul results below. As
+      You can see how your guesses compared to the actual results below. As
       above, the responses are displayed in checkboxes. If the box is checked,
       then the text carries a watermark. Your correct guesses are annotated with
       the "Correct" prefix.
@@ -354,6 +354,8 @@ with gr.Blocks() as demo:
     }
 
   generate_btn.click(
+    lambda: gr.update(value='Generating...', interactive=False), None, generate_btn
+  ).then(
      generate,
      inputs=prompt_inputs,
      outputs=[generate_btn, generations_col, generations_grp, reveal_btn]
@@ -402,7 +404,7 @@ with gr.Blocks() as demo:
         detections_col: gr.Column(visible=False),
         revealed_grp: gr.CheckboxGroup(visible=False),
         reset_btn: gr.Button(visible=False),
-        generate_btn: gr.Button(visible=True),
+        generate_btn: gr.Button(value='Generate', interactive=True, visible=True),
     }
 
   reset_btn.click(