Support both stlite and gradio-lite app creation.

app.py

@@ -95,46 +95,87 @@ with gr.Blocks() as demo:
     gr.Markdown("<h1 align=\"center\">KiteWind 🪁🍃</h1>")
     gr.Markdown(
         "<h4 align=\"center\">Chat-assisted web app creator by <a href=\"https://huggingface.co/gstaff\">@gstaff</a></h4>")
-
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown("## 1. Run your app in the browser!")
-            html = 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", 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")
-            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",
-                                language='python', value=starting_app_code('gradio-lite'))
-            update_btn = gr.Button("Update App", variant="primary")
-            code_update_params = {'fn': None, 'inputs': code_area, 'outputs': None,
-                                  '_js': update_iframe_js('gradio-lite')}
-            gen_text_params = {'fn': generate_text, 'inputs': [code_area, in_prompt], 'outputs': [out_text, 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 to paste in another page")
-            copy_snippet_btn.click(copy_notify, code_area, None, _js=copy_snippet_js('gradio-lite'))
-            download_btn = gr.Button("Download app as a standalone file")
-            download_btn.click(None, code_area, None, _js=download_code_js('gradio-lite'))
-    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 python standard libraries and gradio are supported\n- The chat hasn't been tuned on gradio library data; it may make mistakes\n- The app needs to fully reload each time it is changed")
-
-    demo.load(None, None, None, _js=load_js('gradio-lite'))
+    selectedTab = gr.State(value='stlite')
+    with gr.Tab('Streamlit (stlite)') as stlite_tab:
+        with gr.Row():
+            with gr.Column():
+                gr.Markdown("## 1. Run your app in the browser!")
+                html = 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", 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\n- Change the greeting from hello to hey there")
+                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",
+                                    language='python', value=starting_app_code('stlite'))
+                update_btn = gr.Button("Update App", variant="primary")
+                code_update_params = {'fn': None, 'inputs': code_area, 'outputs': None, '_js': update_iframe_js('stlite')}
+                gen_text_params = {'fn': generate_text, 'inputs': [code_area, in_prompt],
+                                   'outputs': [out_text, 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 to paste in another page")
+                copy_snippet_btn.click(copy_notify, code_area, None, _js=copy_snippet_js('stlite'))
+                download_btn = gr.Button("Download app as a standalone file")
+                download_btn.click(None, code_area, None, _js=download_code_js('stlite'))
+        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.Tab('Gradio (gradio-lite)') as gradio_lite_tab:
+        with gr.Row():
+            with gr.Column():
+                gr.Markdown("## 1. Run your app in the browser!")
+                html = 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", 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")
+                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",
+                                    language='python', value=starting_app_code('gradio-lite'))
+                update_btn = gr.Button("Update App", variant="primary")
+                code_update_params = {'fn': None, 'inputs': code_area, 'outputs': None,
+                                      '_js': update_iframe_js('gradio-lite')}
+                gen_text_params = {'fn': generate_text, 'inputs': [code_area, in_prompt], 'outputs': [out_text, 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 to paste in another page")
+                copy_snippet_btn.click(copy_notify, code_area, None, _js=copy_snippet_js('gradio-lite'))
+                download_btn = gr.Button("Download app as a standalone file")
+                download_btn.click(None, code_area, None, _js=download_code_js('gradio-lite'))
+        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 python standard libraries and gradio are supported\n- The chat hasn't been tuned on gradio library data; it may make mistakes\n- The app needs to fully reload each time it is changed")
+
+    stlite_tab.select(lambda: "stlite", None, selectedTab).then(None, None, None, _js=load_js('stlite'))
+    gradio_lite_tab.select(lambda: "gradio-lite", None, selectedTab).then(None, None, None, _js=load_js('gradio-lite'))
+    demo.load(None, None, None, _js=load_js('stlite'))
     demo.css = "footer {visibility: hidden}"
 
 if __name__ == "__main__":

templates.py

@@ -16,6 +16,9 @@ def starting_app_code(demo_type):
 def load_js(demo_type):
     if demo_type == 'gradio-lite':
         return f"""() => {{
+            if (window.gradioLiteLoaded) {{
+                return
+            }}
             const htmlString = '<iframe class="my-frame" width="100%" height="512px" src="about:blank"></iframe>';
             const parser = new DOMParser();
             const doc = parser.parseFromString(htmlString, 'text/html');
@@ -27,9 +30,13 @@ def load_js(demo_type):
             frame.contentWindow.document.open('text/html', 'replace');
             frame.contentWindow.document.write(`{gradio_lite_html_template}`);
             frame.contentWindow.document.close();
+            window.gradioLiteLoaded = true;
         }}"""
     elif demo_type == 'stlite':
         return f"""() => {{
+            if (window.stliteLoaded) {{
+                return
+            }}
             const htmlString = '<iframe id="demo-iframe" width="100%" height="512px" src="about:blank"></iframe>';
             const parser = new DOMParser();
             const doc = parser.parseFromString(htmlString, 'text/html');
@@ -37,13 +44,12 @@ def load_js(demo_type):
             const div = document.getElementById('stliteDemoDiv');
             div.appendChild(iframe);
             
-            const template = `{stlite_html_template.replace('STARTING_CODE', starting_app_code(demo_type))}`;
-            console.log(template);
-            
+            const template = `{stlite_html_template.replace('STARTING_CODE', starting_app_code(demo_type))}`;            
             const frame = document.getElementById('demo-iframe');
             frame.contentWindow.document.open();
             frame.contentWindow.document.write(template);
             frame.contentWindow.document.close();
+            window.stliteLoaded = true;
         }}"""
     raise NotImplementedError(f'{demo_type} is not a supported demo type')
 
@@ -136,5 +142,26 @@ def download_code_js(demo_type):
             URL.revokeObjectURL(url);
         }}"""
     elif demo_type == 'stlite':
-        return Path('stlite_starting_code.py').read_text()
+        return f"""(code) => {{
+            const escapedCode = code.replace('`', String.fromCharCode(92) + '`');
+            // Step 1: Generate the HTML content
+            const completedTemplate = `{stlite_html_template}`.replace('STARTING_CODE', escapedCode);
+            
+            // Step 2: Create a Blob from the HTML content
+            const blob = new Blob([completedTemplate], {{ type: "text/html" }});
+            
+            // Step 3: Create a URL for the Blob
+            const url = URL.createObjectURL(blob);
+            
+            // Step 4: Create a download link
+            const downloadLink = document.createElement("a");
+            downloadLink.href = url;
+            downloadLink.download = "stlite-app.html"; // Specify the filename for the download
+            
+            // Step 5: Trigger a click event on the download link
+            downloadLink.click();
+            
+            // Clean up by revoking the URL
+            URL.revokeObjectURL(url);
+        }}"""
     raise NotImplementedError(f'{demo_type} is not a supported demo type')