next round btn: new random blurred text

app/ui_vote.py

@@ -4,13 +4,17 @@ from .synth import *
 from .vote import *
 from .messages import *
 
-unblur_js = 'document.getElementById("arena-text-input").classList.remove("blurred-text")'
+blur_text_js = 'document.getElementById("arena-text-input").classList.add("blurred-text")'
+unblur_text_js = 'document.getElementById("arena-text-input").classList.remove("blurred-text")'
 
 def disable():
     return [gr.update(interactive=False), gr.update(interactive=False), gr.update(interactive=False)]
 def enable():
     return [gr.update(interactive=True), gr.update(interactive=True), gr.update(interactive=True)]
-
+def blur_text():
+    return gr.update(elem_classes=['blurred-text'])
+def unblur_text():
+    return gr.update(elem_classes=[])
 
 with gr.Blocks() as vote:
     # sample played
@@ -32,7 +36,9 @@ with gr.Blocks() as vote:
                 elem_id="arena-text-input",
             )
             randomt = gr.Button('🎲', scale=0, min_width=0, variant='tool')
-        randomt.click(randomsent, outputs=[text, randomt])
+        randomt\
+            .click(randomsent, outputs=[text, randomt])\
+            .then(None, js="() => "+ unblur_text_js)
         btn = gr.Button("Synthesize", variant='primary')
     model1 = gr.Textbox(interactive=False, lines=1, max_lines=1, visible=False)
     #model1 = gr.Textbox(interactive=False, lines=1, max_lines=1, visible=True)
@@ -93,12 +99,25 @@ with gr.Blocks() as vote:
         gr.update(visible=False), #prevmodel1
         gr.update(visible=False), #prevmodel2
         gr.update(visible=False), #nxt round btn"""
-    btn.click(disable, outputs=[btn, abetter, bbetter]).then(synthandreturn, inputs=[text], outputs=outputs).then(enable, outputs=[btn, abetter, bbetter])
-    nxtroundbtn.click(clear_stuff, outputs=outputs)
+    btn\
+        .click(disable, outputs=[btn, abetter, bbetter])\
+        .then(synthandreturn, inputs=[text], outputs=outputs)\
+        .then(enable, outputs=[btn, abetter, bbetter])\
+        .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])
+    # 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)
 
     # nxt_outputs = [prevmodel1, prevmodel2, abetter, bbetter]
     nxt_outputs = [abetter, bbetter, prevmodel1, prevmodel2, nxtroundbtn]