WaterfallGallery

瀑布流形式的 gradio Gallery。

支持瀑布流展示图片
增加点赞按钮，支持图片额外绑定like事件
增加 action 按钮，支持图片额外绑定click事件
响应式 columns

如何使用

基本使用

响应式 columns

加载更多

点赞/点击反馈

API 及参数列表

以下 API 均为在原有 gradio Gallery 外的额外拓展参数。

value

接口定义：

GalleryImageType = Union[np.ndarray, _Image.Image, FileData, Path, str]
CaptionedGalleryImageType = Tuple[GalleryImageType, str]


class GalleryImage(GradioModel):
    image: Union[FileData, Path, str]
    caption: Optional[str] = None
    liked: Optional[bool] = None
    # custom meta data
    meta: Optional[Any] = None


class GalleryData(GradioRootModel):
    root: List[GalleryImage]

props

属性	类型	默认值	描述
has_more	bool	None	如果为 True，会显示 "加载更多" 按钮
load_more_button_props	dict	None	”加载更多“按钮属性，同 gradio Button
columns	int \| tuple \| dict	2	展示在以下尺寸屏幕（<576px(xs)、<768px(sm)、<992px(md)、<1200px(lg)、<1600px(xl)、>1600px(xll)）中在一行显示的图像数量。 - 如果传入 int, 则应用于所有尺寸屏幕； - 如果传入 tuple, 当给出的断点少于 6 个, 则最后一个断点将用于所有后续断点； - 如果传入 dict, 则可以以 [xs,sm,md,lg,xl,xll] 为键表示每个尺寸屏幕的图像数量。
gap	tuple \| int	8	图片之间的间隙 (px)。如果传递一个元组，则第一个值是宽度的间隙，第二个值是高度的间隙。如果传递数字，则宽度和高度的间隙相同
action_label	str	'Click'	action 按钮的文案。当 `clickable`为 True 时才展示
likeable	bool	None	是否显示喜欢或不喜欢按钮。可以通过显示绑定 `.like` 方法自动设置。
clickable	bool	None	是否显示 action 按钮。可以通过显示绑定 `.click` 方法自动设置。

event listeners

事件	描述
`mgr.WaterfallGallery.load_more(fn, ···)`	“加载更多”按钮被点击时触发。
`mgr.WaterfallGallery.like(fn, ···)`	当点赞/点踩按钮被点击时触发，EventData 为： - index：当前图片索引。 - value：当前图片信息。 - liked：当前图片的喜欢/不喜欢状态，可以为 None，代表用户取消操作。
`mgr.WaterfallGallery.click(fn, ···)`	action 按钮被点击时触发，EventData 为： - index：当前图片索引。 - value：当前图片信息。