stlite
stlite copied to clipboard
whitphx
`streamlit-tags` misses some resources and doesn't show on dark theme
Hi,
The streamlit-tags custom component loads, but in a somehow broken way, with fonts back to browser default and boxes having half-borders. Moreover, the text is not visible in the dark theme as it is the same colour as the background.
DevTools console shows failure in finding some CSS resources, e.g. bootstrap. This may be related.
Here is the code:
<!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>Serverless STLite App</title>
<meta name="description" content="A Serverless Streamlit application with OpenCV image processing that completely works on your browser">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@stlite/[email protected]/build/stlite.css"/>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/@stlite/[email protected]/build/stlite.js"></script>
<script>
const loadPythonSource = async () => {
stlite.mount({
requirements: [ "streamlit-tags"],
entrypoint: "streamlit_app.py", // The target file of the `streamlit run` command
files: {
"streamlit_app.py": `
import streamlit as st
from streamlit_tags import st_tags, st_tags_sidebar
keywords = st_tags(
label='# Enter Keywords:',
text='Press enter to add more',
value=['Zero', 'One', 'Two'],
suggestions=['five', 'six', 'seven',
'eight', 'nine', 'three',
'eleven', 'ten', 'four'],
maxtags = 4,
key='1')
keyword = st_tags_sidebar(
label='# Enter Keywords:',
text='Press enter to add more',
value=['Zero', 'One', 'Two'],
suggestions=['five', 'six', 'seven',
'eight', 'nine', 'three',
'eleven', 'ten', 'four'],
maxtags = 4,
key='11')
`
}
}
,document.getElementById("root")
)
}
window.onload = loadPythonSource
</script>
</body>
</html>
This does not occur.
If this problem still exists on your env, provide the environment details and entire screenshot.
Can you maybe provide a minimal working example? I still cannot get it to work, even with version 0.14. Here is my console by the way:
It was your code pasted at https://github.com/whitphx/stlite/issues/202#issue-1360671764
It also works when the version is rewritten as 0.14.0 as below.
<!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>Serverless STLite App</title>
<meta name="description" content="A Serverless Streamlit application with OpenCV image processing that completely works on your browser">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@stlite/[email protected]/build/stlite.css"/>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/@stlite/[email protected]/build/stlite.js"></script>
<script>
const loadPythonSource = async () => {
stlite.mount({
requirements: [ "streamlit-tags"],
entrypoint: "streamlit_app.py", // The target file of the `streamlit run` command
files: {
"streamlit_app.py": `
import streamlit as st
from streamlit_tags import st_tags, st_tags_sidebar
keywords = st_tags(
label='# Enter Keywords:',
text='Press enter to add more',
value=['Zero', 'One', 'Two'],
suggestions=['five', 'six', 'seven',
'eight', 'nine', 'three',
'eleven', 'ten', 'four'],
maxtags = 4,
key='1')
keyword = st_tags_sidebar(
label='# Enter Keywords:',
text='Press enter to add more',
value=['Zero', 'One', 'Two'],
suggestions=['five', 'six', 'seven',
'eight', 'nine', 'three',
'eleven', 'ten', 'four'],
maxtags = 4,
key='11')
`
}
}
,document.getElementById("root")
)
}
window.onload = loadPythonSource
</script>
</body>
</html>
I tested it with python -m http.server 8000 and accessing http://localhost:8000/ .
What is your deployment? I think there may be some differences on it.