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.
)
↓
