Spaces:
Running
Running
update
Browse files- .gitattributes +1 -0
- README-zh_CN.md +15 -0
- README.md +20 -11
- app.py +2 -2
- components/Chatbot/README-zh_CN.md +129 -0
- components/Chatbot/README.md +47 -48
- components/Chatbot/demos/.DS_Store +0 -0
- components/Chatbot/demos/accordion.py +11 -13
- components/Chatbot/demos/basic.py +2 -3
- components/Chatbot/demos/message_config.py +5 -5
- components/Chatbot/demos/multi_bots.py +5 -10
- components/Chatbot/demos/multimodal.py +4 -5
- components/Chatbot/demos/select-box.py +4 -5
- components/Chatbot/resources/custom_components/custom_select.js +1 -1
- components/Docs.py +20 -7
- components/Markdown/README-zh_CN.md +87 -0
- components/Markdown/README.md +29 -33
- components/Markdown/app.py +4 -4
- components/Markdown/custom_tags/accordion-zh_CN.md +23 -0
- components/Markdown/custom_tags/accordion.md +9 -10
- components/Markdown/custom_tags/select-box-zh_CN.md +45 -0
- components/Markdown/custom_tags/select-box.md +23 -23
- components/Markdown/demos/accordion.py +6 -9
- components/Markdown/demos/basic.py +1 -2
- components/Markdown/demos/custom-tag.py +4 -5
- components/Markdown/demos/custom-tag2.py +7 -8
- components/Markdown/demos/custom-tag3.py +1 -2
- components/Markdown/demos/custom-tag4.py +1 -3
- components/Markdown/demos/custom_tags/accordion/__pycache__/accordion-title.cpython-39.pyc +0 -0
- components/Markdown/demos/custom_tags/accordion/__pycache__/basic.cpython-39.pyc +0 -0
- components/Markdown/demos/custom_tags/accordion/accordion-title.py +3 -4
- components/Markdown/demos/custom_tags/accordion/basic.py +3 -4
- components/Markdown/demos/custom_tags/select-box/__pycache__/basic.cpython-39.pyc +0 -0
- components/Markdown/demos/custom_tags/select-box/__pycache__/card_shape.cpython-39.pyc +0 -0
- components/Markdown/demos/custom_tags/select-box/__pycache__/card_shape_width_auto.cpython-39.pyc +0 -0
- components/Markdown/demos/custom_tags/select-box/__pycache__/python_events.cpython-39.pyc +0 -0
- components/Markdown/demos/custom_tags/select-box/basic.py +1 -2
- components/Markdown/demos/custom_tags/select-box/card_shape.py +2 -3
- components/Markdown/demos/custom_tags/select-box/card_shape_width_auto.py +3 -4
- components/Markdown/demos/custom_tags/select-box/python_events.py +3 -3
- components/Markdown/demos/multimodal.py +4 -5
- components/Markdown/demos/select-box.py +2 -3
- components/Markdown/resources/custom_components/custom_select.js +1 -1
- components/MultimodalInput/README-zh_CN.md +50 -0
- components/MultimodalInput/README.md +21 -21
- components/MultimodalInput/demos/basic.py +2 -3
- components/MultimodalInput/demos/config_buttons.py +1 -2
- components/MultimodalInput/demos/upload_sources.py +1 -2
- components/MultimodalInput/demos/with_chatbot.py +2 -3
- requirements.txt +1 -2
.gitattributes
CHANGED
|
@@ -34,3 +34,4 @@ saved_model/**/* 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
|
|
|
|
|
|
| 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
|
README-zh_CN.md
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# ModelScope Studio
|
| 2 |
+
|
| 3 |
+
`modelscope_studio` 是一套基于 gradio 4.x 的扩展组件库，致力于服务于 ModelScope 创空间中对于 gradio 应用的各类扩展需求，目前主要聚集在对话场景增强、多模态场景以及一些其他垂直场景支持。
|
| 4 |
+
|
| 5 |
+
## Install
|
| 6 |
+
|
| 7 |
+
```sh
|
| 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
|
@@ -1,12 +1,11 @@
|
|
| 1 |
-
|
| 2 |
---
|
| 3 |
-
tags:
|
| 4 |
-
- gradio-custom-component
|
| 5 |
-
- Chatbot
|
| 6 |
-
- MutilmodalInput
|
| 7 |
-
- Markdown
|
| 8 |
-
- gradio-template-Chatbot
|
| 9 |
-
- gradio-template-Markdown
|
| 10 |
title: modelscope_gradio_components V0.0.1b8
|
| 11 |
colorFrom: red
|
| 12 |
colorTo: red
|
|
@@ -15,8 +14,18 @@ pinned: false
|
|
| 15 |
license: apache-2.0
|
| 16 |
---
|
| 17 |
|
| 18 |
-
#
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
|
| 20 |
-
|
| 21 |
|
| 22 |
-
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
tags:
|
| 3 |
+
- gradio-custom-component
|
| 4 |
+
- Chatbot
|
| 5 |
+
- MutilmodalInput
|
| 6 |
+
- Markdown
|
| 7 |
+
- gradio-template-Chatbot
|
| 8 |
+
- gradio-template-Markdown
|
| 9 |
title: modelscope_gradio_components V0.0.1b8
|
| 10 |
colorFrom: red
|
| 11 |
colorTo: red
|
|
|
|
| 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 |
+
|
| 21 |
+
## Install
|
| 22 |
+
|
| 23 |
+
```sh
|
| 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>
|
app.py
CHANGED
|
@@ -4,10 +4,10 @@ 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 |
-
["
|
| 11 |
["Chatbot", chatbot_docs],
|
| 12 |
["Markdown", markdown_docs],
|
| 13 |
["MultimodalInput", multimodel_input_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],
|
components/Chatbot/README-zh_CN.md
ADDED
|
@@ -0,0 +1,129 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# Chatbot
|
| 2 |
+
|
| 3 |
+
升级版的 gradio Chatbot。
|
| 4 |
+
|
| 5 |
+
- 支持前端匀速流式输出 message
|
| 6 |
+
- 支持输出多模态内容（音频、视频、语音、文件、文本）
|
| 7 |
+
- 支持多 agent 场景
|
| 8 |
+
- 支持自定义渲染组件，并与 Python 侧事件交互
|
| 9 |
+
|
| 10 |
+
## 如何使用
|
| 11 |
+
|
| 12 |
+
### 基本使用
|
| 13 |
+
|
| 14 |
+
<demo name="basic"></demo>
|
| 15 |
+
|
| 16 |
+
### 多模态 & 支持本地文件的展示
|
| 17 |
+
|
| 18 |
+
<demo name="multimodal"></demo>
|
| 19 |
+
|
| 20 |
+
### 控制打字机单句 message 开关
|
| 21 |
+
|
| 22 |
+
<demo name="message_config"></demo>
|
| 23 |
+
|
| 24 |
+
### 支持手风琴内容展示
|
| 25 |
+
|
| 26 |
+
在返回的内容中加入 `accordion` 标签，可以在内容中加入手风琴，更多用法详见 <tab-link component-tab="Markdown">Markdown 内置自定义标签</tab-link>
|
| 27 |
+
|
| 28 |
+
同时为了适配大模型的工具调用链路，额外对某些大模型的格式做了预设配置，支持下述格式的预设处理（会将下面的格式转换成上方`accordion`标签包裹形式）
|
| 29 |
+
|
| 30 |
+
```python
|
| 31 |
+
import modelscope_studio as mgr
|
| 32 |
+
from modelscope_studio.components.Chatbot.llm_thinking_presets import qwen
|
| 33 |
+
|
| 34 |
+
# 添加 qwen 解析预设
|
| 35 |
+
mgr.Chatbot(llm_thinking_presets=[qwen()])
|
| 36 |
+
```
|
| 37 |
+
|
| 38 |
+
```text
|
| 39 |
+
Action: image_gen
|
| 40 |
+
Action Input: {"text": "glorious weather", "resolution": "1024*1024"}
|
| 41 |
+
Observation: <result></result> 根据您的描述"glorious weather"，我生成了一张图片。
|
| 42 |
+
|
| 43 |
+
Action: 「任意文本表示，将展示为思考链调用的名称」
|
| 44 |
+
Action Input: 「任意json or md 内容，将展示到调用过程的下拉框」
|
| 45 |
+
Observation: <result>「任意 md 内容，将作为完成调用的展示的下拉框内」</result>
|
| 46 |
+
```
|
| 47 |
+
|
| 48 |
+
<demo name="accordion"></demo>
|
| 49 |
+
|
| 50 |
+
### 支持用户选择交互
|
| 51 |
+
|
| 52 |
+
在返回的内容中加入 `select-box` 标签，更多用法详见 <tab-link component-tab="Markdown">Markdown 内置自定义标签</tab-link>
|
| 53 |
+
|
| 54 |
+
<demo name="select-box"></demo>
|
| 55 |
+
|
| 56 |
+
### 多 bot 场景
|
| 57 |
+
|
| 58 |
+
<demo name="multi_bots"></demo>
|
| 59 |
+
|
| 60 |
+
### 自定义标签（高阶用法，需要了解前端知识）
|
| 61 |
+
|
| 62 |
+
详见 <tab-link component-tab="Markdown">Markdown</tab-link> 组件
|
| 63 |
+
|
| 64 |
+
## API 及参数列表
|
| 65 |
+
|
| 66 |
+
以下 API 均为在原有 gradio Chatbot 外的额外拓展参数。
|
| 67 |
+
|
| 68 |
+
### value
|
| 69 |
+
|
| 70 |
+
接口定义：
|
| 71 |
+
|
| 72 |
+
```python
|
| 73 |
+
|
| 74 |
+
class FileMessage(GradioModel):
|
| 75 |
+
file: FileData
|
| 76 |
+
alt_text: Optional[str] = None
|
| 77 |
+
|
| 78 |
+
|
| 79 |
+
class MultimodalMessage(GradioModel):
|
| 80 |
+
name: Optional[str] = None
|
| 81 |
+
text: Optional[str] = None
|
| 82 |
+
flushing: Optional[bool] = None
|
| 83 |
+
avatar: Optional[Union[str, FileData]] = ''
|
| 84 |
+
files: Optional[List[Union[FileMessage, dict, FileData, str]]] = None
|
| 85 |
+
|
| 86 |
+
# 支持多 bot 场景
|
| 87 |
+
MultimodalMessageItem = Optional[Union[MultimodalMessage, MultimodalInputData,
|
| 88 |
+
dict, str]]
|
| 89 |
+
|
| 90 |
+
|
| 91 |
+
class ChatbotData(GradioRootModel):
|
| 92 |
+
root: List[Tuple[Union[MultimodalMessageItem, List[MultimodalMessageItem]],
|
| 93 |
+
Union[MultimodalMessageItem,
|
| 94 |
+
List[MultimodalMessageItem]]]]
|
| 95 |
+
```
|
| 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):
|
| 115 |
+
props: Optional[List[str]]
|
| 116 |
+
template: Optional[str]
|
| 117 |
+
js: Optional[str]
|
| 118 |
+
```
|
| 119 |
+
|
| 120 |
+
### 内置的自定义标签
|
| 121 |
+
|
| 122 |
+
见 <tab-link component-tab="Markdown">Markdown 内置自定义标签</tab-link>
|
| 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
|
@@ -1,73 +1,72 @@
|
|
| 1 |
# Chatbot
|
| 2 |
|
| 3 |
-
|
| 4 |
|
| 5 |
-
-
|
| 6 |
-
-
|
| 7 |
-
-
|
| 8 |
-
-
|
| 9 |
|
| 10 |
-
##
|
| 11 |
|
| 12 |
-
###
|
| 13 |
|
| 14 |
<demo name="basic"></demo>
|
| 15 |
|
| 16 |
-
###
|
| 17 |
|
| 18 |
<demo name="multimodal"></demo>
|
| 19 |
|
| 20 |
-
###
|
| 21 |
|
| 22 |
<demo name="message_config"></demo>
|
| 23 |
|
| 24 |
-
###
|
| 25 |
|
| 26 |
-
|
| 27 |
-
|
| 28 |
-
同时为了适配大模型的工具调用链路，额外对某些大模型的格式做了预设配置，支持下述格式的预设处理（会将下面的格式转换成上方`accordion`标签包裹形式）
|
| 29 |
|
| 30 |
```python
|
| 31 |
-
import
|
| 32 |
-
from
|
| 33 |
|
| 34 |
-
#
|
| 35 |
mgr.Chatbot(llm_thinking_presets=[qwen()])
|
| 36 |
```
|
| 37 |
|
| 38 |
```text
|
| 39 |
Action: image_gen
|
| 40 |
-
Action Input: {"text": "
|
| 41 |
-
Observation: <result></result>
|
| 42 |
|
| 43 |
-
Action:
|
| 44 |
-
Action Input:
|
| 45 |
-
Observation: <result
|
| 46 |
```
|
| 47 |
|
| 48 |
<demo name="accordion"></demo>
|
| 49 |
|
| 50 |
-
###
|
| 51 |
|
| 52 |
-
|
| 53 |
|
| 54 |
<demo name="select-box"></demo>
|
| 55 |
|
| 56 |
-
###
|
| 57 |
|
| 58 |
<demo name="multi_bots"></demo>
|
| 59 |
|
| 60 |
-
###
|
| 61 |
|
| 62 |
-
|
| 63 |
|
| 64 |
-
## API
|
| 65 |
|
| 66 |
-
|
| 67 |
|
| 68 |
### value
|
| 69 |
|
| 70 |
-
|
| 71 |
|
| 72 |
```python
|
| 73 |
|
|
@@ -83,7 +82,7 @@ class MultimodalMessage(GradioModel):
|
|
| 83 |
avatar: Optional[Union[str, FileData]] = ''
|
| 84 |
files: Optional[List[Union[FileMessage, dict, FileData, str]]] = None
|
| 85 |
|
| 86 |
-
#
|
| 87 |
MultimodalMessageItem = Optional[Union[MultimodalMessage, MultimodalInputData,
|
| 88 |
dict, str]]
|
| 89 |
|
|
@@ -96,19 +95,19 @@ class ChatbotData(GradioRootModel):
|
|
| 96 |
|
| 97 |
### props
|
| 98 |
|
| 99 |
-
|
|
| 100 |
-
| -------------------- | -------------------------------------------------------------------------------- |
|
| 101 |
-
| flushing | bool | True
|
| 102 |
-
| enable_base64 | bool | False
|
| 103 |
-
| preview | bool | True
|
| 104 |
-
| avatar_images | tuple\[str \| Path \| None \| dict \| list, str \| Path \| None \| dict\| list\] | None
|
| 105 |
-
| avatar_image_align | Literal['top', 'middle', 'bottom'] | 'bottom'
|
| 106 |
-
| avatar_image_width | int | 45
|
| 107 |
-
| flushing_speed | int | 3
|
| 108 |
-
| llm_thinking_presets | list\[dict\] | \[\]
|
| 109 |
-
| custom_components | dict\[str, CustomComponentDict\] CustomComponentDict
|
| 110 |
|
| 111 |
-
**CustomComponent
|
| 112 |
|
| 113 |
```python
|
| 114 |
class CustomComponentDict(TypedDict):
|
|
@@ -117,13 +116,13 @@ class CustomComponentDict(TypedDict):
|
|
| 117 |
js: Optional[str]
|
| 118 |
```
|
| 119 |
|
| 120 |
-
###
|
| 121 |
|
| 122 |
-
|
| 123 |
|
| 124 |
### event listeners
|
| 125 |
|
| 126 |
-
|
|
| 127 |
-
| ------------------------------ |
|
| 128 |
-
| `mgr.Chatbot.flushed(fn,
|
| 129 |
-
| `mgr.Chatbot.custom(fn,
|
|
|
|
| 1 |
# Chatbot
|
| 2 |
|
| 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 |
|
| 12 |
+
### Basic Usage
|
| 13 |
|
| 14 |
<demo name="basic"></demo>
|
| 15 |
|
| 16 |
+
### Multimodal & Support for Local File Display
|
| 17 |
|
| 18 |
<demo name="multimodal"></demo>
|
| 19 |
|
| 20 |
+
### Control for Typewriter Single Sentence Message
|
| 21 |
|
| 22 |
<demo name="message_config"></demo>
|
| 23 |
|
| 24 |
+
### Support for Accordion Content Display
|
| 25 |
|
| 26 |
+
Include the `accordion` tag in the returned content to add an accordion within the content. For more usage details, see <tab-link component-tab="Markdown">Markdown Built-in Custom Tags</tab-link>.
|
| 27 |
+
Additionally, to adapt to the toolchain usage of large models, some preset configurations for certain large models have been made. Support for the following preset formats (which will be converted into the form wrapped by the above `accordion` tag).
|
|
|
|
| 28 |
|
| 29 |
```python
|
| 30 |
+
import modelscope_studio as mgr
|
| 31 |
+
from modelscope_studio.components.Chatbot.llm_thinking_presets import qwen
|
| 32 |
|
| 33 |
+
# Add qwen preset
|
| 34 |
mgr.Chatbot(llm_thinking_presets=[qwen()])
|
| 35 |
```
|
| 36 |
|
| 37 |
```text
|
| 38 |
Action: image_gen
|
| 39 |
+
Action Input: {"text": "glorious weather", "resolution": "1024*1024"}
|
| 40 |
+
Observation: <result></result> Based on your description: glorious weather,I generated a picture.[](https://dashscope-result-sh.oss-cn-shanghai.aliyuncs.com/1d/a2/20231213/723609ee/1926736d-7c6e-4d2f-b438-b7746b3d89f5-1.png?Expires=1702537773&OSSAccessKeyId=LTAI5tQZd8AEcZX6KZV4G8qL&Signature=H%2B0rIn6BMfE%2BOr1uPb7%2Br9G3%2B5w%3D)
|
| 41 |
|
| 42 |
+
Action: 「An arbitrary text representation that will be displayed as the name of the thought chain call」
|
| 43 |
+
Action Input: 「Any json or md content will be displayed in the drop-down box of the calling process」
|
| 44 |
+
Observation: <result>「Any md content will be displayed in the drop-down box when the call is completed」</result>
|
| 45 |
```
|
| 46 |
|
| 47 |
<demo name="accordion"></demo>
|
| 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>
|
| 58 |
|
| 59 |
+
### Custom Tags (Advanced Usage, Requires Frontend Knowledge)
|
| 60 |
|
| 61 |
+
See the <tab-link component-tab="Markdown">Markdown component</tab-link> for details.
|
| 62 |
|
| 63 |
+
## API and Parameter List
|
| 64 |
|
| 65 |
+
The following APIs are additional extended parameters beyond the original gradio Chatbot.
|
| 66 |
|
| 67 |
### value
|
| 68 |
|
| 69 |
+
Interface definition:
|
| 70 |
|
| 71 |
```python
|
| 72 |
|
|
|
|
| 82 |
avatar: Optional[Union[str, FileData]] = ''
|
| 83 |
files: Optional[List[Union[FileMessage, dict, FileData, str]]] = None
|
| 84 |
|
| 85 |
+
# Support multi-bot scenarios
|
| 86 |
MultimodalMessageItem = Optional[Union[MultimodalMessage, MultimodalInputData,
|
| 87 |
dict, str]]
|
| 88 |
|
|
|
|
| 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 |
|
| 112 |
```python
|
| 113 |
class CustomComponentDict(TypedDict):
|
|
|
|
| 116 |
js: Optional[str]
|
| 117 |
```
|
| 118 |
|
| 119 |
+
### Built-in Custom Tags
|
| 120 |
|
| 121 |
+
See <tab-link component-tab="Markdown">Markdown Built-in Custom Tags</tab-link>
|
| 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,10 +1,8 @@
|
|
| 1 |
import os
|
| 2 |
|
| 3 |
import gradio as gr
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
from modelscope_gradio_components.components.Chatbot.llm_thinking_presets import \
|
| 7 |
-
qwen
|
| 8 |
|
| 9 |
|
| 10 |
def resolve_assets(relative_path):
|
|
@@ -16,22 +14,22 @@ conversation = [
|
|
| 16 |
[
|
| 17 |
None, {
|
| 18 |
"text": f"""
|
| 19 |
-
|
| 20 |
-
<accordion title="
|
| 21 |
|
| 22 |
```json
|
| 23 |
-
{{"text": "
|
| 24 |
```
|
| 25 |
</accordion>
|
| 26 |
|
| 27 |
-
|
| 28 |
Action: image_gen
|
| 29 |
-
Action Input: {{"text": "
|
| 30 |
-
Observation: <result>![IMAGEGEN]({resolve_assets("screen.jpeg")})</result>
|
| 31 |
|
| 32 |
-
Action:
|
| 33 |
-
Action Input:
|
| 34 |
-
Observation: <result
|
| 35 |
""",
|
| 36 |
"flushing": False
|
| 37 |
}
|
|
|
|
| 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):
|
|
|
|
| 14 |
[
|
| 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:
|
| 26 |
Action: image_gen
|
| 27 |
+
Action Input: {{"text": "glorious weather", "resolution": "1024*1024"}}
|
| 28 |
+
Observation: <result>![IMAGEGEN]({resolve_assets("screen.jpeg")})</result> Based on your description"glorious weather",I generated a picture.![]({resolve_assets("screen.jpeg")})
|
| 29 |
|
| 30 |
+
Action: 「An arbitrary text representation that will be displayed as the name of the thought chain call」
|
| 31 |
+
Action Input: 「Any json or md content will be displayed in the drop-down box of the calling process」
|
| 32 |
+
Observation: <result>「Any md content will be displayed in the drop-down box when the call is completed」</result>
|
| 33 |
""",
|
| 34 |
"flushing": False
|
| 35 |
}
|
components/Chatbot/demos/basic.py
CHANGED
|
@@ -2,14 +2,13 @@ import os
|
|
| 2 |
import time
|
| 3 |
|
| 4 |
import gradio as gr
|
| 5 |
-
|
| 6 |
-
import modelscope_gradio_components as mgr
|
| 7 |
|
| 8 |
conversation = [
|
| 9 |
[
|
| 10 |
None,
|
| 11 |
{
|
| 12 |
-
# bot
|
| 13 |
"text": "Hello I'm a chatbot",
|
| 14 |
"flushing": False
|
| 15 |
}
|
|
|
|
| 2 |
import time
|
| 3 |
|
| 4 |
import gradio as gr
|
| 5 |
+
import modelscope_studio as mgr
|
|
|
|
| 6 |
|
| 7 |
conversation = [
|
| 8 |
[
|
| 9 |
None,
|
| 10 |
{
|
| 11 |
+
# The first message of bot closes the typewriter.
|
| 12 |
"text": "Hello I'm a chatbot",
|
| 13 |
"flushing": False
|
| 14 |
}
|
components/Chatbot/demos/message_config.py
CHANGED
|
@@ -1,18 +1,18 @@
|
|
| 1 |
import time
|
| 2 |
|
| 3 |
import gradio as gr
|
| 4 |
-
|
| 5 |
-
import modelscope_gradio_components as mgr
|
| 6 |
|
| 7 |
|
| 8 |
def submit(_chatbot):
|
| 9 |
-
_chatbot.append(["test user",
|
|
|
|
| 10 |
yield _chatbot
|
| 11 |
time.sleep(2)
|
| 12 |
_chatbot.append(["test user", {
|
| 13 |
"text": "test bot",
|
| 14 |
"flushing": False
|
| 15 |
-
}]) #
|
| 16 |
yield _chatbot
|
| 17 |
time.sleep(2)
|
| 18 |
_chatbot.append([{
|
|
@@ -21,7 +21,7 @@ def submit(_chatbot):
|
|
| 21 |
}, {
|
| 22 |
"text": "test bot",
|
| 23 |
"flushing": False
|
| 24 |
-
}]) # user
|
| 25 |
yield _chatbot
|
| 26 |
|
| 27 |
|
|
|
|
| 1 |
import time
|
| 2 |
|
| 3 |
import gradio as gr
|
| 4 |
+
import modelscope_studio as mgr
|
|
|
|
| 5 |
|
| 6 |
|
| 7 |
def submit(_chatbot):
|
| 8 |
+
_chatbot.append(["test user",
|
| 9 |
+
"test bot"]) # bot starts the typewriter by default
|
| 10 |
yield _chatbot
|
| 11 |
time.sleep(2)
|
| 12 |
_chatbot.append(["test user", {
|
| 13 |
"text": "test bot",
|
| 14 |
"flushing": False
|
| 15 |
+
}]) # both start the typewriter
|
| 16 |
yield _chatbot
|
| 17 |
time.sleep(2)
|
| 18 |
_chatbot.append([{
|
|
|
|
| 21 |
}, {
|
| 22 |
"text": "test bot",
|
| 23 |
"flushing": False
|
| 24 |
+
}]) # user starts the typewriter
|
| 25 |
yield _chatbot
|
| 26 |
|
| 27 |
|
components/Chatbot/demos/multi_bots.py
CHANGED
|
@@ -2,8 +2,7 @@ import os
|
|
| 2 |
import time
|
| 3 |
|
| 4 |
import gradio as gr
|
| 5 |
-
|
| 6 |
-
import modelscope_gradio_components as mgr
|
| 7 |
|
| 8 |
|
| 9 |
def resolve_assets(relative_path):
|
|
@@ -12,14 +11,10 @@ def resolve_assets(relative_path):
|
|
| 12 |
|
| 13 |
|
| 14 |
conversation = [
|
| 15 |
-
[
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
"text": "Hello I'm a chatbot",
|
| 20 |
-
"flushing": False
|
| 21 |
-
}
|
| 22 |
-
],
|
| 23 |
]
|
| 24 |
|
| 25 |
|
|
|
|
| 2 |
import time
|
| 3 |
|
| 4 |
import gradio as gr
|
| 5 |
+
import modelscope_studio as mgr
|
|
|
|
| 6 |
|
| 7 |
|
| 8 |
def resolve_assets(relative_path):
|
|
|
|
| 11 |
|
| 12 |
|
| 13 |
conversation = [
|
| 14 |
+
[None, {
|
| 15 |
+
"text": "Hello I'm a chatbot",
|
| 16 |
+
"flushing": False
|
| 17 |
+
}],
|
|
|
|
|
|
|
|
|
|
|
|
|
| 18 |
]
|
| 19 |
|
| 20 |
|
components/Chatbot/demos/multimodal.py
CHANGED
|
@@ -1,8 +1,7 @@
|
|
| 1 |
import os
|
| 2 |
|
| 3 |
import gradio as gr
|
| 4 |
-
|
| 5 |
-
import modelscope_gradio_components as mgr
|
| 6 |
|
| 7 |
|
| 8 |
def resolve_assets(relative_path):
|
|
@@ -14,17 +13,17 @@ conversation = [
|
|
| 14 |
[
|
| 15 |
None, {
|
| 16 |
"text": f"""
|
| 17 |
-
|
| 18 |
|
| 19 |
![image]({resolve_assets("bot.jpeg")})
|
| 20 |
|
| 21 |
<img src="{resolve_assets("user.jpeg")}" />
|
| 22 |
|
| 23 |
-
|
| 24 |
|
| 25 |
<video src="{resolve_assets("dog.mp4")}"></video>
|
| 26 |
|
| 27 |
-
|
| 28 |
|
| 29 |
<audio src="{resolve_assets("audio.wav")}"></audio>
|
| 30 |
""",
|
|
|
|
| 1 |
import os
|
| 2 |
|
| 3 |
import gradio as gr
|
| 4 |
+
import modelscope_studio as mgr
|
|
|
|
| 5 |
|
| 6 |
|
| 7 |
def resolve_assets(relative_path):
|
|
|
|
| 13 |
[
|
| 14 |
None, {
|
| 15 |
"text": f"""
|
| 16 |
+
Image
|
| 17 |
|
| 18 |
![image]({resolve_assets("bot.jpeg")})
|
| 19 |
|
| 20 |
<img src="{resolve_assets("user.jpeg")}" />
|
| 21 |
|
| 22 |
+
Video
|
| 23 |
|
| 24 |
<video src="{resolve_assets("dog.mp4")}"></video>
|
| 25 |
|
| 26 |
+
Audio
|
| 27 |
|
| 28 |
<audio src="{resolve_assets("audio.wav")}"></audio>
|
| 29 |
""",
|
components/Chatbot/demos/select-box.py
CHANGED
|
@@ -1,10 +1,9 @@
|
|
| 1 |
import json
|
| 2 |
|
| 3 |
import gradio as gr
|
|
|
|
| 4 |
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
# label 为对用户展示值，value 为实际选择值
|
| 8 |
options = [{"label": "A", "value": "a"}, "b", "c"]
|
| 9 |
|
| 10 |
conversation = [[
|
|
@@ -30,7 +29,7 @@ Card Shape:
|
|
| 30 |
]]
|
| 31 |
|
| 32 |
|
| 33 |
-
#
|
| 34 |
def fn(data: gr.EventData):
|
| 35 |
print(data._data)
|
| 36 |
|
|
@@ -41,7 +40,7 @@ with gr.Blocks() as demo:
|
|
| 41 |
flushing=False,
|
| 42 |
height=600,
|
| 43 |
)
|
| 44 |
-
#
|
| 45 |
chatbot.custom(fn=fn)
|
| 46 |
|
| 47 |
if __name__ == "__main__":
|
|
|
|
| 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.
|
|
|
|
|
|
|
| 7 |
options = [{"label": "A", "value": "a"}, "b", "c"]
|
| 8 |
|
| 9 |
conversation = [[
|
|
|
|
| 29 |
]]
|
| 30 |
|
| 31 |
|
| 32 |
+
# The custom data must be marked by `gr.EventData`
|
| 33 |
def fn(data: gr.EventData):
|
| 34 |
print(data._data)
|
| 35 |
|
|
|
|
| 40 |
flushing=False,
|
| 41 |
height=600,
|
| 42 |
)
|
| 43 |
+
# All custom tags will trigger the custom event
|
| 44 |
chatbot.custom(fn=fn)
|
| 45 |
|
| 46 |
if __name__ == "__main__":
|
components/Chatbot/resources/custom_components/custom_select.js
CHANGED
|
@@ -18,7 +18,7 @@
|
|
| 18 |
});
|
| 19 |
const input = label.getElementsByTagName('input')[0];
|
| 20 |
input.checked = true;
|
| 21 |
-
//
|
| 22 |
cc.dispatch(options[i]);
|
| 23 |
});
|
| 24 |
});
|
|
|
|
| 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 |
});
|
components/Docs.py
CHANGED
|
@@ -3,8 +3,7 @@ import re
|
|
| 3 |
from typing import Callable
|
| 4 |
|
| 5 |
import gradio as gr
|
| 6 |
-
|
| 7 |
-
import modelscope_gradio_components as mgr
|
| 8 |
|
| 9 |
from .parse_markdown import parse_markdown
|
| 10 |
|
|
@@ -20,7 +19,7 @@ custom_components = {
|
|
| 20 |
|
| 21 |
|
| 22 |
def remove_formatter(markdown_text):
|
| 23 |
-
pattern = r"
|
| 24 |
|
| 25 |
replaced_text = re.sub(pattern, "", markdown_text)
|
| 26 |
|
|
@@ -62,6 +61,9 @@ def get_demo_modules(file_path: str):
|
|
| 62 |
return demo_modules
|
| 63 |
|
| 64 |
|
|
|
|
|
|
|
|
|
|
| 65 |
class Docs:
|
| 66 |
|
| 67 |
def __init__(self, file_path: str, markdown_files: list = None):
|
|
@@ -69,9 +71,20 @@ class Docs:
|
|
| 69 |
self.demo_modules = get_demo_modules(file_path)
|
| 70 |
# default current directory
|
| 71 |
self.markdown_files = markdown_files if markdown_files else [
|
| 72 |
-
|
| 73 |
-
if
|
| 74 |
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 75 |
self.tabs = None
|
| 76 |
|
| 77 |
def read_file(self, relative_path: str):
|
|
@@ -108,7 +121,6 @@ class Docs:
|
|
| 108 |
md = mgr.Markdown(item["value"],
|
| 109 |
header_links=True,
|
| 110 |
custom_components=custom_components)
|
| 111 |
-
# 过滤
|
| 112 |
deps = [dep for dep in [components_tabs, self.tabs] if dep]
|
| 113 |
if len(deps) > 0:
|
| 114 |
md.custom(fn=on_tab_link_click, outputs=deps)
|
|
@@ -135,12 +147,13 @@ class Docs:
|
|
| 135 |
|
| 136 |
for markdown_file in self.markdown_files:
|
| 137 |
tab_name = ".".join(markdown_file.split(".")[:-1])
|
|
|
|
| 138 |
with gr.TabItem(tab_name, id=tab_name):
|
| 139 |
self.render_markdown(
|
| 140 |
markdown_file,
|
| 141 |
on_tab_link_click=tab_link_click,
|
| 142 |
components_tabs=components_tabs)
|
| 143 |
-
|
| 144 |
self.render_markdown(self.markdown_files[0],
|
| 145 |
on_tab_link_click=tab_link_click,
|
| 146 |
components_tabs=components_tabs)
|
|
|
|
| 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
|
| 9 |
|
|
|
|
| 19 |
|
| 20 |
|
| 21 |
def remove_formatter(markdown_text):
|
| 22 |
+
pattern = r"^ *---[\s\S]*?---"
|
| 23 |
|
| 24 |
replaced_text = re.sub(pattern, "", markdown_text)
|
| 25 |
|
|
|
|
| 61 |
return demo_modules
|
| 62 |
|
| 63 |
|
| 64 |
+
is_modelscope_studio = os.getenv('MODELSCOPE_ENVIRONMENT') == 'studio'
|
| 65 |
+
|
| 66 |
+
|
| 67 |
class Docs:
|
| 68 |
|
| 69 |
def __init__(self, file_path: str, markdown_files: list = None):
|
|
|
|
| 71 |
self.demo_modules = get_demo_modules(file_path)
|
| 72 |
# default current directory
|
| 73 |
self.markdown_files = markdown_files if markdown_files else [
|
| 74 |
+
filename for filename in os.listdir(os.path.dirname(file_path))
|
| 75 |
+
if filename.endswith(".md")
|
| 76 |
]
|
| 77 |
+
if is_modelscope_studio:
|
| 78 |
+
self.markdown_files = list(
|
| 79 |
+
filter(
|
| 80 |
+
lambda x: x.endswith("-zh_CN.md") or
|
| 81 |
+
(f"{'.'.join(x.split('.')[:-1])}-zh_CN.md" not in self.
|
| 82 |
+
markdown_files), self.markdown_files))
|
| 83 |
+
else:
|
| 84 |
+
self.markdown_files = list(
|
| 85 |
+
filter(lambda x: not x.endswith("-zh_CN.md"),
|
| 86 |
+
self.markdown_files))
|
| 87 |
+
|
| 88 |
self.tabs = None
|
| 89 |
|
| 90 |
def read_file(self, relative_path: str):
|
|
|
|
| 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)
|
|
|
|
| 147 |
|
| 148 |
for markdown_file in self.markdown_files:
|
| 149 |
tab_name = ".".join(markdown_file.split(".")[:-1])
|
| 150 |
+
tab_name = tab_name.split("-zh_CN")[0]
|
| 151 |
with gr.TabItem(tab_name, id=tab_name):
|
| 152 |
self.render_markdown(
|
| 153 |
markdown_file,
|
| 154 |
on_tab_link_click=tab_link_click,
|
| 155 |
components_tabs=components_tabs)
|
| 156 |
+
elif (len(self.markdown_files) == 1):
|
| 157 |
self.render_markdown(self.markdown_files[0],
|
| 158 |
on_tab_link_click=tab_link_click,
|
| 159 |
components_tabs=components_tabs)
|
components/Markdown/README-zh_CN.md
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# Markdown
|
| 2 |
+
|
| 3 |
+
升级版的 gradio Markdown。
|
| 4 |
+
|
| 5 |
+
- 支持输出多模态内容（音频、视频、语音、文件、文本）
|
| 6 |
+
- 支持自定义渲染组件，并与 Python 侧事件交互
|
| 7 |
+
|
| 8 |
+
## 如何使用
|
| 9 |
+
|
| 10 |
+
### 基本使用
|
| 11 |
+
|
| 12 |
+
<demo name="basic"></demo>
|
| 13 |
+
|
| 14 |
+
### 多模态 & 支持本地文件的展示
|
| 15 |
+
|
| 16 |
+
<demo name="multimodal"></demo>
|
| 17 |
+
|
| 18 |
+
### 支持手风琴内容展示
|
| 19 |
+
|
| 20 |
+
在返回的内容中加入 `accordion` 标签，更多用法详见 <tab-link tab="custom_tags/accordion">accordion</tab-link>
|
| 21 |
+
|
| 22 |
+
<demo name="accordion"></demo>
|
| 23 |
+
|
| 24 |
+
### 支持用户选择交互
|
| 25 |
+
|
| 26 |
+
在返回的内容中加入 `select-box` 标签，更多用法详见 <tab-link tab="custom_tags/select-box">select-box</tab-link>
|
| 27 |
+
|
| 28 |
+
<demo name="select-box"></demo>
|
| 29 |
+
|
| 30 |
+
### 自定义标签（高阶用法，需要了解前端知识）
|
| 31 |
+
|
| 32 |
+
<demo name="custom-tag"></demo>
|
| 33 |
+
|
| 34 |
+
#### 引入 js
|
| 35 |
+
|
| 36 |
+
<demo name="custom-tag2"></demo>
|
| 37 |
+
|
| 38 |
+
template只能做简单的变量替换，如果想要引入更多自定义的行为，如条件判断、循环渲染等，请使用 js 控制 el 自行处理，下面是简单的示例：
|
| 39 |
+
|
| 40 |
+
<demo name="custom-tag3">
|
| 41 |
+
<demo-suffix>
|
| 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 |
+
|
| 55 |
+
<demo name="custom-tag4"></demo>
|
| 56 |
+
|
| 57 |
+
## API 及参数列表
|
| 58 |
+
|
| 59 |
+
以下 API 均为在原有 gradio Markdown 外的额外拓展参数。
|
| 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):
|
| 73 |
+
props: Optional[List[str]]
|
| 74 |
+
template: Optional[str]
|
| 75 |
+
js: Optional[str]
|
| 76 |
+
```
|
| 77 |
+
|
| 78 |
+
### 内置的自定义标签
|
| 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
|
@@ -1,42 +1,38 @@
|
|
| 1 |
# Markdown
|
| 2 |
|
| 3 |
-
|
| 4 |
|
| 5 |
-
-
|
| 6 |
-
-
|
| 7 |
|
| 8 |
-
##
|
| 9 |
|
| 10 |
-
###
|
| 11 |
|
| 12 |
<demo name="basic"></demo>
|
| 13 |
|
| 14 |
-
###
|
| 15 |
|
| 16 |
<demo name="multimodal"></demo>
|
| 17 |
|
| 18 |
-
###
|
| 19 |
-
|
| 20 |
-
在返回的内容中加入 `accordion` 标签，更多用法详见 <tab-link tab="custom_tags/accordion">accordion</tab-link>
|
| 21 |
|
|
|
|
| 22 |
<demo name="accordion"></demo>
|
| 23 |
|
| 24 |
-
###
|
| 25 |
-
|
| 26 |
-
在返回的内容中加入 `select-box` 标签，更多用法详见 <tab-link tab="custom_tags/select-box">select-box</tab-link>
|
| 27 |
|
|
|
|
| 28 |
<demo name="select-box"></demo>
|
| 29 |
|
| 30 |
-
###
|
| 31 |
|
| 32 |
<demo name="custom-tag"></demo>
|
| 33 |
|
| 34 |
-
####
|
| 35 |
|
| 36 |
<demo name="custom-tag2"></demo>
|
| 37 |
-
|
| 38 |
-
template只能做简单的变量替换，如果想要引入更多自定义的行为，如条件判断、循环渲染等，请使用 js 控制 el 自行处理，下面是简单的示例：
|
| 39 |
-
|
| 40 |
<demo name="custom-tag3">
|
| 41 |
<demo-suffix>
|
| 42 |
custom_select.js
|
|
@@ -48,25 +44,25 @@ custom_select.js
|
|
| 48 |
</demo-suffix>
|
| 49 |
</demo>
|
| 50 |
|
| 51 |
-
####
|
| 52 |
-
|
| 53 |
-
在 js 中可以使用`cc.dispatch`触发 Python 侧监听的`custom`事件，以前面的custom_select.js为例，我们在前端调用了`cc.dispatch(options[i])`，则会向 Python 侧同时发送通知。
|
| 54 |
|
|
|
|
| 55 |
<demo name="custom-tag4"></demo>
|
| 56 |
|
| 57 |
-
## API
|
| 58 |
|
| 59 |
-
|
| 60 |
|
| 61 |
### props
|
| 62 |
|
| 63 |
-
|
|
| 64 |
-
| ----------------- |
|
| 65 |
-
| enable_base64 | bool
|
| 66 |
-
| preview | bool
|
| 67 |
-
| custom_components | dict
|
|
|
|
| 68 |
|
| 69 |
-
**CustomComponent
|
| 70 |
|
| 71 |
```python
|
| 72 |
class CustomComponentDict(TypedDict):
|
|
@@ -75,13 +71,13 @@ class CustomComponentDict(TypedDict):
|
|
| 75 |
js: Optional[str]
|
| 76 |
```
|
| 77 |
|
| 78 |
-
###
|
| 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 |
-
###
|
| 84 |
|
| 85 |
-
|
|
| 86 |
-
| ------------------------------ |
|
| 87 |
-
| `mgr.Markdown.custom(fn,
|
|
|
|
| 1 |
# Markdown
|
| 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 |
|
| 10 |
+
### Basic Usage
|
| 11 |
|
| 12 |
<demo name="basic"></demo>
|
| 13 |
|
| 14 |
+
### Multimodal & Support for Local File Display
|
| 15 |
|
| 16 |
<demo name="multimodal"></demo>
|
| 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:
|
|
|
|
|
|
|
| 36 |
<demo name="custom-tag3">
|
| 37 |
<demo-suffix>
|
| 38 |
custom_select.js
|
|
|
|
| 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>
|
| 51 |
|
| 52 |
+
## API and Parameter List
|
| 53 |
|
| 54 |
+
The following APIs are additional extended parameters beyond the original gradio Markdown.
|
| 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 |
|
| 67 |
```python
|
| 68 |
class CustomComponentDict(TypedDict):
|
|
|
|
| 71 |
js: Optional[str]
|
| 72 |
```
|
| 73 |
|
| 74 |
+
### Built-in Custom Tags
|
| 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/app.py
CHANGED
|
@@ -9,10 +9,10 @@ def resolve(relative_path: str):
|
|
| 9 |
|
| 10 |
docs = Docs(
|
| 11 |
__file__,
|
| 12 |
-
markdown_files=(["README.md"] + [
|
| 13 |
-
f"custom_tags/{
|
| 14 |
-
for
|
| 15 |
-
if
|
| 16 |
]),
|
| 17 |
)
|
| 18 |
|
|
|
|
| 9 |
|
| 10 |
docs = Docs(
|
| 11 |
__file__,
|
| 12 |
+
markdown_files=(["README.md", "README-zh_CN.md"] + [
|
| 13 |
+
f"custom_tags/{filename}"
|
| 14 |
+
for filename in os.listdir(resolve('custom_tags'))
|
| 15 |
+
if filename.endswith(".md")
|
| 16 |
]),
|
| 17 |
)
|
| 18 |
|
components/Markdown/custom_tags/accordion-zh_CN.md
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# accordion
|
| 2 |
+
|
| 3 |
+
在 markdown 文本中添加手风琴效果。
|
| 4 |
+
|
| 5 |
+
## 如何使用
|
| 6 |
+
|
| 7 |
+
### 基本使用
|
| 8 |
+
|
| 9 |
+
<demo name="custom_tags/accordion/basic"></demo>
|
| 10 |
+
|
| 11 |
+
### 使用 accordion-title 标记
|
| 12 |
+
|
| 13 |
+
使用`::accordion-title[content]`的形式可以在标题输入 markdown 文本。
|
| 14 |
+
|
| 15 |
+
<demo name="custom_tags/accordion/accordion-title"></demo>
|
| 16 |
+
|
| 17 |
+
## API 及参数列表
|
| 18 |
+
|
| 19 |
+
### props
|
| 20 |
+
|
| 21 |
+
| 属性 | 类型 | 默认值 | 描述 |
|
| 22 |
+
| ----- | ------ | ------ | ------------ |
|
| 23 |
+
| title | string | | 手风琴的标题 |
|
components/Markdown/custom_tags/accordion.md
CHANGED
|
@@ -1,23 +1,22 @@
|
|
| 1 |
# accordion
|
| 2 |
|
| 3 |
-
|
| 4 |
|
| 5 |
-
##
|
| 6 |
|
| 7 |
-
###
|
| 8 |
|
| 9 |
<demo name="custom_tags/accordion/basic"></demo>
|
| 10 |
|
| 11 |
-
###
|
| 12 |
-
|
| 13 |
-
使用`::accordion-title[content]`的形式可以在标题输入 markdown 文本。
|
| 14 |
|
|
|
|
| 15 |
<demo name="custom_tags/accordion/accordion-title"></demo>
|
| 16 |
|
| 17 |
-
## API
|
| 18 |
|
| 19 |
### props
|
| 20 |
|
| 21 |
-
|
|
| 22 |
-
|
|
| 23 |
-
| title
|
|
|
|
| 1 |
# accordion
|
| 2 |
|
| 3 |
+
Add an accordion effect to markdown text.
|
| 4 |
|
| 5 |
+
## How to Use
|
| 6 |
|
| 7 |
+
### Basic Usage
|
| 8 |
|
| 9 |
<demo name="custom_tags/accordion/basic"></demo>
|
| 10 |
|
| 11 |
+
### Using the accordion-title Marker
|
|
|
|
|
|
|
| 12 |
|
| 13 |
+
Using the form `::accordion-title[content]`, you can input markdown text into the title.
|
| 14 |
<demo name="custom_tags/accordion/accordion-title"></demo>
|
| 15 |
|
| 16 |
+
## API and Parameter List
|
| 17 |
|
| 18 |
### props
|
| 19 |
|
| 20 |
+
| Attribute | Type | Default Value | Description |
|
| 21 |
+
| --------- | ------ | ------------- | -------------------------- |
|
| 22 |
+
| title | string | | The title of the accordion |
|
components/Markdown/custom_tags/select-box-zh_CN.md
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# select-box
|
| 2 |
+
|
| 3 |
+
在 markdown 文本中添加选择交互框。
|
| 4 |
+
|
| 5 |
+
## 如何使用
|
| 6 |
+
|
| 7 |
+
### 基本使用
|
| 8 |
+
|
| 9 |
+
<demo name="custom_tags/select-box/basic"></demo>
|
| 10 |
+
|
| 11 |
+
### Card 样式
|
| 12 |
+
|
| 13 |
+
<demo name="custom_tags/select-box/card_shape"></demo>
|
| 14 |
+
|
| 15 |
+
### Card 自适应内部元素宽度
|
| 16 |
+
|
| 17 |
+
<demo name="custom_tags/select-box/card_shape_width_auto"></demo>
|
| 18 |
+
|
| 19 |
+
### 监听 Python 事件
|
| 20 |
+
|
| 21 |
+
<demo name="custom_tags/select-box/python_events"></demo>
|
| 22 |
+
|
| 23 |
+
## API 及参数列表
|
| 24 |
+
|
| 25 |
+
### value
|
| 26 |
+
|
| 27 |
+
custom 事件中 custom_data value 对应值， 返回值为用户 options 传入的对应 value ，如果type="checkbox"，则返回一个 list。
|
| 28 |
+
|
| 29 |
+
### props
|
| 30 |
+
|
| 31 |
+
| 属性 | 类型 | 默认值 | 描述 |
|
| 32 |
+
| ------------ | ------------------------------------------------------------------------------------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| 33 |
+
| type | 'checkbox' \| 'radio' | 'radio' | 选择框类型，'radio' 为单选框、'checkbox'为多选框。 |
|
| 34 |
+
| disabled | boolean | | 禁用选择，通常在需要读取历史信息二次渲染时会用到。 |
|
| 35 |
+
| value | string | | 默认选中值，通常适用于`type="checkbox"`时提前为用户选择部分选项和设置`disabled`后的默认值渲染。 |
|
| 36 |
+
| direction | 'horizontal' \| 'vertical' | 'horizontal' | 横向或竖向排列选择框 |
|
| 37 |
+
| shape | 'card' \| 'default' | 'default' | 选择框样式 |
|
| 38 |
+
| options | (string\| { label?: string, value?: string, imgSrc?: string})\[\] | | 为用户提供的选项值，每一项可以为 string 或 object。 当值为 object 时可以接收更多自定义值，其中imgSrc只有当shape="card"时才生效。 |
|
| 39 |
+
| select-once | boolean | false | 是否只允许用户选择一次 |
|
| 40 |
+
| submit-text | string | | 提交按钮的展示值，当该属性有值时，会展示提交按钮，此时用户只有点击提交按钮后才会触发选择事件。 |
|
| 41 |
+
| columns | number \| { xs?: number, sm?: number, md?: number, lg?: number, xl?: number, xxl?: number } | { xs: 1, sm: 2, md: 2, lg: 4} | 当shape="card"时才生效。每一行选项占用列数，值的范围为1 - 24，建议此项取值可以被 24 整除，否则可能列数会不符合预期。 当此项传入值为对象时，可以响应式控制每一行渲染列数，响应阈值如下：<br/> - xs：屏幕 < 576px <br/> - sm：屏幕 ≥ 576px <br/> - md：屏幕 ≥ 768px <br/> - lg：屏幕 ≥ 992px <br/> - xl：屏幕 ≥ 1200px <br/> - xxl：屏幕 ≥ 1600px 当direction为vertical时此配置不生效。 |
|
| 42 |
+
| item-width | string | | 当shape="card"时才生效。每个选项的宽度，如：'auto'、'100px'，默认使用 columns 自动分配的宽度。 |
|
| 43 |
+
| item-height | string | | 当shape="card"时才生效。每个选项的高度，默认自适应元素高度。 |
|
| 44 |
+
| img-height | string | '160px' | 当shape="card"时才生效。每个选项中图片的高度。 |
|
| 45 |
+
| equal-height | boolean | false | 当shape="card"时才生效。是否每一行的选项高度都相等，会使用高度最高的选项。 |
|
components/Markdown/custom_tags/select-box.md
CHANGED
|
@@ -1,45 +1,45 @@
|
|
| 1 |
# select-box
|
| 2 |
|
| 3 |
-
|
| 4 |
|
| 5 |
-
##
|
| 6 |
|
| 7 |
-
###
|
| 8 |
|
| 9 |
<demo name="custom_tags/select-box/basic"></demo>
|
| 10 |
|
| 11 |
-
### Card
|
| 12 |
|
| 13 |
<demo name="custom_tags/select-box/card_shape"></demo>
|
| 14 |
|
| 15 |
-
### Card
|
| 16 |
|
| 17 |
<demo name="custom_tags/select-box/card_shape_width_auto"></demo>
|
| 18 |
|
| 19 |
-
###
|
| 20 |
|
| 21 |
<demo name="custom_tags/select-box/python_events"></demo>
|
| 22 |
|
| 23 |
-
## API
|
| 24 |
|
| 25 |
### value
|
| 26 |
|
| 27 |
-
|
| 28 |
|
| 29 |
### props
|
| 30 |
|
| 31 |
-
|
|
| 32 |
-
| ------------ | ------------------------------------------------------------------------------------------- |
|
| 33 |
-
| type | 'checkbox'
|
| 34 |
-
| disabled | boolean |
|
| 35 |
-
| value | string |
|
| 36 |
-
| direction |
|
| 37 |
-
| shape | 'card'
|
| 38 |
-
| options | (string\|
|
| 39 |
-
| select-once | boolean | false
|
| 40 |
-
| submit-text | string |
|
| 41 |
-
| columns | number
|
| 42 |
-
| item-width | string |
|
| 43 |
-
| item-height | string |
|
| 44 |
-
| img-height | string | '160px'
|
| 45 |
-
| equal-height | boolean | false
|
|
|
|
| 1 |
# select-box
|
| 2 |
|
| 3 |
+
Add a selection interaction box to markdown text.
|
| 4 |
|
| 5 |
+
## How to Use
|
| 6 |
|
| 7 |
+
### Basic Usage
|
| 8 |
|
| 9 |
<demo name="custom_tags/select-box/basic"></demo>
|
| 10 |
|
| 11 |
+
### Card Style
|
| 12 |
|
| 13 |
<demo name="custom_tags/select-box/card_shape"></demo>
|
| 14 |
|
| 15 |
+
### Card Adapts to Width of Inner Elements
|
| 16 |
|
| 17 |
<demo name="custom_tags/select-box/card_shape_width_auto"></demo>
|
| 18 |
|
| 19 |
+
### Listening to Python Events
|
| 20 |
|
| 21 |
<demo name="custom_tags/select-box/python_events"></demo>
|
| 22 |
|
| 23 |
+
## API and Parameter List
|
| 24 |
|
| 25 |
### value
|
| 26 |
|
| 27 |
+
The corresponding value of custom_data value in the custom event; returns the user's inputted value for options. If type="checkbox", it returns a list.
|
| 28 |
|
| 29 |
### props
|
| 30 |
|
| 31 |
+
| Attribute | Type | Default Value | Description |
|
| 32 |
+
| ------------ | ------------------------------------------------------------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| 33 |
+
| type | 'checkbox' \| 'radio' | 'radio' | The type of selection box: 'radio' for radio buttons, 'checkbox' for checkboxes. |
|
| 34 |
+
| disabled | boolean | | Disable the selection, usually used when reading historical information for re-rendering. |
|
| 35 |
+
| value | string | | The default selected value, usually used to pre-select some options for the user when `type="checkbox"` and to set the default value for rendering after setting `disabled`. |
|
| 36 |
+
| direction | 'horizontal' \| 'vertical' | 'horizontal' | Arrange selection boxes horizontally or vertically. |
|
| 37 |
+
| shape | 'card' \| 'default' | 'default' | The style of the selection box. |
|
| 38 |
+
| options | (string \| { label?: string, value?: string, imgSrc?: string })[] | | The options provided to the user, each item can be a string or an object. When the value is an object, it can accept more custom values, where imgSrc only takes effect when shape="card". |
|
| 39 |
+
| select-once | boolean | false | Whether to allow the user to make a selection only once. |
|
| 40 |
+
| submit-text | string | | The display value of the submit button. When this attribute has a value, the submit button will be displayed, and the selection event will only be triggered after the user clicks the submit button. |
|
| 41 |
+
| columns | number \| { xs?: number, sm?: number, md?: number, lg?: number, xl?: number, xxl?: number } | { xs: 1, sm: 2, md: 2, lg: 4 } | Effective only when shape="card". The number of columns each row of options occupies, the value range is 1 - 24, it is recommended that this value is divisible by 24, otherwise, the number of columns may not meet expectations. When this item is passed as an object, it can responsively control the number of rendered columns per row, responsive thresholds are as follows: <br/> - xs: screen < 576px <br/> - sm: screen ≥ 576px <br/> - md: screen ≥ 768px <br/> - lg: screen ≥ 992px <br/> - xl: screen ≥ 1200px <br/> - xxl: screen ≥ 1600px This configuration does not take effect when direction is vertical. |
|
| 42 |
+
| item-width | string | | Effective only when shape="card". The width of each option, such as: 'auto', '100px', the default uses the width automatically allocated by columns. |
|
| 43 |
+
| item-height | string | | Effective only when shape="card". The height of each option, defaults to adapt to the height of the element. |
|
| 44 |
+
| img-height | string | '160px' | Effective only when shape="card". The height of the images within each option. |
|
| 45 |
+
| equal-height | boolean | false | Effective only when shape="card". Whether the height of the options in each row should be equal, using the height of the tallest option. |
|
components/Markdown/demos/accordion.py
CHANGED
|
@@ -1,27 +1,24 @@
|
|
| 1 |
import gradio as gr
|
| 2 |
-
|
| 3 |
-
import modelscope_gradio_components as mgr
|
| 4 |
|
| 5 |
with gr.Blocks() as demo:
|
| 6 |
mgr.Markdown(f"""
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
<accordion title="调用 tool">
|
| 10 |
|
| 11 |
```json
|
| 12 |
-
{{"text": "
|
| 13 |
```
|
| 14 |
|
| 15 |
</accordion>
|
| 16 |
|
| 17 |
-
|
| 18 |
|
| 19 |
<accordion>
|
| 20 |
|
| 21 |
-
::accordion-title[
|
| 22 |
|
| 23 |
```json
|
| 24 |
-
{{"text": "
|
| 25 |
```
|
| 26 |
</accordion>
|
| 27 |
""")
|
|
|
|
| 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>
|
| 13 |
|
| 14 |
+
Use `::accordion-title` to support markdown：
|
| 15 |
|
| 16 |
<accordion>
|
| 17 |
|
| 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,6 +1,5 @@
|
|
| 1 |
import gradio as gr
|
| 2 |
-
|
| 3 |
-
import modelscope_gradio_components as mgr
|
| 4 |
|
| 5 |
with gr.Blocks() as demo:
|
| 6 |
mgr.Markdown(
|
|
|
|
| 1 |
import gradio as gr
|
| 2 |
+
import modelscope_studio as mgr
|
|
|
|
| 3 |
|
| 4 |
with gr.Blocks() as demo:
|
| 5 |
mgr.Markdown(
|
components/Markdown/demos/custom-tag.py
CHANGED
|
@@ -1,6 +1,5 @@
|
|
| 1 |
import gradio as gr
|
| 2 |
-
|
| 3 |
-
import modelscope_gradio_components as mgr
|
| 4 |
|
| 5 |
with gr.Blocks() as demo:
|
| 6 |
mgr.Markdown(
|
|
@@ -8,11 +7,11 @@ with gr.Blocks() as demo:
|
|
| 8 |
custom tag:<custom-tag value="aaa"></custom-tag>
|
| 9 |
""",
|
| 10 |
custom_components={
|
| 11 |
-
#
|
| 12 |
"custom-tag": {
|
| 13 |
-
#
|
| 14 |
"props": ["value"],
|
| 15 |
-
#
|
| 16 |
"template": "<div>{value}</div>"
|
| 17 |
}
|
| 18 |
})
|
|
|
|
| 1 |
import gradio as gr
|
| 2 |
+
import modelscope_studio as mgr
|
|
|
|
| 3 |
|
| 4 |
with gr.Blocks() as demo:
|
| 5 |
mgr.Markdown(
|
|
|
|
| 7 |
custom tag:<custom-tag value="aaa"></custom-tag>
|
| 8 |
""",
|
| 9 |
custom_components={
|
| 10 |
+
# Key is the tag name
|
| 11 |
"custom-tag": {
|
| 12 |
+
# The tag props.
|
| 13 |
"props": ["value"],
|
| 14 |
+
# The tag template, use `{prop}` as placeholder。
|
| 15 |
"template": "<div>{value}</div>"
|
| 16 |
}
|
| 17 |
})
|
components/Markdown/demos/custom-tag2.py
CHANGED
|
@@ -1,6 +1,5 @@
|
|
| 1 |
import gradio as gr
|
| 2 |
-
|
| 3 |
-
import modelscope_gradio_components as mgr
|
| 4 |
|
| 5 |
with gr.Blocks() as demo:
|
| 6 |
mgr.Markdown(
|
|
@@ -8,22 +7,22 @@ with gr.Blocks() as demo:
|
|
| 8 |
custom tag:<custom-tag value="aaa"></custom-tag>
|
| 9 |
""",
|
| 10 |
custom_components={
|
| 11 |
-
# key 为标签名
|
| 12 |
"custom-tag": {
|
| 13 |
"props": ["value"],
|
| 14 |
"template":
|
| 15 |
"<button onclick='{onClick}'>{value}</button>",
|
| 16 |
-
# js
|
| 17 |
"js":
|
| 18 |
"""
|
| 19 |
(props, cc, { el, onMount }) => {
|
| 20 |
-
// onMount
|
| 21 |
onMount(() => {
|
| 22 |
-
// el
|
| 23 |
console.log(el)
|
| 24 |
})
|
| 25 |
-
console.log(props.children) //
|
| 26 |
-
|
|
|
|
| 27 |
return {
|
| 28 |
value: 'Click Me: ' + props.value,
|
| 29 |
onClick: () => {
|
|
|
|
| 1 |
import gradio as gr
|
| 2 |
+
import modelscope_studio as mgr
|
|
|
|
| 3 |
|
| 4 |
with gr.Blocks() as demo:
|
| 5 |
mgr.Markdown(
|
|
|
|
| 7 |
custom tag:<custom-tag value="aaa"></custom-tag>
|
| 8 |
""",
|
| 9 |
custom_components={
|
|
|
|
| 10 |
"custom-tag": {
|
| 11 |
"props": ["value"],
|
| 12 |
"template":
|
| 13 |
"<button onclick='{onClick}'>{value}</button>",
|
| 14 |
+
# The `js` property should be a string containing a JavaScript Function.
|
| 15 |
"js":
|
| 16 |
"""
|
| 17 |
(props, cc, { el, onMount }) => {
|
| 18 |
+
// `onMount` will be called after the template rendered
|
| 19 |
onMount(() => {
|
| 20 |
+
// `el` is the container element
|
| 21 |
console.log(el)
|
| 22 |
})
|
| 23 |
+
console.log(props.children) // By default, `props` will be passed a property named `children`, which can get the content in the tag, such as 'xx' in '<tag>xx</tag>'.
|
| 24 |
+
|
| 25 |
+
// The return value will be merged with `props` and passed to the template.
|
| 26 |
return {
|
| 27 |
value: 'Click Me: ' + props.value,
|
| 28 |
onClick: () => {
|
components/Markdown/demos/custom-tag3.py
CHANGED
|
@@ -2,8 +2,7 @@ import json
|
|
| 2 |
import os
|
| 3 |
|
| 4 |
import gradio as gr
|
| 5 |
-
|
| 6 |
-
import modelscope_gradio_components as mgr
|
| 7 |
|
| 8 |
options = ["a", "b", "c"]
|
| 9 |
|
|
|
|
| 2 |
import os
|
| 3 |
|
| 4 |
import gradio as gr
|
| 5 |
+
import modelscope_studio as mgr
|
|
|
|
| 6 |
|
| 7 |
options = ["a", "b", "c"]
|
| 8 |
|
components/Markdown/demos/custom-tag4.py
CHANGED
|
@@ -2,8 +2,7 @@ import json
|
|
| 2 |
import os
|
| 3 |
|
| 4 |
import gradio as gr
|
| 5 |
-
|
| 6 |
-
import modelscope_gradio_components as mgr
|
| 7 |
|
| 8 |
options = ["a", "b", "c"]
|
| 9 |
|
|
@@ -17,7 +16,6 @@ with open(resolve_assets("./custom_components/custom_select.js"), 'r') as f:
|
|
| 17 |
custom_select_js = f.read()
|
| 18 |
|
| 19 |
|
| 20 |
-
# 注意一定要显示指明类型，gradio 使用 ioc 机制注入值
|
| 21 |
def fn(data: gr.EventData):
|
| 22 |
# custom {'index': [0, 1, 0], 'tag': 'custom-select', 'tag_index': 0, 'value': 'option A'}
|
| 23 |
print("custom value", data._data)
|
|
|
|
| 2 |
import os
|
| 3 |
|
| 4 |
import gradio as gr
|
| 5 |
+
import modelscope_studio as mgr
|
|
|
|
| 6 |
|
| 7 |
options = ["a", "b", "c"]
|
| 8 |
|
|
|
|
| 16 |
custom_select_js = f.read()
|
| 17 |
|
| 18 |
|
|
|
|
| 19 |
def fn(data: gr.EventData):
|
| 20 |
# custom {'index': [0, 1, 0], 'tag': 'custom-select', 'tag_index': 0, 'value': 'option A'}
|
| 21 |
print("custom value", data._data)
|
components/Markdown/demos/custom_tags/accordion/__pycache__/accordion-title.cpython-39.pyc
ADDED
|
Binary file (549 Bytes). View file
|
|
|
components/Markdown/demos/custom_tags/accordion/__pycache__/basic.cpython-39.pyc
ADDED
|
Binary file (525 Bytes). View file
|
|
|
components/Markdown/demos/custom_tags/accordion/accordion-title.py
CHANGED
|
@@ -1,15 +1,14 @@
|
|
| 1 |
import gradio as gr
|
| 2 |
-
|
| 3 |
-
import modelscope_gradio_components as mgr
|
| 4 |
|
| 5 |
with gr.Blocks() as demo:
|
| 6 |
mgr.Markdown(f"""
|
| 7 |
<accordion>
|
| 8 |
|
| 9 |
-
::accordion-title[
|
| 10 |
|
| 11 |
```json
|
| 12 |
-
{{"text": "
|
| 13 |
```
|
| 14 |
|
| 15 |
</accordion>
|
|
|
|
| 1 |
import gradio as gr
|
| 2 |
+
import modelscope_studio as mgr
|
|
|
|
| 3 |
|
| 4 |
with gr.Blocks() as demo:
|
| 5 |
mgr.Markdown(f"""
|
| 6 |
<accordion>
|
| 7 |
|
| 8 |
+
::accordion-title[Using `tool`]
|
| 9 |
|
| 10 |
```json
|
| 11 |
+
{{"text": "glorious weather", "resolution": "1024*1024"}}
|
| 12 |
```
|
| 13 |
|
| 14 |
</accordion>
|
components/Markdown/demos/custom_tags/accordion/basic.py
CHANGED
|
@@ -1,13 +1,12 @@
|
|
| 1 |
import gradio as gr
|
| 2 |
-
|
| 3 |
-
import modelscope_gradio_components as mgr
|
| 4 |
|
| 5 |
with gr.Blocks() as demo:
|
| 6 |
mgr.Markdown(f"""
|
| 7 |
-
<accordion title="
|
| 8 |
|
| 9 |
```json
|
| 10 |
-
{{"text": "
|
| 11 |
```
|
| 12 |
|
| 13 |
</accordion>
|
|
|
|
| 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>
|
components/Markdown/demos/custom_tags/select-box/__pycache__/basic.cpython-39.pyc
ADDED
|
Binary file (851 Bytes). View file
|
|
|
components/Markdown/demos/custom_tags/select-box/__pycache__/card_shape.cpython-39.pyc
ADDED
|
Binary file (980 Bytes). View file
|
|
|
components/Markdown/demos/custom_tags/select-box/__pycache__/card_shape_width_auto.cpython-39.pyc
ADDED
|
Binary file (751 Bytes). View file
|
|
|
components/Markdown/demos/custom_tags/select-box/__pycache__/python_events.cpython-39.pyc
ADDED
|
Binary file (804 Bytes). View file
|
|
|
components/Markdown/demos/custom_tags/select-box/basic.py
CHANGED
|
@@ -1,8 +1,7 @@
|
|
| 1 |
import json
|
| 2 |
|
| 3 |
import gradio as gr
|
| 4 |
-
|
| 5 |
-
import modelscope_gradio_components as mgr
|
| 6 |
|
| 7 |
options = [{"label": "A", "value": "a"}, "b", "c"]
|
| 8 |
|
|
|
|
| 1 |
import json
|
| 2 |
|
| 3 |
import gradio as gr
|
| 4 |
+
import modelscope_studio as mgr
|
|
|
|
| 5 |
|
| 6 |
options = [{"label": "A", "value": "a"}, "b", "c"]
|
| 7 |
|
components/Markdown/demos/custom_tags/select-box/card_shape.py
CHANGED
|
@@ -2,10 +2,9 @@ import json
|
|
| 2 |
import os
|
| 3 |
|
| 4 |
import gradio as gr
|
|
|
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
# card 支持额外传入 imgSrc 属性作为样式封面
|
| 9 |
options = [{
|
| 10 |
"label":
|
| 11 |
"A",
|
|
|
|
| 2 |
import os
|
| 3 |
|
| 4 |
import gradio as gr
|
| 5 |
+
import modelscope_studio as mgr
|
| 6 |
|
| 7 |
+
# Card shape supports setting `imgSrc` as the cover.
|
|
|
|
|
|
|
| 8 |
options = [{
|
| 9 |
"label":
|
| 10 |
"A",
|
components/Markdown/demos/custom_tags/select-box/card_shape_width_auto.py
CHANGED
|
@@ -2,10 +2,9 @@ import json
|
|
| 2 |
import os
|
| 3 |
|
| 4 |
import gradio as gr
|
|
|
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
# card 支持额外传入 imgSrc 属性作为样式封面
|
| 9 |
options = [{
|
| 10 |
"label":
|
| 11 |
"A",
|
|
@@ -17,7 +16,7 @@ options = [{
|
|
| 17 |
|
| 18 |
with gr.Blocks() as demo:
|
| 19 |
mgr.Markdown(
|
| 20 |
-
#
|
| 21 |
f"""
|
| 22 |
<select-box shape="card" direction="vertical" options='{json.dumps(options)}' select-once item-width="auto"></select-box>
|
| 23 |
""", )
|
|
|
|
| 2 |
import os
|
| 3 |
|
| 4 |
import gradio as gr
|
| 5 |
+
import modelscope_studio as mgr
|
| 6 |
|
| 7 |
+
# Card shape supports setting `imgSrc` as the cover.
|
|
|
|
|
|
|
| 8 |
options = [{
|
| 9 |
"label":
|
| 10 |
"A",
|
|
|
|
| 16 |
|
| 17 |
with gr.Blocks() as demo:
|
| 18 |
mgr.Markdown(
|
| 19 |
+
# item-width="auto"
|
| 20 |
f"""
|
| 21 |
<select-box shape="card" direction="vertical" options='{json.dumps(options)}' select-once item-width="auto"></select-box>
|
| 22 |
""", )
|
components/Markdown/demos/custom_tags/select-box/python_events.py
CHANGED
|
@@ -1,8 +1,7 @@
|
|
| 1 |
import json
|
| 2 |
|
| 3 |
import gradio as gr
|
| 4 |
-
|
| 5 |
-
import modelscope_gradio_components as mgr
|
| 6 |
|
| 7 |
options = [{"label": "A", "value": "a"}, "b", "c"]
|
| 8 |
|
|
@@ -10,7 +9,8 @@ options = [{"label": "A", "value": "a"}, "b", "c"]
|
|
| 10 |
def fn(data: gr.EventData):
|
| 11 |
custom_data = data._data
|
| 12 |
if (custom_data["tag"] == "select-box"):
|
| 13 |
-
print(custom_data["value"]
|
|
|
|
| 14 |
|
| 15 |
|
| 16 |
with gr.Blocks() as demo:
|
|
|
|
| 1 |
import json
|
| 2 |
|
| 3 |
import gradio as gr
|
| 4 |
+
import modelscope_studio as mgr
|
|
|
|
| 5 |
|
| 6 |
options = [{"label": "A", "value": "a"}, "b", "c"]
|
| 7 |
|
|
|
|
| 9 |
def fn(data: gr.EventData):
|
| 10 |
custom_data = data._data
|
| 11 |
if (custom_data["tag"] == "select-box"):
|
| 12 |
+
print(custom_data["value"]
|
| 13 |
+
) # 'a' or 'b' or 'c', the value set in the options.
|
| 14 |
|
| 15 |
|
| 16 |
with gr.Blocks() as demo:
|
components/Markdown/demos/multimodal.py
CHANGED
|
@@ -1,8 +1,7 @@
|
|
| 1 |
import os
|
| 2 |
|
| 3 |
import gradio as gr
|
| 4 |
-
|
| 5 |
-
import modelscope_gradio_components as mgr
|
| 6 |
|
| 7 |
|
| 8 |
def resolve_assets(relative_path):
|
|
@@ -12,17 +11,17 @@ def resolve_assets(relative_path):
|
|
| 12 |
|
| 13 |
with gr.Blocks() as demo:
|
| 14 |
mgr.Markdown(f"""
|
| 15 |
-
|
| 16 |
|
| 17 |
![image]({resolve_assets("bot.jpeg")})
|
| 18 |
|
| 19 |
<img src="{resolve_assets("user.jpeg")}" />
|
| 20 |
|
| 21 |
-
|
| 22 |
|
| 23 |
<video src="{resolve_assets("dog.mp4")}"></video>
|
| 24 |
|
| 25 |
-
|
| 26 |
|
| 27 |
<audio src="{resolve_assets("audio.wav")}"></audio>
|
| 28 |
""")
|
|
|
|
| 1 |
import os
|
| 2 |
|
| 3 |
import gradio as gr
|
| 4 |
+
import modelscope_studio as mgr
|
|
|
|
| 5 |
|
| 6 |
|
| 7 |
def resolve_assets(relative_path):
|
|
|
|
| 11 |
|
| 12 |
with gr.Blocks() as demo:
|
| 13 |
mgr.Markdown(f"""
|
| 14 |
+
Image
|
| 15 |
|
| 16 |
![image]({resolve_assets("bot.jpeg")})
|
| 17 |
|
| 18 |
<img src="{resolve_assets("user.jpeg")}" />
|
| 19 |
|
| 20 |
+
Video
|
| 21 |
|
| 22 |
<video src="{resolve_assets("dog.mp4")}"></video>
|
| 23 |
|
| 24 |
+
Audio
|
| 25 |
|
| 26 |
<audio src="{resolve_assets("audio.wav")}"></audio>
|
| 27 |
""")
|
components/Markdown/demos/select-box.py
CHANGED
|
@@ -1,10 +1,9 @@
|
|
| 1 |
import json
|
| 2 |
|
| 3 |
import gradio as gr
|
|
|
|
| 4 |
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
# label 为对用户展示值，value 为实际选择值
|
| 8 |
options = [{"label": "A", "value": "a"}, "b", "c"]
|
| 9 |
|
| 10 |
with gr.Blocks() as demo:
|
|
|
|
| 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.
|
|
|
|
|
|
|
| 7 |
options = [{"label": "A", "value": "a"}, "b", "c"]
|
| 8 |
|
| 9 |
with gr.Blocks() as demo:
|
components/Markdown/resources/custom_components/custom_select.js
CHANGED
|
@@ -18,7 +18,7 @@
|
|
| 18 |
});
|
| 19 |
const input = label.getElementsByTagName('input')[0];
|
| 20 |
input.checked = true;
|
| 21 |
-
//
|
| 22 |
cc.dispatch(options[i]);
|
| 23 |
});
|
| 24 |
});
|
|
|
|
| 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 |
});
|
components/MultimodalInput/README-zh_CN.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# MutilmodalInput
|
| 2 |
+
|
| 3 |
+
多模态输入框，支持上传文件、录音、照相等功能。
|
| 4 |
+
|
| 5 |
+
- 支持文本输入+文件上传共同提交
|
| 6 |
+
- 支持文件上传时的图片、音频预览
|
| 7 |
+
- 提交内容作为 Chatbot 输入多模态内容作为用户输入问题自动匹配
|
| 8 |
+
- 支持用户录音和拍照
|
| 9 |
+
|
| 10 |
+
## 如何使用
|
| 11 |
+
|
| 12 |
+
### 基本使用
|
| 13 |
+
|
| 14 |
+
<demo name="basic"></demo>
|
| 15 |
+
|
| 16 |
+
### 与 Chatbot 配合使用
|
| 17 |
+
|
| 18 |
+
<demo name="with_chatbot"></demo>
|
| 19 |
+
|
| 20 |
+
### 配置上传/提交按钮
|
| 21 |
+
|
| 22 |
+
<demo name="config_buttons"></demo>
|
| 23 |
+
|
| 24 |
+
### 允许用户录音或拍照
|
| 25 |
+
|
| 26 |
+
<demo name="upload_sources"></demo>
|
| 27 |
+
|
| 28 |
+
## API 及参数列表
|
| 29 |
+
|
| 30 |
+
以下 API 均为在原有 gradio Textbox 外的额外拓展参数。
|
| 31 |
+
|
| 32 |
+
### value
|
| 33 |
+
|
| 34 |
+
接口定义：
|
| 35 |
+
|
| 36 |
+
```python
|
| 37 |
+
class MultimodalInputData(GradioModel):
|
| 38 |
+
files: List[Union[FileData, str]] = []
|
| 39 |
+
text: str
|
| 40 |
+
```
|
| 41 |
+
|
| 42 |
+
### props
|
| 43 |
+
|
| 44 |
+
| 属性 | 类型 | 默认值 | 描述 |
|
| 45 |
+
| ------------------- | -------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |
|
| 46 |
+
| sources | list\[Literal\['upload', 'microphone','webcam'\]\] | \['upload'\] | 上传文件的类型列表。 "upload"会提供上文文件按钮。 "microphone"支持用户录音输入。 "webcam"支持用户照相生成图片或视频 |
|
| 47 |
+
| webcam_props | dict | None | webcam 组件属性，目前支持传入mirror_webcam(bool)、include_audio(bool) |
|
| 48 |
+
| upload_button_props | dict | None | 上传文件按钮属性，同 gradio UploadButton |
|
| 49 |
+
| submit_button_props | dict | None | 提交按钮属性，同 gradio Button |
|
| 50 |
+
| file_preview_props | dict | None | 文件预览组件属性，目前支持传入 height (int) |
|
components/MultimodalInput/README.md
CHANGED
|
@@ -1,37 +1,37 @@
|
|
| 1 |
-
# MutilmodalInput
|
| 2 |
|
| 3 |
-
|
| 4 |
|
| 5 |
-
-
|
| 6 |
-
-
|
| 7 |
-
-
|
| 8 |
-
-
|
| 9 |
|
| 10 |
-
##
|
| 11 |
|
| 12 |
-
###
|
| 13 |
|
| 14 |
<demo name="basic"></demo>
|
| 15 |
|
| 16 |
-
###
|
| 17 |
|
| 18 |
<demo name="with_chatbot"></demo>
|
| 19 |
|
| 20 |
-
###
|
| 21 |
|
| 22 |
<demo name="config_buttons"></demo>
|
| 23 |
|
| 24 |
-
###
|
| 25 |
|
| 26 |
<demo name="upload_sources"></demo>
|
| 27 |
|
| 28 |
-
## API
|
| 29 |
|
| 30 |
-
|
| 31 |
|
| 32 |
### value
|
| 33 |
|
| 34 |
-
|
| 35 |
|
| 36 |
```python
|
| 37 |
class MultimodalInputData(GradioModel):
|
|
@@ -41,10 +41,10 @@ class MultimodalInputData(GradioModel):
|
|
| 41 |
|
| 42 |
### props
|
| 43 |
|
| 44 |
-
|
|
| 45 |
-
| ------------------- |
|
| 46 |
-
| sources | list
|
| 47 |
-
| webcam_props | dict
|
| 48 |
-
| upload_button_props | dict
|
| 49 |
-
| submit_button_props | dict
|
| 50 |
-
| file_preview_props | dict
|
|
|
|
| 1 |
+
# MutilmodalInput
|
| 2 |
|
| 3 |
+
A multimodal input field that supports uploading files, recording audio, taking photos, etc.
|
| 4 |
|
| 5 |
+
- Supports text input and file upload for joint submission
|
| 6 |
+
- Supports image and audio previews during file upload
|
| 7 |
+
- Submissions serve as Chatbot input, matching multimodal content as user input questions automatically
|
| 8 |
+
- Supports user recording and photography
|
| 9 |
|
| 10 |
+
## How to Use
|
| 11 |
|
| 12 |
+
### Basic Usage
|
| 13 |
|
| 14 |
<demo name="basic"></demo>
|
| 15 |
|
| 16 |
+
### Using with Chatbot
|
| 17 |
|
| 18 |
<demo name="with_chatbot"></demo>
|
| 19 |
|
| 20 |
+
### Configuring Upload/Submit Buttons
|
| 21 |
|
| 22 |
<demo name="config_buttons"></demo>
|
| 23 |
|
| 24 |
+
### Allowing User Recording or Photography
|
| 25 |
|
| 26 |
<demo name="upload_sources"></demo>
|
| 27 |
|
| 28 |
+
## API and Parameter List
|
| 29 |
|
| 30 |
+
The following APIs are additional expanded parameters beyond the original gradio Textbox.
|
| 31 |
|
| 32 |
### value
|
| 33 |
|
| 34 |
+
Interface definition:
|
| 35 |
|
| 36 |
```python
|
| 37 |
class MultimodalInputData(GradioModel):
|
|
|
|
| 41 |
|
| 42 |
### props
|
| 43 |
|
| 44 |
+
| Attribute | Type | Default Value | Description |
|
| 45 |
+
| ------------------- | ----------------------------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| 46 |
+
| sources | list[Literal['upload', 'microphone', 'webcam']] | ['upload'] | A list of types for uploading files. "upload" provides an upload file button. "microphone" supports user audio input. "webcam" supports user photography to generate images or videos. |
|
| 47 |
+
| webcam_props | dict | None | webcam component properties, currently supports passing mirror_webcam(bool), include_audio(bool) |
|
| 48 |
+
| upload_button_props | dict | None | Upload file button properties, same as gradio UploadButton |
|
| 49 |
+
| submit_button_props | dict | None | Submit button properties, same as gradio Button |
|
| 50 |
+
| file_preview_props | dict | None | File preview component properties, currently supports passing height (int) |
|
components/MultimodalInput/demos/basic.py
CHANGED
|
@@ -1,10 +1,9 @@
|
|
| 1 |
import gradio as gr
|
| 2 |
-
|
| 3 |
-
import modelscope_gradio_components as mgr
|
| 4 |
|
| 5 |
|
| 6 |
def fn(value):
|
| 7 |
-
# value
|
| 8 |
print(value.text, value.files)
|
| 9 |
|
| 10 |
|
|
|
|
| 1 |
import gradio as gr
|
| 2 |
+
import modelscope_studio as mgr
|
|
|
|
| 3 |
|
| 4 |
|
| 5 |
def fn(value):
|
| 6 |
+
# value includes `text`` and `files``
|
| 7 |
print(value.text, value.files)
|
| 8 |
|
| 9 |
|
components/MultimodalInput/demos/config_buttons.py
CHANGED
|
@@ -1,6 +1,5 @@
|
|
| 1 |
import gradio as gr
|
| 2 |
-
|
| 3 |
-
import modelscope_gradio_components as mgr
|
| 4 |
|
| 5 |
|
| 6 |
def fn(value):
|
|
|
|
| 1 |
import gradio as gr
|
| 2 |
+
import modelscope_studio as mgr
|
|
|
|
| 3 |
|
| 4 |
|
| 5 |
def fn(value):
|
components/MultimodalInput/demos/upload_sources.py
CHANGED
|
@@ -1,6 +1,5 @@
|
|
| 1 |
import gradio as gr
|
| 2 |
-
|
| 3 |
-
import modelscope_gradio_components as mgr
|
| 4 |
|
| 5 |
|
| 6 |
def fn(value):
|
|
|
|
| 1 |
import gradio as gr
|
| 2 |
+
import modelscope_studio as mgr
|
|
|
|
| 3 |
|
| 4 |
|
| 5 |
def fn(value):
|
components/MultimodalInput/demos/with_chatbot.py
CHANGED
|
@@ -1,8 +1,7 @@
|
|
| 1 |
import time
|
| 2 |
|
| 3 |
import gradio as gr
|
| 4 |
-
|
| 5 |
-
import modelscope_gradio_components as mgr
|
| 6 |
|
| 7 |
|
| 8 |
def fn(input, chatbot):
|
|
@@ -19,7 +18,7 @@ def fn(input, chatbot):
|
|
| 19 |
yield {user_chatbot: chatbot}
|
| 20 |
|
| 21 |
|
| 22 |
-
#
|
| 23 |
def flushed():
|
| 24 |
return mgr.MultimodalInput(interactive=True)
|
| 25 |
|
|
|
|
| 1 |
import time
|
| 2 |
|
| 3 |
import gradio as gr
|
| 4 |
+
import modelscope_studio as mgr
|
|
|
|
| 5 |
|
| 6 |
|
| 7 |
def fn(input, chatbot):
|
|
|
|
| 18 |
yield {user_chatbot: chatbot}
|
| 19 |
|
| 20 |
|
| 21 |
+
# Triggered when the typewriter is ending.
|
| 22 |
def flushed():
|
| 23 |
return mgr.MultimodalInput(interactive=True)
|
| 24 |
|
requirements.txt
CHANGED
|
@@ -1,2 +1 @@
|
|
| 1 |
-
|
| 2 |
-
modelscope_gradio_components-0.0.1b8-py3-none-any.whl
|
|
|
|
| 1 |
+
modelscope_studio
|
|
|