app/ui_vote.py

import gradio as gr
from .config import *
from .synth import *
from .vote import *
from .messages import *

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)]


with gr.Blocks() as vote:
    # sample played
    #aplayed = gr.State(value=False)
    #bplayed = gr.State(value=False)
    # voter ID
    useridstate = gr.State()
    gr.Markdown(INSTR)
    with gr.Group():
        with gr.Row():
            text = gr.Textbox(container=False, show_label=False, placeholder="Enter text to synthesize", lines=1, max_lines=1, scale=9999999, min_width=0)
            randomt = gr.Button('🎲', scale=0, min_width=0, variant='tool', elem_id="vote-random-button")
        randomt.click(randomsent, outputs=[text, randomt])
        btn = gr.Button("Synthesize", variant='primary', elem_id="vote-synth-button")
    model1 = gr.Textbox(interactive=False, lines=1, max_lines=1, visible=False)
    #model1 = gr.Textbox(interactive=False, lines=1, max_lines=1, visible=True)
    model2 = gr.Textbox(interactive=False, lines=1, max_lines=1, visible=False)
    #model2 = gr.Textbox(interactive=False, lines=1, max_lines=1, visible=True)
    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, autoplay=True, elem_id="vote-a-audio")
                abetter = gr.Button("A is better", variant='primary', elem_id="vote-a-button")
                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, elem_id="vote-b-audio")
                bbetter = gr.Button("B is better", variant='primary', elem_id="vote-b-button")
                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)
    aud1.stop(None, None, js="""function() {
        document.getElementById('vote-b-audio')?.querySelector('button.play-pause-button')?.click();
    }""")
    nxtroundbtn = gr.Button('Next round', visible=False)
    # outputs = [text, btn, r2, model1, model2, prevmodel1, aud1, prevmodel2, aud2, abetter, bbetter]
    outputs = [
        text,
        btn,
        r2,
        model1,
        model2,
        aud1,
        aud2,
        abetter,
        bbetter,
        prevmodel1,
        prevmodel2,
        nxtroundbtn
    ]
    """
    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"""
    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)

    # 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])

    # 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])

    # Add custom JS for keyboard shortcuts
    # vote.load(None, None, js="""function() {
    #     document.addEventListener('keydown', function(e) {
    #         // Only handle shortcuts if we're on the vote tab
    #         if (!document.querySelector('#vote-a-button')?.offsetParent) {
    #             // Check if random button is visible
    #             if (document.querySelector('#vote-random-button')?.offsetParent) {
    #                 if (e.key === 'r') {
    #                     document.getElementById('vote-random-button')?.click();
    #                 } else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
    #                     document.getElementById('vote-synth-button')?.click();
    #                 }
    #             }
    #             return;
    #         }
            
    #         // Only handle A and B keys when not typing in an input
    #         if (document.activeElement.tagName === 'INPUT' || 
    #             document.activeElement.tagName === 'TEXTAREA') {
    #             return;
    #         }
            
    #         if (e.key.toLowerCase() === 'a') {
    #             document.getElementById('vote-a-button')?.click();
    #         } else if (e.key.toLowerCase() === 'b') {
    #             document.getElementById('vote-b-button')?.click();
    #         }
    #     });
    # }""")