【Streamlit学习心得】个人项目实战，并部署在Streamlit Cloud，生成一个公网url随时访问

【Streamlit学习心得】个人项目实战，并部署在Streamlit Cloud，生成一个公网url随时访问

前言

1. Streamlit：一个能够迅速搭起web服务的Python框架，非常便捷地将本地的程序开发接口给别人调用。更多介绍官方文档写的很详细了点击跳转，安装也很简单，直接pip install streamlit即可
2. 再说下Streamlit Cloud，这是streamlit官方提供的云，可以部署自己公开的streamlit app，会生成一个公网url，可以随时访问并分享给别人（装13）
3. 本篇文章主要是记录了我在使用Streamlit时，所遇到的问题以及我是怎么应对的，几乎所有的组件和方法都有用到
4. 本人的项目已部署在Streamlit Cloud了，有兴趣的可以访问看看点击跳转

一、全局信息配置

• app的全局配置：主要用到的是st.set_page_config，可以修改页面标题、页面icon、侧边栏以及页面布局，其中可以用emoji作为页面的icon。如下是我的配置信息：

st.set_page_config(
    page_title="七里香还是稻香",    #页面标题
    page_icon=":rainbow:",        #icon
    layout="wide",                #页面布局
    initial_sidebar_state="auto"  #侧边栏
)

• 程序内部的全局变量信息配置：主要用到的是st.session_state，这里面定义的信息会在页面刷新时重置，因此可以利用它，可以非常巧妙地配置每次访问页面时的全局信息。如下是我的配置信息：

if 'first_visit' not in st.session_state:
    st.session_state.first_visit=True
else:
    st.session_state.first_visit=False
# 初始化全局配置
if st.session_state.first_visit:
	'''在这里可以定义任意多个全局变量，方便程序进行调用'''
    st.session_state.date_time=datetime.datetime.now() + datetime.timedelta(hours=8) #Streamlit Cloud的时区是UTC，加8小时即北京时间
    st.session_state.random_chart_index=random.choice(range(len(charts_mapping)))
    st.session_state.my_random=MyRandom(random.randint(1,1000000))
    st.session_state.city_mapping,st.session_state.random_city_index=get_city_mapping()
    # st.session_state.random_city_index=random.choice(range(len(st.session_state.city_mapping)))
    st.balloons()  #第一次访问时才会放气球

• 秘钥信息配置：这个主要是针对用Streamlit Cloud分享app时所要配置的信息，会储存在st.secrets中，因为部署到Streamlit Cloud的app都是链接public github repository的，所以像database的账户密码、API key等信息是不能公开的，但程序中又需要用到这些信息，那么就需要配置了。详细的用法官方也已经给出点击跳转

二、部分组件的使用

1. 基础组件

• st.markdown：可以传入任意Markdown语句，同时也可以编写HTML语句，只需要设置参数unsafe_allow_html=True。我觉得一个比较实用的例子：st.markdown('<br>',unsafe_allow_html=True)可以进行换行
• st.sidebar：即侧边栏，任何通过st.sidebar.what声明的组件都会显示在侧边栏中
• st.container：用法是with st.container():，即在它下面定义的所有内容都会包裹在一个容器中
• st.expander：用法也是with st.expander():，即在它下面定义的所有内容都会包裹在一个可以折叠的容器中
• st.balloons：放🎈，非常实用哈哈哈
• st.image：显示图片
• st.audio：显示音乐
• st.video：显示视频
• st.components.v1：可以将一个自定义的html通过iframe嵌入到streamlit页面中，这可以与pyecharts完美结合

2. 自定义组件：主要是通过创建自定义components来实现，本人能力有限，只能找找别人开发好的自定义组件了，可以在PyPI中搜索看看有哪些比较实用的组件点击跳转
3. 注意：st.markdown尽管可以传入html，但不能执行其中的js语句；st.components.v1.html可以执行js语句，但仅仅是针对iframe中的，而不能影响streamlit本身的页面。

三、缓存机制

• streamlit的缓存主要是用到装饰器@st.cache，可以优化性能，提升用户体验。主要是用在请求的数据量比较大时采用的一种应对策略，因为streamlit的一个特点是：用户每进行一次交互，程序都会重新自顶向下重新运行一遍。
• 被@st.cache装饰的函数，streamlit会对该函数的入参、出参、函数主体以及函数内部用到的其他函数主体进行跟踪，通过hash编码进行前后判断是否已经运行过一遍，快速返回结果。更多详细介绍官方也给出了点击跳转
• 同时，hash编码是可以自定义的，通过参数hash_funcs实现，如下是我自定义的hash编码：

class MyRandom:
    def __init__(self,num):
        self.random_num=num

def my_hash_func(my_random):
    num = my_random.random_num
    return num

@st.cache(hash_funcs={MyRandom: my_hash_func})
def get_pictures(my_random):
    try:
        cat_img=Image.open(BytesIO(requests.get(requests.get('https://aws.random.cat/meow').json()['file']).content))
        dog_img=Image.open(BytesIO(requests.get(requests.get('https://random.dog/woof.json').json()['url']).content))
        fox_img=Image.open(BytesIO(requests.get(requests.get('https://randomfox.ca/floof/').json()['image']).content))
    except Exception as e:
        if 'cannot identify image file' in str(e):
            return get_pictures(my_random)
        else:
            st.error(str(e))
    return cat_img,dog_img,fox_img

即：

1. 首先，定义一个MyRandom类，这个类储存一个随机数；
2. 然后，定义一个my_hash_func函数，接收的是MyRandom对象，返回的是该对象的随机数；
3. 再者，定义一个get_pictures函数，同样接收的是MyRandom对象，该函数是去请求获取三张动物图片，web请求会比较耗时，所以有必要使用缓存；
4. 最后，get_pictures函数使用@st.cache进行装饰，其中hash_funcs参数使用了自定义的hash，传入的是一个字典类型，key为get_pictures入参的类型，value为hash函数。

四、数据来源

在我的项目中，用到了天气预报数据、动物图片、音乐、视频

• 天气预报：数据是来自墨迹天气
• 动物图片：从开源的public-api-lists中找到
• 音乐：来自咪咕音乐
• 视频：来自B站

其中，天气预报数据和动物图片的获取逻辑见源码就好了，就不过多地赘述了；音乐可以直接在咪咕音乐中下载；视频则是通过合成的，因为B站缓存的视频是分为audio和video两个文件的。

五、Git的使用

在本项目中，需要频繁使用git，将项目文件提交到github仓库，Streamlit Cloud链接的就是你的github仓库，当仓库的文件有变动时，streamlit app也会即时变动。在这里列一下常用的git命令：

1. 常规的提交或更新文件

添加文件到暂存区

git add <文件路径>

本地提交文件

git commit -m "附加信息"

将本地commit提交到仓库

git push

ps：可以将上述命令写成一条

git add <文件路径> && git commit -m "附加信息" && git push

2. 提交或更新大文件(100M以上)

检查是否已安装git lfs

git-lfs --version

标记需要提交的大文件

git lfs track <大文件路径>

完成后会在当前目录下生成一个.gitattributes的文件，这个文件要先提交到仓库中，然后就是常规的提交文件了，我项目中的视频就是用到了大文件提交的方法

3. 回滚操作

当你想撤回add时执行

git rm -r <文件路径> --cached

当你想撤回commit时执行

git reset HEAD~1

六、项目地址

• GitHub Repository：https://github.com/JuneWaySue/my_streamlit_app
• Streamlit Cloud Share：https://share.streamlit.io/junewaysue/my_streamlit_app/my_streamlit.py

写在最后

在工作中经常会把自己本地的一些程序给别人去调用，此时，简单方便快捷的Streamlit正好解决了这种需求，

在此之前，我仅仅是用它来实现接口开发，功能实现了就好仅此而已，并没有过多地去了解Streamlit，

无意间发现了Streamlit Cloud，知道它能够把自己的程序部署起来，任何人都可以随时访问，

于是乎，认真地研究了一下Streamlit，实现了第一个能够在公网上访问的Streamlit App，

并且把在这个实现的过程中遇到的问题记录下来，才有了这一篇文章。

最后，迟来的祝福：光棍节快乐~