stlite
stlite copied to clipboard
whitphx
Serverless Streamlit 🎈🚀
stlite: Serverless Streamlit
A port of Streamlit to WebAssembly, powered by Pyodide.
Streamlit is a Python web app framework for the fast development of data apps. This project is to make it run completely on web browsers.
Try it out
Visit the playground demo.
Samples
⚡️Serverless Image Processing App
Image processing with OpenCV works on the client-side.
- Repository📌: https://github.com/whitphx/stlite-image-processing-app
- Online demo🎈: https://whitphx.github.io/stlite-image-processing-app/
See the tutorial video
Serverless Streamlit + OpenCV Python Web App Tutorial, crafted by 1littlecoder.
Use stlite on your web page
You can use stlite on your web page loading the script and CSS files via <script> and <link> tags as below.
Here is a sample HTML file.
<!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/@stlite/[email protected]/build/stlite.css"
/>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/@stlite/[email protected]/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>
In this sample,
- stlite library is imported with the first script tag, then the global
stliteobject becomes available. -
stlite.mount()mounts the Streamlit app on the<div id="root" />element as specified via the second argument. The app script is passed via the first argument.
More controls
If more controls are needed such as installing dependencies or mounting multiple files, use the following API instead.
stlite.mount(
{
requirements: ["matplotlib"], // Packages to install
entrypoint: "streamlit_app.py", // The target file of the `streamlit run` command
files: {
"streamlit_app.py": `
import streamlit as st
import matplotlib.pyplot as plt
import numpy as np
size = st.slider("Sample size", 100, 1000)
arr = np.random.normal(1, 1, size=size)
fig, ax = plt.subplots()
ax.hist(arr, bins=20)
st.pyplot(fig)
`,
},
},
document.getElementById("root")
);
Other stlite versions
In the example above, the stlite script is loaded via the <script> tag with the versioned URL.
You can use another version by changing the version number in the URL.
The following URLs are also available, while our recommendation is to use the versioned one as above because the API may change without backward compatibility in future releases.
The latest release
<script src="https://cdn.jsdelivr.net/npm/@stlite/mountable/build/stlite.js"></script>
You can use the latest version of the published stlite package with this URL.
The head of the main branch
<script src="https://whitphx.github.io/stlite/lib/mountable/stlite.js"></script>
This URL points to the head of the main branch which is usually ahead of the released packages. However, we strongly recommend NOT to use this URL because this might be broken and there is no guarantee that this resource will be kept available in the future.
Multipage apps
You can pass the multiple files to the files option as below to construct the multipage app structure, the entry point file and pages/*.py files.
Read the Streamlit official document about the multipage apps.
stlite.mount(
{
entrypoint: "👋_Hello.py",
files: {
"👋_Hello.py": `
import streamlit as st
st.set_page_config(page_title="Hello")
st.title("Main page")
`,
"pages/1_⭐️_Page1.py": `
import streamlit as st
st.set_page_config(page_title="Page1")
st.title("Page 1")
`,
"pages/2_🎈_Page2.py": `
import streamlit as st
st.set_page_config(page_title="Page2")
st.title("Page 2")
`,
},
},
document.getElementById("root")
);
Resources
- 📺 "Serverless Streamlit + OpenCV Python Web App Tutorial", by 1littlecoder, YouTube: A quick tutorial to develop an OpenCV image processing app with stlite that runs completely on browsers.
- 📖 "New library: stlite, a port of Streamlit to Wasm, powered by Pyodide", Streamlit Community: The stlite thread at the Streamlit online forum.
- 📺 "Stlite - Streamlit without Server - powered by Pyodide (WebAssembly)", by 1littlecoder, YouTube: A quick tutorial with local app development and GitHub Pages deployment.
Development
Building the packages
In the root directory,
make
After building, you can run the playground app by running the command below. Access http://localhost:5001/
make serve
Support the project
whitphx