Cleanup and move template to utility file.

app.py

@@ -1,13 +1,18 @@
 import logging
 import os
 import re
-from pathlib import Path
+import warnings
 
 import gradio as gr
 import requests
 import torch
 from transformers import AutoModelForSpeechSeq2Seq, AutoProcessor, pipeline
 
+from templates import starting_app_code, update_iframe_js, copy_snippet_js, download_code_js, load_js
+
+# Filter the UserWarning raised by the audio component.
+warnings.filterwarnings("ignore", message='Trying to convert audio automatically from int32 to 16-bit int format')
+
 logging.basicConfig(
     level=logging.INFO,  # Set the logging level to INFO or any other desired level
     format="%(asctime)s - %(message)s",  # Define the log message format
@@ -48,100 +53,7 @@ def init_speech_to_text_model():
 
 whisper_pipe = init_speech_to_text_model()
 
-code_pattern = r'```python\n(.*?)```'
-
-starting_app_code = """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()
-"""
-
-html_template = Path('gradio-lite-playground.html').read_text()
-pattern = r"# APP CODE START(.*?)# APP CODE END"
-
-load_js = f"""() => {{
-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('demoDiv');
-div.appendChild(iframe);
-
-const frame = document.querySelector('.my-frame');
-frame.contentWindow.document.open('text/html', 'replace');
-frame.contentWindow.document.write(`{html_template}`);
-frame.contentWindow.document.close();
-}}"""
-
-#  TODO: Works but is inefficient because the iframe has to be reloaded each time
-update_iframe_js = f"""(code) => {{
-const pattern = /# APP CODE START(.*?)# APP CODE END/gs;
-const template = `{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('demoDiv');
-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();
-}}"""
-
-copy_snippet_js = f"""async (code) => {{
-console.log(`DOWNLOADING 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`;
-// Step 1: Generate the HTML content
-const completedTemplate = template.replace(pattern, code);
-
-const snippet = completedTemplate;
-await navigator.clipboard.writeText(snippet);
-}}"""
-
-download_code_js = f"""(code) => {{
-const pattern = /# APP CODE START(.*?)# APP CODE END/gs;
-const template = `{html_template}`;
-// Step 1: Generate the HTML content
-const completedTemplate = template.replace(pattern, code);
-
-// 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);
-}}"""
+code_pattern = re.compile(r'```python\n(.*?)```', re.DOTALL)
 
 
 def query(payload):
@@ -162,10 +74,11 @@ def generate_text(code, prompt):
         raise gr.Warning(f'Language model call failed: {output["error"]}')
     logger.info(f'API RESPONSE\n{output[0]["generated_text"]}')
     assistant_reply = output[0]["generated_text"].split('<|assistant|>')[1]
-    match = re.search(code_pattern, assistant_reply, re.DOTALL)
+    match = re.search(code_pattern, assistant_reply)
+    if not match:
+        return assistant_reply, code, None
     new_code = match.group(1)
     logger.info(f'NEW CODE:\nnew_code')
-    # TODO: error handling here
     return assistant_reply, new_code, None
 
 
@@ -182,10 +95,11 @@ 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="demoDiv"></div>')
+            html = gr.HTML(value='<div id="gradioDemoDiv"></div>')
     gr.Markdown("## 2. Customize using voice requests!")
     with gr.Row():
         with gr.Column():
@@ -197,9 +111,10 @@ with gr.Blocks() as demo:
             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)
+                                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}
+            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)
@@ -209,9 +124,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 to paste in another page")
-            copy_snippet_btn.click(copy_notify, code_area, None, _js=copy_snippet_js)
+            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)
+            download_btn.click(None, code_area, None, _js=download_code_js('gradio-lite'))
     with gr.Row():
         with gr.Column():
             gr.Markdown("## Current limitations")
@@ -219,7 +134,7 @@ with gr.Blocks() as demo:
                 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)
+    demo.load(None, None, None, _js=load_js('gradio-lite'))
     demo.css = "footer {visibility: hidden}"
 
 if __name__ == "__main__":

templates.py

@@ -0,0 +1,140 @@
+from pathlib import Path
+
+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()
+stlite_snippet_template = Path('templates/stlite/stlite-snippet-template.html').read_text()
+
+
+def starting_app_code(demo_type):
+    if demo_type == 'gradio-lite':
+        return Path('templates/gradio-lite/gradio_lite_starting_code.py').read_text()
+    elif demo_type == 'stlite':
+        return Path('templates/stlite/stlite_starting_code.py').read_text().replace('`', r'\`')
+    raise NotImplementedError(f'{demo_type} is not a supported demo type')
+
+
+def load_js(demo_type):
+    if demo_type == 'gradio-lite':
+        return f"""() => {{
+            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(`{gradio_lite_html_template}`);
+            frame.contentWindow.document.close();
+        }}"""
+    elif demo_type == 'stlite':
+        return f"""() => {{
+            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');
+            const iframe = doc.getElementById('demo-iframe'); 
+            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 frame = document.getElementById('demo-iframe');
+            frame.contentWindow.document.open();
+            frame.contentWindow.document.write(template);
+            frame.contentWindow.document.close();
+        }}"""
+    raise NotImplementedError(f'{demo_type} is not a supported demo type')
+
+
+def update_iframe_js(demo_type):
+    if demo_type == 'gradio-lite':
+        #  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();
+        }}"""
+    elif demo_type == 'stlite':
+        return f"""async (code) => {{       
+            async function update() {{
+                const appController = document.getElementById('demo-iframe').contentWindow.window.appController;
+                const newCode = code + ` # Update tag ${{Math.random()}}`;
+                const entrypointFile = "streamlit_app.py";
+                appController.writeFile(entrypointFile, newCode);
+            }};
+            await update();
+        }}"""
+    raise NotImplementedError(f'{demo_type} is not a supported demo type')
+
+
+def copy_snippet_js(demo_type):
+    if demo_type == 'gradio-lite':
+        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`;
+            // Step 1: Generate the HTML content
+            const completedTemplate = template.replace(pattern, code);
+    
+            const snippet = completedTemplate;
+            await navigator.clipboard.writeText(snippet);
+        }}"""
+    elif demo_type == 'stlite':
+        return f"""async (code) => {{
+            const escapedCode = code.replace('`', String.fromCharCode(92) + '`');
+            const template = `{stlite_html_template}`;
+            // Step 1: Generate the HTML content
+            const completedTemplate = template.replace('STARTING_CODE', code);
+            
+            const snippet = completedTemplate;            
+            await navigator.clipboard.writeText(snippet);
+        }}"""
+    raise NotImplementedError(f'{demo_type} is not a supported demo type')
+
+
+def download_code_js(demo_type):
+    if demo_type == 'gradio-lite':
+        return f"""(code) => {{
+            const pattern = /# APP CODE START(.*?)# APP CODE END/gs;
+            const template = `{gradio_lite_html_template}`;
+            // Step 1: Generate the HTML content
+            const completedTemplate = template.replace(pattern, code);
+            
+            // 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);
+        }}"""
+    elif demo_type == 'stlite':
+        return Path('stlite_starting_code.py').read_text()
+    raise NotImplementedError(f'{demo_type} is not a supported demo type')

templates/gradio-lite/gradio_lite_starting_code.py

@@ -0,0 +1,15 @@
+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()

templates/stlite/stlite-snippet-template.html

@@ -0,0 +1,26 @@
+<div id="KiteWindApp">
+    <iframe id="demo-iframe" width="100%" height="512px" src="about:blank"></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"/>
+            <script src="https://cdn.jsdelivr.net/npm/@stlite/mountable@0.42.3/build/stlite.js"><\\\/script>
+            <script>
+                  const streamlitConfig = "[server]\\\\nrunOnSave = true";
+                  const code = \\\`STARTING_CODE\\\`;
+                  const appController = stlite.mount({
+                      requirements: ["matplotlib"], // Packages to install
+                      entrypoint: "streamlit_app.py", // The target file of the streamlit run command
+                      files: {
+                        ".streamlit/config.toml": streamlitConfig,
+                        "streamlit_app.py": code,
+                      },
+                    }, document.getElementById("root"));
+                  // Returned controller functions defined here:
+                  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/stlite/stlite-template.html

@@ -0,0 +1,29 @@
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>stlite app</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@stlite/mountable@0.39.0/build/stlite.css"/>
+</head>
+<body>
+    <div id="root"></div>
+    <script src="https://cdn.jsdelivr.net/npm/@stlite/mountable@0.42.3/build/stlite.js"></script>
+    <script>
+      const streamlitConfig = "[server]\\nrunOnSave = true";
+      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
+          entrypoint: "streamlit_app.py", // The target file of the streamlit run command
+          files: {
+            ".streamlit/config.toml": streamlitConfig,
+            "streamlit_app.py": code,
+          },
+        }, document.getElementById("root"));
+      // Returned controller functions defined here:
+      // https://github.com/whitphx/stlite/blob/1739c1cebb469a20e979906ce264f90254d154ba/packages/mountable/src/index.tsx#L55
+      window.appController = appController;
+    </script>
+</body>
+</html>

templates/stlite/stlite_starting_code.py

@@ -0,0 +1,4 @@
+import streamlit as st
+
+name = st.text_input('Your name')
+st.write("Hello,", name or "world")