Coloring commited on
Commit
e0dfb76
1 Parent(s): fd120f6

feat: WaterfallGallery docs

Browse files
Files changed (40) hide show
  1. README.md +1 -0
  2. app.py +2 -0
  3. components/Chatbot/README-zh_CN.md +5 -4
  4. components/Chatbot/README.md +4 -4
  5. components/Chatbot/demos/accordion.py +1 -1
  6. components/Chatbot/demos/basic.py +8 -8
  7. components/Chatbot/demos/multi_bots.py +1 -1
  8. components/Chatbot/demos/multimodal.py +1 -1
  9. components/Markdown/README-zh_CN.md +4 -4
  10. components/Markdown/README.md +4 -4
  11. components/Markdown/demos/custom-tag3.py +1 -1
  12. components/Markdown/demos/custom-tag4.py +1 -1
  13. components/Markdown/demos/custom_tags/select-box/card_shape.py +2 -1
  14. components/Markdown/demos/custom_tags/select-box/card_shape_width_auto.py +2 -1
  15. components/Markdown/demos/multimodal.py +1 -1
  16. components/Markdown/resources/audio.wav +0 -0
  17. components/Markdown/resources/bot.jpeg +0 -0
  18. components/Markdown/resources/custom_components/custom_select.js +0 -26
  19. components/Markdown/resources/dog.mp4 +0 -3
  20. components/Markdown/resources/screen.jpeg +0 -0
  21. components/Markdown/resources/user.jpeg +0 -0
  22. components/WaterfallGallery/README-zh_CN.md +71 -0
  23. components/WaterfallGallery/README.md +71 -0
  24. components/WaterfallGallery/app.py +6 -0
  25. components/WaterfallGallery/demos/basic.py +30 -0
  26. components/WaterfallGallery/demos/like_click_feedback.py +37 -0
  27. components/WaterfallGallery/demos/load_more.py +45 -0
  28. components/WaterfallGallery/demos/responsive_columns.py +35 -0
  29. components/{Chatbot/resources → resources}/audio.wav +0 -0
  30. components/{Chatbot/resources → resources}/bot.jpeg +0 -0
  31. components/{Chatbot/resources → resources}/custom_components/custom_select.js +0 -0
  32. components/{Chatbot/resources → resources}/dog.mp4 +0 -0
  33. components/{Chatbot/resources → resources}/image-bot.jpeg +0 -0
  34. components/resources/modelscope.svg +1 -0
  35. components/{Chatbot/resources → resources}/music-bot.jpeg +0 -0
  36. components/{Chatbot/resources → resources}/screen.jpeg +0 -0
  37. components/{Chatbot/resources → resources}/user.jpeg +0 -0
  38. modelscope_studio-0.0.8-py3-none-any.whl → modelscope_studio-0.1.0-py3-none-any.whl +2 -2
  39. requirements.txt +1 -1
  40. 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
- | `mgr.Chatbot.custom(fn, ···)` | 自定义标签触发事件时触发,EventData 为:<br/> - index:前 message 的 index tuple。<br/> - tag:当前触发的标签。<br/> - tag_index:当前触发标签的 index,此 index 在 mesage 的 index tuple 基础上重新计算。<br/> - value:自定义传入的值。 |
 
 
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 previous message.<br/> - tag: The current tag that triggered the event.<br/> - tag_index: The index of the current triggered tag, re-calculated based on the index tuple of the message.<br/> - value: The custom value passed in. |
 
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__), "../resources",
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__), "../resources/user.jpeg"),
39
- {
40
- "name":
41
- "bot",
42
- "avatar":
43
- os.path.join(os.path.dirname(__file__),
44
- "../resources/bot.jpeg")
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__), "../resources",
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__), "../resources",
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="./resources/custom_components/custom_select.js"></file>
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/> - 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 在 mesage 的 index tuple 基础上重新计算。<br/> - value:自定义传入的值。 |
 
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="./resources/custom_components/custom_select.js"></file>
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/> - 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. |
 
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__), "../resources",
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__), "../resources",
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__), '../../../resources/screen.jpeg'),
 
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__), '../../../resources/screen.jpeg'),
 
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__), "../resources",
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:8aa910e4ddb11e21d9d6db65514e8fdfb229461d41784a8ea2c35c4452aa1aaf
3
- size 6129844
 
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.8-py3-none-any.whl
 
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.8"
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"