在前一篇測試中以 3 個範例展示了 Gradio 常用輸出入元件的基本用法, 本篇則要對這些輸出入元件做一個綜合測試.
七. 基本輸出入元件測試 :
以下分別測試 8 個基本的 Gradio 元件的用法.
1. Textbox 元件 :
Textbox 元件是輸出入兩用元件, 當輸入元件用時預設是讓使用者輸入資料的單列輸入框 (也可以用 lines 參數指定顯示之列數而變成多列輸入框), 預設以明碼顯示所輸入的內容 (type 參數預設值為 'text'), 若要遮蔽輸入內容可傳入 type='password' 參數. 如果不傳入 label 參數的話預設會使用變數名稱當輸入框標籤.
Textbox 元件當輸出元件用時用來顯示程式執行結果, 如果不傳入 label 參數的話預設會使用 output0, output1, ... 當輸出框標籤 (所以最好是設 label 參數較好).
測試程式碼如下 :
import gradio as gr
def handler(in1, in2):
return in1, in2
in1=gr.Textbox(label='多行輸入', lines=3, placeholder='請輸入內容')
in2=gr.Textbox(label='密碼輸入', type='password')
out1=gr.Textbox(lines=3)
out2=gr.Textbox(label='密碼內容')
iface=gr.Interface(
fn=handler,
inputs=[in1, in2],
outputs=[out1, out2],
title='Textbox 元件測試',
allow_flagging='never',
)
iface.launch()
此例設置了兩個 Textbox 輸入框 in1, in2 與對應用來顯示其內容的兩個 Texbox 輸出框 out1, out2. 其中 in1 用 line=3 參數指定為顯示 3 列高度, 而 in2 則無, 因此是預設的單列輸入框, 但 in2 傳入 type='password' 參數, 使得輸入內容會被遮蔽. 輸出框 out1 未指定 label 參數預設標籤是 output0, 而 out2 有指定故顯示標籤 '密碼內容'.
Submit 鈕之按鈕事件處理函式 handler() 不做任何處理直接將輸入框的值傳回給兩個輸出框顯示, 結果如下 :
可見指定 lines=3 只是預設顯示幾列, 並非只能輸入 3 列, 事實上可輸入之列數並不受限制, 當輸入之資料超出 lines 指定之列數時會自動往下擴增列數. 此例程式碼放在 Hugging Face Space :
#
https://huggingface.co/spaces/tony1966/gradio_textbox_test_1
2. TextArea 元件 :
TextArea 與 Textbox 一樣都是輸出入兩用的元件, 可輸入或顯示純文字資料, 兩者差別在於 Textbox 用來輸入或顯示短文本, 而 TextArea 則是用來輸入或顯示長文本, 例如程式碼或提示詞等. 雖然 Textbox 設定 lines 參數時也可以像 TextArea 那樣輸入多列資料, 但 Textbox 適用場景主要是單列或多列短文本, TexArea 則用於長文本.
TextArea 可以用 lines 參數設定預設顯示列數 (與 Textbox 一樣), 當輸入列數超過 lines 設定值時 Textbox 與 TextArea 輸入框都會往下增加高度; 但 TextArea 有一個 max_lines 參數可以設定最大顯示列數, 當輸入超過此設定值時就不會繼續往下增加顯示列數 (高度上限), 但資料還是可以繼續輸入. Textbox 無此參數可用, 所以會不斷往下增高.
測試程式碼如下 :
import gradio as gr
def handler(in1, in2):
return in1, in2
in1=gr.TextArea(label='多列輸入 1', lines=3, placeholder='請輸入內容')
in2=gr.TextArea(label='多列輸入 2', max_lines=10)
out1=gr.TextArea(label='多列輸出 1')
out2=gr.TextArea(label='多列輸出 2')
iface=gr.Interface(
fn=handler,
inputs=[in1, in2],
outputs=[out1, out2],
title='TextArea 元件測試',
allow_flagging='never',
)
iface.launch()
此例設置了兩個 TextArea 輸入框 in1, in2 與對應用來顯示其內容的兩個 TexArea 輸出框 out1, out2. 其中 in1 用 line=3 參數指定初始高度為顯示 3 列, in2 則未使用指定 lines 參數, 而是使用 max_lines=10 限制最高顯示 10 列資料, 所以剛開始時 in1 高度是 3, 而 in2 是 7 :
然後於 in1 與 in2 輸入資料, 可知在 in1 當輸入超過 3 列時高度會自動往下不斷增加, in2 輸入超過 7 列時也是往下增加高度, 但超過 max_lines=10 列時就固定顯示 10 列而不再增加高度 :
輸出結果如下 :
可見 lines 與 max_lines 其實是用來設定顯示高度而已, lines 設定初始高度, 而 max_lines 設定最大高度, 沒有設 max_lines 的話輸入多少列舅顯示多少列.
此例程式碼放在 Hugging Face Space :
3. Number 元件 :
Number 元件也是輸出入均可, 用來輸入或顯示純數值資料 (整數與浮點數), 它除了有一個輸入框外, 右端還有上下鍵可以上調與下調數值, 不過它不提供 step 參數, 步階固定是 1, 所以這只能用來調整整數輸入, 浮點數需直接在輸入框中輸入. value 參數可用來設定初始值, 而 minimum 與 maximum 參數則用來設定可輸入之最小值與最大值.
測試程式碼如下 :
import gradio as gr
def handler(in1, in2):
return in1, in2
in1=gr.Number(label='數值輸入 1')
in2=gr.Number(label='數值輸入 2', minimum=0, value=5, maximum=10)
out1=gr.Number(label='數值輸出 1')
out2=gr.Number(label='數值輸出 2')
iface=gr.Interface(
fn=handler,
inputs=[in1, in2],
outputs=[out1, out2],
title='Number 元件測試',
allow_flagging='never',
)
iface.launch()
此例設置了兩個 Number 輸入框 in1, in2 與對應用來顯示其內容的兩個 Number 輸出框 out1, out2. 其中 in1 未指定 value, minumum, 與 maximum 參數, 因此預設值是 0, 且輸入值不受限; 而 in2 則是用 value 參數指定初始值為 5, 用 minimum 與 maximum 參數設定值區間為 0~10 :
可見 in2 的輸入值被限制在 0~10, 而 in1 則不受限 :
此例程式碼放在 Hugging Face Space :
4. Slider 元件 :
Slider 元件外觀是一個滑桿, 透過拉曳來設定數值輸入, 它只能用做輸入元件, 不能作為輸出元件. 除了共通參數 label 外, 其他參數如下 :
- value : 設定初始值 (預設為 0)
- minimum : 指定滑桿的下限 (輸入之最小值, 預設 0)
- maximum : 指定滑桿的上限 (輸入之最大值, 預設 100)
- step : 拖曳滑桿時的變化步階
上面 Number 同樣是數值輸入元件, 但它的上下調整鈕變化步階固定是 1 無法調整, 如果需要任意的步階變化就可以改用 Slider 元件.
測試程式碼如下 :
import gradio as gr
def handler(in1, in2):
return in1, in2
in1=gr.Slider(label='數值輸入 1')
in2=gr.Slider(label='數值輸入 2', minimum=-10, value=0, maximum=10, step=0.1)
out1=gr.Textbox(label='數值輸出 1')
out2=gr.Textbox(label='數值輸出 2')
iface=gr.Interface(
fn=handler,
inputs=[in1, in2],
outputs=[out1, out2],
title='Slider 元件測試',
allow_flagging='never',
)
iface.launch()
此例設置了兩個 Slider 滑桿輸入 in1, in2 與對應用來顯示其內容的兩個 Textbox 輸出框 out1, out2. 其中 in1 未指定 value, step, minumum, 與 maximum 參數, 因此預設值是 0, 滑桿預設範圍是 0~100, 預設步階是 1; 而 in2 則是用 value 參數指定初始值為 0, 用 minimum 與 maximum 參數設定值區間為 -10~10, 指定 step=0.1 變化步階 :
此例程式碼放在 Hugging Face Space :
5. Checkox 元件 :
Checkbox (核取方塊) 用來勾選一個選項, 有勾選傳回 True, 未勾選則傳回 False, 它只能用做輸入元件, 不能作為輸出元件. 參數如下 :
- info : 設定選項上方的說明文字
- label : 設定選項內容
- value : 設定初始值, True (勾選) / False (未勾選)
- interactive : 設定此選項是否開放勾選, True (可勾選) / False (不可勾選)
測試程式碼如下 :
import gradio as gr
def handler(in1, in2):
return in1, in2
in1=gr.Checkbox(info='婚姻狀況', label='已婚', value=True)
in2=gr.Checkbox(info='周年慶優惠', label='買一送一', interactive=False)
out1=gr.Textbox(label='已婚')
out2=gr.Textbox(label='買一送一')
iface=gr.Interface(
fn=handler,
inputs=[in1, in2],
outputs=[out1, out2],
title='Checkbox 元件測試',
allow_flagging='never',
)
iface.launch()
此例設置了兩個 Checkbox 選項輸入 in1, in2 與對應用來顯示其勾選狀態的兩個 Textbox 輸出框 out1, out2. 其中 in1 用 value=True 預設已勾選; 而 in2 則是用 interactive=False 將選項設為不可勾選, 結果如下 :
in2 因為被 interactive=False 禁止被勾選, 故它一直會傳回 False.
此例程式碼放在 Hugging Face Space :
6. CheckoxGroup 元件 :
上面的 Checkbox 的功能只是做單選Yes/No 而已, CheckboxGroup (核取方塊群組) 則可以做多選, 可從一組選項中選擇多個值, 它只能用做輸入元件, 不能作為輸出元件. 參數如下 :
- label: 設定元件的標籤文字, 用於描述此選項群組的用途 (預設值 None)
- value: 設定初始勾選狀態之布林值串列, 預設值 [] (全部未勾選)
- info: 設定選項群組上方的說明文字
- choices: 設定選項標籤的字串串列 (必要參數)
- type: 設定傳回值類型, 'value'=傳回選項標籤 (預設), 'index'=傳回選項索引
- interactive : 設定此選項群組是否開放勾選, True (可勾選) / False (不可勾選)
傳回值為已勾選之選項標籤或索引 (視 type 參數而定) 組成之串列, 都不勾選傳回空串列. 注意, 參數 interactive 若設為 False 會將整個選項群組設為全部不可勾選, 可搭配 value 參數設定初始已勾選項目與 interactive=False 製作固定不可改之選項群組 (interactive=False 仍會傳回串列).
測試程式碼如下 :
import gradio as gr
def handler(in1, in2):
return in1, in2
in1=gr.CheckboxGroup(label='擅長的程式語言1',
info='可複選',
choices=['Python', 'C#', 'C++', 'Java'],
value=['Python', 'C++'])
in2=gr.CheckboxGroup(label='擅長的程式語言2',
info='可複選',
choices=['PHP', 'ASP', 'JSP'],
value=['PHP', 'ASP'],
type='index')
out1=gr.Textbox(label='擅長的程式語言1')
out2=gr.Textbox(label='擅長的程式語言2')
iface=gr.Interface(
fn=handler,
inputs=[in1, in2],
outputs=[out1, out2],
title='CheckboxGroup 元件測試',
allow_flagging='never',
)
iface.launch()
此例設置了兩個 CheckboxGroup 選項群組輸入 in1, in2 與對應用來顯示其勾選狀態的兩個 Textbox 輸出框 out1, out2. 兩個輸入皆用 value 串列設定初始已勾選之選項; in1 未傳入 type 參數因此預設是傳回選項標籤串列; 而 in2 則是用 type='index' 設定傳回值為選項索引串列. 用 , 結果如下 :
此例程式碼放在 Hugging Face Space :
7. Radio 元件 :
Radio 元件 (單選圓鈕) 用來在多個選項中勾選一個 (只能單選), 它只能用做輸入元件, 不能作為輸出元件. 參數如下 :
- label: 設定元件的標籤文字, 用於描述此選項群組的用途 (預設值 None)
- value: 設定哪個選項 (choices 的一個元素) 初始被勾選, 預設值 None (未勾選)
- choices: 設定選項標籤的字串串列 (必要參數)
- type: 設定傳回值類型, 'value'=傳回選項標籤 (預設), 'index'=傳回選項索引
- interactive : 設定此選項群組是否開放勾選, True (可勾選) / False (不可勾選)
事實上 Radio 與 CheckboxGroup 很像, 差別在於單選與多選而已, 測試程式碼如下 :
import gradio as gr
def handler(in1, in2):
return in1, in2
in1=gr.Radio(label='最擅長的程式語言1',
info='沒有之一喔',
choices=['Python', 'C#', 'C++', 'Java'],
value='Python')
in2=gr.Radio(label='最擅長的程式語言2',
info='沒有之一喔',
choices=['PHP', 'ASP', 'JSP'],
value='PHP',
type='index')
out1=gr.Textbox(label='最擅長的程式語言1')
out2=gr.Textbox(label='最擅長的程式語言2')
iface=gr.Interface(
fn=handler,
inputs=[in1, in2],
outputs=[out1, out2],
title='Radio 元件測試',
allow_flagging='never',
)
iface.launch()
此例設置了兩個 Radio 單選圓鈕輸入 in1, in2 與對應用來顯示其勾選狀態的兩個 Textbox 輸出框 out1, out2. 兩個輸入皆用 value 自字串設定初始已勾選之選項; in1 未傳入 type 參數因此預設是傳回選項標籤字串; 而 in2 則是用 type='index' 設定傳回值為選項索引. 用 , 結果如下 :
此例程式碼放在 Hugging Face Space :
8. Dropdown 元件 :
Dropdown 元件 (下拉式選單) 是 CheckboxGroup 與 Radio 功能的複合體, 可以透過 multiselect 參數指定為單選或多選, 它只能用做輸入元件, 不能作為輸出元件. 參數如下 :
- label: 設定元件的標籤文字, 用於描述此選項群組的用途 (預設值 None)
- value: 設定初始勾選狀態之布林值串列 (多選) 或字串 (單選), 預設值 [] (全部未勾選)
- info: 設定選項群組上方的說明文字
- choices: 設定選項標籤的字串串列 (必要參數)
- type: 設定傳回值類型, 'value'=傳回選項標籤 (預設), 'index'=傳回選項索引
- interactive : 設定此選項群組是否開放勾選, True (可勾選) / False (不可勾選)
- multiselect: 設定單選 (False) 或多選 (True), 預設 False 單選.
注意, 若 multiselect 設為 True (多選), value 需傳入串列, 若為 False (單選) 則傳入字串.
測試程式碼如下 :
import gradio as gr
def handler(in1, in2):
return in1, in2
in1=gr.Dropdown(label='擅長的程式語言',
info='可複選',
choices=['Python', 'C#', 'C++', 'Java'],
value=['Python', 'C++'],
multiselect=True)
in2=gr.Dropdown(label='最擅長的程式語言',
info='沒有之一喔',
choices=['PHP', 'ASP', 'JSP'],
value='JSP',
type='index')
out1=gr.Textbox(label='擅長的程式語言')
out2=gr.Textbox(label='最擅長的程式語言')
iface=gr.Interface(
fn=handler,
inputs=[in1, in2],
outputs=[out1, out2],
title='Dropdown 元件測試',
allow_flagging='never',
)
iface.launch()
此例設置了兩個 Dropdown 下拉式選單輸入 in1, in2 與對應用來顯示其勾選狀態的兩個 Textbox 輸出框 out1, out2. 兩個輸入皆用 value 串列設定初始已勾選之選項; 但因為 in1 用 multiselect=True 設定為可多選, 因此其 value 要傳入一個串列, in2 未傳入 multiselect 參數預設為單選, 故其 value 要傳入字串. in1 未傳入 type 參數因此預設是傳回選項標籤串列; 而 in2 則是用 type='index' 設定傳回值為選項索引串列, 結果如下 :
此例程式碼放在 Hugging Face Space :
