Fix hotkey events across tabs.

app.py

@@ -2,6 +2,7 @@ import logging
 import os
 import re
 import warnings
+from pathlib import Path
 
 import gradio as gr
 import requests
@@ -89,27 +90,7 @@ def copy_notify(code):
 
 
 def add_hotkeys() -> str:
-    return """() => {
-        function gradioApp() {
-            const elems = document.getElementsByTagName('gradio-app');
-            const elem = elems.length == 0 ? document : elems[0];
-        
-            if (elem !== document) {
-                elem.getElementById = function(id) {
-                    return document.getElementById(id);
-                };
-            }
-            return elem.shadowRoot ? elem.shadowRoot : elem;
-        }
-        window.addEventListener('keydown', (e) => {
-            if (e.keyCode == 192 && e.ctrlKey) { // CTRL + ` key
-                const recordButton = gradioApp().querySelector("div.mic-wrap > button");
-                console.log(recordButton);
-                recordButton.click();
-            }
-        });
-    }
-    """
+    return Path("hotkeys.js").read_text()
 
 
 with gr.Blocks() as demo:
@@ -126,15 +107,15 @@ with gr.Blocks() as demo:
         with gr.Row():
             with gr.Column():
                 with gr.Group():
-                    in_audio = gr.Audio(label="Record a voice request (click or press ctrl + ` to start/stop)", source='microphone', type='filepath')
+                    in_audio = gr.Audio(label="Record a voice request (click or press ctrl + ` to start/stop)", source='microphone', type='filepath', elem_classes=["record-btn"])
                     in_prompt = gr.Textbox(label="Or type a text request and press Enter",
                                            placeholder="Need an idea? Try one of these:\n- Add a button to reverse the name\n- Change the greeting to Spanish\n- Put the reversed name output into a separate textbox")
                 out_text = gr.TextArea(label="Chat Assistant Response")
                 clear = gr.ClearButton([in_prompt, in_audio, out_text])
             with gr.Column():
-                code_area = gr.Code(label="App Code - You can also edit directly and then click Update App",
+                code_area = gr.Code(label="App Code - You can also edit directly and then click Update App or ctrl + space",
                                     language='python', value=starting_app_code(DemoType.GRADIO))
-                update_btn = gr.Button("Update App", variant="primary")
+                update_btn = gr.Button("Update App (Ctrl + Space)", variant="primary", elem_classes=["update-btn"])
                 code_update_params = {'fn': None, 'inputs': code_area, 'outputs': None,
                                       '_js': update_iframe_js(DemoType.GRADIO)}
                 gen_text_params = {'fn': generate_text, 'inputs': [code_area, in_prompt],
@@ -165,15 +146,15 @@ with gr.Blocks() as demo:
         with gr.Row():
             with gr.Column():
                 with gr.Group():
-                    in_audio = gr.Audio(label="Record a voice request (click or press ctrl + ` to start/stop)", source='microphone', type='filepath')
+                    in_audio = gr.Audio(label="Record a voice request (click or press ctrl + ` to start/stop)", source='microphone', type='filepath', elem_classes=["record-btn"])
                     in_prompt = gr.Textbox(label="Or type a text request and press Enter",
                                            placeholder="Need an idea? Try one of these:\n- Add a button to reverse the name\n- Change the greeting to Spanish\n- Make the button primary")
                 out_text = gr.TextArea(label="Chat Assistant Response")
                 clear_btn = gr.ClearButton([in_prompt, in_audio, out_text])
             with gr.Column():
-                code_area = gr.Code(label="App Code - You can also edit directly and then click Update App",
+                code_area = gr.Code(label="App Code - You can also edit directly and then click Update App or ctrl + space",
                                     language='python', value=starting_app_code(DemoType.STREAMLIT))
-                update_btn = gr.Button("Update App", variant="primary")
+                update_btn = gr.Button("Update App (Ctrl + Space)", variant="primary", elem_classes=["update-btn"])
                 code_update_params = {'fn': None, 'inputs': code_area, 'outputs': None,
                                       '_js': update_iframe_js(DemoType.STREAMLIT)}
                 gen_text_params = {'fn': generate_text, 'inputs': [code_area, in_prompt],

hotkeys.js

@@ -0,0 +1,34 @@
+() => {
+    function gradioApp() {
+        const elems = document.getElementsByTagName('gradio-app');
+        const elem = elems.length == 0 ? document : elems[0];
+
+        if (elem !== document) {
+            elem.getElementById = function(id) {
+                return document.getElementById(id);
+            };
+        }
+        return elem.shadowRoot ? elem.shadowRoot : elem;
+    }
+    window.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key == "`") { // CTRL + ` key
+            const recordButtons = gradioApp().querySelectorAll(".record-btn button");
+            console.log(recordButtons);
+            for (let recordButton of recordButtons) {
+                if (recordButton.checkVisibility()) {
+                    recordButton.click();
+                }
+            }
+        }
+    });
+    window.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === " ") { // CTRL + Space key
+            const updateButtons = gradioApp().querySelectorAll(".update-btn");
+            for (let updateButton of updateButtons) {
+                if (updateButton.checkVisibility()) {
+                    updateButton.click();
+                }
+            }
+        }
+    });
+}