快捷導(dǎo)航

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

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

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

Gradio中button組件的基本使用

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

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

簡(jiǎn)單來(lái)說(shuō)

前端代碼中點(diǎn)擊按鈕要實(shí)現(xiàn)的東西（包含其他組件值的變化）基本都寫(xiě)在點(diǎn)擊觸發(fā)的函數(shù)中，但是gradio中button組件的click事件中的函數(shù)只做值的處理，改變其他組件的值或?qū)傩裕ǔ尸F(xiàn)結(jié)果）是通過(guò)函數(shù)的輸出來(lái)控制

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

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

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