components/Markdown/README.md

Markdown

升级版的 gradio Markdown。

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

如何使用

基本使用

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

支持手风琴内容展示

在返回的内容中加入 accordion 标签，更多用法详见 accordion

支持用户选择交互

在返回的内容中加入 select-box 标签，更多用法详见 select-box

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

引入 js

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

custom_select.js

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

与 Python 侧交互

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

API 及参数列表

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

props

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

CustomComponent 定义如下

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

内置的自定义标签

• select-box
• accordion

event listeners

事件	描述
mgr.Markdown.custom(fn, ···)	自定义标签触发事件时触发，EventData 为： - index：当前 message 的 index tuple ([message index, user group(index 0) or bot group(index 1), user/bot group index])。 - tag：当前触发的标签。 - tag_index：当前触发标签的 index，此 index 在 mesage 的 index tuple 基础上重新计算。 - value：自定义传入的值。