Hide scenario on record

app.py

@@ -93,13 +93,13 @@ def init_interface(
 
 You will be presented with a series of scenarios. For each scenario, please:
 
-1. **Formulate a Query**: Imagine how you would ask Google Maps about the scenario using voice input. **Be as creative as you like!** Feel free to use different phrasings, expressions, or styles that you think are natural.
+1. **Formulate Your Query**: Read the scenario and imagine how you would ask Google Maps about it using voice input. <u>Be as creative as you like</u>! You can try different phrasings, expressions, or styles that feel natural.
 
-2. **Take a Screenshot**: Capture the Google Maps results page that shows the system's response.
+2. **Record Your Query**: Once you're ready, hit “record” and at the same time, speak your query to Google Maps. Once recording starts, the scenario will be hidden, so make sure your query is ready in your mind!
 
-3. **Record Your Audio**: Speak your query again and upload the recording.
+3. **Take a Screenshot**: After recording, capture the Google Maps results page that shows the system's response and upload it.
 
-4. **Evaluate the Result**: Tell us whether Google Maps gave a satisfactory response. If not, explain why.
+4. **Evaluate the Result**: Tell us whether Google Maps gave a satisfactory response. If not, please explain why.
 
 5. **Provide a Transcript**: Post-edit and submit a written version of what you said in your query.
 
@@ -439,6 +439,12 @@ if __name__ == "__main__":
                     # transcribe audio after upload
                     audio_input.input(fn=transcribe_audio, inputs=audio_input, outputs=transcript_input)
 
+                    # hide scenario text when user starts recording
+                    audio_input.start_recording(fn=lambda: gr.update(visible=False), outputs=scenario_input)
+
+                    # show scenario text when user stops recording
+                    audio_input.stop_recording(fn=lambda: gr.update(visible=True), outputs=scenario_input)
+
                 with gr.Column():
                     image_input = gr.Image(type="filepath", label="Image Upload (Google Maps Screenshot)", height=600)
                     expected_output = gr.Textbox(label="What did you expect Google Maps to return?")