## 一、streamlit介绍

### 1、简介

streamlit是一个开源的[python库](https://so.csdn.net/so/search?q=python%E5%BA%93\&spm=1001.2101.3001.7020)，能够快速帮助用户创建定制化的web应用，特别是在机器学习和数据科学领域。

### 2、特点

**1. API简明易用**\
API（Application Program Interface）非常友好，结构清晰，容易上手\
2\. 无需掌握前端开发知识，如html，JavaScript，css等就可以构建web应用\
（1）封装大量常用组件方法，支持大量数据表、图表等对象的渲染，支持网格化、**2.响应式布局**\
（2）渲染语言为Markdowm；支持HTML文本的渲染。所以也能嵌入HTML或CSS等代码块到应用中\
**3. 社区资源丰富**\
（1）官方论坛非常活跃<https://discuss.streamlit.io/>\
（2）官方文档提供了丰富的实例和源码<https://docs.streamlit.io/library/api-reference>\
能让创作者专注于内容和后端业务的实现，但是又能够生成基于web的GUI，无需在前端耗费大量心力

## 二、streamlit学习笔记

### 1、markdown文本

* 用markdowm格式显示内容，直接使用st.markdowm()初始化，调用不同的方法，往文档中填入内容

```python
st.markdown('Streamlit is **_really_ cool**.')
st.markdown("This text is :red[colored red], and this is **:blue[colored]** and bold.")
st.markdown(":green[$\sqrt{x^2+y^2}=1$] is a Pythagorean identity. :pencil:")

123
```

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d9aa5b169ce8e92f2245bd6ad4a26770.png)

* **st.title()**：文章大标题
* **st.header()**：显示一级标题
* **st.subheader()**：显示二级标题
* **st.text()**：显示固定格式的文本
* **st.caption()**：显示小字体文本
* **st.code()**：显示代码块
* **st.latex()**：latex公式
* **st.divider()**：显示全局规则

### 2、数据显示支持

* **st.table()**：普通的表格，用户静态数据的展示

```python
df = pd.DataFrame(
   np.random.randn(4, 3),
   columns=('列 %d' % i for i in range(3)))

st.table(df)

12345
```

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ab70e13d421021cd2ba7ecd5a58c5b6c.png)

* **st.dataframe()**：高级的表格，可以进行数据的操作，比如排序等

```python
df = pd.DataFrame(
   np.random.randn(10, 5),
   columns=('列 %d' % i for i in range(5)))

st.dataframe(df.style.highlight_max(axis=0))

12345
```

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/55b0fe82f63ad2cbf78578da1ff6ad79.png)\
还有n多种样式，如：\
highlight\_null：空值高亮\
highlight\_min：最小值高亮\
highlight\_max：最大值高亮\
highlight\_between：某区间内的值高亮

* **json字符串显示**
* ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9b2f704bfb70edccaa9b9972d74f6e87.png)
* **监控组件metric**

```python
col1, col2, col3 = st.columns(3)
col1.metric("Temperature", "70 °F", "1.2 °F")
col2.metric("Wind", "9 mph", "-8%")
col3.metric("Humidity", "86%", "4%")

1234
```

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c2765c77b85074e965fb4ae167b331aa.png)

### 3、图表可视化支持

#### 原生图表组件

* **st.line\_chart()**：折线图

```python
chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=['a', 'b', 'c'])

st.line_chart(chart_data)#折线图
st.area_chart(chart_data)#面积图
st.bar_chart(chart_data)#柱状图


12345678
```

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8b5c70ce442f8f09faeaaff271d0de67.png)

* **st.area\_chart()**：面积图\
  ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c24bea80ca4fc2032febfe3a427ad06d.png)
* **st.bar\_chart()**：柱状图\
  ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9b53fff8e282ab468ebf0c15e72da234.png)
* **st.map()**：地图（经纬线）

```python
df = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon'])

st.map(df)

12345
```

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/50615ceba000292f2d2c6efbb5cecefd.png)

#### 外部图表组件：借助于其他库实现

* **st.pyplot()**：显示matplotlib格式的图像
* **st.altair\_chart()**
* **st.vega\_lite\_chart()**
* **st.plotly\_chart()**
* **st.bokeh\_chart()**
* **st.pydeck\_chart()**
* **st.graphviz\_chart()**

### 4、用户操作支持

* **st.button**（显示内容）：按钮
* **st.download\_button（）**：下载按钮
* \*\*file\_uploader：\*\*文件上传
* **checkbox**：复选框
* **radio**：单选框
* **selectbox**：下拉单选框
* **mutiselect**：下拉多选框
* **slider**：滑动条
* **select\_slider**：选择条
* **text\_input**：文本输出框
* \*\*text\_area:\*\*文本展示框
* **number\_inpu**t：数字输入框，支持加减按钮
* **data\_input**：日期选择框
* **time\_input**：时间选择框
* **color\_picker**：颜色选择器
* **camera\_input**：调用用户的摄像头获取一张图片

### 五、多媒体组件

* **st.image()**：显示一张图片或一组图片
* **st.audio()**：播放音频
* **st.video()**：播放视频\
  ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/41d77ad3cea6c8a65bf52909ba78d15d.png)

### 6、状态组件

* **progress**：进度条，如游戏加载进度，运行进度等
* **Spinner**:等待提示
* **Balloons**:页面底部飘气球，表示祝贺
* **Snow**:页面下雪花，表示祝贺
* **Error**:显示错误信息
* **Warning**:显示警告信息
* **Info**:显示信息
* **Success**:显示成功信息
* **exception**:显示异常信息（代码错误栈）\
  ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/03f7ab71861b205e863adea834728a50.png)\
  ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d8a509422a5daa046fe1e840032a23d6.png)\
  ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2c8ebede91198535fb8b89165cb2891a.png)

### 7、页面布局和容器

* **st.sidebar**：显示在侧边栏
* **st.columns**：列容器，处在同一个columns内的组件，按照从左至右顺序展示\
  ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/366be5825ec835531997565b210f89cb.png)
* **st.tabs**：划分容器\
  ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c258510d7c2713610cf3dd7c5ea1bc96.png)
* **st.container**：包含多个组件的容器\
  ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/77aca45e39c57255dae7df803b86c412.png)
* **st.expander**：包含多个可以扩展的容器\
  ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/686ba16452cef004c309e62be544ee2f.png)
* **st.empty**：包含单组件的容器

### 8、流程控制系统

streamlit是自上而下逐步渲染出来的

* **st.stop()**：可以让streamlit应用停止而不向下执行，如验证码通过后，再向下运行显示后续内容
* **st.experimental\_rerun()**：重新执行脚本
* **st.form()**：表单，streamlit在某个组件有交互后就会重新执行页面程序，而有时候需要等一组组件都完成交互后再刷新（如登录填写用户名和密码），这个时候就需要将这些组件添加到form中
* st.form\_submit\_button()：在form中使用，提交表单\
  ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3734563057796298dd9af4c284b407e8.png)

### 9、云端部署

可以部署再streamlit cloud或其他公有云上，生成一个公网url随时访问，详细步骤可以查看相关官方手册<https://docs.streamlit.io/streamlit-community-cloud>

### 10、其他

* **Session state**是一种在每个用户会话的重新运行之间共享变量的方法。除了存储和持久化状态的功能外，Streamlit 还公开了使用回调操作状态的功能。会话状态还会在[多页应用](https://docs.streamlit.io/library/get-started/multipage-apps)内的应用之间持续存在。
* **多页面应用**：使用st.set\_page\_config(page\_title=“页面标题”,page\_icon=“页面图标”)，[多页APP创建方法](https://docs.streamlit.io/library/get-started/multipage-apps/create-a-multipage-app)\
  随着应用的增长，仅仅使用选择框用于选择要显示的页面，维护起来需要大量额外的开销，并且无法使用自定义单个页面标题，无法使用URL在页面之间导航。
* **为用户个性化应用**：st.experimental\_user 返回关于streamlit上的私有应用程序的登录用户的信息\
  ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/92c51a6a2c7e3a75edf2897e21f68011.png)
* **缓存特性提升速度：**\
  当用户在页面上做一些操作的时候，比如输入数据，都会触发整个 streamlit 应用代码的重新执行，如果其中有读取外部数据的步骤（数 GB 的数据），那这种性能损耗是非常可怕的。\
  但 streamlit 提供了一个缓存装饰器，当要重新执行代码渲染页面的时候，就会先去缓存里查一下，如果代码或者数据没有发生变化，就直接调用缓存的结果即可。\
  使用方法也简单，在需要缓存的函数加上 @st.cache 装饰器或其他装饰器即可。\
  ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0512c955afca08349ac357af33ba7e89.png)



  
# 在生产环境中，通常会使用 nohup 命令来确保进程在关闭终端后继续运行，并将输出重定向到一个文件。完整命令如下：
nohup streamlit run interview/app.py --server.port 5055 > streamlit.log 2>&1 &

# 查看端口占用
sudo netstat -tuln | grep 5055
sudo netstat -tuln | grep 5065

pkill -f "streamlit run interview/app.py"
```

你可以将这两个命令写入一个脚本文件（例如 `restart_streamlit.sh`），然后在每次更新文件后运行这个脚本：

```bash
#!/bin/bash
pkill -f "streamlit run interview/app.py"
nohup streamlit run interview/app.py --server.port 5055 > streamlit.log 2>&1 &
```

确保脚本具有可执行权限：

```bash
chmod +x restart_streamlit_interview_java.sh
```

然后每次更新文件后运行脚本：

```bash
./restart_streamlit.sh
```