`;
+ })
+ .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]);
+ });
+ });
+ });
+};
diff --git a/components/Chatbot/resources/dog.mp4 b/components/Chatbot/resources/dog.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..062b9c81317de43f392c56e9e03444bf8cc31d51
--- /dev/null
+++ b/components/Chatbot/resources/dog.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:39d086ce29e48cf76e5042d2f3f0611ee46575f70fa3dc0c40dd4cfffde3d933
+size 8626383
diff --git a/components/Chatbot/resources/image-bot.jpeg b/components/Chatbot/resources/image-bot.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..5df101fedca7e0b76eaa1119506ca4c1941c9fc7
Binary files /dev/null and b/components/Chatbot/resources/image-bot.jpeg differ
diff --git a/components/Chatbot/resources/music-bot.jpeg b/components/Chatbot/resources/music-bot.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..00288fb576845921bbc3247ca8da3fbbdea12800
Binary files /dev/null and b/components/Chatbot/resources/music-bot.jpeg differ
diff --git a/components/Chatbot/resources/screen.jpeg b/components/Chatbot/resources/screen.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..574735acb117e86c5c0850e2b5489b8f8efa20cc
Binary files /dev/null and b/components/Chatbot/resources/screen.jpeg differ
diff --git a/components/Chatbot/resources/user.jpeg b/components/Chatbot/resources/user.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..536948b6bd19cb0b49c44b74e2790198301520e5
Binary files /dev/null and b/components/Chatbot/resources/user.jpeg differ
diff --git a/components/Docs.py b/components/Docs.py
new file mode 100644
index 0000000000000000000000000000000000000000..f68ae5dc5552a92c925f2ae4dfe56b5eaffc7bec
--- /dev/null
+++ b/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
diff --git a/components/Markdown/README.md b/components/Markdown/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..e95ff7fa6b18e2a0c1005ef4f32a93642ada89c4
--- /dev/null
+++ b/components/Markdown/README.md
@@ -0,0 +1,87 @@
+# Markdown
+
+升级版的 gradio Markdown。
+
+- 支持输出多模态内容（音频、视频、语音、文件、文本）
+- 支持自定义渲染组件，并与 Python 侧事件交互
+
+## 如何使用
+
+### 基本使用
+
+accordion
+
+select-box
+
+
+
+custom_select.js
+
+```js
+
+
+
+#### 与 Python 侧交互
+
+在 js 中可以使用`cc.dispatch`触发 Python 侧监听的`custom`事件，以前面的custom_select.js为例，我们在前端调用了`cc.dispatch(options[i])`，则会向 Python 侧同时发送通知。
+
+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：自定义传入的值。 | diff --git a/components/Markdown/app.py b/components/Markdown/app.py new file mode 100644 index 0000000000000000000000000000000000000000..3c9d836b38ee51f5de91d43011f5f3aaaaf4aea3 --- /dev/null +++ b/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() diff --git a/components/Markdown/custom_tags/accordion.md b/components/Markdown/custom_tags/accordion.md new file mode 100644 index 0000000000000000000000000000000000000000..6a62712515e4dc14cdfd17865deb80811fa15abb --- /dev/null +++ b/components/Markdown/custom_tags/accordion.md @@ -0,0 +1,23 @@ +# accordion + +在 markdown 文本中添加手风琴效果。 + +## 如何使用 + +### 基本使用 + +
- xs：屏幕 < 576px
- sm：屏幕 ≥ 576px
- md：屏幕 ≥ 768px
- lg：屏幕 ≥ 992px
- xl：屏幕 ≥ 1200px
- 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"时才生效。是否每一行的选项高度都相等，会使用高度最高的选项。 | diff --git a/components/Markdown/demos/accordion.py b/components/Markdown/demos/accordion.py new file mode 100644 index 0000000000000000000000000000000000000000..d53349e79b996389397241f337a4fac0e86c78e0 --- /dev/null +++ b/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""" +普通调用: + +
+
+```json
+{{"text": "风和日丽", "resolution": "1024*1024"}}
+```
+
+
+
+使用 ::accordion-title 标记支持 markdown 语法：
+
+
+
+::accordion-title[调用 `tool`]
+
+```json
+{{"text": "风和日丽", "resolution": "1024*1024"}}
+```
+
+""")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/Markdown/demos/basic.py b/components/Markdown/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..61f4fd73db76c4e91a9381f2bf2af563bee141a5
--- /dev/null
+++ b/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()
diff --git a/components/Markdown/demos/custom-tag.py b/components/Markdown/demos/custom-tag.py
new file mode 100644
index 0000000000000000000000000000000000000000..787c3ea8a91eafb66fa0da4d8eea8fb565d7267d
--- /dev/null
+++ b/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:xx 标签内的内容 xx
+ // 可以返回一个对象，对象里的值会与 props 做并集最后渲染到模板中
+ return {
+ value: 'Click Me: ' + props.value,
+ onClick: () => {
+ alert('hello')
+ }
+ }
+}"""
+ }
+ })
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/Markdown/demos/custom-tag3.py b/components/Markdown/demos/custom-tag3.py
new file mode 100644
index 0000000000000000000000000000000000000000..5b1b6600c80ad77b963fa520a70f9c19aeaf5729
--- /dev/null
+++ b/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:
+
+::accordion-title[调用 `tool`]
+
+```json
+{{"text": "风和日丽", "resolution": "1024*1024"}}
+```
+
+
+""")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/Markdown/demos/custom_tags/accordion/basic.py b/components/Markdown/demos/custom_tags/accordion/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..60ca98080f9cf464f7024acd1cdf8ad85097d98e
--- /dev/null
+++ b/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"""
+
+
+```json
+{{"text": "风和日丽", "resolution": "1024*1024"}}
+```
+
+
+""")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/Markdown/demos/custom_tags/select-box/basic.py b/components/Markdown/demos/custom_tags/select-box/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..cd2821db0eb043bae526d3d7c783a469fbb9209c
--- /dev/null
+++ b/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: 
+
+视频
+
+
+
+音频
+
+
+""")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/Markdown/demos/select-box.py b/components/Markdown/demos/select-box.py
new file mode 100644
index 0000000000000000000000000000000000000000..bfe975cb3c109bfc2c42420c19e5969d3b1e2921
--- /dev/null
+++ b/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:
- 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：自定义传入的值。 | diff --git a/components/Markdown/app.py b/components/Markdown/app.py new file mode 100644 index 0000000000000000000000000000000000000000..3c9d836b38ee51f5de91d43011f5f3aaaaf4aea3 --- /dev/null +++ b/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() diff --git a/components/Markdown/custom_tags/accordion.md b/components/Markdown/custom_tags/accordion.md new file mode 100644 index 0000000000000000000000000000000000000000..6a62712515e4dc14cdfd17865deb80811fa15abb --- /dev/null +++ b/components/Markdown/custom_tags/accordion.md @@ -0,0 +1,23 @@ +# accordion + +在 markdown 文本中添加手风琴效果。 + +## 如何使用 + +### 基本使用 + +
- xs：屏幕 < 576px
- sm：屏幕 ≥ 576px
- md：屏幕 ≥ 768px
- lg：屏幕 ≥ 992px
- xl：屏幕 ≥ 1200px
- 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"时才生效。是否每一行的选项高度都相等，会使用高度最高的选项。 | diff --git a/components/Markdown/demos/accordion.py b/components/Markdown/demos/accordion.py new file mode 100644 index 0000000000000000000000000000000000000000..d53349e79b996389397241f337a4fac0e86c78e0 --- /dev/null +++ b/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""" +普通调用: + +
{value}
"
+ }
+ })
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/Markdown/demos/custom-tag2.py b/components/Markdown/demos/custom-tag2.py
new file mode 100644
index 0000000000000000000000000000000000000000..03b3d4448039bbc1572a92031911189bb2f6cf73
--- /dev/null
+++ b/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:
+
+
`;
+ })
+ .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]);
+ });
+ });
+ });
+};
diff --git a/components/Markdown/resources/dog.mp4 b/components/Markdown/resources/dog.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..062b9c81317de43f392c56e9e03444bf8cc31d51
--- /dev/null
+++ b/components/Markdown/resources/dog.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:39d086ce29e48cf76e5042d2f3f0611ee46575f70fa3dc0c40dd4cfffde3d933
+size 8626383
diff --git a/components/Markdown/resources/screen.jpeg b/components/Markdown/resources/screen.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..574735acb117e86c5c0850e2b5489b8f8efa20cc
Binary files /dev/null and b/components/Markdown/resources/screen.jpeg differ
diff --git a/components/Markdown/resources/user.jpeg b/components/Markdown/resources/user.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..536948b6bd19cb0b49c44b74e2790198301520e5
Binary files /dev/null and b/components/Markdown/resources/user.jpeg differ
diff --git a/components/MultimodalInput/README.md b/components/MultimodalInput/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..d98029e5adc6f54f066f900211daf7fb1e8e5e15
--- /dev/null
+++ b/components/MultimodalInput/README.md
@@ -0,0 +1,50 @@
+# MutilmodalInput
+
+多模态输入框，支持上传文件、录音、照相等功能。
+
+- 支持文本输入+文件上传共同提交
+- 支持文件上传时的图片、音频预览
+- 提交内容作为 Chatbot 输入多模态内容作为用户输入问题自动匹配
+- 支持用户录音和拍照
+
+## 如何使用
+
+### 基本使用
+
+