3️⃣ 介面設計（Interface）

🎯 Gradio Interface 基本介紹

Gradio 的核心功能之一是 gr.Interface()，它能讓你輕鬆建立 Web 介面，並支援多種輸入與輸出格式。

🔹 gr.Interface() 基本結構

gr.Interface(
    fn,        # 處理函式
    inputs,    # 使用者輸入類型
    outputs,   # 輸出結果類型
    title,     # （可選）應用標題
    description # （可選）應用描述
).launch()

✅ 關鍵參數說明：

• fn：處理函式，定義應用的行為（例如數字計算、圖片處理等）。
• inputs：定義輸入類型，如文字、數字、圖片等。
• outputs：定義輸出類型，如文字、數字、圖片等。
• title / description：可選參數，用於設定介面的標題與描述。

---

🎯 文字輸入與輸出

Gradio 支援基本的文字輸入與輸出，適用於簡單的聊天機器人或文字處理應用。

🔹 文字處理範例

import gradio as gr

def reverse_text(text):
    return text[::-1]

gr.Interface(fn=reverse_text, inputs="text", outputs="text", title="文字反轉應用").launch()

✅ 效果：使用者輸入 hello，Gradio 會輸出 olleh。

---

🎯 數字輸入與計算應用

Gradio 可以處理數字輸入與數學運算。

🔹 計算平方範例

def square(num):
    return num ** 2

gr.Interface(fn=square, inputs="number", outputs="number", title="計算平方").launch()

✅ 效果：輸入 4，輸出 16。

---

🎯 圖片處理應用

Gradio 內建圖片支援，適用於機器學習與影像處理。

🔹 圖片轉灰階

from PIL import Image

def process_image(img):
    return img.convert("L")  # 轉換為灰階

gr.Interface(fn=process_image, inputs="image", outputs="image", title="灰階圖片轉換").launch()

✅ 效果：使用者上傳圖片後，系統返回灰階版本。

---

🎯 多輸入與多輸出應用

Gradio 支援多種輸入輸出，適用於更複雜的應用。

🔹 計算 BMI（身體質量指數）

def bmi(weight, height):
    bmi_value = weight / (height ** 2)
    return f"你的 BMI 是 {bmi_value:.2f}"

gr.Interface(fn=bmi, inputs=["number", "number"], outputs="text", title="BMI 計算機").launch()

✅ 效果：輸入體重與身高，計算 BMI 值。

---

📌 總結

功能	語法
建立 Interface	gr.Interface(fn, inputs, outputs).launch()
文字處理	inputs="text"，outputs="text"
數字計算	inputs="number"，outputs="number"
圖片處理	inputs="image"，outputs="image"
多輸入/多輸出	inputs=["number", "number"]

🚀 現在你已經學會如何設計 Gradio 介面，接下來我們將學習更進階的 Blocks API，來建立更靈活的 UI！ 😊