Hub documentation

Streamlit Spaces

Hugging Face's logo
Join the Hugging Face community

and get access to the augmented documentation experience

to get started

使用 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,请通过新建 Space表单创建 Space 时,将 SDK 选择为Streamlit。这将创建一个包含README.md的仓库,其中 YAML 配置块包含以下属性:

sdk: streamlit
sdk_version: 1.25.0 # The latest supported version

您可以编辑 sdk_version,但请注意,使用不受支持的 Streamlit 版本时可能会出现问题。并非所有 Streamlit 版本都受支持,请参阅 参考部分 了解可用的版本。

有关 Streamlit 的详细信息,请参阅 Streamlit 文档。

Streamlit Spaces 仅允许使用 8501 端口(默认端口)。因此,如果您为 Space 提供了 config.toml 文件,请确保未覆盖默认端口。

您的第一个 Streamlit Space:热狗分类器

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

您可以在 NimaBoscarino/hotdog-streamlit 找到此项目的完整版本。

创建新的 Streamlit Space

我们将首先创建一个全新的 Space,并选择Streamlit作为我们的 SDK。Hugging Face Spaces 是 Git 仓库,这意味着你可以通过推送提交来逐步(且协作地)开发你的 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 文件后,访问 App 标签页即可查看你的应用运行效果!

在其他网页中嵌入 Streamlit Spaces

你可以使用 HTML <iframe> 标签将 Streamlit Space 作为内联框架嵌入到其他网页中。只需包含以 .hf.space 后缀结尾的 Space URL 即可。要查找你的 Space URL,可以使用 Spaces 选项中的“Embed this Space”按钮。

例如,上面的演示可以通过以下标签嵌入到这些文档中:

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

请注意,我们在 URL 中添加了 ?embed=true,这会激活 Streamlit 应用的嵌入模式,移除部分间距和页脚,以实现更紧凑的嵌入效果。

使用自动调整大小的 IFrames 嵌入 Streamlit Spaces

自 1.17.0 版本起,Streamlit 支持自动调整 iframe 大小,以便父级 iframe 的尺寸能根据嵌入的 Streamlit 应用的内容量自动适配。

它依赖于 iFrame Resizer 库,你需要添加几行代码,如下面的示例所示

  • id 被设置为 <iframe />,用于指定自动调整大小的目标。
  • iFrame Resizer 通过 script 标签加载。
  • 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/iframe-resizer@4.3.4/js/iframeResizer.min.js"></script>
<script>
  iFrameResize({}, "#your-iframe-id")
</script>

此外,您可以查阅我们的文档。

Update on GitHub