博主原文链接：https://www.yourmetaverse.cn/nlp/381/
Gradio库的Gallery模块介绍与select方法详解
Gradio是一个用于构建交互式界面的Python库，能够帮助开发者快速创建Web界面来展示模型、输入数据并查看结果。Gradio的Gallery模块是其中一个组件，用于展示一个可以滚动浏览的图片列表。
使用Gallery模块时，它的输入是一个列表，列表中的元素可以是numpy数组、PIL图像、字符串，或者是(image, caption)元组。这些图片将会被展示在界面上。
下面是一个使用Gallery模块的示例：
# This demo needs to be run from the repo folder.
# python demo/fake_gan/run.py
import random
import gradio as gr
def fake_gan():
images = [
(random.choice(
[
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
"https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80",
"https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80",
"https://images.unsplash.com/photo-1546456073-92b9f0a8d413?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
"https://images.unsplash.com/photo-1601412436009-d964bd02edbc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80",
]
), f"label {i}" if i != 0 else "label" * 50)
for i in range(3)
]
return images
with gr.Blocks() as demo:
with gr.Column(variant="panel"):
with gr.Row(variant="compact"):
text = gr.Textbox(
label="Enter your prompt",
show_label=False,
max_lines=1,
placeholder="Enter your prompt",
).style(
container=False,
)
btn = gr.Button("Generate image").style(full_width=False)
gallery = gr.Gallery(
label="Generated images", show_label=False, elem_id="gallery"
).style(columns=[2], rows=[2], object_fit="contain", height="auto")
btn.click(fake_gan, None, gallery)
if __name__ == "__main__":
demo.launch()
上面的示例展示了如何使用Gallery模块来显示一个生成的图像列表。通过点击"Generate image"按钮，会调用fake_gan函数生成一些随机的图像，并在界面上展示出来。
除了展示图像，Gallery模块还提供了一个select方法，用于监听用户在图像列表中选择图片的事件。通过select方法，可以注册一个函数，当用户选择了某张图片时，该函数将会被调用。函数的参数可以包含gradio.SelectData类型的事件数据，其中包括被选择的图像的标题和索引。
下面是select方法的使用示例：
gallery.select(my_function, inputs=[text_box], outputs=[result_text])
上述示例中，通过select方法将一个名为my_function的函数注册为事件处理函数。当用户在Gallery模块中选择了一张图片时，my_function函数将会被调用，并将text_box组件的输入作为参数，将result_text组件作为输出。
以上就是Gradio库的Gallery模块的介绍以及select方法的详解。Gradio的Gallery模块可以方便地展示图片列表，并与其他组件进行交互，使得界面更加丰富和用户友好。
参数详解
下面是Gallery模块的参数表格和select方法的参数表格：
Gallery模块参数：
| 参数名 | 数据类型 | 默认值 | 描述 |
|---|---|---|---|
| value | list | None | 默认情况下显示在图库中的图像列表。如果是可调用对象，当应用程序加载时，该函数将被调用以设置组件的初始值。 |
| label | str | None | 在界面中显示的组件名称。 |
| every | float | None | 如果value是可调用对象，在客户端连接打开时每隔指定的秒数运行该函数。否则没有影响。队列必须启用。 |
| show_label | bool | True | 如果为True，将显示标签。 |
| container | bool | True | 如果为True，将组件放置在容器中，提供额外的边框填充。 |
| scale | int | None | 相对于同一行中相邻组件的宽度比例。例如，如果组件A的scale=2，组件B的scale=1，则A的宽度将是B的两倍。应为整数。 |
| min_width | int | 160 | 最小像素宽度，如果屏幕空间不足以满足此值，则会换行。如果某个比例值导致该组件比min_width更窄，则首先将尊重min_width参数。 |
| visible | bool | True | 如果为False，将隐藏组件。 |
| elem_id | str | None | 可选字符串，用作此组件在HTML DOM中的id。可用于定位CSS样式。 |
| elem_classes | list[str] | None | 可选字符串列表，用作此组件在HTML DOM中的类。可用于定位CSS样式。 |
| columns | int, tuple | 2 | 每个六个标准屏幕尺寸（<576px，<768px，<992px，<1200px，<1400px，>1400px）中应显示的图像数量。如果给出少于6个，则最后一个将用于所有后续断点。 |
| rows | int, tuple | None | 图像网格中的行数，对于每个六个标准屏幕尺寸（<576px，<768px，<992px，<1200px，<1400px，>1400px）中的行数。如果给出少于6个，则最后一个将用于所有后续断点。 |
| height | str | None | 图库的高度。 |
| preview | bool | None | 如果为True，将以预览模式显示图库，显示所有图像的缩略图，并允许用户单击缩略图以查看完整大小的图像。 |
| object_fit | str | None | 图库中缩略图图像的CSS object-fit属性。可以是"contain"，“cover”，“fill”，“none"或"scale-down”。 |
| allow_preview | bool | True | 如果为True，单击图库中的图像将放大显示。默认为True。 |
select方法参数：
| 参数名 | 数据类型 | 默认值 | 描述 |
|---|---|---|---|
| fn | Callable, None | Required | 要包装为界面的函数。通常是机器学习模型的预测函数。函数的每个参数对应一个输入组件，函数应该返回单个值或一个值的元组，元组中的每个元素对应一个输出组件。 |
| inputs | Component, list | None | 用作输入的Gradio组件列表。如果函数不接受输入，则应该是一个空列表。 |
| outputs | Component, list | None | 用作输出的Gradio组件列表。如果函数没有返回输出，则应该是一个空列表。 |
| api_name | str, None | None | 定义此参数可在API文档中公开该端点。 |
| status_tracker | None | None | |
| scroll_to_output | bool | False | 如果为True，完成后将滚动到输出组件。 |
| show_progress | str | “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, list, None | None | 要在触发此侦听器时取消的其他事件的列表。例如，设置cancels = [click_event]将取消click_event，其中click_event是另一个组件的.click方法的返回值。尚未运行的函数（或正在迭代的生成器）将被取消，但当前正在运行的函数将被允许完成。 |
| every | float, None | None | 在客户端连接打开时每隔指定的秒数运行此事件。以秒为单位解释。队列必须启用。 |
