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

gradio库中的Dropdown模块:创建交互式下拉菜单-LMLPHP

gradio库中的Dropdown模块:创建交互式下拉菜单

在构建交互式用户界面时,选择合适的输入组件对于提供良好的用户体验非常重要。gradio库中的Dropdown模块提供了创建下拉菜单的功能,使用户可以从多个选项中进行选择。本文将介绍gradio库中的Dropdown模块以及其常用的四个方法:change、input、blur和select。

Dropdown模块介绍

Dropdown模块是gradio库中的一个组件,用于创建下拉菜单。通过提供一个选项列表,用户可以从中选择一个选项作为输入。下拉菜单的选项可以是字符串,也可以是索引。

在交互过程中,当用户选择下拉菜单的选项时,组件会将所选选项的值作为字符串或索引传递给函数进行处理。同时,函数需要返回与所选选项对应的字符串作为输出。

Dropdown模块还提供了一些参数用于定制化组件的外观和行为,如默认选项、是否允许多选、最大选项数等。

change方法

change方法是Dropdown模块的一个监听器方法,当组件的值发生变化时触发。这个变化可以是用户输入导致的(例如用户在文本框中输入内容),也可以是函数更新导致的(例如图像从事件触发的输出中接收到一个值)。change方法通常用于在Gradio Blocks中使用。

input方法

input方法是Dropdown模块的另一个监听器方法,当用户改变组件的值时触发。这个方法主要用于在Gradio Blocks中使用。

blur方法

blur方法是Dropdown模块的一个监听器方法,当组件失去焦点时(例如用户在文本框外单击)触发。这个方法也可以在Gradio Blocks中使用。

select方法

select方法是Dropdown模块的一个事件监听器,当用户选择下拉菜单的选项时触发。该方法使用gradio.SelectData事件数据传递选项的标签值和索引。

示例

以下是使用Dropdown模块创建交互界面的示例代码:

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()

参数详解

Dropdown模块参数介绍

change参数介绍

input参数介绍

blur参数介绍

select参数介绍

结语

本文介绍了gradio库中的Dropdown模块以及其常用的四个方法:change、input、blur和select。通过使用Dropdown模块,我们可以创建交互式下拉菜单,并为应用程序提供更多的选择和功能。希望本文对您理解和使用gradio库中的Dropdown模块有所帮助!




07-02 05:26