Spaces:
Running
Running
File size: 6,086 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。
- 支持瀑布流展示图片
- 增加点赞按钮，支持图片额外绑定`like`事件
- 增加 action 按钮，支持图片额外绑定`click`事件
- 响应式 columns
## 如何使用
### 基本使用
<demo name="basic"></demo>
### 响应式 columns
<demo name="responsive_columns"></demo>
### 加载更多
<demo name="load_more"></demo>
### 点赞/点击反馈
<demo name="like_click_feedback"></demo>
## API 及参数列表
以下 API 均为在原有 gradio Gallery 外的额外拓展参数。
### value
接口定义：
```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
| 属性 | 类型 | 默认值 | 描述 |
| ---------------------- | -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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)）中在一行显示的图像数量。 <br/> - 如果传入 int, 则应用于所有尺寸屏幕；<br/> - 如果传入 tuple, 当给出的断点少于 6 个, 则最后一个断点将用于所有后续断点；<br/> - 如果传入 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 为：<br/> - index：当前图片索引。<br/> - value：当前图片信息。 <br/> - liked：当前图片的喜欢/不喜欢状态，可以为 None，代表用户取消操作。 |
| `mgr.WaterfallGallery.click(fn, ···)` | action 按钮被点击时触发，EventData 为：<br/> - index：当前图片索引。<br/> - value：当前图片信息。 |
|