Upload folder using huggingface_hub

.gitattributes

@@ -1,35 +1,35 @@
 *.7z filter=lfs diff=lfs merge=lfs -text
 *.arrow filter=lfs diff=lfs merge=lfs -text
 *.bin filter=lfs diff=lfs merge=lfs -text
+*.bin.* filter=lfs diff=lfs merge=lfs -text
 *.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
 *.ftz filter=lfs diff=lfs merge=lfs -text
 *.gz filter=lfs diff=lfs merge=lfs -text
 *.h5 filter=lfs diff=lfs merge=lfs -text
 *.joblib filter=lfs diff=lfs merge=lfs -text
 *.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
 *.model filter=lfs diff=lfs merge=lfs -text
 *.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
 *.onnx filter=lfs diff=lfs merge=lfs -text
 *.ot filter=lfs diff=lfs merge=lfs -text
 *.parquet filter=lfs diff=lfs merge=lfs -text
 *.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
 *.pt filter=lfs diff=lfs merge=lfs -text
 *.pth filter=lfs diff=lfs merge=lfs -text
 *.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
 saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
 *.tflite filter=lfs diff=lfs merge=lfs -text
 *.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
 *.xz filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.zstandard filter=lfs diff=lfs merge=lfs -text
+*.tfevents* filter=lfs diff=lfs merge=lfs -text
+*.db* filter=lfs diff=lfs merge=lfs -text
+*.ark* filter=lfs diff=lfs merge=lfs -text
+**/*ckpt*data* filter=lfs diff=lfs merge=lfs -text
+**/*ckpt*.meta filter=lfs diff=lfs merge=lfs -text
+**/*ckpt*.index filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -textcomponents/Chatbot/resources/dog.mp4 filter=lfs diff=lfs merge=lfs -text
+components/Markdown/resources/dog.mp4 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,60 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+templates
+
+# common
+
+!.*ignore
+!.*rc
+!.gitattributes
+!.aoneci.yml
+!.editorconfig
+
+# Logs
+logs
+*.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Dependency directories
+bower_components
+node_modules/
+jspm_packages/
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+lib
+dist
+
+# TypeScript v1 declaration files
+typings/
+
+# Output of 'npm pack'
+*.tgz
+
+# xconsole
+src/.xconsole
+build
+.faas_debug_tmp
+.yarn
+.yalc
+yalc.lock
+.eslintcache
+.stylelintcache
+.DS_Store

Dockerfile

@@ -0,0 +1,16 @@
+
+FROM python:3.9
+
+WORKDIR /code
+
+COPY --link --chown=1000 . .
+
+RUN mkdir -p /tmp/cache/
+RUN chmod a+rwx -R /tmp/cache/
+ENV TRANSFORMERS_CACHE=/tmp/cache/ 
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+ENV PYTHONUNBUFFERED=1 	GRADIO_ALLOW_FLAGGING=never 	GRADIO_NUM_PORTS=1 	GRADIO_SERVER_NAME=0.0.0.0     GRADIO_SERVER_PORT=7860 	SYSTEM=spaces
+
+CMD ["python", "app.py"]

README.md

@@ -1,10 +1,10 @@
+
 ---
-title: Modelscope Gradio Components
-emoji: 🌍
-colorFrom: blue
-colorTo: yellow
+tags: [gradio-custom-component]
+title: modelscope_gradio_components V0.0.1b8
+colorFrom: red
+colorTo: red
 sdk: docker
 pinned: false
+license: apache-2.0
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,22 @@
+import gradio as gr
+from components.Chatbot.app import docs as chatbot_docs
+from components.Docs import Docs
+from components.Markdown.app import docs as markdown_docs
+from components.MultimodalInput.app import docs as multimodel_input_docs
+
+readme_docs = Docs(__file__)
+
+docs = [
+    ["开始使用", readme_docs],
+    ["Chatbot", chatbot_docs],
+    ["Markdown", markdown_docs],
+    ["MultimodalInput", multimodel_input_docs],
+]
+
+with gr.Blocks() as demo:
+    with gr.Tabs() as components_tabs:
+        for doc in docs:
+            with gr.TabItem(doc[0], id=doc[0]):
+                doc[1].render(components_tabs)
+
+demo.queue().launch()

components/Chatbot/README.md

@@ -0,0 +1,129 @@
+# 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>![IMAGEGEN](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)</result> 根据您的描述"风和日丽"，我生成了一张图片。![](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)
+
+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：自定义传入的值。 |

components/Chatbot/app.py

@@ -0,0 +1,6 @@
+from components.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()

components/Chatbot/demos/accordion.py

@@ -0,0 +1,49 @@
+import os
+
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+from modelscope_gradio_components.components.Chatbot.llm_thinking_presets import \
+  qwen
+
+
+def resolve_assets(relative_path):
+    return os.path.join(os.path.dirname(__file__), "../resources",
+                        relative_path)
+
+
+conversation = [
+    [
+        None, {
+            "text": f"""
+标签语法:
+<accordion title="调用 tool">
+
+```json
+{{"text": "风和日丽", "resolution": "1024*1024"}}
+```
+</accordion>
+
+qwen preset:
+Action: image_gen
+Action Input: {{"text": "风和日丽", "resolution": "1024*1024"}}
+Observation: <result>![IMAGEGEN]({resolve_assets("screen.jpeg")})</result> 根据您的描述"风和日丽"，我生成了一张图片。![]({resolve_assets("screen.jpeg")})
+
+Action: 「任意文本表示，将展示为思考链调用的名称」
+Action Input: 「任意json or md 内容，将展示到调用过程的下拉框」
+Observation: <result>「任意 md 内容，将作为完成调用的展示的下拉框内」</result>
+""",
+            "flushing": False
+        }
+    ],
+]
+
+with gr.Blocks() as demo:
+    mgr.Chatbot(
+        value=conversation,
+        llm_thinking_presets=[qwen()],
+        height=600,
+    )
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Chatbot/demos/basic.py

@@ -0,0 +1,55 @@
+import os
+import time
+
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+conversation = [
+    [
+        None,
+        {
+            # bot 第一句话关闭打字机效果，直接输入内容
+            "text": "Hello I'm a chatbot",
+            "flushing": False
+        }
+    ],
+]
+
+
+def submit(_input, _chatbot):
+    _chatbot.append([_input, None])
+    yield gr.update(interactive=False, value=None), _chatbot
+    time.sleep(2)
+    _chatbot[-1][1] = {"text": _input.text + '!'}
+    yield {
+        chatbot: _chatbot,
+    }
+
+
+def flushed():
+    return gr.update(interactive=True)
+
+
+with gr.Blocks() as demo:
+    chatbot = mgr.Chatbot(
+        value=conversation,
+        avatar_images=[
+            os.path.join(os.path.dirname(__file__), "../resources/user.jpeg"),
+            {
+                "name":
+                "bot",
+                "avatar":
+                os.path.join(os.path.dirname(__file__),
+                             "../resources/bot.jpeg")
+            }
+        ],
+        height=600,
+    )
+
+    input = mgr.MultimodalInput()
+    input.submit(fn=submit, inputs=[input, chatbot], outputs=[input, chatbot])
+    chatbot.flushed(fn=flushed, outputs=[input])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Chatbot/demos/message_config.py

@@ -0,0 +1,34 @@
+import time
+
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+
+def submit(_chatbot):
+    _chatbot.append(["test user", "test bot"])  # 此时只有 bot 会开启打字机效果
+    yield _chatbot
+    time.sleep(2)
+    _chatbot.append(["test user", {
+        "text": "test bot",
+        "flushing": False
+    }])  # 两者都没有打字机效果
+    yield _chatbot
+    time.sleep(2)
+    _chatbot.append([{
+        "text": "test user",
+        "flushing": True
+    }, {
+        "text": "test bot",
+        "flushing": False
+    }])  # user 会开启打字机效果
+    yield _chatbot
+
+
+with gr.Blocks() as demo:
+    chatbot = mgr.Chatbot(height=600, )
+    button = gr.Button("Submit")
+    button.click(fn=submit, inputs=[chatbot], outputs=[chatbot])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Chatbot/demos/multi_bots.py

@@ -0,0 +1,91 @@
+import os
+import time
+
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+
+def resolve_assets(relative_path):
+    return os.path.join(os.path.dirname(__file__), "../resources",
+                        relative_path)
+
+
+conversation = [
+    [
+        None,
+        {
+            # bot 第一句话关闭打字机效果，直接输入内容
+            "text": "Hello I'm a chatbot",
+            "flushing": False
+        }
+    ],
+]
+
+
+def get_last_bot_message(chatbot):
+    return chatbot[-1][1]
+
+
+def create_music_bot_message(text: str):
+    return {
+        "text": text,
+    }
+
+
+def create_image_bot_message(text: str):
+    return {
+        "text": text,
+    }
+
+
+def submit(_input, _chatbot):
+    _chatbot.append([_input, None])
+    yield gr.update(interactive=False, value=None), _chatbot
+    _chatbot[-1][1] = [
+        "Hello",
+        create_image_bot_message("Hello"),
+        create_music_bot_message("Hello")
+    ]
+
+    time.sleep(2)
+    get_last_bot_message(_chatbot)[1][
+        "text"] = f"""Hello, I\'m a image bot\n![image]({resolve_assets("user.jpeg")})"""
+    get_last_bot_message(_chatbot)[2][
+        "text"] = f"""Hello, I\'m a music bot <audio src="{resolve_assets("audio.wav")}"></audio>"""
+    yield {
+        chatbot: _chatbot,
+    }
+
+
+def flushed():
+    return gr.update(interactive=True)
+
+
+with gr.Blocks() as demo:
+    chatbot = mgr.Chatbot(
+        value=conversation,
+        avatar_image_width=40,
+        avatar_images=[
+            resolve_assets('user.jpeg'),
+            # default bot avatar and name
+            [{
+                "name": "bot",
+                "avatar": resolve_assets('bot.jpeg')
+            }, {
+                "name": "image bot",
+                "avatar": resolve_assets('image-bot.jpeg')
+            }, {
+                "name": "music bot",
+                "avatar": resolve_assets('music-bot.jpeg')
+            }]
+        ],
+        height=600,
+    )
+
+    input = mgr.MultimodalInput()
+    input.submit(fn=submit, inputs=[input, chatbot], outputs=[input, chatbot])
+    chatbot.flushed(fn=flushed, outputs=[input])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Chatbot/demos/multimodal.py

@@ -0,0 +1,43 @@
+import os
+
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+
+def resolve_assets(relative_path):
+    return os.path.join(os.path.dirname(__file__), "../resources",
+                        relative_path)
+
+
+conversation = [
+    [
+        None, {
+            "text": f"""
+图片
+
+![image]({resolve_assets("bot.jpeg")})
+
+<img src="{resolve_assets("user.jpeg")}" />
+
+视频
+
+<video src="{resolve_assets("dog.mp4")}"></video>
+
+音频
+
+<audio src="{resolve_assets("audio.wav")}"></audio>
+""",
+            "flushing": False
+        }
+    ],
+]
+
+with gr.Blocks() as demo:
+    mgr.Chatbot(
+        value=conversation,
+        height=600,
+    )
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Chatbot/demos/select-box.py

@@ -0,0 +1,48 @@
+import json
+
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+# label 为对用户展示值，value 为实际选择值
+options = [{"label": "A", "value": "a"}, "b", "c"]
+
+conversation = [[
+    None, f"""
+Single Select: <select-box options='{json.dumps(options)}' select-once></select-box>
+
+Multiple Select：<select-box type="checkbox" options='{json.dumps(options)}' select-once submit-text="Submit"></select-box>
+
+Vertical Direction：
+
+<select-box direction="vertical" type="checkbox" options='{json.dumps(options)}' select-once submit-text="Submit"></select-box>
+
+Card Shape:
+
+<select-box shape="card" options='{json.dumps(options)}' select-once equal-height></select-box>
+
+
+<select-box shape="card" columns="2" options='{json.dumps(options)}' select-once  equal-height></select-box>
+
+
+<select-box shape="card" direction="vertical" options='{json.dumps(options)}' select-once  equal-height></select-box>
+"""
+]]
+
+
+# 必须使用 gr.EventData 显示标注
+def fn(data: gr.EventData):
+    print(data._data)
+
+
+with gr.Blocks() as demo:
+    chatbot = mgr.Chatbot(
+        value=conversation,
+        flushing=False,
+        height=600,
+    )
+    # 所有自定义标签都会触发 custom 事件
+    chatbot.custom(fn=fn)
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Chatbot/resources/custom_components/custom_select.js

@@ -0,0 +1,26 @@
+(props, cc, { el, onMount }) => {
+  const options = JSON.parse(props.options);
+  el.innerHTML = `
+  ${options
+    .map((option) => {
+      return `<div>
+        <label>${option} <input type="radio"/></label>
+    <div>`;
+    })
+    .join('')}
+  `;
+  onMount(() => {
+    const inputs = Array.from(el.getElementsByTagName('input'));
+    Array.from(el.getElementsByTagName('label')).forEach((label, i) => {
+      label.addEventListener('click', () => {
+        inputs.forEach((input) => {
+          input.checked = false;
+        });
+        const input = label.getElementsByTagName('input')[0];
+        input.checked = true;
+        // 通过 cc.dispatch 向 python 侧发送通知
+        cc.dispatch(options[i]);
+      });
+    });
+  });
+};

components/Chatbot/resources/dog.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:39d086ce29e48cf76e5042d2f3f0611ee46575f70fa3dc0c40dd4cfffde3d933
+size 8626383

components/Docs.py

@@ -0,0 +1,147 @@
+import os
+import re
+from typing import Callable
+
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+from .parse_markdown import parse_markdown
+
+with open(os.path.join(os.path.dirname(__file__), "tab-link.js")) as f:
+    tab_link_js = f.read()
+
+custom_components = {
+    "tab-link": {
+        "props": ["tab", "component-tab"],
+        "js": tab_link_js
+    }
+}
+
+
+def remove_formatter(markdown_text):
+    pattern = r"^---[\s\S]*?---"
+
+    replaced_text = re.sub(pattern, "", markdown_text)
+
+    return replaced_text
+
+
+def list_demos(dir_path: str, prefix=''):
+    result = []
+    if (not os.path.isdir(dir_path)):
+        return result
+    for name in os.listdir(dir_path):
+        path = os.path.join(dir_path, name)
+
+        if os.path.isfile(path):
+            result.append(prefix + name)
+        elif os.path.isdir(path):
+            sub_prefix = prefix + name + '/'
+            result.extend(list_demos(path, sub_prefix))
+
+    return result
+
+
+def get_demo_modules(file_path: str):
+    import importlib.util
+
+    demos = [
+        demo for demo in list_demos(
+            os.path.join(os.path.dirname(file_path), "demos"))
+        if demo.endswith(".py")
+    ]
+    demo_modules = {}
+    for demo in demos:
+        demo_name = demo.split(".")[0]
+        spec = importlib.util.spec_from_file_location(
+            "demo", os.path.join(os.path.dirname(file_path), "demos", demo))
+        module = importlib.util.module_from_spec(spec)
+        spec.loader.exec_module(module)
+        demo_modules[demo_name] = module
+    return demo_modules
+
+
+class Docs:
+
+    def __init__(self, file_path: str, markdown_files: list = None):
+        self.file_path = file_path
+        self.demo_modules = get_demo_modules(file_path)
+        # default current directory
+        self.markdown_files = markdown_files if markdown_files else [
+            file_name for file_name in os.listdir(os.path.dirname(file_path))
+            if file_name.endswith(".md")
+        ]
+        self.tabs = None
+
+    def read_file(self, relative_path: str):
+        with open(os.path.join(os.path.dirname(self.file_path), relative_path),
+                  "r") as f:
+            return f.read()
+
+    def render_demo(self, demo_name, prefix='', suffix=''):
+        content = self.read_file(f"./demos/{demo_name}.py")
+        module = self.demo_modules[demo_name]
+        with gr.Accordion("Show Demo", open=False):
+            with gr.Row():
+                with gr.Column():
+                    mgr.Markdown(f"""
+{prefix}
+````python
+{content}
+````
+{suffix}
+""",
+                                 header_links=True,
+                                 custom_components=custom_components)
+                with gr.Column():
+                    module.demo.render()
+
+    def render_markdown(self,
+                        markdown_file,
+                        on_tab_link_click: Callable = None,
+                        components_tabs=None):
+        items = parse_markdown(remove_formatter(self.read_file(markdown_file)),
+                               read_file=self.read_file)
+        for item in items:
+            if item["type"] == "text":
+                md = mgr.Markdown(item["value"],
+                                  header_links=True,
+                                  custom_components=custom_components)
+                # 过滤
+                deps = [dep for dep in [components_tabs, self.tabs] if dep]
+                if len(deps) > 0:
+                    md.custom(fn=on_tab_link_click, outputs=deps)
+            elif item["type"] == "demo":
+                self.render_demo(item["name"],
+                                 prefix=item["prefix"],
+                                 suffix=item["suffix"])
+
+    def render(self, components_tabs=None):
+
+        def tab_link_click(data: gr.EventData):
+            tab: str = data._data["value"].get("tab", '')
+            component_tab: str = data._data["value"].get("component_tab", '')
+            if tab and tabs:
+                return {tabs: gr.update(selected=tab)}
+            elif components_tabs and component_tab:
+                return {components_tabs: gr.update(selected=component_tab)}
+
+        with gr.Blocks() as demo:
+
+            if len(self.markdown_files) > 1:
+                with gr.Tabs() as tabs:
+                    self.tabs = tabs
+
+                    for markdown_file in self.markdown_files:
+                        tab_name = ".".join(markdown_file.split(".")[:-1])
+                        with gr.TabItem(tab_name, id=tab_name):
+                            self.render_markdown(
+                                markdown_file,
+                                on_tab_link_click=tab_link_click,
+                                components_tabs=components_tabs)
+            else:
+                self.render_markdown(self.markdown_files[0],
+                                     on_tab_link_click=tab_link_click,
+                                     components_tabs=components_tabs)
+        return demo

components/Markdown/README.md

@@ -0,0 +1,87 @@
+# 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>
+
+### 自定义标签（高阶用法，需要了解前端知识）
+
+<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。 |
+| 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>
+
+### event listeners
+
+| 事件                           | 描述                                                                                                                                                                                                                                                                                                                           |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `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/app.py

@@ -0,0 +1,20 @@
+import os
+
+from components.Docs import Docs
+
+
+def resolve(relative_path: str):
+    return os.path.join(os.path.dirname(__file__), relative_path)
+
+
+docs = Docs(
+    __file__,
+    markdown_files=(["README.md"] + [
+        f"custom_tags/{file_name}"
+        for file_name in os.listdir(resolve('custom_tags'))
+        if file_name.endswith(".md")
+    ]),
+)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()

components/Markdown/custom_tags/accordion.md

@@ -0,0 +1,23 @@
+# accordion
+
+在 markdown 文本中添加手风琴效果。
+
+## 如何使用
+
+### 基本使用
+
+<demo name="custom_tags/accordion/basic"></demo>
+
+### 使用 accordion-title 标记
+
+使用`::accordion-title[content]`的形式可以在标题输入 markdown 文本。
+
+<demo name="custom_tags/accordion/accordion-title"></demo>
+
+## API 及参数列表
+
+### props
+
+| 属性  | 类型   | 默认值 | 描述         |
+| ----- | ------ | ------ | ------------ |
+| title | string |        | 手风琴的标题 |

components/Markdown/custom_tags/select-box.md

@@ -0,0 +1,45 @@
+# select-box
+
+在 markdown 文本中添加选择交互框。
+
+## 如何使用
+
+### 基本使用
+
+<demo name="custom_tags/select-box/basic"></demo>
+
+### Card 样式
+
+<demo name="custom_tags/select-box/card_shape"></demo>
+
+### Card 自适应内部元素宽度
+
+<demo name="custom_tags/select-box/card_shape_width_auto"></demo>
+
+### 监听 Python 事件
+
+<demo name="custom_tags/select-box/python_events"></demo>
+
+## API 及参数列表
+
+### value
+
+custom 事件中 custom_data value 对应值， 返回值为用户 options 传入的对应 value ，如果type="checkbox"，则返回一个 list。
+
+### props
+
+| 属性         | 类型                                                                                        | 默认值                          | 描述                                                                                                                                                                                                                                                                                                                                                                                  |
+| ------------ | ------------------------------------------------------------------------------------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| type         | 'checkbox' \| 'radio'                                                                       | 'radio'                         | 选择框类型，'radio' 为单选框、'checkbox'为多选框。                                                                                                                                                                                                                                                                                                                                    |
+| disabled     | boolean                                                                                     |                                 | 禁用选择，通常在需要读取历史信息二次渲染时会用到。                                                                                                                                                                                                                                                                                                                                    |
+| value        | string                                                                                      |                                 | 默认选中值，通常适用于`type="checkbox"`时提前为用户选择部分选项和设置`disabled`后的默认值渲染。                                                                                                                                                                                                                                                                                       |
+| direction    |  'horizontal' \| 'vertical'                                                                 | 'horizontal'                    | 横向或竖向排列选择框                                                                                                                                                                                                                                                                                                                                                                  |
+| shape        | 'card' \| 'default'                                                                         | 'default'                       | 选择框样式                                                                                                                                                                                                                                                                                                                                                                            |
+| options      | (string\| { label?: string, value?: string, imgSrc?: string})\[\]                           |                                 | 为用户提供的选项值，每一项可以为 string 或 object。 当值为 object 时可以接收更多自定义值，其中imgSrc只有当shape="card"时才生效。                                                                                                                                                                                                                                                      |
+| select-once  | boolean                                                                                     | false                           | 是否只允许用户选择一次                                                                                                                                                                                                                                                                                                                                                                |
+| submit-text  | string                                                                                      |                                 | 提交按钮的展示值，当该属性有值时，会展示提交按钮，此时用户只有点击提交按钮后才会触发选择事件。                                                                                                                                                                                                                                                                                        |
+| 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时此配置不生效。 |
+| item-width   | string                                                                                      |                                 | 当shape="card"时才生效。每个选项的宽度，如：'auto'、'100px'，默认使用 columns 自动分配的宽度。                                                                                                                                                                                                                                                                                        |
+| item-height  | string                                                                                      |                                 | 当shape="card"时才生效。每个选项的高度，默认自适应元素高度。                                                                                                                                                                                                                                                                                                                          |
+| img-height   | string                                                                                      | '160px'                         | 当shape="card"时才生效。每个选项中图片的高度。                                                                                                                                                                                                                                                                                                                                        |
+| equal-height | boolean                                                                                     | false                           | 当shape="card"时才生效。是否每一行的选项高度都相等，会使用高度最高的选项。                                                                                                                                                                                                                                                                                                            |

components/Markdown/demos/accordion.py

@@ -0,0 +1,30 @@
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+with gr.Blocks() as demo:
+    mgr.Markdown(f"""
+普通调用:
+
+<accordion title="调用 tool">
+
+```json
+{{"text": "风和日丽", "resolution": "1024*1024"}}
+```
+
+</accordion>
+
+使用 ::accordion-title 标记支持 markdown 语法：
+
+<accordion>
+
+::accordion-title[调用 `tool`]
+
+```json
+{{"text": "风和日丽", "resolution": "1024*1024"}}
+```
+</accordion>
+""")
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Markdown/demos/basic.py

@@ -0,0 +1,11 @@
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+with gr.Blocks() as demo:
+    mgr.Markdown(
+        "This _example_ was **written** in [Markdown](https://en.wikipedia.org/wiki/Markdown)\n"
+    )
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Markdown/demos/custom-tag.py

@@ -0,0 +1,21 @@
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+with gr.Blocks() as demo:
+    mgr.Markdown(
+        f"""
+custom tag:<custom-tag value="aaa"></custom-tag>
+""",
+        custom_components={
+            # key 为标签名
+            "custom-tag": {
+                # 自定义标签允许接收的值，可在调用标签时由用户传入
+                "props": ["value"],
+                # 实际渲染时的 template, 可以使用 {} 将用户传入的 props 替换。
+                "template": "<div>{value}</div>"
+            }
+        })
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Markdown/demos/custom-tag2.py

@@ -0,0 +1,38 @@
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+with gr.Blocks() as demo:
+    mgr.Markdown(
+        f"""
+custom tag:<custom-tag value="aaa"></custom-tag>
+""",
+        custom_components={
+            # key 为标签名
+            "custom-tag": {
+                "props": ["value"],
+                "template":
+                "<button onclick='{onClick}'>{value}</button>",
+                # js 接收一个 function
+                "js":
+                """
+(props, cc, { el, onMount }) => {
+    // onMount 会在 template 渲染完成后调用
+    onMount(() => {
+      // el 是当前自定义标签挂载的 container
+      console.log(el)
+    })
+    console.log(props.children) // 默认会包含 children，可以拿到 <tag>xx</tag> 标签内的内容 xx
+    // 可以返回一个对象，对象里的值会与 props 做并集最后渲染到模板中
+    return {
+      value: 'Click Me: ' + props.value,
+      onClick: () => {
+          alert('hello')
+      }
+    }
+}"""
+            }
+        })
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Markdown/demos/custom-tag3.py

@@ -0,0 +1,31 @@
+import json
+import os
+
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+options = ["a", "b", "c"]
+
+
+def resolve_assets(relative_path):
+    return os.path.join(os.path.dirname(__file__), "../resources",
+                        relative_path)
+
+
+with open(resolve_assets("./custom_components/custom_select.js"), 'r') as f:
+    custom_select_js = f.read()
+
+with gr.Blocks() as demo:
+    mgr.Markdown(value=f"""
+custom tag: <custom-select options='{json.dumps(options)}'></custom-select>
+""",
+                 custom_components={
+                     "custom-select": {
+                         "props": ["options"],
+                         "js": custom_select_js,
+                     }
+                 })
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Markdown/demos/custom-tag4.py

@@ -0,0 +1,39 @@
+import json
+import os
+
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+options = ["a", "b", "c"]
+
+
+def resolve_assets(relative_path):
+    return os.path.join(os.path.dirname(__file__), "../resources",
+                        relative_path)
+
+
+with open(resolve_assets("./custom_components/custom_select.js"), 'r') as f:
+    custom_select_js = f.read()
+
+
+# 注意一定要显示指明类型，gradio 使用 ioc 机制注入值
+def fn(data: gr.EventData):
+    # custom {'index': [0, 1, 0], 'tag': 'custom-select', 'tag_index': 0, 'value': 'option A'}
+    print("custom value", data._data)
+
+
+with gr.Blocks() as demo:
+    md = mgr.Markdown(value=f"""
+custom tag: <custom-select options='{json.dumps(options)}'></custom-select>
+""",
+                      custom_components={
+                          "custom-select": {
+                              "props": ["options"],
+                              "js": custom_select_js,
+                          }
+                      })
+    md.custom(fn=fn)
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Markdown/demos/custom_tags/accordion/accordion-title.py

@@ -0,0 +1,19 @@
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+with gr.Blocks() as demo:
+    mgr.Markdown(f"""
+<accordion>
+
+::accordion-title[调用 `tool`]
+
+```json
+{{"text": "风和日丽", "resolution": "1024*1024"}}
+```
+
+</accordion>
+""")
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Markdown/demos/custom_tags/accordion/basic.py

@@ -0,0 +1,17 @@
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+with gr.Blocks() as demo:
+    mgr.Markdown(f"""
+<accordion title="调用 tool">
+
+```json
+{{"text": "风和日丽", "resolution": "1024*1024"}}
+```
+
+</accordion>
+""")
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Markdown/demos/custom_tags/select-box/basic.py

@@ -0,0 +1,21 @@
+import json
+
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+options = [{"label": "A", "value": "a"}, "b", "c"]
+
+with gr.Blocks() as demo:
+    mgr.Markdown(
+        f"""Single Select: <select-box options='{json.dumps(options)}' select-once></select-box>
+
+Multiple Select：<select-box type="checkbox" options='{json.dumps(options)}' select-once submit-text="Submit"></select-box>
+
+Vertical Direction：
+
+<select-box direction="vertical" type="checkbox" options='{json.dumps(options)}' select-once submit-text="Submit"></select-box>
+""", )
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Markdown/demos/custom_tags/select-box/card_shape.py

@@ -0,0 +1,32 @@
+import json
+import os
+
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+# card 支持额外传入 imgSrc 属性作为样式封面
+options = [{
+    "label":
+    "A",
+    "imgSrc":
+    os.path.join(os.path.dirname(__file__), '../../../resources/screen.jpeg'),
+    "value":
+    "a"
+}, "b", "c", "d"]
+
+with gr.Blocks() as demo:
+    mgr.Markdown(
+        f"""<select-box shape="card" options='{json.dumps(options)}' select-once equal-height></select-box>
+
+Custom Columns：
+
+<select-box shape="card" columns="2" options='{json.dumps(options)}' select-once  equal-height></select-box>
+
+Vertical Direction：
+
+<select-box shape="card" direction="vertical" options='{json.dumps(options)}' select-once  equal-height></select-box>
+""")
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Markdown/demos/custom_tags/select-box/card_shape_width_auto.py

@@ -0,0 +1,26 @@
+import json
+import os
+
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+# card 支持额外传入 imgSrc 属性作为样式封面
+options = [{
+    "label":
+    "A",
+    "imgSrc":
+    os.path.join(os.path.dirname(__file__), '../../../resources/screen.jpeg'),
+    "value":
+    "a"
+}, "b", "c", "d"]
+
+with gr.Blocks() as demo:
+    mgr.Markdown(
+        # 填写 item-width="auto"
+        f"""
+<select-box shape="card" direction="vertical" options='{json.dumps(options)}' select-once item-width="auto"></select-box>
+""", )
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Markdown/demos/custom_tags/select-box/python_events.py

@@ -0,0 +1,23 @@
+import json
+
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+options = [{"label": "A", "value": "a"}, "b", "c"]
+
+
+def fn(data: gr.EventData):
+    custom_data = data._data
+    if (custom_data["tag"] == "select-box"):
+        print(custom_data["value"])  # 用户选择的值，与 options 中的 value 对应
+
+
+with gr.Blocks() as demo:
+    md = mgr.Markdown(
+        f"<select-box options='{json.dumps(options)}' select-once></select-box>"
+    )
+    md.custom(fn=fn)
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Markdown/demos/multimodal.py

@@ -0,0 +1,31 @@
+import os
+
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+
+def resolve_assets(relative_path):
+    return os.path.join(os.path.dirname(__file__), "../resources",
+                        relative_path)
+
+
+with gr.Blocks() as demo:
+    mgr.Markdown(f"""
+图片
+
+![image]({resolve_assets("bot.jpeg")})
+
+<img src="{resolve_assets("user.jpeg")}" />
+
+视频
+
+<video src="{resolve_assets("dog.mp4")}"></video>
+
+音频
+
+<audio src="{resolve_assets("audio.wav")}"></audio>
+""")
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Markdown/demos/select-box.py

@@ -0,0 +1,32 @@
+import json
+
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+# label 为对用户展示值，value 为实际选择值
+options = [{"label": "A", "value": "a"}, "b", "c"]
+
+with gr.Blocks() as demo:
+    mgr.Markdown(f"""
+Single Select: <select-box options='{json.dumps(options)}' select-once></select-box>
+
+Multiple Select：<select-box type="checkbox" options='{json.dumps(options)}' select-once submit-text="Submit"></select-box>
+
+Vertical Direction：
+
+<select-box direction="vertical" type="checkbox" options='{json.dumps(options)}' select-once submit-text="Submit"></select-box>
+
+Card Shape:
+
+<select-box shape="card" options='{json.dumps(options)}' select-once equal-height></select-box>
+
+
+<select-box shape="card" columns="2" options='{json.dumps(options)}' select-once  equal-height></select-box>
+
+
+<select-box shape="card" direction="vertical" options='{json.dumps(options)}' select-once  equal-height></select-box>
+""")
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Markdown/resources/custom_components/custom_select.js

@@ -0,0 +1,26 @@
+(props, cc, { el, onMount }) => {
+  const options = JSON.parse(props.options);
+  el.innerHTML = `
+  ${options
+    .map((option) => {
+      return `<div>
+        <label>${option} <input type="radio"/></label>
+    <div>`;
+    })
+    .join('')}
+  `;
+  onMount(() => {
+    const inputs = Array.from(el.getElementsByTagName('input'));
+    Array.from(el.getElementsByTagName('label')).forEach((label, i) => {
+      label.addEventListener('click', () => {
+        inputs.forEach((input) => {
+          input.checked = false;
+        });
+        const input = label.getElementsByTagName('input')[0];
+        input.checked = true;
+        // 通过 cc.dispatch 向 python 侧发送通知
+        cc.dispatch(options[i]);
+      });
+    });
+  });
+};

components/Markdown/resources/dog.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:39d086ce29e48cf76e5042d2f3f0611ee46575f70fa3dc0c40dd4cfffde3d933
+size 8626383

components/MultimodalInput/README.md

@@ -0,0 +1,50 @@
+# MutilmodalInput 
+
+多模态输入框，支持上传文件、录音、照相等功能。
+
+- 支持文本输入+文件上传共同提交
+- 支持文件上传时的图片、音频预览
+- 提交内容作为 Chatbot 输入多模态内容作为用户输入问题自动匹配
+- 支持用户录音和拍照
+
+## 如何使用
+
+### 基本使用
+
+<demo name="basic"></demo>
+
+### 与 Chatbot 配合使用
+
+<demo name="with_chatbot"></demo>
+
+### 配置上传/提交按钮
+
+<demo name="config_buttons"></demo>
+
+### 允许用户录音或拍照
+
+<demo name="upload_sources"></demo>
+
+## API 及参数列表
+
+以下 API 均为在原有 gradio Textbox 外的额外拓展参数。
+
+### value
+
+接口定义：
+
+```python
+class MultimodalInputData(GradioModel):
+    files: List[Union[FileData, str]] = []
+    text: str
+```
+
+### props
+
+| 属性                | 类型                                               | 默认值       | 描述                                                                                                                |
+| ------------------- | -------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |
+| sources             | list\[Literal\['upload', 'microphone','webcam'\]\] | \['upload'\] | 上传文件的类型列表。 "upload"会提供上文文件按钮。 "microphone"支持用户录音输入。 "webcam"支持用户照相生成图片或视频 |
+| webcam_props        | dict                                               | None         | webcam 组件属性，目前支持传入mirror_webcam(bool)、include_audio(bool)                                               |
+| upload_button_props | dict                                               | None         | 上传文件按钮属性，同 gradio UploadButton                                                                            |
+| submit_button_props | dict                                               | None         | 提交按钮属性，同 gradio Button                                                                                      |
+| file_preview_props  | dict                                               | None         | 文件预览组件属性，目前支持传入 height (int)                                                                         |

components/MultimodalInput/app.py

@@ -0,0 +1,6 @@
+from components.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()

components/MultimodalInput/demos/basic.py

@@ -0,0 +1,16 @@
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+
+def fn(value):
+    # value 包含 text 与 files
+    print(value.text, value.files)
+
+
+with gr.Blocks() as demo:
+    input = mgr.MultimodalInput()
+    input.change(fn=fn, inputs=[input])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/MultimodalInput/demos/config_buttons.py

@@ -0,0 +1,16 @@
+import gradio as gr
+
+import modelscope_gradio_components as mgr
+
+
+def fn(value):
+    print(value.text, value.files)
+
+
+with gr.Blocks() as demo:
+    input = mgr.MultimodalInput(upload_button_props=dict(variant="primary"),
+                                submit_button_props=dict(visible=False))
+    input.change(fn=fn, inputs=[input])
+
+if __name__ == "__main__":
+    demo.queue().launch()