如何在 Hugging Face Spaces 平台佈署 Streamlit 網頁應用程式

在前一篇測試中我們利用 Streamlit 在本機建構了一個 web app 讓使用者輸入 OpenAI 金鑰與提示詞呼叫 Image API 來生圖, 參考 :

# OpenAI API 學習筆記 : 呼叫 Image API 生圖 (三)

本篇旨在將此 web app 佈署至 Hugging Face Spaces 平台上, 作法參考 :

# 如何在 Hugging Face Spaces 平台佈署 Gradio 網頁應用程式

首先登入 Hugging Face Spaces 平台 : 

# https://huggingface.co/spaces  

按右上角的 "+New Space" 鈕 : 

輸入空間名稱, 描述, 授權方式等欄位, 點選 Gradio SDK (之前有 Streamlit SDK 可選, 但最近被拿掉, 有可能是改版或維護而暫時下架, 故此處先用 Gradio SDK, 後續再修改 README.md 等設定), 按底下的 "Create Space" 鈕建立空間 : 

按右上角的 "File" 顯示檔案列表 :

點選 README.md 檔案 :

因為建立空間時點選 Gradio SDK, 故裡面的設定為 Gradio 的版本, 按 "Edit" 鈕進入編輯頁面 : 

將其中 SDK 改為 Streamlit 的版本 :

sdk: streamlit  

sdk_version: 1.35.0  

app_file: app.py  

改好後按左下角的 "Commit changes to main" 鈕提交更新 : 

更新結果頁面出現一個提示, 說 Streamlit 有更新的 v1.46.1 可用, 所以再次按 'edit' 修改版本 : 

改好後同樣按左下角的 "Commit changes to main" 鈕提交更新. 

按 main 後面的空間名稱回到檔案列表頁 :

按右上角 "+Contribute" 鈕點選彈出選單的 "Create a new file" : 

在上方文字框輸入 app.py (這是預設應用程式名稱), 然後將 web app 程式 streamlit_openai_image_api_test_1.py 貼到下方 Edit 輸入框裡面後, 按左下角的 "Commit changes to main" 鈕提交建立檔案 : 

  

同樣按 main 後面的空間名稱回到檔案列表頁, 可見 app.py 已在列表中. 因為此 web app 有用到 Hugging Face Spaces 平台沒有預先安裝的第三方套件 openai, 必須新增一個 requirements.txt 將 openai 列在裡面讓平台去安裝, 按右邊 "+Contribute" 鈕點選彈出選單的 "Create a new file" : 

在上方文字框輸入 requirements.txt, 在下方 Edit 文字框輸入 openai, 按左下角的 "Commit changes to main" 鈕提交建立檔案 : 

這樣就完成全部設定了 (Streamlit 不用列在 requirements.txt 裡面, 因為 Hugging Face Spaces 本身有預先安裝), 按 Spaces 後面的空間名稱即可執行此 web app :

結果如下 :

等 Hugging Face Spaces 平台重新將 Streamlit SDK 上架就不需要去修改 README.md 檔了.