Spaces:
Running
Running
| # 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 | |
| <demo name="basic"></demo> | |
| ### Responsive columns | |
| <demo name="responsive_columns"></demo> | |
| ### Load More | |
| <demo name="load_more"></demo> | |
| ### Like/Click Feedback | |
| <demo name="like_click_feedback"></demo> | |
| ## API and Parameter List | |
| The following APIs are additional extended parameters beyond the original gradio Gallery. | |
| ### value | |
| Interface definition: | |
| ```python | |
| 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)). <br/> - If int is passed in, it will apply to all screen sizes; <br/> - If tuple is passed in, when less than 6 breakpoints are given, the last breakpoint will be used for all subsequent breakpoints ;<br/> - 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: <br/> - index: current image index. <br/> - value: current image info. <br/> - 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: <br/> - index: current image index. <br/> - value: current image info. | | |