WaterfallGallery

gradio Gallery with waterfall flow.

Support waterfall flow display images
Added a like button, support additional binding of like events to images
Added an action button, support additional binding of click event to images
Responsive columns

How to Use

Basic Usage

Responsive columns

Load More

Like/Click Feedback

API and Parameter List

The following APIs are additional extended parameters beyond the original gradio Gallery.

value

Interface definition:

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

Attribute	Type	Default Value	Description
has_more	bool	None	If True, will show the "Load More" button.
lode_more_button_props	dict	None	“Load More” button properties, same as gradio Button
columns	int \| tuple \| dict	2	Displays the number of images displayed in a row on the following screen sizes (<576px(xs), <768px(sm), <992px(md), <1200px(lg), <1600px(xl), >1600px(xll)). - If int is passed in, it will apply to all screen sizes; - If tuple is passed in, when less than 6 breakpoints are given, the last breakpoint will be used for all subsequent breakpoints ; - If a dict is passed in, you can represents the number of images for each size screen with [xs,sm,md,lg,xl,xll] as the key.
gap	tuple \| int	8	The gap (px) between images. If a tuple is passed, the first value is the gap for width and the second value is the gap for height.If a number is passed, the gap will be the same for width and height.
action_label	str	'Click'	The label for the action button. Only displayed if `clickable` is set to True.
likeable	bool	None	Whether the gallery image display a like or dislike button. Set automatically by the .like method but has to be present in the signature for it to show up in the config.
clickable	bool	None	Whether the gallery image display an action button. Set automatically by the .click method but has to be present in the signature for it to show up in the config.

Event Listeners

Event	Description
`mgr.WaterfallGallery.load_more(fn, ···)`	Triggered when the "Load More" button is clicked.
`mgr.WaterfallGallery.like(fn, ···)`	Triggered when the Like/Dislike button is clicked. EventData is: - index: current image index. - value: current image info. - liked: like/dislike status of the current image, which can be None, indicating that the user cancels the operation.
`mgr.WaterfallGallery.click(fn, ···)`	Triggered when the action button is clicked, EventData is: - index: current image index. - value: current image info.