update

.gitattributes

@@ -31,5 +31,7 @@ saved_model/**/* 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 -text
-*.whl 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
+modelscope_gradio_components-0.0.1b8-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+components/Chatbot/resources/dog.mp4 filter=lfs diff=lfs merge=lfs -text

DOCS.md

@@ -0,0 +1,15 @@
+# ModelScope Gradio Components
+
+ModelScope_Gradio_Components is a set of extension component libraries based on gradio 4.x, dedicated to serving the various extension needs of gradio applications within the ModelScope Studio. It mainly focuses on enhancing conversational scenarios, supporting multimodal contexts, and providing assistance for various other specialized scenarios.
+
+## Install
+
+```sh
+pip install modelscope_gradio_components
+```
+
+## Components
+
+- <tab-link component-tab="Chatbot">Chatbot</tab-link>
+- <tab-link component-tab="MultimodalInput">MultimodalInput</tab-link>
+- <tab-link component-tab="Markdown">Markdown</tab-link>

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-zh_CN.md

@@ -1,54 +1,15 @@
 # ModelScope Studio
 
-<p align="center">
-    <img src="https://modelscope.oss-cn-beijing.aliyuncs.com/modelscope.gif" height="60" style="vertical-align: middle;"/>
-    <span style="font-size: 30px; vertical-align: middle;">
-    ✖️
-    </span>
-    <img src="https://img.alicdn.com/imgextra/i1/O1CN01OmXst929933KJd7og_!!6000000008024-55-tps-2016-703.svg" height="60" style="vertical-align: middle;">
-<p>
+`modelscope_studio` 是一套基于 gradio 4.x 的扩展组件库，致力于服务于 ModelScope 创空间中对于 gradio 应用的各类扩展需求，目前主要聚集在对话场景增强、多模态场景以及一些其他垂直场景支持。
 
-<p align="center">
-<a href="https://github.com/modelscope/modelscope-studio">GitHub</a> | 🤖 <a href="https://modelscope.cn/studios/modelscope/modelscope-studio">ModelScope Studio</a> ｜ 🤗 <a href="https://huggingface.co/spaces/modelscope/modelscope-studio">Hugging Face Space</a>
-
-`modelscope_studio`是一个基于 Gradio 的三方组件库，为开发者提供更定制化的界面搭建能力和更丰富的组件使用形式。
-
-目前支持的 UI 库：
-
-- [Ant Design](https://ant.design/)
-
-## 何时使用
-
-比起 Gradio 自身的组件，`modelscope_studio`更加注重页面布局和组件的灵活性，如果您想要构建更漂亮的用户界面，我们非常推荐您使用`modelscope_studio`。
-
-然而，当您的应用需要 Gradio 在 Python 端更多地处理内置数据时，`modelscope_studio`的组件可能不是最好的选择，但是不用担心，它可以很好地与已有的 Gradio 组件相结合，您仍然可以使用`modelscope_studio`来优化您的应用。
-
-## 依赖
-
-- Gradio >= 4.0
-
-## 安装
+## Install
 
 ```sh
 pip install modelscope_studio
 ```
 
-## 示例
-
-<demo name="example"></demo>
-
-## 迁移到 1.0
-
-如果您在之前使用了`modelscope_studio`的组件，并且想要在新版本中继续使用。不需要对原有组件做任何修改，只需要在外层引入`ms.Application`即可。
+## Components
 
-```python
-import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
-
-with gr.Blocks() as demo:
-    with ms.Application():
-        mgr.Chatbot()
-
-demo.launch()
-```
+- <tab-link component-tab="Chatbot">Chatbot</tab-link>
+- <tab-link component-tab="MultimodalInput">MultimodalInput</tab-link>
+- <tab-link component-tab="Markdown">Markdown</tab-link>

README.md

@@ -1,71 +1,31 @@
 ---
 tags:
   - gradio-custom-component
-  - component library
-  - Ant Design
-  - modelscope-studio
-title: modelscope-studio
-colorFrom: blue
-colorTo: gray
-short_description: A third-party component library based on Gradio.
-sdk: gradio
+  - Chatbot
+  - MutilmodalInput
+  - Markdown
+  - gradio-template-Chatbot
+  - gradio-template-Markdown
+title: modelscope_gradio_components V0.0.1b8
+colorFrom: red
+colorTo: red
+sdk: docker
 pinned: false
-header: mini
-app_file: app.py
 license: apache-2.0
 ---
 
 # ModelScope Studio
 
-<p align="center">
-    <img src="https://modelscope.oss-cn-beijing.aliyuncs.com/modelscope.gif" height="60" style="vertical-align: middle;"/>
-    <span style="font-size: 30px; vertical-align: middle;">
-    ✖️
-    </span>
-    <img src="https://github.com/gradio-app/gradio/raw/main/readme_files/gradio.svg" height="60" style="vertical-align: middle;">
-<p>
+`modelscope_studio` is a set of extension component libraries based on gradio 4.x, dedicated to serving the various extension needs of gradio applications within the ModelScope Studio. It mainly focuses on enhancing conversational scenarios, supporting multimodal contexts, and providing assistance for various other specialized scenarios.
 
-<p align="center">
-<a href="https://github.com/modelscope/modelscope-studio">GitHub</a> | 🤖 <a href="https://modelscope.cn/studios/modelscope/modelscope-studio">ModelScope Studio</a> ｜ 🤗 <a href="https://huggingface.co/spaces/modelscope/modelscope-studio">Hugging Face Space</a>
-
-`modelscope_studio` is a third-party component library based on Gradio, offers developers more customized interface building capabilities and a richer variety of component usage forms.
-
-Currently supported UI libraries:
-
-- [Ant Design](https://ant.design/)
-
-## When to Use
-
-Compared to the original components of Gradio, `modelscope_studio` focuses more on page layout and component flexibility. If you want to build a more beautiful user interface, we highly recommend using `modelscope_studio`.
-
-However, when your application needs Gradio to handle more built-in data on the Python side, the components of `modelscope_studio` may not be the best choice, but don't worry, it integrates well with existing Gradio components, you can still use `modelscope_studio` to optimize your application.
-
-## Dependencies
-
-- Gradio >= 4.0
-
-## Installation
+## Install
 
 ```sh
 pip install modelscope_studio
 ```
 
-## Examples
-
-<demo name="example"></demo>
-
-## Migration to 1.0
-
-If you have used the `modelscope_studio` component before and want to continue using it in the new version, you do not need to make any changes to the original component, just import `ms.Application` in the outer layer.
+## Components
 
-```python
-import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
-
-with gr.Blocks() as demo:
-    with ms.Application():
-        mgr.Chatbot()
-
-demo.launch()
-```
+- <tab-link component-tab="Chatbot">Chatbot</tab-link>
+- <tab-link component-tab="MultimodalInput">MultimodalInput</tab-link>
+- <tab-link component-tab="Markdown">Markdown</tab-link>

api/app.py

@@ -1,19 +0,0 @@
-import os
-
-from components.legacy.Docs import Docs
-
-
-def resolve(relative_path: str):
-    return os.path.join(os.path.dirname(__file__), relative_path)
-
-
-docs = Docs(
-    __file__,
-    markdown_files=([
-        filename for filename in os.listdir(resolve('.'))
-        if filename.endswith(".md")
-    ]),
-)
-
-if __name__ == "__main__":
-    docs.render().queue().launch()

api/load-zh_CN.md

@@ -1,30 +0,0 @@
-# load
-
-该特性与 [gr.load](https://www.gradio.app/docs/gradio/load) 类似。允许用户从已有创空间 [ModelScope Studio](https://modelscope.cn/studios) 仓库构造 demo。
-
-## 如何使用
-
-### 基本使用
-
-```python
-import modelscope_studio.components.legacy as mgr
-demo = mgr.load("modelscope/modelscope-studio")
-demo.launch()
-```
-
-### 使用访问令牌
-
-使用访问令牌来加载私有创空间。在这里找到您的 sdk 令牌：https://modelscope.cn/my/myaccesstoken。
-
-```python
-import modelscope_studio.components.legacy as mgr
-demo = mgr.load("modelscope/modelscope-studio", token="YOUR_ACCESS_TOKEN")
-demo.launch()
-```
-
-## 初始化
-
-| 属性  | 类型 | 默认值 | 描述                                                                                                 |
-| ----- | ---- | ------ | ---------------------------------------------------------------------------------------------------- |
-| name  | str  | None   | 必填。 创空间名称（如: "modelscope/modelscope-studio"）。                                            |
-| token | str  | None   | 用于加载私有创空间的可选访问令牌。 在这里找到您的 sdk 令牌：https://modelscope.cn/my/myaccesstoken。 |

api/load.md

@@ -1,30 +0,0 @@
-# load
-
-This feature is similar to [gr.load](https://www.gradio.app/docs/gradio/load). Allow users to Construct a demo from a [ModelScope Studio](https://modelscope.cn/studios) repo.
-
-## How to Use
-
-### Basic Usage
-
-```python
-import modelscope_studio.components.legacy as mgr
-demo = mgr.load("modelscope/modelscope-studio")
-demo.launch()
-```
-
-### With Access Token
-
-Use the access token to load a private ModelScope Studio repo. Find your sdk token here: https://modelscope.cn/my/myaccesstoken.
-
-```python
-import modelscope_studio.components.legacy as mgr
-demo = mgr.load("modelscope/modelscope-studio", token="YOUR_ACCESS_TOKEN")
-demo.launch()
-```
-
-## Initialization
-
-| Parameter | Type | Default Value | Description                                                                                                                         |
-| --------- | ---- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
-| name      | str  | None          | required. the name of the ModelScope Studio repo (e.g. "modelscope/modelscope-studio").                                             |
-| token     | str  | None          | optional access token for loading private ModelScope Studio repo. Find your sdk token here: https://modelscope.cn/my/myaccesstoken. |

app.py

@@ -1,529 +1,22 @@
-import os
-from typing import Literal
-
-import modelscope_studio.components.antd as antd
-import modelscope_studio.components.base as ms
-from helper.Docs import Docs
-from helper.env import is_modelscope_studio
-from helper.Site import Site
-from legacy_app import legacy_demo
-
-
-def get_text(text: str, cn_text: str):
-    if is_modelscope_studio:
-        return cn_text
-    return text
-
-
-def get_docs(type: Literal["antd", "antdx", "base"]):
-    import importlib.util
-
-    components = []
-    components_dir = os.path.join(os.path.dirname(__file__), "components",
-                                  type)
-    for dir in os.listdir(components_dir):
-        abs_dir = os.path.join(components_dir, dir)
-        if os.path.isdir(abs_dir):
-            app_file = os.path.join(abs_dir, "app.py")
-            if os.path.exists(app_file):
-                components.append(dir)
-
-    docs = {}
-    for component in components:
-        spec = importlib.util.spec_from_file_location(
-            "doc", os.path.join(components_dir, component, "app.py"))
-        module = importlib.util.module_from_spec(spec)
-        spec.loader.exec_module(module)
-        docs[component] = module.docs
-    return docs
-
-
-def get_layout_templates():
-    import importlib.util
-
-    templates = []
-    templates_dir = os.path.join(os.path.dirname(__file__), "layout_templates")
-    for dir in os.listdir(templates_dir):
-        abs_dir = os.path.join(templates_dir, dir)
-        if os.path.isdir(abs_dir):
-            app_file = os.path.join(abs_dir, "app.py")
-            if os.path.exists(app_file):
-                templates.append(dir)
-
-    docs = {}
-    for template in templates:
-        spec = importlib.util.spec_from_file_location(
-            "doc", os.path.join(templates_dir, template, "app.py"))
-        module = importlib.util.module_from_spec(spec)
-        spec.loader.exec_module(module)
-        docs[template] = module.docs
-    return docs
-
-
-layout_templates = get_layout_templates()
-
-index_docs = {"overview": Docs(__file__), **layout_templates}
-
-base_docs = get_docs("base")
-antd_docs = get_docs("antd")
-antdx_docs = get_docs("antdx")
-
-default_active_tab = "index"
-index_menu_items = [{
-    "label": get_text("ModelScope-Studio", "ModelScope-Studio"),
-    "key": "overview"
-}, {
-    "label":
-    get_text("Layout Templates", "布局模板"),
-    "type":
-    "group",
-    "children": [{
-        "label": get_text("Coder-Artifacts", "Coder-Artifacts"),
-        "key": "coder_artifacts"
-    }]
-}]
-
-base_menu_items = [{
-    "label":
-    get_text("Core", "核心"),
-    "type":
-    "group",
-    "children": [{
-        "label": get_text("Application", "Application 应用"),
-        "key": "application"
-    }, {
-        "label": get_text("AutoLoading", "AutoLoading 自动加载"),
-        "key": "auto_loading"
-    }, {
-        "label": get_text("Slot", "Slot 插槽"),
-        "key": "slot"
-    }, {
-        "label": get_text("Fragment", "Fragment 片段"),
-        "key": "fragment"
-    }]
-}, {
-    "label":
-    get_text("Layout", "布局"),
-    "type":
-    "group",
-    "children": [{
-        "label": "Div",
-        "key": "div"
-    }, {
-        "label": "Span",
-        "key": "span"
-    }, {
-        "label": "Text",
-        "key": "text"
-    }, {
-        "label": "Markdown",
-        "key": "markdown"
-    }]
-}, {
-    "label":
-    get_text("Render", "渲染"),
-    "type":
-    "group",
-    "children": [{
-        "label": get_text("Each", "Each 循环"),
-        "key": "each"
-    }, {
-        "label": get_text("Filter", "Filter 过滤"),
-        "key": "filter"
-    }]
-}]
-
-antd_menu_items = [{
-    "label": get_text("Overview", "概览"),
-    "key": "overview"
-}, {
-    "label":
-    get_text("General", "通用"),
-    "type":
-    "group",
-    "children": [{
-        "label": get_text("Button", "Button 按钮"),
-        "key": "button"
-    }, {
-        "label": get_text("FloatButton", "FloatButton 悬浮按钮"),
-        "key": "float_button"
-    }, {
-        "label": get_text("Icon", "Icon 图标"),
-        "key": "icon"
-    }, {
-        "label": get_text("Typography", "Typography 排版"),
-        "key": "typography"
-    }]
-}, {
-    "label":
-    get_text("Layout", "布局"),
-    "type":
-    "group",
-    "children": [{
-        "label": get_text("Divider", "Divider 分割线"),
-        "key": "divider"
-    }, {
-        "label": get_text("Flex", "Flex 弹性布局"),
-        "key": "flex"
-    }, {
-        "label": get_text("Grid", "Grid 栅格"),
-        "key": "grid"
-    }, {
-        "label": get_text("Layout", "Layout 布局"),
-        "key": "layout"
-    }, {
-        "label": get_text("Space", "Space 间距"),
-        "key": "space"
-    }, {
-        "label": get_text("Splitter", "Splitter 分割面板"),
-        "key": "splitter"
-    }]
-}, {
-    "label":
-    get_text("Navigation", "导航"),
-    "type":
-    "group",
-    "children": [{
-        "label": get_text("Anchor", "Anchor 锚点"),
-        "key": "anchor"
-    }, {
-        "label": get_text("Breadcrumb", "Breadcrumb 面包屑"),
-        "key": "breadcrumb"
-    }, {
-        "label": get_text("Dropdown", "Dropdown 下拉菜单"),
-        "key": "dropdown"
-    }, {
-        "label": get_text("Menu", "Menu 导航菜单"),
-        "key": "menu"
-    }, {
-        "label": get_text("Pagination", "Pagination 分页"),
-        "key": "pagination"
-    }, {
-        "label": get_text("Steps", "Steps 步骤条"),
-        "key": "steps"
-    }]
-}, {
-    "label":
-    get_text("Data Entry", "数据录入"),
-    "type":
-    "group",
-    "children": [{
-        "label": get_text("AutoComplete", "AutoComplete 自动完成"),
-        "key": "auto_complete"
-    }, {
-        "label": get_text("Cascader", "Cascader 级联选择"),
-        "key": "cascader"
-    }, {
-        "label": get_text("Checkbox", "Checkbox 多选框"),
-        "key": "checkbox"
-    }, {
-        "label": get_text("ColorPicker", "ColorPicker 颜色选择器"),
-        "key": "color_picker"
-    }, {
-        "label": get_text("DatePicker", "DatePicker 日期选择框"),
-        "key": "date_picker"
-    }, {
-        "label": get_text("Form", "Form 表单"),
-        "key": "form"
-    }, {
-        "label": get_text("Input", "Input 输入框"),
-        "key": "input"
-    }, {
-        "label": get_text("InputNumber", "InputNumber 数字输入框"),
-        "key": "input_number"
-    }, {
-        "label": get_text("Mentions", "Mentions 提及"),
-        "key": "mentions"
-    }, {
-        "label": get_text("Radio", "Radio 单选框"),
-        "key": "radio"
-    }, {
-        "label": get_text("Rate", "Rate 评分"),
-        "key": "rate"
-    }, {
-        "label": get_text("Select", "Select 选择器"),
-        "key": "select"
-    }, {
-        "label": get_text("Slider", "Slider 滑动输入条"),
-        "key": "slider"
-    }, {
-        "label": get_text("Switch", "Switch 开关"),
-        "key": "switch"
-    }, {
-        "label": get_text("TimePicker", "TimePicker 时间选择器"),
-        "key": "time_picker"
-    }, {
-        "label": get_text("Transfer", "Transfer 穿梭框"),
-        "key": "transfer"
-    }, {
-        "label": get_text("TreeSelect", "TreeSelect 树选择"),
-        "key": "tree_select"
-    }, {
-        "label": get_text("Upload", "Upload 上传"),
-        "key": "upload"
-    }]
-}, {
-    "label":
-    get_text("Data Display", "数据展示"),
-    "type":
-    "group",
-    "children": [{
-        "label": get_text("Avatar", "Avatar 头像"),
-        "key": "avatar"
-    }, {
-        "label": get_text("Badge", "Badge 徽标数"),
-        "key": "badge"
-    }, {
-        "label": get_text("Calendar", "Calendar 日历"),
-        "key": "calendar"
-    }, {
-        "label": get_text("Card", "Card 卡片"),
-        "key": "card"
-    }, {
-        "label": get_text("Carousel", "Carousel 走马灯"),
-        "key": "carousel"
-    }, {
-        "label": get_text("Collapse", "Collapse 折叠面板"),
-        "key": "collapse"
-    }, {
-        "label": get_text("Descriptions", "Descriptions 描述列表"),
-        "key": "descriptions"
-    }, {
-        "label": get_text("Empty", "Empty 空状态"),
-        "key": "empty"
-    }, {
-        "label": get_text("Image", "Image 图片"),
-        "key": "image"
-    }, {
-        "label": get_text("List", "List 列表"),
-        "key": "list"
-    }, {
-        "label": get_text("Popover", "Popover 气泡卡片"),
-        "key": "popover"
-    }, {
-        "label": get_text("QRCode", "QRCode 二维码"),
-        "key": "qr_code"
-    }, {
-        "label": get_text("Segmented", "Segmented 分段控制器"),
-        "key": "segmented"
-    }, {
-        "label": get_text("Statistic", "Statistic 统计数值"),
-        "key": "statistic"
-    }, {
-        "label": get_text("Table", "Table 表格"),
-        "key": "table"
-    }, {
-        "label": get_text("Tabs", "Tabs 标签页"),
-        "key": "tabs"
-    }, {
-        "label": get_text("Tag", "Tag 标签"),
-        "key": "tag"
-    }, {
-        "label": get_text("Timeline", "Timeline 时间轴"),
-        "key": "timeline"
-    }, {
-        "label": get_text("Tooltip", "Tooltip 文字提示"),
-        "key": "tooltip"
-    }, {
-        "label": get_text("Tour", "Tour 漫游式引导"),
-        "key": "tour"
-    }, {
-        "label": get_text("Tree", "Tree 树形控件"),
-        "key": "tree"
-    }]
-}, {
-    "label":
-    get_text("Feedback", "反馈"),
-    "type":
-    "group",
-    "children": [{
-        "label": get_text("Alert", "Alert 警告提示"),
-        "key": "alert"
-    }, {
-        "label": get_text("Drawer", "Drawer 抽屉"),
-        "key": "drawer"
-    }, {
-        "label": get_text("Message", "Message 全局提示"),
-        "key": "message"
-    }, {
-        "label": get_text("Modal", "Modal 对话框"),
-        "key": "modal"
-    }, {
-        "label": get_text("Notification", "Notification 通知提醒框"),
-        "key": "notification"
-    }, {
-        "label": get_text("Popconfirm", "Popconfirm 气泡确认框"),
-        "key": "popconfirm"
-    }, {
-        "label": get_text("Progress", "Progress 进度条"),
-        "key": "progress"
-    }, {
-        "label": get_text("Result", "Result 结果"),
-        "key": "result"
-    }, {
-        "label": get_text("Skeleton", "Skeleton 骨架屏"),
-        "key": "skeleton"
-    }, {
-        "label": get_text("Spin", "Spin 加载中"),
-        "key": "spin"
-    }, {
-        "label": get_text("Watermark", "Watermark 水印"),
-        "key": "watermark"
-    }]
-}, {
-    "label":
-    get_text("Other", "其他"),
-    "type":
-    "group",
-    "children": [{
-        "label": get_text("Affix", "Affix 固钉"),
-        "key": "affix"
-    }, {
-        "label": get_text("ConfigProvider", "ConfigProvider 全局化配置"),
-        "key": "config_provider"
-    }]
-}]
-
-antdx_menu_items = [{
-    "label": get_text("Overview", "概览"),
-    "key": "overview"
-}, {
-    "label":
-    get_text("Common", "通用"),
-    "type":
-    "group",
-    "children": [{
-        "label": get_text("Bubble", "Bubble 对话气泡"),
-        "key": "bubble"
-    }, {
-        "label": get_text("Conversations", "Conversations 管理对话"),
-        "key": "conversations"
-    }]
-}, {
-    "label":
-    get_text("Wake", "唤醒"),
-    "type":
-    "group",
-    "children": [{
-        "label": get_text("Welcome", "Welcome 欢迎"),
-        "key": "welcome"
-    }, {
-        "label": get_text("Prompts", "Prompts 提示集"),
-        "key": "prompts"
-    }]
-}, {
-    "label":
-    get_text("Express", "表达"),
-    "type":
-    "group",
-    "children": [{
-        "label": get_text("Attachments", "Attachments 输入附件"),
-        "key": "attachments"
-    }, {
-        "label": get_text("Sender", "Sender 输入框"),
-        "key": "sender"
-    }, {
-        "label": get_text("Suggestion", "Suggestion 快捷指令"),
-        "key": "suggestion"
-    }]
-}, {
-    "label":
-    get_text("Confirm", "确认"),
-    "type":
-    "group",
-    "children": [{
-        "label": get_text("ThoughtChain", "ThoughtChain 思考链"),
-        "key": "thought_chain"
-    }]
-}, {
-    "label":
-    get_text("Tools", "工具"),
-    "type":
-    "group",
-    "children": [{
-        "label": get_text("XProvider", "XProvider 全局化配置"),
-        "key": "x_provider"
-    }]
-}]
-
-
-def logo():
-    with antd.Flex(align='center', gap=8):
-        antd.Image(os.path.join(os.path.dirname(__file__),
-                                "./resources/modelscope.png"),
-                   preview=False,
-                   height=20,
-                   elem_style=dict(width="auto"))
-        ms.Span('✖️')
-        antd.Image(os.path.join(os.path.dirname(__file__),
-                                "./resources/gradio.png"),
-                   preview=False,
-                   height=40,
-                   elem_style=dict(width="auto"))
-
-
-def more_components():
-    with antd.Button(type="link",
-                     block=True,
-                     href="https://ant.design/components/overview/",
-                     href_target="_blank",
-                     elem_style=dict(display="block",
-                                     textAlign="left",
-                                     whiteSpace="nowrap",
-                                     textOverflow="ellipsis",
-                                     overflow="hidden")):
-        ms.Text(get_text("More Components", "更多组件"))
-
-        with ms.Slot("icon"):
-            antd.Icon("ExportOutlined", elem_style=dict(marginRight=4))
-
-
-tabs = [
-    {
-        "label": get_text("Overview", "概览"),
-        "key": "index",
-        "default_active_key": "overview",
-        "menus": index_menu_items
-    },
-    {
-        "label": get_text("Base Components", "基础组件"),
-        "key": "base",
-        "default_active_key": "application",
-        "menus": base_menu_items
-    },
-    {
-        "label": get_text("Antd Components", "Antd 组件"),
-        "key": "antd",
-        "default_active_key": "overview",
-        "menus": antd_menu_items,
-        "extra_menu_footer": more_components
-    },
-    {
-        "label": get_text("Antdx Components", "Antdx 组件"),
-        "key": "antdx",
-        "default_active_key": "overview",
-        "menus": antdx_menu_items,
-    },
-    {
-        "label": get_text("Version 0.x", "0.x 版本"),
-        "key": "legacy",
-        "content": legacy_demo
-    },
+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 = [
+    ["Quick Start", readme_docs],
+    ["Chatbot", chatbot_docs],
+    ["Markdown", markdown_docs],
+    ["MultimodalInput", multimodel_input_docs],
 ]
 
-site = Site(
-    tabs=tabs,
-    docs={
-        # match the key of tabs
-        "index": index_docs,
-        "antd": antd_docs,
-        "antdx": antdx_docs,
-        "base": base_docs
-    },
-    default_active_tab=default_active_tab,
-    logo=logo)
-
-demo = site.render()
+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)
 
-if __name__ == "__main__":
-    demo.queue().launch(ssr_mode=False)
+demo.queue().launch()

components/{legacy/Chatbot → Chatbot}/README-zh_CN.md

@@ -3,10 +3,9 @@
 升级版的 gradio Chatbot。
 
 - 支持前端匀速流式输出 message
-- 支持输出多模态内容（音频、视频、图片、文本）
-- 内置标签（chart、select-box、accordion）
+- 支持输出多模态内容（音频、视频、语音、文件、文本）
 - 支持多 agent 场景
-- 支持自定义渲染组件，并与 Python 事件交互
+- 支持自定义渲染组件，并与 Python 侧事件交互
 
 ## 如何使用
 
@@ -29,8 +28,8 @@
 同时为了适配大模型的工具调用链路，额外对某些大模型的格式做了预设配置，支持下述格式的预设处理（会将下面的格式转换成上方`accordion`标签包裹形式）
 
 ```python
-import modelscope_studio.components.legacy as mgr
-from modelscope_studio.components.legacy.Chatbot.llm_thinking_presets import qwen
+import modelscope_studio as mgr
+from modelscope_studio.components.Chatbot.llm_thinking_presets import qwen
 
 # 添加 qwen 解析预设
 mgr.Chatbot(llm_thinking_presets=[qwen()])
@@ -54,12 +53,6 @@ Observation: <result>「任意 md 内容，将作为完成调用的展示的下
 
 <demo name="select-box"></demo>
 
-### 支持图表展示
-
-在返回的内容中加入 `chart` 标签，更多用法详见 <tab-link component-tab="Markdown">Markdown 内置自定义标签</tab-link>
-
-<demo name="chart"></demo>
-
 ### 多 bot 场景
 
 <demo name="multi_bots"></demo>
@@ -84,12 +77,6 @@ class FileMessage(GradioModel):
 
 
 class MultimodalMessage(GradioModel):
-    # 默认以 index 为作为 id，id 改变会导致 message 重新渲染
-    id: Optional[str] = None
-    # message 容器的 elem id
-    elem_id: Optional[str] = None
-    # message 容器的 elem classes
-    elem_classes: Optional[List[str] | str] = None
     name: Optional[str] = None
     text: Optional[str] = None
     flushing: Optional[bool] = None
@@ -109,21 +96,19 @@ class ChatbotData(GradioRootModel):
 
 ### props
 
-| 属性                          | 类型                                                                             | 默认值   | 描述                                                                                                                                                                                                                                                                                                     |
-| ----------------------------- | -------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| flushing                      | bool                                                                             | True     | 是否开启打字机效果。默认只有 bot 的 message 会开启，可以通过单独修改 message 的 flushing 属性精确控制每一条 message 的显示效果                                                                                                                                                                           |
-| enable_base64                 | bool                                                                             | False    | 是否支持渲染的内容为 base64，因为直接渲染 base64 会带来安全问题，默认为 False。                                                                                                                                                                                                                          |
-| enable_latex                  | bool                                                                             | True     | 是否支持 Latex 公式渲染                                                                                                                                                                                                                                                                                  |
-| latex_single_dollar_delimiter | bool                                                                             | True     | 是否支持单`$`符号在 Latex 公式中渲染                                                                                                                                                                                                                                                                     |
-| 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_studio.Chatbot.llm_thinking_presets引入，目前支持：qwen                                                                                                                                                      |
-| custom_components             | dict\[str, CustomComponentDict\] CustomComponentDict 定义见下方                  | None     | 支持用户定义自定义标签，并通过 js 控制标签渲染样式与触发 python 事件。                                                                                                                                                                                                                                   |
-
-**CustomComponentDict 定义如下**
+| 属性                 | 类型                                                                             | 默认值   | 描述                                                                                                                                                                                                                                                                                                     |
+| -------------------- | -------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 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_studio.Chatbot.llm_thinking_presets引入，目前支持：qwen                                                                                                                                                      |
+| custom_components    | dict\[str, CustomComponentDict\] CustomComponentDict 定义见下方                  | None     | 支持用户定义自定义标签，并通过 js 控制标签渲染样式与触发 python 事件。                                                                                                                                                                                                                                   |
+
+**CustomComponent 定义如下**
 
 ```python
 class CustomComponentDict(TypedDict):
@@ -138,7 +123,7 @@ class CustomComponentDict(TypedDict):
 
 ### 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 ([message index, user group(index 0) or bot group(index 1), user/bot group index])。<br/> - tag：当前触发的标签。<br/> - tag_index：当前触发标签的 index，此 index 在 message 的 index tuple 基础上重新计算。<br/> - value：自定义传入的值。 |
+| 事件                           | 描述                                                                                                                                                                                                                                      |
+| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `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/{legacy/Chatbot → Chatbot}/README.md

@@ -3,10 +3,9 @@
 Upgraded gradio Chatbot.
 
 - Supports uniform frontend streaming output of messages
-- Supports output of multimodal content (audio, video, image, text)
-- Built-in tags (chart, select-box, accordion)
+- Supports output of multimodal content (audio, video, voice, files, text)
 - Supports multi-agent scenarios
-- Supports custom rendering components and interaction with Python events
+- Supports custom rendering components and interaction with events on the Python side
 
 ## How to Use
 
@@ -28,8 +27,8 @@ Include the `accordion` tag in the returned content to add an accordion within t
 Additionally, to adapt to the toolchain usage of large models, some preset configurations for certain large models have been made. Support for the following preset formats (which will be converted into the form wrapped by the above `accordion` tag).
 
 ```python
-import modelscope_studio.components.legacy as mgr
-from modelscope_studio.components.legacy.Chatbot.llm_thinking_presets import qwen
+import modelscope_studio as mgr
+from modelscope_studio.components.Chatbot.llm_thinking_presets import qwen
 
 # Add qwen preset
 mgr.Chatbot(llm_thinking_presets=[qwen()])
@@ -49,16 +48,10 @@ Observation: <result>「Any md content will be displayed in the drop-down box wh
 
 ### Support for User Selection Interaction
 
-Include the `select-box` tag in the returned content. For more usage details, see <tab-link component-tab="Markdown">Markdown Built-in Custom Tags </tab-link>.
+Include the `select-box` tag in the returned content for more usage details, see <tab-link component-tab="Markdown">Markdown Built-in Custom Tags <tab-link component-tab="Markdown">.
 
 <demo name="select-box"></demo>
 
-### Support for Chart Display
-
-Include the `chart` tag in the returned content. For more usage details, see <tab-link component-tab="Markdown">Markdown Built-in Custom Tags </tab-link>.
-
-<demo name="chart"></demo>
-
 ### Multi-bot Scenarios
 
 <demo name="multi_bots"></demo>
@@ -83,12 +76,6 @@ class FileMessage(GradioModel):
 
 
 class MultimodalMessage(GradioModel):
-    # By default, message index is used as id. it will cause the message to be re-rendered when id changed.
-    id: Optional[str] = None
-    # elem id of message container
-    elem_id: Optional[str] = None
-    # elem classes of message container
-    elem_classes: Optional[List[str] | str] = None
     name: Optional[str] = None
     text: Optional[str] = None
     flushing: Optional[bool] = None
@@ -108,19 +95,17 @@ class ChatbotData(GradioRootModel):
 
 ### props
 
-| Attribute                     | Type                                                                             | Default Value | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| ----------------------------- | -------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| flushing                      | bool                                                                             | True          | Whether to enable the typewriter effect. By default, only the bot's messages will have this effect, but you can control the display effect of each message precisely by modifying the flushing attribute of a message individually.                                                                                                                                                                                                                                                                                      |
-| enable_base64                 | bool                                                                             | False         | Whether to support rendering content as base64, since rendering base64 is unsafe, the default is False.                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| enable_latex                  | bool                                                                             | True          | Whether to enable LaTeX rendering.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| latex_single_dollar_delimiter | bool                                                                             | True          | Whether to enable single dollar delimiter `$` for LaTeX rendering.                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| preview                       | bool                                                                             | True          | Whether to enable image preview functionality.                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| avatar_images                 | tuple\[str \| Path \| None \| dict \| list, str \| Path \| None \| dict\| list\] | None          | An extended parameter value for gr.Chatbot, in addition to accepting a URL, it can also accept a dict and list. The dict can include the fields avatar and name, where the name field will be displayed under the avatar when rendered. <br/> - When passing a dict, it must include an avatar field.<br/> - When passing a list, it generally corresponds to the multi-bot mode, where each item can receive all the aforementioned values, and each bot’s avatar matches with the position of the bot in the messages. |
-| avatar_image_align            | Literal['top', 'middle', 'bottom']                                               | 'bottom'      | Controls the alignment of the avatar with the messages, default is bottom-aligned.                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| avatar_image_width            | int                                                                              | 45            | The width of the avatar and name.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| flushing_speed                | int                                                                              | 3             | Typewriter speed, values range from 1 - 10, with larger values indicating faster speeds.                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| llm_thinking_presets          | list\[dict\]                                                                     | \[\]          | llm thinking link presets, which can convert the output format of llm calling tools into a fixed front-end display format. It needs to be imported from modelscope_studio.Chatbot.llm_thinking_presets, and currently supports: qwen.                                                                                                                                                                                                                                                                                    |
-| custom_components             | dict\[str, CustomComponentDict\] CustomComponentDict is defined below            | None          | Allows users to define custom tags and control tag rendering styles and trigger Python events through JS.                                                                                                                                                                                                                                                                                                                                                                                                                |
+| Attribute            | Type                                                                             | Default Value | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| -------------------- | -------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| flushing             | bool                                                                             | True          | Whether to enable the typewriter effect. By default, only the bot's messages will have this effect, but you can control the display effect of each message precisely by modifying the flushing attribute of a message individually.                                                                                                                                                                                                                                                                                      |
+| enable_base64        | bool                                                                             | False         | Whether to support rendering content as base64, since rendering base64 is not safe, the default is False.                                                                                                                                                                                                                                                                                                                                                                                                                |
+| preview              | bool                                                                             | True          | Whether to enable image preview functionality.                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| avatar_images        | tuple\[str \| Path \| None \| dict \| list, str \| Path \| None \| dict\| list\] | None          | An extended parameter value for gr.Chatbot, in addition to accepting a URL, it can also accept a dict and list. The dict can include the fields avatar and name, where the name field will be displayed under the avatar when rendered. <br/> - When passing a dict, it must include an avatar field.<br/> - When passing a list, it generally corresponds to the multi-bot mode, where each item can receive all the aforementioned values, and each bot’s avatar matches with the position of the bot in the messages. |
+| avatar_image_align   | Literal['top', 'middle', 'bottom']                                               | 'bottom'      | Controls the alignment of the avatar with the messages, default is bottom-aligned.                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| avatar_image_width   | int                                                                              | 45            | The width of the avatar and name.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| flushing_speed       | int                                                                              | 3             | Typewriter speed, values range from 1 - 10, with larger values indicating faster speeds.                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| llm_thinking_presets | list\[dict\]                                                                     | \[\]          | llm thinking link presets, which can convert the output format of llm calling tools into a fixed front-end display format. It needs to be imported from modelscope_studio.Chatbot.llm_thinking_presets, and currently supports: qwen.                                                                                                                                                                                                                                                                                    |
+| custom_components    | dict\[str, CustomComponentDict\] CustomComponentDict is defined below            | None          | Allows users to define custom tags and control tag rendering styles and trigger Python events through JS.                                                                                                                                                                                                                                                                                                                                                                                                                |
 
 **Definition of CustomComponent is as follows:**
 
@@ -137,7 +122,7 @@ See <tab-link component-tab="Markdown">Markdown Built-in Custom Tags</tab-link>
 
 ### event listeners
 
-| Event                          | Description                                                                                                                                                                                                                                                                                                                                                                                                   |
-| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `mgr.Chatbot.flushed(fn, ···)` | Triggered when the typewriter effect ends. EventData is: <br/> - index: The index tuple of the current message.<br/> - value: The current message value.                                                                                                                                                                                                                                                      |
-| `mgr.Chatbot.custom(fn, ···)`  | Triggered when a custom tag event occurs. EventData is: <br/> - index: The index tuple of the current message ([message index, user group(index 0) or bot group(index 1), user/bot group index]).<br/> - tag: The current tag that triggered the event.<br/> - tag_index: The index of the current triggered tag, re-calculated based on the message’s index tuple.<br/> - value: The custom value passed in. |
+| Event                          | Description                                                                                                                                                                                                                                                                                                                      |
+| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `mgr.Chatbot.flushed(fn, ···)` | Triggered when the typewriter effect ends. EventData is: <br/> - index: The index tuple of the current message.<br/> - value: The current message value.                                                                                                                                                                         |
+| `mgr.Chatbot.custom(fn, ···)`  | Triggered when a custom tag event occurs. EventData is: <br/> - index: The index tuple of the previous message.<br/> - tag: The current tag that triggered the event.<br/> - tag_index: The index of the current triggered tag, re-calculated based on the index tuple of the message.<br/> - value: The custom value passed in. |

components/{antd/auto_complete → Chatbot}/app.py

@@ -1,4 +1,4 @@
-from helper.Docs import Docs
+from components.Docs import Docs
 
 docs = Docs(__file__)
 

components/{legacy/Chatbot → Chatbot}/demos/accordion.py

@@ -1,14 +1,12 @@
 import os
 
 import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
-from modelscope_studio.components.legacy.Chatbot.llm_thinking_presets import \
-  qwen
+import modelscope_studio as mgr
+from modelscope_studio.components.Chatbot.llm_thinking_presets import qwen
 
 
 def resolve_assets(relative_path):
-    return os.path.join(os.path.dirname(__file__), "../../resources",
+    return os.path.join(os.path.dirname(__file__), "../resources",
                         relative_path)
 
 
@@ -17,13 +15,11 @@ conversation = [
         None, {
             "text": f"""
 Use accordion tag:
-
 <accordion title="Using tool">
 
 ```json
 {{"text": "glorious weather", "resolution": "1024*1024"}}
 ```
-
 </accordion>
 
 Qwen preset:
@@ -40,7 +36,7 @@ Observation: <result>「Any md content will be displayed in the drop-down box wh
     ],
 ]
 
-with gr.Blocks() as demo, ms.Application():
+with gr.Blocks() as demo:
     mgr.Chatbot(
         value=conversation,
         llm_thinking_presets=[qwen()],

components/{legacy/Chatbot → Chatbot}/demos/basic.py

@@ -2,8 +2,7 @@ import os
 import time
 
 import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
+import modelscope_studio as mgr
 
 conversation = [
     [
@@ -31,18 +30,18 @@ def flushed():
     return gr.update(interactive=True)
 
 
-with gr.Blocks() as demo, ms.Application():
+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")
-                         }
+            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,
     )

components/{legacy/Chatbot → Chatbot}/demos/message_config.py

@@ -1,8 +1,7 @@
 import time
 
 import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
+import modelscope_studio as mgr
 
 
 def submit(_chatbot):
@@ -26,7 +25,7 @@ def submit(_chatbot):
     yield _chatbot
 
 
-with gr.Blocks() as demo, ms.Application():
+with gr.Blocks() as demo:
     chatbot = mgr.Chatbot(height=600, )
     button = gr.Button("Submit")
     button.click(fn=submit, inputs=[chatbot], outputs=[chatbot])

components/{legacy/Chatbot → Chatbot}/demos/multi_bots.py

@@ -2,12 +2,11 @@ import os
 import time
 
 import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
+import modelscope_studio as mgr
 
 
 def resolve_assets(relative_path):
-    return os.path.join(os.path.dirname(__file__), "../../resources",
+    return os.path.join(os.path.dirname(__file__), "../resources",
                         relative_path)
 
 
@@ -58,7 +57,7 @@ def flushed():
     return gr.update(interactive=True)
 
 
-with gr.Blocks() as demo, ms.Application():
+with gr.Blocks() as demo:
     chatbot = mgr.Chatbot(
         value=conversation,
         avatar_image_width=40,

components/{legacy/Chatbot → Chatbot}/demos/multimodal.py

@@ -1,12 +1,11 @@
 import os
 
 import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
+import modelscope_studio as mgr
 
 
 def resolve_assets(relative_path):
-    return os.path.join(os.path.dirname(__file__), "../../resources",
+    return os.path.join(os.path.dirname(__file__), "../resources",
                         relative_path)
 
 
@@ -20,6 +19,10 @@ Image
 
 <img src="{resolve_assets("user.jpeg")}" />
 
+Video
+
+<video src="{resolve_assets("dog.mp4")}"></video>
+
 Audio
 
 <audio src="{resolve_assets("audio.wav")}"></audio>
@@ -29,7 +32,7 @@ Audio
     ],
 ]
 
-with gr.Blocks() as demo, ms.Application():
+with gr.Blocks() as demo:
     mgr.Chatbot(
         value=conversation,
         height=600,

components/{legacy/Chatbot → Chatbot}/demos/select-box.py

@@ -1,8 +1,7 @@
 import json
 
 import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
+import modelscope_studio as mgr
 
 # `label` will display on the page, and `value` is the actual selected value.
 options = [{"label": "A", "value": "a"}, "b", "c"]
@@ -11,9 +10,9 @@ 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>
+Multiple Select：<select-box type="checkbox" options='{json.dumps(options)}' select-once submit-text="Submit"></select-box>
 
-Vertical Direction:
+Vertical Direction：
 
 <select-box direction="vertical" type="checkbox" options='{json.dumps(options)}' select-once submit-text="Submit"></select-box>
 
@@ -35,7 +34,7 @@ def fn(data: gr.EventData):
     print(data._data)
 
 
-with gr.Blocks() as demo, ms.Application():
+with gr.Blocks() as demo:
     chatbot = mgr.Chatbot(
         value=conversation,
         flushing=False,

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;
+        // Use cc.dispatch to trigger events.
+        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/{legacy/Docs.py → Docs.py}

@@ -3,8 +3,7 @@ import re
 from typing import Callable
 
 import gradio as gr
-import modelscope_studio.components.legacy as mgr
-from helper.env import is_modelscope_studio
+import modelscope_studio as mgr
 
 from .parse_markdown import parse_markdown
 
@@ -49,7 +48,7 @@ def get_demo_modules(file_path: str):
     demos = [
         demo for demo in list_demos(
             os.path.join(os.path.dirname(file_path), "demos"))
-        if demo.endswith(".py") and not demo.startswith("__")
+        if demo.endswith(".py")
     ]
     demo_modules = {}
     for demo in demos:
@@ -62,6 +61,9 @@ def get_demo_modules(file_path: str):
     return demo_modules
 
 
+is_modelscope_studio = os.getenv('MODELSCOPE_ENVIRONMENT') == 'studio'
+
+
 class Docs:
 
     def __init__(self, file_path: str, markdown_files: list = None):
@@ -90,41 +92,23 @@ class Docs:
                   "r") as f:
             return f.read()
 
-    def render_demo(self,
-                    demo_name,
-                    code_position='left',
-                    prefix='',
-                    suffix=''):
+    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):
-
-            def render_code():
-                mgr.Markdown(f"""{prefix}
+            with gr.Row():
+                with gr.Column():
+                    mgr.Markdown(f"""
+{prefix}
 ````python
 {content}
 ````
-{suffix}""",
-                             header_links=True,
-                             custom_components=custom_components)
-
-            if code_position == 'top':
-                with gr.Row():
-                    with gr.Column():
-                        render_code()
-            with gr.Row():
-                if code_position == 'left':
-                    with gr.Column():
-                        render_code()
+{suffix}
+""",
+                                 header_links=True,
+                                 custom_components=custom_components)
                 with gr.Column():
                     module.demo.render()
-                if code_position == 'right':
-                    with gr.Column():
-                        render_code()
-            if code_position == 'bottom':
-                with gr.Row():
-                    with gr.Column():
-                        render_code()
 
     def render_markdown(self,
                         markdown_file,
@@ -136,21 +120,19 @@ class Docs:
             if item["type"] == "text":
                 md = mgr.Markdown(item["value"],
                                   header_links=True,
-                                  custom_components=custom_components,
-                                  preview=False)
+                                  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"],
-                                 code_position=item["code_position"])
+                                 suffix=item["suffix"])
 
     def render(self, components_tabs=None):
 
         def tab_link_click(data: gr.EventData):
-            tab: str = data._data.get("value", {}).get("tab", '')
+            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)}

components/{legacy/Markdown → Markdown}/README-zh_CN.md

@@ -2,9 +2,8 @@
 
 升级版的 gradio Markdown。
 
-- 支持输出多模态内容（音频、视频、图片、文本）
-- 内置标签（chart、select-box、accordion）
-- 支持自定义渲染组件，并与 Python 事件交互
+- 支持输出多模态内容（音频、视频、语音、文件、文本）
+- 支持自定义渲染组件，并与 Python 侧事件交互
 
 ## 如何使用
 
@@ -28,12 +27,6 @@
 
 <demo name="select-box"></demo>
 
-### 支持图表展示
-
-在返回的内容中加入 `chart` 标签，更多用法详见 <tab-link tab="custom_tags/chart">chart</tab-link>
-
-<demo name="chart"></demo>
-
 ### 自定义标签（高阶用法，需要了解前端知识）
 
 <demo name="custom-tag"></demo>
@@ -49,13 +42,13 @@ template只能做简单的变量替换，如果想要引入更多自定义的行
 custom_select.js
 
 ```js
-<file src="../resources/custom_components/custom_select.js"></file>
+<file src="./resources/custom_components/custom_select.js"></file>
 ```
 
 </demo-suffix>
 </demo>
 
-#### 与 Python 交互
+#### 与 Python 侧交互
 
 在 js 中可以使用`cc.dispatch`触发 Python 侧监听的`custom`事件，以前面的custom_select.js为例，我们在前端调用了`cc.dispatch(options[i])`，则会向 Python 侧同时发送通知。
 
@@ -67,15 +60,13 @@ custom_select.js
 
 ### 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 事件。      |
+| 属性              | 类型                                                            | 默认值 | 描述                                                                        |
+| ----------------- | --------------------------------------------------------------- | ------ | --------------------------------------------------------------------------- |
+| enable_base64     | bool                                                            | False  | 是否支持渲染的内容为 base64，因为直接渲染 base64 有安全问题，默认为 False。 |
+| preview           | bool                                                            | True   | 是否开启图片预览功能                                                        |
+| custom_components | dict\[str, CustomComponentDict\] CustomComponentDict 定义见下方 | None   | 支持用户定义自定义标签，并通过 js 控制标签渲染样式与触发 python 事件。      |
 
-**CustomComponentDict 定义如下**
+**CustomComponent 定义如下**
 
 ```python
 class CustomComponentDict(TypedDict):
@@ -88,10 +79,9 @@ class CustomComponentDict(TypedDict):
 
 - <tab-link tab="custom_tags/select-box">select-box</tab-link>
 - <tab-link tab="custom_tags/accordion">accordion</tab-link>
-- <tab-link tab="custom_tags/chart">chart</tab-link>
 
 ### event listeners
 
-| 事件                           | 描述                                                                                                             |
-| ------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
-| `mgr.Markdown.custom(fn, ···)` | 自定义标签触发事件时触发，EventData 为：<br/> - tag_index：当前触发标签的 index。<br/> - value：自定义传入的值。 |
+| 事件                           | 描述                                                                                                                                                                                                                                                                                                                           |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `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/{legacy/Markdown → Markdown}/README.md

@@ -2,9 +2,8 @@
 
 Upgraded gradio Markdown.
 
-- Supports output of multimodal content (audio, video, image, text)
-- Built-in tags (chart, select-box, accordion)
-- Supports custom rendering components and interaction with Python events
+- Supports output of multimodal content (audio, video, voice, files, text)
+- Supports custom rendering components and interaction with Python-side events
 
 ## How to Use
 
@@ -18,24 +17,19 @@ Upgraded gradio Markdown.
 
 ### Support for Accordion Content Display
 
-Include the `accordion` tag in the returned content. For more usage details, see <tab-link tab="custom_tags/accordion">accordion</tab-link>
+Include the `accordion` tag in the returned content for more usage details, see <tab-link tab="custom_tags/accordion">accordion</tab-link>
 <demo name="accordion"></demo>
 
 ### Support for User Selection Interaction
 
-Include the `select-box` tag in the returned content. For more usage details, see <tab-link tab="custom_tags/select-box">select-box</tab-link>
+Include the `select-box` tag in the returned content for more usage details, see <tab-link tab="custom_tags/select-box">select-box</tab-link>
 <demo name="select-box"></demo>
 
-### Support for Chart Display
-
-Include the `chart` tag in the returned content. For more usage details, see <tab-link tab="custom_tags/chart">chart</tab-link>
-<demo name="chart"></demo>
-
 ### Custom Tags (Advanced Usage, Requires Frontend Knowledge)
 
 <demo name="custom-tag"></demo>
 
-#### Import JS
+#### Importing js
 
 <demo name="custom-tag2"></demo>
 The template can only perform simple variable replacements. If you want to introduce more custom behaviors, such as conditional judgments, loop rendering, etc., please use js to control the element for processing. Here is a simple example:
@@ -44,13 +38,13 @@ The template can only perform simple variable replacements. If you want to intro
 custom_select.js
 
 ```js
-<file src="../resources/custom_components/custom_select.js"></file>
+<file src="./resources/custom_components/custom_select.js"></file>
 ```
 
 </demo-suffix>
 </demo>
 
-#### Interaction with Python
+#### Interaction with Python Side
 
 In js, you can use `cc.dispatch` to trigger the `custom` event listened to on the Python side. Taking the previous custom_select.js as an example, when we call `cc.dispatch(options[i])` on the frontend, a notification will be sent to the Python side simultaneously.
 <demo name="custom-tag4"></demo>
@@ -61,14 +55,12 @@ The following APIs are additional extended parameters beyond the original gradio
 
 ### props
 
-| Attribute                     | Type                                                                | Default Value | Description                                                                                                |
-| ----------------------------- | ------------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------- |
-| enable_base64                 | bool                                                                | False         | Whether to support rendering content as base64, since rendering base64 is unsafe, the default is False.    |
-| preview                       | bool                                                                | True          | Whether to enable image preview functionality.                                                             |
-| enable_latex                  | bool                                                                | True          | Whether to enable LaTeX rendering.                                                                         |
-| latex_single_dollar_delimiter | bool                                                                | True          | Whe ther to enable single dollar delimiter `$` for LaTeX rendering.                                        |
-| custom_components             | Dict[str, CustomComponentDict] CustomComponentDict definition below | None          | Supports user-defined custom tags and controls tag rendering styles and triggers Python events through js. |
-|                               |
+| Attribute         | Type                                                                | Default Value | Description                                                                                                                     |
+| ----------------- | ------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| enable_base64     | bool                                                                | False         | Whether to support rendering content as base64, since rendering base64 directly can pose security issues, the default is False. |
+| preview           | bool                                                                | True          | Whether to enable image preview functionality.                                                                                  |
+| custom_components | dict[str, CustomComponentDict] CustomComponentDict definition below | None          | Supports user-defined custom tags and controls tag rendering styles and triggers Python events through js.                      |
+|  |
 
 **CustomComponent definition is as follows:**
 
@@ -83,10 +75,9 @@ class CustomComponentDict(TypedDict):
 
 - <tab-link tab="custom_tags/select-box">select-box</tab-link>
 - <tab-link tab="custom_tags/accordion">accordion</tab-link>
-- <tab-link tab="custom_tags/chart">chart</tab-link>
 
 ### Event Listeners
 
-| Event                          | Description                                                                                                                                                                                                        |
-| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `mgr.Markdown.custom(fn, ···)` | Triggered when a custom tag event occurs. EventData is: <br/> - tag: The current tag that triggered the event.<br/> - tag_index: The index of the current triggered tag.<br/> - value: The custom value passed in. |
+| Event                          | Description                                                                                                                                                                                                                                                                                                                                                                                                   |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `mgr.Markdown.custom(fn, ···)` | Triggered when a custom tag event occurs. EventData is: <br/> - index: The index tuple of the current message ([message index, user group(index 0) or bot group(index 1), user/bot group index]).<br/> - tag: The current tag that triggered the event.<br/> - tag_index: The index of the current triggered tag, re-calculated based on the message’s index tuple.<br/> - value: The custom value passed in. |

components/{legacy/Markdown → Markdown}/app.py

@@ -1,6 +1,6 @@
 import os
 
-from components.legacy.Docs import Docs
+from components.Docs import Docs
 
 
 def resolve(relative_path: str):

components/{legacy/Markdown → Markdown}/demos/accordion.py

@@ -1,25 +1,24 @@
 import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
+import modelscope_studio as mgr
 
-with gr.Blocks() as demo, ms.Application():
-    mgr.Markdown("""
+with gr.Blocks() as demo:
+    mgr.Markdown(f"""
 <accordion title="Using tool">
 
 ```json
-{"text": "glorious weather", "resolution": "1024*1024"}
+{{"text": "glorious weather", "resolution": "1024*1024"}}
 ```
 
 </accordion>
 
-Use `::accordion-title` to support markdown:
+Use `::accordion-title` to support markdown：
 
 <accordion>
 
 ::accordion-title[Using `tool`]
 
 ```json
-{"text": "glorious weather", "resolution": "1024*1024"}
+{{"text": "glorious weather", "resolution": "1024*1024"}}
 ```
 </accordion>
 """)

components/{legacy/Markdown → Markdown}/demos/basic.py

@@ -1,8 +1,7 @@
 import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
+import modelscope_studio as mgr
 
-with gr.Blocks() as demo, ms.Application():
+with gr.Blocks() as demo:
     mgr.Markdown(
         "This _example_ was **written** in [Markdown](https://en.wikipedia.org/wiki/Markdown)\n"
     )

components/{legacy/Markdown → Markdown}/demos/custom-tag.py

@@ -1,10 +1,9 @@
 import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
+import modelscope_studio as mgr
 
-with gr.Blocks() as demo, ms.Application():
+with gr.Blocks() as demo:
     mgr.Markdown(
-        """
+        f"""
 custom tag:<custom-tag value="aaa"></custom-tag>
 """,
         custom_components={
@@ -12,7 +11,7 @@ custom tag:<custom-tag value="aaa"></custom-tag>
             "custom-tag": {
                 # The tag props.
                 "props": ["value"],
-                # The tag template, use `{prop}` as placeholder.
+                # The tag template, use `{prop}` as placeholder。
                 "template": "<div>{value}</div>"
             }
         })

components/{legacy/Markdown → Markdown}/demos/custom-tag2.py

@@ -1,10 +1,9 @@
 import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
+import modelscope_studio as mgr
 
-with gr.Blocks() as demo, ms.Application():
+with gr.Blocks() as demo:
     mgr.Markdown(
-        """
+        f"""
 custom tag:<custom-tag value="aaa"></custom-tag>
 """,
         custom_components={
@@ -15,29 +14,12 @@ custom tag:<custom-tag value="aaa"></custom-tag>
                 # The `js` property should be a string containing a JavaScript Function.
                 "js":
                 """
-(props, cc, { el, onMount, onUpdate }) => {
-    // `onMount` will be called after the template first rendered
+(props, cc, { el, onMount }) => {
+    // `onMount` will be called after the template rendered
     onMount(() => {
       // `el` is the container element
       console.log(el)
-
-      // the return function will be called when the component is being unmounted
-      return () => {
-        console.log('unmount')
-      }
-    })
-
-    // `onUpdate` will be called when the props changed
-    onUpdate(() => {
-      console.log(props)
     })
-    onUpdate(
-      () => {
-        console.log(props, 'after mount')
-      },
-      // By default, the callback will not be called when the component is being mounted. Set `callAfterMount` to true to enable it.
-      { callAfterMount: true }
-    )
     console.log(props.children) // By default, `props` will be passed a property named `children`, which can get the content in the tag, such as 'xx' in '<tag>xx</tag>'.
 
     // The return value will be merged with `props` and passed to the template.

components/{legacy/Markdown → Markdown}/demos/custom-tag3.py

@@ -2,21 +2,20 @@ import json
 import os
 
 import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
+import modelscope_studio as mgr
 
 options = ["a", "b", "c"]
 
 
 def resolve_assets(relative_path):
-    return os.path.join(os.path.dirname(__file__), "../../resources",
+    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, ms.Application():
+with gr.Blocks() as demo:
     mgr.Markdown(value=f"""
 custom tag: <custom-select options='{json.dumps(options)}'></custom-select>
 """,

components/{legacy/Markdown → Markdown}/demos/custom-tag4.py

@@ -2,14 +2,13 @@ import json
 import os
 
 import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
+import modelscope_studio as mgr
 
 options = ["a", "b", "c"]
 
 
 def resolve_assets(relative_path):
-    return os.path.join(os.path.dirname(__file__), "../../resources",
+    return os.path.join(os.path.dirname(__file__), "../resources",
                         relative_path)
 
 
@@ -22,7 +21,7 @@ def fn(data: gr.EventData):
     print("custom value", data._data)
 
 
-with gr.Blocks() as demo, ms.Application():
+with gr.Blocks() as demo:
     md = mgr.Markdown(value=f"""
 custom tag: <custom-select options='{json.dumps(options)}'></custom-select>
 """,

components/{legacy/Markdown → Markdown}/demos/custom_tags/accordion/accordion-title.py

@@ -1,15 +1,14 @@
 import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
+import modelscope_studio as mgr
 
-with gr.Blocks() as demo, ms.Application():
-    mgr.Markdown("""
+with gr.Blocks() as demo:
+    mgr.Markdown(f"""
 <accordion>
 
 ::accordion-title[Using `tool`]
 
 ```json
-{"text": "glorious weather", "resolution": "1024*1024"}
+{{"text": "glorious weather", "resolution": "1024*1024"}}
 ```
 
 </accordion>

components/{legacy/Markdown → Markdown}/demos/custom_tags/accordion/basic.py

@@ -1,13 +1,12 @@
 import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
+import modelscope_studio as mgr
 
-with gr.Blocks() as demo, ms.Application():
-    mgr.Markdown("""
+with gr.Blocks() as demo:
+    mgr.Markdown(f"""
 <accordion title="Using tool">
 
 ```json
-{"text": "glorious weather", "resolution": "1024*1024"}
+{{"text": "glorious weather", "resolution": "1024*1024"}}
 ```
 
 </accordion>

components/{legacy/Markdown → Markdown}/demos/custom_tags/select-box/basic.py

@@ -1,18 +1,17 @@
 import json
 
 import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
+import modelscope_studio as mgr
 
 options = [{"label": "A", "value": "a"}, "b", "c"]
 
-with gr.Blocks() as demo, ms.Application():
+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>
+Multiple Select：<select-box type="checkbox" options='{json.dumps(options)}' select-once submit-text="Submit"></select-box>
 
-Vertical Direction:
+Vertical Direction：
 
 <select-box direction="vertical" type="checkbox" options='{json.dumps(options)}' select-once submit-text="Submit"></select-box>
 """, )