Hugging Face's logo

Spaces:
modelscope
/
modelscope-studio
Running

App Files Community
1

update

#1
by justmywyw - opened
base: refs/heads/main
←
from: refs/pr/1
Discussion Files changed
+207
-2195
This view is limited to 50 files because it contains too many changes.  See the raw diff here.
Files changed (50) hide show
  1. .gitattributes +4 -3
  2. DOCS.md +15 -0
  3. Dockerfile +2 -1
  4. README-zh_CN.md +1 -19
  5. README.md +4 -22
  6. api/app.py +0 -19
  7. api/load-zh_CN.md +0 -30
  8. api/load.md +0 -30
  9. app.py +1 -9
  10. components/Chatbot/README-zh_CN.md +19 -34
  11. components/Chatbot/README.md +18 -33
  12. components/Chatbot/demos/.DS_Store +0 -0
  13. components/Chatbot/demos/accordion.py +1 -4
  14. components/Chatbot/demos/basic.py +8 -9
  15. components/Chatbot/demos/chart.py +0 -43
  16. components/Chatbot/demos/message_config.py +0 -1
  17. components/Chatbot/demos/multi_bots.py +1 -2
  18. components/Chatbot/demos/multimodal.py +1 -2
  19. components/Chatbot/demos/select-box.py +0 -1
  20. components/{resources → Chatbot/resources}/audio.wav +0 -0
  21. components/{resources → Chatbot/resources}/bot.jpeg +0 -0
  22. components/Chatbot/resources/custom_components/custom_select.js +26 -0
  23. components/{resources → Chatbot/resources}/dog.mp4 +0 -0
  24. components/{resources → Chatbot/resources}/image-bot.jpeg +0 -0
  25. components/{resources → Chatbot/resources}/music-bot.jpeg +0 -0
  26. components/{resources → Chatbot/resources}/screen.jpeg +0 -0
  27. components/{resources → Chatbot/resources}/user.jpeg +0 -0
  28. components/Docs.py +12 -33
  29. components/Flow/README-zh_CN.md +0 -109
  30. components/Flow/README.md +0 -108
  31. components/Flow/app.py +0 -6
  32. components/Flow/define_schema-zh_CN.md +0 -266
  33. components/Flow/define_schema.md +0 -262
  34. components/Flow/demos/basic.py +0 -35
  35. components/Flow/demos/component_options.py +0 -108
  36. components/Flow/demos/custom_node_type.py +0 -69
  37. components/Flow/schema/agents_schema.json +0 -66
  38. components/Flow/schema/agents_schema.py +0 -59
  39. components/Lifecycle/README-zh_CN.md +0 -53
  40. components/Lifecycle/README.md +0 -53
  41. components/Lifecycle/app.py +0 -6
  42. components/Lifecycle/demos/basic.py +0 -28
  43. components/Lifecycle/demos/language_adaptation.py +0 -41
  44. components/Lifecycle/demos/theme_adaptation.py +0 -28
  45. components/Markdown/README-zh_CN.md +13 -23
  46. components/Markdown/README.md +16 -25
  47. components/Markdown/custom_tags/chart-zh_CN.md +0 -17
  48. components/Markdown/custom_tags/chart.md +0 -17
  49. components/Markdown/demos/accordion.py +3 -4
  50. components/Markdown/demos/basic.py +0 -1
.gitattributes CHANGED
@@ -31,6 +31,7 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
31
  **/*ckpt*.meta filter=lfs diff=lfs merge=lfs -text
32
  **/*ckpt*.index filter=lfs diff=lfs merge=lfs -text
33
  *.safetensors filter=lfs diff=lfs merge=lfs -text
34
- *.ckpt filter=lfs diff=lfs merge=lfs -text
35
- *.whl filter=lfs diff=lfs merge=lfs -text
36
- *.mp4 filter=lfs diff=lfs merge=lfs -text
 
 
31
  **/*ckpt*.meta filter=lfs diff=lfs merge=lfs -text
32
  **/*ckpt*.index filter=lfs diff=lfs merge=lfs -text
33
  *.safetensors filter=lfs diff=lfs merge=lfs -text
34
+ *.ckpt filter=lfs diff=lfs merge=lfs -textcomponents/Chatbot/resources/dog.mp4 filter=lfs diff=lfs merge=lfs -text
35
+ components/Markdown/resources/dog.mp4 filter=lfs diff=lfs merge=lfs -text
36
+ modelscope_gradio_components-0.0.1b8-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
37
+ components/Chatbot/resources/dog.mp4 filter=lfs diff=lfs merge=lfs -text
DOCS.md ADDED
@@ -0,0 +1,15 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # ModelScope Gradio Components
2
+
3
+ ModelScope_Gradio_Components is a set of extension component libraries based on gradio 4.x, dedicated to serving the various extension needs of gradio applications within the ModelScope Studio. It mainly focuses on enhancing conversational scenarios, supporting multimodal contexts, and providing assistance for various other specialized scenarios.
4
+
5
+ ## Install
6
+
7
+ ```sh
8
+ pip install modelscope_gradio_components
9
+ ```
10
+
11
+ ## Components
12
+
13
+ - <tab-link component-tab="Chatbot">Chatbot</tab-link>
14
+ - <tab-link component-tab="MultimodalInput">MultimodalInput</tab-link>
15
+ - <tab-link component-tab="Markdown">Markdown</tab-link>
Dockerfile CHANGED
@@ -1,3 +1,4 @@
 
1
  FROM python:3.9
2
 
3
  WORKDIR /code
@@ -6,7 +7,7 @@ COPY --link --chown=1000 . .
6
 
7
  RUN mkdir -p /tmp/cache/
8
  RUN chmod a+rwx -R /tmp/cache/
9
- ENV TRANSFORMERS_CACHE=/tmp/cache/
10
 
11
  RUN pip install --no-cache-dir -r requirements.txt
12
 
 
1
+
2
  FROM python:3.9
3
 
4
  WORKDIR /code
 
7
 
8
  RUN mkdir -p /tmp/cache/
9
  RUN chmod a+rwx -R /tmp/cache/
10
+ ENV TRANSFORMERS_CACHE=/tmp/cache/
11
 
12
  RUN pip install --no-cache-dir -r requirements.txt
13
 
README-zh_CN.md CHANGED
@@ -1,15 +1,4 @@
1
- <h1>ModelScope Studio</h1>
2
-
3
- <p align="center">
4
- <img src="https://modelscope.oss-cn-beijing.aliyuncs.com/modelscope.gif" height="60" style="vertical-align: middle;"/>
5
- <span style="font-size: 30px; vertical-align: middle;">
6
- ✖️
7
- </span>
8
- <img src="https://github.com/gradio-app/gradio/raw/main/readme_files/gradio.svg" height="60" style="vertical-align: middle;">
9
- <p>
10
-
11
- <p align="center">
12
- <a href="https://github.com/modelscope/modelscope-studio">GitHub</a> | 🤖 <a href="https://modelscope.cn/studios/modelscope/modelscope-studio/summary">ModelScope Studio</a> ｜ 🤗 <a href="https://huggingface.co/spaces/modelscope/modelscope-studio">Hugging Face Space</a>
13
 
14
  `modelscope_studio` 是一套基于 gradio 4.x 的扩展组件库，致力于服务于 ModelScope 创空间中对于 gradio 应用的各类扩展需求，目前主要聚集在对话场景增强、多模态场景以及一些其他垂直场景支持。
15
 
@@ -19,15 +8,8 @@
19
  pip install modelscope_studio
20
  ```
21
 
22
- ## API
23
-
24
- - <tab-link component-tab="API">load</tab-link>
25
-
26
  ## Components
27
 
28
  - <tab-link component-tab="Chatbot">Chatbot</tab-link>
29
  - <tab-link component-tab="MultimodalInput">MultimodalInput</tab-link>
30
  - <tab-link component-tab="Markdown">Markdown</tab-link>
31
- - <tab-link component-tab="WaterfallGallery">WaterfallGallery</tab-link>
32
- - <tab-link component-tab="Lifecycle">Lifecycle</tab-link>
33
- - <tab-link component-tab="Flow">Flow</tab-link>
 
1
+ # ModelScope Studio
 
 
 
 
 
 
 
 
 
 
 
2
 
3
  `modelscope_studio` 是一套基于 gradio 4.x 的扩展组件库，致力于服务于 ModelScope 创空间中对于 gradio 应用的各类扩展需求，目前主要聚集在对话场景增强、多模态场景以及一些其他垂直场景支持。
4
 
 
8
  pip install modelscope_studio
9
  ```
10
 
 
 
 
 
11
  ## Components
12
 
13
  - <tab-link component-tab="Chatbot">Chatbot</tab-link>
14
  - <tab-link component-tab="MultimodalInput">MultimodalInput</tab-link>
15
  - <tab-link component-tab="Markdown">Markdown</tab-link>
 
 
 
README.md CHANGED
@@ -6,26 +6,15 @@ tags:
6
  - Markdown
7
  - gradio-template-Chatbot
8
  - gradio-template-Markdown
9
- title: modelscope-studio
10
- colorFrom: blue
11
- colorTo: gray
12
  sdk: docker
13
  pinned: false
14
  license: apache-2.0
15
  ---
16
 
17
- <h1>ModelScope Studio</h1>
18
-
19
- <p align="center">
20
- <img src="https://modelscope.oss-cn-beijing.aliyuncs.com/modelscope.gif" height="60" style="vertical-align: middle;"/>
21
- <span style="font-size: 30px; vertical-align: middle;">
22
- ✖️
23
- </span>
24
- <img src="https://github.com/gradio-app/gradio/raw/main/readme_files/gradio.svg" height="60" style="vertical-align: middle;">
25
- <p>
26
-
27
- <p align="center">
28
- <a href="https://github.com/modelscope/modelscope-studio">GitHub</a> | 🤖 <a href="https://modelscope.cn/studios/modelscope/modelscope-studio/summary">ModelScope Studio</a> ｜ 🤗 <a href="https://huggingface.co/spaces/modelscope/modelscope-studio">Hugging Face Space</a>
29
 
30
  `modelscope_studio` is a set of extension component libraries based on gradio 4.x, dedicated to serving the various extension needs of gradio applications within the ModelScope Studio. It mainly focuses on enhancing conversational scenarios, supporting multimodal contexts, and providing assistance for various other specialized scenarios.
31
 
@@ -35,15 +24,8 @@ license: apache-2.0
35
  pip install modelscope_studio
36
  ```
37
 
38
- ## API
39
-
40
- - <tab-link component-tab="API">load</tab-link>
41
-
42
  ## Components
43
 
44
  - <tab-link component-tab="Chatbot">Chatbot</tab-link>
45
  - <tab-link component-tab="MultimodalInput">MultimodalInput</tab-link>
46
  - <tab-link component-tab="Markdown">Markdown</tab-link>
47
- - <tab-link component-tab="Lifecycle">Lifecycle</tab-link>
48
- - <tab-link component-tab="WaterfallGallery">WaterfallGallery</tab-link>
49
- - <tab-link component-tab="Flow">Flow</tab-link>
 
6
  - Markdown
7
  - gradio-template-Chatbot
8
  - gradio-template-Markdown
9
+ title: modelscope_gradio_components V0.0.1b8
10
+ colorFrom: red
11
+ colorTo: red
12
  sdk: docker
13
  pinned: false
14
  license: apache-2.0
15
  ---
16
 
17
+ # ModelScope Studio
 
 
 
 
 
 
 
 
 
 
 
18
 
19
  `modelscope_studio` is a set of extension component libraries based on gradio 4.x, dedicated to serving the various extension needs of gradio applications within the ModelScope Studio. It mainly focuses on enhancing conversational scenarios, supporting multimodal contexts, and providing assistance for various other specialized scenarios.
20
 
 
24
  pip install modelscope_studio
25
  ```
26
 
 
 
 
 
27
  ## Components
28
 
29
  - <tab-link component-tab="Chatbot">Chatbot</tab-link>
30
  - <tab-link component-tab="MultimodalInput">MultimodalInput</tab-link>
31
  - <tab-link component-tab="Markdown">Markdown</tab-link>
 
 
 
api/app.py DELETED
@@ -1,19 +0,0 @@
1
- import os
2
-
3
- from components.Docs import Docs
4
-
5
-
6
- def resolve(relative_path: str):
7
- return os.path.join(os.path.dirname(__file__), relative_path)
8
-
9
-
10
- docs = Docs(
11
- __file__,
12
- markdown_files=([
13
- filename for filename in os.listdir(resolve('.'))
14
- if filename.endswith(".md")
15
- ]),
16
- )
17
-
18
- if __name__ == "__main__":
19
- docs.render().queue().launch()
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
api/load-zh_CN.md DELETED
@@ -1,30 +0,0 @@
1
- # load
2
-
3
- 该特性与 [gr.load](https://www.gradio.app/docs/gradio/load) 类似。允许用户从已有创空间 [ModelScope Studio](https://modelscope.cn/studios) 仓库构造 demo。
4
-
5
- ## 如何使用
6
-
7
- ### 基本使用
8
-
9
- ```python
10
- import modelscope_studio as mgr
11
- demo = mgr.load("modelscope/modelscope-studio")
12
- demo.launch()
13
- ```
14
-
15
- ### 使用访问令牌
16
-
17
- 使用访问令牌来加载私有创空间。在这里找到您的 sdk 令牌：https://modelscope.cn/my/myaccesstoken。
18
-
19
- ```python
20
- import modelscope_studio as mgr
21
- demo = mgr.load("modelscope/modelscope-studio", token="YOUR_ACCESS_TOKEN")
22
- demo.launch()
23
- ```
24
-
25
- ## 初始化
26
-
27
- | 属性 | 类型 | 默认值 | 描述 |
28
- | ----- | ---- | ------ | ---------------------------------------------------------------------------------------------------- |
29
- | name | str | None | 必填。 创空间名称（如: "modelscope/modelscope-studio"）。 |
30
- | token | str | None | 用于加载私有创空间的可选访问令牌。 在这里找到您的 sdk 令牌：https://modelscope.cn/my/myaccesstoken。 |
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
api/load.md DELETED
@@ -1,30 +0,0 @@
1
- # load
2
-
3
- This feature is similar to [gr.load](https://www.gradio.app/docs/gradio/load). Allow users to Construct a demo from a [ModelScope Studio](https://modelscope.cn/studios) repo.
4
-
5
- ## How to Use
6
-
7
- ### Basic Usage
8
-
9
- ```python
10
- import modelscope_studio as mgr
11
- demo = mgr.load("modelscope/modelscope-studio")
12
- demo.launch()
13
- ```
14
-
15
- ### With Access Token
16
-
17
- Use the access token to load a private ModelScope Studio repo. Find your sdk token here: https://modelscope.cn/my/myaccesstoken.
18
-
19
- ```python
20
- import modelscope_studio as mgr
21
- demo = mgr.load("modelscope/modelscope-studio", token="YOUR_ACCESS_TOKEN")
22
- demo.launch()
23
- ```
24
-
25
- ## Initialization
26
-
27
- | Parameter | Type | Default Value | Description |
28
- | --------- | ---- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
29
- | name | str | None | required. the name of the ModelScope Studio repo (e.g. "modelscope/modelscope-studio"). |
30
- | token | str | None | optional access token for loading private ModelScope Studio repo. Find your sdk token here: https://modelscope.cn/my/myaccesstoken. |
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
app.py CHANGED
@@ -1,24 +1,16 @@
1
  import gradio as gr
2
- from api.app import docs as api_docs
3
  from components.Chatbot.app import docs as chatbot_docs
4
  from components.Docs import Docs
5
- from components.Flow.app import docs as flow_docs
6
- from components.Lifecycle.app import docs as lifecycle_docs
7
  from components.Markdown.app import docs as markdown_docs
8
  from components.MultimodalInput.app import docs as multimodel_input_docs
9
- from components.WaterfallGallery.app import docs as waterfall_gallery_docs
10
 
11
  readme_docs = Docs(__file__)
12
 
13
  docs = [
14
  ["Quick Start", readme_docs],
15
- ["API", api_docs],
16
  ["Chatbot", chatbot_docs],
17
- ["MultimodalInput", multimodel_input_docs],
18
  ["Markdown", markdown_docs],
19
- ["Lifecycle", lifecycle_docs],
20
- ["WaterfallGallery", waterfall_gallery_docs],
21
- ["Flow", flow_docs],
22
  ]
23
 
24
  with gr.Blocks() as demo:
 
1
  import gradio as gr
 
2
  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
 
9
  docs = [
10
  ["Quick Start", readme_docs],
 
11
  ["Chatbot", chatbot_docs],
 
12
  ["Markdown", markdown_docs],
13
+ ["MultimodalInput", multimodel_input_docs],
 
 
14
  ]
15
 
16
  with gr.Blocks() as demo:
components/Chatbot/README-zh_CN.md CHANGED
@@ -3,10 +3,9 @@
3
  升级版的 gradio Chatbot。
4
 
5
  - 支持前端匀速流式输出 message
6
- - 支持输出多模态内容（音频、视频、图片、文本）
7
- - 内置标签（chart、select-box、accordion）
8
  - 支持多 agent 场景
9
- - 支持自定义渲染组件，并与 Python 事件交互
10
 
11
  ## 如何使用
12
 
@@ -54,12 +53,6 @@ Observation: <result>「任意 md 内容，将作为完成调用的展示的下
54
 
55
  <demo name="select-box"></demo>
56
 
57
- ### 支持图表展示
58
-
59
- 在返回的内容中加入 `chart` 标签，更多用法详见 <tab-link component-tab="Markdown">Markdown 内置自定义标签</tab-link>
60
-
61
- <demo name="chart"></demo>
62
-
63
  ### 多 bot 场景
64
 
65
  <demo name="multi_bots"></demo>
@@ -84,12 +77,6 @@ class FileMessage(GradioModel):
84
 
85
 
86
  class MultimodalMessage(GradioModel):
87
- # 默认以 index 为作为 id，id 改变会导致 message 重新渲染
88
- id: Optional[str] = None
89
- # message 容器的 elem id
90
- elem_id: Optional[str] = None
91
- # message 容器的 elem classes
92
- elem_classes: Optional[List[str] | str] = None
93
  name: Optional[str] = None
94
  text: Optional[str] = None
95
  flushing: Optional[bool] = None
@@ -109,21 +96,19 @@ class ChatbotData(GradioRootModel):
109
 
110
  ### props
111
 
112
- | 属性 | 类型 | 默认值 | 描述 |
113
- | ----------------------------- | -------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
114
- | flushing | bool | True | 是否开启打字机效果。默认只有 bot 的 message 会开启，可以通过单独修改 message 的 flushing 属性精确控制每一条 message 的显示效果 |
115
- | enable_base64 | bool | False | 是否支持渲染的内容为 base64，因为直接渲染 base64 会带来安全问题，默认为 False。 |
116
- | enable_latex | bool | True | 是否支持 Latex 公式渲染 |
117
- | latex_single_dollar_delimiter | bool | True | 是否支持单`$`符号在 Latex 公式中渲染 |
118
- | preview | bool | True | 是否开启图片预览功能 |
119
- | avatar_images | tuple\[str \| Path \| None \| dict \| list, str \| Path \| None \| dict\| list\] | None | 拓展gr.Chatbot的参数值，除了接收 url 外还可以接收 dict 和 list，dict 可以传入avatar和name字段，name字段在渲染时会显示在头像下方。 <br/> - 当传入 dict 时，必须包含有avatar字段。<br/> - 当传入 list 时，一般对应多 bot 模式，每一项可以接收前面所有的值，每个 bot 的头像与 message 中 bot 的位置一一对应 |
120
- | avatar_image_align | Literal['top', 'middle', 'bottom'] | 'bottom' | 控制头像与 message 的对齐方式，默认为下对齐 |
121
- | avatar_image_width | int | 45 | 头像与名称的宽度 |
122
- | flushing_speed | int | 3 | 打字机速度，值为 1 - 10，值越大速度越快 |
123
- | llm_thinking_presets | list\[dict\] | \[\] | llm 思考链路解析预设，可以将 llm 调用工具的输出格式转为固定的前端展示格式，需要从modelscope_studio.Chatbot.llm_thinking_presets引入，目前支持：qwen |
124
- | custom_components | dict\[str, CustomComponentDict\] CustomComponentDict 定义见下方 | None | 支持用户定义自定义标签，并通过 js 控制标签渲染样式与触发 python 事件。 |
125
-
126
- **CustomComponentDict 定义如下**
127
 
128
  ```python
129
  class CustomComponentDict(TypedDict):
@@ -138,7 +123,7 @@ class CustomComponentDict(TypedDict):
138
 
139
  ### event listeners
140
 
141
- | 事件 | 描述 |
142
- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
143
- | `mgr.Chatbot.flushed(fn, ···)` | 当打字机效果结束时触发。EventData 为：<br/> - index：当前 message 的 index tuple。<br/> - value：当前 message value。 |
144
- | `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：自定义传入的值。 |
 
3
  升级版的 gradio Chatbot。
4
 
5
  - 支持前端匀速流式输出 message
6
+ - 支持输出多模态内容（音频、视频、语音、文件、文本）
 
7
  - 支持多 agent 场景
8
+ - 支持自定义渲染组件，并与 Python 侧事件交互
9
 
10
  ## 如何使用
11
 
 
53
 
54
  <demo name="select-box"></demo>
55
 
 
 
 
 
 
 
56
  ### 多 bot 场景
57
 
58
  <demo name="multi_bots"></demo>
 
77
 
78
 
79
  class MultimodalMessage(GradioModel):
 
 
 
 
 
 
80
  name: Optional[str] = None
81
  text: Optional[str] = None
82
  flushing: Optional[bool] = None
 
96
 
97
  ### props
98
 
99
+ | 属性 | 类型 | 默认值 | 描述 |
100
+ | -------------------- | -------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
101
+ | flushing | bool | True | 是否开启打字机效果。默认只有 bot 的 message 会开启，可以通过单独修改 message 的 flushing 属性精确控制每一条 message 的显示效果 |
102
+ | enable_base64 | bool | False | 是否支持渲染的内容为 base64，因为直接渲染 base64 有安全问题，默认为 False。 |
103
+ | preview | bool | True | 是否开启图片预览功能 |
104
+ | avatar_images | tuple\[str \| Path \| None \| dict \| list, str \| Path \| None \| dict\| list\] | None | 拓展gr.Chatbot的参数值，除了接收 url 外还可以接收 dict 和 list，dict 可以传入avatar和name字段，name字段在渲染时会显示在头像下方。 <br/> - 当传入 dict 时，必须包含有avatar字段。<br/> - 当传入 list 时，一般对应多 bot 模式，每一项可以接收前面所有的值，每个 bot 的头像与 message 中 bot 的位置一一对应 |
105
+ | avatar_image_align | Literal['top', 'middle', 'bottom'] | 'bottom' | 控制头像�� message 的对齐方式，默认为下对齐 |
106
+ | avatar_image_width | int | 45 | 头像与名称的宽度 |
107
+ | flushing_speed | int | 3 | 打字机速度，值为 1 - 10，值越大速度越快 |
108
+ | llm_thinking_presets | list\[dict\] | \[\] | llm 思考链路解析预设，可以将 llm 调用工具的输出格式转为固定的前端展示格式，需要从modelscope_studio.Chatbot.llm_thinking_presets引入，目前支持：qwen |
109
+ | custom_components | dict\[str, CustomComponentDict\] CustomComponentDict 定义见下方 | None | 支持用户定义自定义标签，并通过 js 控制标签渲染样式与触发 python 事件。 |
110
+
111
+ **CustomComponent 定义如下**
 
 
112
 
113
  ```python
114
  class CustomComponentDict(TypedDict):
 
123
 
124
  ### event listeners
125
 
126
+ | 事件 | 描述 |
127
+ | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
128
+ | `mgr.Chatbot.flushed(fn, ···)` | 当打字机效果结束时触发。EventData 为：<br/> - index：当前 message 的 index tuple。<br/> - value：当前 message value。 |
129
+ | `mgr.Chatbot.custom(fn, ···)` | 自定义标签触发事件时触发，EventData 为：<br/> - index：前 message 的 index tuple。<br/> - tag：当前触发的标签。<br/> - tag_index：当前触发标签的 index，此 index 在 mesage 的 index tuple 基础上重新计算。<br/> - value：自定义传入的值。 |
components/Chatbot/README.md CHANGED
@@ -3,10 +3,9 @@
3
  Upgraded gradio Chatbot.
4
 
5
  - Supports uniform frontend streaming output of messages
6
- - Supports output of multimodal content (audio, video, image, text)
7
- - Built-in tags (chart, select-box, accordion)
8
  - Supports multi-agent scenarios
9
- - Supports custom rendering components and interaction with Python events
10
 
11
  ## How to Use
12
 
@@ -49,16 +48,10 @@ Observation: <result>「Any md content will be displayed in the drop-down box wh
49
 
50
  ### Support for User Selection Interaction
51
 
52
- Include the `select-box` tag in the returned content. For more usage details, see <tab-link component-tab="Markdown">Markdown Built-in Custom Tags </tab-link>.
53
 
54
  <demo name="select-box"></demo>
55
 
56
- ### Support for Chart Display
57
-
58
- Include the `chart` tag in the returned content. For more usage details, see <tab-link component-tab="Markdown">Markdown Built-in Custom Tags </tab-link>.
59
-
60
- <demo name="chart"></demo>
61
-
62
  ### Multi-bot Scenarios
63
 
64
  <demo name="multi_bots"></demo>
@@ -83,12 +76,6 @@ class FileMessage(GradioModel):
83
 
84
 
85
  class MultimodalMessage(GradioModel):
86
- # By default, message index is used as id. it will cause the message to be re-rendered when id changed.
87
- id: Optional[str] = None
88
- # elem id of message container
89
- elem_id: Optional[str] = None
90
- # elem classes of message container
91
- elem_classes: Optional[List[str] | str] = None
92
  name: Optional[str] = None
93
  text: Optional[str] = None
94
  flushing: Optional[bool] = None
@@ -108,19 +95,17 @@ class ChatbotData(GradioRootModel):
108
 
109
  ### props
110
 
111
- | Attribute | Type | Default Value | Description |
112
- | ----------------------------- | -------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
113
- | flushing | bool | True | Whether to enable the typewriter effect. By default, only the bot's messages will have this effect, but you can control the display effect of each message precisely by modifying the flushing attribute of a message individually. |
114
- | enable_base64 | bool | False | Whether to support rendering content as base64, since rendering base64 is unsafe, the default is False. |
115
- | enable_latex | bool | True | Whether to enable LaTeX rendering. |
116
- | latex_single_dollar_delimiter | bool | True | Whether to enable single dollar delimiter `$` for LaTeX rendering. |
117
- | preview | bool | True | Whether to enable image preview functionality. |
118
- | avatar_images | tuple\[str \| Path \| None \| dict \| list, str \| Path \| None \| dict\| list\] | None | An extended parameter value for gr.Chatbot, in addition to accepting a URL, it can also accept a dict and list. The dict can include the fields avatar and name, where the name field will be displayed under the avatar when rendered. <br/> - When passing a dict, it must include an avatar field.<br/> - When passing a list, it generally corresponds to the multi-bot mode, where each item can receive all the aforementioned values, and each bot’s avatar matches with the position of the bot in the messages. |
119
- | avatar_image_align | Literal['top', 'middle', 'bottom'] | 'bottom' | Controls the alignment of the avatar with the messages, default is bottom-aligned. |
120
- | avatar_image_width | int | 45 | The width of the avatar and name. |
121
- | flushing_speed | int | 3 | Typewriter speed, values range from 1 - 10, with larger values indicating faster speeds. |
122
- | llm_thinking_presets | list\[dict\] | \[\] | llm thinking link presets, which can convert the output format of llm calling tools into a fixed front-end display format. It needs to be imported from modelscope_studio.Chatbot.llm_thinking_presets, and currently supports: qwen. |
123
- | custom_components | dict\[str, CustomComponentDict\] CustomComponentDict is defined below | None | Allows users to define custom tags and control tag rendering styles and trigger Python events through JS. |
124
 
125
  **Definition of CustomComponent is as follows:**
126
 
@@ -137,7 +122,7 @@ See <tab-link component-tab="Markdown">Markdown Built-in Custom Tags</tab-link>
137
 
138
  ### event listeners
139
 
140
- | Event | Description |
141
- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
142
- | `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. |
143
- | `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. |
 
3
  Upgraded gradio Chatbot.
4
 
5
  - Supports uniform frontend streaming output of messages
6
+ - Supports output of multimodal content (audio, video, voice, files, text)
 
7
  - Supports multi-agent scenarios
8
+ - Supports custom rendering components and interaction with events on the Python side
9
 
10
  ## How to Use
11
 
 
48
 
49
  ### Support for User Selection Interaction
50
 
51
+ Include the `select-box` tag in the returned content for more usage details, see <tab-link component-tab="Markdown">Markdown Built-in Custom Tags <tab-link component-tab="Markdown">.
52
 
53
  <demo name="select-box"></demo>
54
 
 
 
 
 
 
 
55
  ### Multi-bot Scenarios
56
 
57
  <demo name="multi_bots"></demo>
 
76
 
77
 
78
  class MultimodalMessage(GradioModel):
 
 
 
 
 
 
79
  name: Optional[str] = None
80
  text: Optional[str] = None
81
  flushing: Optional[bool] = None
 
95
 
96
  ### props
97
 
98
+ | Attribute | Type | Default Value | Description |
99
+ | -------------------- | -------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
100
+ | flushing | bool | True | Whether to enable the typewriter effect. By default, only the bot's messages will have this effect, but you can control the display effect of each message precisely by modifying the flushing attribute of a message individually. |
101
+ | enable_base64 | bool | False | Whether to support rendering content as base64, since rendering base64 is not safe, the default is False. |
102
+ | preview | bool | True | Whether to enable image preview functionality. |
103
+ | avatar_images | tuple\[str \| Path \| None \| dict \| list, str \| Path \| None \| dict\| list\] | None | An extended parameter value for gr.Chatbot, in addition to accepting a URL, it can also accept a dict and list. The dict can include the fields avatar and name, where the name field will be displayed under the avatar when rendered. <br/> - When passing a dict, it must include an avatar field.<br/> - When passing a list, it generally corresponds to the multi-bot mode, where each item can receive all the aforementioned values, and each bot’s avatar matches with the position of the bot in the messages. |
104
+ | avatar_image_align | Literal['top', 'middle', 'bottom'] | 'bottom' | Controls the alignment of the avatar with the messages, default is bottom-aligned. |
105
+ | avatar_image_width | int | 45 | The width of the avatar and name. |
106
+ | flushing_speed | int | 3 | Typewriter speed, values range from 1 - 10, with larger values indicating faster speeds. |
107
+ | llm_thinking_presets | list\[dict\] | \[\] | llm thinking link presets, which can convert the output format of llm calling tools into a fixed front-end display format. It needs to be imported from modelscope_studio.Chatbot.llm_thinking_presets, and currently supports: qwen. |
108
+ | custom_components | dict\[str, CustomComponentDict\] CustomComponentDict is defined below | None | Allows users to define custom tags and control tag rendering styles and trigger Python events through JS. |
 
 
109
 
110
  **Definition of CustomComponent is as follows:**
111
 
 
122
 
123
  ### event listeners
124
 
125
+ | Event | Description |
126
+ | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
127
+ | `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. |
128
+ | `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. |
components/Chatbot/demos/.DS_Store ADDED
Binary file (6.15 kB). View file
 
components/Chatbot/demos/accordion.py CHANGED
@@ -1,13 +1,12 @@
1
  import os
2
 
3
  import gradio as gr
4
-
5
  import modelscope_studio as mgr
6
  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
 
@@ -16,13 +15,11 @@ conversation = [
16
  None, {
17
  "text": f"""
18
  Use accordion tag:
19
-
20
  <accordion title="Using tool">
21
 
22
  ```json
23
  {{"text": "glorious weather", "resolution": "1024*1024"}}
24
  ```
25
-
26
  </accordion>
27
 
28
  Qwen preset:
 
1
  import os
2
 
3
  import gradio as gr
 
4
  import modelscope_studio as mgr
5
  from modelscope_studio.components.Chatbot.llm_thinking_presets import qwen
6
 
7
 
8
  def resolve_assets(relative_path):
9
+ return os.path.join(os.path.dirname(__file__), "../resources",
10
  relative_path)
11
 
12
 
 
15
  None, {
16
  "text": f"""
17
  Use accordion tag:
 
18
  <accordion title="Using tool">
19
 
20
  ```json
21
  {{"text": "glorious weather", "resolution": "1024*1024"}}
22
  ```
 
23
  </accordion>
24
 
25
  Qwen preset:
components/Chatbot/demos/basic.py CHANGED
@@ -2,7 +2,6 @@ import os
2
  import time
3
 
4
  import gradio as gr
5
-
6
  import modelscope_studio as mgr
7
 
8
  conversation = [
@@ -35,14 +34,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
- "../../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
  )
 
2
  import time
3
 
4
  import gradio as gr
 
5
  import modelscope_studio as mgr
6
 
7
  conversation = [
 
34
  chatbot = mgr.Chatbot(
35
  value=conversation,
36
  avatar_images=[
37
+ os.path.join(os.path.dirname(__file__), "../resources/user.jpeg"),
38
+ {
39
+ "name":
40
+ "bot",
41
+ "avatar":
42
+ os.path.join(os.path.dirname(__file__),
43
+ "../resources/bot.jpeg")
44
+ }
45
  ],
46
  height=600,
47
  )
components/Chatbot/demos/chart.py DELETED
@@ -1,43 +0,0 @@
1
- import json
2
-
3
- import gradio as gr
4
-
5
- import modelscope_studio as mgr
6
-
7
- # echarts options, see: https://echarts.apache.org/en/index.html
8
- option1 = {
9
- "xAxis": {
10
- "type": 'category',
11
- "data": ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
12
- },
13
- "yAxis": {
14
- "type": 'value',
15
- },
16
- "series": [
17
- {
18
- "data": [150, 230, 224, 218, 135, 147, 260],
19
- "type": 'line',
20
- },
21
- ],
22
- }
23
-
24
- conversation = [
25
- [
26
- None, {
27
- "text": f"""
28
- Chart:
29
- <chart options='{json.dumps(option1)}'></chart>
30
- """
31
- }
32
- ],
33
- ]
34
-
35
- with gr.Blocks() as demo:
36
- mgr.Chatbot(
37
- value=conversation,
38
- flushing=False,
39
- height=600,
40
- )
41
-
42
- if __name__ == "__main__":
43
- demo.queue().launch()
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Chatbot/demos/message_config.py CHANGED
@@ -1,7 +1,6 @@
1
  import time
2
 
3
  import gradio as gr
4
-
5
  import modelscope_studio as mgr
6
 
7
 
 
1
  import time
2
 
3
  import gradio as gr
 
4
  import modelscope_studio as mgr
5
 
6
 
components/Chatbot/demos/multi_bots.py CHANGED
@@ -2,12 +2,11 @@ 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
 
 
2
  import time
3
 
4
  import gradio as gr
 
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
 
components/Chatbot/demos/multimodal.py CHANGED
@@ -1,12 +1,11 @@
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
 
 
1
  import os
2
 
3
  import gradio as gr
 
4
  import modelscope_studio as mgr
5
 
6
 
7
  def resolve_assets(relative_path):
8
+ return os.path.join(os.path.dirname(__file__), "../resources",
9
  relative_path)
10
 
11
 
components/Chatbot/demos/select-box.py CHANGED
@@ -1,7 +1,6 @@
1
  import json
2
 
3
  import gradio as gr
4
-
5
  import modelscope_studio as mgr
6
 
7
  # `label` will display on the page, and `value` is the actual selected value.
 
1
  import json
2
 
3
  import gradio as gr
 
4
  import modelscope_studio as mgr
5
 
6
  # `label` will display on the page, and `value` is the actual selected value.
components/{resources → Chatbot/resources}/audio.wav RENAMED
File without changes
components/{resources → Chatbot/resources}/bot.jpeg RENAMED
File without changes
components/Chatbot/resources/custom_components/custom_select.js ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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/{resources → Chatbot/resources}/dog.mp4 RENAMED
File without changes
components/{resources → Chatbot/resources}/image-bot.jpeg RENAMED
File without changes
components/{resources → Chatbot/resources}/music-bot.jpeg RENAMED
File without changes
components/{resources → Chatbot/resources}/screen.jpeg RENAMED
File without changes
components/{resources → Chatbot/resources}/user.jpeg RENAMED
File without changes
components/Docs.py CHANGED
@@ -3,7 +3,6 @@ import re
3
  from typing import Callable
4
 
5
  import gradio as gr
6
-
7
  import modelscope_studio as mgr
8
 
9
  from .parse_markdown import parse_markdown
@@ -49,7 +48,7 @@ def get_demo_modules(file_path: str):
49
  demos = [
50
  demo for demo in list_demos(
51
  os.path.join(os.path.dirname(file_path), "demos"))
52
- if demo.endswith(".py") and not demo.startswith("__")
53
  ]
54
  demo_modules = {}
55
  for demo in demos:
@@ -93,41 +92,23 @@ class Docs:
93
  "r") as f:
94
  return f.read()
95
 
96
- def render_demo(self,
97
- demo_name,
98
- code_position='left',
99
- prefix='',
100
- suffix=''):
101
  content = self.read_file(f"./demos/{demo_name}.py")
102
  module = self.demo_modules[demo_name]
103
  with gr.Accordion("Show Demo", open=False):
104
-
105
- def render_code():
106
- mgr.Markdown(f"""{prefix}
 
107
  ````python
108
  {content}
109
  ````
110
- {suffix}""",
111
- header_links=True,
112
- custom_components=custom_components)
113
-
114
- if code_position == 'top':
115
- with gr.Row():
116
- with gr.Column():
117
- render_code()
118
- with gr.Row():
119
- if code_position == 'left':
120
- with gr.Column():
121
- render_code()
122
  with gr.Column():
123
  module.demo.render()
124
- if code_position == 'right':
125
- with gr.Column():
126
- render_code()
127
- if code_position == 'bottom':
128
- with gr.Row():
129
- with gr.Column():
130
- render_code()
131
 
132
  def render_markdown(self,
133
  markdown_file,
@@ -139,16 +120,14 @@ class Docs:
139
  if item["type"] == "text":
140
  md = mgr.Markdown(item["value"],
141
  header_links=True,
142
- custom_components=custom_components,
143
- preview=False)
144
  deps = [dep for dep in [components_tabs, self.tabs] if dep]
145
  if len(deps) > 0:
146
  md.custom(fn=on_tab_link_click, outputs=deps)
147
  elif item["type"] == "demo":
148
  self.render_demo(item["name"],
149
  prefix=item["prefix"],
150
- suffix=item["suffix"],
151
- code_position=item["code_position"])
152
 
153
  def render(self, components_tabs=None):
154
 
 
3
  from typing import Callable
4
 
5
  import gradio as gr
 
6
  import modelscope_studio as mgr
7
 
8
  from .parse_markdown import parse_markdown
 
48
  demos = [
49
  demo for demo in list_demos(
50
  os.path.join(os.path.dirname(file_path), "demos"))
51
+ if demo.endswith(".py")
52
  ]
53
  demo_modules = {}
54
  for demo in demos:
 
92
  "r") as f:
93
  return f.read()
94
 
95
+ def render_demo(self, demo_name, prefix='', suffix=''):
 
 
 
 
96
  content = self.read_file(f"./demos/{demo_name}.py")
97
  module = self.demo_modules[demo_name]
98
  with gr.Accordion("Show Demo", open=False):
99
+ with gr.Row():
100
+ with gr.Column():
101
+ mgr.Markdown(f"""
102
+ {prefix}
103
  ````python
104
  {content}
105
  ````
106
+ {suffix}
107
+ """,
108
+ header_links=True,
109
+ custom_components=custom_components)
 
 
 
 
 
 
 
 
110
  with gr.Column():
111
  module.demo.render()
 
 
 
 
 
 
 
112
 
113
  def render_markdown(self,
114
  markdown_file,
 
120
  if item["type"] == "text":
121
  md = mgr.Markdown(item["value"],
122
  header_links=True,
123
+ custom_components=custom_components)
 
124
  deps = [dep for dep in [components_tabs, self.tabs] if dep]
125
  if len(deps) > 0:
126
  md.custom(fn=on_tab_link_click, outputs=deps)
127
  elif item["type"] == "demo":
128
  self.render_demo(item["name"],
129
  prefix=item["prefix"],
130
+ suffix=item["suffix"])
 
131
 
132
  def render(self, components_tabs=None):
133
 
components/Flow/README-zh_CN.md DELETED
@@ -1,109 +0,0 @@
1
- # Flow
2
-
3
- 基于 [reactflow](https://reactflow.dev/) 实现的 Flow 组件。
4
-
5
- - 支持通过 schema 自定义渲染节点
6
- - 支持自定义节点的渲染组件，并与 Python 事件交互
7
-
8
- ## 如何使用
9
-
10
- ### 定义 schema 节点 (重要)
11
-
12
- 详见：<tab-link tab="define_schema">Define Schema</tab-link>
13
-
14
- ### 基本使用
15
-
16
- <demo name="basic" code-position="bottom"></demo>
17
-
18
- ### 组件配置项
19
-
20
- <demo name="component_options" code-position="bottom"></demo>
21
-
22
- ### 自定义节点类型（高阶用法，需要了解前端知识）
23
-
24
- <demo name="custom_node_type" code-position="bottom"></demo>
25
-
26
- ## API 及参数列表
27
-
28
- ### value
29
-
30
- 接口定义：
31
-
32
- ```python
33
- class NodePosition(GradioModel):
34
- x: Optional[int] = 0
35
- y: Optional[int] = 0
36
-
37
-
38
- class Node(GradioModel):
39
- id: Optional[str] = None
40
- name: str
41
- title: Optional[str] = None
42
- position: Optional[Union[NodePosition, dict]] = None
43
- data: Optional[dict] = None
44
-
45
- class EdgePort(GradioModel):
46
- attr: Optional[str] = None
47
- attrItemIndex: Optional[int] = None
48
- handleIndex: Optional[int] = None
49
-
50
- class Edge(GradioModel):
51
- id: Optional[str] = None
52
- source: str
53
- target: str
54
- sourcePort: Optional[Union[EdgePort, dict]] = None
55
- targetPort: Optional[Union[EdgePort, dict]] = None
56
-
57
-
58
- class FlowData(GradioModel):
59
- nodes: Optional[List[Union[Node, dict]]] = []
60
- edges: Optional[List[Union[Edge, dict]]] = []
61
-
62
- ```
63
-
64
- ### props
65
-
66
- | 属性 | 类型 | 默认值 | 描述 |
67
- | ------------------- | --------------------------------------------------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
68
- | height | int \| str | 600 | Flow 组件高度。 |
69
- | sync_on_data_change | bool | None | 是否仅在数据更改时同步 Python 值（例如：节点属性、节点计数、边缘计数、连接端口等，不包括节点位置）。 如果您想要更好的页面性能而不是完整数据同步，则应将其设置为 True。 |
70
- | schema | FlowSchemaDict \| dict | None | 定义 Flow 组件的 nodes 与 edges。 |
71
- | show_sidebar | bool | True | 是否展示侧 Flow 组件侧边栏。 |
72
- | show_minimap | bool | True | 是否展示侧 Flow 组件小地图。 |
73
- | show_controls | bool | True | 是否展示侧Flow 组件控制栏。 |
74
- | background_props | BackgroundPropsDict \| dict CustomComponentDict 定义见下方 | None | 修改 Flow组件背景，详见 BackgroundPropsDict 类型。 |
75
- | min_zoom | int | 0.1 | Flow 组件最小缩放倍率。 |
76
- | max_zoom | int | 2 | Flow 组件最大缩放倍率。 |
77
- | custom_components | dict\[str, CustomComponentDict\] CustomComponentDict 定义见下方 | None | 支持用户自定义节点类型，并通过 js 控制渲染样式与触发 python 事件。 |
78
-
79
- **BackgroundPropsDict 定义如下**
80
-
81
- ```python
82
- class BackgroundPropsDict(TypedDict):
83
- color: Optional[str]
84
- className: Optional[str]
85
- # The gap between patterns. Passing in a tuple allows you to control the x and y gap independently.
86
- gap: Optional[Union[int, Tuple[int, int]]]
87
- # The radius of each dot or the size of each rectangle if BackgroundVariant.Dots or BackgroundVariant.Cross is used. This defaults to 1 or 6 respectively, or ignored if BackgroundVariant.Lines is used.
88
- size: Optional[int]
89
- offset: Optional[int]
90
- lineWidth: Optional[int]
91
- variant: Optional[Literal['dots', 'lines', 'cross']]
92
- ```
93
-
94
- **CustomComponentDict 定义如下**
95
-
96
- ```python
97
- class CustomComponentDict(TypedDict):
98
- props: Optional[List[str]]
99
- template: Optional[str]
100
- js: Optional[str]
101
- ```
102
-
103
- ### event listeners
104
-
105
- | 事件 | 描述 |
106
- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
107
- | `mgr.Flow.change(fn, ···)` | 当 value 更新时触发，如果 sync_on_data_change 值为 True 时，此时 flow 的实际数据可能并不是实时的，建议监听 data_change 事件。 |
108
- | `mgr.Flow.data_change(fn, ···)` | 当在数据更改时触发（例如：节点属性、节点计数、边缘计数、连接端口等，不包括节点位置） |
109
- | `mgr.Flow.custom(fn, ···)` | 自定义标签触发事件时触发，EventData 为：<br/> - id：当前触发节点 id。<br/> - node：当前触发节点类型。 <br/> - attr：当前触发节点属性。<br/> - index：当前触发节点属性索引，当节点属性为 list 时有值。<br/> - value：自定义传入的值。 |
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Flow/README.md DELETED
@@ -1,108 +0,0 @@
1
- # Flow
2
-
3
- A Flow component implemented based on [reactflow](https://reactflow.dev/).
4
-
5
- - Supports customization of node rendering through a schema.
6
- - Allows for custom node render components with interaction from Python.
7
-
8
- ## How to Use
9
-
10
- ### Defining Schema Nodes (Important)
11
-
12
- See: <tab-link tab="define_schema">Define Schema</tab-link>
13
-
14
- ### Basic Usage
15
-
16
- <demo name="basic" code-position="bottom"></demo>
17
-
18
- ### Component Options
19
-
20
- <demo name="component_options" code-position="bottom"></demo>
21
-
22
- ### Custom Node Types (Advanced usage, requires frontend knowledge)
23
-
24
- <demo name="custom_node_type" code-position="bottom"></demo>
25
-
26
- ## API and Parameter List
27
-
28
- ### value
29
-
30
- Interface definition:
31
-
32
- ```python
33
- class NodePosition(GradioModel):
34
- x: Optional[int] = 0
35
- y: Optional[int] = 0
36
-
37
-
38
- class Node(GradioModel):
39
- id: Optional[str] = None
40
- name: str
41
- title: Optional[str] = None
42
- position: Optional[Union[NodePosition, dict]] = None
43
- data: Optional[dict] = None
44
-
45
- class EdgePort(GradioModel):
46
- attr: Optional[str] = None
47
- attrItemIndex: Optional[int] = None
48
- handleIndex: Optional[int] = None
49
-
50
- class Edge(GradioModel):
51
- id: Optional[str] = None
52
- source: str
53
- target: str
54
- sourcePort: Optional[Union[EdgePort, dict]] = None
55
- targetPort: Optional[Union[EdgePort, dict]] = None
56
-
57
-
58
- class FlowData(GradioModel):
59
- nodes: Optional[List[Union[Node, dict]]] = []
60
- edges: Optional[List[Union[Edge, dict]]] = []
61
- ```
62
-
63
- ### props
64
-
65
- | Attribute | Type | Default Value | Description |
66
- | ------------------- | --------------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
67
- | height | int \| str | 600 | Height of the Flow component. |
68
- | sync_on_data_change | bool | None | Whether to sync the Python value only on data change (e.g., node attributes, node count, edge count, connection ports, not including node positions). If you want better page performance without full data sync, set this to True. |
69
- | schema | FlowSchemaDict \| dict | None | Defines the nodes and edges of the Flow component. |
70
- | show_sidebar | bool | True | Whether to display the sidebar in the Flow component. |
71
- | show_minimap | bool | True | Whether to display the minimap in the Flow component. |
72
- | show_controls | bool | True | Whether to display the controls bar in the Flow component. |
73
- | background_props | BackgroundPropsDict \| dict BackgroundPropsDict definition below | None | Modify the background of the Flow component, see the BackgroundPropsDict type. |
74
- | min_zoom | int | 0.1 | Minimum zoom level for the Flow component. |
75
- | max_zoom | int | 2 | Maximum zoom level for the Flow component. |
76
- | custom_components | dict\[str, CustomComponentDict\] CustomComponentDict definition below | None | Supports user-defined custom tags and controls tag rendering styles and triggers Python events through js. |
77
-
78
- **BackgroundPropsDict definition:**
79
-
80
- ```python
81
- class BackgroundPropsDict(TypedDict):
82
- color: Optional[str]
83
- className: Optional[str]
84
- # The gap between patterns. Passing in a tuple allows you to control the x and y gap independently.
85
- gap: Optional[Union[int, Tuple[int, int]]]
86
- # The radius of each dot or the size of each rectangle if BackgroundVariant.Dots or BackgroundVariant.Cross is used. This defaults to 1 or 6 respectively, or ignored if BackgroundVariant.Lines is used.
87
- size: Optional[int]
88
- offset: Optional[int]
89
- lineWidth: Optional[int]
90
- variant: Optional[Literal['dots', 'lines', 'cross']]
91
- ```
92
-
93
- **CustomComponentDict definition:**
94
-
95
- ```python
96
- class CustomComponentDict(TypedDict):
97
- props: Optional[List[str]]
98
- template: Optional[str]
99
- js: Optional[str]
100
- ```
101
-
102
- ### Event Listeners
103
-
104
- | Event | Description |
105
- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
106
- | `mgr.Flow.change(fn, ...)` | Triggers when the `value` updates. If `sync_on_data_change` is True, the actual data at this point might not be up-to-date; consider listening to the `data_change` event instead. |
107
- | `mgr.Flow.data_change(fn, ...)` | Triggers when there's a data change (e.g., node attributes, node count, edge count, connection ports), but not node positions. |
108
- | `mgr.Flow.custom(fn, ...)` | Triggers when a custom label event occurs. The `EventData` includes:<br/> - `id`: ID of the currently triggered node.<br/> - `node`: Type of the currently triggered node.<br/> - `attr`: Attributes of the currently triggered node.<br/> - `index`: Index of the attribute if it's a list.<br/> - `value`: Custom passed-in value. |
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Flow/app.py DELETED
@@ -1,6 +0,0 @@
1
- from components.Docs import Docs
2
-
3
- docs = Docs(__file__)
4
-
5
- if __name__ == "__main__":
6
- docs.render().queue().launch()
 
 
 
 
 
 
 
components/Flow/define_schema-zh_CN.md DELETED
@@ -1,266 +0,0 @@
1
- # Define Schema
2
-
3
- 在使用 Flow 组件前，需要预先创建 Schema 定义 node 节点，schema 类型定义如下：
4
-
5
- ```ts
6
- export interface FlowSchema {
7
- nodes: FlowNodeSchema[];
8
- }
9
-
10
- export interface FlowNodeSchema {
11
- /**
12
- * 作为节点的唯一标识。必填。
13
- */
14
- name: string;
15
-
16
- /**
17
- * 节点显示图标。
18
- */
19
- icon?: string;
20
-
21
- /**
22
- * 节点标题，如果没有提供则默认使用 name。
23
- */
24
- title?: string;
25
-
26
- /**
27
- * 节点的简短描述。
28
- */
29
- description?: string;
30
-
31
- /**
32
- * 节点宽度。
33
- */
34
- width?: number;
35
-
36
- /**
37
- * 节点高度。
38
- */
39
- height?: number;
40
-
41
- /**
42
- * 显示/隐藏工具栏（删除、复制、重命名等）。
43
- * @default true
44
- */
45
- show_toolbar?: boolean;
46
-
47
- /**
48
- * 启用/禁止添加更多此类节点实例。
49
- * @default true
50
- */
51
- addable?: boolean;
52
-
53
- /**
54
- * 启用/禁止删除现有此类节点实例。
55
- * @default true
56
- */
57
- deletable?: boolean;
58
-
59
- /**
60
- * 可以同时存在的此类节点的最大数量。
61
- */
62
- max?: number;
63
-
64
- /**
65
- * 可以同时存在的此类节点的最小数量。
66
- */
67
- min?: number;
68
-
69
- /**
70
- * 节点连接端口的配置。
71
- */
72
- ports?: {
73
- /**
74
- * 节点作为连接的源端口。
75
- * @default ['right']
76
- */
77
- source?: Position[];
78
-
79
- /**
80
- * 允许此节点 source 端口连接到的其他节点或属性。默认为所有节点和属性。
81
- * @default []
82
- */
83
- sourceConnections?: PortConnection[];
84
-
85
- /**
86
- * 节点作为连接的目标端口。
87
- * @default ['left']
88
- */
89
- target?: Position[];
90
-
91
- /**
92
- * 其他允许连接到此节点 target 端口的节点或属性。默认为所有节点和属性
93
- * @default []
94
- */
95
- targetConnections?: PortConnection[];
96
- };
97
-
98
- /**
99
- * 节点的属性配置。
100
- */
101
- attrs?: FlowNodeAttrSchema[];
102
-
103
- /**
104
- * 创建新实例时节点属性的初始值。
105
- */
106
- template?: {
107
- /**
108
- * 在`attrs`字段中与其名称相对应的属性值，例如 { "a": 1, "b": 2 }。
109
- */
110
- attrs?: Attrs;
111
- };
112
- }
113
-
114
- export interface FlowNodeAttrSchema {
115
- /**
116
- * 唯一的属性名称，在 node data 中用作 key。必填。
117
- */
118
- name: string;
119
-
120
- /**
121
- * 属性标题，如果没有提供则默认使用 name。
122
- */
123
- title?: string;
124
-
125
- /**
126
- * 属性的简短描述
127
- */
128
- description?: string;
129
-
130
- /**
131
- * 禁用用户编辑属性值。默认情况下，属性是可编辑的。
132
- * @default false
133
- */
134
- disabled?: boolean;
135
-
136
- /**
137
- * 属性输入类型。可以是内置的 Ant Design 组件或自定义组件之一。默认为'input'。
138
- * @default 'input'
139
- */
140
- type?:
141
- | 'input'
142
- | 'textarea'
143
- | 'radio'
144
- | 'checkbox'
145
- | 'number'
146
- | 'select'
147
- | 'switch'
148
- | 'upload'
149
- // 自定义
150
- | (string & {});
151
-
152
- /**
153
- * 针对所选组件类型的特定配置选项，支持 Ant Design 组件({@link https://ant.design/components/overview/})或自定义组件的属性。
154
- */
155
- props?: Record<string, any>;
156
-
157
- /**
158
- * 节点属性连接端口的配置。
159
- */
160
- ports?: {
161
- /**
162
- * 节点属性作为连接的源端口。
163
- * @default []
164
- */
165
- source?: Position[];
166
-
167
- /**
168
- * 允许此节点属性 source 端口连接到的其他节点或属性。
169
- * @default []
170
- */
171
- sourceConnections?: PortConnection[];
172
-
173
- /**
174
- * 节点属性作为连接的目标端口。
175
- * @default []
176
- */
177
- target?: Position[];
178
-
179
- /**
180
- * 其他允许连接到此节点属性 target 端口的节点或属性。
181
- * @default []
182
- */
183
- targetConnections?: PortConnection[];
184
- };
185
-
186
- /**
187
- * 表示该属性是否为列表值。
188
- * @default false
189
- */
190
- list?:
191
- | boolean
192
- | {
193
- /**
194
- * 列表中每个 item 的端口配置。
195
- */
196
- ports?: {
197
- /**
198
- * 列表 item 作为连接的源端口。
199
- * @default []
200
- */
201
- source?: Position[];
202
-
203
- /**
204
- * 允许此列表 item source 端口连接到的其他节点或属性。
205
- * @default []
206
- */
207
- sourceConnections?: PortConnection[];
208
-
209
- /**
210
- * 列表 item 作为连接的目标端口。
211
- */
212
- target?: Position[];
213
-
214
- /**
215
- * 其他允许连接到此列表 item target 端口的节点或属性。
216
- */
217
- targetConnections?: PortConnection[];
218
- };
219
-
220
- /**
221
- * 列表中的最小 item 数量。
222
- */
223
- min?: number;
224
-
225
- /**
226
- * 列表中的最大 item 数量。
227
- */
228
- max?: number;
229
- };
230
-
231
- /**
232
- * 启用/禁用手风琴 UI。
233
- * @default true
234
- */
235
- accordion?: boolean;
236
-
237
- /**
238
- * 指定该属性值是否为必填项。默认情况为非必填项。
239
- * @default false
240
- */
241
- required?:
242
- | boolean
243
- | {
244
- message?: string;
245
- };
246
-
247
- /**
248
- * 使用 JSON schema 验证属性值。
249
- */
250
- json_schema_validator?: Record<string, any>;
251
- }
252
- ```
253
-
254
- 你可以通过 json 文件（推荐）或直接在 Python 端通过导出类型定义：
255
-
256
- - 通过 json 定义：
257
-
258
- ```json
259
- <file src="./schema/agents_schema.json"></file>
260
- ```
261
-
262
- - 通过 Python 定义：
263
-
264
- ```python
265
- <file src="./schema/agents_schema.py"></file>
266
- ```
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Flow/define_schema.md DELETED
@@ -1,262 +0,0 @@
1
- # Define Schema
2
-
3
- Before using the Flow component, need to create a Schema definition node in advance. The schema type is defined as follows:
4
-
5
- ```ts
6
- export interface FlowSchema {
7
- nodes: FlowNodeSchema[];
8
- }
9
-
10
- export interface FlowNodeSchema {
11
- /**
12
- * As a unique identifier for the node. Mandatory.
13
- */
14
- name: string;
15
-
16
- /**
17
- * Display icon for the node.
18
- */
19
- icon?: string;
20
-
21
- /**
22
- * Display title for the node, defaults to the node name if not provided.
23
- */
24
- title?: string;
25
-
26
- /**
27
- * A short description of the node's purpose.
28
- */
29
- description?: string;
30
-
31
- /**
32
- * Width of the node.
33
- */
34
- width?: number;
35
-
36
- /**
37
- * Height of the node.
38
- */
39
- height?: number;
40
-
41
- /**
42
- * Shows/hides the toolbar (delete, copy, rename, etc.).
43
- * @default true
44
- */
45
- show_toolbar?: boolean;
46
-
47
- /**
48
- * Enables/disables adding more instances of this node.
49
- * @default true
50
- */
51
- addable?: boolean;
52
-
53
- /**
54
- * Enables/disables deleting existing instances of this node.
55
- * @default true
56
- */
57
- deletable?: boolean;
58
-
59
- /**
60
- * Maximum number of this node type that can exist simultaneously.
61
- */
62
- max?: number;
63
-
64
- /**
65
- * Minimum number of this node type that must exist simultaneously.
66
- */
67
- min?: number;
68
-
69
- /**
70
- * Configurations for the node's connection ports.
71
- */
72
- ports?: {
73
- /**
74
- * Source ports for the node as a connection.
75
- * @default ['right']
76
- */
77
- source?: Position[];
78
-
79
- /**
80
- * Allowed the source ports of this node to connect to other nodes or attributes. Defaults to all nodes and attributes
81
- */
82
- sourceConnections?: PortConnection[];
83
-
84
- /**
85
- * Target ports for the node as a connection
86
- * @default ['left']
87
- */
88
- target?: Position[];
89
-
90
- /**
91
- * Allowed other nodes or attributes allowed to connect to the target ports of this node. Defaults to all nodes and attributes
92
- *
93
- */
94
- targetConnections?: PortConnection[];
95
- };
96
-
97
- /**
98
- * Configuration of the node's attributes.
99
- */
100
- attrs?: FlowNodeAttrSchema[];
101
-
102
- /**
103
- * Initial values for the node's attributes when creating a new instance.
104
- */
105
- template?: {
106
- /**
107
- * Attribute values corresponding to their names in the `attrs` field, e.g., `{ "a": 1, "b": 2 }`.
108
- */
109
- attrs?: Attrs;
110
- };
111
- }
112
-
113
- export interface FlowNodeAttrSchema {
114
- /**
115
- * Unique attribute name used as a key in the node data. Mandatory.
116
- */
117
- name: string;
118
-
119
- /**
120
- * Display title for the attribute, defaults to the attribute name if not provided.
121
- */
122
- title?: string;
123
-
124
- /**
125
- * A brief explanation about the attribute purpose.
126
- */
127
- description?: string;
128
-
129
- /**
130
- * Disables user editing of the attribute value. By default, attributes are editable.
131
- * @default false
132
- */
133
- disabled?: boolean;
134
-
135
- /**
136
- * Attribute input type. Can be one of the built-in Ant Design components or a custom component. Defaults to 'input'.
137
- * @default 'input'
138
- */
139
- type?:
140
- | 'input'
141
- | 'textarea'
142
- | 'radio'
143
- | 'checkbox'
144
- | 'number'
145
- | 'select'
146
- | 'switch'
147
- | 'upload'
148
- // custom
149
- | (string & {});
150
-
151
- /**
152
- * Configuration options specific to the chosen component type, supporting Ant Design ({@link https://ant.design/components/overview/}) or custom component properties.
153
- */
154
- props?: Record<string, any>;
155
-
156
- /**
157
- * Configurations for the node attribute ports.
158
- */
159
- ports?: {
160
- /**
161
- * Source ports for the attribute as a connection.
162
- * @default []
163
- */
164
- source?: Position[];
165
-
166
- /**
167
- * Allowed the source ports of this attribute to connect to other nodes or attributes. Defaults to all nodes and attributes
168
- */
169
- sourceConnections?: PortConnection[];
170
-
171
- /**
172
- * Target ports for the attribute as a connection
173
- * @default []
174
- */
175
- target?: Position[];
176
-
177
- /**
178
- * Allowed other nodes or attributes allowed to connect to the target ports of this attribute. Defaults to all nodes and attributes
179
- */
180
- targetConnections?: PortConnection[];
181
- };
182
-
183
- /**
184
- * Indicates whether the attribute is a list.
185
- * @default false
186
- */
187
- list?:
188
- | boolean
189
- | {
190
- /**
191
- * Port configurations for each item in the list.
192
- */
193
- ports?: {
194
- /**
195
- * Source ports for the list item as a connection.
196
- * @default []
197
- */
198
- source?: Position[];
199
-
200
- /**
201
- * Allowed the source ports of this list item to connect to other nodes or attributes. Defaults to all nodes and attributes
202
- */
203
- sourceConnections?: PortConnection[];
204
-
205
- /**
206
- * Target ports for the list item as a connection
207
- */
208
- target?: Position[];
209
-
210
- /**
211
- * Allowed other nodes or attributes allowed to connect to the target ports of this list item. Defaults to all nodes and attributes
212
- */
213
- targetConnections?: PortConnection[];
214
- };
215
-
216
- /**
217
- * Minimum number of items in the list.
218
- */
219
- min?: number;
220
-
221
- /**
222
- * Maximum number of items in the list.
223
- */
224
- max?: number;
225
- };
226
-
227
- /**
228
- * Enable/disable accordion UI.
229
- * @default true
230
- */
231
- accordion?: boolean;
232
-
233
- /**
234
- * Specifies if the attribute value is mandatory. By default, attributes are optional.
235
- * @default false
236
- */
237
- required?:
238
- | boolean
239
- | {
240
- message?: string;
241
- };
242
-
243
- /**
244
- * Validates attribute values using JSON schema.
245
- */
246
- json_schema_validator?: Record<string, any>;
247
- }
248
- ```
249
-
250
- You can define the schema by a json file (recommended) or directly on the Python by the exported types:
251
-
252
- - Defined by json:
253
-
254
- ```json
255
- <file src="./schema/agents_schema.json"></file>
256
- ```
257
-
258
- - Defined by Python:
259
-
260
- ```python
261
- <file src="./schema/agents_schema.py"></file>
262
- ```
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Flow/demos/basic.py DELETED
@@ -1,35 +0,0 @@
1
- import json
2
- import os
3
-
4
- import gradio as gr
5
-
6
- import modelscope_studio as mgr
7
- from modelscope_studio.components.Flow import Edge, Node
8
-
9
- with open((os.path.join(os.path.dirname(__file__),
10
- "../schema/agents_schema.json"))) as f:
11
- schema = json.load(f)
12
-
13
- # define the initial value of the flow
14
- data = {
15
- "nodes": [
16
- Node(id="start-node", name="start", position=dict(x=0, y=0)),
17
- Node(id="initial-agent-node",
18
- name="agent",
19
- position=dict(x=200, y=0),
20
- data=dict(condition=['']))
21
- ],
22
- "edges": [Edge(source='start-node', target="initial-agent-node")],
23
- }
24
-
25
-
26
- def on_data_change(_flow):
27
- print(_flow)
28
-
29
-
30
- with gr.Blocks() as demo:
31
- flow = mgr.Flow(value=data, schema=schema, sync_on_data_change=True)
32
- flow.data_change(fn=on_data_change, inputs=[flow])
33
-
34
- if __name__ == "__main__":
35
- demo.queue().launch()
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Flow/demos/component_options.py DELETED
@@ -1,108 +0,0 @@
1
- import json
2
- import os
3
-
4
- import gradio as gr
5
-
6
- import modelscope_studio as mgr
7
- from modelscope_studio.components.Flow import BackgroundPropsDict, Edge, Node
8
-
9
- with open((os.path.join(os.path.dirname(__file__),
10
- "../schema/agents_schema.json"))) as f:
11
- schema = json.load(f)
12
-
13
- # define the initial value of the flow
14
- data = {
15
- "nodes": [
16
- Node(id="start-node", name="start", position=dict(x=0, y=0)),
17
- Node(id="initial-agent-node",
18
- name="agent",
19
- position=dict(x=200, y=0),
20
- data=dict(condition=['']))
21
- ],
22
- "edges": [Edge(source='start-node', target="initial-agent-node")],
23
- }
24
-
25
-
26
- def on_data_change(_flow):
27
- print(_flow)
28
-
29
-
30
- flow_props = ["show_sidebar", "show_minimap", "show_controls"]
31
-
32
-
33
- def on_change(_flow_config, _bgc_variant, _bgc_color, _bgc_bg_color, _bgc_gap,
34
- _bgc_size, _bgc_offset, _bgc_line_width):
35
- new_props = {}
36
- new_background_props = {
37
- "variant": _bgc_variant,
38
- "bgColor": _bgc_bg_color,
39
- "color": _bgc_color,
40
- "gap": _bgc_gap,
41
- "size": _bgc_size,
42
- "offset": _bgc_offset,
43
- 'lineWidth': _bgc_line_width
44
- }
45
- for choice in flow_props:
46
- if choice in _flow_config:
47
- new_props[choice] = True
48
- else:
49
- new_props[choice] = False
50
- return gr.update(**new_props, background_props=new_background_props)
51
-
52
-
53
- with gr.Blocks() as demo:
54
- with gr.Accordion(label="Flow Options"):
55
- flow_config = gr.CheckboxGroup(
56
- container=False,
57
- value=["show_sidebar", "show_minimap", "show_controls"],
58
- choices=flow_props)
59
- with gr.Accordion(label="Background Props"):
60
- with gr.Row():
61
- with gr.Column():
62
- bgc_variant = gr.Radio(choices=["dots", "lines", "cross"],
63
- label="variant",
64
- value="dots")
65
- with gr.Column():
66
- bgc_color = gr.ColorPicker(label="color", value="")
67
- with gr.Column():
68
- bgc_bg_color = gr.ColorPicker(label="bgColor", value="")
69
- with gr.Column():
70
- bgc_gap = gr.Slider(label="gap", value=28)
71
- with gr.Column():
72
- bgc_size = gr.Slider(label="size",
73
- value=1,
74
- maximum=10,
75
- step=1)
76
- with gr.Column():
77
- bgc_offset = gr.Slider(label="offset",
78
- value=1,
79
- step=1,
80
- maximum=10)
81
- with gr.Column():
82
- bgc_line_width = gr.Slider(label="lineWidth",
83
- value=1,
84
- step=1,
85
- maximum=10)
86
-
87
- flow = mgr.Flow(value=data,
88
- schema=schema,
89
- show_controls=True,
90
- show_minimap=True,
91
- show_sidebar=True,
92
- sync_on_data_change=True,
93
- background_props=BackgroundPropsDict(variant='dots'))
94
- gr.on(triggers=[
95
- flow_config.change, bgc_variant.change, bgc_color.change,
96
- bgc_bg_color.change, bgc_gap.change, bgc_size.change,
97
- bgc_offset.change, bgc_line_width.change
98
- ],
99
- fn=on_change,
100
- inputs=[
101
- flow_config, bgc_variant, bgc_color, bgc_bg_color, bgc_gap,
102
- bgc_size, bgc_offset, bgc_line_width
103
- ],
104
- outputs=[flow])
105
- flow.data_change(fn=on_data_change, inputs=[flow])
106
-
107
- if __name__ == "__main__":
108
- demo.queue().launch()
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Flow/demos/custom_node_type.py DELETED
@@ -1,69 +0,0 @@
1
- import gradio as gr
2
-
3
- import modelscope_studio as mgr
4
- from modelscope_studio.components.Flow import (FlowSchemaDict, Node,
5
- NodeSchemaAttributeDict,
6
- NodeSchemaDict)
7
-
8
-
9
- def on_data_change(_flow):
10
- print(_flow)
11
-
12
-
13
- def on_custom(data: gr.EventData):
14
- print(data._data)
15
-
16
-
17
- custom_components = {
18
- "my-input": {
19
- "js":
20
- """
21
- (props, cc, { el, theme, onMount, onUpdate }) => {
22
- onMount(() => {
23
- el.innerHTML = `<input />`
24
- const input = el.querySelector('input')
25
- input.style.color = theme === 'dark' ? 'white' : 'black'
26
- input.style.backgroundColor = theme === 'dark' ? 'black' : 'white'
27
- input.addEventListener('change', (e) => {
28
- cc.dispatch(e.target.value)
29
- })
30
- })
31
- // props update
32
- onUpdate(
33
- () => {
34
- const input = el.querySelector('input')
35
- input.setAttribute('value', props.value || '')
36
- },
37
- // By default, the callback will not be called when the component is being mounted. Set `callAfterMount` to true to enable it.
38
- { callAfterMount: true }
39
- )
40
- }
41
- """
42
- }
43
- }
44
-
45
- schema = FlowSchemaDict(nodes=[
46
- NodeSchemaDict(name="my-input-node",
47
- title="MyInputNode",
48
- attrs=[NodeSchemaAttributeDict(name="a", type="my-input")])
49
- ])
50
-
51
- data = {
52
- "nodes": [
53
- Node(name="my-input-node",
54
- position=dict(x=0, y=0),
55
- data=dict(a='Hello'))
56
- ]
57
- }
58
-
59
- with gr.Blocks() as demo:
60
- flow = mgr.Flow(value=data,
61
- schema=schema,
62
- custom_components=custom_components,
63
- sync_on_data_change=True)
64
- flow.data_change(fn=on_data_change, inputs=[flow])
65
- # called when custom component dispatch event
66
- flow.custom(fn=on_custom)
67
-
68
- if __name__ == "__main__":
69
- demo.queue().launch()
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Flow/schema/agents_schema.json DELETED
@@ -1,66 +0,0 @@
1
- {
2
- "$schema": "https://raw.githubusercontent.com/modelscope/modelscope-studio/main/frontend/Flow/schema.json",
3
- "nodes": [
4
- {
5
- "max": 1,
6
- "min": 1,
7
- "addable": false,
8
- "show_toolbar": false,
9
- "name": "start",
10
- "title": "Start",
11
- "ports": {
12
- "source": ["right"],
13
- "target": []
14
- }
15
- },
16
- {
17
- "icon": "https://img.alicdn.com/imgextra/i4/O1CN01fvt4it25rEZU4Gjso_!!6000000007579-2-tps-128-128.png",
18
- "name": "agent",
19
- "title": "Agent Node",
20
- "description": "Agent Flow Node",
21
- "ports": {
22
- "target": ["left"],
23
- "source": []
24
- },
25
- "attrs": [
26
- {
27
- "name": "prompt",
28
- "title": "Agent Prompt",
29
- "type": "textarea",
30
- "required": {
31
- "message": "Agent Prompt is required"
32
- }
33
- },
34
- {
35
- "name": "tool",
36
- "title": "Tools",
37
- "type": "select",
38
- "props": {
39
- "mode": "multiple",
40
- "options": [
41
- { "label": "Wanx Image Generation", "value": "image_gen" },
42
- { "label": "Code Interpreter", "value": "code_interpreter" },
43
- { "label": "Web Browsing", "value": "web_browser" }
44
- ]
45
- }
46
- },
47
- {
48
- "name": "condition",
49
- "title": "Jump Condition",
50
- "list": {
51
- "min": 1,
52
- "ports": {
53
- "source": ["right"]
54
- }
55
- },
56
- "accordion": false
57
- }
58
- ],
59
- "template": {
60
- "attrs": {
61
- "condition": [""]
62
- }
63
- }
64
- }
65
- ]
66
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Flow/schema/agents_schema.py DELETED
@@ -1,59 +0,0 @@
1
- import os
2
-
3
- from modelscope_studio.components.Flow import (
4
- FlowSchemaDict, NodeSchemaAttributeDict, NodeSchemaAttributeListDict,
5
- NodeSchemaAttributeRequiredDict, NodeSchemaDict, NodeSchemaPortsDict,
6
- NodeSchemaTemplateDict)
7
-
8
-
9
- def resolve_assets(relative_path):
10
- return os.path.join(os.path.dirname(__file__), "../../resources",
11
- relative_path)
12
-
13
-
14
- schema = FlowSchemaDict(nodes=[
15
- NodeSchemaDict(max=1,
16
- min=1,
17
- addable=False,
18
- show_toolbar=False,
19
- name="start",
20
- title="Start",
21
- ports=NodeSchemaPortsDict(source=['right'], target=[])),
22
- NodeSchemaDict(
23
- icon=resolve_assets('./bot.jpeg'),
24
- name="agent",
25
- title="Agent Node",
26
- description="Agent Flow Node",
27
- ports=NodeSchemaPortsDict(source=[], target=['left']),
28
- attrs=[
29
- NodeSchemaAttributeDict(name="prompt",
30
- title="Agent Prompt",
31
- type='textarea',
32
- required=NodeSchemaAttributeRequiredDict(
33
- message="Agent Prompt is required")),
34
- NodeSchemaAttributeDict(name="tool",
35
- title="Tools",
36
- type="select",
37
- props={
38
- "mode":
39
- "multiple",
40
- "options": [{
41
- "label": "Wanx Image Generation",
42
- "value": "image_gen"
43
- }, {
44
- "label": "Code Interpreter",
45
- "value": "code_interpreter"
46
- }, {
47
- "label": "Web Browsing",
48
- "value": "web_browser"
49
- }]
50
- }),
51
- NodeSchemaAttributeDict(
52
- name="condition",
53
- title="Jump Condition",
54
- list=NodeSchemaAttributeListDict(
55
- min=1, ports=NodeSchemaPortsDict(source=['right'])),
56
- accordion=False)
57
- ],
58
- template=NodeSchemaTemplateDict(attrs=dict(condition=[''])))
59
- ])
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Lifecycle/README-zh_CN.md DELETED
@@ -1,53 +0,0 @@
1
- # Lifecycle
2
-
3
- 生命周期组件，用于获取当前用户的环境信息。
4
-
5
- - 获取当前用户的语言、页面主题、user agent 和屏幕状态。
6
- - 监听页面行为并触发相应事件（页面加载、尺寸变化、页面关闭等）。
7
-
8
- ## 如何使用
9
-
10
- ### 基本使用
11
-
12
- <demo name="basic"></demo>
13
-
14
- ### 自动适配用户语言环境
15
-
16
- <demo name="language_adaptation"></demo>
17
-
18
- ### 根据用户界面主题返回不同权重内容
19
-
20
- <demo name="theme_adaptation"></demo>
21
-
22
- ## API 及参数列表
23
-
24
- ### value
25
-
26
- 接口定义：
27
-
28
- ```python
29
- class LifecycleScreenData(GradioModel):
30
- width: float
31
- height: float
32
- scrollX: float
33
- scrollY: float
34
-
35
-
36
- class LifecycleData(GradioModel):
37
- screen: LifecycleScreenData
38
- language: str
39
- theme: str
40
- userAgent: str
41
- ```
42
-
43
- ### props
44
-
45
- 该组件不支持传入 props。
46
-
47
- ### event listeners
48
-
49
- | 事件 | 描述 |
50
- | -------------------------------- | --------------------------------------------------------------------- |
51
- | `mgr.Lifecycle.mount(fn, ···)` | 用户页面加载时触发，EventData 为当前组件 value 的 dict 类型值。 |
52
- | `mgr.Lifecycle.unmount(fn, ···)` | 用户页面关闭时触发，EventData 为当前组件 value 的 dict 类型值。 |
53
- | `mgr.Lifecycle.resize(fn, ···)` | 自定义标签触发事件时触发，EventData 为当前组件 value 的 dict 类型值。 |
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Lifecycle/README.md DELETED
@@ -1,53 +0,0 @@
1
- # Lifecycle
2
-
3
- A Lifecycle component for getting the current user's environment information.
4
-
5
- - Get the current user's language, page theme, user agent, and screen state.
6
- - Listen to page actions and trigger corresponding events (page loading, size changes, page closing, etc.).
7
-
8
- ## How to Use
9
-
10
- ### Basic Usage
11
-
12
- <demo name="basic"></demo>
13
-
14
- ### Automatically Adapt to User Language Environment
15
-
16
- <demo name="language_adaptation"></demo>
17
-
18
- ### Return Different Weighted Content Based on UI Theme
19
-
20
- <demo name="theme_adaptation"></demo>
21
-
22
- ## API and Parameter List
23
-
24
- ### Value
25
-
26
- Interface definition:
27
-
28
- ```python
29
- class LifecycleScreenData(GradioModel):
30
- width: float
31
- height: float
32
- scrollX: float
33
- scrollY: float
34
-
35
-
36
- class LifecycleData(GradioModel):
37
- screen: LifecycleScreenData
38
- language: str
39
- theme: str
40
- userAgent: str
41
- ```
42
-
43
- ### Props
44
-
45
- This component does not support passing in props.
46
-
47
- ### Event Listeners
48
-
49
- | Event | Description |
50
- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
51
- | `mgr.Lifecycle.mount(fn, ···)` | Triggered when the user's page loads. The EventData is a dictionary type value of the current component's value. |
52
- | `mgr.Lifecycle.unmount(fn, ···)` | Triggered when the user's page closes. The EventData is a dictionary type value of the current component's value. |
53
- | `mgr.Lifecycle.resize(fn, ···)` | Triggered when custom labels trigger events. The EventData is a dictionary type value of the current component's value. |
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Lifecycle/app.py DELETED
@@ -1,6 +0,0 @@
1
- from components.Docs import Docs
2
-
3
- docs = Docs(__file__)
4
-
5
- if __name__ == "__main__":
6
- docs.render().queue().launch()
 
 
 
 
 
 
 
components/Lifecycle/demos/basic.py DELETED
@@ -1,28 +0,0 @@
1
- import gradio as gr
2
-
3
- import modelscope_studio as mgr
4
-
5
-
6
- def mount(e: gr.EventData):
7
- # current page state
8
- print("onMount", e._data)
9
-
10
-
11
- def resize(e: gr.EventData):
12
- print("onResize", e._data)
13
-
14
-
15
- def onUnmount(e: gr.EventData):
16
- print("onUnmount", e._data)
17
-
18
-
19
- with gr.Blocks() as demo:
20
- gr.Markdown("The Lifecycle component will not be rendered on the page.")
21
- lifecycle = mgr.Lifecycle()
22
- # listen to the page lifecycle
23
- lifecycle.mount(fn=mount)
24
- lifecycle.resize(fn=resize)
25
- lifecycle.unmount(fn=onUnmount)
26
-
27
- if __name__ == "__main__":
28
- demo.queue().launch()
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Lifecycle/demos/language_adaptation.py DELETED
@@ -1,41 +0,0 @@
1
- import time
2
-
3
- import gradio as gr
4
-
5
- import modelscope_studio as mgr
6
-
7
- messages = {
8
- 'en': {
9
- "hello": "Hello"
10
- },
11
- 'en-US': {
12
- "hello": "Hello"
13
- },
14
- 'zh-CN': {
15
- "hello": "你好"
16
- }
17
- }
18
-
19
- default_lang = "en"
20
-
21
-
22
- def mount(_lifecycle, _state):
23
- lang = _lifecycle.language
24
- if (lang in messages):
25
- _state["current_lang"] = lang
26
- yield 'Switch Language...', _state
27
- time.sleep(2)
28
- yield messages[lang]["hello"], _state
29
-
30
-
31
- with gr.Blocks() as demo:
32
- lifecycle = mgr.Lifecycle()
33
- state = gr.State({"current_lang": default_lang})
34
- markdown = gr.Markdown(value=messages[default_lang]["hello"])
35
-
36
- lifecycle.mount(fn=mount,
37
- inputs=[lifecycle, state],
38
- outputs=[markdown, state])
39
-
40
- if __name__ == "__main__":
41
- demo.queue().launch()
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Lifecycle/demos/theme_adaptation.py DELETED
@@ -1,28 +0,0 @@
1
- import gradio as gr
2
-
3
- import modelscope_studio as mgr
4
-
5
-
6
- def mount(_lifecycle, _state):
7
- _state["theme"] = _lifecycle.theme
8
- yield _state
9
-
10
-
11
- def fn(_state):
12
- theme = _state["theme"]
13
- color = '000/fff' if theme == 'dark' else 'fff/000'
14
- yield gr.update(
15
- value=f"https://dummyimage.com/200x100/{color}.png&text={theme}")
16
-
17
-
18
- with gr.Blocks() as demo:
19
- lifecycle = mgr.Lifecycle()
20
- state = gr.State({"theme": "light"})
21
- btn = gr.Button()
22
- image = gr.Image()
23
-
24
- lifecycle.mount(fn=mount, inputs=[lifecycle, state], outputs=[state])
25
- btn.click(fn=fn, inputs=[state], outputs=[image])
26
-
27
- if __name__ == "__main__":
28
- demo.queue().launch()
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Markdown/README-zh_CN.md CHANGED
@@ -2,9 +2,8 @@
2
 
3
  升级版的 gradio Markdown。
4
 
5
- - 支持输出多模态内容（音频、视频、图片、文本）
6
- - 内置标签（chart、select-box、accordion）
7
- - 支持自定义渲染组件，并与 Python 事件交互
8
 
9
  ## 如何使用
10
 
@@ -28,12 +27,6 @@
28
 
29
  <demo name="select-box"></demo>
30
 
31
- ### 支持图表展示
32
-
33
- 在返回的内容中加入 `chart` 标签，更多用法详见 <tab-link tab="custom_tags/chart">chart</tab-link>
34
-
35
- <demo name="chart"></demo>
36
-
37
  ### 自定义标签（高阶用法，需要了解前端知识）
38
 
39
  <demo name="custom-tag"></demo>
@@ -49,13 +42,13 @@ template只能做简单的变量替换，如果想要引入更多自定义的行
49
  custom_select.js
50
 
51
  ```js
52
- <file src="../resources/custom_components/custom_select.js"></file>
53
  ```
54
 
55
  </demo-suffix>
56
  </demo>
57
 
58
- #### 与 Python 交互
59
 
60
  在 js 中可以使用`cc.dispatch`触发 Python 侧监听的`custom`事件，以前面的custom_select.js为例，我们在前端调用了`cc.dispatch(options[i])`，则会向 Python 侧同时发送通知。
61
 
@@ -67,15 +60,13 @@ custom_select.js
67
 
68
  ### props
69
 
70
- | 属性 | 类型 | 默认值 | 描述 |
71
- | ----------------------------- | --------------------------------------------------------------- | ------ | --------------------------------------------------------------------------- |
72
- | enable_base64 | bool | False | 是否支持渲染的内容为 base64，因为直接渲染 base64 有安全问题，默认为 False。 |
73
- | enable_latex | bool | True | 是否支持 Latex 公式渲染 |
74
- | latex_single_dollar_delimiter | bool | True | 是否支持单`$`符号在 Latex 公式中渲染 |
75
- | preview | bool | True | 是否开启图片预览功能 |
76
- | custom_components | dict\[str, CustomComponentDict\] CustomComponentDict 定义见下方 | None | 支持用户定义自定义标签，并通过 js 控制标签渲染样式与触发 python 事件。 |
77
 
78
- **CustomComponentDict 定义如下**
79
 
80
  ```python
81
  class CustomComponentDict(TypedDict):
@@ -88,10 +79,9 @@ class CustomComponentDict(TypedDict):
88
 
89
  - <tab-link tab="custom_tags/select-box">select-box</tab-link>
90
  - <tab-link tab="custom_tags/accordion">accordion</tab-link>
91
- - <tab-link tab="custom_tags/chart">chart</tab-link>
92
 
93
  ### event listeners
94
 
95
- | 事件 | 描述 |
96
- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
97
- | `mgr.Markdown.custom(fn, ···)` | 自定义标签触发事件时触发，EventData 为：<br/> - tag_index：当前触发标签的 index。<br/> - value：自定义传入的值。 |
 
2
 
3
  升级版的 gradio Markdown。
4
 
5
+ - 支持输出多模态内容（音频、视频、语音、文件、文本）
6
+ - 支持自定义渲染组件，并与 Python 侧事件交互
 
7
 
8
  ## 如何使用
9
 
 
27
 
28
  <demo name="select-box"></demo>
29
 
 
 
 
 
 
 
30
  ### 自定义标签（高阶用法，需要了解前端知识）
31
 
32
  <demo name="custom-tag"></demo>
 
42
  custom_select.js
43
 
44
  ```js
45
+ <file src="./resources/custom_components/custom_select.js"></file>
46
  ```
47
 
48
  </demo-suffix>
49
  </demo>
50
 
51
+ #### 与 Python 侧交互
52
 
53
  在 js 中可以使用`cc.dispatch`触发 Python 侧监听的`custom`事件，以前面的custom_select.js为例，我们在前端调用了`cc.dispatch(options[i])`，则会向 Python 侧同时发送通知。
54
 
 
60
 
61
  ### props
62
 
63
+ | 属性 | 类型 | 默认值 | 描述 |
64
+ | ----------------- | --------------------------------------------------------------- | ------ | --------------------------------------------------------------------------- |
65
+ | enable_base64 | bool | False | 是否支持渲染的内容为 base64，因为直接渲染 base64 有安全问题，默认为 False。 |
66
+ | preview | bool | True | 是否开启图片预览功能 |
67
+ | custom_components | dict\[str, CustomComponentDict\] CustomComponentDict 定义见下方 | None | 支持用户定义自定义标签，并通过 js 控制标签渲染样式与触发 python 事件。 |
 
 
68
 
69
+ **CustomComponent 定义如下**
70
 
71
  ```python
72
  class CustomComponentDict(TypedDict):
 
79
 
80
  - <tab-link tab="custom_tags/select-box">select-box</tab-link>
81
  - <tab-link tab="custom_tags/accordion">accordion</tab-link>
 
82
 
83
  ### event listeners
84
 
85
+ | 事件 | 描述 |
86
+ | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
87
+ | `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：自定义传入的值。 |
components/Markdown/README.md CHANGED
@@ -2,9 +2,8 @@
2
 
3
  Upgraded gradio Markdown.
4
 
5
- - Supports output of multimodal content (audio, video, image, text)
6
- - Built-in tags (chart, select-box, accordion)
7
- - Supports custom rendering components and interaction with Python events
8
 
9
  ## How to Use
10
 
@@ -18,24 +17,19 @@ Upgraded gradio Markdown.
18
 
19
  ### Support for Accordion Content Display
20
 
21
- Include the `accordion` tag in the returned content. For more usage details, see <tab-link tab="custom_tags/accordion">accordion</tab-link>
22
  <demo name="accordion"></demo>
23
 
24
  ### Support for User Selection Interaction
25
 
26
- Include the `select-box` tag in the returned content. For more usage details, see <tab-link tab="custom_tags/select-box">select-box</tab-link>
27
  <demo name="select-box"></demo>
28
 
29
- ### Support for Chart Display
30
-
31
- Include the `chart` tag in the returned content. For more usage details, see <tab-link tab="custom_tags/chart">chart</tab-link>
32
- <demo name="chart"></demo>
33
-
34
  ### Custom Tags (Advanced Usage, Requires Frontend Knowledge)
35
 
36
  <demo name="custom-tag"></demo>
37
 
38
- #### Import JS
39
 
40
  <demo name="custom-tag2"></demo>
41
  The template can only perform simple variable replacements. If you want to introduce more custom behaviors, such as conditional judgments, loop rendering, etc., please use js to control the element for processing. Here is a simple example:
@@ -44,13 +38,13 @@ The template can only perform simple variable replacements. If you want to intro
44
  custom_select.js
45
 
46
  ```js
47
- <file src="../resources/custom_components/custom_select.js"></file>
48
  ```
49
 
50
  </demo-suffix>
51
  </demo>
52
 
53
- #### Interaction with Python
54
 
55
  In js, you can use `cc.dispatch` to trigger the `custom` event listened to on the Python side. Taking the previous custom_select.js as an example, when we call `cc.dispatch(options[i])` on the frontend, a notification will be sent to the Python side simultaneously.
56
  <demo name="custom-tag4"></demo>
@@ -61,14 +55,12 @@ The following APIs are additional extended parameters beyond the original gradio
61
 
62
  ### props
63
 
64
- | Attribute | Type | Default Value | Description |
65
- | ----------------------------- | ------------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------- |
66
- | enable_base64 | bool | False | Whether to support rendering content as base64, since rendering base64 is unsafe, the default is False. |
67
- | preview | bool | True | Whether to enable image preview functionality. |
68
- | enable_latex | bool | True | Whether to enable LaTeX rendering. |
69
- | latex_single_dollar_delimiter | bool | True | Whe ther to enable single dollar delimiter `$` for LaTeX rendering. |
70
- | custom_components | Dict[str, CustomComponentDict] CustomComponentDict definition below | None | Supports user-defined custom tags and controls tag rendering styles and triggers Python events through js. |
71
- | |
72
 
73
  **CustomComponent definition is as follows:**
74
 
@@ -83,10 +75,9 @@ class CustomComponentDict(TypedDict):
83
 
84
  - <tab-link tab="custom_tags/select-box">select-box</tab-link>
85
  - <tab-link tab="custom_tags/accordion">accordion</tab-link>
86
- - <tab-link tab="custom_tags/chart">chart</tab-link>
87
 
88
  ### Event Listeners
89
 
90
- | Event | Description |
91
- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
92
- | `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. |
 
2
 
3
  Upgraded gradio Markdown.
4
 
5
+ - Supports output of multimodal content (audio, video, voice, files, text)
6
+ - Supports custom rendering components and interaction with Python-side events
 
7
 
8
  ## How to Use
9
 
 
17
 
18
  ### Support for Accordion Content Display
19
 
20
+ Include the `accordion` tag in the returned content for more usage details, see <tab-link tab="custom_tags/accordion">accordion</tab-link>
21
  <demo name="accordion"></demo>
22
 
23
  ### Support for User Selection Interaction
24
 
25
+ Include the `select-box` tag in the returned content for more usage details, see <tab-link tab="custom_tags/select-box">select-box</tab-link>
26
  <demo name="select-box"></demo>
27
 
 
 
 
 
 
28
  ### Custom Tags (Advanced Usage, Requires Frontend Knowledge)
29
 
30
  <demo name="custom-tag"></demo>
31
 
32
+ #### Importing js
33
 
34
  <demo name="custom-tag2"></demo>
35
  The template can only perform simple variable replacements. If you want to introduce more custom behaviors, such as conditional judgments, loop rendering, etc., please use js to control the element for processing. Here is a simple example:
 
38
  custom_select.js
39
 
40
  ```js
41
+ <file src="./resources/custom_components/custom_select.js"></file>
42
  ```
43
 
44
  </demo-suffix>
45
  </demo>
46
 
47
+ #### Interaction with Python Side
48
 
49
  In js, you can use `cc.dispatch` to trigger the `custom` event listened to on the Python side. Taking the previous custom_select.js as an example, when we call `cc.dispatch(options[i])` on the frontend, a notification will be sent to the Python side simultaneously.
50
  <demo name="custom-tag4"></demo>
 
55
 
56
  ### props
57
 
58
+ | Attribute | Type | Default Value | Description |
59
+ | ----------------- | ------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------- |
60
+ | enable_base64 | bool | False | Whether to support rendering content as base64, since rendering base64 directly can pose security issues, the default is False. |
61
+ | preview | bool | True | Whether to enable image preview functionality. |
62
+ | custom_components | dict[str, CustomComponentDict] CustomComponentDict definition below | None | Supports user-defined custom tags and controls tag rendering styles and triggers Python events through js. |
63
+ | |
 
 
64
 
65
  **CustomComponent definition is as follows:**
66
 
 
75
 
76
  - <tab-link tab="custom_tags/select-box">select-box</tab-link>
77
  - <tab-link tab="custom_tags/accordion">accordion</tab-link>
 
78
 
79
  ### Event Listeners
80
 
81
+ | Event | Description |
82
+ | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
83
+ | `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. |
components/Markdown/custom_tags/chart-zh_CN.md DELETED
@@ -1,17 +0,0 @@
1
- # chart
2
-
3
- 在 markdown 文本中添加图表。
4
-
5
- ## 如何使用
6
-
7
- ### 基本使用
8
-
9
- <demo name="custom_tags/chart/basic"></demo>
10
-
11
- ## API 及参数列表
12
-
13
- ### props
14
-
15
- | 属性 | 类型 | 默认值 | 描述 |
16
- | ------- | ------ | ------ | ----------------------------------------------------------------------------------------- |
17
- | options | object | | `echarts`的 options 配置，详见：[echarts docs](https://echarts.apache.org/en/option.html) |
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Markdown/custom_tags/chart.md DELETED
@@ -1,17 +0,0 @@
1
- # chart
2
-
3
- Add a chart to markdown text.
4
-
5
- ## How to Use
6
-
7
- ### Basic Usage
8
-
9
- <demo name="custom_tags/chart/basic"></demo>
10
-
11
- ## API and Parameter List
12
-
13
- ### props
14
-
15
- | Attribute | Type | Default Value | Description |
16
- | --------- | ------ | ------------- | --------------------------------------------------------------------------------- |
17
- | options | object | | `echarts` options, see: [echarts docs](https://echarts.apache.org/en/option.html) |
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
components/Markdown/demos/accordion.py CHANGED
@@ -1,13 +1,12 @@
1
  import gradio as gr
2
-
3
  import modelscope_studio as mgr
4
 
5
  with gr.Blocks() as demo:
6
- mgr.Markdown("""
7
  <accordion title="Using tool">
8
 
9
  ```json
10
- {"text": "glorious weather", "resolution": "1024*1024"}
11
  ```
12
 
13
  </accordion>
@@ -19,7 +18,7 @@ Use `::accordion-title` to support markdown：
19
  ::accordion-title[Using `tool`]
20
 
21
  ```json
22
- {"text": "glorious weather", "resolution": "1024*1024"}
23
  ```
24
  </accordion>
25
  """)
 
1
  import gradio as gr
 
2
  import modelscope_studio as mgr
3
 
4
  with gr.Blocks() as demo:
5
+ mgr.Markdown(f"""
6
  <accordion title="Using tool">
7
 
8
  ```json
9
+ {{"text": "glorious weather", "resolution": "1024*1024"}}
10
  ```
11
 
12
  </accordion>
 
18
  ::accordion-title[Using `tool`]
19
 
20
  ```json
21
+ {{"text": "glorious weather", "resolution": "1024*1024"}}
22
  ```
23
  </accordion>
24
  """)
components/Markdown/demos/basic.py CHANGED
@@ -1,5 +1,4 @@
1
  import gradio as gr
2
-
3
  import modelscope_studio as mgr
4
 
5
  with gr.Blocks() as demo:
 
1
  import gradio as gr
 
2
  import modelscope_studio as mgr
3
 
4
  with gr.Blocks() as demo: