Add undo and redo buttons for gradio and streamlit. Also rename components to eliminate overlapping names between gradio and streamlit tabs.

app.py

@@ -99,18 +99,41 @@ def add_hotkeys() -> str:
     return Path("hotkeys.js").read_text()
 
 
-def apply_query_params(gradio_code: str, stlite_code: str, request: gr.Request) -> (str, str, str, str, typing.Any):
+def apply_query_params(gradio_code: str, stlite_code: str, request: gr.Request) -> (
+str, str, [str], str, str, [str], typing.Any):
     params = dict(request.query_params)
     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)
+        return params.get('code') or gradio_code, params.get('requirements') or '', [
+            params.get('code') or gradio_code], stlite_code, '', [stlite_code_area], 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)
+        return gradio_code, '', [gradio_code], params.get('code') or stlite_code, params.get('requirements') or '', [
+            params.get('code') or stlite_code], gr.Tabs(selected=1)
+    return gradio_code, '', [gradio_code], stlite_code, '', [stlite_code], gr.Tabs(selected=0)
 
 
-def update_state(requirements: [str], error: str):
-    return '\n'.join(sorted(requirements)), error
+def update_state(code: str, requirements: [str], error: str, history: [str], current_index: int) -> (
+str, str, [str], int):
+    # Only modify undo history if new code was added.
+    if history[current_index] != code:
+        history = history[:current_index + 1]
+        history.append(code)
+        current_index = len(history) - 1
+    return '\n'.join(sorted(requirements)), error, history, current_index
+
+
+def undo(code: str, history: [str], current_index: int) -> (str, int):
+    if current_index > 0:
+        current_index -= 1
+        return history[current_index], current_index
+    return code, current_index
+
+
+def redo(code: str, history: [str], current_index: int) -> (str, int):
+    if current_index < len(history) - 1:
+        current_index += 1
+        return history[current_index], current_index
+    return code, current_index
 
 
 with gr.Blocks(title="KiteWind") as demo:
@@ -128,37 +151,56 @@ with gr.Blocks(title="KiteWind") as demo:
             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])
+                        gradio_audio = gr.Audio(label="Record a voice request (click or press ctrl + ` to start/stop)",
+                                                source='microphone', type='filepath', elem_classes=["record-btn"])
+                        gradio_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")
+                    gradio_bot_text = gr.TextArea(label="🤖 Chat Assistant Response")
+                    gradio_clear = gr.ClearButton([gradio_prompt, gradio_audio, gradio_bot_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)
+                    gradio_requirements_area = gr.Code(
+                        label="App Requirements (additional modules pip installed for pyodide)")
+                    with gr.Group():
+                        gradio_update_btn = gr.Button("Update App (Ctrl + Space)", variant="primary",
+                                                      elem_classes=["update-btn"])
+                        gradio_undo_btn = gr.Button("Undo")
+                        gradio_redo_btn = gr.Button("Redo")
+                    gradio_error = gr.State()
+                    gradio_history = gr.State(value=[])
+                    gradio_index = gr.State(value=0)
+                    gradio_code_update_params = {'fn': update_state,
+                                                 'inputs': [gradio_code_area, gradio_requirements_area, gradio_error,
+                                                            gradio_history, gradio_index],
+                                                 'outputs': [gradio_requirements_area, gradio_error, gradio_history,
+                                                             gradio_index],
+                                                 '_js': update_iframe_js(DemoType.GRADIO)}
+                    gradio_gen_text_params = {'fn': generate_text, 'inputs': [gradio_code_area, gradio_prompt],
+                                              'outputs': [gradio_bot_text, gradio_code_area]}
+                    gradio_transcribe_params = {'fn': transcribe, 'inputs': [gradio_audio],
+                                                'outputs': [gradio_prompt, gradio_audio]}
+                    gradio_update_btn.click(**gradio_code_update_params)
+                    gradio_undo_btn.click(undo, [gradio_code_area, gradio_history, gradio_index],
+                                          [gradio_code_area, gradio_index]).then(**gradio_code_update_params)
+                    gradio_redo_btn.click(redo, [gradio_code_area, gradio_history, gradio_index],
+                                          [gradio_code_area, gradio_index]).then(**gradio_code_update_params)
+                    gradio_prompt.submit(**gradio_gen_text_params).then(**gradio_code_update_params)
+                    gradio_audio.stop_recording(**gradio_transcribe_params).then(**gradio_gen_text_params).then(
+                        **gradio_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))
+                    gradio_share_link_btn = gr.Button("🔗 Copy share link to clipboard")
+                    gradio_share_link_btn.click(link_copy_notify, [gradio_code_area, gradio_requirements_area], None,
+                                                _js=copy_share_link_js(DemoType.GRADIO))
+                    gradio_copy_snippet_btn = gr.Button("✂️ Copy app snippet to paste into another page")
+                    gradio_copy_snippet_btn.click(copy_notify, [gradio_code_area, gradio_requirements_area], None,
+                                                  _js=copy_snippet_js(DemoType.GRADIO))
+                    gradio_download_btn = gr.Button("🗎 Download app as a standalone file")
+                    gradio_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")
@@ -174,37 +216,56 @@ with gr.Blocks(title="KiteWind") as demo:
             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])
+                        stlite_audio = gr.Audio(label="Record a voice request (click or press ctrl + ` to start/stop)",
+                                                source='microphone', type='filepath', elem_classes=["record-btn"])
+                        stlite_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")
+                    stlite_bot_text = gr.TextArea(label="🤖 Chat Assistant Response")
+                    stlite_clear_btn = gr.ClearButton([stlite_prompt, stlite_audio, stlite_bot_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)
+                    stlite_requirements_area = gr.Code(
+                        label="App Requirements (additional modules pip installed for pyodide)")
+                    with gr.Group():
+                        stlite_update_btn = gr.Button("Update App (Ctrl + Space)", variant="primary",
+                                                      elem_classes=["update-btn"])
+                        stlite_undo_btn = gr.Button("Undo")
+                        stlite_redo_btn = gr.Button("Redo")
+                    stlite_error = gr.State()
+                    stlite_history = gr.State(value=[])
+                    stlite_index = gr.State(value=0)
+                    stlite_code_update_params = {'fn': update_state,
+                                                 'inputs': [stlite_code_area, stlite_requirements_area, stlite_error,
+                                                            stlite_history, stlite_index],
+                                                 'outputs': [stlite_requirements_area, stlite_error, stlite_history,
+                                                             stlite_index],
+                                                 '_js': update_iframe_js(DemoType.STREAMLIT)}
+                    stlite_gen_text_params = {'fn': generate_text, 'inputs': [stlite_code_area, stlite_prompt],
+                                              'outputs': [stlite_bot_text, stlite_code_area]}
+                    stlite_transcribe_params = {'fn': transcribe, 'inputs': [stlite_audio],
+                                                'outputs': [stlite_prompt, stlite_audio]}
+                    stlite_update_btn.click(**stlite_code_update_params)
+                    stlite_undo_btn.click(undo, [stlite_code_area, stlite_history, stlite_index],
+                                          [stlite_code_area, stlite_index]).then(**stlite_code_update_params)
+                    stlite_redo_btn.click(redo, [stlite_code_area, stlite_history, stlite_index],
+                                          [stlite_code_area, stlite_index]).then(**stlite_code_update_params)
+                    stlite_prompt.submit(**stlite_gen_text_params).then(**stlite_code_update_params)
+                    stlite_audio.stop_recording(**stlite_transcribe_params).then(**stlite_gen_text_params).then(
+                        **stlite_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))
+                    stlite_share_link_btn = gr.Button("🔗 Copy share link to clipboard")
+                    stlite_share_link_btn.click(link_copy_notify, [stlite_code_area, stlite_requirements_area], None,
+                                                _js=copy_share_link_js(DemoType.STREAMLIT))
+                    stlite_copy_snippet_btn = gr.Button("✂️ Copy app snippet into paste in another page")
+                    stlite_copy_snippet_btn.click(copy_notify, [stlite_code_area, stlite_requirements_area], None,
+                                                  _js=copy_snippet_js(DemoType.STREAMLIT))
+                    stlite_download_btn = gr.Button("🗎 Download app as a standalone file")
+                    stlite_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")
@@ -215,7 +276,9 @@ with gr.Blocks(title="KiteWind") as demo:
                                                                           _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=add_hotkeys())
-    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.load(apply_query_params, [gradio_code_area, stlite_code_area],
+              [gradio_code_area, gradio_requirements_area, gradio_history, stlite_code_area, stlite_requirements_area,
+               stlite_history, tabs])
     demo.css = "footer {visibility: hidden}"
 
 if __name__ == "__main__":

templates.py

@@ -132,7 +132,7 @@ def load_js(demo_type: DemoType) -> str:
 
 def update_iframe_js(demo_type: DemoType) -> str:
     if demo_type == DemoType.GRADIO:
-        return f"""async (code, requirements) => {{
+        return f"""async (code, requirements, lastError, codeHistory, codeHistoryIndex) => {{
                 const formattedRequirements = requirements.split('\\n').filter(x => x && !x.startsWith('#')).map(x => x.trim());
                 let errorResult = null;
                 const attemptedRequirements = new Set();
@@ -180,8 +180,7 @@ def update_iframe_js(demo_type: DemoType) -> str:
                         appBody.style.visibility = "hidden";
                         errorResult = e.toString();
                         const allRequirements = formattedRequirements.concat(installedRequirements);
-                        console.log(allRequirements, errorResult);
-                        return [allRequirements, errorResult];
+                        return [code, allRequirements, errorResult, codeHistory, codeHistoryIndex];
                     }}
                 }};
                 await update();
@@ -190,23 +189,29 @@ def update_iframe_js(demo_type: DemoType) -> str:
                 // 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);
+                if (requirements) {{
+                    currentUrl.searchParams.set('requirements', allRequirements.join('\\n'));
+                }}
+                if (code) {{
+                    currentUrl.searchParams.set('code', code);
+                }}
                 // Replace the current URL with the updated one
                 history.replaceState({{}}, '', currentUrl.href);
                 
-                return [allRequirements, errorResult];
+                return [code, allRequirements, errorResult, codeHistory, codeHistoryIndex];
             }}"""
     elif demo_type == DemoType.STREAMLIT:
-        return f"""async (code, requirements) => {{ 
-            const formattedRequirements = requirements.split('\\n').filter(x => x && !x.startsWith('#')).map(x => x.trim());
+        return f"""async (code, requirements, lastError, codeHistory, codeHistoryIndex) => {{
+            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;
                 try {{
-                    await appController.install(formattedRequirements);
+                    if (formattedRequirements) {{
+                        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
@@ -233,7 +238,7 @@ def update_iframe_js(demo_type: DemoType) -> str:
                     
                     errorResult = e.toString();
                     const allRequirements = formattedRequirements.concat(installedRequirements);
-                    return [allRequirements, errorResult];
+                    return [code, allRequirements, errorResult, codeHistory, codeHistoryIndex];
                 }}
             }};
             await update();
@@ -242,12 +247,16 @@ def update_iframe_js(demo_type: DemoType) -> str:
             // 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);
+            if (requirements) {{
+                currentUrl.searchParams.set('requirements', allRequirements.join('\\n'));
+            }}
+            if (code) {{
+                currentUrl.searchParams.set('code', code);
+            }}
             // Replace the current URL with the updated one
             history.replaceState({{}}, '', currentUrl.href);
             
-            return [allRequirements.join('\\n'), errorResult];
+            return [code, allRequirements, errorResult, codeHistory, codeHistoryIndex];
         }}"""
     raise NotImplementedError(f'{demo_type} is not a supported demo type')