Coloring's picture
feat: init
db32e48
|
raw
history blame
4.53 kB

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。
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 定义如下

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:自定义传入的值。