autoplay checkbox & unlock vote

app/synth.py

@@ -21,7 +21,7 @@ def check_toxicity(text):
         return False
     return toxicity.predict(text)['toxicity'] > 0.8
 
-def synthandreturn(text, request: gr.Request):
+def synthandreturn(text, autoplay, request: gr.Request):
     text = text.strip()
     if len(text) > MAX_SAMPLE_TXT_LENGTH:
         raise gr.Error(f'You exceeded the limit of {MAX_SAMPLE_TXT_LENGTH} characters')
@@ -250,8 +250,8 @@ def synthandreturn(text, request: gr.Request):
         gr.update(visible=True), # r2
         mdl1, # model1
         mdl2, # model2
-        gr.update(visible=True, value=results[mdl1k]), # aud1
-        gr.update(visible=True, value=results[mdl2k]), # aud2
+        gr.update(visible=True, value=results[mdl1k], autoplay=autoplay), # aud1
+        gr.update(visible=True, value=results[mdl2k], autoplay=False), # aud2
         gr.update(visible=True, interactive=False), #abetter
         gr.update(visible=True, interactive=False), #bbetter
         gr.update(visible=False), #prevmodel1
@@ -261,7 +261,7 @@ def synthandreturn(text, request: gr.Request):
 
 # Battle Mode
 
-def synthandreturn_battle(text, mdl1, mdl2):
+def synthandreturn_battle(text, mdl1, mdl2, autoplay):
     if mdl1 == mdl2:
         raise gr.Error('You can\'t pick two of the same models.')
     text = text.strip()
@@ -346,8 +346,8 @@ def synthandreturn_battle(text, mdl1, mdl2):
         gr.update(visible=True), # r2
         mdl1, # model1
         mdl2, # model2
-        gr.update(visible=True, value=results[mdl1k]), # aud1
-        gr.update(visible=True, value=results[mdl2k]), # aud2
+        gr.update(visible=True, value=results[mdl1k], autoplay=autoplay), # aud1
+        gr.update(visible=True, value=results[mdl2k], autoplay=False), # aud2
         gr.update(visible=True, interactive=False), #abetter
         gr.update(visible=True, interactive=False), #bbetter
         gr.update(visible=False), #prevmodel1

app/ui_battle.py

@@ -13,7 +13,7 @@ def enable():
 
 with gr.Blocks() as battle:
     battle_useridstate = gr.State()
-    
+
     gr.Markdown(BATTLE_INSTR)
     model1 = gr.Textbox(interactive=False, lines=1, max_lines=1, visible=False)
     model2 = gr.Textbox(interactive=False, lines=1, max_lines=1, visible=False)
@@ -39,6 +39,11 @@ with gr.Blocks() as battle:
                 aud2 = gr.Audio(interactive=False, show_label=False, show_download_button=False, show_share_button=False)
                 bbetter = gr.Button("B is better", variant='primary')
                 prevmodel2 = gr.Textbox(interactive=False, show_label=False, container=False, value="Vote to reveal model B", text_align="center", lines=1, max_lines=1, visible=False)
+    autoplay = gr.Checkbox(
+        label="Autoplay audio",
+        value=True
+    )
+
     outputs = [
         text,
         btn,
@@ -52,8 +57,19 @@ with gr.Blocks() as battle:
         prevmodel1,
         prevmodel2,
     ]
-    btn.click(disable, outputs=[btn, abetter, bbetter]).then(synthandreturn_battle, inputs=[text, model1s, model2s], outputs=outputs).then(enable, outputs=[btn, abetter, bbetter])
+    btn\
+        .click(disable, outputs=[btn, abetter, bbetter])\
+        .then(synthandreturn_battle, inputs=[text, model1s, model2s, autoplay], outputs=outputs)\
+        .then(enable, outputs=[btn, abetter, bbetter])
     nxt_outputs = [abetter, bbetter, prevmodel1, prevmodel2]
     abetter.click(a_is_better_battle, outputs=nxt_outputs, inputs=[model1, model2, battle_useridstate])
     bbetter.click(b_is_better_battle, outputs=nxt_outputs, inputs=[model1, model2, battle_useridstate])
     battle.load(random_m, outputs=[model1s, model2s])
+
+    # Autoplay second audio using JS
+    aud1\
+        .stop(
+            None,
+            inputs=[autoplay],
+            js="(b) => b ? 0 : document.querySelector('.row .gap+.gap button.play-pause-button[aria-label=Play]').click()",
+        )

app/ui_vote.py

@@ -16,10 +16,27 @@ def blur_text():
 def unblur_text():
     return gr.update(elem_classes=[])
 
-with gr.Blocks() as vote:
+def unlock_vote(autoplay, btn_index, aplayed, bplayed):
+    if autoplay == False:
+        return [gr.update(), gr.update(), aplayed, bplayed]
+
     # sample played
-    #aplayed = gr.State(value=False)
-    #bplayed = gr.State(value=False)
+    if btn_index == 0:
+        aplayed = True
+    if btn_index == 1:
+        bplayed = True
+
+    # both audio samples played
+    if bool(aplayed) and bool(bplayed):
+        # print('Both audio samples played, voting unlocked')
+        return [gr.update(interactive=True), gr.update(interactive=True), True, True]
+
+    return [gr.update(), gr.update(), aplayed, bplayed]
+
+with gr.Blocks() as vote:
+    # sample played, using Checkbox so that JS can fetch the value
+    aplayed = gr.Checkbox(visible=False, value=False)
+    bplayed = gr.Checkbox(visible=False, value=False)
     # voter ID
     useridstate = gr.State()
     gr.Markdown(INSTR)
@@ -47,7 +64,14 @@ with gr.Blocks() as vote:
     with gr.Row(visible=False) as r2:
         with gr.Column():
             with gr.Group():
-                aud1 = gr.Audio(interactive=False, show_label=False, show_download_button=False, show_share_button=False)
+                aud1 = gr.Audio(
+                    interactive=False,
+                    show_label=False,
+                    show_download_button=False,
+                    show_share_button=False,
+                    # waveform_options={'waveform_progress_color': '#EF4444'},
+                    # var(--color-red-500)'}); gradio only accepts HEX and CSS color
+                )
                 abetter = gr.Button(
                     "[A] is better",
                     elem_id='arena-a-better',
@@ -57,7 +81,14 @@ with gr.Blocks() as vote:
                 prevmodel1 = gr.Textbox(interactive=False, show_label=False, container=False, value="Vote to reveal model A", text_align="center", lines=1, max_lines=1, visible=False)
         with gr.Column():
             with gr.Group():
-                aud2 = gr.Audio(interactive=False, show_label=False, show_download_button=False, show_share_button=False)
+                aud2 = gr.Audio(
+                    interactive=False,
+                    show_label=False,
+                    show_download_button=False,
+                    show_share_button=False,
+                    waveform_options={'waveform_progress_color': '#3C82F6'},
+                    # var(--secondary-500)'}); gradio only accepts HEX and CSS color
+                )
                 bbetter = gr.Button(
                     "[B] is better",
                     elem_id='arena-b-better',
@@ -71,7 +102,11 @@ with gr.Blocks() as vote:
         visible=False,
         variant='primary',
     )
-    # outputs = [text, btn, r2, model1, model2, prevmodel1, aud1, prevmodel2, aud2, abetter, bbetter]
+    autoplay = gr.Checkbox(
+        label="Autoplay audio",
+        value=True
+    )
+
     outputs = [
         text,
         btn,
@@ -99,27 +134,43 @@ with gr.Blocks() as vote:
         gr.update(visible=False), #prevmodel1
         gr.update(visible=False), #prevmodel2
         gr.update(visible=False), #nxt round btn"""
+    # , concurrency_count=1, concurrency_id="sync_queue"
     btn\
         .click(disable, outputs=[btn, abetter, bbetter])\
-        .then(synthandreturn, inputs=[text], outputs=outputs)\
-        .then(enable, outputs=[btn, abetter, bbetter])\
+        .then(synthandreturn, inputs=[text, autoplay], outputs=outputs)\
+        .then(enable, outputs=[btn, gr.State(), gr.State()])\
         .then(None, js="() => "+ unblur_text_js)
     # Next Round ; blur text
     nxtroundbtn\
         .click(clear_stuff, outputs=outputs)\
         .then(randomsent, outputs=[text, randomt])\
-        .then(synthandreturn, inputs=[text], outputs=outputs)\
-        .then(enable, outputs=[btn, abetter, bbetter])
+        .then(synthandreturn, inputs=[text, autoplay], outputs=outputs)\
+        .then(enable, outputs=[btn, gr.State(), gr.State()])
     # blur text
     nxtroundbtn.click(None, js="() => "+ blur_text_js)
 
     # Allow interaction with the vote buttons only when both audio samples have finished playing
-    #aud1.stop(unlock_vote, outputs=[abetter, bbetter, aplayed, bplayed], inputs=[gr.State(value=0), aplayed, bplayed])
-    #aud2.stop(unlock_vote, outputs=[abetter, bbetter, aplayed, bplayed], inputs=[gr.State(value=1), aplayed, bplayed])
-    # faster than sending output with elem_classes
-    aud2.stop(None, js="() => "+ unblur_text_js)
+    aud1\
+        .stop(
+            unlock_vote,
+            outputs=[abetter, bbetter, aplayed, bplayed],
+            inputs=[autoplay, gr.State(value=0), aplayed, bplayed],
+        )\
+        .then(
+            None,
+            inputs=[bplayed if autoplay else True],
+            js="(b) => b ? 0 : document.querySelector('.row .gap+.gap button.play-pause-button[aria-label=Play]').click()",
+        )
+    # autoplay if unplayed
+    aud2\
+        .stop(
+            unlock_vote,
+            outputs=[abetter, bbetter, aplayed, bplayed],
+            inputs=[autoplay, gr.State(value=1), aplayed, bplayed],
+        )
+    # unblur text with JS; faster than sending output with elem_classes
+    aud2.stop(None, inputs=[aplayed], js="(a) => a ? "+ unblur_text_js +" : 0;")
 
-    # nxt_outputs = [prevmodel1, prevmodel2, abetter, bbetter]
     nxt_outputs = [abetter, bbetter, prevmodel1, prevmodel2, nxtroundbtn]
     abetter.click(a_is_better, outputs=nxt_outputs, inputs=[model1, model2, useridstate])
     bbetter.click(b_is_better, outputs=nxt_outputs, inputs=[model1, model2, useridstate])