File size: 6,867 Bytes
d40e945
 
 
 
 
 
fa0a8d8
 
f88842b
d40e945
 
 
 
fa0a8d8
 
 
 
d40e945
f968ac4
 
 
 
d40e945
f968ac4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d40e945
 
 
 
 
f88842b
 
 
 
 
 
 
 
 
 
d40e945
fa0a8d8
 
 
d40e945
 
 
 
 
 
 
 
f968ac4
 
 
 
 
 
 
 
f88842b
 
 
 
 
 
d40e945
 
 
f968ac4
 
 
 
 
 
 
 
f88842b
 
 
 
 
 
d40e945
f88842b
 
 
 
 
 
f968ac4
 
 
 
 
d40e945
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f968ac4
fa0a8d8
 
f968ac4
 
fa0a8d8
 
 
 
 
f968ac4
 
fa0a8d8
 
d40e945
 
f968ac4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d40e945
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
import gradio as gr
from .config import *
from .synth import *
from .vote import *
from .messages 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)]
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=[])

def unlock_vote(autoplay, btn_index, aplayed, bplayed):
    if autoplay == False:
        return [gr.update(), gr.update(), aplayed, bplayed]

    # sample played
    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)
    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,
                elem_id="arena-text-input",
            )
            randomt = gr.Button('🎲', scale=0, min_width=0, variant='tool')
        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)
    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,
                    # 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.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,
                    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.Textbox(interactive=False, show_label=False, container=False, value="Vote to reveal model B", text_align="center", lines=1, max_lines=1, 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
    ]
    """
    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])\
        .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, 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=[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 = [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])