昨天天講了 Building 跟 Layout 的元件，那想必要有功能元件才能增強使用者體驗

今天來補充昨天尚未講完的主題，Component 吧！

Gradio 提供了許多現成的元件，例如文字輸入框、按鈕、下拉選單、圖片元件等，幾乎涵蓋了常見的網頁互動需求。截至 2025/9/18 今天的最新版本， Gradio 共有 46 個元件可以使用

先來一張 Button 元件可以調整的參數：

基本上裡面的參數名稱標示的很清楚，如 value 是修改按鈕上顯示的文字，size 是調整按鈕在網頁上的大小等等，基本上可以參考每個元件底下的 Initialization 段落的參數去做調整

(點開可以看到這個參數所代表的意思)

這邊講講最常用的參數：

• value：參數用來設定元件的「初始狀態」。
  • 在 Textbox 中顯示的預設文字。
  • 在 Dropdown 中預設設定 choices 裡面的選項。
  • 在 radio 中預設設定 choices 裡面的選項。
  • 在 chatbot 中顯示像 ChatGPT 的那樣有 GPT 與使用者的對話泡泡
• choices：常出現在 Radio 與 Dropdown 等元件，其代表在元件裡面可以選擇的選項
• label：用來顯示該元件的標題 (有點像大標)
• info：用來顯示該元件的註釋 (有點像小標)
• interactive：設定元件是否可以互動或者輸入
• visible：設定元件的狀態為顯示或隱藏
• elem_id：設定渲染在 HTML 時設定的 id
• elem_classes：設定渲染在 HTML 時設定的 class (可設定多個)

以上是參數設定的說明，再來是與元件互動的監聽器

如其名，可以監聽使用者對元件的互動事件，並且觸發 Python 函式，這邊以 Textbox 來做講解

• .change()：當輸入框有變動時觸發
• .input()：當使用者對著輸入框輸入文字時時觸發
• .select()：當使用者點擊輸入框時觸發
• .submit()：當使用者對著輸入框按下鍵盤的 enter 鍵時觸發
• .focus()：當使用者的點擊輸入框時觸發
• .blur()：當使用者的焦點不在輸入框時觸發
• .stop()：(假的)
• .copy()：使用者複製的事件，並且可以在函式中加入 gr.CopyData 取得使用者複製的文字觸發

這邊要注意像是 change 與 input 的差別是，當我今天使用 Javascript 去修改 Textbox 裡面的數值時，change 會觸發而 input 不會，因為他不時使用者透過鍵盤輸入，反之今天使用者如果用鍵盤輸入文字時，change 與 input 都會觸發

以上原理一樣可以套用在 Dropdown 與 Radio 元件的 change 與 select 事件

這邊一樣講解幾個最常用的參數：

• fn -> 監聽器觸發時會執行的函式
• inputs -> 監聽器觸發時會帶入函式的參數 (可以認知為 inputs 有幾個元件，fn 就會有多少個參數)
• outputs -> 監聽器觸發的「過程中」可以更新元件的狀態
• js -> 執行函式前會觸發的 Javascript 程式碼
• api_description -> 函式的註解，可用於註記或者 MCP 用 (也可以替代寫在 function 裡面)
• validator -> 執行函式前會觸發的函式 (可用於數值檢查，或者驗證身份等等情境)

every 已捨棄！！

由於 Gradio 撰寫監聽器是使用生成器去接函式回傳的資料，這也是為什麼可以在函式執行到一半的時候回傳狀態到網頁上，以下是一個監聽器的範例

import time
import gradio as gr

def update_textbox_text():
    yield gr.update(value="Hello")
    time.sleep(5)
    yield gr.update(value="World!!")

with gr.Blocks() as demo:
    textbox = gr.Textbox()
    button = gr.Button()
    
    button.click(
        update_textbox_text,
        outputs=[textbox]
    )
    
demo.launch()

當我們點下按鈕時，他會更新 "Hello" 的文字到 textbox 的欄位輸入框上，再來經過 5 秒過後會更新 "World!!" 的文字到 textbox 的欄位輸入框上

參考資料來源

• https://github.com/gradio-app/gradio/issues/9186#issuecomment-2345249662