gradio中button组件的基本使用
gradio中的button组件是用于在页面中放置按钮的组件,是最常用的组件之一。
其常用于一些点击事件的实现,具体需要通过其组件的click事件实现,但是在使用时又与写传统前端代码时的click实现不太一样。
简单来说
前端代码中点击按钮要实现的东西(包含其他组件值的变化)基本都写在点击触发的函数中,但是gradio中button组件的click事件中的函数只做值的处理,改变其他组件的值或属性(呈现结果)是通过函数的输出来控制
gradio.button.click(fn, inputs, outputs)
- 使用click事件时最常用的就是这三个参数,fn是点击时触发的函数,只要填函数本身;
- inputs是函数的输入参数,需要注意的是实际填的并不是int、str这样的基本类型,而是gradio组件本身,比如
gradio.textbox
,但并不是说会将gradio组件直接传给fn,而是将组件的值(value属性)传给fn,所以fn接的还是基本类型; - outputs是函数的输出参数,和inputs一样,也是gradio组件,如果最终的目的是想改变outputs中组件的值的话,fn回传基本类型即可,如果是需要改变组件的其他属性(例如visible、interactive),那就需要回传
gr.update()
来实现
示例代码
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()
以上代码就可以实现点击run
按钮时将左侧文本框的输入拼接上"welcome to gradio",并显示在右侧文本框中,同时将run
按钮置灰,显示出clear
按钮,在clear
按钮点击后将左右文本框清空并让run
按钮回复、clear
按钮消失。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。
发表评论