Spaces:
Running
Running
File size: 7,666 Bytes
e0dfb76 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
# 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. |
|