Hi, I started versioned releases and publishing an NPM package, so now the script can be loaded from the jsDelivr CDN with a version-pinned URL as below.
So I have removed the warning from the README saying stlite might be broken or the API might change without any notice. It never happens now as long as we use the pinned URL.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>stlite app</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/@stlite/mountable@0.1.0/build/stlite.js"></script>
<!-- 👆👆👆 New URL! 👆👆👆 -->
<script>
stlite.mount(`
import streamlit as st
name = st.text_input('Your name')
st.write("Hello,", name or "world")
`,
document.getElementById("root"))
</script>
</body>
</html>
The URL starting with https://whitphx.github.io/stlite/ that has been used in some old examples is now recommended not to use.
This is a great tool! Do you have a list of packages that are compatible with stlite? I’ve tried a few like millify, sklearn and pdfkit but they didn’t work.
Pure Python packages (packages that do not include C code).
C extensions compiled for the Pyodide runtime.
The linked page is the list for 2.
There is no complete list for 1.
You can only check the availability of each package by checking if the distributed package file name ends with “py3-none-any.whl”.
For example, semver package is installable because its file name is semver-2.13.0-py2.py3-none-any.whl as found at the PyPI package that ends with “py3-none-any.whl”.
Thank you!
I have successfully added a streamlit app to my webpage using stlite according to your example.
But it takes over the entire page. I would prefer to keep my own (for example bootstrap) navbar and add some descriptive text before the app.
Is there an easy way to do this?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>stlite app</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- I would like to add my navbar and other html elements here before the streamlit app -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" >
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
</div>
</div>
</nav>
<div class="container">
<p>Description</p>
</div>
<!-- end of example html elements to add-->
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/@stlite/mountable@0.15.0/build/stlite.js"></script>
<script>
stlite.mount(`
import streamlit as st
name = st.text_input('Your name')
st.write("Hello,", name or "world")
`,
document.getElementById("root"))
</script>
</body>
</html>
One workaround is, if you are using @stlite/mountable like this example on README, to download the file outside stlite and pass it to the files option of stlite.mount() so that the app can access the file on the virtual local file system.
but when trying it with stlite i get a connection error
my second question is :
Since the data file and the streamlit page are in the same repo, is it possible to access the files just using a relative path/reference (“data/file.csv”) instead of accesing via web url ?
In the Pyodide environment where stlite runs, usual URL access methods such as urllib or requests do not work (See Frequently Asked Questions — Version 0.22.1), and the error you posted above, “Connection Error”, seems to be because of this restriction.
Instead, Pyodide provides pyodide.http.pyfetch() for remote resource access, and since 0.29.0, stlite allows us to use it in the application script with top-level await like the example at GitHub - whitphx/stlite: Serverless Streamlit. So, I think your stlite app can access to your private repo resource by using pyodide.http.pyfetch() setting the necessary credentials emulating the behavior of requests.Session.
Note that, in the case of stlite, the credentials are sent to the client-side with the source code, so it can never be secret. Use this method only for the private apps.
The pyodide.http.pyfetch() solution works perfectly for public urls. Thank you for that!
However for my usecase, I’m hosting the stlite page in a private Github Entreprise repo using Github Pages.
As far as I know, in Github Pages it is possible to use relative links to reference other files, for instance with this structure:
I wonder if it is possible to somehow use the same feature to access data stored in the same repo.
That’ll save me from requesting the data from the web url (which is not possible in my case).
@Abdelgha_4 You mean, for example, you want to run code like below from index.html to load ./some_dir/data.txt?
res = await pyfetch("./some_dir/data.txt")
├── some_dir
│ └── data.txt
└── index.html
Looks like it is not possible at least in a straightforward way as pyfetch() doesn’t accept relative paths.
The js module (you can access the JS global scope via js module in Python) and its location attr might be used to get the absolute path from the relative path though (not tested yet).
@whitphx Yes I agree that pyfetch is not the way to go since it’ll still look up in the network.
However what I imagine that might be possible is to link (or download) the file at the html/js level, and then access it via stlite.
So maybe:
<head>
<link ... href="./some_dir/data.txt">
or maybe
<script>
// some script that gets the data and store it at the document level
// maybe download it and then encode it as base64 string (especially for binary files) ?
</script>
</head>
then in stlite:
# get the data from the html document element
with open("DocumentStrorage/data.txt", "r") as fp:
...
Basically any solution that downloads the data file outside of stlite (since the download inside of stlite does not work due to some network restrictions).
But I’m no expert myself, so it could be that this is just not possible.
Thank you again.
Your example using <link> tag or something like that may also not be a proper approach, as even <link> triggers network accesses from the browser to remote hosts.
One possible solution would be, to simply pass your files to the files option of stlite.mount() like the example in the README.
If the file is a text file, you can just use the string to pass.
For binary files, a trick is needed here, that is, to encode them with base64 and decode them in the stlite.mount() function like data/xxx.txt in the following example.
Encoding the files must be done when you create index.html and upload it to GitHub Pages, as the data is statically embedded in the HTML file in this way.
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@stlite/mountable@0.31.0/build/stlite.css"
/>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/@stlite/mountable@0.31.0/build/stlite.js"></script>
<script>
stlite.mount(
{
requirements: [],
entrypoint: "streamlit_app.py",
files: {
"streamlit_app.py": `
import streamlit as st
f = open("data/xxx.txt) # We access data/xxx.txt from a Streamlit app
...
`,
"data/xxx.txt": encodeB64ToArrayBuffer("..."), // <- Pass an encoded Base64 string.
},
},
document.getElementById("root")
)
function encodeB64ToArrayBuffer(e){for(var t=window.atob(e),n=t.length,r=new Uint8Array(n),i=0;i<n;i++)r[i]=t.charCodeAt(i);return r}
</script>
</body>
</html>
One simple way to accomplish it is to use stlite sharing.
After you make the app include all the files in the left editor pane (don’t worry, the added files are never uploaded to remote servers), check the generated HTML file here:
It generates a static HTML file using the approach mentioned above, encoding binary files and embedding them with decoder function into the files argument of stlite.mount().
Thanks for stopping by! We use cookies to help us understand how you interact with our website.
By clicking “Accept all”, you consent to our use of cookies. For more information, please see our privacy policy.
Cookie settings
Strictly necessary cookies
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
Performance cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
Functional cookies
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
Targeting cookies
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.
)
↓
