Spaces:
Running
Running
File size: 9,813 Bytes
630cbf4 |
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 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
# Chatbot
升级版的 gradio Chatbot。
- 支持前端匀速流式输出 message
- 支持输出多模态内容（音频、视频、语音、文件、文本）
- 支持多 agent 场景
- 支持自定义渲染组件，并与 Python 侧事件交互
## 如何使用
### 基本使用
<demo name="basic"></demo>
### 多模态 & 支持本地文件的展示
<demo name="multimodal"></demo>
### 控制打字机单句 message 开关
<demo name="message_config"></demo>
### 支持手风琴内容展示
在返回的内容中加入 `accordion` 标签，可以在内容中加入手风琴，更多用法详见 <tab-link component-tab="Markdown">Markdown 内置自定义标签</tab-link>
同时为了适配大模型的工具调用链路，额外对某些大模型的格式做了预设配置，支持下述格式的预设处理（会将下面的格式转换成上方`accordion`标签包裹形式）
```python
import modelscope_gradio_components as mgr
from modelscope_gradio_components.components.Chatbot.llm_thinking_presets import qwen
# 添加 qwen 解析预设
mgr.Chatbot(llm_thinking_presets=[qwen()])
```
```text
Action: image_gen
Action Input: {"text": "风和日丽", "resolution": "1024*1024"}
Observation: <result></result> 根据您的描述"风和日丽"，我生成了一张图片。
Action: 「任意文本表示，将展示为思考链调用的名称」
Action Input: 「任意json or md 内容，将展示到调用过程的下拉框」
Observation: <result>「任意 md 内容，将作为完成调用的展示的下拉框内」</result>
```
<demo name="accordion"></demo>
### 支持用户选择交互
在返回的内容中加入 `select-box` 标签，更多用法详见 <tab-link component-tab="Markdown">Markdown 内置自定义标签</tab-link>
<demo name="select-box"></demo>
### 多 bot 场景
<demo name="multi_bots"></demo>
### 自定义标签（高阶用法，需要了解前端知识）
详见 <tab-link component-tab="Markdown">Markdown</tab-link> 组件
## API 及参数列表
以下 API 均为在原有 gradio Chatbot 外的额外拓展参数。
### value
接口定义：
```python
class FileMessage(GradioModel):
file: FileData
alt_text: Optional[str] = None
class MultimodalMessage(GradioModel):
name: Optional[str] = None
text: Optional[str] = None
flushing: Optional[bool] = None
avatar: Optional[Union[str, FileData]] = ''
files: Optional[List[Union[FileMessage, dict, FileData, str]]] = None
# 支持多 bot 场景
MultimodalMessageItem = Optional[Union[MultimodalMessage, MultimodalInputData,
dict, str]]
class ChatbotData(GradioRootModel):
root: List[Tuple[Union[MultimodalMessageItem, List[MultimodalMessageItem]],
Union[MultimodalMessageItem,
List[MultimodalMessageItem]]]]
```
### props
| 属性 | 类型 | 默认值 | 描述 |
| -------------------- | -------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| flushing | bool | True | 是否开启打字机效果。默认只有 bot 的 message 会开启，可以通过单独修改 message 的 flushing 属性精确控制每一条 message 的显示效果 |
| enable_base64 | bool | False | 是否支持渲染的内容为 base64，因为直接渲染 base64 有安全问题，默认为 False。 |
| preview | bool | True | 是否开启图片预览功能 |
| 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 的位置一一对应 |
| avatar_image_align | Literal['top', 'middle', 'bottom'] | 'bottom' | 控制头像与 message 的对齐方式，默认为下对齐 |
| avatar_image_width | int | 45 | 头像与名称的宽度 |
| flushing_speed | int | 3 | 打字机速度，值为 1 - 10，值越大速度越快 |
| llm_thinking_presets | list\[dict\] | \[\] | llm 思考链路解析预设，可以将 llm 调用工具的输出格式转为固定的前端展示格式，需要从modelscope_gradio_components.Chatbot.llm_thinking_presets引入，目前支持：qwen |
| 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 component-tab="Markdown">Markdown 内置自定义标签</tab-link>
### event listeners
| 事件 | 描述 |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mgr.Chatbot.flushed(fn, ···)` | 当打字机效果结束时触发。EventData 为：<br/> - index：当前 message 的 index tuple。<br/> - value：当前 message value。 |
| `mgr.Chatbot.custom(fn, ···)` | 自定义标签触发事件时触发，EventData 为：<br/> - index：前 message 的 index tuple。<br/> - tag：当前触发的标签。<br/> - tag_index：当前触发标签的 index，此 index 在 mesage 的 index tuple 基础上重新计算。<br/> - value：自定义传入的值。 |
|