gstaff commited on
Commit
149da6f
β€’
1 Parent(s): c2ce1fe

Support both stlite and gradio-lite app creation.

Browse files
Files changed (2) hide show
  1. app.py +81 -40
  2. templates.py +31 -4
app.py CHANGED
@@ -95,46 +95,87 @@ with gr.Blocks() as demo:
95
  gr.Markdown("<h1 align=\"center\">KiteWind πŸͺπŸƒ</h1>")
96
  gr.Markdown(
97
  "<h4 align=\"center\">Chat-assisted web app creator by <a href=\"https://huggingface.co/gstaff\">@gstaff</a></h4>")
98
-
99
- with gr.Row():
100
- with gr.Column():
101
- gr.Markdown("## 1. Run your app in the browser!")
102
- html = gr.HTML(value='<div id="gradioDemoDiv"></div>')
103
- gr.Markdown("## 2. Customize using voice requests!")
104
- with gr.Row():
105
- with gr.Column():
106
- with gr.Group():
107
- in_audio = gr.Audio(label="Record a voice request", source='microphone', type='filepath')
108
- in_prompt = gr.Textbox(label="Or type a text request and press Enter",
109
- 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")
110
- out_text = gr.TextArea(label="Chat Assistant Response")
111
- clear = gr.ClearButton([in_prompt, in_audio, out_text])
112
- with gr.Column():
113
- code_area = gr.Code(label="App Code - You can also edit directly and then click Update App",
114
- language='python', value=starting_app_code('gradio-lite'))
115
- update_btn = gr.Button("Update App", variant="primary")
116
- code_update_params = {'fn': None, 'inputs': code_area, 'outputs': None,
117
- '_js': update_iframe_js('gradio-lite')}
118
- gen_text_params = {'fn': generate_text, 'inputs': [code_area, in_prompt], 'outputs': [out_text, code_area]}
119
- transcribe_params = {'fn': transcribe, 'inputs': [in_audio], 'outputs': [in_prompt, in_audio]}
120
- update_btn.click(**code_update_params)
121
- in_prompt.submit(**gen_text_params).then(**code_update_params)
122
- in_audio.stop_recording(**transcribe_params).then(**gen_text_params).then(**code_update_params)
123
- with gr.Row():
124
- with gr.Column():
125
- gr.Markdown("## 3. Export your app to share!")
126
- copy_snippet_btn = gr.Button("Copy app snippet to paste in another page")
127
- copy_snippet_btn.click(copy_notify, code_area, None, _js=copy_snippet_js('gradio-lite'))
128
- download_btn = gr.Button("Download app as a standalone file")
129
- download_btn.click(None, code_area, None, _js=download_code_js('gradio-lite'))
130
- with gr.Row():
131
- with gr.Column():
132
- gr.Markdown("## Current limitations")
133
- with gr.Accordion("Click to view", open=False):
134
- gr.Markdown(
135
- "- 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")
136
-
137
- demo.load(None, None, None, _js=load_js('gradio-lite'))
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138
  demo.css = "footer {visibility: hidden}"
139
 
140
  if __name__ == "__main__":
 
95
  gr.Markdown("<h1 align=\"center\">KiteWind πŸͺπŸƒ</h1>")
96
  gr.Markdown(
97
  "<h4 align=\"center\">Chat-assisted web app creator by <a href=\"https://huggingface.co/gstaff\">@gstaff</a></h4>")
98
+ selectedTab = gr.State(value='stlite')
99
+ with gr.Tab('Streamlit (stlite)') as stlite_tab:
100
+ with gr.Row():
101
+ with gr.Column():
102
+ gr.Markdown("## 1. Run your app in the browser!")
103
+ html = gr.HTML(value='<div id="stliteDemoDiv"></div>')
104
+ gr.Markdown("## 2. Customize using voice requests!")
105
+ with gr.Row():
106
+ with gr.Column():
107
+ with gr.Group():
108
+ in_audio = gr.Audio(label="Record a voice request", source='microphone', type='filepath')
109
+ in_prompt = gr.Textbox(label="Or type a text request and press Enter",
110
+ placeholder="Need an idea? Try one of these:\n- Add a button\n- Change the greeting from hello to hey there")
111
+ out_text = gr.TextArea(label="Chat Assistant Response")
112
+ clear_btn = gr.ClearButton([in_prompt, in_audio, out_text])
113
+ with gr.Column():
114
+ code_area = gr.Code(label="App Code - You can also edit directly and then click Update App",
115
+ language='python', value=starting_app_code('stlite'))
116
+ update_btn = gr.Button("Update App", variant="primary")
117
+ code_update_params = {'fn': None, 'inputs': code_area, 'outputs': None, '_js': update_iframe_js('stlite')}
118
+ gen_text_params = {'fn': generate_text, 'inputs': [code_area, in_prompt],
119
+ 'outputs': [out_text, code_area]}
120
+ transcribe_params = {'fn': transcribe, 'inputs': [in_audio], 'outputs': [in_prompt, in_audio]}
121
+ update_btn.click(**code_update_params)
122
+ in_prompt.submit(**gen_text_params).then(**code_update_params)
123
+ in_audio.stop_recording(**transcribe_params).then(**gen_text_params).then(**code_update_params)
124
+ with gr.Row():
125
+ with gr.Column():
126
+ gr.Markdown("## 3. Export your app to share!")
127
+ copy_snippet_btn = gr.Button("Copy app snippet to paste in another page")
128
+ copy_snippet_btn.click(copy_notify, code_area, None, _js=copy_snippet_js('stlite'))
129
+ download_btn = gr.Button("Download app as a standalone file")
130
+ download_btn.click(None, code_area, None, _js=download_code_js('stlite'))
131
+ with gr.Row():
132
+ with gr.Column():
133
+ gr.Markdown("## Current limitations")
134
+ with gr.Accordion("Click to view", open=False):
135
+ gr.Markdown(
136
+ "- 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")
137
+ with gr.Tab('Gradio (gradio-lite)') as gradio_lite_tab:
138
+ with gr.Row():
139
+ with gr.Column():
140
+ gr.Markdown("## 1. Run your app in the browser!")
141
+ html = gr.HTML(value='<div id="gradioDemoDiv"></div>')
142
+ gr.Markdown("## 2. Customize using voice requests!")
143
+ with gr.Row():
144
+ with gr.Column():
145
+ with gr.Group():
146
+ in_audio = gr.Audio(label="Record a voice request", source='microphone', type='filepath')
147
+ in_prompt = gr.Textbox(label="Or type a text request and press Enter",
148
+ 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")
149
+ out_text = gr.TextArea(label="Chat Assistant Response")
150
+ clear = gr.ClearButton([in_prompt, in_audio, out_text])
151
+ with gr.Column():
152
+ code_area = gr.Code(label="App Code - You can also edit directly and then click Update App",
153
+ language='python', value=starting_app_code('gradio-lite'))
154
+ update_btn = gr.Button("Update App", variant="primary")
155
+ code_update_params = {'fn': None, 'inputs': code_area, 'outputs': None,
156
+ '_js': update_iframe_js('gradio-lite')}
157
+ gen_text_params = {'fn': generate_text, 'inputs': [code_area, in_prompt], 'outputs': [out_text, code_area]}
158
+ transcribe_params = {'fn': transcribe, 'inputs': [in_audio], 'outputs': [in_prompt, in_audio]}
159
+ update_btn.click(**code_update_params)
160
+ in_prompt.submit(**gen_text_params).then(**code_update_params)
161
+ in_audio.stop_recording(**transcribe_params).then(**gen_text_params).then(**code_update_params)
162
+ with gr.Row():
163
+ with gr.Column():
164
+ gr.Markdown("## 3. Export your app to share!")
165
+ copy_snippet_btn = gr.Button("Copy app snippet to paste in another page")
166
+ copy_snippet_btn.click(copy_notify, code_area, None, _js=copy_snippet_js('gradio-lite'))
167
+ download_btn = gr.Button("Download app as a standalone file")
168
+ download_btn.click(None, code_area, None, _js=download_code_js('gradio-lite'))
169
+ with gr.Row():
170
+ with gr.Column():
171
+ gr.Markdown("## Current limitations")
172
+ with gr.Accordion("Click to view", open=False):
173
+ gr.Markdown(
174
+ "- 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")
175
+
176
+ stlite_tab.select(lambda: "stlite", None, selectedTab).then(None, None, None, _js=load_js('stlite'))
177
+ gradio_lite_tab.select(lambda: "gradio-lite", None, selectedTab).then(None, None, None, _js=load_js('gradio-lite'))
178
+ demo.load(None, None, None, _js=load_js('stlite'))
179
  demo.css = "footer {visibility: hidden}"
180
 
181
  if __name__ == "__main__":
templates.py CHANGED
@@ -16,6 +16,9 @@ def starting_app_code(demo_type):
16
  def load_js(demo_type):
17
  if demo_type == 'gradio-lite':
18
  return f"""() => {{
 
 
 
19
  const htmlString = '<iframe class="my-frame" width="100%" height="512px" src="about:blank"></iframe>';
20
  const parser = new DOMParser();
21
  const doc = parser.parseFromString(htmlString, 'text/html');
@@ -27,9 +30,13 @@ def load_js(demo_type):
27
  frame.contentWindow.document.open('text/html', 'replace');
28
  frame.contentWindow.document.write(`{gradio_lite_html_template}`);
29
  frame.contentWindow.document.close();
 
30
  }}"""
31
  elif demo_type == 'stlite':
32
  return f"""() => {{
 
 
 
33
  const htmlString = '<iframe id="demo-iframe" width="100%" height="512px" src="about:blank"></iframe>';
34
  const parser = new DOMParser();
35
  const doc = parser.parseFromString(htmlString, 'text/html');
@@ -37,13 +44,12 @@ def load_js(demo_type):
37
  const div = document.getElementById('stliteDemoDiv');
38
  div.appendChild(iframe);
39
 
40
- const template = `{stlite_html_template.replace('STARTING_CODE', starting_app_code(demo_type))}`;
41
- console.log(template);
42
-
43
  const frame = document.getElementById('demo-iframe');
44
  frame.contentWindow.document.open();
45
  frame.contentWindow.document.write(template);
46
  frame.contentWindow.document.close();
 
47
  }}"""
48
  raise NotImplementedError(f'{demo_type} is not a supported demo type')
49
 
@@ -136,5 +142,26 @@ def download_code_js(demo_type):
136
  URL.revokeObjectURL(url);
137
  }}"""
138
  elif demo_type == 'stlite':
139
- return Path('stlite_starting_code.py').read_text()
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
140
  raise NotImplementedError(f'{demo_type} is not a supported demo type')
 
16
  def load_js(demo_type):
17
  if demo_type == 'gradio-lite':
18
  return f"""() => {{
19
+ if (window.gradioLiteLoaded) {{
20
+ return
21
+ }}
22
  const htmlString = '<iframe class="my-frame" width="100%" height="512px" src="about:blank"></iframe>';
23
  const parser = new DOMParser();
24
  const doc = parser.parseFromString(htmlString, 'text/html');
 
30
  frame.contentWindow.document.open('text/html', 'replace');
31
  frame.contentWindow.document.write(`{gradio_lite_html_template}`);
32
  frame.contentWindow.document.close();
33
+ window.gradioLiteLoaded = true;
34
  }}"""
35
  elif demo_type == 'stlite':
36
  return f"""() => {{
37
+ if (window.stliteLoaded) {{
38
+ return
39
+ }}
40
  const htmlString = '<iframe id="demo-iframe" width="100%" height="512px" src="about:blank"></iframe>';
41
  const parser = new DOMParser();
42
  const doc = parser.parseFromString(htmlString, 'text/html');
 
44
  const div = document.getElementById('stliteDemoDiv');
45
  div.appendChild(iframe);
46
 
47
+ const template = `{stlite_html_template.replace('STARTING_CODE', starting_app_code(demo_type))}`;
 
 
48
  const frame = document.getElementById('demo-iframe');
49
  frame.contentWindow.document.open();
50
  frame.contentWindow.document.write(template);
51
  frame.contentWindow.document.close();
52
+ window.stliteLoaded = true;
53
  }}"""
54
  raise NotImplementedError(f'{demo_type} is not a supported demo type')
55
 
 
142
  URL.revokeObjectURL(url);
143
  }}"""
144
  elif demo_type == 'stlite':
145
+ return f"""(code) => {{
146
+ const escapedCode = code.replace('`', String.fromCharCode(92) + '`');
147
+ // Step 1: Generate the HTML content
148
+ const completedTemplate = `{stlite_html_template}`.replace('STARTING_CODE', escapedCode);
149
+
150
+ // Step 2: Create a Blob from the HTML content
151
+ const blob = new Blob([completedTemplate], {{ type: "text/html" }});
152
+
153
+ // Step 3: Create a URL for the Blob
154
+ const url = URL.createObjectURL(blob);
155
+
156
+ // Step 4: Create a download link
157
+ const downloadLink = document.createElement("a");
158
+ downloadLink.href = url;
159
+ downloadLink.download = "stlite-app.html"; // Specify the filename for the download
160
+
161
+ // Step 5: Trigger a click event on the download link
162
+ downloadLink.click();
163
+
164
+ // Clean up by revoking the URL
165
+ URL.revokeObjectURL(url);
166
+ }}"""
167
  raise NotImplementedError(f'{demo_type} is not a supported demo type')