[#5] Hide voting buttons until responses are displayed (#14)

* [#5] Hide voting buttons until responses are displayed

Changes:
- Displayed the voting buttons only after the user has seen the full responses.

Screenshots:
- While the responses are being displayed: https://screen.yanolja.in/WJqqiGduLdAFssPT.png
- After the responses are displayed: https://screen.yanolja.in/LSD0wNpARLY3ELTB.png

* apply code review

* fix

---------

Co-authored-by: suhyun.kang <suhyun.kang@yanolja.group>

app.py

@@ -133,8 +133,7 @@ with gr.Blocks(title="Arena") as app:
       model_names[0] = gr.Textbox(show_label=False)
       model_names[1] = gr.Textbox(show_label=False)
 
-  # TODO(#5): Display it only after the user submits the prompt.
-  with gr.Row():
+  with gr.Row(visible=False) as vote_row:
     option_a = gr.Button(VoteOptions.MODEL_A.value)
     option_b = gr.Button(VoteOptions.MODEL_B.value)
     tie = gr.Button(VoteOptions.TIE.value)
@@ -145,7 +144,7 @@ with gr.Blocks(title="Arena") as app:
   submit.click(
       get_responses, [prompt, category_radio, source_language, target_language],
       response_boxes + model_names + vote_buttons +
-      [instruction_state, model_name_row])
+      [instruction_state, model_name_row, vote_row])
 
   common_inputs = response_boxes + model_names + [
       prompt, instruction_state, category_radio, source_language,

response.py

@@ -49,6 +49,8 @@ def get_responses(user_prompt, category, source_lang, target_lang):
 
   models = sample(SUPPORTED_MODELS, 2)
   instruction = get_instruction(category, source_lang, target_lang)
+  activated_vote_buttons = [gr.Button(interactive=True) for _ in range(3)]
+  deactivated_vote_buttons = [gr.Button(interactive=False) for _ in range(3)]
 
   generators = []
   for model in models:
@@ -86,9 +88,12 @@ def get_responses(user_prompt, category, source_lang, target_lang):
         responses[i] += yielded
         stop = False
 
-        yield responses + models + [
-            gr.Button(interactive=True) for _ in range(3)
-        ] + [instruction, gr.Row(visible=False)]
+        # model_name_row and vote_row are hidden during response generation.
+        yield responses + models + deactivated_vote_buttons + [
+            instruction,
+            gr.Row(visible=False),
+            gr.Row(visible=False)
+        ]
 
       except StopIteration:
         pass
@@ -100,3 +105,10 @@ def get_responses(user_prompt, category, source_lang, target_lang):
 
     if stop:
       break
+
+  # After generating the response, the vote_row should become visible,
+  # while the model_name_row should remain hidden.
+  yield responses + models + activated_vote_buttons + [
+      instruction, gr.Row(visible=False),
+      gr.Row(visible=True)
+  ]