templates/stlite/stlite-snippet-template.html

<div id="KiteWindApp">
    <!-- This app was created with KiteWind Chat-assisted Web App Creator (https://huggingface.co/spaces/gstaff/KiteWind) -->
    <iframe id="demo-iframe" width="100%" height="512px" src="about:blank" frameborder="0"></iframe>
    <script>
        const template = \`<div id="root"></div>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@stlite/[email protected]/build/stlite.css"/>
            <script src="https://cdn.jsdelivr.net/npm/@stlite/[email protected]/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>