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:当前图片信息。                                                                               |