Update to gradio v4.

README.md

@@ -4,7 +4,7 @@ emoji: 🪁🍃
 colorFrom: blue
 colorTo: green
 sdk: gradio
-sdk_version: 3.50.2
+sdk_version: 4.10.0
 app_file: app.py
 pinned: true
 ---

app.py

@@ -64,6 +64,7 @@ def query(payload: dict):
     return response.json()
 
 
+# TODO: Use chat template with more instructions
 def generate_text(code: str, prompt: str) -> (str, str, str):
     logger.info(f"Calling API with prompt:\n{prompt}")
     prompt = f"```python\n{code}```\nGiven the code above return only updated code for the following request:\n{prompt}\n<|assistant|>"
@@ -99,21 +100,24 @@ def add_hotkeys() -> str:
     return Path("hotkeys.js").read_text()
 
 
-def apply_query_params(gradio_code: str, stlite_code: str, request: gr.Request) -> (
-str, str, [str], str, str, [str], typing.Any):
+def apply_query_params(request: gr.Request) -> ([str], str, [str], str, typing.Any):
     params = dict(request.query_params)
     demo_type = params.get('type')
     if demo_type == 'gradio':
-        return params.get('code') or gradio_code, params.get('requirements') or '', [
-            params.get('code') or gradio_code], stlite_code, '', [stlite_code_area], gr.Tabs(selected=0)
+        return [params.get('code') or starting_app_code(DemoType.GRADIO)], params.get('requirements') or '', [
+            starting_app_code(
+                DemoType.STREAMLIT)], '', gr.Tabs(selected=0)
     if demo_type == 'streamlit':
-        return gradio_code, '', [gradio_code], params.get('code') or stlite_code, params.get('requirements') or '', [
-            params.get('code') or stlite_code], gr.Tabs(selected=1)
-    return gradio_code, '', [gradio_code], stlite_code, '', [stlite_code], gr.Tabs(selected=0)
+        return [starting_app_code(DemoType.GRADIO)], '', [
+            params.get('code') or starting_app_code(DemoType.STREAMLIT)], params.get('requirements') or '', gr.Tabs(
+            selected=1)
+    return [params.get('code') or starting_app_code(DemoType.GRADIO)], params.get('requirements') or '', [
+        starting_app_code(DemoType.STREAMLIT)], '', gr.Tabs(
+        selected=0)
 
 
 def update_state(code: str, requirements: [str], error: str, history: [str], current_index: int) -> (
-str, str, [str], int):
+        str, str, [str], int):
     # Only modify undo history if new code was added.
     if history[current_index] != code:
         history = history[:current_index + 1]
@@ -151,8 +155,9 @@ with gr.Blocks(title="KiteWind") as demo:
             with gr.Row():
                 with gr.Column():
                     with gr.Group():
-                        gradio_audio = gr.Audio(label="Record a voice request (click or press ctrl + ` to start/stop)",
-                                                source='microphone', type='filepath', elem_classes=["record-btn"])
+                        gradio_audio = gr.Microphone(
+                            label="Record a voice request (click or press ctrl + ` to start/stop)",
+                            type='filepath', elem_classes=["record-btn"])
                         gradio_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")
                     gradio_bot_text = gr.TextArea(label="🤖 Chat Assistant Response")
@@ -160,9 +165,9 @@ with gr.Blocks(title="KiteWind") as demo:
                 with gr.Column():
                     gradio_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))
+                        language='python', value=starting_app_code(DemoType.GRADIO), interactive=True)
                     gradio_requirements_area = gr.Code(
-                        label="App Requirements (additional modules pip installed for pyodide)")
+                        label="App Requirements (additional modules pip installed for pyodide)", interactive=True)
                     with gr.Group():
                         gradio_update_btn = gr.Button("Update App (Ctrl + Space)", variant="primary",
                                                       elem_classes=["update-btn"])
@@ -176,7 +181,7 @@ with gr.Blocks(title="KiteWind") as demo:
                                                             gradio_history, gradio_index],
                                                  'outputs': [gradio_requirements_area, gradio_error, gradio_history,
                                                              gradio_index],
-                                                 '_js': update_iframe_js(DemoType.GRADIO)}
+                                                 'js': update_iframe_js(DemoType.GRADIO)}
                     gradio_gen_text_params = {'fn': generate_text, 'inputs': [gradio_code_area, gradio_prompt],
                                               'outputs': [gradio_bot_text, gradio_code_area]}
                     gradio_transcribe_params = {'fn': transcribe, 'inputs': [gradio_audio],
@@ -194,13 +199,13 @@ with gr.Blocks(title="KiteWind") as demo:
                     gr.Markdown("## 3. Export your app to share!")
                     gradio_share_link_btn = gr.Button("🔗 Copy share link to clipboard")
                     gradio_share_link_btn.click(link_copy_notify, [gradio_code_area, gradio_requirements_area], None,
-                                                _js=copy_share_link_js(DemoType.GRADIO))
+                                                js=copy_share_link_js(DemoType.GRADIO))
                     gradio_copy_snippet_btn = gr.Button("✂️ Copy app snippet to paste into another page")
                     gradio_copy_snippet_btn.click(copy_notify, [gradio_code_area, gradio_requirements_area], None,
-                                                  _js=copy_snippet_js(DemoType.GRADIO))
+                                                  js=copy_snippet_js(DemoType.GRADIO))
                     gradio_download_btn = gr.Button("🗎 Download app as a standalone file")
                     gradio_download_btn.click(None, [gradio_code_area, gradio_requirements_area], None,
-                                              _js=download_code_js(DemoType.GRADIO))
+                                              js=download_code_js(DemoType.GRADIO))
             with gr.Row():
                 with gr.Column():
                     gr.Markdown("## Current limitations")
@@ -216,8 +221,9 @@ with gr.Blocks(title="KiteWind") as demo:
             with gr.Row():
                 with gr.Column():
                     with gr.Group():
-                        stlite_audio = gr.Audio(label="Record a voice request (click or press ctrl + ` to start/stop)",
-                                                source='microphone', type='filepath', elem_classes=["record-btn"])
+                        stlite_audio = gr.Microphone(
+                            label="Record a voice request (click or press ctrl + ` to start/stop)",
+                            type='filepath', elem_classes=["record-btn"])
                         stlite_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- Change the theme to soft")
                     stlite_bot_text = gr.TextArea(label="🤖 Chat Assistant Response")
@@ -225,9 +231,9 @@ with gr.Blocks(title="KiteWind") as demo:
                 with gr.Column():
                     stlite_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))
+                        language='python', value=starting_app_code(DemoType.STREAMLIT), interactive=True)
                     stlite_requirements_area = gr.Code(
-                        label="App Requirements (additional modules pip installed for pyodide)")
+                        label="App Requirements (additional modules pip installed for pyodide)", interactive=True)
                     with gr.Group():
                         stlite_update_btn = gr.Button("Update App (Ctrl + Space)", variant="primary",
                                                       elem_classes=["update-btn"])
@@ -241,7 +247,7 @@ with gr.Blocks(title="KiteWind") as demo:
                                                             stlite_history, stlite_index],
                                                  'outputs': [stlite_requirements_area, stlite_error, stlite_history,
                                                              stlite_index],
-                                                 '_js': update_iframe_js(DemoType.STREAMLIT)}
+                                                 'js': update_iframe_js(DemoType.STREAMLIT)}
                     stlite_gen_text_params = {'fn': generate_text, 'inputs': [stlite_code_area, stlite_prompt],
                                               'outputs': [stlite_bot_text, stlite_code_area]}
                     stlite_transcribe_params = {'fn': transcribe, 'inputs': [stlite_audio],
@@ -259,13 +265,13 @@ with gr.Blocks(title="KiteWind") as demo:
                     gr.Markdown("## 3. Export your app to share!")
                     stlite_share_link_btn = gr.Button("🔗 Copy share link to clipboard")
                     stlite_share_link_btn.click(link_copy_notify, [stlite_code_area, stlite_requirements_area], None,
-                                                _js=copy_share_link_js(DemoType.STREAMLIT))
+                                                js=copy_share_link_js(DemoType.STREAMLIT))
                     stlite_copy_snippet_btn = gr.Button("✂️ Copy app snippet into paste in another page")
                     stlite_copy_snippet_btn.click(copy_notify, [stlite_code_area, stlite_requirements_area], None,
-                                                  _js=copy_snippet_js(DemoType.STREAMLIT))
+                                                  js=copy_snippet_js(DemoType.STREAMLIT))
                     stlite_download_btn = gr.Button("🗎 Download app as a standalone file")
                     stlite_download_btn.click(None, [stlite_code_area, stlite_requirements_area], None,
-                                              _js=download_code_js(DemoType.STREAMLIT))
+                                              js=download_code_js(DemoType.STREAMLIT))
             with gr.Row():
                 with gr.Column():
                     gr.Markdown("## Current limitations")
@@ -273,13 +279,15 @@ with gr.Blocks(title="KiteWind") as demo:
                         gr.Markdown(
                             "- Only Streamlit apps using libraries available in pyodide are supported\n- The chat hasn't been tuned on Streamlit library data; it may make mistakes")
     gradio_lite_tab.select(lambda: "gradio-lite", None, selectedTab).then(None, None, None,
-                                                                          _js=load_js(DemoType.GRADIO))
-    stlite_tab.select(lambda: "stlite", None, selectedTab).then(None, None, None, _js=load_js(DemoType.STREAMLIT))
-    demo.load(None, None, None, _js=add_hotkeys())
-    demo.load(apply_query_params, [gradio_code_area, stlite_code_area],
-              [gradio_code_area, gradio_requirements_area, gradio_history, stlite_code_area, stlite_requirements_area,
-               stlite_history, tabs])
+                                                                          js=load_js(DemoType.GRADIO))
+    stlite_tab.select(lambda: "stlite", None, selectedTab).then(None, None, None, js=load_js(DemoType.STREAMLIT))
+    demo.load(None, None, None, js=add_hotkeys())
+    demo.load(apply_query_params, [],
+              [gradio_history, gradio_requirements_area, stlite_history, stlite_requirements_area, tabs]).then(
+        lambda x, y: [x[0], y[0]],
+        [gradio_history, stlite_history],
+        [gradio_code_area, stlite_code_area])
     demo.css = "footer {visibility: hidden}"
 
 if __name__ == "__main__":
-    demo.queue().launch(favicon_path='favicon-96x96.png')
+    demo.queue().launch(favicon_path='favicon-96x96.png', show_api=False)

hotkeys.js

@@ -12,11 +12,10 @@
     }
     window.addEventListener('keydown', (e) => {
         if ((e.ctrlKey || e.metaKey) && e.key == "`") { // CTRL + ` key
-            const recordButtons = gradioApp().querySelectorAll(".record-btn button");
-            for (let recordButton of recordButtons) {
-                if (recordButton.checkVisibility()) {
-                    recordButton.click();
-                }
+            const recordButtons = [...gradioApp().querySelectorAll('button.record.record-button')].filter(x => x.checkVisibility());
+            const stopButtons = [...gradioApp().querySelectorAll('button.stop-button')].filter(x => x.checkVisibility());
+            for (let button of recordButtons.concat(stopButtons)) {
+                button.click();
             }
         }
     });