Hugging Face's logo

Spaces:
modelscope
/
modelscope-studio
Running

App Files Community
1
modelscope-studio
File size: 4,101 Bytes 
db32e48
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
aa39585
 
 
 
 
 
db32e48
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e0dfb76
db32e48
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
aa39585
db32e48
 
 
e0dfb76
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
# Markdown

升级版的 gradio Markdown。

- 支持输出多模态内容（音频、视频、语音、文件、文本）
- 支持自定义渲染组件，并与 Python 侧事件交互

## 如何使用

### 基本使用

<demo name="basic"></demo>

### 多模态 & 支持本地文件的展示

<demo name="multimodal"></demo>

### 支持手风琴内容展示

在返回的内容中加入 `accordion` 标签，更多用法详见 <tab-link tab="custom_tags/accordion">accordion</tab-link>

<demo name="accordion"></demo>

### 支持用户选择交互

在返回的内容中加入 `select-box` 标签，更多用法详见 <tab-link tab="custom_tags/select-box">select-box</tab-link>

<demo name="select-box"></demo>

### 支持图表展示

在返回的内容中加入 `chart` 标签，更多用法详见 <tab-link tab="custom_tags/chart">chart</tab-link>

<demo name="chart"></demo>

### 自定义标签（高阶用法，需要了解前端知识）

<demo name="custom-tag"></demo>

#### 引入 js

<demo name="custom-tag2"></demo>

template只能做简单的变量替换，如果想要引入更多自定义的行为，如条件判断、循环渲染等，请使用 js 控制 el 自行处理，下面是简单的示例：

<demo name="custom-tag3">
<demo-suffix>
custom_select.js

```js
<file src="../resources/custom_components/custom_select.js"></file>
```

</demo-suffix>
</demo>

#### 与 Python 侧交互

在 js 中可以使用`cc.dispatch`触发 Python 侧监听的`custom`事件，以前面的custom_select.js为例，我们在前端调用了`cc.dispatch(options[i])`，则会向 Python 侧同时发送通知。

<demo name="custom-tag4"></demo>

## API 及参数列表

以下 API 均为在原有 gradio Markdown 外的额外拓展参数。

### props

| 属性                          | 类型                                                            | 默认值 | 描述                                                                        |
| ----------------------------- | --------------------------------------------------------------- | ------ | --------------------------------------------------------------------------- |
| enable_base64                 | bool                                                            | False  | 是否支持渲染的内容为 base64，因为直接渲染 base64 有安全问题，默认为 False。 |
| enable_latex                  | bool                                                            | True   | 是否支持 Latex 公式渲染                                                     |
| latex_single_dollar_delimiter | bool                                                            | True   | 是否支持单`$`符号在 Latex 公式中渲染                                        |
| preview                       | bool                                                            | True   | 是否开启图片预览功能                                                        |
| custom_components             | dict\[str, CustomComponentDict\] CustomComponentDict 定义见下方 | None   | 支持用户定义自定义标签，并通过 js 控制标签渲染样式与触发 python 事件。      |

**CustomComponent 定义如下**

```python
class CustomComponentDict(TypedDict):
    props: Optional[List[str]]
    template: Optional[str]
    js: Optional[str]
```

### 内置的自定义标签

- <tab-link tab="custom_tags/select-box">select-box</tab-link>
- <tab-link tab="custom_tags/accordion">accordion</tab-link>
- <tab-link tab="custom_tags/chart">chart</tab-link>

### event listeners

| 事件                           | 描述                                                                                                             |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| `mgr.Markdown.custom(fn, ···)` | 自定义标签触发事件时触发，EventData 为：<br/> - tag_index：当前触发标签的 index。<br/> - value：自定义传入的值。 |