Add requirements support to gradio.

app.py

@@ -86,11 +86,11 @@ def transcribe(audio: str) -> (str, str):
     return result["text"], None
 
 
-def link_copy_notify(code):
+def link_copy_notify():
     gr.Info("Share link copied!")
 
 
-def copy_notify(code):
+def copy_notify(code: str, requirements: str):
     gr.Info("App code snippet copied!")
 
 
@@ -98,6 +98,15 @@ def add_hotkeys() -> str:
     return Path("hotkeys.js").read_text()
 
 
+def apply_query_params(code: str, request: gr.Request) -> (str, str):
+    params = dict(request.query_params)
+    return params.get('code') or code, params.get('requirements') or ''
+
+
+def update_state(requirements: [str], error: str):
+    return '\n'.join(sorted(requirements)), error
+
+
 with gr.Blocks() as demo:
     gr.Markdown("<h1 id=\"TEST\" align=\"center\"><a href=\"?\">KiteWind</a> 🪁🍃</h1>")
     gr.Markdown(
@@ -112,19 +121,24 @@ 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', elem_classes=["record-btn"])
+                    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 or ctrl + space",
-                                    language='python', value=starting_app_code(DemoType.GRADIO))
+                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))
+                gradio_requirements_area = gr.Code(label="App Requirements (additional modules pip installed for pyodide)")
                 update_btn = gr.Button("Update App (Ctrl + Space)", variant="primary", elem_classes=["update-btn"])
-                code_update_params = {'fn': None, 'inputs': code_area, 'outputs': None,
+                last_error = gr.State()
+                code_update_params = {'fn': update_state, 'inputs': [gradio_code_area, gradio_requirements_area],
+                                      'outputs': [gradio_requirements_area, last_error],
                                       '_js': update_iframe_js(DemoType.GRADIO)}
-                gen_text_params = {'fn': generate_text, 'inputs': [code_area, in_prompt],
-                                   'outputs': [out_text, code_area]}
+                gen_text_params = {'fn': generate_text, 'inputs': [gradio_code_area, in_prompt],
+                                   'outputs': [out_text, gradio_code_area]}
                 transcribe_params = {'fn': transcribe, 'inputs': [in_audio], 'outputs': [in_prompt, in_audio]}
                 update_btn.click(**code_update_params)
                 in_prompt.submit(**gen_text_params).then(**code_update_params)
@@ -133,11 +147,11 @@ with gr.Blocks() as demo:
             with gr.Column():
                 gr.Markdown("## 3. Export your app to share!")
                 share_link_btn = gr.Button("🔗 Copy share link to clipboard")
-                share_link_btn.click(link_copy_notify, code_area, None, _js=copy_share_link_js(DemoType.GRADIO))
+                share_link_btn.click(link_copy_notify, None, None, _js=copy_share_link_js(DemoType.GRADIO))
                 copy_snippet_btn = gr.Button("✂️ Copy app snippet to paste into another page")
-                copy_snippet_btn.click(copy_notify, code_area, None, _js=copy_snippet_js(DemoType.GRADIO))
+                copy_snippet_btn.click(copy_notify, [gradio_code_area, gradio_requirements_area], None, _js=copy_snippet_js(DemoType.GRADIO))
                 download_btn = gr.Button("🗎 Download app as a standalone file")
-                download_btn.click(None, code_area, None, _js=download_code_js(DemoType.GRADIO))
+                download_btn.click(None, [gradio_code_area, gradio_requirements_area], None, _js=download_code_js(DemoType.GRADIO))
         with gr.Row():
             with gr.Column():
                 gr.Markdown("## Current limitations")
@@ -153,19 +167,22 @@ 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', elem_classes=["record-btn"])
+                    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")
+                                           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")
                 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 or ctrl + space",
-                                    language='python', value=starting_app_code(DemoType.STREAMLIT))
+                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))
+                requirements_area = gr.Code(label="App Requirements (additional modules pip installed for pyodide)")
                 update_btn = gr.Button("Update App (Ctrl + Space)", variant="primary", elem_classes=["update-btn"])
-                code_update_params = {'fn': None, 'inputs': code_area, 'outputs': None,
+                code_update_params = {'fn': None, 'inputs': [stlite_code_area, requirements_area], 'outputs': None,
                                       '_js': update_iframe_js(DemoType.STREAMLIT)}
-                gen_text_params = {'fn': generate_text, 'inputs': [code_area, in_prompt],
-                                   'outputs': [out_text, code_area]}
+                gen_text_params = {'fn': generate_text, 'inputs': [stlite_code_area, in_prompt],
+                                   'outputs': [out_text, stlite_code_area]}
                 transcribe_params = {'fn': transcribe, 'inputs': [in_audio], 'outputs': [in_prompt, in_audio]}
                 update_btn.click(**code_update_params)
                 in_prompt.submit(**gen_text_params).then(**code_update_params)
@@ -174,9 +191,9 @@ with gr.Blocks() as demo:
             with gr.Column():
                 gr.Markdown("## 3. Export your app to share!")
                 copy_snippet_btn = gr.Button("✂️ Copy app snippet into paste in another page")
-                copy_snippet_btn.click(copy_notify, code_area, None, _js=copy_snippet_js(DemoType.STREAMLIT))
+                copy_snippet_btn.click(copy_notify, [stlite_code_area, requirements_area], None, _js=copy_snippet_js(DemoType.STREAMLIT))
                 download_btn = gr.Button("🗎 Download app as a standalone file")
-                download_btn.click(None, code_area, None, _js=download_code_js(DemoType.STREAMLIT))
+                download_btn.click(None, stlite_code_area, None, _js=download_code_js(DemoType.STREAMLIT))
         with gr.Row():
             with gr.Column():
                 gr.Markdown("## Current limitations")
@@ -188,6 +205,8 @@ with gr.Blocks() as demo:
     stlite_tab.select(lambda: "stlite", None, selectedTab).then(None, None, None, _js=load_js(DemoType.STREAMLIT))
     demo.load(None, None, None, _js=load_js(DemoType.GRADIO))
     demo.load(None, None, None, _js=add_hotkeys())
+    # TODO: select stlite tab and populate that code based on query param type
+    demo.load(apply_query_params, gradio_code_area, [gradio_code_area, gradio_requirements_area])
     demo.css = "footer {visibility: hidden}"
 
 if __name__ == "__main__":

templates.py

@@ -49,6 +49,7 @@ def load_js(demo_type: DemoType) -> str:
             const queryParams = parseQueryString(queryString);
             // Access individual parameters
             const codeValue = queryParams.code;
+            const requirementsValue = queryParams.requirements;
                         
             const htmlString = '<iframe id="gradio-iframe" width="100%" height="512px" src="about:blank"></iframe>';
             const parser = new DOMParser();
@@ -59,8 +60,9 @@ def load_js(demo_type: DemoType) -> str:
 
             let template = `{gradio_lite_html_template.replace('STARTING_CODE', starting_app_code(demo_type))}`;    
             if (codeValue) {{
-                template = `{gradio_lite_html_template}`.replace('STARTING_CODE', codeValue);
+                template = `{gradio_lite_html_template}`.replace('STARTING_CODE', codeValue.replace(String.fromCharCode(92), String.fromCharCode(92) + String.fromCharCode(92)).replace('`', String.fromCharCode(92) + '`'));
             }}
+            template = template.replace('STARTING_REQUIREMENTS', requirementsValue || '');
             const frame = document.getElementById('gradio-iframe');
             frame.contentWindow.document.open('text/html', 'replace');
             frame.contentWindow.document.write(template);
@@ -91,7 +93,11 @@ def load_js(demo_type: DemoType) -> str:
 
 def update_iframe_js(demo_type: DemoType) -> str:
     if demo_type == DemoType.GRADIO:
-        return f"""async (code, requirements) => {{       
+        return f"""async (code, requirements) => {{
+                const formattedRequirements = requirements.split('\\n').filter(x => x && !x.startsWith('#')).map(x => x.trim());
+                let errorResult = null;
+                const attemptedRequirements = new Set();
+                const installedRequirements = [];
                 async function update() {{
                     // Remove existing stylesheet so it will be reloaded;
                     // see https://github.com/gradio-app/gradio/blob/200237d73c169f39514465efc163db756969d3ac/js/app/src/lite/css.ts#L41
@@ -101,28 +107,55 @@ def update_iframe_js(demo_type: DemoType) -> str:
                     const appController = demoFrameWindow.window.appController;
                     const newCode = code + ` # Update tag ${{Math.random()}}`;
                     try {{
+                        await appController.install(formattedRequirements);
                         await appController.run_code(newCode);
                     }}
-                    catch (e) {{
+                    catch (e) {{                    
                         // Replace old style if code error prevented new style from loading.
                         const newStyle = demoFrameWindow.document.querySelector("head style");
                         if (!newStyle) {{
                             demoFrameWindow.document.head.appendChild(oldStyle);
                         }}
+                        
+                        // If the error is caused by a missing module try once to install it and update again.
+                        if (e.toString().includes('ModuleNotFoundError')) {{
+                            try {{
+                                const guessedModuleName = e.toString().split("'")[1].replaceAll('_', '-');
+                                if (attemptedRequirements.has(guessedModuleName)) {{
+                                    throw Error(`Could not install pyodide module ${{guessedModuleName}}`);
+                                }}
+                                console.log(`Attempting to install missing pyodide module "${{guessedModuleName}}"`);
+                                attemptedRequirements.add(guessedModuleName);
+                                await appController.install([guessedModuleName]);
+                                installedRequirements.push(guessedModuleName);
+                                return await update();
+                            }}
+                            catch (err) {{
+                                console.log(err);
+                            }}
+                        }}
+                        
                         // Hide app so the error traceback is visible.
                         // First div in main is the error traceback, second is the app.
                         const appBody = demoFrameWindow.document.querySelectorAll("div.main > div")[1];
                         appBody.style.visibility = "hidden";
-                        return e;
+                        errorResult = e.toString();
+                        const allRequirements = formattedRequirements.concat(installedRequirements);
+                        console.log(allRequirements, errorResult);
+                        return [allRequirements, errorResult];
                     }}
                 }};
                 await update();
                 
+                const allRequirements = formattedRequirements.concat(installedRequirements);
                 // Update URL query params to include the current demo code state
                 const currentUrl = new URL(window.location.href);
+                currentUrl.searchParams.set('requirements', allRequirements.join('\\n'));
                 currentUrl.searchParams.set('code', code);
                 // Replace the current URL with the updated one
                 history.replaceState({{}}, '', currentUrl.href);
+                
+                return [allRequirements, errorResult];
             }}"""
     elif demo_type == DemoType.STREAMLIT:
         return f"""async (code, requirements) => {{       
@@ -139,7 +172,7 @@ def update_iframe_js(demo_type: DemoType) -> str:
 
 def copy_share_link_js(demo_type: DemoType) -> str:
     if demo_type == DemoType.GRADIO:
-        return f"""async (code) => {{
+        return f"""async () => {{
             const shareLink = document.URL;
             await navigator.clipboard.writeText(shareLink);
         }}"""
@@ -148,14 +181,14 @@ def copy_share_link_js(demo_type: DemoType) -> str:
 
 def copy_snippet_js(demo_type: DemoType) -> str:
     if demo_type == DemoType.GRADIO:
-        return f"""async (code) => {{
-            const escapedCode = code.replace('`', String.fromCharCode(92) + '`');
+        return f"""async (code, requirements) => {{
+            const escapedCode = code.replace(String.fromCharCode(92), String.fromCharCode(92) + String.fromCharCode(92)).replace('`', String.fromCharCode(92) + '`');
             const template = `{gradio_lite_snippet_template}`;
             // Step 1: Generate the HTML content
-            const completedTemplate = template.replace('STARTING_CODE', code);
-    
+            const completedTemplate = template.replace('STARTING_CODE', code).replace('STARTING_REQUIREMENTS', requirements);
             const snippet = completedTemplate;
             await navigator.clipboard.writeText(snippet);
+            return [code, requirements];
         }}"""
     elif demo_type == DemoType.STREAMLIT:
         return f"""async (code) => {{
@@ -172,10 +205,10 @@ def copy_snippet_js(demo_type: DemoType) -> str:
 
 def download_code_js(demo_type: DemoType) -> str:
     if demo_type == demo_type.GRADIO:
-        return f"""(code) => {{
-            const escapedCode = code.replace('`', String.fromCharCode(92) + '`');
+        return f"""(code, requirements) => {{
+            const escapedCode = code.replace(String.fromCharCode(92), String.fromCharCode(92) + String.fromCharCode(92)).replace('`', String.fromCharCode(92) + '`');
             // Step 1: Generate the HTML content
-            const completedTemplate = `{gradio_lite_html_template}`.replace('STARTING_CODE', escapedCode);
+            const completedTemplate = `{gradio_lite_html_template}`.replace('STARTING_CODE', escapedCode).replace('STARTING_REQUIREMENTS', requirements);
 
             // Step 2: Create a Blob from the HTML content
             const blob = new Blob([completedTemplate], {{ type: "text/html" }});

templates/gradio-lite/gradio-lite-snippet-template.html

@@ -7,6 +7,7 @@
 		    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
             <script type="module">
                   const code = \\\`STARTING_CODE\\\`;
+                  const requirements = \\\`STARTING_REQUIREMENTS\\\`.split('\\\\n').filter(x => x && !x.startsWith('#')).map(x => x.trim());
                   const appController = createGradioApp({
                         target: document.getElementById("gradio-app"),
                         code: code,
@@ -21,6 +22,8 @@
                         appMode: true
                     });
                   window.appController = appController;
+                  await appController.install(requirements);
+		          await appController.run_code(code);
             <\\\/script>\`
         const frame = document.getElementById('demo-iframe');
         frame.contentWindow.document.open();

templates/gradio-lite/gradio-lite-template.html

@@ -9,6 +9,7 @@
 		<div id="gradio-app"></div>
         <script type="module">
           const code = \`STARTING_CODE\`;
+          const requirements = \`STARTING_REQUIREMENTS\`.split('\\n').filter(x => x && !x.startsWith('#')).map(x => x.trim());
            // Mount options defined here: https://github.com/gradio-app/gradio/blob/1d986217f6f4fc1829e528d2afe365635788204f/js/lite/index.html#L27
           const appController = createGradioApp({
                     target: document.getElementById("gradio-app"),
@@ -26,6 +27,8 @@
           // Returned controller functions defined here:
           // https://github.com/gradio-app/gradio/blob/1d986217f6f4fc1829e528d2afe365635788204f/js/app/src/lite/index.ts#L165
           window.appController = appController;
+		  await appController.install(requirements);
+		  await appController.run_code(code);
         </script>
 	</body>
 </html>