將 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 來初始化您的 Space，使其使用最新版本的 Streamlit。如果您想更改 Streamlit 版本，可以編輯 sdk_version 屬性。

要在 Space 中使用 Streamlit，請透過新建 Space 表單建立 Space 時，選擇 Streamlit 作為 SDK。這將建立一個包含以下 YAML 配置塊屬性的 README.md 倉庫。

sdk: streamlit
sdk_version: 1.25.0 # The latest supported version

您可以編輯 sdk_version，但請注意，使用不受支援的 Streamlit 版本可能會出現問題。並非所有 Streamlit 版本都受支援，請參閱參考部分以檢視哪些版本可用。

有關 Streamlit 的深入資訊，請參閱 Streamlit 文件。

您的第一個 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 應用程式的嵌入模式，移除一些間隔和頁尾以實現簡潔嵌入。

使用自動調整大小的 iframe 嵌入 Streamlit Spaces

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/npm/iframe-resizer@4.3.4/js/iframeResizer.min.js"></script>
<script>
  iFrameResize({}, "#your-iframe-id")
</script>

此外，您可以檢視我們的文件。