Add requirements support, query param, copy link, and automatic tab selection for stlite.

app.py

@@ -1,6 +1,7 @@
 import logging
 import os
 import re
+import typing
 import warnings
 from pathlib import Path
 
@@ -98,9 +99,14 @@ def add_hotkeys() -> str:
     return Path("hotkeys.js").read_text()
 
 
-def apply_query_params(code: str, request: gr.Request) -> (str, str):
+def apply_query_params(gradio_code: str, stlite_code: str, request: gr.Request) -> (str, str, str, str, typing.Any):
     params = dict(request.query_params)
-    return params.get('code') or code, params.get('requirements') or ''
+    demo_type = params.get('type')
+    if demo_type == 'gradio':
+        return params.get('code') or gradio_code, params.get('requirements') or '', stlite_code, '', gr.Tabs(selected=0)
+    if demo_type == 'streamlit':
+        return gradio_code, '', params.get('code') or stlite_code, params.get('requirements') or '', gr.Tabs(selected=1)
+    return gradio_code, '', stlite_code, '', gr.Tabs(selected=0)
 
 
 def update_state(requirements: [str], error: str):
@@ -112,101 +118,104 @@ with gr.Blocks(title="KiteWind") as demo:
     gr.Markdown(
         '<h4 align="center">Chat-assisted web app creator by <a href="https://huggingface.co/gstaff">@gstaff</a></h4>')
     selectedTab = gr.State(value='gradio-lite')
-    with gr.Tab('Gradio (gradio-lite)') as gradio_lite_tab:
-        with gr.Row():
-            with gr.Column():
-                gr.Markdown("## 1. Run your app in the browser!")
-                gr.HTML(value='<div id="gradioDemoDiv"></div>')
-        gr.Markdown("## 2. Customize using voice requests!")
-        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_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():
-                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"])
-                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': [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)
-                in_audio.stop_recording(**transcribe_params).then(**gen_text_params).then(**code_update_params)
-        with gr.Row():
-            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, [gradio_code_area, gradio_requirements_area], 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, [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, [gradio_code_area, gradio_requirements_area], None, _js=download_code_js(DemoType.GRADIO))
-        with gr.Row():
-            with gr.Column():
-                gr.Markdown("## Current limitations")
-                with gr.Accordion("Click to view", open=False):
-                    gr.Markdown(
-                        "- Only gradio-lite apps using the libraries available in pyodide are supported\n- The chat hasn't been tuned on gradio library data; it may make mistakes")
-    with gr.Tab('Streamlit (stlite)') as stlite_tab:
-        with gr.Row():
-            with gr.Column():
-                gr.Markdown("## 1. Run your app in the browser!")
-                gr.HTML(value='<div id="stliteDemoDiv"></div>')
-        gr.Markdown("## 2. Customize using voice requests!")
-        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_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")
-                out_text = gr.TextArea(label="🤖 Chat Assistant Response")
-                clear_btn = gr.ClearButton([in_prompt, in_audio, out_text])
-            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))
-                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': [stlite_code_area, requirements_area], 'outputs': None,
-                                      '_js': update_iframe_js(DemoType.STREAMLIT)}
-                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)
-                in_audio.stop_recording(**transcribe_params).then(**gen_text_params).then(**code_update_params)
-        with gr.Row():
-            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, [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, stlite_code_area, None, _js=download_code_js(DemoType.STREAMLIT))
-        with gr.Row():
-            with gr.Column():
-                gr.Markdown("## Current limitations")
-                with gr.Accordion("Click to view", open=False):
-                    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")
+    with gr.Tabs() as tabs:
+        with gr.Tab('Gradio (gradio-lite)', id=0) as gradio_lite_tab:
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("## 1. Run your app in the browser!")
+                    gr.HTML(value='<div id="gradioDemoDiv"></div>')
+            gr.Markdown("## 2. Customize using voice requests!")
+            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_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():
+                    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"])
+                    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': [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)
+                    in_audio.stop_recording(**transcribe_params).then(**gen_text_params).then(**code_update_params)
+            with gr.Row():
+                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, [gradio_code_area, gradio_requirements_area], 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, [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, [gradio_code_area, gradio_requirements_area], None, _js=download_code_js(DemoType.GRADIO))
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("## Current limitations")
+                    with gr.Accordion("Click to view", open=False):
+                        gr.Markdown(
+                            "- Only gradio-lite apps using the libraries available in pyodide are supported\n- The chat hasn't been tuned on gradio library data; it may make mistakes")
+        with gr.Tab('Streamlit (stlite)', id=1) as stlite_tab:
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("## 1. Run your app in the browser!")
+                    gr.HTML(value='<div id="stliteDemoDiv"></div>')
+            gr.Markdown("## 2. Customize using voice requests!")
+            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_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")
+                    out_text = gr.TextArea(label="🤖 Chat Assistant Response")
+                    clear_btn = gr.ClearButton([in_prompt, in_audio, out_text])
+                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))
+                    stlite_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"])
+                    last_error = gr.State()
+                    code_update_params = {'fn': None, 'inputs': [stlite_code_area, stlite_requirements_area], 'outputs': [stlite_requirements_area, last_error],
+                                          '_js': update_iframe_js(DemoType.STREAMLIT)}
+                    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)
+                    in_audio.stop_recording(**transcribe_params).then(**gen_text_params).then(**code_update_params)
+            with gr.Row():
+                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, [stlite_code_area, stlite_requirements_area], None,
+                                         _js=copy_share_link_js(DemoType.STREAMLIT))
+                    copy_snippet_btn = gr.Button("✂️ Copy app snippet into paste in another page")
+                    copy_snippet_btn.click(copy_notify, [stlite_code_area, stlite_requirements_area], None, _js=copy_snippet_js(DemoType.STREAMLIT))
+                    download_btn = gr.Button("🗎 Download app as a standalone file")
+                    download_btn.click(None, [stlite_code_area, stlite_requirements_area], None, _js=download_code_js(DemoType.STREAMLIT))
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("## Current limitations")
+                    with gr.Accordion("Click to view", open=False):
+                        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=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.load(apply_query_params, [gradio_code_area, stlite_code_area], [gradio_code_area, gradio_requirements_area, stlite_code_area, stlite_requirements_area, tabs])
     demo.css = "footer {visibility: hidden}"
 
 if __name__ == "__main__":

templates.py

@@ -48,8 +48,13 @@ def load_js(demo_type: DemoType) -> str:
             // Parse the query string into an object
             const queryParams = parseQueryString(queryString);
             // Access individual parameters
-            const codeValue = queryParams.code;
-            const requirementsValue = queryParams.requirements;
+            const typeValue = queryParams.type;
+            let codeValue = null;
+            let requirementsValue = null;
+            if (typeValue === 'gradio') {{
+                codeValue = queryParams.code;
+                requirementsValue = queryParams.requirements;
+            }}
                         
             const htmlString = '<iframe id="gradio-iframe" width="100%" height="512px" src="about:blank"></iframe>';
             const parser = new DOMParser();
@@ -74,6 +79,35 @@ def load_js(demo_type: DemoType) -> str:
             if (window.stliteLoaded) {{
                 return
             }}
+            
+            // Get the query string from the URL
+            const queryString = window.location.search;
+            // Use a function to parse the query string into an object
+            function parseQueryString(queryString) {{
+                const params = {{}};
+                const queryStringWithoutQuestionMark = queryString.substring(1); // Remove the leading question mark
+                const keyValuePairs = queryStringWithoutQuestionMark.split('&');
+            
+                keyValuePairs.forEach(keyValue => {{
+                    const [key, value] = keyValue.split('=');
+                    if (value) {{
+                        params[key] = decodeURIComponent(value.replace(/\+/g, ' '));
+                    }}
+                }});
+            
+                return params;
+            }}
+            // Parse the query string into an object
+            const queryParams = parseQueryString(queryString);
+            // Access individual parameters
+            const typeValue = queryParams.type;
+            let codeValue = null;
+            let requirementsValue = null;
+            if (typeValue === 'streamlit') {{
+                codeValue = queryParams.code;
+                requirementsValue = queryParams.requirements;
+            }}
+            
             const htmlString = '<iframe id="stlite-iframe" width="100%" height="512px" src="about:blank"></iframe>';
             const parser = new DOMParser();
             const doc = parser.parseFromString(htmlString, 'text/html');
@@ -81,7 +115,12 @@ def load_js(demo_type: DemoType) -> str:
             const div = document.getElementById('stliteDemoDiv');
             div.appendChild(iframe);
             
-            const template = `{stlite_html_template.replace('STARTING_CODE', starting_app_code(demo_type))}`;            
+            let template = `{stlite_html_template.replace('STARTING_CODE', starting_app_code(demo_type))}`;
+            if (codeValue) {{
+                template = `{stlite_html_template}`.replace('STARTING_CODE', codeValue.replaceAll(String.fromCharCode(92), String.fromCharCode(92) + String.fromCharCode(92)).replaceAll('`', String.fromCharCode(92) + '`'));
+            }}
+            const formattedRequirements = (requirementsValue || '').split('\\n').filter(x => x && !x.startsWith('#')).map(x => x.trim());
+            template = template.replace('STARTING_REQUIREMENTS', formattedRequirements.map(x => `"${{x}}"`).join(', ') || '');
             const frame = document.getElementById('stlite-iframe');
             frame.contentWindow.document.open();
             frame.contentWindow.document.write(template);
@@ -150,6 +189,7 @@ def update_iframe_js(demo_type: DemoType) -> str:
                 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('type', 'gradio');
                 currentUrl.searchParams.set('requirements', allRequirements.join('\\n'));
                 currentUrl.searchParams.set('code', code);
                 // Replace the current URL with the updated one
@@ -158,14 +198,56 @@ def update_iframe_js(demo_type: DemoType) -> str:
                 return [allRequirements, errorResult];
             }}"""
     elif demo_type == DemoType.STREAMLIT:
-        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() {{
                 const appController = document.getElementById('stlite-iframe').contentWindow.window.appController;
-                const newCode = code + ` # Update tag ${{Math.random()}}`;
-                const entrypointFile = "streamlit_app.py";
-                appController.writeFile(entrypointFile, newCode);
+                try {{
+                    await appController.install(formattedRequirements);
+                    const newCode = code + ` # Update tag ${{Math.random()}}`;
+                    const entrypointFile = "streamlit_app.py";
+                    // TODO: As code rerun happens inside streamlit this won't throw an error for self-healing imports
+                    await appController.writeFile(entrypointFile, newCode);
+                }}
+                catch (e) {{                    
+                    // 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);
+                        }}
+                    }}
+                    
+                    errorResult = e.toString();
+                    const allRequirements = formattedRequirements.concat(installedRequirements);
+                    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('type', 'streamlit');
+            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.join('\\n'), errorResult];
         }}"""
     raise NotImplementedError(f'{demo_type} is not a supported demo type')
 
@@ -174,6 +256,18 @@ def copy_share_link_js(demo_type: DemoType) -> str:
     if demo_type == DemoType.GRADIO:
         return f"""async (code, requirements) => {{
             const url = new URL(window.location.href);
+            url.searchParams.set('type', 'gradio');
+            url.searchParams.set('requirements', requirements);
+            url.searchParams.set('code', code);
+            // TODO: Figure out why link doesn't load as expected in Spaces.
+            const shareLink = url.toString().replace('gstaff-kitewind.hf.space', 'huggingface.co/spaces/gstaff/KiteWind');
+            await navigator.clipboard.writeText(shareLink);
+            return [code, requirements];
+        }}"""
+    if demo_type == DemoType.STREAMLIT:
+        return f"""async (code, requirements) => {{
+            const url = new URL(window.location.href);
+            url.searchParams.set('type', 'streamlit');
             url.searchParams.set('requirements', requirements);
             url.searchParams.set('code', code);
             // TODO: Figure out why link doesn't load as expected in Spaces.
@@ -196,14 +290,16 @@ def copy_snippet_js(demo_type: DemoType) -> str:
             return [code, requirements];
         }}"""
     elif demo_type == DemoType.STREAMLIT:
-        return f"""async (code) => {{
+        return f"""async (code, requirements) => {{
             const escapedCode = code.replaceAll(String.fromCharCode(92), String.fromCharCode(92) + String.fromCharCode(92) + String.fromCharCode(92)).replaceAll('`', String.fromCharCode(92) + '`');
             const template = `{stlite_snippet_template}`;
             // Step 1: Generate the HTML content
-            const completedTemplate = template.replace('STARTING_CODE', code);
+            const formattedRequirements = (requirements || '').split('\\n').filter(x => x && !x.startsWith('#')).map(x => x.trim());
+            const completedTemplate = template.replace('STARTING_CODE', code).replace('STARTING_REQUIREMENTS', formattedRequirements.map(x => `"${{x}}"`).join(', ') || '');
             
             const snippet = completedTemplate;            
             await navigator.clipboard.writeText(snippet);
+            return [code, requirements];
         }}"""
     raise NotImplementedError(f'{demo_type} is not a supported demo type')
 
@@ -233,10 +329,11 @@ def download_code_js(demo_type: DemoType) -> str:
             URL.revokeObjectURL(url);
         }}"""
     elif demo_type == demo_type.STREAMLIT:
-        return f"""(code) => {{
+        return f"""(code, requirements) => {{
             const escapedCode = code.replaceAll(String.fromCharCode(92), String.fromCharCode(92) + String.fromCharCode(92)).replaceAll('`', String.fromCharCode(92) + '`');
             // Step 1: Generate the HTML content
-            const completedTemplate = `{stlite_html_template}`.replace('STARTING_CODE', escapedCode);
+            const formattedRequirements = (requirements || '').split('\\n').filter(x => x && !x.startsWith('#')).map(x => x.trim());
+            const completedTemplate = `{stlite_html_template}`.replace('STARTING_CODE', escapedCode).replace('STARTING_REQUIREMENTS', formattedRequirements.map(x => `"${{x}}"`).join(', ') || '');
             
             // Step 2: Create a Blob from the HTML content
             const blob = new Blob([completedTemplate], {{ type: "text/html" }});

templates/stlite/stlite-snippet-template.html

@@ -9,7 +9,7 @@
                   const streamlitConfig = "[server]\\\\nrunOnSave = true";
                   const code = \\\`STARTING_CODE\\\`;
                   const appController = stlite.mount({
-                      requirements: ["matplotlib"], // Packages to install
+                      requirements: [STARTING_REQUIREMENTS], // Packages to install
                       entrypoint: "streamlit_app.py", // The target file of the streamlit run command
                       files: {
                         ".streamlit/config.toml": streamlitConfig,

templates/stlite/stlite-template.html

@@ -16,7 +16,7 @@
       const code = \`STARTING_CODE\`;
       // Mount options defined here: https://github.com/whitphx/stlite/blob/main/packages/mountable/src/options.ts#L7
       const appController = stlite.mount({
-          requirements: ["matplotlib"], // Packages to install
+          requirements: [STARTING_REQUIREMENTS], // Packages to install
           entrypoint: "streamlit_app.py", // The target file of the streamlit run command
           files: {
             ".streamlit/config.toml": streamlitConfig,