【教學-Gradio】在Spaces 打造你的第一個 Gradio AI 應用程式-Blank

更新 發佈閱讀 5 分鐘
raw-image

🚀 為什麼選擇 Hugging Face Spaces 與 Gradio?

Hugging Face Spaces 是一個強大的雲端託管平台,讓開發者能免費部署機器學習模型與網頁應用。而 Gradio 則是目前最受歡迎的 Python 函式庫之一,它能讓你只用幾行程式碼,就為 AI 模型穿上一層漂亮的網頁外衣。

當你在建立 Space 時選擇了 "Blank" 模板,這代表你有完全的自主權來設計你的應用程式。以下是詳細的操作流程。


一、 快速入門:直接在瀏覽器編輯

這是最快的方式,不需要安裝任何開發工具即可完成:

  1. 進入 Space 頁面:在你的 Space 頂部選單點擊 "Files and versions"
  2. 建立主程式:點擊 "Add file" -> "Create a new file",將檔名命名為 app.py
  3. 貼上程式碼:將下方的範例程式碼複製進去。
  4. 儲存部署:點擊底部的 "Commit new file to main"。系統會自動偵測並開始 Building(編譯)。

二、 核心程式碼範例:app.py

這是你的應用程式「大腦」,負責處理邏輯與介面顯示。請將以下內容放入 app.py 中:

import gradio as gr

# 定義你的後端處理邏輯
def ai_assistant(text):
if not text:
return "請輸入一些內容..."
return f"【系統回應】: 您輸入了「{text}」,這是一個很棒的主題!"

# 使用 Gradio Blocks 構建介面
with gr.Blocks(theme=gr.themes.Soft()) as demo:
gr.Markdown("# 🚀 我的第一個 AI 助手")
gr.Markdown("這是一個建立在 Hugging Face 上的範例程式。")

with gr.Row():
input_box = gr.Textbox(label="輸入區", placeholder="在這邊輸入文字...")
output_box = gr.Textbox(label="輸出區")

submit_btn = gr.Button("開始執行")

# 綁定按鈕點擊事件
submit_btn.click(fn=ai_assistant, inputs=input_box, outputs=output_box)

# 啟動應用
if __name__ == "__main__":
demo.launch()

三、 關鍵設定:README.md

在 Hugging Face 中,README.md 不僅是說明書,更是 Space 的設定檔。它最上方的 YAML 內容決定了硬體環境與啟動路徑。

請編輯你的 README.md,並參考以下格式:

1. 設定區塊 (Metadata):

  • title: 你的 Space 顯示名稱
  • emoji: 顯示的小圖示 (例如 🚀)
  • sdk: 務必填寫 gradio
  • app_file: 入口檔案名稱,填寫 app.py
  • license: 授權協議 (如 mit)

2. 說明文字區塊: 你可以在設定區塊下方撰寫 Markdown 內容,向使用者介紹你的專案背景、如何使用以及開發日誌。


四、 進階設定與注意事項

當你的應用程式變得更複雜時,請記得以下幾點:

  • 套件管理:如果程式碼中用到了 requestspandas 等額外套件,請建立一個 requirements.txt 檔案,逐行寫下套件名稱。
  • 隱私與金鑰:如果你需要串接 OpenAI 等 API,請不要把 API Key 直接寫在程式碼裡。請到 Space 的 "Settings" -> "Variables and secrets" 進行設定,並在程式碼中以 os.getenv 讀取。
  • 硬體限制:免費版的 Spaces 提供基礎 CPU 與 16GB RAM。若要運行大型 LLM,建議使用 API 串接方式或考慮升級 GPU 硬體。

結語

透過 Hugging Face 與 Gradio 的結合,從想法到成品的距離縮短到了僅需幾分鐘。這不只是一個展示作品的平台,更是與全球開發者交流創意的絕佳途徑。

留言
avatar-img
Josh的沙龍
10會員
102內容數
分享知識
你可能也想看
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
我想要一天分享一點「LLM從底層堆疊的技術」,並且每篇文章長度控制在三分鐘以內,讓大家不會壓力太大,但是又能夠每天成長一點。 建議先進入 HuggingFace Meta Llama 頁面:https://huggingface.co/meta-llama 程式為: !pip inst
Thumbnail
我想要一天分享一點「LLM從底層堆疊的技術」,並且每篇文章長度控制在三分鐘以內,讓大家不會壓力太大,但是又能夠每天成長一點。 建議先進入 HuggingFace Meta Llama 頁面:https://huggingface.co/meta-llama 程式為: !pip inst
Thumbnail
AI 社群中的知名平臺,專注於自然語言處理 (NLP) 模型,特別是 Transformer。它提供開源資源、豐富的模型庫和友善的開發者體驗,讓研究者和開發者能輕易地取得和使用 AI 模型。活躍的社群促進了知識分享與合作,使 Hugging Face 成為 AI 開發者的重要工具。
Thumbnail
AI 社群中的知名平臺,專注於自然語言處理 (NLP) 模型,特別是 Transformer。它提供開源資源、豐富的模型庫和友善的開發者體驗,讓研究者和開發者能輕易地取得和使用 AI 模型。活躍的社群促進了知識分享與合作,使 Hugging Face 成為 AI 開發者的重要工具。
Thumbnail
本文帶你三分鐘內跑通"文字生圖片"的網頁APP,使用最頂尖生成技術,LCM-Lora-SDXL模型,能夠在短時間內生成符合文字描述的高解析圖片。屬於免費開源模型(License Link),請不要產生有害內容,進行合理的使用。
Thumbnail
本文帶你三分鐘內跑通"文字生圖片"的網頁APP,使用最頂尖生成技術,LCM-Lora-SDXL模型,能夠在短時間內生成符合文字描述的高解析圖片。屬於免費開源模型(License Link),請不要產生有害內容,進行合理的使用。
Thumbnail
相信替影片配字幕是許多人心中的痛,本文帶你在三分鐘內能夠用你的電腦,寫出一個使用AI將聲音轉成字幕srt檔案的互動操作網頁,可以連接麥克風測試,也可以上傳聲音檔案或是MP3來測試。目前的多國語言版本,能自動辨別語言,不用特別指定,經實測,中英文混雜也能夠正確輸出。
Thumbnail
相信替影片配字幕是許多人心中的痛,本文帶你在三分鐘內能夠用你的電腦,寫出一個使用AI將聲音轉成字幕srt檔案的互動操作網頁,可以連接麥克風測試,也可以上傳聲音檔案或是MP3來測試。目前的多國語言版本,能自動辨別語言,不用特別指定,經實測,中英文混雜也能夠正確輸出。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News