Autoplay, keyboard shortcuts

app/messages.py

@@ -7,7 +7,10 @@ from .config import *
 MUST_BE_LOGGEDIN = "Please login with Hugging Face to participate in the TTS Arena."
 DESCR = """
 # TTS Arena: Benchmarking TTS Models in the Wild
+
 Vote to help the community find the best available text-to-speech model!
+
+Type ? to view keyboard shortcuts.
 """.strip()
 BATTLE_INSTR = """
 ## Battle

app/ui.py

@@ -35,11 +35,112 @@ textbox {resize: none}
     background: var(--body-text-color);
 }
 """
-
-with gr.Blocks(css=CSS, theme=gr.themes.Default(font=[gr.themes.GoogleFont("Geist"), "sans-serif"]), title="TTS Arena") as app:
+with gr.Blocks(css=CSS + """
+    /* Modal styles */
+    .shortcuts-modal {
+        display: none;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: var(--background-fill-primary);
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        z-index: 1000;
+        max-width: 500px;
+        width: 90%;
+    }
+    .shortcuts-modal.show {
+        display: block;
+    }
+    .modal-backdrop {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(10px);
+        z-index: 999;
+    }
+    .modal-backdrop.show {
+        display: block;
+    }
+    .close-button {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background: none;
+        border: none;
+        font-size: 20px;
+        cursor: pointer;
+        color: var(--body-text-color);
+    }
+    .close-button:hover {
+        color: var(--error-text-color);
+    }
+""", theme=gr.themes.Default(font=[gr.themes.GoogleFont("Geist"), "sans-serif"]), title="TTS Arena") as app:
     gr.Markdown(DESCR)
     gr.TabbedInterface([vote, battle, leaderboard, about], ['Vote', 'Battle', 'Leaderboard', 'About'])
     if CITATION_TEXT:
         with gr.Row():
             with gr.Accordion("Citation", open=False):
                 gr.Markdown(f"If you use this data in your publication, please cite us!\n\nCopy the BibTeX citation to cite this source:\n\n```bibtext\n{CITATION_TEXT}\n```\n\nPlease note that all generated audio clips should be assumed unsuitable for redistribution or commercial use.")
+
+    # Add modal HTML
+    gr.HTML("""
+        <div class="modal-backdrop"></div>
+        <div class="shortcuts-modal">
+            <button class="close-button" onclick="toggleModal(false)">×</button>
+            <h3>Keyboard Shortcuts</h3>
+            <p><strong>Global:</strong></p>
+            <ul>
+                <li><code>?</code> or <code>Shift + /</code> - Show this help dialog</li>
+                <li><code>Esc</code> - Close this dialog</li>
+            </ul>
+            <p><strong>Vote & Battle Mode:</strong></p>
+            <ul>
+                <li><code>r</code> - Generate random text</li>
+                <li><code>Ctrl/Cmd + Enter</code> - Synthesize text</li>
+                <li><code>a</code> - Vote for option A</li>
+                <li><code>b</code> - Vote for option B</li>
+            </ul>
+        </div>
+    """)
+
+    # Add modal control JavaScript
+    app.load(None, None, js="""
+        function() {
+            function toggleModal(show) {
+                document.querySelector('.shortcuts-modal').classList.toggle('show', show);
+                document.querySelector('.modal-backdrop').classList.toggle('show', show);
+            }
+
+            document.addEventListener('keydown', function(e) {
+                // Only handle shortcuts when not typing in an input
+                if (document.activeElement.tagName === 'INPUT' || 
+                    document.activeElement.tagName === 'TEXTAREA') {
+                    return;
+                }
+
+                // Check for shift + / or ? key
+                if ((e.key === '/' && e.shiftKey) || e.key === '?') {
+                    toggleModal(true);
+                }
+                // Check for escape key
+                else if (e.key === 'Escape') {
+                    toggleModal(false);
+                }
+            });
+
+            // Close modal when clicking backdrop
+            document.querySelector('.modal-backdrop').addEventListener('click', function() {
+                toggleModal(false);
+            });
+
+            // Make toggleModal available globally
+            window.toggleModal = toggleModal;
+        }
+    """)

app/ui_battle.py

@@ -20,25 +20,28 @@ with gr.Blocks() as battle:
     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_battle = gr.Button('🎲', scale=0, min_width=0, variant='tool')
+            randomt_battle = gr.Button('🎲', scale=0, min_width=0, variant='tool', elem_id="battle-random-button")
     with gr.Row():
         with gr.Column(scale=10):
             model1s = gr.Dropdown(label="Model 1", container=False, show_label=False, choices=AVAILABLE_MODELS.keys(), interactive=True, value=list(AVAILABLE_MODELS.keys())[0])
         with gr.Column(scale=10):
             model2s = gr.Dropdown(label="Model 2", container=False, show_label=False, choices=AVAILABLE_MODELS.keys(), interactive=True, value=list(AVAILABLE_MODELS.keys())[1])
     randomt_battle.click(randomsent_battle, outputs=[text, randomt_battle, model1s, model2s])
-    btn = gr.Button("Synthesize", variant='primary')
+    btn = gr.Button("Synthesize", variant='primary', elem_id="battle-synth-button")
     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)
-                abetter = gr.Button("A is better", variant='primary')
+                aud1 = gr.Audio(interactive=False, show_label=False, show_download_button=False, show_share_button=False, autoplay=True, elem_id="battle-a-audio")
+                abetter = gr.Button("A is better", variant='primary', elem_id="battle-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)
-                bbetter = gr.Button("B is better", variant='primary')
+                aud2 = gr.Audio(interactive=False, show_label=False, show_download_button=False, show_share_button=False, elem_id="battle-b-audio")
+                bbetter = gr.Button("B is better", variant='primary', elem_id="battle-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('battle-b-audio')?.querySelector('button.play-pause-button')?.click();
+    }""")
     outputs = [
         text,
         btn,
@@ -56,4 +59,31 @@ with gr.Blocks() as battle:
     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])
+    battle.load(random_m, outputs=[model1s, model2s], js="""function() {
+        document.addEventListener('keydown', function(e) {
+            // Only handle shortcuts if we're on the battle tab
+            if (!document.querySelector('#battle-a-button')?.offsetParent) {
+                // Check if random button is visible
+                if (document.querySelector('#battle-random-button')?.offsetParent) {
+                    if (e.key === 'r') {
+                        document.getElementById('battle-random-button')?.click();
+                    } else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                        document.getElementById('battle-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('battle-a-button')?.click();
+            } else if (e.key.toLowerCase() === 'b') {
+                document.getElementById('battle-b-button')?.click();
+            }
+        });
+    }""")

app/ui_vote.py

@@ -20,9 +20,9 @@ with gr.Blocks() as vote:
     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')
+            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')
+        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)
@@ -30,14 +30,17 @@ 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)
-                abetter = gr.Button("A is better", variant='primary')
+                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)
-                bbetter = gr.Button("B is better", variant='primary')
+                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 = [
@@ -78,3 +81,33 @@ with gr.Blocks() as vote:
     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();
+            }
+        });
+    }""")