创建第一个Streamlit应用

创建应用程序

如果您已经顺利完成了前面的步骤，那么您很可能已经安装了 Streamlit 并在“基本概念”和“高级概念”部分中完成了基础操作。如果没有的话，现在正是查看这些内容的好时机。
学习如何使用 Streamlit 的最简单方法就是亲自去实践。在阅读本指南的过程中，逐一测试每种方法。只要你的应用程序正在运行，每次你向脚本中添加新元素并保存后，Streamlit 的用户界面都会询问你是否想要重新运行应用程序并查看更改。这使你能够在一个快速的交互循环中工作：你编写一些代码，保存它，查看输出，再编写一些代码，如此反复，直到你对结果满意为止。目标是使用 Streamlit 创建一个与你的数据或模型相关的交互式应用程序，并在此过程中使用 Streamlit 来审查、调试、完善和分享你的代码。
在本指南中，您将利用 Streamlit 的核心功能来创建一个交互式应用程序；该应用程序将基于纽约市的公共优步数据集来展示乘车和下车的相关信息。完成操作后，您将了解如何获取和缓存数据、绘制图表、在地图上展示信息以及使用诸如滑块之类的交互式控件来筛选结果。

如果您想直接跳过前面的内容，一次性查看全部内容的话，完整的 代码可在下方获取。

Create your first app

Streamlit 不仅仅是一种创建数据应用程序的方式，它还是一个由众多创作者组成的社区，他们分享自己的应用程序和想法，并相互帮助以提升自己的作品质量。请来到社区论坛与我们一同交流吧。我们非常乐意倾听您的问题、想法，并帮助您解决遇到的难题——今天就来参与吧!

• 第一步是创建一个新的 Python 脚本。我们将其命名为 uber_pickups.py 。
  
• 在您喜欢的集成开发环境（IDE）或文本编辑器中打开 uber_pickups.py 文件，然后添加以下几行代码：
  

1. import streamlit as st
2. import pandas as pd
3. import numpy as np

复制代码

• 每一个优秀的应用程序都有一个标题，那我们就给它加上一个吧：
  

1. st.title('Uber pickups in NYC')

复制代码

• 现在是时候从命令行运行 Streamlit 了：
  

1. streamlit run uber_pickups.py

复制代码

运行一个 Streamlit 应用程序与运行任何其他 Python 脚本并无不同。只要您需要查看该应用程序，就可以使用此命令。

您是否知道您还可以将一个 URL 传递给“streamlit run”命令呢？当与 GitHub Gists 结合使用时，这非常有用。

例如：

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

复制代码

获取一些数据

既然你已经有了这个应用程序，接下来你需要做的就是获取纽约市内优步的乘车和下车数据集。

• 首先，让我们编写一个函数来加载数据。将以下代码添加到您的脚本中：
  1. DATE_COLUMN = 'date/time'
  2. DATA_URL = ('https://s3-us-west-2.amazonaws.com/'
  3.          'streamlit-demo-data/uber-raw-data-sep14.csv.gz')
  5. def load_data(nrows):
  6.     data = pd.read_csv(DATA_URL, nrows=nrows)
  7.     lowercase = lambda x: str(x).lower()
  8.     data.rename(lowercase, axis='columns', inplace=True)
  9.     data[DATE_COLUMN] = pd.to_datetime(data[DATE_COLUMN])
  10.     return data

  复制代码
  您会注意到，load_data 是一个简单的常规函数，它会下载一些数据，将其放入一个 Pandas 数据框中，并将日期列从文本格式转换为日期时间格式。该函数接受一个参数（nrows），该参数指定了您希望加载到数据框中的行数。
  
• 现在让我们来测试一下这个功能并查看一下输出结果。在您的函数下方添加以下几行代码：
  1. # Create a text element and let the reader know the data is loading.
  2. data_load_state = st.text('Loading data...')
  3. # Load 10,000 rows of data into the dataframe.
  4. data = load_data(10000)
  5. # Notify the reader that the data was successfully loaded.
  6. data_load_state.text('Loading data...done!')

  复制代码
  在您应用程序的右上角会看到几个按钮，它们会询问您是否想要重新运行该应用程序。选择“始终重新运行”，那么每次您保存更改时，您所做的改动都会自动显示出来。
  

好吧，这实在太过平淡无奇了……
结果发现，下载数据并将 10,000 行数据加载到数据框中需要很长时间。将日期列转换为日期时间格式也不是一件简单的事情。您不想每次应用程序更新时都重新加载数据——幸运的是，Streamlit 允许您缓存数据。
轻松实现缓存

• 尝试在load_data声明之前添加@st.cache_data：
  1. @st.cache_data
  2. def load_data(nrows):

  复制代码
• 然后保存脚本，Streamlit 将会自动重新运行你的应用程序。由于这是你第一次使用 @st.cache_data 来运行脚本，所以你不会看到有任何变化。让我们再对你的文件做一些修改，以便你能更好地体验缓存功能的强大之处。
  
• 将data_load_state.text('Loading data...done!')这一行代码替换为以下内容：
  1. data_load_state.text("Done! (using st.cache_data)")

  复制代码

现在保存。看看你添加的那条线是如何立即显现出来的吗？如果你稍作退后观察一下，这其实相当令人惊叹。幕后正发生着神奇的事情，而只需一行代码就能激活它。
它是如何运作的呢？

让我们花几分钟时间来探讨一下 @st.cache_data 实际是如何运作的。
当您为使用 Streamlit 的缓存注解的函数添加标记时，它会告知 Streamlit：每当调用该函数时，它都应检查以下两件事：

• 您在函数调用中所使用的输入参数。
  
• 函数内部的代码。
  

如果这是 Streamlit 首次以这些确切的值、以这种确切的组合方式看到这两项内容，它就会运行该函数并将结果存储在本地缓存中。下次调用该函数时，如果这两个值没有发生变化，那么 Streamlit 就知道可以完全跳过执行该函数。相反，它会从本地缓存中读取输出并将其传递给调用者——就像魔法一样。
“但是，等一下，”你自言自语道，“这听起来太完美了，简直不可思议。那么这一切的局限性究竟在哪里呢？”
嗯，主要有以下几点：

• Streamlit 只会检查当前工作目录内的更改。如果您升级了一个 Python 库，那么 Streamlit 的缓存只有在该库安装在您的工作目录内时才会注意到这一变化。
  
• 如果您的函数不是确定性的（也就是说，其输出取决于随机数），或者如果它从外部时变源（例如，实时股票市场行情服务）中获取数据，那么缓存的值将一无所知。
  
• 最后，您应该避免修改使用 st.cache_data 缓存的函数的输出，因为缓存值是通过引用存储的。
  

虽然这些限制需要牢记在心，但很多时候它们并不会成为一个问题。在那些时候，这个缓存确实具有变革性。

每当您的代码中存在长时间运行的计算时，请考虑对其进行重构，以便能够使用 @st.cache_data（如果可行的话）。请阅读缓存以获取更多详细信息。

检查原始数据

在开始处理数据之前，先查看一下所使用的原始数据总是个不错的做法。让我们在应用程序中添加一个子标题以及原始数据的打印输出：

1. st.subheader('Raw data')
2. st.write(data)

复制代码

在基本概念指南中，您了解到 st.write 函数能够呈现您传递给它的几乎任何内容。在这种情况下，您传入了一个数据框，它呈现成了一个可交互的表格。
st.write 会根据输入数据的类型来执行正确操作。如果其表现不符合您的预期，您可以使用诸如 st.dataframe 这样的专门命令来替代。有关完整列表，请参阅 API 参考文档。
绘制一个直方图

既然您已经有机会查看了这个数据集并对其内容有所了解，那么让我们再进一步操作一下，绘制一个直方图，以查看在纽约市，优步最繁忙的时段是哪些时段。

• 首先，让我们在原始数据部分下方添加一个副标题：
  1. st.subheader('Number of pickups by hour')

  复制代码
• 使用 NumPy 生成一个直方图，该直方图按照小时对取车时间进行分组统计：
  1. hist_values = np.histogram(data[DATE_COLUMN].dt.hour, bins=24, range=(0,24))[0]

  复制代码
• 现在，让我们使用 Streamlit 的 st.bar_chart() 方法来绘制这个直方图。
  1. st.bar_chart(hist_values)

  复制代码
• 保存您的脚本。这个直方图应该会立即在您的应用程序中显示出来。经过快速查看，看起来最繁忙的时间是 17：00（下午 5 点）。
  

为了绘制此图表，我们使用了 Streamlit 的原生 bar_chart() 方法，但需要了解的是，Streamlit 还支持诸如 Altair、Bokeh、Plotly、Matplotlib 等更复杂的图表库。有关完整列表，请参阅支持的图表库。
在地图上绘制数据

利用乌比斯公司的数据集绘制直方图，有助于我们确定乘车高峰时段，但如果我们要弄清楚整个城市中乘车地点的集中区域呢？虽然你可以用柱状图来展示这些数据，但除非你对城市中的纬度和经度坐标非常熟悉，否则很难对其进行解读。为了展示乘车集中区域，让我们使用 Streamlit 的 st.map() 函数将数据叠加在纽约市的地图上。

• 为该部分添加一个子标题：
  1. st.subheader('Map of all pickups')

  复制代码
• 使用 st.map() 函数来绘制数据：
  1. st.map(data)

  复制代码
• 保存您的脚本。该地图具有完全的交互性。您可以尝试通过平移或放大来查看。
  

绘制完直方图后，您发现优步接单最繁忙的时间段是 17 点。现在让我们重新绘制地图，以显示 17 点时的接单集中区域。

• 找出以下代码片段：
  1. st.subheader('Map of all pickups')
  2. st.map(data)

  复制代码
• 用下面的代码替换它：
  1. hour_to_filter = 17
  2. filtered_data = data[data[DATE_COLUMN].dt.hour == hour_to_filter]
  3. st.subheader(f'Map of all pickups at {hour_to_filter}:00')
  4. st.map(filtered_data)

  复制代码
• 您应该会看到数据立即更新了。
  

为了绘制这张地图，我们使用了内置在 Streamlit 中的 st.map 函数，但如果您想要展示复杂的地图数据，我们建议您查看 st.pydeck_chart 。
使用滑块筛选结果

在上一节中，当您绘制地图时，用于筛选结果的时间是直接硬编码到脚本中的，但如果我们要让读者能够实时动态地筛选数据呢？使用 Streamlit 的组件功能就可以做到这一点。让我们使用 st.slider() 方法在应用程序中添加一个滑块。

• 找到hour_to_filter变量，并将其替换为以下代码片段：
  1. hour_to_filter = st.slider('hour', 0, 23, 17)  # min: 0h, max: 23h, default: 17h

  复制代码
• 使用滑块，即可实时看到地图的更新情况。
  

使用按钮来切换数据

滑块只是动态改变应用程序构成的一种方式。让我们使用 st.checkbox 函数在您的应用程序中添加一个复选框。我们将使用这个复选框来显示/隐藏应用程序顶部的原始数据表。

• 找出这些行：
  1. st.subheader('Raw data')
  2. st.write(data)

  复制代码
• 将以下代码替换这些行：
  1. if st.checkbox('Show raw data'):
  2.     st.subheader('Raw data')
  3.     st.write(data)

  复制代码

我们相信您肯定有自己的想法。完成本教程后，请查看 Streamlit 在其 API 参考文档中所展示的所有组件。
完整代码

使用streamlit run [app name]运行APP。

1. import streamlit as st
2. import pandas as pd
3. import numpy as npst.title('Uber pickups in NYC')DATE_COLUMN = 'date/time'DATA_URL = ('https://s3-us-west-2.amazonaws.com/'            'streamlit-demo-data/uber-raw-data-sep14.csv.gz')@st.cache_data
4. def load_data(nrows):    data = pd.read_csv(DATA_URL, nrows=nrows)    lowercase = lambda x: str(x).lower()    data.rename(lowercase, axis='columns', inplace=True)    data[DATE_COLUMN] = pd.to_datetime(data[DATE_COLUMN])    return datadata_load_state = st.text('Loading data...')data = load_data(10000)data_load_state.text("Done! (using st.cache_data)")if st.checkbox('Show raw data'):
5.     st.subheader('Raw data')
6.     st.write(data)st.subheader('Number of pickups by hour')hist_values = np.histogram(data[DATE_COLUMN].dt.hour, bins=24, range=(0,24))[0]st.bar_chart(hist_values)# Some number in the range 0-23hour_to_filter = st.slider('hour', 0, 23, 17)filtered_data = data[data[DATE_COLUMN].dt.hour == hour_to_filter]st.subheader('Map of all pickups at %s:00' % hour_to_filter)st.map(filtered_data)

复制代码

分享您的应用程序

在您构建好 Streamlit 应用程序之后，是时候分享它了！要向全世界展示您的应用程序，您可以使用 Streamlit 社区云来免费部署、管理和分享您的应用程序。
它有三个简单的步骤来运作：

• 将您的应用程序放入公开的 GitHub 仓库中（并确保其中包含 requirements.txt 文件！）
  
• 登录至 share.streamlit.io
  
• 点击“部署应用程序”，然后粘贴您的 GitHub 网址
  

就是这样！?? 您现在已拥有一个可公开部署的应用程序，可以与全世界分享。点击此处了解如何使用 Streamlit 社区云的相关信息。
寻求帮助

开始的部分就介绍到这里，现在您可以着手开发自己的应用程序了！如果您在此过程中遇到问题，可以尝试以下几种方法。

• 请访问我们的社区论坛并提出您的问题
  
• 通过命令行使用 streamlit help 提供快速帮助
  
• 查阅我们的知识库以获取提示、分步教程以及解答您关于创建和部署 Streamlit 应用程序疑问的文章。
  
• 阅读更多文档！具体内容包括：
  
  
  
  • 关于缓存、主题设置以及为应用程序添加状态性等方面的概念。
    
  • 每个 Streamlit 命令的 API 参考。
    
  
  

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！