I understand your point and it is of course a very strong defence in favour of staying with custom components.
On the other hand, however, I can argue that, Isn’t avoiding such a big work of providing seamless interoperability between JS and Python, where you can even run JS methods as Python functions and just have the output without even noticing it’s a different language, a waste of resources? Custom components can of cour still be there and be preferred as the “cross-platform” solution.
Take this code for example: Isn’t it nice? Why should we need two (or at least one) files in two/three programming languages, just to know the width of the screen?
P.S. This Shiny issue is also interesting. Apparently, you can switch between webworker and main thread with a URL parameter. Is it difficult for STLite to provide the same config parameter?
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).
Why should we need two (or at least one) files in two/three programming languages, just to know the width of the screen?
)
↓
