本日重點

• 介紹 Hugging Face Spaces 雲端部署平台基本概念
• Gradio：打造互動式 AI Chatbot 的簡單流程
• 專案程式碼結構、介面元件設計與 Demo 展示
• 步驟實作：如何將自己的模型部署到 Hugging Face Spaces
• 經驗分享：部署遇到的問題與解決策略

一、認識 Hugging Face Spaces

Spaces 是 Hugging Face 官方推出的模型展示與互動平台，只需要幾個步驟，系統就會自動部署在雲端環境中。

簡單的說，就是：

1. 登入 Hugging Face 帳號
2. 建立一個新 Space（支援 Gradio、Streamlit、或 Static App）
3. 上傳 app.py 或 app.py + requirements.txt

(稍後會詳細說明操作步驟)

二、認識 Gradio

1. Gradio：最簡潔的 AI 前端框架

Gradio 是一個 Python 套件，專為機器學習模型設計的互動式介面框架。它支援文字、圖片、音訊、影片等多種輸入與輸出格式，並能與 TensorFlow、PyTorch、Transformers 等主流模型無縫整合。

優點包括：

• 內建網頁伺服器，無須額外設定
• 支援多種輸入/輸出類型（文字、圖片、音訊、影片等）
• 可直接整合 Hugging Face 模型與 Datasets

2. 為什麼選擇 Gradio？

主因是可直接在 Hugging Face Spaces 選用，方便公開分享作品

也可以考慮 Streamlit：

Streamlit 更像是一個「互動式報告框架」，適合需要控制介面佈局、圖表呈現與互動邏輯的情境。
可以將模型推論與數據分析結果融合在同一頁中，打造類似「AI Dashboard」的體驗。

常見的 Streamlit 應用情境：

• 展示模型訓練結果與圖表（例如：loss 曲線）
• 提供互動式輸入區，測試不同輸入下的模型反應
• 整合資料可視化工具（例如：Plotly、Altair、Matplotlib）

3. 怎麼註冊 Gradio 帳號？

因為 Gradio 有整合在 Hugging Face spaces 平台，所以註冊 Gradio 帳號，其實就是註冊 Hugging Face 帳號。

二、實作

示意流程圖

1. 註冊 Hugging Face 帳號

step 1. 前往 huggingface.co
step 2. 點選右上角的「Sign Up」
step 3. 可使用 Email 或 Google 帳號註冊（支援 Google、GitHub 快速登入）
step 4. 註冊後進入個人主頁，可以看到模型、數據集、Spaces、Docs 等功能

2. 搜尋營養相關的預訓練模型

• 點選上方的「模型」(Models)
  

• 在搜尋框輸入關鍵字，例如：“blenderbot” “dialoGPT” 或 “medical nutrition” 相關模型。

• 也可先測試 model hub demo，找到最適合的營養主題模型。

3. 新增一個 Space

step 1. 點選右上角「Create new Space」

step 2. 填好以下欄位（Space name 不能用中文喔！！）

step 3. 這次先選 Chatbot（想自己設計ＵＩ的請選 Blank）

...依個人需求做決定...

step 4. 最後記得按下「Create Space」

然後就會變成這樣（建立完畢後會進入類似 GitHub Repo 的介面）。

點開底下的「Addtional inputs」，設定好參數

紅色框線內可以輸入文字

4. 上傳 Gradio/Python 檔案

如果自己已經寫好專案，可直接在 Spaces UI 建立/編輯 app.py（Gradio 預設入口）。完成後記得按下「Commit」，就會自動生成公開網址。打開網址就能看到專屬自己的 Chatbot！！

提供一個簡單的程式碼範例（可以直接貼到 app.py）：

import gradio as gr
from transformers import pipeline

classifier = pipeline("text-classification", model="your-finetuned-model")

def predict(text):
    result = classifier(text)
    return f"分類結果：{result[0]['label']}（信心值：{result[0]['score']:.2f}）"

demo = gr.Interface(fn=predict, inputs="text", outputs="text", title="台灣美食文字分類器")
demo.launch()

三、小結

Hugging Face Spaces + Gradio，這兩大功能整合後，讓許多原本不會 Coding 的新手小白都能靠著 Low Code/No Code 的設計，實現自己的想法。

明天再繼續 (Hugging Face Spaces 的進階應用)

四、延伸閱讀

• Hugging Face Spaces 官方教學
• Gradio 官方文件
• Using Hugging Face Integrations