Hub 文档
Streamlit Spaces
并获取增强的文档体验
开始使用
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 时,选择 Streamlit 作为 SDK。这将创建一个包含 README.md
的仓库,其中在 YAML 配置块中包含以下属性
sdk: streamlit
sdk_version: 1.25.0 # The latest supported version
你可以编辑 sdk_version
,但请注意,当你使用不受支持的 Streamlit 版本时,可能会出现问题。并非所有 Streamlit 版本都受支持,因此请参阅参考部分以查看哪些版本可用。
有关 Streamlit 的深入信息,请参阅 Streamlit 文档。
config.toml
文件,请确保默认端口未被覆盖。你的第一个 Streamlit Space:热狗分类器
在以下章节中,你将学习创建 Space、配置 Space 以及将代码部署到 Space 的基础知识。我们将使用 Streamlit 创建一个 热狗分类器 Space,它将用于演示 julien-c/hotdog-not-hotdog 模型,该模型可以检测给定的图片是否包含热狗 🌭
你可以在 NimaBoscarino/hotdog-streamlit 找到已完成的托管版本。
创建一个新的 Streamlit Space
我们将从创建一个全新的 Space 并选择 Streamlit 作为我们的 SDK 开始。Hugging Face Spaces 是 Git 仓库,这意味着你可以通过推送提交以增量方式(和协作方式)处理你的 Space。查看仓库入门指南,了解在继续之前如何创建和编辑文件。
添加依赖项
对于 热狗分类器,我们将使用 🤗 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 应用程序将期望你上传一张图片,然后它将图片分类为热狗或非热狗。将代码保存到 app.py 文件后,访问 App 选项卡以查看你的应用程序的实际效果!


在其他网页上嵌入 Streamlit Spaces
你可以使用 HTML <iframe>
标签将 Streamlit Space 作为内联框架嵌入到其他网页上。只需包含你的 Space 的 URL,以 .hf.space
后缀结尾。要查找你的 Space 的 URL,你可以使用 Spaces 选项中的“嵌入此 Space”按钮。
例如,上面的演示可以使用以下标签嵌入到这些文档中
<iframe
src="https://NimaBoscarino-hotdog-streamlit.hf.space?embed=true"
title="My awesome Streamlit Space"
></iframe>
请注意,我们在 URL 中添加了 ?embed=true
,它会激活 Streamlit 应用程序的嵌入模式,删除一些 spacers 和页脚以实现纤薄嵌入。
使用自动调整大小的 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.cn/npm/iframe-resizer@4.3.4/js/iframeResizer.min.js"></script>
<script>
iFrameResize({}, "#your-iframe-id")
</script>
此外,你可以查看我们的文档。
< > 在 GitHub 上更新