Spaces:
Runtime error
Runtime error
import streamlit as st | |
from pathlib import Path | |
import base64 | |
# Initial page config | |
st.set_page_config( | |
page_title='Streamlit组件清单', | |
page_icon="📖", | |
layout="wide", | |
initial_sidebar_state="expanded", | |
) | |
def main(): | |
cs_sidebar() | |
cs_body() | |
return None | |
def img_to_bytes(img_path): | |
img_bytes = Path(img_path).read_bytes() | |
encoded = base64.b64encode(img_bytes).decode() | |
return encoded | |
# sidebar | |
def cs_sidebar(): | |
st.sidebar.markdown( | |
'''[<img src='data:image/png;base64,{}' class='img-fluid' width=32 height=32>](https://streamlit.io/)'''.format( | |
img_to_bytes("logomark_website.png")), unsafe_allow_html=True) | |
st.sidebar.header('Streamlit组件清单') | |
st.sidebar.markdown(''' | |
<small>[Streamlit文档页界面](https://docs.streamlit.io/en/stable/api.html), | [Streamlit首页](https://www.streamlit.io/).</small> | |
''', unsafe_allow_html=True) | |
st.sidebar.markdown('__安装及引用方法__') | |
st.sidebar.code('pip install streamlit') | |
st.sidebar.markdown('引入Streamlit后的简写方法') | |
st.sidebar.code('import streamlit as st') | |
st.sidebar.markdown('__给侧边栏添加组件__') | |
st.sidebar.code(''' | |
st.sidebar.<widget> | |
a = st.sidebar.radio(\'R:\',[1,2]) | |
''') | |
st.sidebar.markdown('__命令行__') | |
st.sidebar.code(''' | |
streamlit --help | |
streamlit run your_script.py | |
streamlit hello | |
streamlit config show | |
streamlit cache clear | |
streamlit docs | |
streamlit --version | |
''') | |
st.sidebar.markdown('__尝鲜版安装方法__') | |
st.sidebar.markdown('[Beta版和还在测试中功能](https://docs.streamlit.io/en/stable/api.html#beta-and-experimental-features)') | |
st.sidebar.code(''' | |
pip uninstall streamlit | |
pip install streamlit-nightly --upgrade | |
''') | |
st.sidebar.markdown( | |
'''<small>[Streamlit组件清单v1.0.0](https://github.com/daniellewisDL/streamlit-cheat-sheet) | Oct 2021</small>''', | |
unsafe_allow_html=True) | |
return None | |
########################## | |
# 主体部分 | |
########################## | |
def cs_body(): | |
col1, col2, col3 = st.columns(3) | |
col1.subheader('魔法命令') | |
col1.code('''# 最简单的魔法命令 `st.write()` | |
\'\'\' _This_ is some __Markdown__ \'\'\' | |
a=3 | |
'dataframe:', data | |
''') | |
# Display text | |
col1.subheader('显示文字') | |
col1.code(''' | |
st.text('固定宽度的文字') | |
st.markdown('_Markdown内容_') # see * | |
st.caption('Balloons. Hundreds of them...') | |
st.latex(r\'\'\' e^{i\pi} + 1 = 0 \'\'\')#嵌入公式 | |
st.write('Most objects') # df, err, func, keras! | |
st.write(['st', 'is <', 3]) # see * | |
st.title('我的title') | |
st.header('我的标题') | |
st.subheader('我的副标题') | |
st.code('for i in range(8): foo()') | |
*可选参数 unsafe_allow_html = True | |
''') | |
# Display data | |
col1.subheader('显示数据') | |
col1.code(''' | |
st.dataframe(我的dataframe) | |
st.table(data.iloc[0:10]) | |
st.json({'foo':'bar','fu':'ba'}) | |
st.metric(label="Temp", value="273 K", delta="1.2 K") | |
''') | |
# Display charts | |
col1.subheader('显示各类图表') | |
col1.code(''' | |
st.line_chart(data) | |
st.area_chart(data) | |
st.bar_chart(data) | |
st.pyplot(fig) | |
st.altair_chart(data) | |
st.vega_lite_chart(data) | |
st.plotly_chart(data) | |
st.bokeh_chart(data) | |
st.pydeck_chart(data) | |
st.deck_gl_chart(data) | |
st.graphviz_chart(data) | |
st.map(data) | |
''') | |
# Display media | |
col1.subheader('显示媒体文件') | |
col1.code(''' | |
st.image('./header.png') | |
st.audio(data) | |
st.video(data) | |
''') | |
# Display interactive widgets | |
col2.subheader('交互类组件') | |
col2.code(''' | |
st.button('需要点我的时候就点我一下') | |
st.download_button('下载按钮', data) | |
st.checkbox('检查框') | |
st.radio('单选按钮', [1,2,3]) | |
st.selectbox('下拉式单选', [1,2,3]) | |
st.multiselect('多选框', [1,2,3]) | |
st.slider('滑动选择器', min_value=0, max_value=10) | |
st.select_slider('滑动选择器', options=[1,'2']) | |
st.text_input('通过我可以输入一些文字') | |
st.number_input('Enter a number') | |
st.text_area('通过我可以输入多行文字') | |
st.date_input('日期选择框') | |
st.time_input('时间选择框') | |
st.file_uploader('File uploader', type=["csv","png","xlsx","json"]) | |
st.color_picker('点我选择一种颜色') | |
''') | |
col2.write('带返回值的组件:') | |
col2.code(''' | |
for i in range(int(st.number_input('Num:'))): foo() | |
if st.sidebar.selectbox('I:',['f']) == 'f': b() | |
my_slider_val = st.slider('Quinn Mallory', 1, 88) | |
st.write(slider_val) | |
''') | |
# Control flow | |
col2.subheader('控制流组件') | |
col2.code(''' | |
st.stop() | |
''') | |
# Lay out your app | |
col2.subheader('对你的APP进行布局') | |
col2.code(''' | |
st.form('表单定义组件') | |
st.form_submit_button('表单提交按钮') | |
st.container() | |
st.columns(这里放要分几列的数字) | |
col1, col2 = st.columns(2) | |
col1.subheader('Columnisation') | |
st.expander('展开') | |
with st.expander('点我进行展开'): | |
st.write('次数可以写点什么') | |
''') | |
col2.write('在表单中使用其他组件:') | |
col2.code(''' | |
with st.form(key='my_form'): | |
text_input = st.text_input(label='Enter some text') | |
submit_button = st.form_submit_button(label='Submit') | |
''') | |
# Display code | |
col2.subheader('显示代码') | |
col2.code(''' | |
st.echo() | |
with st.echo(): | |
st.write('代码将被执行并打印结果') | |
''') | |
# Display progress and status | |
col3.subheader('显示进度及状态') | |
col3.code(''' | |
st.progress(数字可以最大到100,意思是100%) | |
st.spinner() | |
with st.spinner(text='正在进行中'): | |
time.sleep(5) | |
st.success('完成') | |
st.balloons() | |
st.error('错误信息') | |
st.warning('警告信息') | |
st.info('通知信息') | |
st.success('成功信息') | |
st.exception(e) | |
''') | |
# Placeholders, help, and options | |
col3.subheader('预设内容, 帮助及操作选项') | |
col3.code(''' | |
st.empty() | |
my_placeholder = st.empty() | |
my_placeholder.text('替换完成!') | |
st.help(pandas.DataFrame) | |
st.get_option(key) | |
st.set_option(key, value) | |
st.set_page_config(page_title="streamlit", page_icon="", layout='wide')#设置页面模式 | |
''') | |
# Mutate data | |
col3.subheader('表格数据操作方法') | |
col3.code(''' | |
DeltaGenerator.add_rows(data) | |
my_table = st.table(df1) | |
my_table.add_rows(df2) | |
my_chart = st.line_chart(df1) | |
my_chart.add_rows(df2) | |
''') | |
# Optimize performance | |
col3.subheader('优化性能方法') | |
col3.code(''' | |
@st.cache | |
def fetch_and_clean_data(url): | |
# Mutate data at url | |
return data | |
# Executes d1 as first time | |
d1 = fetch_and_clean_data(ref1) | |
# Does not execute d1; returns cached value, d1==d2 | |
d2 = fetch_and_clean_data(ref1) | |
# Different arg, so function d1 executes | |
d3 = fetch_and_clean_data(ref2) | |
''') | |
col3.subheader('其他API查看链接') | |
col3.markdown(''' | |
<small>[State API](https://docs.streamlit.io/en/stable/session_state_api.html)</small><br> | |
<small>[Theme option reference](https://docs.streamlit.io/en/stable/theme_options.html)</small><br> | |
<small>[Components API reference](https://docs.streamlit.io/en/stable/develop_streamlit_components.html)</small><br> | |
<small>[API cheat sheet](https://share.streamlit.io/daniellewisdl/streamlit-cheat-sheet/app.py)</small><br> | |
''', unsafe_allow_html=True) | |
return None | |
if __name__ == '__main__': | |
main() | |