import gradio as gr from .config import * from .synth import * from .vote import * from .messages import * from .sample_caching import * 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), gr.update(interactive=False)] def enable(): return [gr.update(interactive=True), 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: session_hash = gr.Textbox(visible=False, value='') # 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) with gr.Group(): with gr.Row(): cachedt = gr.Button('⚡', scale=0, min_width=0, variant='tool', interactive=True) text = gr.Textbox( container=False, show_label=False, placeholder="Enter text to synthesize", lines=1, max_lines=1, scale=9999999, min_width=0, elem_id="arena-text-input", ) randomt = gr.Button('🎲', scale=0, min_width=0, variant='tool') randomt\ .click(randomsent, outputs=[cachedt, 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) model2 = gr.Textbox(interactive=False, lines=1, max_lines=1, visible=False) 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, # 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', variant='primary', interactive=False, ) prevmodel1 = gr.HTML( show_label=False, value="Vote to reveal model A", visible=False, ) with gr.Column(): with gr.Group(): 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', variant='primary', interactive=False, ) prevmodel2 = gr.HTML( show_label=False, value="Vote to reveal model B", visible=False, ) nxtroundbtn = gr.Button( '⚡ [N]ext round', elem_id='arena-next-round', visible=False, variant='primary', ) autoplay = gr.Checkbox( label="Autoplay audio", value=True ) outputs = [ text, btn, r2, model1, model2, aud1, aud2, abetter, bbetter, prevmodel1, prevmodel2, nxtroundbtn, aplayed, bplayed, ] """ text, "Synthesize", gr.update(visible=True), # r2 mdl1, # model1 mdl2, # model2 gr.update(visible=True, value=results[mdl1]), # aud1 gr.update(visible=True, value=results[mdl2]), # aud2 gr.update(visible=True, interactive=False), #abetter gr.update(visible=True, interactive=False), #bbetter 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, cachedt])\ .then(synthandreturn, inputs=[text, autoplay], outputs=outputs)\ .then(enable, outputs=[btn, gr.State(), gr.State(), gr.State()])\ .then(None, js="() => "+ unblur_text_js) # Next Round ; blur text nxtroundbtn\ .click(clear_stuff, outputs=outputs)\ .then(disable, outputs=[btn, abetter, bbetter, cachedt])\ .then(give_cached_sample, inputs=[session_hash, autoplay], outputs=[*outputs, cachedt])\ .then(enable, outputs=[btn, gr.State(), gr.State(), gr.State()]) # blur text nxtroundbtn.click(None, js="() => "+ blur_text_js) # fetch a comparison pair from cache cachedt\ .click(disable, outputs=[btn, abetter, bbetter, cachedt])\ .then(give_cached_sample, inputs=[session_hash, autoplay], outputs=[*outputs, cachedt])\ .then(enable, outputs=[btn, gr.State(), gr.State(), gr.State()]) # TODO: await download of sample before allowing playback # Allow interaction with the vote buttons only when both audio samples have finished playing aud1\ .stop( unlock_vote, inputs=[autoplay, gr.State(value=0), aplayed, bplayed], outputs=[abetter, bbetter, 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, inputs=[autoplay, gr.State(value=1), aplayed, bplayed], outputs=[abetter, bbetter, 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 = [abetter, bbetter, prevmodel1, prevmodel2, nxtroundbtn] abetter\ .click(a_is_better, outputs=nxt_outputs, inputs=[model1, model2, useridstate, text])\ .then(voted_on_cached, inputs=[model1, model2, text, session_hash], outputs=[]) bbetter\ .click(b_is_better, outputs=nxt_outputs, inputs=[model1, model2, useridstate, text])\ .then(voted_on_cached, inputs=[model1, model2, text, session_hash], outputs=[]) # get session cookie vote\ .load( None, None, session_hash, js="() => { return getArenaCookie('session') }", ) # give a cached sample pair to voter; .then() did not work here vote\ .load(give_cached_sample, inputs=[session_hash, autoplay], outputs=[*outputs, cachedt])