Add share link support for gradio-lite apps.

app.py

@@ -9,7 +9,8 @@ import requests
 import torch
 from transformers import AutoModelForSpeechSeq2Seq, AutoProcessor, pipeline, Pipeline
 
-from templates import starting_app_code, update_iframe_js, copy_snippet_js, download_code_js, load_js, DemoType
+from templates import starting_app_code, update_iframe_js, copy_snippet_js, download_code_js, load_js, DemoType, \
+    copy_share_link_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')
@@ -85,6 +86,10 @@ def transcribe(audio: str) -> (str, str):
     return result["text"], None
 
 
+def link_copy_notify(code):
+    gr.Info("Share link copied!")
+
+
 def copy_notify(code):
     gr.Info("App code snippet copied!")
 
@@ -94,7 +99,7 @@ def add_hotkeys() -> str:
 
 
 with gr.Blocks() as demo:
-    gr.Markdown("<h1 id=\"TEST\" align=\"center\">KiteWind 🪁🍃</h1>")
+    gr.Markdown("<h1 id=\"TEST\" align=\"center\"><a href=\"?\">KiteWind</a> 🪁🍃</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='gradio-lite')
@@ -110,7 +115,7 @@ with gr.Blocks() as demo:
                     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")
+                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 or ctrl + space",
@@ -127,16 +132,18 @@ with gr.Blocks() as demo:
         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")
+                share_link_btn = gr.Button("🔗 Copy share link to clipboard")
+                share_link_btn.click(link_copy_notify, code_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, code_area, None, _js=copy_snippet_js(DemoType.GRADIO))
-                download_btn = gr.Button("Download app as a standalone file")
+                download_btn = gr.Button("🗎 Download app as a standalone file")
                 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 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")
+                        "- 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")
     with gr.Tab('Streamlit (stlite)') as stlite_tab:
         with gr.Row():
             with gr.Column():
@@ -149,7 +156,7 @@ with gr.Blocks() as demo:
                     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- Make the button primary")
-                out_text = gr.TextArea(label="Chat Assistant Response")
+                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 or ctrl + space",
@@ -166,9 +173,9 @@ with gr.Blocks() as demo:
         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 = gr.Button("✂️ Copy app snippet into paste in another page")
                 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 = gr.Button("🗎 Download app as a standalone file")
                 download_btn.click(None, code_area, None, _js=download_code_js(DemoType.STREAMLIT))
         with gr.Row():
             with gr.Column():

templates.py

@@ -27,14 +27,40 @@ def load_js(demo_type: DemoType) -> str:
             if (window.gradioLiteLoaded) {{
                 return
             }}
+            
+            // Get the query string from the URL
+            const queryString = window.location.search;
+            // Use a function to parse the query string into an object
+            function parseQueryString(queryString) {{
+                const params = {{}};
+                const queryStringWithoutQuestionMark = queryString.substring(1); // Remove the leading question mark
+                const keyValuePairs = queryStringWithoutQuestionMark.split('&');
+            
+                keyValuePairs.forEach(keyValue => {{
+                    const [key, value] = keyValue.split('=');
+                    if (value) {{
+                        params[key] = decodeURIComponent(value.replace(/\+/g, ' '));
+                    }}
+                }});
+            
+                return params;
+            }}
+            // Parse the query string into an object
+            const queryParams = parseQueryString(queryString);
+            // Access individual parameters
+            const codeValue = queryParams.code;
+                        
             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.getElementById('gradio-iframe'); 
             const div = document.getElementById('gradioDemoDiv');
             div.appendChild(iframe);
-    
-            const template = `{gradio_lite_html_template.replace('STARTING_CODE', starting_app_code(demo_type))}`;
+
+            let template = `{gradio_lite_html_template.replace('STARTING_CODE', starting_app_code(demo_type))}`;    
+            if (codeValue) {{
+                template = `{gradio_lite_html_template}`.replace('STARTING_CODE', codeValue);
+            }}
             const frame = document.getElementById('gradio-iframe');
             frame.contentWindow.document.open('text/html', 'replace');
             frame.contentWindow.document.write(template);
@@ -76,6 +102,12 @@ def update_iframe_js(demo_type: DemoType) -> str:
                     appController.run_code(newCode);
                 }};
                 await update();
+                
+                // Update URL query params to include the current demo code state
+                const currentUrl = new URL(window.location.href);
+                currentUrl.searchParams.set('code', code);
+                // Replace the current URL with the updated one
+                history.replaceState({{}}, '', currentUrl.href);
             }}"""
     elif demo_type == DemoType.STREAMLIT:
         return f"""async (code) => {{       
@@ -90,6 +122,15 @@ def update_iframe_js(demo_type: DemoType) -> str:
     raise NotImplementedError(f'{demo_type} is not a supported demo type')
 
 
+def copy_share_link_js(demo_type: DemoType) -> str:
+    if demo_type == DemoType.GRADIO:
+        return f"""async (code) => {{
+            const shareLink = document.URL;
+            await navigator.clipboard.writeText(shareLink);
+        }}"""
+    raise NotImplementedError(f'{demo_type} is not a supported demo type')
+
+
 def copy_snippet_js(demo_type: DemoType) -> str:
     if demo_type == DemoType.GRADIO:
         return f"""async (code) => {{