关于Gradio中Button用法及事件监听器click方法使用

Gradio中Button用法及事件监听器click方法使用

瞎想乱记

事情是这样的：入职时面试的是Java，简历中写了会python，刚好最近有个小项目需要用Python实现，老板就将这个项目交给了我，我…

项目中还真遇到了好几个坑，分享一下

功能介绍

功能很简单，就是一个添加一个按钮，并给这个按钮添加一个监听器，实现click方法（我一个后端搞起了前端，以后请叫我全栈）。

相关代码

Gradio的基础不再介绍了，不会的可以去先看看基础

按钮的代码如下：

import gradio as gr
submit_button = gr.Button('提交')

以上是定义了一个名为“提交”的按钮，我想实现通过点击此按钮实现某个方法，输出一行文字，方法的入参有三个参数

具体代码如下：

image = gr.Image(label="图片", sources=["upload"], type="filepath")
video = gr.Video(label="视频", sources=["upload"], format='mp4')
audio = gr.Audio(label="音频", sources=["upload"])
output_video = gr.Text()
submit_button.click(fun_train_video, inputs=[image, video, audio], outputs=output_video)

稍微解释下这行代码，click是按钮的监听器，当点击“提交”按钮后，会运行函数fun_train_video，这个函数的入参有三个，

分别是：image，video，audio，函数的输出是output_video。

这样的代码pycharm并没有报错，但是在运行时会出下下面的错误

“inputs”: [block._id for block in self.inputs],
^^^^^^^^^
AttributeError: ‘tuple’ object has no attribute ‘_id’

解决方法

查了很多资料，包括chatGPT，但是并没有得到理想的答案，问题迟迟没有解决，眼看着项目要交付，着急啊，后来想起了我的研究生室友，人称憨憨，上学时写的一手好python，果断请教，最后得到解决。

其实这个问题的根源是这样的：在监听器click方法中，inputs参数需要传入一个包含输入组件的列表，但是inputs=[image, video, audio]这种写法是包含元组的列表，这个元组包含了输入组件和它的标签，但不是组件本身。

当gradio尝试获取输入组件id的时候，会从元组中获取_id属性，但是元组中没有这个属性，就会抛出异常。

修改代码如下

submit_button.click(fun_train_video, inputs=[image[0], video, audio], outputs=output_video)

那就是在第一个参数后边加一个序号，这样gradio就可以找到组件的id了，挺神奇的，更深层的逻辑还有待去了解，问题总算解决了。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。