Update gradio-lite templates to allow for hot-reload.

app.py

@@ -116,27 +116,27 @@ with gr.Blocks() as demo:
     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')
-    with gr.Tab('Streamlit (stlite)') as stlite_tab:
+    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="stliteDemoDiv"></div>')
+                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')
                     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- Put the reversed name output into a separate textbox")
                 out_text = gr.TextArea(label="Chat Assistant Response")
-                clear_btn = gr.ClearButton([in_prompt, in_audio, out_text])
+                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(DemoType.STREAMLIT))
+                                    language='python', value=starting_app_code(DemoType.GRADIO))
                 update_btn = gr.Button("Update App", variant="primary")
                 code_update_params = {'fn': None, 'inputs': code_area, 'outputs': None,
-                                      '_js': update_iframe_js(DemoType.STREAMLIT)}
+                                      '_js': update_iframe_js(DemoType.GRADIO)}
                 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]}
@@ -147,35 +147,35 @@ with gr.Blocks() as demo:
             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(DemoType.STREAMLIT))
+                copy_snippet_btn.click(copy_notify, code_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.STREAMLIT))
+                download_btn.click(None, code_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 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:
+                        "- 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")
+    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="gradioDemoDiv"></div>')
+                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')
                     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")
+                                           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")
-                clear = gr.ClearButton([in_prompt, in_audio, out_text])
+                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(DemoType.GRADIO))
+                                    language='python', value=starting_app_code(DemoType.STREAMLIT))
                 update_btn = gr.Button("Update App", variant="primary")
                 code_update_params = {'fn': None, 'inputs': code_area, 'outputs': None,
-                                      '_js': update_iframe_js(DemoType.GRADIO)}
+                                      '_js': update_iframe_js(DemoType.STREAMLIT)}
                 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]}
@@ -186,20 +186,19 @@ with gr.Blocks() as demo:
             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(DemoType.GRADIO))
+                copy_snippet_btn.click(copy_notify, code_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.GRADIO))
+                download_btn.click(None, 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 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(DemoType.STREAMLIT))
+                        "- 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))
-    demo.load(None, None, None, _js=load_js(DemoType.STREAMLIT))
+    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())
     demo.css = "footer {visibility: hidden}"
 

templates.py

@@ -9,12 +9,13 @@ class DemoType(Enum):
 
 gradio_lite_html_template = Path('templates/gradio-lite/gradio-lite-template.html').read_text()
 stlite_html_template = Path('templates/stlite/stlite-template.html').read_text()
+gradio_lite_snippet_template = Path('templates/gradio-lite/gradio-lite-snippet-template.html').read_text()
 stlite_snippet_template = Path('templates/stlite/stlite-snippet-template.html').read_text()
 
 
 def starting_app_code(demo_type: DemoType) -> str:
     if demo_type == DemoType.GRADIO:
-        return Path('templates/gradio-lite/gradio_lite_starting_code.py').read_text()
+        return Path('templates/gradio-lite/gradio_lite_starting_code.py').read_text().replace('`', r'\`')
     elif demo_type == DemoType.STREAMLIT:
         return Path('templates/stlite/stlite_starting_code.py').read_text().replace('`', r'\`')
     raise NotImplementedError(f'{demo_type} is not a supported demo type')
@@ -26,16 +27,17 @@ def load_js(demo_type: DemoType) -> str:
             if (window.gradioLiteLoaded) {{
                 return
             }}
-            const htmlString = '<iframe class="my-frame" width="100%" height="512px" src="about:blank"></iframe>';
+            const htmlString = '<iframe id="gradio-iframe" width="100%" height="512px" src="about:blank"></iframe>';
             const parser = new DOMParser();
             const doc = parser.parseFromString(htmlString, 'text/html');
-            const iframe = doc.querySelector('.my-frame'); 
+            const iframe = doc.getElementById('gradio-iframe'); 
             const div = document.getElementById('gradioDemoDiv');
             div.appendChild(iframe);
     
-            const frame = document.querySelector('.my-frame');
+            const template = `{gradio_lite_html_template.replace('STARTING_CODE', starting_app_code(demo_type))}`;
+            const frame = document.getElementById('gradio-iframe');
             frame.contentWindow.document.open('text/html', 'replace');
-            frame.contentWindow.document.write(`{gradio_lite_html_template}`);
+            frame.contentWindow.document.write(template);
             frame.contentWindow.document.close();
             window.gradioLiteLoaded = true;
         }}"""
@@ -44,15 +46,15 @@ def load_js(demo_type: DemoType) -> str:
             if (window.stliteLoaded) {{
                 return
             }}
-            const htmlString = '<iframe id="demo-iframe" width="100%" height="512px" src="about:blank"></iframe>';
+            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');
-            const iframe = doc.getElementById('demo-iframe'); 
+            const iframe = doc.getElementById('stlite-iframe'); 
             const div = document.getElementById('stliteDemoDiv');
             div.appendChild(iframe);
             
             const template = `{stlite_html_template.replace('STARTING_CODE', starting_app_code(demo_type))}`;            
-            const frame = document.getElementById('demo-iframe');
+            const frame = document.getElementById('stlite-iframe');
             frame.contentWindow.document.open();
             frame.contentWindow.document.write(template);
             frame.contentWindow.document.close();
@@ -62,32 +64,20 @@ def load_js(demo_type: DemoType) -> str:
 
 
 def update_iframe_js(demo_type: DemoType) -> str:
+    # TODO: Theme changes are not picked up; look at options to refresh the css.
     if demo_type == DemoType.GRADIO:
-        #  TODO: Works but is inefficient because the iframe has to be reloaded each time
-        return f"""(code) => {{
-            const pattern = /# APP CODE START(.*?)# APP CODE END/gs;
-            const template = `{gradio_lite_html_template}`;
-            const completedTemplate = template.replace(pattern, code);
-    
-            const oldFrame = document.querySelector('.my-frame');
-            oldFrame.remove();
-    
-            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');
-            const iframe = doc.querySelector('.my-frame'); 
-            const div = document.getElementById('gradioDemoDiv');
-            div.appendChild(iframe);
-    
-            const frame = document.querySelector('.my-frame');
-            frame.contentWindow.document.open('text/html', 'replace');
-            frame.contentWindow.document.write(completedTemplate);
-            frame.contentWindow.document.close();
-        }}"""
+        return f"""async (code) => {{       
+                async function update() {{
+                    const appController = document.getElementById('gradio-iframe').contentWindow.window.appController;
+                    const newCode = code + ` # Update tag ${{Math.random()}}`;
+                    appController.run_code(newCode);
+                }};
+                await update();
+            }}"""
     elif demo_type == DemoType.STREAMLIT:
         return f"""async (code) => {{       
             async function update() {{
-                const appController = document.getElementById('demo-iframe').contentWindow.window.appController;
+                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);
@@ -100,12 +90,10 @@ def update_iframe_js(demo_type: DemoType) -> str:
 def copy_snippet_js(demo_type: DemoType) -> str:
     if demo_type == DemoType.GRADIO:
         return f"""async (code) => {{
-            const pattern = /# APP CODE START(.*?)# APP CODE END/gs;
-            const template = `<div id="KiteWindApp">\n<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
-            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
-            <gradio-lite>\n# APP CODE START\n\n# APP CODE END\n</gradio-lite>\n</div>\n`;
+            const escapedCode = code.replace('`', String.fromCharCode(92) + '`');
+            const template = `{gradio_lite_snippet_template}`;
             // Step 1: Generate the HTML content
-            const completedTemplate = template.replace(pattern, code);
+            const completedTemplate = template.replace('STARTING_CODE', code);
     
             const snippet = completedTemplate;
             await navigator.clipboard.writeText(snippet);
@@ -113,7 +101,7 @@ def copy_snippet_js(demo_type: DemoType) -> str:
     elif demo_type == DemoType.STREAMLIT:
         return f"""async (code) => {{
             const escapedCode = code.replace('`', String.fromCharCode(92) + '`');
-            const template = `{stlite_html_template}`;
+            const template = `{stlite_snippet_template}`;
             // Step 1: Generate the HTML content
             const completedTemplate = template.replace('STARTING_CODE', code);
             
@@ -126,25 +114,24 @@ 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 pattern = /# APP CODE START(.*?)# APP CODE END/gs;
-            const template = `{gradio_lite_html_template}`;
+            const escapedCode = code.replace('`', String.fromCharCode(92) + '`');
             // Step 1: Generate the HTML content
-            const completedTemplate = template.replace(pattern, code);
-            
+            const completedTemplate = `{gradio_lite_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 = "gradio-lite-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);
         }}"""

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

@@ -0,0 +1,29 @@
+<div id="KiteWindApp">
+    <iframe id="demo-iframe" width="100%" height="512px" src="about:blank" frameborder="0"></iframe>
+    <script>
+        const template = \`<div id="gradio-app"></div>
+            <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"><\\\/script>
+		    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
+            <script type="module">
+                  const code = \\\`STARTING_CODE\\\`;
+                  const appController = createGradioApp({
+                        target: document.getElementById("gradio-app"),
+                        code: code,
+                        info: true,
+                        container: true,
+                        isEmbed: false,
+                        initialHeight: "400px",
+                        eager: false,
+                        themeMode: null,
+                        autoScroll: false,
+                        controlPageTitle: false,
+                        appMode: true
+                    });
+                  window.appController = appController;
+            <\\\/script>\`
+        const frame = document.getElementById('demo-iframe');
+        frame.contentWindow.document.open();
+        frame.contentWindow.document.write(template);
+        frame.contentWindow.document.close();
+    </script>
+</div>

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

@@ -5,25 +5,26 @@
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
 	</head>
 	<body>
-		<gradio-lite id="KiteWindApp">
-# APP CODE START
-import gradio as gr
-
-def greet(name):
-    return "Hello " + name + "!"
-
-with gr.Blocks(theme="monochrome") as demo:
-    name = gr.Textbox(label="Name", value="World")
-    output = gr.Textbox(label="Output Box")
-    greet_btn = gr.Button("Greet")
-    greet_btn.click(fn=greet, inputs=name, outputs=output)
-    name.submit(fn=greet, inputs=name, outputs=output)
-
-if __name__ == "__main__":
-    demo.css = "footer {visibility: hidden}"
-    demo.launch()
-
-# APP CODE END
-		</gradio-lite>
+		<div id="gradio-app"></div>
+        <script type="module">
+          const code = \`STARTING_CODE\`;
+           // 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"),
+                    code: code,
+                    info: true,
+                    container: true,
+                    isEmbed: false,
+                    initialHeight: "400px",
+                    eager: false,
+                    themeMode: null,
+                    autoScroll: false,
+                    controlPageTitle: false,
+                    appMode: true
+                });
+          // Returned controller functions defined here:
+          // https://github.com/gradio-app/gradio/blob/1d986217f6f4fc1829e528d2afe365635788204f/js/app/src/lite/index.ts#L165
+          window.appController = appController;
+        </script>
 	</body>
 </html>

templates/stlite/stlite-snippet-template.html

@@ -1,5 +1,5 @@
 <div id="KiteWindApp">
-    <iframe id="demo-iframe" width="100%" height="512px" src="about:blank"></iframe>
+    <iframe id="demo-iframe" width="100%" height="512px" src="about:blank" frameborder="0"></iframe>
     <script>
         const template = \`<div id="root"></div>
             <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@stlite/mountable@0.39.0/build/stlite.css"/>