將 Streamlit 作為 Spaces 預設內建 SDK 的選項已被棄用。若您希望部署一個 Streamlit Space，請選擇 Docker SDK，然後使用 Streamlit 模板。

Streamlit Spaces

Streamlit 讓使用者能以響應式的方式，透過 Python 自由建構功能完整的網路應用程式。每當應用程式的狀態發生變化時，您的程式碼就會重新執行。Streamlit 也非常適合資料視覺化，並支援多種圖表庫，例如 Bokeh、Plotly 和 Altair。請閱讀這篇關於如何在 Spaces 中建構與託管 Streamlit 應用程式的 部落格文章。

在 建立新 Space 時選擇 Streamlit 作為 SDK，將透過在 README.md 檔案的 YAML 區塊中將 sdk 屬性設定為 streamlit，來初始化您的 Space 並使用最新版本的 Streamlit。如果您想更改 Streamlit 版本，可以編輯 sdk_version 屬性。

若要在 Space 中使用 Streamlit，請在透過 New Space (建立新空間) 表單 建立 Space 時，選擇 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 連接埠（預設連接埠）。因此，如果您為您的 Space 提供了 config.toml 檔案，請確保預設連接埠未被覆寫。

您的第一個 Streamlit Space：熱狗分類器

在接下來的章節中，您將了解建立 Space、進行設定以及將程式碼部署到其中的基礎知識。我們將使用 Streamlit 建立一個 熱狗分類器 (Hot Dog Classifier) Space，用於展示 julien-c/hotdog-not-hotdog 模型，該模型可以偵測給定的圖片是否包含熱狗 🌭

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

建立一個新的 Streamlit Space

我們將從 建立一個全新的 Space 並選擇 Streamlit 作為 SDK 開始。Hugging Face Spaces 是 Git 儲存庫，這意味著您可以透過推送提交 (commits) 來逐步（且協作地）處理您的 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 來載入 Streamlit 介面所使用的 julien-c/hotdog-not-hotdog 模型。此 Streamlit 應用程式將要求您上傳一張圖片，隨後會將其分類為 熱狗 或 不是熱狗。將程式碼儲存到 app.py 檔案後，請前往 App 頁籤查看您的應用程式運作！

在其他網頁中嵌入 Streamlit Spaces

您可以使用 HTML 的 <iframe> 標籤將 Streamlit Space 作為內嵌框架嵌入其他網頁中。只需包含您的 Space 網址，並以 .hf.space 後綴結尾即可。若要尋找您 Space 的網址，可以使用 Spaces 選項中的「Embed this Space (嵌入此空間)」按鈕。

例如，上面的演示可以透過以下標籤嵌入到這些文件中

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

請注意，我們在網址中添加了 ?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>

此外，您可以查看 我們的說明文件。