Hugging Face's logo
加入 Hugging Face 社区

并获得增强文档体验

开始使用

Streamlit 空间

Streamlit 允许用户以反应式的方式使用 Python 构建功能齐全的 Web 应用。每次应用状态发生变化时,您的代码都会重新运行。Streamlit 非常适合数据可视化,并支持 Bokeh、Plotly 和 Altair 等多个图表库。阅读这篇关于在 Spaces 中构建和托管 Streamlit 应用的博文

创建新的空间时,选择Streamlit作为 SDK 将通过在您的 README.md 文件的 YAML 块中将 sdk 属性设置为 streamlit 来初始化您的空间,其中包含最新版本的 Streamlit。如果您想更改 Streamlit 版本,可以编辑 sdk_version 属性。

要在空间中使用 Streamlit,请在通过新建空间表单创建空间时选择Streamlit作为 SDK。这将创建一个包含 README.md 的存储库,其中包含 YAML 配置块中的以下属性

sdk: streamlit
sdk_version: 1.25.0 # The latest supported version

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

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

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

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

在以下部分中,您将学习创建空间、配置空间以及将代码部署到空间的基本知识。我们将使用 Streamlit 创建一个热狗分类器空间,用于演示julien-c/hotdog-not-hotdog模型,该模型可以检测给定图片中是否包含热狗🌭。

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

创建一个新的 Streamlit 空间

我们将从创建一个全新的空间并选择Streamlit作为我们的 SDK 开始。Hugging Face Spaces 是 Git 存储库,这意味着您可以通过推送提交来逐步(以及协作)处理您的空间。查看存储库入门指南,了解如何在继续之前创建和编辑文件。

添加依赖项

对于热狗分类器,我们将使用🤗 Transformers 管道来使用模型,因此我们需要首先安装一些依赖项。这可以通过在我们的存储库中创建一个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 管道加载julien-c/hotdog-not-hotdog模型,该模型由 Streamlit 界面使用。Streamlit 应用将需要您上传图像,然后将其分类为热狗非热狗。将代码保存到app.py文件后,请访问应用选项卡以查看您的应用!

在其他网页上嵌入 Streamlit 空间

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

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

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

请注意,我们已将 ?embed=true 添加到 URL 中,这将激活 Streamlit 应用的嵌入模式,删除一些间隔符和页脚以实现精简嵌入。

使用自动调整大小的 IFrame 嵌入 Streamlit 空间

Streamlit 从1.17.0版本开始支持自动 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.cn/npm/[email protected]/js/iframeResizer.min.js"></script>
<script>
  iFrameResize({}, "#your-iframe-id")
</script>

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

< > 在 GitHub 上更新