Streamlit：最快的方式建立和分享数据的工具

Streamlit 是第一个专门针对机器学习和数据科学团队的应用 开发框架，它是开发自定义机器学习工具的最快的方法，你可以认为 它的目标是取代 Flask 在机器学习项目中的地位，可以帮助机器学习工程师快速开发用户交互工具。Streamlit 的宗旨很明确，就是要让人只需要通过编写简单的 Python 代码，就可以完成构建应用的需求。它支持所见即所得的热更新，而且你不需要写一行 HTTP 请求代码及前端代码，你只需要一个 Python IDE 和一个浏览器，就能快速看到你自己构建的应用。Streamlit 的上手特别简单，并且支持诸如 Tensorflow，Keras，PyTorch，Pandas，Seaborn 等主流的机器学习，深度学习，数据分析，数据可视化框架。随便创建一个 hello.py 文件，然后只需要写几行代码，就能完成一个简单的功能。

安装很简单（确保是 Python3.6~3.8），使用 PyPI 安装：

pip install streamlit
# 启动测试
streamlit hello

接着，便使用你的默认浏览器打开一个标签页，载入官方案例：

创建自定义的 App，仅仅需要三步：

1. 在你的 Python 脚本中载入 streamlit，并写一些代码
2. 使用 streamlit run [filename] 运行代码文件
3. 点击 Streamlit 菜单栏的 ‘Deploy’ 按钮，便可以 分享你的应用给全世界!

1 创建你的第一个 App

本教程使用 vscode 进行代码的编写。创建一个名为 first_app.py 的文件，并写入如下代码用于载入一些模块：

import streamlit as st
# To make things easier later, we're also importing numpy and pandas for
# working with sample data.
import numpy as np
import pandas as pd

在终端输入 streamlit run first_app.py 运行您的应用。新的标签页将在您的默认浏览器中打开。目前为空白，没关系，下面我们会添加一些东西。运行 Streamlit 应用程序与任何其他 Python 脚本没有什么不同。每当您需要查看应用程序时，都可以使用此命令。

Tips: 您知道吗，您还可以将 URL 传递给 streamlit run？ 当与 Github Gists 结合使用时，这很棒。 例如：

$ streamlit run https://raw.githubusercontent.com/streamlit/demo-uber-nyc-pickups/master/app.py

Ctrl + c 可以中止 streamlit run。

很棒！你完成了一个 App 的创建，虽然，它什么功能也没有，但也是一个 App。

2 添加文本和数据

Streamlit 有多种向应用程序添加文本的方法。 查看 API reference 以获取完整列表。

1. 添加一个标题

st.title('My first app')

2. 编写 Markdown 可以使用 st.write()，比如：

x = 5
# 使用 Markdown 格式输出 x^4
st.write(f'${x}^4$ is', x ** 4) 

可以看看效果：

这里的公式是使用 Markdown 的语法，你也可以使用 latex：

st.latex("\sum_{i=1}^{n}")

更多的使用如下：

st.title("st.title")
st.header("st.header")
st.subheader("st.subheader")

st.markdown("# markdown一级标题")
st.markdown("## markdown二级标题")
st.markdown("### markdown三级标题")

# ------------------------------------

st.write("st.write")
st.markdown("markdown普通文字")
st.text("st.text")

# ------------------------------------

st.markdown("""
Markdown列表：
- hello 
- world
- China
""")

st.markdown("***markdown粗斜体***")

# ------------------------------------

st.latex("\sum_{i=1}^{n}")

# ------------------------------------

st.write(1234)
st.write("1234")
st.write("1 + 1 = ", 2)

效果：

st.write() 是一个泛型函数，根据传入对象不同采取不同的展示方式，比如传入 pandas.DataFrame 时，st.write(df) 默认调用 st.dataframe()，传入 markdown时，st.write(markdown) 默认调用 st.markdown()。可传入的对象有:

write(data_frame) : Displays the DataFrame as a table.
write(func) : Displays information about a function.
write(module) : Displays information about the module.
write(dict) : Displays dict in an interactive widget.
write(obj) : The default is to print str(obj).
write(mpl_fig) : Displays a Matplotlib figure.
write(altair) : Displays an Altair chart.
write(keras) : Displays a Keras model.
write(graphviz) : Displays a Graphviz graph.
write(plotly_fig) : Displays a Plotly figure.
write(bokeh_fig) : Displays a Bokeh figure.
write(sympy_expr) : Prints SymPy expression using LaTeX.
write(markdown):

仅仅展示代码，而不执行，可以：

code = """
def sum_(x):
    return np.sum(x)
"""
st.code(code, language="python")

code = """
for (i i 1:10) {
    print(i)
}
"""
st.code(code, language="r")

st.markdown("""
​```python
print("hello")
""")

展示 Code，同时执行 Code；需要将code放入 st.echo() 内：

with st.echo():
    for i in range(5):
        st.write("hello")

3 写入 data frame

st.write() 与 magic commands 一起构成了 Streamlit 的“瑞士军刀”。几乎可以将任何内容传递给 st.write(): 文本，数据，Matplotlib图形，Altair图表等等。不用担心，Streamlit 会弄清楚并以正确的方式呈现事物。

st.write("这是我们使用数据创建表的首次尝试：")
df = pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
})
st.write(df)

效果：

还有其他一些特定于数据的函数，例如 st.dataframe() 和 st.table() 也可以用于显示数据。

4 使用魔法命令

您也可以编写应用程序而无需调用任何 Streamlit 方法。Streamlit支持“magic commands”，这意味着您根本不必使用 st.write() ！ 尝试使用以下代码片段替换上面的代码：

"""
# My first app
Here's our first attempt at using data to create a table:
"""

df = pd.DataFrame({
  'first column': [1, 2, 3, 4],
  'second column': [10, 20, 30, 40]
})

df

每当 Streamlit 在自己的 line 上看到变量或文字值时，它将使用 自动将其写 st.write() 入您的应用程序。有关更多信息，请参阅 magic commands。

5 绘制图表和地图

Streamlit 支持多种流行的数据图表库，例如 Matplotlib, Altair, deck.gl, and more 等。在本部分中，您将向您的应用添加条形图，折线图和地图。

5.1 画折线图

您可以使用 st.line_chart() 轻松将折线图添加到您的应用中。我们将使用 Numpy 生成一个随机样本，然后将其绘制成图表。

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

st.line_chart(chart_data)

效果：

5.2 画地图

使用 st.map() 可以在地图上显示数据点。让我们使用 Numpy 生成一些示例数据并将其绘制在旧金山地图上。

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

st.map(map_data)

6 添加可交互的小部件

借助小部件，Streamlit 允许您使用复选框，按钮，滑块等将交互性直接烘焙到应用程序中。查看 API reference 以获取交互式窗口小部件的完整列表。

6.1 使用复选框显示/隐藏数据

复选框的一个用例是隐藏或显示应用程序中的特定图表或部分。st.checkbox() 采用单个参数，即小部件标签。在此示例中，该复选框用于切换条件语句。

if st.checkbox('Show dataframe'):
    chart_data = pd.DataFrame(
        np.random.randn(20, 3),
        columns=['a', 'b', 'c'])

    st.line_chart(chart_data)

效果：

6.2 使用选择框进行选择

Use st.selectbox to choose from a series. You can write in the options you want, or pass through an array or data frame column.

Let’s use the df data frame we created earlier.

使用 st.selectbox 从序列中进行选择。您可以编写所需的选项，也可以通过数组或数据框列。让我们使用之前创建的 df 数据框。

option = st.selectbox(
    '您最喜欢哪个数字？',
     df['first column'])

'You selected: ', option

效果：

7 布局您的应用

为了使外观更整洁，可以将小部件移动到侧边栏（sidebar）中。这将您的应用保持在中心位置，而小部件固定在左侧。让我们来看看如何在应用中使用 st.sidebar。

option = st.sidebar.selectbox(
    '您最喜欢哪个数字？',
     df['first column'])

'You selected:', option

效果：

您可以使用以下语法将大部分可放入应用程序中的元素放入侧边栏中：st.sidebar.[element_name]()。以下是一些显示其用法的示例：st.sidebar.markdown(), st.sidebar.slider(), st.sidebar.line_chart()。

您还可以使用 st.beta_columns 并排布置小部件，或使用 st.beta_expander 通过隐藏大量内容来节省空间。

left_column, right_column = st.beta_columns(2)
pressed = left_column.button('Press me?')
if pressed:
    right_column.write("Woohoo!")

expander = st.beta_expander("FAQ")
expander.write("Here you could put in some really, really long explanations...")

效果：

现在唯一的例外是 st.echo 和 st.spinner。不过请放心，目前也在努力为这些产品增加支持！

8 显示进度

将长时间运行的计算添加到应用程序时，可以使用 st.progress() 实时显示状态。

首先，让我们导入time。 然后使用 time.sleep() 方法来模拟长时间运行的计算：

import time

'Starting a long computation...'

# Add a placeholder
latest_iteration = st.empty()
bar = st.progress(0)

for i in range(100):
  # Update the progress bar with each iteration.
  latest_iteration.text(f'Iteration {i+1}')
  bar.progress(i + 1)
  time.sleep(0.1)

'...and now we\'re done!'

效果：

9 分享您的应用

构建 Streamlit 应用程序后，就该共享它了！要将其展示给全世界，您可以使用 Streamlit sharing 免费部署，管理和共享您的应用程序。目前，Streamlit 共享仅接受邀请，因此，请 request an invite，我们将尽快与您联系！

它可以通过 3 个简单的步骤工作：

1. 将您的应用放入公开的 Github 存储库中（并确保其具有 requirements.txt！）
2. 登录到 share.streamlit.io
3. 点击 ‘Deploy an app’，然后粘贴您的 GitHub URL

您现在有了一个公开部署的应用程序，可以与世界分享。单击以了解有关 how to use Streamlit sharing 的更多信息。如果您要为团队寻求私人共享，请查看 Streamlit for Teams。

10 得到帮助

如果您遇到困难，可以：

• 查看 community forum 并发布问题
• 使用 $ streamlit --help 从命令行快速获得帮助
• 阅读更多文档！ 查看：
  • Streamlit Cookbook for things like caching and inserting elements out of order
  • API reference for examples of every Streamlit command

11 其他

Streamlit 提供即时模式的编程环境。当 Streamlit 检测出源文件变更时，只需点击 Always rerun 即可。

缓存简化计算流程。一连串缓存函数自动创建出高效的计算流程！你可以尝试以下代码：https://gist.github.com/treuill...

基本上，该流程涉及加载元数据到创建摘要等步骤（load_metadata → create_summary）。该脚本每次运行时，Streamlit 仅需重新计算该流程的子集即可。

Streamlit 适用于 GPU。Streamlit 可以直接访问机器级原语（如 TensorFlow、PyTorch），并对这些库进行补充。例如，以下 demo 中，Streamlit 的缓存存储了整个英伟达 PGGAN。该方法可使用户在更新左侧滑块时，app 执行近乎即时的推断。

可使用户在更新左侧滑块时，app 执行近乎即时的推断。

该 Streamlit app 使用 TL-GAN 展示了英伟达 PGGAN 的效果

Streamlit 是免费开源库，而非私有 web app。你可以本地部署 Streamlit app，不用提前联系我们。你甚至可以在不联网的情况下在笔记本电脑上本地运行 Streamlit。此外，现有项目也可以渐进地使用 Streamlit。

以上只是 Streamlit 功能的冰山一角而已。它最令人兴奋的一点是，这些原语可以轻松组成复杂 app，但看起来却只是简单脚本。这就要涉及架构运作原理和功能了，本文暂不谈及。

Streamlit 组件图示