惊呆！用streamlit快速搭建炫酷站点！

大家注意：因为微信最近又改了推送机制，经常有小伙伴说错过了之前被删的文章，比如前阵子冒着风险写的爬虫，再比如一些限时福利，错过了就是错过了。

所以建议大家加个星标，就能第一时间收到推送。👇

今天给大家推荐一个Streamlit带导航的网页应用制作方法。

streamlit-option-menu是一个全新的网页导航制作模块包，安装方法:

pip install streamlit_option_menu

今天的实现效果

已部署到linux服务器上 http://www.ssw.fit:8501/

今天的实现效果.mp4

可以一个小脚本，很简单就做一个侧边导航栏、自我介绍、浏览图片音频视频、单词翻译、可视化、在线浏览PDF文档等等。

比较来说，它比用django、flask等框架搭一个站点，或docsify、vuepress、pelican等博客建设工具来的快。很多时候，我们只需要简单展示一些东西，收集几首有趣的歌曲，帮我翻译个单词，如此如此就好啦，不要给我搞得太麻烦！

侧边导航栏

Img

import streamlit as st,requests,json
from streamlit_option_menu import option_menu
import streamlit.components.v1 as html

st.set_page_config(page_title="桃花朵朵开", page_icon="💖", layout="wide")


sysmenu = '''
<style>
#MainMenu {visibility:hidden;}
footer {visibility:hidden;}
'''
st.markdown(sysmenu,unsafe_allow_html=True)
with st.sidebar:
    choose = option_menu("ssw", ["介绍", "图片/音乐/视频", "数据可视化", "翻译", "其他应用"],
                         icons=['house', 'file-earmark-music', 'bar-chart', 'translate', 'brightness-high'],
                         menu_icon="broadcast", default_index=0)

第一个参数是文字提示。第二个参数是一个列表，用于列出你的导航栏中有哪些内容，可以理解为提纲。第三个参数是第二个参数对应的图标，这些图标可以从bootstrap网站找到。https://icons.bootcss.com/

图片音频视频

Img

elif choose == "图片/音乐/视频":
    selecte1 = option_menu(None, ["图片", "音乐", "视频"],
        icons=['house', 'cloud-upload', "list-task"],
        menu_icon="cast", default_index=0, orientation="horizontal")
    if selecte1 == "图片":
        with st.container():
            col1 = st.columns(1)
            with col1:
                st.image("./图片/1.jpg")
        with st.container():
            st.image("./图片/5.jpg")
    elif selecte1 == "音乐":
        st.write("1. Day By Day")
        st.audio("./音乐/1.flac")
    elif selecte1 == "视频":
        st.video("./视频/1.mp4")

数据可视化

Img

可以结合Echarts、Plotly等，如Plotly柱状图：

elif choose == "数据可视化":
    selecte2 = option_menu(None, ["Plotly"],
                           icons=["list-task"],
                           menu_icon="cast", default_index=0, orientation="horizontal")

    if selecte2 == "Plotly":
        import plotly.graph_objs as go
        c1, c2, c3, c4, c5 = st.columns([0.05, 1.5, 0.2, 1.5, 0.2])
        with c1:
            st.empty()
        with c2:
            # 柱状图
            trace_basic = [go.Bar(
            。。略

单词翻译

Img

结合Streamlit，可以花几分钟时间打造出我们自己的中英单词互翻工具。原理如下：

1. 使用requests.get构造一个请求，把我们要查询的内容发送到指定的网址

2. 然后使用json.loads功能把返回的对象转换为json对象

3. 最后从json格式数据中提取出我们自己需要的key和paraphrase对象值

elif choose == "翻译":
    selecte3 = option_menu(None, ["单词翻译"],
                           icons=['house'],
                           menu_icon="cast", default_index=0, orientation="horizontal")
    if selecte3 == "单词翻译":
        st.header("中英单词互翻神器")
        st.info("要翻译中文单词，请输入中文，会返回对应英文；\n\n\n\n要翻译英文单词，请输入英文，会返回对应中文;")

        danci = st.text_input("请输入要查找的中文单词或英文单词")
        fanhui = requests.get("http://dict.iciba.com/dictionary/word/suggestion?word=" + danci)
        data1 = fanhui.text
        data2 = json.loads(data1)
        for i in range(len(data2["message"])):
            st.write(data2["message"][i]["key"], data2["message"][i]["paraphrase"])

        # 隐藏按钮及底部链接
        sysmenu = '''
        <style>
        #MainMenu {visibility:hidden;}
        footer {visibility:hidden;}
        '''
        st.markdown(sysmenu, unsafe_allow_html=True)

结合Javascript

此案例使用streamlit.components.v1组件直接调用我们写好的javascript代码：

elif choose == "其他应用":
    selecte5 = option_menu(None, ["Javascript", "嵌入PDF"],
                           icons=['house', "list-task"],
                           menu_icon="cast", default_index=0, orientation="horizontal")

    if selecte5 == "Javascript":
        from streamlit.components.v1 import html
        html("""
                <script>
        function startTime(){
            var today=new Date();
            var current_time=today.toLocaleString();
            document.getElementById('txt').innerHTML="当前时间为："+current_time;
            t=setTimeout(function(){startTime()},500);
        }
        function checkTime(i){
            if (i<10){
                i="0" + i;
            }
            return i;
        }
        </script>
        </head>
        <body onload="startTime()">
        <p id="txt" style="color:blue"></p>
            """)

浏览PDF

Img

嵌入PDF文档的原理是，使用base64模块对PDF文档进行了编解码操作，然后使用html中的embed方法，把编解码后的信息进行显示

elif selecte5 == "嵌入PDF":
        import base64
        uploaded_file = st.file_uploader("上传pdf", type=["pdf"])
        if uploaded_file is not None:
            base64_pdf = base64.b64encode(uploaded_file.read()).decode('utf-8')
            pdf_display = f'<embed src="data:application/pdf;base64,{base64_pdf}" width="100%" height="1000" type="application/pdf">'
            st.markdown(pdf_display, unsafe_allow_html=True)

交流群

时隔2个月，摸鱼学习交流群再次限时开放了。

Python技术交流群（技术交流、摸鱼、白嫖课程为主）又不定时开放了，感兴趣的朋友，可以在下方公号内回复：666，即可进入，一起 100 天计划！

老规矩，酱友们还记得么，右下角的 “在看” 点一下，如果感觉文章内容不错的话，记得分享朋友圈让更多的人知道！

【神秘礼包获取方式】

识别下方公众号，回复：1024