4️⃣ 進階功能（Blocks API）

🎯 為什麼要使用 gr.Blocks()？

Gradio 的 gr.Interface() 適合簡單應用，但如果需要 更靈活的 UI 設計、動態互動、多欄排版，gr.Blocks() 是更好的選擇。

🔹 gr.Blocks() 的特點

✅ 支援 自訂 UI 結構（按鈕、欄位、輸入框）

✅ 可建立 多個輸入與輸出組合

✅ 適用於 多步驟流程與動態介面

---

🎯 gr.Blocks() 基本結構

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("# 這是 Gradio Blocks")
    textbox = gr.Textbox(label="輸入文字")
    button = gr.Button("提交")
    output = gr.Textbox(label="輸出結果")

    button.click(fn=lambda x: f"你輸入了 {x}", inputs=textbox, outputs=output)

demo.launch()

✅ 這個程式碼的功能：

1. 建立標題 gr.Markdown()
2. 加入輸入框 gr.Textbox()
3. 加入按鈕 gr.Button()
4. 設定點擊按鈕後執行的函式
5. 顯示結果 gr.Textbox()

---

🎯 多欄式排版

gr.Row() 和 gr.Column() 讓你輕鬆建立多欄排版。

🔹 兩欄並排範例

with gr.Blocks() as demo:
    with gr.Row():
        input_text = gr.Textbox(label="輸入")
        output_text = gr.Textbox(label="輸出")
    button = gr.Button("轉換")
    button.click(fn=lambda x: x.upper(), inputs=input_text, outputs=output_text)

demo.launch()

✅ 效果：輸入框與輸出框並排，按下按鈕後將輸入轉為大寫。

---

🎯 多步驟互動

gr.Blocks() 允許建立 多個按鈕 來控制不同的操作。

🔹 兩個按鈕，執行不同的函式

def to_uppercase(text):
    return text.upper()

def to_lowercase(text):
    return text.lower()

with gr.Blocks() as demo:
    text_input = gr.Textbox(label="輸入文字")
    upper_button = gr.Button("轉大寫")
    lower_button = gr.Button("轉小寫")
    output = gr.Textbox(label="輸出結果")

    upper_button.click(fn=to_uppercase, inputs=text_input, outputs=output)
    lower_button.click(fn=to_lowercase, inputs=text_input, outputs=output)

demo.launch()

✅ 效果：

• 按「轉大寫」會把輸入轉成大寫
• 按「轉小寫」會把輸入轉成小寫

---

🎯 圖片與文字混合介面

可以讓使用者上傳圖片並輸入文字，Gradio 會同時顯示兩者。

🔹 圖片與文字輸入範例

with gr.Blocks() as demo:
    with gr.Row():
        img_input = gr.Image()
        text_input = gr.Textbox(label="輸入文字")
    submit_button = gr.Button("提交")
    output_text = gr.Textbox(label="輸出結果")

    submit_button.click(fn=lambda x, y: f"你輸入了 {y}", inputs=[img_input, text_input], outputs=output_text)

demo.launch()

✅ 效果：上傳圖片並輸入文字，按下按鈕後顯示輸入的文字。

---

📌 總結

功能	語法
建立 Blocks 應用	with gr.Blocks() as demo:
Markdown 標題	gr.Markdown("# 標題")
按鈕互動	button.click(fn, inputs, outputs)
多欄排版	with gr.Row(): ... 或 with gr.Column(): ...
多步驟按鈕	button1.click(fn1, inputs, outputs) & button2.click(fn2, inputs, outputs)
圖片與文字輸入	gr.Image() + gr.Textbox()

🚀 現在你已經學會如何使用 Blocks API 來建立更靈活的 UI，接下來我們將學習如何與機器學習模型整合！ 😊