使用Gradio库创建交互式滑块组件

❤️觉得内容不错的话，欢迎点赞收藏加关注😊😊😊，后续会继续输入更多优质内容❤️
👉有问题欢迎大家加关注私戳或者评论（包括但不限于NLP算法相关，linux学习相关，读研读博相关......）👈

博主原文链接：https://www.yourmetaverse.cn/nlp/427/

请添加图片描述

（封面图由文心一格生成）

使用Gradio库创建交互式滑块组件

在构建交互式应用程序时，Gradio库提供了丰富的组件来收集用户输入和显示输出结果。其中一个非常有用的组件是Slider（滑块），它允许用户在指定的范围内选择一个值。本文将介绍Gradio库中Slider组件的使用以及其change、input和release三个方法。

Slider组件概述

Slider组件是Gradio库中的一个类，用于创建一个滑块，用户可以通过滑动来选择一个数值。Slider组件的构造函数如下：

import gradio as gr


def sentence_builder(quantity, animal, countries, place, activity_list, morning):
    return f"""The {quantity} {animal}s from {" and ".join(countries)} went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4, label="Count", info="Choose between 2 and 20"),
        gr.Dropdown(
            ["cat", "dog", "bird"], label="Animal", info="Will add more animals later!"
        ),
        gr.CheckboxGroup(["USA", "Japan", "Pakistan"], label="Countries", info="Where are they from?"),
        gr.Radio(["park", "zoo", "road"], label="Location", info="Where did they go?"),
        gr.Dropdown(
            ["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True, label="Activity", info="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, eget aliquam nisl nunc vel nisl."
        ),
        gr.Checkbox(label="Morning", info="Did they do it in the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", ["Japan", "Pakistan"], "park", ["ate", "swam"], True],
        [4, "dog", ["Japan"], "zoo", ["ate", "swam"], False],
        [10, "bird", ["USA", "Pakistan"], "road", ["ran"], False],
        [8, "cat", ["Pakistan"], "zoo", ["ate"], True],
    ]
)

if __name__ == "__main__":
    demo.launch()

Slider组件的参数包括：

minimum：滑块的最小值，默认为0。
maximum：滑块的最大值，默认为100。
step：滑块的步长，即每次滑动的增量，默认为None。
label：组件在界面中显示的名称，默认为None。
info：组件的描述信息，默认为None。
show_label：是否显示标签，默认为True。
container：是否将组件放置在容器中，默认为True。
scale：相对于其他组件的宽度比例，默认为None。
min_width：组件的最小像素宽度，默认为160。
visible：是否可见，默认为True。
elem_id：组件在HTML DOM中的id，默认为None。
elem_classes：组件在HTML DOM中的类列表，默认为None。
randomize：是否在应用程序加载时随机设置滑块的值，默认为False。

change方法

change方法是Slider组件的一个监听器方法，当组件的值发生变化时触发。这个变化可以是用户的输入，也可以是来自函数更新的结果。在Gradio Blocks中使用该方法时，需要传入一个函数作为参数，该函数通常是机器学习模型的预测函数。函数的每个参数对应一个输入组件，函数应该返回一个单一的值或一个值的元组，其中元组的每个元素对应一个输出组件。

input方法

input方法是Slider组件的另一个监听器方法，当用户改变组件的值时触发。与change方法类似，input方法也需要传入一个函数作为参数。该函数通常是机器学习模型的预测函数，每个参数对应一个输入组件，函数应该返回一个单一的值或一个值的元组，其中元组的每个元素对应一个输出组件。

release方法

release方法是Slider组件的第三个监听器方法，当用户释放鼠标时触发（例如释放滑块时）。与change和input方法类似，release方法也需要传入一个函数作为参数。该函数通常是机器学习模型的预测函数，每个参数对应一个输入组件，函数应该返回一个单一的值或一个值的元组，其中元组的每个元素对应一个输出组件。

参数详解

Slider模块参数

参数名	数据类型	默认值	描述
minimum	float	0	滑块的最小值
maximum	float	100	滑块的最大值
value	float \| Callable \| None	None	默认值。如果是可调用对象，每次加载应用程序时将调用该函数以设置组件的初始值。如果设置了randomized=True，则忽略此参数。
step	float \| None	None	滑块值之间的增量
label	str \| None	None	在界面中显示的组件名称
info	str \| None	None	其他组件描述信息
every	float \| None	None	如果`value`是可调用对象，在客户端连接打开时每隔指定的秒数运行该函数。如果不是可调用对象，则不起作用。必须启用队列。可以通过此组件的`.load_event`属性访问该事件（例如取消它）。
show_label	bool	True	如果为True，将显示标签
container	bool	True	如果为True，将在容器中放置该组件-在边框周围提供一些额外的填充
scale	int \| None	None	相对于同一行中相邻组件的宽度比例。例如，如果组件A的scale=2，组件B的scale=1，则A的宽度将是B的两倍。应为整数
min_width	int	160	最小像素宽度，如果屏幕空间不足以满足此值，则换行。如果某个比例值导致此组件比min_width更窄，则首先将遵守min_width参数
interactive	bool \| None	None	如果为True，滑块将可调节；如果为False，将禁用调节。如果未提供，则根据组件是用作输入还是输出进行推断
visible	bool	True	如果为False，将隐藏组件
elem_id	str \| None	None	可选的字符串，用作此组件在HTML DOM中的id。可用于定位CSS样式
elem_classes	list[str] \| str \| None	None	可选的字符串列表，用作此组件在HTML DOM中的类。可用于定位CSS样式
randomize	bool	False	如果为True，则在应用程序加载时，滑块的值将在最小值和最大值之间均匀随机选择

change、input和release三个方法参数

参数名	数据类型	默认值	描述
fn	Callable\|None	required	要包装界面的函数，通常是机器学习模型的预测函数。函数的每个参数对应一个输入组件，函数应返回一个值或一个元组，其中每个元素对应一个输出组件。
inputs	Component \| list[Component] \| set[Component] \| None	None	要用作输入的Gradio组件列表。如果函数不接受输入，则应为一个空列表。
outputs	Component \| list[Component] \| None	None	要用作输出的Gradio组件列表。如果函数不返回输出，则应为一个空列表。
api_name	str \| None \| Literal[False]	None	定义端点在API文档中的显示方式。可以是字符串、None或False。如果为False，则端点不会在API文档中显示。如果设置为None，则端点将在API文档中作为无名称端点显示，尽管此行为将在Gradio 4.0中更改。如果设置为字符串，则端点将在API文档中以给定名称显示。
status_tracker	None	None
scroll_to_output	bool	False	如果为True，将在完成时滚动到输出组件
show_progress	Literal[‘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	在客户端连接打开时以每个指定秒数运行此事件。以秒为单位解释。必须启用队列。