博主原文链接:https://www.yourmetaverse.cn/nlp/359/
简化交互体验——探索Gradio的ClearButton模块
在构建交互式应用程序时,清除组件值是一个常见需求。Gradio的ClearButton模块提供了一个方便的按钮,当单击时可以清除一个或多个组件的值。本文将介绍ClearButton模块的使用方法以及其add和click方法。
ClearButton模块使得用户能够轻松地清除组件的值,提供了更简化的交互体验。
ClearButton模块的参数:
以下是ClearButton模块的参数列表:
参数 | 数据类型 | 默认值 | 描述 |
---|---|---|---|
components | None | list[Component] | Component | None | 需要清除值的组件列表。 |
value | str | “Clear” | 按钮显示的默认文本。如果是可调用的函数,该函数将在应用加载时被调用,以设置组件的初始值。 |
variant | Literal[‘primary’, ‘secondary’, ‘stop’] | “secondary” | 按钮的样式。"primary"表示主要的行动按钮,"secondary"表示更柔和的样式,"stop"表示停止按钮。 |
size | Literal[‘sm’, ‘lg’] | None | None | 按钮的大小。可选值为"sm"或"lg"。 |
visible | bool | True | 如果为False,将隐藏组件。 |
interactive | bool | True | 如果为False,按钮将处于禁用状态。 |
elem_id | str | None | None | 可选的字符串,用作HTML DOM中此组件的id。可用于指定CSS样式。 |
elem_classes | list[str] | str | None | None | 可选的字符串列表,用作HTML DOM中此组件的类。可用于指定CSS样式。 |
scale | int | None | None | 相对于相邻组件的宽度比例。例如,如果组件A的scale=2,组件B的scale=1,则组件A的宽度是组件B的两倍。应为整数。 |
min_width | int | None | None | 最小像素宽度,如果屏幕空间不足以满足此值,则换行。如果某个比例值导致该组件比min_width更窄,则首先尊重min_width参数。 |
ClearButton模块的方法:
ClearButton模块提供了add和click两种方法,以便更灵活地控制组件的行为。
-
add方法:此方法用于将一个或多个组件添加到清除按钮的列表中,当单击按钮时,这些组件的值将被清除。
-
click方法:此方法用于监听按钮的点击事件,并执行相应的操作。通过click方法,可以将回调函数包装成一个接口,实现与其他组件的交互和响应。
结论:
Gradio的ClearButton模块为开发人员提供了一种简化交互体验的方式。通过添加ClearButton组件,并使用其add和click方法,开发人员可以轻松实现清除组件值的功能,为用户提供更好的交互体验。使用ClearButton模块,开发人员可以更加灵活地构建交互式应用程序,满足用户的需求。
参数详解
ClearButton
模块的参数
参数 | 数据类型 | 默认值 | 描述 |
---|---|---|---|
components | None / list[Component] / Component | None | 需要清除的组件列表。当点击按钮时,这些组件的值将被清除。 |
value | str | “Clear” | 按钮显示的默认文本。如果是可调用对象,每次应用加载时将调用该函数以设置组件的初始值。 |
variant | ‘primary’ / ‘secondary’ / ‘stop’ | “secondary” | 按钮的样式变体。‘primary’ 表示主要操作,‘secondary’ 表示较为柔和的样式,‘stop’ 表示停止按钮。 |
size | ‘sm’ / ‘lg’ / None | None | 按钮的尺寸。可以为 “sm”(小)或 “lg”(大)。 |
visible | bool | True | 如果为 False,则隐藏组件。 |
interactive | bool | True | 如果为 False,则按钮将处于禁用状态。 |
elem_id | str / None | None | 可选的字符串,作为此组件在 HTML DOM 中的 id。可用于定位 CSS 样式。 |
elem_classes | list[str] / str / None | None | 可选的字符串列表,作为此组件在 HTML DOM 中的类。可用于定位 CSS 样式。 |
scale | int / None | None | 相对于相邻组件的宽度比例。例如,如果组件 A 的 scale=2,组件 B 的 scale=1,那么组件 A 的宽度将是组件 B 的两倍。应为整数。 |
min_width | int / None | None | 最小像素宽度,如果屏幕空间不足以满足此值,将换行。如果某个 scale 值导致此组件比 min_width 更窄,则首先尊重 min_width 参数。 |
add方法中的参数
参数 | 数据类型 | 默认值 | 描述 |
---|---|---|---|
components | None / Component / list[Component] | 要添加到在点击按钮时将被清除的组件列表的组件或组件列表。 |
click方法中的参数
参数 | 数据类型 | 默认值 | 描述 |
---|---|---|---|
fn | Callable / None | 要封装成界面的函数。通常是机器学习模型的预测函数。函数的每个参数对应一个输入组件,并且函数应返回单个值或元组,元组中的每个元素对应一个输出组件。 | |
inputs | Component / list[Component] / set[Component] / None | None | 用作输入的 Gradio 组件列表。如果函数不需要输入,则应使用空列表。 |
outputs | Component / list[Component] / None | None | 用作输出的 Gradio 组件列表。如果函数不返回输出,则应使用空列表。 |
api_name | str / None | None | 定义此参数将在 API 文档中公开端点。 |
status_tracker | None | None | |
scroll_to_output | bool | False | 如果为 True,将在完成时滚动到输出组件。 |
show_progress | ‘full’ / ‘minimal’ / ‘hidden’ | “full” | 如果为 True,将在等待期间显示进度动画。 |
queue | bool / None | None | 如果为 True,将请求放入队列中(如果已启用队列)。如果为 False,则即使启用了队列,也不会将此事件放入队列。如果为 None,则使用 gradio 应用程序的队列设置。 |
batch | bool | False | 如果为 True,则函数应处理一批输入,这意味着它应接受每个参数的输入值列表。列表应具有相等的长度(并且最多为 max_batch_size )。然后函数 必须 返回元组列表(即使只有 1 个输出组件),元组中的每个列表对应一个输出组件。 |
max_batch_size | int | 4 | 如果从队列中调用,则批处理在一起的最大输入数量(仅在 batch=True 时相关)。 |
preprocess | bool | True | 如果为 False,则在运行 ‘fn’ 之前不会运行组件数据的预处理(例如,如果使用 Image 组件,则保留为 base64 字符串)。 |
postprocess | bool | True | 如果为 False,则在将 ‘fn’ 的输出返回给浏览器之前不会运行组件数据的后处理。 |
cancels | dict[str, Any] / list[dict[str, Any]] / None | None | 取消此侦听器触发时的其他事件的列表。例如,设置 cancels=[click_event] 将取消 click_event,其中 click_event 是另一个组件的 .click 方法的返回值。尚未运行的函数(或正在迭代的生成器)将被取消,但当前正在运行的函数将被允许完成。 |
every | float / None | None | 在客户端连接打开的情况下,每隔 ‘every’ 秒运行一次此事件。以秒为单位计算。队列必须已启用。 |