Spaces:
Running
Running
feat: WaterfallGallery docs
Browse files- README.md +1 -0
- app.py +2 -0
- components/Chatbot/README-zh_CN.md +5 -4
- components/Chatbot/README.md +4 -4
- components/Chatbot/demos/accordion.py +1 -1
- components/Chatbot/demos/basic.py +8 -8
- components/Chatbot/demos/multi_bots.py +1 -1
- components/Chatbot/demos/multimodal.py +1 -1
- components/Markdown/README-zh_CN.md +4 -4
- components/Markdown/README.md +4 -4
- components/Markdown/demos/custom-tag3.py +1 -1
- components/Markdown/demos/custom-tag4.py +1 -1
- components/Markdown/demos/custom_tags/select-box/card_shape.py +2 -1
- components/Markdown/demos/custom_tags/select-box/card_shape_width_auto.py +2 -1
- components/Markdown/demos/multimodal.py +1 -1
- components/Markdown/resources/audio.wav +0 -0
- components/Markdown/resources/bot.jpeg +0 -0
- components/Markdown/resources/custom_components/custom_select.js +0 -26
- components/Markdown/resources/dog.mp4 +0 -3
- components/Markdown/resources/screen.jpeg +0 -0
- components/Markdown/resources/user.jpeg +0 -0
- components/WaterfallGallery/README-zh_CN.md +71 -0
- components/WaterfallGallery/README.md +71 -0
- components/WaterfallGallery/app.py +6 -0
- components/WaterfallGallery/demos/basic.py +30 -0
- components/WaterfallGallery/demos/like_click_feedback.py +37 -0
- components/WaterfallGallery/demos/load_more.py +45 -0
- components/WaterfallGallery/demos/responsive_columns.py +35 -0
- components/{Chatbot/resources → resources}/audio.wav +0 -0
- components/{Chatbot/resources → resources}/bot.jpeg +0 -0
- components/{Chatbot/resources → resources}/custom_components/custom_select.js +0 -0
- components/{Chatbot/resources → resources}/dog.mp4 +0 -0
- components/{Chatbot/resources → resources}/image-bot.jpeg +0 -0
- components/resources/modelscope.svg +1 -0
- components/{Chatbot/resources → resources}/music-bot.jpeg +0 -0
- components/{Chatbot/resources → resources}/screen.jpeg +0 -0
- components/{Chatbot/resources → resources}/user.jpeg +0 -0
- modelscope_studio-0.0.8-py3-none-any.whl → modelscope_studio-0.1.0-py3-none-any.whl +2 -2
- requirements.txt +1 -1
- src/pyproject.toml +1 -1
README.md
CHANGED
@@ -40,3 +40,4 @@ pip install modelscope_studio
|
|
40 |
- <tab-link component-tab="Chatbot">Chatbot</tab-link>
|
41 |
- <tab-link component-tab="MultimodalInput">MultimodalInput</tab-link>
|
42 |
- <tab-link component-tab="Markdown">Markdown</tab-link>
|
|
|
|
40 |
- <tab-link component-tab="Chatbot">Chatbot</tab-link>
|
41 |
- <tab-link component-tab="MultimodalInput">MultimodalInput</tab-link>
|
42 |
- <tab-link component-tab="Markdown">Markdown</tab-link>
|
43 |
+
- <tab-link component-tab="WaterfallGallery">WaterfallGallery</tab-link>
|
app.py
CHANGED
@@ -3,6 +3,7 @@ from components.Chatbot.app import docs as chatbot_docs
|
|
3 |
from components.Docs import Docs
|
4 |
from components.Markdown.app import docs as markdown_docs
|
5 |
from components.MultimodalInput.app import docs as multimodel_input_docs
|
|
|
6 |
|
7 |
readme_docs = Docs(__file__)
|
8 |
|
@@ -11,6 +12,7 @@ docs = [
|
|
11 |
["Chatbot", chatbot_docs],
|
12 |
["Markdown", markdown_docs],
|
13 |
["MultimodalInput", multimodel_input_docs],
|
|
|
14 |
]
|
15 |
|
16 |
with gr.Blocks() as demo:
|
|
|
3 |
from components.Docs import Docs
|
4 |
from components.Markdown.app import docs as markdown_docs
|
5 |
from components.MultimodalInput.app import docs as multimodel_input_docs
|
6 |
+
from components.WaterfallGallery.app import docs as waterfall_gallery_docs
|
7 |
|
8 |
readme_docs = Docs(__file__)
|
9 |
|
|
|
12 |
["Chatbot", chatbot_docs],
|
13 |
["Markdown", markdown_docs],
|
14 |
["MultimodalInput", multimodel_input_docs],
|
15 |
+
["WaterfallGallery", waterfall_gallery_docs],
|
16 |
]
|
17 |
|
18 |
with gr.Blocks() as demo:
|
components/Chatbot/README-zh_CN.md
CHANGED
@@ -131,7 +131,8 @@ class CustomComponentDict(TypedDict):
|
|
131 |
|
132 |
### event listeners
|
133 |
|
134 |
-
| 事件 | 描述
|
135 |
-
| ------------------------------ |
|
136 |
-
| `mgr.Chatbot.flushed(fn, ···)` | 当打字机效果结束时触发。EventData 为:<br/> - index:当前 message 的 index tuple。<br/> - value:当前 message value。
|
137 |
-
|
|
|
|
131 |
|
132 |
### event listeners
|
133 |
|
134 |
+
| 事件 | 描述 |
|
135 |
+
| ------------------------------ | --------------------------------------------------------------------------------------------------------------------- |
|
136 |
+
| `mgr.Chatbot.flushed(fn, ···)` | 当打字机效果结束时触发。EventData 为:<br/> - index:当前 message 的 index tuple。<br/> - value:当前 message value。 |
|
137 |
+
|
138 |
+
| `mgr.Chatbot.custom(fn, ···)` | 自定义标签触发事件时触发,EventData 为:<br/> - index:当前 message 的 index tuple ([message index, user group(index 0) or bot group(index 1), user/bot group index])。<br/> - tag:当前触发的标签。<br/> - tag_index:当前触发标签的 index,此 index 在 message 的 index tuple 基础上重新计算。<br/> - value:自定义传入的值。 |
|
components/Chatbot/README.md
CHANGED
@@ -130,7 +130,7 @@ See <tab-link component-tab="Markdown">Markdown Built-in Custom Tags</tab-link>
|
|
130 |
|
131 |
### event listeners
|
132 |
|
133 |
-
| Event | Description
|
134 |
-
| ------------------------------ |
|
135 |
-
| `mgr.Chatbot.flushed(fn, ···)` | Triggered when the typewriter effect ends. EventData is: <br/> - index: The index tuple of the current message.<br/> - value: The current message value.
|
136 |
-
| `mgr.Chatbot.custom(fn, ···)` | Triggered when a custom tag event occurs. EventData is: <br/> - index: The index tuple of the
|
|
|
130 |
|
131 |
### event listeners
|
132 |
|
133 |
+
| Event | Description |
|
134 |
+
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
135 |
+
| `mgr.Chatbot.flushed(fn, ···)` | Triggered when the typewriter effect ends. EventData is: <br/> - index: The index tuple of the current message.<br/> - value: The current message value. |
|
136 |
+
| `mgr.Chatbot.custom(fn, ···)` | Triggered when a custom tag event occurs. EventData is: <br/> - index: The index tuple of the current message ([message index, user group(index 0) or bot group(index 1), user/bot group index]).<br/> - tag: The current tag that triggered the event.<br/> - tag_index: The index of the current triggered tag, re-calculated based on the message’s index tuple.<br/> - value: The custom value passed in. |
|
components/Chatbot/demos/accordion.py
CHANGED
@@ -7,7 +7,7 @@ from modelscope_studio.components.Chatbot.llm_thinking_presets import qwen
|
|
7 |
|
8 |
|
9 |
def resolve_assets(relative_path):
|
10 |
-
return os.path.join(os.path.dirname(__file__), "
|
11 |
relative_path)
|
12 |
|
13 |
|
|
|
7 |
|
8 |
|
9 |
def resolve_assets(relative_path):
|
10 |
+
return os.path.join(os.path.dirname(__file__), "../../resources",
|
11 |
relative_path)
|
12 |
|
13 |
|
components/Chatbot/demos/basic.py
CHANGED
@@ -35,14 +35,14 @@ with gr.Blocks() as demo:
|
|
35 |
chatbot = mgr.Chatbot(
|
36 |
value=conversation,
|
37 |
avatar_images=[
|
38 |
-
os.path.join(os.path.dirname(__file__),
|
39 |
-
|
40 |
-
|
41 |
-
|
42 |
-
|
43 |
-
|
44 |
-
|
45 |
-
|
46 |
],
|
47 |
height=600,
|
48 |
)
|
|
|
35 |
chatbot = mgr.Chatbot(
|
36 |
value=conversation,
|
37 |
avatar_images=[
|
38 |
+
os.path.join(os.path.dirname(__file__),
|
39 |
+
"../../resources/user.jpeg"), {
|
40 |
+
"name":
|
41 |
+
"bot",
|
42 |
+
"avatar":
|
43 |
+
os.path.join(os.path.dirname(__file__),
|
44 |
+
"../../resources/bot.jpeg")
|
45 |
+
}
|
46 |
],
|
47 |
height=600,
|
48 |
)
|
components/Chatbot/demos/multi_bots.py
CHANGED
@@ -7,7 +7,7 @@ import modelscope_studio as mgr
|
|
7 |
|
8 |
|
9 |
def resolve_assets(relative_path):
|
10 |
-
return os.path.join(os.path.dirname(__file__), "
|
11 |
relative_path)
|
12 |
|
13 |
|
|
|
7 |
|
8 |
|
9 |
def resolve_assets(relative_path):
|
10 |
+
return os.path.join(os.path.dirname(__file__), "../../resources",
|
11 |
relative_path)
|
12 |
|
13 |
|
components/Chatbot/demos/multimodal.py
CHANGED
@@ -6,7 +6,7 @@ import modelscope_studio as mgr
|
|
6 |
|
7 |
|
8 |
def resolve_assets(relative_path):
|
9 |
-
return os.path.join(os.path.dirname(__file__), "
|
10 |
relative_path)
|
11 |
|
12 |
|
|
|
6 |
|
7 |
|
8 |
def resolve_assets(relative_path):
|
9 |
+
return os.path.join(os.path.dirname(__file__), "../../resources",
|
10 |
relative_path)
|
11 |
|
12 |
|
components/Markdown/README-zh_CN.md
CHANGED
@@ -42,7 +42,7 @@ template只能做简单的变量替换,如果想要引入更多自定义的行
|
|
42 |
custom_select.js
|
43 |
|
44 |
```js
|
45 |
-
<file src="
|
46 |
```
|
47 |
|
48 |
</demo-suffix>
|
@@ -84,6 +84,6 @@ class CustomComponentDict(TypedDict):
|
|
84 |
|
85 |
### event listeners
|
86 |
|
87 |
-
| 事件 | 描述
|
88 |
-
| ------------------------------ |
|
89 |
-
| `mgr.Markdown.custom(fn, ···)` | 自定义标签触发事件时触发,EventData 为:<br/> -
|
|
|
42 |
custom_select.js
|
43 |
|
44 |
```js
|
45 |
+
<file src="../resources/custom_components/custom_select.js"></file>
|
46 |
```
|
47 |
|
48 |
</demo-suffix>
|
|
|
84 |
|
85 |
### event listeners
|
86 |
|
87 |
+
| 事件 | 描述 |
|
88 |
+
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
|
89 |
+
| `mgr.Markdown.custom(fn, ···)` | 自定义标签触发事件时触发,EventData 为:<br/> - tag_index:当前触发标签的 index。<br/> - value:自定义传入的值。 |
|
components/Markdown/README.md
CHANGED
@@ -38,7 +38,7 @@ The template can only perform simple variable replacements. If you want to intro
|
|
38 |
custom_select.js
|
39 |
|
40 |
```js
|
41 |
-
<file src="
|
42 |
```
|
43 |
|
44 |
</demo-suffix>
|
@@ -80,6 +80,6 @@ class CustomComponentDict(TypedDict):
|
|
80 |
|
81 |
### Event Listeners
|
82 |
|
83 |
-
| Event | Description
|
84 |
-
| ------------------------------ |
|
85 |
-
| `mgr.Markdown.custom(fn, ···)` | Triggered when a custom tag event occurs. EventData is: <br/> -
|
|
|
38 |
custom_select.js
|
39 |
|
40 |
```js
|
41 |
+
<file src="../resources/custom_components/custom_select.js"></file>
|
42 |
```
|
43 |
|
44 |
</demo-suffix>
|
|
|
80 |
|
81 |
### Event Listeners
|
82 |
|
83 |
+
| Event | Description |
|
84 |
+
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
85 |
+
| `mgr.Markdown.custom(fn, ···)` | Triggered when a custom tag event occurs. EventData is: <br/> - tag: The current tag that triggered the event.<br/> - tag_index: The index of the current triggered tag.<br/> - value: The custom value passed in. |
|
components/Markdown/demos/custom-tag3.py
CHANGED
@@ -9,7 +9,7 @@ options = ["a", "b", "c"]
|
|
9 |
|
10 |
|
11 |
def resolve_assets(relative_path):
|
12 |
-
return os.path.join(os.path.dirname(__file__), "
|
13 |
relative_path)
|
14 |
|
15 |
|
|
|
9 |
|
10 |
|
11 |
def resolve_assets(relative_path):
|
12 |
+
return os.path.join(os.path.dirname(__file__), "../../resources",
|
13 |
relative_path)
|
14 |
|
15 |
|
components/Markdown/demos/custom-tag4.py
CHANGED
@@ -9,7 +9,7 @@ options = ["a", "b", "c"]
|
|
9 |
|
10 |
|
11 |
def resolve_assets(relative_path):
|
12 |
-
return os.path.join(os.path.dirname(__file__), "
|
13 |
relative_path)
|
14 |
|
15 |
|
|
|
9 |
|
10 |
|
11 |
def resolve_assets(relative_path):
|
12 |
+
return os.path.join(os.path.dirname(__file__), "../../resources",
|
13 |
relative_path)
|
14 |
|
15 |
|
components/Markdown/demos/custom_tags/select-box/card_shape.py
CHANGED
@@ -10,7 +10,8 @@ options = [{
|
|
10 |
"label":
|
11 |
"A",
|
12 |
"imgSrc":
|
13 |
-
os.path.join(os.path.dirname(__file__),
|
|
|
14 |
"value":
|
15 |
"a"
|
16 |
}, "b", "c", "d"]
|
|
|
10 |
"label":
|
11 |
"A",
|
12 |
"imgSrc":
|
13 |
+
os.path.join(os.path.dirname(__file__),
|
14 |
+
'../../../../resources/screen.jpeg'),
|
15 |
"value":
|
16 |
"a"
|
17 |
}, "b", "c", "d"]
|
components/Markdown/demos/custom_tags/select-box/card_shape_width_auto.py
CHANGED
@@ -10,7 +10,8 @@ options = [{
|
|
10 |
"label":
|
11 |
"A",
|
12 |
"imgSrc":
|
13 |
-
os.path.join(os.path.dirname(__file__),
|
|
|
14 |
"value":
|
15 |
"a"
|
16 |
}, "b", "c", "d"]
|
|
|
10 |
"label":
|
11 |
"A",
|
12 |
"imgSrc":
|
13 |
+
os.path.join(os.path.dirname(__file__),
|
14 |
+
'../../../../resources/screen.jpeg'),
|
15 |
"value":
|
16 |
"a"
|
17 |
}, "b", "c", "d"]
|
components/Markdown/demos/multimodal.py
CHANGED
@@ -6,7 +6,7 @@ import modelscope_studio as mgr
|
|
6 |
|
7 |
|
8 |
def resolve_assets(relative_path):
|
9 |
-
return os.path.join(os.path.dirname(__file__), "
|
10 |
relative_path)
|
11 |
|
12 |
|
|
|
6 |
|
7 |
|
8 |
def resolve_assets(relative_path):
|
9 |
+
return os.path.join(os.path.dirname(__file__), "../../resources",
|
10 |
relative_path)
|
11 |
|
12 |
|
components/Markdown/resources/audio.wav
DELETED
Binary file (44.8 kB)
|
|
components/Markdown/resources/bot.jpeg
DELETED
Binary file (5.23 kB)
|
|
components/Markdown/resources/custom_components/custom_select.js
DELETED
@@ -1,26 +0,0 @@
|
|
1 |
-
(props, cc, { el, onMount }) => {
|
2 |
-
const options = JSON.parse(props.options);
|
3 |
-
el.innerHTML = `
|
4 |
-
${options
|
5 |
-
.map((option) => {
|
6 |
-
return `<div>
|
7 |
-
<label>${option} <input type="radio"/></label>
|
8 |
-
<div>`;
|
9 |
-
})
|
10 |
-
.join('')}
|
11 |
-
`;
|
12 |
-
onMount(() => {
|
13 |
-
const inputs = Array.from(el.getElementsByTagName('input'));
|
14 |
-
Array.from(el.getElementsByTagName('label')).forEach((label, i) => {
|
15 |
-
label.addEventListener('click', () => {
|
16 |
-
inputs.forEach((input) => {
|
17 |
-
input.checked = false;
|
18 |
-
});
|
19 |
-
const input = label.getElementsByTagName('input')[0];
|
20 |
-
input.checked = true;
|
21 |
-
// Use cc.dispatch to trigger events.
|
22 |
-
cc.dispatch(options[i]);
|
23 |
-
});
|
24 |
-
});
|
25 |
-
});
|
26 |
-
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
components/Markdown/resources/dog.mp4
DELETED
@@ -1,3 +0,0 @@
|
|
1 |
-
version https://git-lfs.github.com/spec/v1
|
2 |
-
oid sha256:39d086ce29e48cf76e5042d2f3f0611ee46575f70fa3dc0c40dd4cfffde3d933
|
3 |
-
size 8626383
|
|
|
|
|
|
|
|
components/Markdown/resources/screen.jpeg
DELETED
Binary file (7.13 kB)
|
|
components/Markdown/resources/user.jpeg
DELETED
Binary file (16.4 kB)
|
|
components/WaterfallGallery/README-zh_CN.md
ADDED
@@ -0,0 +1,71 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
# WaterfallGallery
|
2 |
+
|
3 |
+
瀑布流形式的 gradio Gallery。
|
4 |
+
|
5 |
+
- 支持瀑布流展示图片
|
6 |
+
- 增加点赞按钮,支持图片额外绑定`like`事件
|
7 |
+
- 增加 action 按钮,支持图片额外绑定`click`事件
|
8 |
+
- 响应式 columns
|
9 |
+
|
10 |
+
## 如何使用
|
11 |
+
|
12 |
+
### 基本使用
|
13 |
+
|
14 |
+
<demo name="basic"></demo>
|
15 |
+
|
16 |
+
### 响应式 columns
|
17 |
+
|
18 |
+
<demo name="responsive_columns"></demo>
|
19 |
+
|
20 |
+
### 加载更多
|
21 |
+
|
22 |
+
<demo name="load_more"></demo>
|
23 |
+
|
24 |
+
### 点赞/点击反馈
|
25 |
+
|
26 |
+
<demo name="like_click_feedback"></demo>
|
27 |
+
|
28 |
+
## API 及参数列表
|
29 |
+
|
30 |
+
以下 API 均为在原有 gradio Gallery 外的额外拓展参数。
|
31 |
+
|
32 |
+
### value
|
33 |
+
|
34 |
+
接口定义:
|
35 |
+
|
36 |
+
```python
|
37 |
+
GalleryImageType = Union[np.ndarray, _Image.Image, FileData, Path, str]
|
38 |
+
CaptionedGalleryImageType = Tuple[GalleryImageType, str]
|
39 |
+
|
40 |
+
|
41 |
+
class GalleryImage(GradioModel):
|
42 |
+
image: Union[FileData, Path, str]
|
43 |
+
caption: Optional[str] = None
|
44 |
+
liked: Optional[bool] = None
|
45 |
+
# custom meta data
|
46 |
+
meta: Optional[Any] = None
|
47 |
+
|
48 |
+
|
49 |
+
class GalleryData(GradioRootModel):
|
50 |
+
root: List[GalleryImage]
|
51 |
+
```
|
52 |
+
|
53 |
+
### props
|
54 |
+
|
55 |
+
| 属性 | 类型 | 默认值 | 描述 |
|
56 |
+
| ---------------------- | -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
57 |
+
| has_more | bool | None | 如果为 True,会显示 "加载更多" 按钮 |
|
58 |
+
| load_more_button_props | dict | None | ”加载更多“按钮属性,同 gradio Button |
|
59 |
+
| 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] 为键表示每个尺寸屏幕的图像数量。 |
|
60 |
+
| gap | tuple \| int | 8 | 图片之间的间隙 (px)。 如果传递一个元组,则第一个值是宽度的间隙,第二个值是高度的间隙。如果传递数字,则宽度和高度的间隙相同 |
|
61 |
+
| action_label | str | 'Click' | action 按钮的文案。当 `clickable`为 True 时才展示 |
|
62 |
+
| likeable | bool | None | 是否显示喜欢或不喜欢按钮。 可以通过显示绑定 `.like` 方法自动设置。 |
|
63 |
+
| clickable | bool | None | 是否显示 action 按钮。 可以通过显示绑定 `.click` 方法自动设置。 |
|
64 |
+
|
65 |
+
### event listeners
|
66 |
+
|
67 |
+
| 事件 | 描述 |
|
68 |
+
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
69 |
+
| `mgr.WaterfallGallery.load_more(fn, ···)` | “加载更多”按钮被点击时触发。 |
|
70 |
+
| `mgr.WaterfallGallery.like(fn, ···)` | 当点赞/点踩按钮被点击时触发,EventData 为:<br/> - index:当前图片索引。<br/> - value:当前图片信息。 <br/> - liked:当前图片的喜欢/不喜欢状态,可以为 None,代表用户取消操作。 |
|
71 |
+
| `mgr.WaterfallGallery.click(fn, ···)` | action 按钮被点击时触发,EventData 为:<br/> - index:当前图片索引。<br/> - value:当前图片信息。 |
|
components/WaterfallGallery/README.md
ADDED
@@ -0,0 +1,71 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
# WaterfallGallery
|
2 |
+
|
3 |
+
gradio Gallery with waterfall flow.
|
4 |
+
|
5 |
+
- Support waterfall flow display images
|
6 |
+
- Added a like button, support additional binding of `like` events to images
|
7 |
+
- Added an action button, support additional binding of `click` event to images
|
8 |
+
- Responsive columns
|
9 |
+
|
10 |
+
## How to Use
|
11 |
+
|
12 |
+
### Basic Usage
|
13 |
+
|
14 |
+
<demo name="basic"></demo>
|
15 |
+
|
16 |
+
### Responsive columns
|
17 |
+
|
18 |
+
<demo name="responsive_columns"></demo>
|
19 |
+
|
20 |
+
### Load More
|
21 |
+
|
22 |
+
<demo name="load_more"></demo>
|
23 |
+
|
24 |
+
### Like/Click Feedback
|
25 |
+
|
26 |
+
<demo name="like_click_feedback"></demo>
|
27 |
+
|
28 |
+
## API and Parameter List
|
29 |
+
|
30 |
+
The following APIs are additional extended parameters beyond the original gradio Gallery.
|
31 |
+
|
32 |
+
### value
|
33 |
+
|
34 |
+
Interface definition:
|
35 |
+
|
36 |
+
```python
|
37 |
+
GalleryImageType = Union[np.ndarray, _Image.Image, FileData, Path, str]
|
38 |
+
CaptionedGalleryImageType = Tuple[GalleryImageType, str]
|
39 |
+
|
40 |
+
|
41 |
+
class GalleryImage(GradioModel):
|
42 |
+
image: Union[FileData, Path, str]
|
43 |
+
caption: Optional[str] = None
|
44 |
+
liked: Optional[bool] = None
|
45 |
+
# custom meta data
|
46 |
+
meta: Optional[Any] = None
|
47 |
+
|
48 |
+
|
49 |
+
class GalleryData(GradioRootModel):
|
50 |
+
root: List[GalleryImage]
|
51 |
+
```
|
52 |
+
|
53 |
+
### props
|
54 |
+
|
55 |
+
| Attribute | Type | Default Value | Description |
|
56 |
+
| ---------------------- | -------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
57 |
+
| has_more | bool | None | If True, will show the "Load More" button. |
|
58 |
+
| lode_more_button_props | dict | None | “Load More” button properties, same as gradio Button |
|
59 |
+
| 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. |
|
60 |
+
| 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. |
|
61 |
+
| action_label | str | 'Click' | The label for the action button. Only displayed if `clickable` is set to True. |
|
62 |
+
| 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. |
|
63 |
+
| 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. |
|
64 |
+
|
65 |
+
### Event Listeners
|
66 |
+
|
67 |
+
| Event | Description |
|
68 |
+
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
69 |
+
| `mgr.WaterfallGallery.load_more(fn, ···)` | Triggered when the "Load More" button is clicked. |
|
70 |
+
| `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. |
|
71 |
+
| `mgr.WaterfallGallery.click(fn, ···)` | Triggered when the action button is clicked, EventData is: <br/> - index: current image index. <br/> - value: current image info. |
|
components/WaterfallGallery/app.py
ADDED
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
from components.Docs import Docs
|
2 |
+
|
3 |
+
docs = Docs(__file__)
|
4 |
+
|
5 |
+
if __name__ == "__main__":
|
6 |
+
docs.render().queue().launch()
|
components/WaterfallGallery/demos/basic.py
ADDED
@@ -0,0 +1,30 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import os
|
2 |
+
|
3 |
+
import gradio as gr
|
4 |
+
|
5 |
+
import modelscope_studio as mgr
|
6 |
+
|
7 |
+
|
8 |
+
def resolve_assets(relative_path):
|
9 |
+
return os.path.join(os.path.dirname(__file__), "../../resources",
|
10 |
+
relative_path)
|
11 |
+
|
12 |
+
|
13 |
+
with gr.Blocks() as demo:
|
14 |
+
mgr.WaterfallGallery(
|
15 |
+
value=[
|
16 |
+
resolve_assets('modelscope.svg'),
|
17 |
+
# pass a tuple
|
18 |
+
[resolve_assets('bot.jpeg'), 'bot'],
|
19 |
+
# pass a dict
|
20 |
+
{
|
21 |
+
"image": resolve_assets('user.jpeg'),
|
22 |
+
"caption": "user",
|
23 |
+
},
|
24 |
+
resolve_assets('screen.jpeg'),
|
25 |
+
],
|
26 |
+
columns=2,
|
27 |
+
height=600)
|
28 |
+
|
29 |
+
if __name__ == "__main__":
|
30 |
+
demo.queue().launch()
|
components/WaterfallGallery/demos/like_click_feedback.py
ADDED
@@ -0,0 +1,37 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import os
|
2 |
+
|
3 |
+
import gradio as gr
|
4 |
+
|
5 |
+
import modelscope_studio as mgr
|
6 |
+
|
7 |
+
|
8 |
+
def resolve_assets(relative_path):
|
9 |
+
return os.path.join(os.path.dirname(__file__), "../../resources",
|
10 |
+
relative_path)
|
11 |
+
|
12 |
+
|
13 |
+
def fn(data: gr.EventData):
|
14 |
+
print(data._data)
|
15 |
+
|
16 |
+
|
17 |
+
with gr.Blocks() as demo:
|
18 |
+
gallery = mgr.WaterfallGallery(
|
19 |
+
value=[
|
20 |
+
resolve_assets('modelscope.svg'),
|
21 |
+
# pass a tuple
|
22 |
+
[resolve_assets('bot.jpeg'), 'bot'],
|
23 |
+
# pass a dict
|
24 |
+
{
|
25 |
+
"image": resolve_assets('user.jpeg'),
|
26 |
+
"caption": "user",
|
27 |
+
},
|
28 |
+
resolve_assets('screen.jpeg'),
|
29 |
+
],
|
30 |
+
action_label="Click Me!",
|
31 |
+
columns=2,
|
32 |
+
height=600)
|
33 |
+
gallery.like(fn=fn)
|
34 |
+
gallery.click(fn=fn)
|
35 |
+
|
36 |
+
if __name__ == "__main__":
|
37 |
+
demo.queue().launch()
|
components/WaterfallGallery/demos/load_more.py
ADDED
@@ -0,0 +1,45 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import os
|
2 |
+
import time
|
3 |
+
|
4 |
+
import gradio as gr
|
5 |
+
|
6 |
+
import modelscope_studio as mgr
|
7 |
+
|
8 |
+
|
9 |
+
def resolve_assets(relative_path):
|
10 |
+
return os.path.join(os.path.dirname(__file__), "../../resources",
|
11 |
+
relative_path)
|
12 |
+
|
13 |
+
|
14 |
+
def load_more(_gallery):
|
15 |
+
time.sleep(1)
|
16 |
+
_gallery.append(resolve_assets('modelscope.svg'))
|
17 |
+
_gallery.append(resolve_assets('bot.jpeg'))
|
18 |
+
_gallery.append(resolve_assets('user.jpeg'))
|
19 |
+
_gallery.append(resolve_assets('screen.jpeg'))
|
20 |
+
has_more = True
|
21 |
+
if (len(_gallery) > 10):
|
22 |
+
has_more = False
|
23 |
+
return gr.update(value=_gallery, has_more=has_more)
|
24 |
+
|
25 |
+
|
26 |
+
with gr.Blocks() as demo:
|
27 |
+
gallery = mgr.WaterfallGallery(
|
28 |
+
value=[
|
29 |
+
resolve_assets('modelscope.svg'),
|
30 |
+
# pass a tuple
|
31 |
+
[resolve_assets('bot.jpeg'), 'bot'],
|
32 |
+
# pass a dict
|
33 |
+
{
|
34 |
+
"image": resolve_assets('user.jpeg'),
|
35 |
+
"caption": "user",
|
36 |
+
},
|
37 |
+
resolve_assets('screen.jpeg'),
|
38 |
+
],
|
39 |
+
has_more=True,
|
40 |
+
columns=2,
|
41 |
+
height=600)
|
42 |
+
gallery.load_more(fn=load_more, inputs=[gallery], outputs=[gallery])
|
43 |
+
|
44 |
+
if __name__ == "__main__":
|
45 |
+
demo.queue().launch()
|
components/WaterfallGallery/demos/responsive_columns.py
ADDED
@@ -0,0 +1,35 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import os
|
2 |
+
|
3 |
+
import gradio as gr
|
4 |
+
|
5 |
+
import modelscope_studio as mgr
|
6 |
+
|
7 |
+
|
8 |
+
def resolve_assets(relative_path):
|
9 |
+
return os.path.join(os.path.dirname(__file__), "../../resources",
|
10 |
+
relative_path)
|
11 |
+
|
12 |
+
|
13 |
+
def fn():
|
14 |
+
return gr.update(columns={"xs": 2, "lg": 3})
|
15 |
+
|
16 |
+
|
17 |
+
with gr.Blocks() as demo:
|
18 |
+
gallery = mgr.WaterfallGallery(
|
19 |
+
value=[
|
20 |
+
resolve_assets('modelscope.svg'),
|
21 |
+
# pass a tuple
|
22 |
+
[resolve_assets('bot.jpeg'), 'bot'],
|
23 |
+
# pass a dict
|
24 |
+
{
|
25 |
+
"image": resolve_assets('user.jpeg'),
|
26 |
+
"caption": "user",
|
27 |
+
},
|
28 |
+
resolve_assets('screen.jpeg'),
|
29 |
+
],
|
30 |
+
columns=[2, 3, 4],
|
31 |
+
height=600)
|
32 |
+
gr.Button("Update Columns").click(fn=fn, outputs=[gallery])
|
33 |
+
|
34 |
+
if __name__ == "__main__":
|
35 |
+
demo.queue().launch()
|
components/{Chatbot/resources → resources}/audio.wav
RENAMED
File without changes
|
components/{Chatbot/resources → resources}/bot.jpeg
RENAMED
File without changes
|
components/{Chatbot/resources → resources}/custom_components/custom_select.js
RENAMED
File without changes
|
components/{Chatbot/resources → resources}/dog.mp4
RENAMED
File without changes
|
components/{Chatbot/resources → resources}/image-bot.jpeg
RENAMED
File without changes
|
components/resources/modelscope.svg
ADDED
components/{Chatbot/resources → resources}/music-bot.jpeg
RENAMED
File without changes
|
components/{Chatbot/resources → resources}/screen.jpeg
RENAMED
File without changes
|
components/{Chatbot/resources → resources}/user.jpeg
RENAMED
File without changes
|
modelscope_studio-0.0.8-py3-none-any.whl → modelscope_studio-0.1.0-py3-none-any.whl
RENAMED
@@ -1,3 +1,3 @@
|
|
1 |
version https://git-lfs.github.com/spec/v1
|
2 |
-
oid sha256:
|
3 |
-
size
|
|
|
1 |
version https://git-lfs.github.com/spec/v1
|
2 |
+
oid sha256:d242554b104b98ba49147354480e81357da280817ac3fbb22a556a268226f002
|
3 |
+
size 6194194
|
requirements.txt
CHANGED
@@ -1,2 +1,2 @@
|
|
1 |
modelscope_studio
|
2 |
-
modelscope_studio-0.0
|
|
|
1 |
modelscope_studio
|
2 |
+
modelscope_studio-0.1.0-py3-none-any.whl
|
src/pyproject.toml
CHANGED
@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
|
|
8 |
|
9 |
[project]
|
10 |
name = "modelscope_studio"
|
11 |
-
version = "0.0
|
12 |
description = "A set of extension component, inluding components for conversational input and display in multimodal scenarios, as well as more components for vertical scenarios."
|
13 |
readme = "README.md"
|
14 |
license = "Apache-2.0"
|
|
|
8 |
|
9 |
[project]
|
10 |
name = "modelscope_studio"
|
11 |
+
version = "0.1.0"
|
12 |
description = "A set of extension component, inluding components for conversational input and display in multimodal scenarios, as well as more components for vertical scenarios."
|
13 |
readme = "README.md"
|
14 |
license = "Apache-2.0"
|