Add recording hotkey support.

app.py

@@ -88,8 +88,32 @@ def copy_notify(code):
     gr.Info("App code snippet copied!")
 
 
+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();
+            }
+        });
+    }
+    """
+
+
 with gr.Blocks() as demo:
-    gr.Markdown("<h1 align=\"center\">KiteWind 🪁🍃</h1>")
+    gr.Markdown("<h1 id=\"TEST\" align=\"center\">KiteWind 🪁🍃</h1>")
     gr.Markdown(
         "<h4 align=\"center\">Chat-assisted web app creator by <a href=\"https://huggingface.co/gstaff\">@gstaff</a></h4>")
     selectedTab = gr.State(value='stlite')
@@ -102,7 +126,7 @@ with gr.Blocks() as demo:
         with gr.Row():
             with gr.Column():
                 with gr.Group():
-                    in_audio = gr.Audio(label="Record a voice request", source='microphone', type='filepath')
+                    in_audio = gr.Audio(label="Record a voice request (click or press ctrl + ` to start/stop)", source='microphone', type='filepath')
                     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")
@@ -141,7 +165,7 @@ with gr.Blocks() as demo:
         with gr.Row():
             with gr.Column():
                 with gr.Group():
-                    in_audio = gr.Audio(label="Record a voice request", source='microphone', type='filepath')
+                    in_audio = gr.Audio(label="Record a voice request (click or press ctrl + ` to start/stop)", source='microphone', type='filepath')
                     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 Hola\n- Put the reversed name output into a separate textbox\n- Change the theme from monochrome to soft")
                 out_text = gr.TextArea(label="Chat Assistant Response")
@@ -176,6 +200,7 @@ with gr.Blocks() as demo:
     gradio_lite_tab.select(lambda: "gradio-lite", None, selectedTab).then(None, None, None,
                                                                           _js=load_js(DemoType.GRADIO))
     demo.load(None, None, None, _js=load_js(DemoType.STREAMLIT))
+    demo.load(None, None, None, _js=add_hotkeys())
     demo.css = "footer {visibility: hidden}"
 
 if __name__ == "__main__":