Gradio中button組件的基本使用方式

更新時間：2024年11月11日 09:29:19 作者：土山炮

Gradio中的button組件用于實現(xiàn)點擊事件,通過click事件綁定函數(shù)來處理值的變化,點擊時,函數(shù)接收組件的值作為輸入,返回新的值或更新組件的屬性,示例代碼展示了如何在點擊按鈕時修改文本框的值并控制按鈕的可見性

Gradio中button組件的基本使用

Gradio中的button組件是用于在頁面中放置按鈕的組件，是最常用的組件之一。

其常用于一些點擊事件的實現(xiàn)，具體需要通過其組件的click事件實現(xiàn)，但是在使用時又與寫傳統(tǒng)前端代碼時的click實現(xiàn)不太一樣。

簡單來說

前端代碼中點擊按鈕要實現(xiàn)的東西（包含其他組件值的變化）基本都寫在點擊觸發(fā)的函數(shù)中，但是gradio中button組件的click事件中的函數(shù)只做值的處理，改變其他組件的值或屬性（呈現(xiàn)結果）是通過函數(shù)的輸出來控制

gradio.Button.click(fn, inputs, outputs)

使用click事件時最常用的就是這三個參數(shù)，fn是點擊時觸發(fā)的函數(shù)，只要填函數(shù)本身；
inputs是函數(shù)的輸入參數(shù)，需要注意的是實際填的并不是int、str這樣的基本類型，而是gradio組件本身，比如gradio.Textbox，但并不是說會將gradio組件直接傳給fn，而是將組件的值（value屬性）傳給fn，所以fn接的還是基本類型；
outputs是函數(shù)的輸出參數(shù)，和inputs一樣，也是gradio組件，如果最終的目的是想改變outputs中組件的值的話，fn回傳基本類型即可，如果是需要改變組件的其他屬性（例如visible、interactive），那就需要回傳gr.update()來實現(xiàn)

示例代碼

import gradio as gr

def update(name):
    return f"Welcome to Gradio, {name}!", gr.update(interactive=False), gr.update(visible=True)
def clear():
    return "", "", gr.update(interactive=True), gr.update(visible=False)

with gr.Blocks() as demo:
    gr.Markdown("Start typing below and then click **Run** to see the output.")
    with gr.Row():
        inp = gr.Textbox(placeholder="What is your name?")
        out = gr.Textbox()
    btn = gr.Button("Run")
    btn_c = gr.Button("clear", visible=False)
    btn.click(fn=update, inputs=inp, outputs=[out,btn,btn_c])
    btn_c.click(fn=clear, outputs=[inp,out,btn,btn_c])

demo.launch()

以上代碼就可以實現(xiàn)點擊Run按鈕時將左側文本框的輸入拼接上"Welcome to Gradio"，并顯示在右側文本框中，同時將Run按鈕置灰，顯示出clear按鈕，在clear按鈕點擊后將左右文本框清空并讓Run按鈕回復、clear按鈕消失。