templates.py

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')