Skip to main content
warning

将 Streamlit 作为 Spaces 默认内置 SDK 的选项已被弃用。 如果你希望使用 Streamlit 部署 Space，请选择 Docker SDK，然后使用其中的 Streamlit 模板。

Streamlit Spaces

Streamlit 允许你用 Python 以一种 响应式 的方式构建完整的 Web 应用：每当应用状态发生变化时，你的代码都会被重新执行。Streamlit 也非常适合做数据可视化，支持 Bokeh、Plotly、Altair 等多种图表库。可以阅读这篇博客文章，了解如何在 Spaces 中构建和托管 Streamlit 应用。

在创建新 Space 时选择 Streamlit 作为 SDK，会在 README.md 的 YAML 块中将 sdk 属性设置为 streamlit，从而使用最新版本的 Streamlit 初始化 Space。如果你想更改 Streamlit 版本，可以编辑 sdk_version 属性。

要在 Space 中使用 Streamlit，请在通过 New Space 表单 创建 Space 时选择 Streamlit 作为 SDK。这样会创建一个仓库，并在 README.md 的 YAML 配置块中包含如下属性：

sdk: streamlit
sdk_version: 1.25.0 # 最新的支持版本

你可以修改 sdk_version，但需要注意：如果使用不受支持的 Streamlit 版本，可能会出现问题。并不是所有版本都受支持，请查阅参考章节了解当前可用的版本。

关于 Streamlit 的更多信息，请参阅 Streamlit 文档。

warning

Streamlit Spaces 只允许使用 8501 端口（默认端口）。因此如果你为 Space 提供了 config.toml 文件，请确保没有覆盖默认端口。

你的第一个 Streamlit Space: Hot Dog Classifier​

在下面的章节中，你将学习创建 Space、配置 Space 以及部署代码的基础流程。我们会用 Streamlit 创建一个 Hot Dog Classifier Space，用来演示 julien-c/hotdog-not-hotdog 模型，该模型可以检测给定图片中是否包含热狗 🌭

你可以在这里查看完成版示例：NimaBoscarino/hotdog-streamlit。

创建一个新的 Streamlit Space​

我们先创建一个全新的 Space，并选择 Streamlit 作为 SDK。Hugging Face Spaces 本质上是 Git 仓库，这意味着你可以通过推送 commit 以增量方式（并且支持协作）开发你的 Space。继续之前，可以先查看 Getting Started with Repositories 指南，了解如何创建和编辑文件。

添加依赖​

在 Hot Dog Classifier 中，我们会通过 🤗 Transformers pipeline 使用模型，因此需要先安装一些依赖。这可以通过在仓库中创建 requirements.txt 文件并添加以下依赖完成：

transformers
torch

Spaces 运行时会自动安装这些依赖！

创建 Streamlit 应用​

要创建 Streamlit 应用，在仓库中新建一个名为 app.py 的文件，并添加以下代码：

import streamlit as st
from transformers import pipeline
from PIL import Image

pipeline = pipeline(task="image-classification", model="julien-c/hotdog-not-hotdog")

st.title("Hot Dog? Or Not?")

file_name = st.file_uploader("Upload a hot dog candidate image")

if file_name is not None:
    col1, col2 = st.columns(2)

    image = Image.open(file_name)
    col1.image(image, use_column_width=True)
    predictions = pipeline(image)

    col2.header("Probabilities")
    for p in predictions:
        col2.subheader(f"{ p['label'] }: { round(p['score'] * 100, 1)}%")

这个 Python 脚本使用 🤗 Transformers pipeline 加载 julien-c/hotdog-not-hotdog 模型，并通过 Streamlit 界面进行调用。该 Streamlit 应用会让你上传一张图片，然后将其分类为 hot dog 或 not hot dog。将代码保存到 app.py 后，打开 Space 的 App 标签页，就可以看到你的应用在运行了！

Hot Dog ClassifierHot Dog Classifier

将 Streamlit Space 嵌入到其他网页​

你可以使用 HTML <iframe> 标签，将 Streamlit Space 作为内嵌框架嵌入到其他网页中。只需将 Space 的 URL（以 .hf.space 结尾）填入 iframe 的 src。可以通过 Spaces 的 “Embed this Space” 按钮获取 Space 的 URL。

例如，上面的示例可以用下面的标签嵌入到文档中：

<iframe
  src="https://NimaBoscarino-hotdog-streamlit.hf.space?embed=true"
  title="My awesome Streamlit Space"
></iframe>

请注意，这里我们在 URL 后追加了 ?embed=true，用于激活 Streamlit 应用的嵌入模式，会移除部分留白和页脚，使嵌入效果更紧凑。

使用自动调整高度的 IFrame 嵌入 Streamlit Space​

自 1.17.0 起，Streamlit 支持自动调整 iframe 高度，使父级 iframe 的尺寸可随嵌入式 Streamlit 应用的内容高度自动变化。

该特性依赖 iFrame Resizer 库，你需要像下面示例一样额外添加几行代码：

  • 使用 id 为 <iframe /> 指定自动调整目标。
  • 通过 script 标签加载 iFrame Resizer。
  • 调用 iFrameResize() 并传入目标 iframe 的 ID，使其尺寸自动变化。

我们可以向 iFrameResize() 的第一个参数传入选项对象。详见该文档。

<iframe
	id="your-iframe-id"
	src="https://<space-subdomain>.hf.space"
	frameborder="0"
	width="850"
	height="450"
></iframe>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/iframeResizer.min.js"></script>
<script>
  iFrameResize({}, "#your-iframe-id")
</script>

你还可以查看 我们的文档。

Last updated on