Hub documentation
Streamlit Spaces
使用 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
torchSpaces 运行时将负责安装依赖项!
创建 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