diff --git a/.gitattributes b/.gitattributes
index dcee3a14925171a6399b9375eadead6a52f07689..4b6129831e003b087731355e9c5756654e9063c1 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -33,4 +33,3 @@ saved_model/**/* 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
-*.mp4 filter=lfs diff=lfs merge=lfs -text
diff --git a/Dockerfile b/Dockerfile
deleted file mode 100644
index 02d9fbef0166f776e36177b00c1e0a9e0dd526ff..0000000000000000000000000000000000000000
--- a/Dockerfile
+++ /dev/null
@@ -1,15 +0,0 @@
-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"]
diff --git a/README-zh_CN.md b/README-zh_CN.md
index fa6b26947c86adcca54ec550368e67c989f4e0d8..86de51792d9168bb466ba75e93bd6996d6964fdf 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -1,33 +1,54 @@
-<h1>ModelScope Studio</h1>
+# 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;">
+ <img src="https://img.alicdn.com/imgextra/i1/O1CN01OmXst929933KJd7og_!!6000000008024-55-tps-2016-703.svg" height="60" style="vertical-align: middle;">
<p>
<p align="center">
-<a href="https://github.com/modelscope/modelscope-studio">GitHub</a> | 🤖 <a href="https://modelscope.cn/studios/modelscope/modelscope-studio/summary">ModelScope Studio</a> ｜ 🤗 <a href="https://huggingface.co/spaces/modelscope/modelscope-studio">Hugging Face Space</a>
+<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 4.x 的扩展组件库，致力于服务于 ModelScope 创空间中对于 gradio 应用的各类扩展需求，目前主要聚集在对话场景增强、多模态场景以及一些其他垂直场景支持。
+`modelscope_studio`是一个基于 Gradio 的三方组件库，为开发者提供更定制化的界面搭建能力和更丰富的组件使用形式。
-## Install
+目前支持的 UI 库：
+
+- [Ant Design](https://ant.design/)
+
+## 何时使用
+
+比起 Gradio 自身的组件，`modelscope_studio`更加注重页面布局和组件的灵活性，如果您想要构建更漂亮的用户界面，我们非常推荐您使用`modelscope_studio`。
+
+然而，当您的应用需要 Gradio 在 Python 端更多地处理内置数据时，`modelscope_studio`的组件可能不是最好的选择，但是不用担心，它可以很好地与已有的 Gradio 组件相结合，您仍然可以使用`modelscope_studio`来优化您的应用。
+
+## 依赖
+
+- Gradio >= 4.0
+
+## 安装
```sh
pip install modelscope_studio
```
-## API
+## 示例
+
+<demo name="example"></demo>
+
+## 迁移到 1.0
-- <tab-link component-tab="API">load</tab-link>
+如果您在之前使用了`modelscope_studio`的组件，并且想要在新版本中继续使用。不需要对原有组件做任何修改，只需要在外层引入`ms.Application`即可。
-## Components
+```python
+import gradio as gr
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.legacy as mgr
-- <tab-link component-tab="Chatbot">Chatbot</tab-link>
-- <tab-link component-tab="MultimodalInput">MultimodalInput</tab-link>
-- <tab-link component-tab="Markdown">Markdown</tab-link>
-- <tab-link component-tab="WaterfallGallery">WaterfallGallery</tab-link>
-- <tab-link component-tab="Lifecycle">Lifecycle</tab-link>
-- <tab-link component-tab="Flow">Flow</tab-link>
+with gr.Blocks() as demo:
+ with ms.Application():
+ mgr.Chatbot()
+
+demo.launch()
+```
diff --git a/README.md b/README.md
index d66732f798a89c38dd1b735e504479ada60f47e4..e47a86123dc92a743a44cc1933d0f415ab62732a 100644
--- a/README.md
+++ b/README.md
@@ -1,20 +1,21 @@
---
tags:
- gradio-custom-component
- - Chatbot
- - MutilmodalInput
- - Markdown
- - gradio-template-Chatbot
- - gradio-template-Markdown
+ - component library
+ - Ant Design
+ - modelscope-studio
title: modelscope-studio
colorFrom: blue
colorTo: gray
-sdk: docker
+short_description: A third-party component library based on Gradio.
+sdk: gradio
pinned: false
+header: mini
+app_file: app.py
license: apache-2.0
---
-<h1>ModelScope Studio</h1>
+# ModelScope Studio
<p align="center">
<img src="https://modelscope.oss-cn-beijing.aliyuncs.com/modelscope.gif" height="60" style="vertical-align: middle;"/>
@@ -25,25 +26,46 @@ license: apache-2.0
<p>
<p align="center">
-<a href="https://github.com/modelscope/modelscope-studio">GitHub</a> | 🤖 <a href="https://modelscope.cn/studios/modelscope/modelscope-studio/summary">ModelScope Studio</a> ｜ 🤗 <a href="https://huggingface.co/spaces/modelscope/modelscope-studio">Hugging Face Space</a>
+<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 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.
+`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.
-## Install
+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
```sh
pip install modelscope_studio
```
-## API
+## Examples
+
+<demo name="example"></demo>
+
+## Migration to 1.0
-- <tab-link component-tab="API">load</tab-link>
+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
-- <tab-link component-tab="Chatbot">Chatbot</tab-link>
-- <tab-link component-tab="MultimodalInput">MultimodalInput</tab-link>
-- <tab-link component-tab="Markdown">Markdown</tab-link>
-- <tab-link component-tab="Lifecycle">Lifecycle</tab-link>
-- <tab-link component-tab="WaterfallGallery">WaterfallGallery</tab-link>
-- <tab-link component-tab="Flow">Flow</tab-link>
+with gr.Blocks() as demo:
+ with ms.Application():
+ mgr.Chatbot()
+
+demo.launch()
+```
diff --git a/api/app.py b/api/app.py
index 85d6e013ef392b6d67f2a963eadf87dc6c3b5e91..6f651d0bf3117ec127ca067c1c710df74910ddcf 100644
--- a/api/app.py
+++ b/api/app.py
@@ -1,6 +1,6 @@
import os
-from components.Docs import Docs
+from components.legacy.Docs import Docs
def resolve(relative_path: str):
diff --git a/app.py b/app.py
index 1d93e6b40e04a12732eadb1472f4fef93d1c286a..818360e5021dcddda67f8b88b05f3fdde3853df2 100644
--- a/app.py
+++ b/app.py
@@ -1,30 +1,422 @@
-import gradio as gr
-from api.app import docs as api_docs
-from components.Chatbot.app import docs as chatbot_docs
-from components.Docs import Docs
-from components.Flow.app import docs as flow_docs
-from components.Lifecycle.app import docs as lifecycle_docs
-from components.Markdown.app import docs as markdown_docs
-from components.MultimodalInput.app import docs as multimodel_input_docs
-from components.WaterfallGallery.app import docs as waterfall_gallery_docs
-
-readme_docs = Docs(__file__)
-
-docs = [
- ["Quick Start", readme_docs],
- ["API", api_docs],
- ["Chatbot", chatbot_docs],
- ["MultimodalInput", multimodel_input_docs],
- ["Markdown", markdown_docs],
- ["Lifecycle", lifecycle_docs],
- ["WaterfallGallery", waterfall_gallery_docs],
- ["Flow", flow_docs],
+import os
+from typing import Literal
+
+from helper.Docs import Docs
+from helper.env import is_modelscope_studio
+from helper.Site import Site
+from legacy_app import legacy_demo
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def get_text(text: str, cn_text: str):
+ if is_modelscope_studio:
+ return cn_text
+ return text
+
+
+def get_docs(file_path: str, type: Literal["antd", "base"]):
+ import importlib.util
+
+ components = []
+ components_dir = os.path.join(os.path.dirname(file_path), "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
+
+
+index_docs = {"modelscope_studio": Docs(__file__)}
+
+base_docs = get_docs(__file__, "base")
+antd_docs = get_docs(__file__, "antd")
+
+default_active_tab = "index"
+index_menu_items = [{
+ "label": get_text("ModelScope-Studio", "ModelScope-Studio"),
+ "key": "modelscope_studio"
+}]
+
+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":
+ 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"
+ }]
+}]
+
+
+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)
+ ms.Span('✖️')
+ antd.Image(os.path.join(os.path.dirname(__file__),
+ "./resources/gradio.png"),
+ preview=False,
+ height=40)
+
+
+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": "modelscope_studio",
+ "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("Version 0.x", "0.x 版本"),
+ "key": "legacy",
+ "content": legacy_demo
+ },
]
-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)
+site = Site(
+ tabs=tabs,
+ docs={
+ # match the key of tabs
+ "index": index_docs,
+ "antd": antd_docs,
+ "base": base_docs
+ },
+ default_active_tab=default_active_tab,
+ logo=logo)
+
+demo = site.render()
-demo.queue().launch()
+if __name__ == "__main__":
+ demo.queue().launch(ssr_mode=False)
diff --git a/components/WaterfallGallery/app.py b/components/WaterfallGallery/app.py
deleted file mode 100644
index 77372ef291165f2cf77a8944f3f8b18773972190..0000000000000000000000000000000000000000
--- a/components/WaterfallGallery/app.py
+++ /dev/null
@@ -1,6 +0,0 @@
-from components.Docs import Docs
-
-docs = Docs(__file__)
-
-if __name__ == "__main__":
- docs.render().queue().launch()
diff --git a/components/antd/affix/README-zh_CN.md b/components/antd/affix/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..e9742b478122d22fd70a6ae5d3553ae72dfeb756
--- /dev/null
+++ b/components/antd/affix/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Affix
+
+Stick an element to the viewport. See [Ant Design](https://ant.design/components/affix/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="container_to_scroll" title="Container to scroll"></demo>
diff --git a/components/antd/affix/README.md b/components/antd/affix/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..e9742b478122d22fd70a6ae5d3553ae72dfeb756
--- /dev/null
+++ b/components/antd/affix/README.md
@@ -0,0 +1,8 @@
+# Affix
+
+Stick an element to the viewport. See [Ant Design](https://ant.design/components/affix/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="container_to_scroll" title="Container to scroll"></demo>
diff --git a/components/Flow/app.py b/components/antd/affix/app.py
similarity index 72%
rename from components/Flow/app.py
rename to components/antd/affix/app.py
index 77372ef291165f2cf77a8944f3f8b18773972190..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9 100644
--- a/components/Flow/app.py
+++ b/components/antd/affix/app.py
@@ -1,4 +1,4 @@
-from components.Docs import Docs
+from helper.Docs import Docs
docs = Docs(__file__)
diff --git a/components/antd/affix/demos/basic.py b/components/antd/affix/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..e6cfdf613bebb27ba57d5daa88d08bfe8b36a0b6
--- /dev/null
+++ b/components/antd/affix/demos/basic.py
@@ -0,0 +1,16 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Affix(offset_top=100):
+ antd.Button("Affix to top", type="primary")
+ antd.Divider()
+ with antd.Affix(offset_bottom=100):
+ antd.Button("Affix to bottom", type="primary")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/affix/demos/container_to_scroll.py b/components/antd/affix/demos/container_to_scroll.py
new file mode 100644
index 0000000000000000000000000000000000000000..f957d57a683e405d94a01b1c02a8d85cba26473a
--- /dev/null
+++ b/components/antd/affix/demos/container_to_scroll.py
@@ -0,0 +1,27 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with ms.Div(elem_id="affix_container",
+ elem_style={
+ "width": '100%',
+ "height": 100,
+ "overflow": 'auto',
+ "boxShadow": '0 0 0 1px #1677ff',
+ "scrollbarWidth": 'thin',
+ "scrollbarGutter": 'stable',
+ }):
+ with ms.Div(elem_style=dict(width="100%", height=1000)):
+ with antd.Affix(
+ get_target=
+ "() => document.querySelector('#affix_container')"
+ ):
+ antd.Button("Fixed at the top of container",
+ type="primary")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/alert/README-zh_CN.md b/components/antd/alert/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..45047d8f468d60bb2f71ee65b30e6fb155321925
--- /dev/null
+++ b/components/antd/alert/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Alert
+
+Display warning messages that require attention. See [Ant Design](https://ant.design/components/alert/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/alert/README.md b/components/antd/alert/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..45047d8f468d60bb2f71ee65b30e6fb155321925
--- /dev/null
+++ b/components/antd/alert/README.md
@@ -0,0 +1,7 @@
+# Alert
+
+Display warning messages that require attention. See [Ant Design](https://ant.design/components/alert/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/Lifecycle/app.py b/components/antd/alert/app.py
similarity index 72%
rename from components/Lifecycle/app.py
rename to components/antd/alert/app.py
index 77372ef291165f2cf77a8944f3f8b18773972190..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9 100644
--- a/components/Lifecycle/app.py
+++ b/components/antd/alert/app.py
@@ -1,4 +1,4 @@
-from components.Docs import Docs
+from helper.Docs import Docs
docs = Docs(__file__)
diff --git a/components/antd/alert/demos/basic.py b/components/antd/alert/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..4501354064569043bdce01e3d4f5a2891c0c4bbc
--- /dev/null
+++ b/components/antd/alert/demos/basic.py
@@ -0,0 +1,40 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [{
+ "message": "Success Text",
+ "description":
+ "Success Description Success Description Success Description Success Description",
+ "type": "success"
+}, {
+ "message": "Info Text",
+ "description":
+ "Info Description Info Description Info Description Info Description",
+ "type": "info"
+}, {
+ "message": "Warning Text",
+ "description":
+ "Warning Description Warning Description Warning Description Warning Description",
+ "type": "warning"
+}, {
+ "message": "Error Text",
+ "description":
+ "Error Description Error Description Error Description Error Description",
+ "type": "error"
+}]
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(direction="vertical"):
+ for item in data:
+ antd.Alert(message=item["message"],
+ description=item["description"],
+ type=item["type"],
+ closable=True,
+ show_icon=True)
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/anchor/README-zh_CN.md b/components/antd/anchor/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..24d87d88b2f7f685a65f42d893dda2e2534e8503
--- /dev/null
+++ b/components/antd/anchor/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Anchor
+
+Hyperlinks to scroll on one page. See [Ant Design](https://ant.design/components/anchor/) for more information.
+
+## Examples
+
+<demo name="basic" fixed></demo>
diff --git a/components/antd/anchor/README.md b/components/antd/anchor/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..24d87d88b2f7f685a65f42d893dda2e2534e8503
--- /dev/null
+++ b/components/antd/anchor/README.md
@@ -0,0 +1,7 @@
+# Anchor
+
+Hyperlinks to scroll on one page. See [Ant Design](https://ant.design/components/anchor/) for more information.
+
+## Examples
+
+<demo name="basic" fixed></demo>
diff --git a/components/MultimodalInput/app.py b/components/antd/anchor/app.py
similarity index 72%
rename from components/MultimodalInput/app.py
rename to components/antd/anchor/app.py
index 77372ef291165f2cf77a8944f3f8b18773972190..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9 100644
--- a/components/MultimodalInput/app.py
+++ b/components/antd/anchor/app.py
@@ -1,4 +1,4 @@
-from components.Docs import Docs
+from helper.Docs import Docs
docs = Docs(__file__)
diff --git a/components/antd/anchor/demos/basic.py b/components/antd/anchor/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..b5f7ab02dd3415e0dc200e7cc43a63e3cd40275a
--- /dev/null
+++ b/components/antd/anchor/demos/basic.py
@@ -0,0 +1,38 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Row():
+ with antd.Col(span=16):
+ with ms.Div(elem_style=dict(maxHeight="700px",
+ overflow="auto")):
+ ms.Div(elem_id="part-1",
+ elem_style=dict(
+ height="100vh",
+ background="rgba(255,0,0,0.02)"))
+ ms.Div(elem_id="part-2",
+ elem_style=dict(
+ height="100vh",
+ background="rgba(0,255,0,0.02)"))
+ ms.Div(elem_id="part-3",
+ elem_style=dict(
+ height="100vh",
+ background="rgba(0,0,255,0.02)"))
+ with antd.Col(span=8):
+ with antd.Anchor():
+ with antd.Anchor.Item(href="#part-1", key="part-1"):
+ with ms.Slot("title"):
+ antd.Typography.Title("Part 1")
+ antd.Anchor.Item(title="Part 2",
+ href="#part-2",
+ key="part-2")
+ antd.Anchor.Item(title="Part 3",
+ href="#part-3",
+ key="part-3")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/auto_complete/README-zh_CN.md b/components/antd/auto_complete/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..8c294c7df5740fc8156af865fbc70c55d88c2b4c
--- /dev/null
+++ b/components/antd/auto_complete/README-zh_CN.md
@@ -0,0 +1,8 @@
+# AutoComplete
+
+Autocomplete function of input field. See [Ant Design](https://ant.design/components/auto-complete/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="lookup_patterns" title="Lookup-Patterns"></demo>
diff --git a/components/antd/auto_complete/README.md b/components/antd/auto_complete/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..8c294c7df5740fc8156af865fbc70c55d88c2b4c
--- /dev/null
+++ b/components/antd/auto_complete/README.md
@@ -0,0 +1,8 @@
+# AutoComplete
+
+Autocomplete function of input field. See [Ant Design](https://ant.design/components/auto-complete/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="lookup_patterns" title="Lookup-Patterns"></demo>
diff --git a/components/Chatbot/app.py b/components/antd/auto_complete/app.py
similarity index 72%
rename from components/Chatbot/app.py
rename to components/antd/auto_complete/app.py
index 77372ef291165f2cf77a8944f3f8b18773972190..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9 100644
--- a/components/Chatbot/app.py
+++ b/components/antd/auto_complete/app.py
@@ -1,4 +1,4 @@
-from components.Docs import Docs
+from helper.Docs import Docs
docs = Docs(__file__)
diff --git a/components/antd/auto_complete/demos/basic.py b/components/antd/auto_complete/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..870ef9e184fd7ca162eb0bee0c78a4401742ca3a
--- /dev/null
+++ b/components/antd/auto_complete/demos/basic.py
@@ -0,0 +1,32 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def on_search(e: gr.EventData):
+ text = e._data["payload"][0]
+ domains = ["gmail.com", "163.com", "qq.com"]
+ if not text or "@" in text:
+ return gr.update(options=[])
+ return gr.update(options=[{
+ "value": f"{text}@{domain}",
+ "label": f"{text}@{domain}"
+ } for domain in domains])
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ auto_complete = antd.AutoComplete(placeholder="Typing here...",
+ elem_style=dict(width=200))
+ antd.Divider("Customize Input Component")
+ with antd.AutoComplete() as customize_auto_complete:
+ with ms.Slot("children"):
+ antd.Input.Textarea(placeholder="Typing here...")
+ auto_complete.search(on_search, outputs=[auto_complete])
+ customize_auto_complete.search(on_search,
+ outputs=[customize_auto_complete])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/auto_complete/demos/lookup_patterns.py b/components/antd/auto_complete/demos/lookup_patterns.py
new file mode 100644
index 0000000000000000000000000000000000000000..c34b1eb8908c8cdeb1647dc165b4611b14517b55
--- /dev/null
+++ b/components/antd/auto_complete/demos/lookup_patterns.py
@@ -0,0 +1,57 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def Title(title: str):
+ with antd.Flex(align="center", justify="space-between"):
+ ms.Span(title)
+
+ antd.Button("more",
+ type="link",
+ href="https://www.google.com/search?q=antd",
+ href_target="_blank")
+
+
+def AutoCompleteSubOption(title: str, count: int):
+ with antd.AutoComplete.Option(value=title):
+ with ms.Slot("label"):
+ with antd.Flex(align="center", justify="space-between"):
+ ms.Text(title)
+ with ms.Span():
+ antd.Icon("UserOutlined")
+ ms.Text(count)
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.AutoComplete(elem_style=dict(width=250),
+ size="large",
+ popup_match_select_width=500):
+ with ms.Slot("children"):
+ antd.Input.Search(size="large",
+ placeholder="Typing here...")
+ with ms.Slot("options"):
+ with antd.AutoComplete.Option():
+ with ms.Slot("label"):
+ Title("Libraries")
+ with ms.Slot("options"):
+ AutoCompleteSubOption("Ant Design", 10000)
+ AutoCompleteSubOption('AntDesign UI', 10600)
+ with antd.AutoComplete.Option():
+ with ms.Slot("label"):
+ Title("Solutions")
+ with ms.Slot("options"):
+ AutoCompleteSubOption('AntDesign UI FAQ', 60100)
+ AutoCompleteSubOption('AntDesign FAQ', 30010)
+ with antd.AutoComplete.Option():
+ with ms.Slot("label"):
+ Title("Articles")
+ with ms.Slot("options"):
+ AutoCompleteSubOption('AntDesign design language',
+ 100000)
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/avatar/README-zh_CN.md b/components/antd/avatar/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..880d78e959eeae91c198ffed8c93efc7a98f7e7a
--- /dev/null
+++ b/components/antd/avatar/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Avatar
+
+Used to represent users or things, supporting the display of images, icons, or characters. See [Ant Design](https://ant.design/components/avatar/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="group" title="Avatar.Group"></demo>
diff --git a/components/antd/avatar/README.md b/components/antd/avatar/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..880d78e959eeae91c198ffed8c93efc7a98f7e7a
--- /dev/null
+++ b/components/antd/avatar/README.md
@@ -0,0 +1,8 @@
+# Avatar
+
+Used to represent users or things, supporting the display of images, icons, or characters. See [Ant Design](https://ant.design/components/avatar/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="group" title="Avatar.Group"></demo>
diff --git a/components/antd/avatar/app.py b/components/antd/avatar/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/avatar/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/avatar/demos/basic.py b/components/antd/avatar/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..8fd8b7bde5acf2c7942b9244a163ee26e27a9ee5
--- /dev/null
+++ b/components/antd/avatar/demos/basic.py
@@ -0,0 +1,43 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(size=16, wrap=True):
+ with antd.Avatar():
+ with ms.Slot("icon"):
+ antd.Icon("UserOutlined")
+ with antd.Avatar():
+ ms.Text('U')
+ with antd.Avatar(shape="square"):
+ ms.Text("USER")
+ antd.Avatar(
+ "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+ )
+ with antd.Avatar():
+ with ms.Slot("src"):
+ antd.Image(
+ "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
+ alt="avatar")
+ with antd.Avatar(elem_style=dict(backgroundColor='#fde3cf',
+ color='#f56a00')):
+ ms.Text("U")
+ with antd.Avatar(elem_style=dict(backgroundColor='#87d068')):
+ with ms.Slot("icon"):
+ antd.Icon("UserOutlined")
+
+ antd.Divider("With Badge")
+ with antd.Space(size=24):
+ with antd.Badge(count=1):
+ with antd.Avatar(shape="square"):
+ with ms.Slot("icon"):
+ antd.Icon("UserOutlined")
+ with antd.Badge(dot=True):
+ with antd.Avatar(shape="square"):
+ with ms.Slot("icon"):
+ antd.Icon("UserOutlined")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/avatar/demos/group.py b/components/antd/avatar/demos/group.py
new file mode 100644
index 0000000000000000000000000000000000000000..b1912d3cff9a93e90d96eff7ae09d2bf246f9e85
--- /dev/null
+++ b/components/antd/avatar/demos/group.py
@@ -0,0 +1,99 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Avatar.Group():
+ antd.Avatar(
+ value="https://api.dicebear.com/7.x/miniavs/svg?seed=1")
+ with antd.Avatar(elem_style=dict(backgroundColor="#f56a00")):
+ ms.Text("K")
+ with antd.Tooltip(title="Ant User", placement="top"):
+ with antd.Avatar(elem_style=dict(
+ backgroundColor="#87d068")):
+ with ms.Slot("icon"):
+ antd.Icon("UserOutlined")
+ with antd.Avatar(elem_style=dict(backgroundColor="#1677ff")):
+ with ms.Slot("icon"):
+ antd.Icon("AntDesignOutlined")
+
+ antd.Divider()
+
+ with antd.Avatar.Group(max=dict(
+ count=2,
+ style=dict(color="#f56a00", backgroundColor="#fde3cf"))):
+ antd.Avatar(
+ value="https://api.dicebear.com/7.x/miniavs/svg?seed=2")
+ with antd.Avatar(elem_style=dict(backgroundColor="#f56a00")):
+ ms.Text("K")
+ with antd.Tooltip(title="Ant User", placement="top"):
+ with antd.Avatar(elem_style=dict(
+ backgroundColor="#87d068")):
+ with ms.Slot("icon"):
+ antd.Icon("UserOutlined")
+ with antd.Avatar(elem_style=dict(backgroundColor="#1677ff")):
+ with ms.Slot("icon"):
+ antd.Icon("AntDesignOutlined")
+
+ antd.Divider()
+
+ with antd.Avatar.Group(size="large",
+ max=dict(count=2,
+ style=dict(
+ color="#f56a00",
+ backgroundColor="#fde3cf"))):
+ antd.Avatar(
+ value="https://api.dicebear.com/7.x/miniavs/svg?seed=3")
+ with antd.Avatar(elem_style=dict(backgroundColor="#f56a00")):
+ ms.Text("K")
+ with antd.Tooltip(title="Ant User", placement="top"):
+ with antd.Avatar(elem_style=dict(
+ backgroundColor="#87d068")):
+ with ms.Slot("icon"):
+ antd.Icon("UserOutlined")
+ with antd.Avatar(elem_style=dict(backgroundColor="#1677ff")):
+ with ms.Slot("icon"):
+ antd.Icon("AntDesignOutlined")
+
+ antd.Divider()
+
+ with antd.Avatar.Group(size="large",
+ max=dict(count=2,
+ style=dict(
+ color="#f56a00",
+ backgroundColor="#fde3cf",
+ cursor="pointer"),
+ popover=dict(trigger="click"))):
+ antd.Avatar(
+ value=
+ "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+ )
+ with antd.Avatar(elem_style=dict(backgroundColor="#f56a00")):
+ ms.Text("K")
+ with antd.Tooltip(title="Ant User", placement="top"):
+ with antd.Avatar(elem_style=dict(
+ backgroundColor="#87d068")):
+ with ms.Slot("icon"):
+ antd.Icon("UserOutlined")
+ with antd.Avatar(elem_style=dict(backgroundColor="#1677ff")):
+ with ms.Slot("icon"):
+ antd.Icon("AntDesignOutlined")
+
+ antd.Divider()
+
+ with antd.Avatar.Group(shape="square"):
+ with antd.Avatar(elem_style=dict(backgroundColor="#fde3cf")):
+ ms.Text("A")
+ with antd.Avatar(elem_style=dict(backgroundColor="#f56a00")):
+ ms.Text("K")
+ with antd.Avatar(elem_style=dict(backgroundColor="#87d068")):
+ with ms.Slot("icon"):
+ antd.Icon("UserOutlined")
+ with antd.Avatar(elem_style=dict(backgroundColor="#1677ff")):
+ with ms.Slot("icon"):
+ antd.Icon("AntDesignOutlined")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/badge/README-zh_CN.md b/components/antd/badge/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..df072fbfa46e52aa468764b7ed0e5e0b5628076e
--- /dev/null
+++ b/components/antd/badge/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Badge
+
+Small numerical value or status descriptor for UI elements. See [Ant Design](https://ant.design/components/badge/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="ribbon" title="Ribbon"></demo>
diff --git a/components/antd/badge/README.md b/components/antd/badge/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..df072fbfa46e52aa468764b7ed0e5e0b5628076e
--- /dev/null
+++ b/components/antd/badge/README.md
@@ -0,0 +1,8 @@
+# Badge
+
+Small numerical value or status descriptor for UI elements. See [Ant Design](https://ant.design/components/badge/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="ribbon" title="Ribbon"></demo>
diff --git a/components/antd/badge/app.py b/components/antd/badge/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/badge/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/badge/demos/basic.py b/components/antd/badge/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..91f615c0a3cb0c0565b9d4057c51465b91274cca
--- /dev/null
+++ b/components/antd/badge/demos/basic.py
@@ -0,0 +1,36 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(size="middle"):
+ with antd.Badge(count=5):
+ antd.Avatar(shape="square", size="large")
+
+ with antd.Badge(count=0, show_zero=True):
+ antd.Avatar(shape="square", size="large")
+
+ with antd.Badge(elem_style=dict(color="#f5222d")):
+ with ms.Slot("count"):
+ antd.Icon("ClockCircleOutlined")
+ antd.Avatar(shape="square", size="large")
+ with antd.Badge(count=99, overflow_count=10):
+ antd.Avatar(shape="square", size="large")
+ with antd.Badge(count=1000, overflow_count=999):
+ antd.Avatar(shape="square", size="large")
+
+ with antd.Badge(dot=True):
+ antd.Icon("NotificationOutlined",
+ elem_style=dict(fontSize="16"))
+ antd.Divider("Status")
+ with antd.Space(direction="vertical"):
+ antd.Badge(status="success", text="Success")
+ antd.Badge(status="error", text="Error")
+ antd.Badge(status="default", text="Default")
+ antd.Badge(status="processing", text="Processing")
+ antd.Badge(status="warning", text="Warning")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/badge/demos/ribbon.py b/components/antd/badge/demos/ribbon.py
new file mode 100644
index 0000000000000000000000000000000000000000..1aac3c993bfd54afdb2356ed3ce776363d2181e5
--- /dev/null
+++ b/components/antd/badge/demos/ribbon.py
@@ -0,0 +1,52 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(direction="vertical",
+ size="middle",
+ elem_style=dict(width="100%")):
+ with antd.Badge.Ribbon(text="Hippies"):
+ with antd.Card(title="Pushes open the window",
+ size="small"):
+ ms.Text("and raises the spyglass.")
+
+ with antd.Badge.Ribbon(text="Hippies", color="pink"):
+ with antd.Card(title="Pushes open the window",
+ size="small"):
+ ms.Text("and raises the spyglass.")
+
+ with antd.Badge.Ribbon(text="Hippies", color="red"):
+ with antd.Card(title="Pushes open the window",
+ size="small"):
+ ms.Text("and raises the spyglass.")
+
+ with antd.Badge.Ribbon(text="Hippies", color="cyan"):
+ with antd.Card(title="Pushes open the window",
+ size="small"):
+ ms.Text("and raises the spyglass.")
+
+ with antd.Badge.Ribbon(text="Hippies", color="green"):
+ with antd.Card(title="Pushes open the window",
+ size="small"):
+ ms.Text("and raises the spyglass.")
+
+ with antd.Badge.Ribbon(text="Hippies", color="purple"):
+ with antd.Card(title="Pushes open the window",
+ size="small"):
+ ms.Text("and raises the spyglass.")
+
+ with antd.Badge.Ribbon(text="Hippies", color="volcano"):
+ with antd.Card(title="Pushes open the window",
+ size="small"):
+ ms.Text("and raises the spyglass.")
+
+ with antd.Badge.Ribbon(text="Hippies", color="magenta"):
+ with antd.Card(title="Pushes open the window",
+ size="small"):
+ ms.Text("and raises the spyglass.")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/breadcrumb/README-zh_CN.md b/components/antd/breadcrumb/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..758964012daf1beb5afc9b64ecb8a2a3784a4cba
--- /dev/null
+++ b/components/antd/breadcrumb/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Breadcrumb
+
+Display the current location within a hierarchy. And allow going back to states higher up in the hierarchy. See [Ant Design](https://ant.design/components/breadcrumb/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/breadcrumb/README.md b/components/antd/breadcrumb/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..758964012daf1beb5afc9b64ecb8a2a3784a4cba
--- /dev/null
+++ b/components/antd/breadcrumb/README.md
@@ -0,0 +1,7 @@
+# Breadcrumb
+
+Display the current location within a hierarchy. And allow going back to states higher up in the hierarchy. See [Ant Design](https://ant.design/components/breadcrumb/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/breadcrumb/app.py b/components/antd/breadcrumb/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/breadcrumb/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/breadcrumb/demos/basic.py b/components/antd/breadcrumb/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..7b074e921afd6a70890feab219e4fc869f569e00
--- /dev/null
+++ b/components/antd/breadcrumb/demos/basic.py
@@ -0,0 +1,45 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Breadcrumb():
+ antd.Breadcrumb.Item(title="Ant Design")
+ with antd.Breadcrumb.Item():
+ with ms.Slot("title"):
+ antd.Button(type="link", href="#")
+ with antd.Breadcrumb.Item():
+ with ms.Slot("title"):
+ antd.Button(type="link", href="General")
+ with ms.Slot("menu.items"):
+ with antd.Menu.Item(key="1"):
+ with ms.Slot("label"):
+ antd.Button(
+ "General",
+ type="link",
+ href="https://modelscope.cn",
+ href_target="_blank",
+ )
+ with antd.Menu.Item(key="2"):
+ with ms.Slot("label"):
+ antd.Button(
+ "Layout",
+ type="link",
+ href="https://ant.design/",
+ href_target="_blank",
+ )
+ with antd.Menu.Item(key="3"):
+ with ms.Slot("label"):
+ antd.Button(
+ "Navigation",
+ type="link",
+ href="https://www.alipay.com/",
+ href_target="_blank",
+ )
+ antd.Breadcrumb.Item(title="Button")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/button/README-zh_CN.md b/components/antd/button/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..065a07954b529c1cab2eef045b42e6855863e738
--- /dev/null
+++ b/components/antd/button/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Button
+
+To trigger an operation. See [Ant Design](https://ant.design/components/button/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/button/README.md b/components/antd/button/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..065a07954b529c1cab2eef045b42e6855863e738
--- /dev/null
+++ b/components/antd/button/README.md
@@ -0,0 +1,7 @@
+# Button
+
+To trigger an operation. See [Ant Design](https://ant.design/components/button/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/button/app.py b/components/antd/button/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/button/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/button/demos/basic.py b/components/antd/button/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..887efeeb83d3a6d27833b85eb195307676842ee6
--- /dev/null
+++ b/components/antd/button/demos/basic.py
@@ -0,0 +1,26 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Flex(gap="small", wrap=True):
+ btn = antd.Button("Primary Button", type="primary")
+ btn.click(lambda: print("clicked"))
+ with antd.Button():
+ ms.Text("Default Button")
+ antd.Button("Dashed Button", type="dashed")
+ antd.Button("Text Button", type="text")
+ antd.Button("Link Button", type="link")
+ antd.Button("Filled", color="default", variant="filled")
+ antd.Button("Filled", color="danger", variant="filled")
+ with antd.Button(type="primary", loading=True):
+ ms.Text("Loading")
+ with ms.Slot("icon"):
+ antd.Icon("PoweroffOutlined")
+ antd.Button("Block", type="primary", block=True)
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/calendar/README-zh_CN.md b/components/antd/calendar/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..f0d4339909067522ccafc3f5127093ef87f155ed
--- /dev/null
+++ b/components/antd/calendar/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Calendar
+
+A container that displays data in calendar form. See [Ant Design](https://ant.design/components/calendar/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="notice_calendar" title="Notice Calendar"></demo>
diff --git a/components/antd/calendar/README.md b/components/antd/calendar/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..f0d4339909067522ccafc3f5127093ef87f155ed
--- /dev/null
+++ b/components/antd/calendar/README.md
@@ -0,0 +1,8 @@
+# Calendar
+
+A container that displays data in calendar form. See [Ant Design](https://ant.design/components/calendar/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="notice_calendar" title="Notice Calendar"></demo>
diff --git a/components/antd/calendar/app.py b/components/antd/calendar/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/calendar/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/calendar/demos/basic.py b/components/antd/calendar/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..7dfaafed4fcd67235e53fec6ee735f0142b48981
--- /dev/null
+++ b/components/antd/calendar/demos/basic.py
@@ -0,0 +1,15 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Calendar()
+ antd.Divider("Card")
+ with antd.Card():
+ antd.Calendar(fullscreen=False)
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/calendar/demos/notice_calendar.py b/components/antd/calendar/demos/notice_calendar.py
new file mode 100644
index 0000000000000000000000000000000000000000..baf2165ce1078b43aaa7787560518ee70b4d208f
--- /dev/null
+++ b/components/antd/calendar/demos/notice_calendar.py
@@ -0,0 +1,56 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Calendar(cell_render="""(current, info) => {
+ if (info.type === 'date') {
+ if (current.date() === 8) {
+ const React = window.ms_globals.React;
+ const antd = window.ms_globals.antd;
+ const events = [
+ {
+ type: 'warning',
+ content: 'This is warning event.',
+ },
+ {
+ type: 'success',
+ content: 'This is usual event.',
+ },
+ ];
+ return React.createElement(
+ 'ul',
+ {
+ style: {
+ margin: 0,
+ padding: 0,
+ listStyle: 'none'
+ }
+ },
+ events.map((event) => {
+ return React.createElement(
+ 'li',
+ {
+ style: {
+ marginBottom: 8,
+ },
+ },
+ [
+ React.createElement(antd.Badge, {
+ status: event.type,
+ text: event.content,
+ }),
+ ]
+ );
+ })
+ );
+ }
+ }
+ return info.originNode;
+}""")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/card/README-zh_CN.md b/components/antd/card/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..7ec12ede832fefda3f643db62da23be44f0be07f
--- /dev/null
+++ b/components/antd/card/README-zh_CN.md
@@ -0,0 +1,9 @@
+# Card
+
+A container for displaying information. See [Ant Design](https://ant.design/components/card/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="customized_content" title="Customized Content"></demo>
+<demo name="grid_card" title="Grid Card"></demo>
diff --git a/components/antd/card/README.md b/components/antd/card/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..7ec12ede832fefda3f643db62da23be44f0be07f
--- /dev/null
+++ b/components/antd/card/README.md
@@ -0,0 +1,9 @@
+# Card
+
+A container for displaying information. See [Ant Design](https://ant.design/components/card/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="customized_content" title="Customized Content"></demo>
+<demo name="grid_card" title="Grid Card"></demo>
diff --git a/components/antd/card/app.py b/components/antd/card/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/card/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/card/demos/basic.py b/components/antd/card/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..1e407e9fb1e21d8fc5a8f4e5db6df784994c59c7
--- /dev/null
+++ b/components/antd/card/demos/basic.py
@@ -0,0 +1,28 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(direction="vertical", size=16):
+ with antd.Card(title="Default size card",
+ elem_style=dict(width=300)):
+ with ms.Slot("extra"):
+ antd.Button("More", type="link", href="#")
+ ms.Div("Card content")
+ ms.Div("Card content")
+ ms.Div("Card content")
+ with antd.Card(title="Small size card",
+ elem_style=dict(width=300),
+ size="small",
+ bordered=False):
+ with ms.Slot("extra"):
+ antd.Button("More", type="link", href="#")
+ ms.Div("Card content")
+ ms.Div("Card content")
+ ms.Div("Card content")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/card/demos/customized_content.py b/components/antd/card/demos/customized_content.py
new file mode 100644
index 0000000000000000000000000000000000000000..a72fefe920f1fbfce2aad0037dc2f3b61971e2c9
--- /dev/null
+++ b/components/antd/card/demos/customized_content.py
@@ -0,0 +1,40 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(direction="vertical", size=16):
+ with antd.Card(hoverable=True, elem_style=dict(width=240)):
+ with ms.Slot("cover"):
+ antd.Image(
+ value=
+ "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
+ width="100%",
+ preview=False,
+ alt="example")
+ antd.Card.Meta(title="Europe Street beat",
+ description="www.instagram.com")
+ with antd.Card(elem_style=dict(width=300)):
+ with ms.Slot("cover"):
+ antd.Image(
+ value=
+ "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png",
+ preview=False,
+ width="100%",
+ alt="example")
+ with ms.Slot("actions"):
+ antd.Icon("SettingOutlined")
+ antd.Icon("EditOutlined")
+ antd.Icon("EllipsisOutlined")
+ with antd.Card.Meta(title="Card title",
+ description="This is the description"):
+ with ms.Slot("avatar"):
+ antd.Avatar(
+ "https://api.dicebear.com/7.x/miniavs/svg?seed=8"
+ )
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/card/demos/grid_card.py b/components/antd/card/demos/grid_card.py
new file mode 100644
index 0000000000000000000000000000000000000000..357eb155bc43a2d4f26b8b327f91df3915534f91
--- /dev/null
+++ b/components/antd/card/demos/grid_card.py
@@ -0,0 +1,31 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+gridStyle = {
+ "width": '25%',
+ "textAlign": 'center',
+}
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Card(title="Card Title"):
+ with antd.Card.Grid(elem_style=gridStyle):
+ ms.Text("Content")
+ with antd.Card.Grid(hoverable=False, elem_style=gridStyle):
+ ms.Text("Content")
+ with antd.Card.Grid(elem_style=gridStyle):
+ ms.Text("Content")
+ with antd.Card.Grid(elem_style=gridStyle):
+ ms.Text("Content")
+ with antd.Card.Grid(elem_style=gridStyle):
+ ms.Text("Content")
+ with antd.Card.Grid(elem_style=gridStyle):
+ ms.Text("Content")
+ with antd.Card.Grid(elem_style=gridStyle):
+ ms.Text("Content")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/carousel/README-zh_CN.md b/components/antd/carousel/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..37e7e46987f37d6f406094e29a595383bd8b167b
--- /dev/null
+++ b/components/antd/carousel/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Carousel
+
+A set of carousel areas. See [Ant Design](https://ant.design/components/carousel/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/carousel/README.md b/components/antd/carousel/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..37e7e46987f37d6f406094e29a595383bd8b167b
--- /dev/null
+++ b/components/antd/carousel/README.md
@@ -0,0 +1,7 @@
+# Carousel
+
+A set of carousel areas. See [Ant Design](https://ant.design/components/carousel/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/carousel/app.py b/components/antd/carousel/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/carousel/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/carousel/demos/basic.py b/components/antd/carousel/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..a4648116018cbc46528ce32b64a226a155c6fc16
--- /dev/null
+++ b/components/antd/carousel/demos/basic.py
@@ -0,0 +1,74 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+default_dot_position = 'bottom'
+default_auto_play = True
+default_show_arrows = True
+
+content_style = {
+ "margin": 0,
+ "height": '160px',
+ "color": '#fff',
+ "lineHeight": '160px',
+ "textAlign": 'center',
+ "background": '#364d79',
+}
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space():
+ dot_position = antd.RadioGroup(value=default_dot_position,
+ option_type="button",
+ options=[{
+ "label": "Top",
+ "value": "top"
+ }, {
+ "label": "Bottom",
+ "value": "bottom"
+ }, {
+ "label": "Left",
+ "value": "left"
+ }, {
+ "label": "Right",
+ "value": "right"
+ }])
+ auto_play = antd.Switch(value=default_auto_play,
+ checked_children="AutoPlay",
+ un_checked_children="No AutoPlay")
+ show_arrows = antd.Switch(value=default_show_arrows,
+ checked_children="Show Arrows",
+ un_checked_children="Hide Arrows")
+ with antd.Carousel(dot_position=default_dot_position,
+ autoplay=default_auto_play,
+ arrows=default_show_arrows) as carousel:
+ with ms.Div():
+ antd.Typography.Title("1",
+ level=3,
+ elem_style=content_style)
+ with ms.Div():
+ antd.Typography.Title("2",
+ level=3,
+ elem_style=content_style)
+ with ms.Div():
+ antd.Typography.Title("3",
+ level=3,
+ elem_style=content_style)
+ with ms.Div():
+ antd.Typography.Title("4",
+ level=3,
+ elem_style=content_style)
+
+ auto_play.change(fn=lambda x: gr.update(autoplay=x),
+ inputs=[auto_play],
+ outputs=[carousel])
+ show_arrows.change(fn=lambda x: gr.update(arrows=x),
+ inputs=[show_arrows],
+ outputs=[carousel])
+ dot_position.change(fn=lambda x: gr.update(dot_position=x),
+ inputs=[dot_position],
+ outputs=[carousel])
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/cascader/README-zh_CN.md b/components/antd/cascader/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..e46238825a667706e8a93996ed5aef5f1be1065a
--- /dev/null
+++ b/components/antd/cascader/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Cascader
+
+Cascade selection box. See [Ant Design](https://ant.design/components/cascader/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="panel" title="Panel"></demo>
diff --git a/components/antd/cascader/README.md b/components/antd/cascader/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..e46238825a667706e8a93996ed5aef5f1be1065a
--- /dev/null
+++ b/components/antd/cascader/README.md
@@ -0,0 +1,8 @@
+# Cascader
+
+Cascade selection box. See [Ant Design](https://ant.design/components/cascader/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="panel" title="Panel"></demo>
diff --git a/components/antd/cascader/app.py b/components/antd/cascader/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/cascader/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/cascader/demos/basic.py b/components/antd/cascader/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..3daa18251a1d045e1dfd6c3e739d6a8a72d04ed1
--- /dev/null
+++ b/components/antd/cascader/demos/basic.py
@@ -0,0 +1,48 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Cascader(elem_style=dict(width=300),
+ options=[{
+ "value":
+ 'zhejiang',
+ "label":
+ 'Zhejiang',
+ "children": [{
+ "value": 'hangzhou',
+ "label": 'Hangzhou'
+ }],
+ }, {
+ "value":
+ 'jiangsu',
+ "label":
+ 'Jiangsu',
+ "children": [{
+ "value": 'nanjing',
+ "label": 'Nanjing'
+ }],
+ }, {
+ "value": 'shanghai',
+ "label": 'Shanghai',
+ "disabled": True
+ }])
+ antd.Divider("Multiple")
+ with antd.Cascader(elem_style=dict(width='100%'),
+ multiple=True,
+ max_tag_count="responsive"):
+ antd.Cascader.Option(label="Light", value="light")
+ with antd.Cascader.Option(label="Bamboo", value="bamboo"):
+ with antd.Cascader.Option(label="Little", value="little"):
+ antd.Cascader.Option(label="Toy Fish",
+ value="fish",
+ disabled=True)
+ antd.Cascader.Option(label="Toy Bird", value="bird")
+ with antd.Cascader.Option(value="cat"):
+ with ms.Slot("label"):
+ antd.Typography.Text("Toy Cat", type="success")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/cascader/demos/panel.py b/components/antd/cascader/demos/panel.py
new file mode 100644
index 0000000000000000000000000000000000000000..d90f9d8cde6d01ef55470e4a41b476b8d3c019d0
--- /dev/null
+++ b/components/antd/cascader/demos/panel.py
@@ -0,0 +1,32 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Cascader.Panel(options=[
+ {
+ "value": 'zhejiang',
+ "label": 'Zhejiang',
+ "children": [{
+ "value": 'hangzhou',
+ "label": 'Hangzhou'
+ }],
+ }, {
+ "value": 'jiangsu',
+ "label": 'Jiangsu',
+ "children": [{
+ "value": 'nanjing',
+ "label": 'Nanjing'
+ }],
+ }, {
+ "value": 'shanghai',
+ "label": 'Shanghai',
+ "disabled": True
+ }
+ ])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/checkbox/README-zh_CN.md b/components/antd/checkbox/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..868114d6d00745117f84c5f3e08c2b8928b87868
--- /dev/null
+++ b/components/antd/checkbox/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Checkbox
+
+Collect user's choices. See [Ant Design](https://ant.design/components/checkbox/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/checkbox/README.md b/components/antd/checkbox/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..868114d6d00745117f84c5f3e08c2b8928b87868
--- /dev/null
+++ b/components/antd/checkbox/README.md
@@ -0,0 +1,7 @@
+# Checkbox
+
+Collect user's choices. See [Ant Design](https://ant.design/components/checkbox/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/checkbox/app.py b/components/antd/checkbox/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/checkbox/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/checkbox/demos/basic.py b/components/antd/checkbox/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..fdc894aac9ff40523a173de9ca18c1088d6a02e7
--- /dev/null
+++ b/components/antd/checkbox/demos/basic.py
@@ -0,0 +1,38 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Checkbox():
+ ms.Text("Checkbox")
+ antd.Divider("Checkbox Group")
+ with antd.Space(direction="vertical"):
+ antd.Checkbox.Group(value=["Apple"],
+ options=[
+ {
+ "label": 'Apple',
+ "value": 'Apple'
+ },
+ {
+ "label": 'Pear',
+ "value": 'Pear'
+ },
+ {
+ "label": 'Orange',
+ "value": 'Orange',
+ "disabled": True
+ },
+ ])
+ with antd.Checkbox.Group(value=["Pear", "Apple"]):
+ with antd.Checkbox.Group.Option(value="Apple"):
+ with ms.Slot("label"):
+ antd.Typography.Text("Apple", type="success")
+ antd.Checkbox.Group.Option(value="Pear", label="Pear")
+ antd.Checkbox.Group.Option(value="Orange",
+ disabled=True,
+ label="Orange")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/collapse/README-zh_CN.md b/components/antd/collapse/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..6ece78040f42185a93d13119d7d75ee4094f5b9a
--- /dev/null
+++ b/components/antd/collapse/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Collapse
+
+A content area which can be collapsed and expanded.
+See [Ant Design](https://ant.design/components/collapse/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/collapse/README.md b/components/antd/collapse/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..6ece78040f42185a93d13119d7d75ee4094f5b9a
--- /dev/null
+++ b/components/antd/collapse/README.md
@@ -0,0 +1,8 @@
+# Collapse
+
+A content area which can be collapsed and expanded.
+See [Ant Design](https://ant.design/components/collapse/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/collapse/app.py b/components/antd/collapse/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/collapse/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/collapse/demos/basic.py b/components/antd/collapse/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..4e77694e3f91afa061b0b12d1fb88cdc7de008f0
--- /dev/null
+++ b/components/antd/collapse/demos/basic.py
@@ -0,0 +1,42 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+default_accordion = False
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ accordion = antd.Switch(value=default_accordion,
+ checked_children="Accordion",
+ un_checked_children="Collapse")
+ with antd.Collapse(default_active_key=['2'],
+ accordion=default_accordion) as collapse:
+ with antd.Collapse.Item(collapsible='disabled',
+ key="1",
+ label="This is panel header 1"):
+ antd.Typography.Paragraph("""
+ A dog is a type of domesticated animal.
+ Known for its loyalty and faithfulness,
+ it can be found as a welcome guest in many households across the world.
+""")
+ with antd.Collapse.Item(label="This is panel header 2",
+ key="2"):
+ antd.Typography.Paragraph("""
+ A dog is a type of domesticated animal.
+ Known for its loyalty and faithfulness,
+ it can be found as a welcome guest in many households across the world.
+""")
+ with antd.Collapse.Item(label="This is panel header 3",
+ key="3"):
+ antd.Typography.Paragraph("""
+ A dog is a type of domesticated animal.
+ Known for its loyalty and faithfulness,
+ it can be found as a welcome guest in many households across the world.
+""")
+ accordion.change(fn=lambda x: gr.update(accordion=x),
+ inputs=[accordion],
+ outputs=[collapse])
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/color_picker/README-zh_CN.md b/components/antd/color_picker/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..6e2237ace60fcd7aa53f82cc9ce3c697af877aea
--- /dev/null
+++ b/components/antd/color_picker/README-zh_CN.md
@@ -0,0 +1,8 @@
+# ColorPicker
+
+Used for color selection. See [Ant Design](https://ant.design/components/color-picker/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="preset" title="Preset Colors"></demo>
diff --git a/components/antd/color_picker/README.md b/components/antd/color_picker/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..6e2237ace60fcd7aa53f82cc9ce3c697af877aea
--- /dev/null
+++ b/components/antd/color_picker/README.md
@@ -0,0 +1,8 @@
+# ColorPicker
+
+Used for color selection. See [Ant Design](https://ant.design/components/color-picker/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="preset" title="Preset Colors"></demo>
diff --git a/components/antd/color_picker/app.py b/components/antd/color_picker/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/color_picker/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/color_picker/demos/basic.py b/components/antd/color_picker/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..52f8f2a45ed4923a7469f60f17ba3cd77c7e270b
--- /dev/null
+++ b/components/antd/color_picker/demos/basic.py
@@ -0,0 +1,26 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space():
+ antd.ColorPicker(value="#816DF8")
+ antd.ColorPicker(value="#816DF8", show_text=True)
+ antd.ColorPicker(value=[
+ {
+ "color": 'rgb(16, 142, 233)',
+ "percent": 0,
+ },
+ {
+ "color": 'rgb(135, 208, 104)',
+ "percent": 100,
+ },
+ ],
+ show_text=True,
+ allow_clear=True,
+ mode="gradient")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/color_picker/demos/preset.py b/components/antd/color_picker/demos/preset.py
new file mode 100644
index 0000000000000000000000000000000000000000..3fdafdb15cbaf8ca9516f08e2e8c545cbeeb003b
--- /dev/null
+++ b/components/antd/color_picker/demos/preset.py
@@ -0,0 +1,56 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space():
+ antd.ColorPicker(value="#816DF8",
+ presets=[{
+ "label":
+ "primary",
+ "colors": [
+ "#e6f4ff", "#bae0ff", "#91caff",
+ "#69b1ff", "#4096ff", "#1677ff",
+ "#0958d9", "#003eb3", "#002c8c",
+ "#001d66"
+ ]
+ }, {
+ "label":
+ "red",
+ "colors": [
+ "#fff1f0", "#ffccc7", "#ffa39e",
+ "#ff7875", "#ff4d4f", "#f5222d",
+ "#cf1322", "#a8071a", "#820014",
+ "#5c0011"
+ ]
+ }, {
+ "label":
+ "green",
+ "colors": [
+ "#f6ffed", "#d9f7be", "#b7eb8f",
+ "#95de64", "#73d13d", "#52c41a",
+ "#389e0d", "#237804", "#135200",
+ "#092b00"
+ ]
+ }])
+ with antd.ColorPicker(value="#816DF8"):
+ with ms.Slot("presets"):
+ with antd.ColorPicker.Preset(colors=[
+ "#e6f4ff", "#bae0ff", "#91caff", "#69b1ff",
+ "#4096ff", "#1677ff", "#0958d9", "#003eb3",
+ "#002c8c", "#001d66"
+ ]):
+ with ms.Slot("label"):
+ antd.Typography.Text("Primary", type="success")
+ antd.ColorPicker.Preset(colors=[
+ "#fff1f0", "#ffccc7", "#ffa39e", "#ff7875",
+ "#ff4d4f", "#f5222d", "#cf1322", "#a8071a",
+ "#820014", "#5c0011"
+ ],
+ label="red")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/config_provider/README-zh_CN.md b/components/antd/config_provider/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..11813c29136f50f8e2bd8491b203730d706086c1
--- /dev/null
+++ b/components/antd/config_provider/README-zh_CN.md
@@ -0,0 +1,7 @@
+# ConfigProvider
+
+Provide a uniform configuration support for components. See [Ant Design](https://ant.design/components/config-provider/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/config_provider/README.md b/components/antd/config_provider/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..11813c29136f50f8e2bd8491b203730d706086c1
--- /dev/null
+++ b/components/antd/config_provider/README.md
@@ -0,0 +1,7 @@
+# ConfigProvider
+
+Provide a uniform configuration support for components. See [Ant Design](https://ant.design/components/config-provider/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/config_provider/app.py b/components/antd/config_provider/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/config_provider/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/config_provider/demos/basic.py b/components/antd/config_provider/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..cc214d04cd036304e17ff120baa5fff8b0873e96
--- /dev/null
+++ b/components/antd/config_provider/demos/basic.py
@@ -0,0 +1,75 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+default_locale = "en_US"
+default_direction = 'ltr'
+default_color = "#816DF8"
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider(
+ locale=default_locale,
+ direction=default_direction,
+ theme=dict(token=dict(
+ colorPrimary=default_color))) as config_provider:
+ with antd.Card():
+ with ms.Div(elem_style=dict(marginBottom=16)):
+ ms.Span("change locale of components:",
+ elem_style=dict(marginInlineEnd=16))
+ with antd.Radio.Group(value=default_locale) as locale:
+ with antd.Radio("en_US"):
+ ms.Text("English")
+ with antd.Radio("zh_CN"):
+ ms.Text("中文")
+ with antd.Radio("ja_JP"):
+ ms.Text("日本語")
+ with antd.Radio("ko_KR"):
+ ms.Text("한국어")
+ with antd.Space(wrap=True):
+ antd.DatePicker()
+ antd.DatePicker.RangePicker()
+ antd.TimePicker()
+ antd.TimePicker.RangePicker()
+ with ms.Div(elem_style=dict(marginBottom=16)):
+ ms.Span("change direction of components:",
+ elem_style=dict(marginInlineEnd=16))
+ with antd.Radio.Group(
+ value=default_direction) as direction:
+ with antd.Radio.Button("ltr"):
+ ms.Text("LTR")
+ with antd.Radio.Button("rtl"):
+ ms.Text("RTL")
+ antd.Input(placeholder="do something...")
+ with ms.Div(elem_style=dict(marginBottom=16)):
+ ms.Span("change theme of components:",
+ elem_style=dict(marginInlineEnd=16))
+ with antd.Space():
+ with antd.Checkbox.Group() as theme:
+ antd.Checkbox.Group.Option("dark", label="dark")
+ antd.Checkbox.Group.Option("compact",
+ label="compact")
+ ms.Text("Primary Color: ")
+ color = antd.ColorPicker(value=default_color)
+
+ antd.Button("Primary Button", type="primary", block=True)
+
+ locale.change(fn=lambda _locale: gr.update(locale=_locale),
+ inputs=[locale],
+ outputs=[config_provider])
+ direction.change(fn=lambda _direction: gr.update(direction=_direction),
+ inputs=[direction],
+ outputs=[config_provider])
+ gr.on(
+ [theme.change, color.change],
+ fn=lambda _theme, _color: gr.update(theme=dict(
+ token=dict(colorPrimary=_color) if _color else None,
+ algorithm=dict(dark=True
+ if _theme and 'dark' in _theme else False,
+ compact=True
+ if _theme and 'compact' in _theme else False))),
+ inputs=[theme, color],
+ outputs=[config_provider])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/date_picker/README-zh_CN.md b/components/antd/date_picker/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..5ebb9a90bb6c204c98570d153768280f255400cd
--- /dev/null
+++ b/components/antd/date_picker/README-zh_CN.md
@@ -0,0 +1,8 @@
+# DatePicker
+
+To select or input a date. See [Ant Design](https://ant.design/components/date-picker/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="range_picker" title="Range Picker"></demo>
diff --git a/components/antd/date_picker/README.md b/components/antd/date_picker/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..5ebb9a90bb6c204c98570d153768280f255400cd
--- /dev/null
+++ b/components/antd/date_picker/README.md
@@ -0,0 +1,8 @@
+# DatePicker
+
+To select or input a date. See [Ant Design](https://ant.design/components/date-picker/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="range_picker" title="Range Picker"></demo>
diff --git a/components/antd/date_picker/app.py b/components/antd/date_picker/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/date_picker/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/date_picker/demos/basic.py b/components/antd/date_picker/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..4b95469f2c452a014a7d6bfd465fb152e042ed03
--- /dev/null
+++ b/components/antd/date_picker/demos/basic.py
@@ -0,0 +1,36 @@
+import time
+
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(direction="vertical"):
+ antd.DatePicker()
+ antd.DatePicker(picker="week")
+ antd.DatePicker(picker="month")
+ antd.DatePicker(picker="quarter")
+ antd.DatePicker(picker="year")
+ antd.Divider("Preset Date")
+ antd.DatePicker(
+ need_confirm=True,
+ presets=[
+ {
+ "label": 'Yesterday',
+ # Python 的 timestamp
+ "value": time.time() - 86400
+ },
+ {
+ "label": 'Last 7 Days',
+ "value": time.time() - 86400 * 7
+ },
+ {
+ "label": 'Last 30 Days',
+ "value": time.time() - 86400 * 30
+ }
+ ])
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/date_picker/demos/range_picker.py b/components/antd/date_picker/demos/range_picker.py
new file mode 100644
index 0000000000000000000000000000000000000000..62660e435ff7ced3f1c6632f9e2671c8b0b47e49
--- /dev/null
+++ b/components/antd/date_picker/demos/range_picker.py
@@ -0,0 +1,17 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(direction="vertical"):
+ antd.DatePicker.RangePicker()
+ antd.DatePicker.RangePicker(show_time=True)
+ antd.DatePicker.RangePicker(picker="week")
+ antd.DatePicker.RangePicker(picker="month")
+ antd.DatePicker.RangePicker(picker="quarter")
+ antd.DatePicker.RangePicker(picker="year")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/descriptions/README-zh_CN.md b/components/antd/descriptions/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..c69b1d669d4cc864eaf737fec4c3edf66cdb539a
--- /dev/null
+++ b/components/antd/descriptions/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Descriptions
+
+Display multiple read-only fields in a group.
+See [Ant Design](https://ant.design/components/descriptions/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/descriptions/README.md b/components/antd/descriptions/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..c69b1d669d4cc864eaf737fec4c3edf66cdb539a
--- /dev/null
+++ b/components/antd/descriptions/README.md
@@ -0,0 +1,8 @@
+# Descriptions
+
+Display multiple read-only fields in a group.
+See [Ant Design](https://ant.design/components/descriptions/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/descriptions/app.py b/components/antd/descriptions/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/descriptions/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/descriptions/demos/basic.py b/components/antd/descriptions/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..285942df6d4f8db81dc5d0651cf5a0ae448d4863
--- /dev/null
+++ b/components/antd/descriptions/demos/basic.py
@@ -0,0 +1,59 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+default_bordered = False
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ bordered = antd.Switch(value=default_bordered,
+ checked_children="Border",
+ un_checked_children="No Border")
+ with antd.Descriptions(title="User Info",
+ bordered=default_bordered) as descriptions:
+ with antd.Descriptions.Item(label="Product"):
+ ms.Text("Cloud Database")
+ with antd.Descriptions.Item(label="Billing Mode"):
+ ms.Text("Prepaid")
+
+ with antd.Descriptions.Item(label="Automatic Renewal"):
+ ms.Text("YES")
+
+ with antd.Descriptions.Item(label="Order time"):
+ ms.Text("2018-04-24 18:00:00")
+
+ with antd.Descriptions.Item(label="Usage Time", span=2):
+ ms.Text("2019-04-24 18:00:00")
+
+ with antd.Descriptions.Item(label="Status", span=3):
+ antd.Badge(status="processing", text="Running")
+
+ with antd.Descriptions.Item(label="Negotiated Amount"):
+ ms.Text("$80.00")
+
+ with antd.Descriptions.Item(label="Discount"):
+ ms.Text("$20.00")
+
+ with antd.Descriptions.Item(label="Official Receipts"):
+ ms.Text("$60.00")
+
+ with antd.Descriptions.Item(label="Config Info"):
+ gr.HTML("""Data disk type: MongoDB
+<br />
+Database version: 3.4
+<br />
+Package: dds.mongo.mid
+<br />
+Storage space: 10 GB
+<br />
+Replication factor: 3
+<br />
+Region: East China 1
+<br />""")
+ bordered.change(fn=lambda x: gr.update(bordered=x),
+ inputs=[bordered],
+ outputs=[descriptions])
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/divider/README-zh_CN.md b/components/antd/divider/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..36464d048d8b0c0083db1bf738888fc56a492c36
--- /dev/null
+++ b/components/antd/divider/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Divider
+
+A divider line separates different content. See [Ant Design](https://ant.design/components/divider/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/divider/README.md b/components/antd/divider/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..36464d048d8b0c0083db1bf738888fc56a492c36
--- /dev/null
+++ b/components/antd/divider/README.md
@@ -0,0 +1,7 @@
+# Divider
+
+A divider line separates different content. See [Ant Design](https://ant.design/components/divider/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/divider/app.py b/components/antd/divider/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/divider/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/divider/demos/basic.py b/components/antd/divider/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..70ecf62a7ed34effedbee1d41d16968cd9344544
--- /dev/null
+++ b/components/antd/divider/demos/basic.py
@@ -0,0 +1,29 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ ms.Div(
+ " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi istaprobare, quae sunt a te dicta? Refert tamen, quo modo."
+ )
+ antd.Divider("Solid", elem_style=dict(borderColor='#7cb305'))
+ ms.Div(
+ " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi istaprobare, quae sunt a te dicta? Refert tamen, quo modo."
+ )
+ with antd.Divider(elem_style=dict(borderColor='#7cb305'),
+ variant="dotted"):
+ ms.Text("Dotted")
+ ms.Div(
+ " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi istaprobare, quae sunt a te dicta? Refert tamen, quo modo."
+ )
+ with antd.Divider(elem_style=dict(borderColor='#7cb305'),
+ variant="dashed"):
+ ms.Text("Dashed")
+ ms.Div(
+ " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi istaprobare, quae sunt a te dicta? Refert tamen, quo modo."
+ )
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/drawer/README-zh_CN.md b/components/antd/drawer/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..9db674ce48ef54759419c5f2c380dc7d0ab1ddcb
--- /dev/null
+++ b/components/antd/drawer/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Drawer
+
+A panel that slides out from the edge of the screen. See [Ant Design](https://ant.design/components/drawer/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="extra_actions" title="Extra Actions"></demo>
diff --git a/components/antd/drawer/README.md b/components/antd/drawer/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..9db674ce48ef54759419c5f2c380dc7d0ab1ddcb
--- /dev/null
+++ b/components/antd/drawer/README.md
@@ -0,0 +1,8 @@
+# Drawer
+
+A panel that slides out from the edge of the screen. See [Ant Design](https://ant.design/components/drawer/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="extra_actions" title="Extra Actions"></demo>
diff --git a/components/antd/drawer/app.py b/components/antd/drawer/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/drawer/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/drawer/demos/basic.py b/components/antd/drawer/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..e75ed30709df923f2b27f92cdf58be602d1077af
--- /dev/null
+++ b/components/antd/drawer/demos/basic.py
@@ -0,0 +1,19 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ btn = antd.Button("Open Drawer", type="primary")
+ with antd.Drawer(open=False, title="Basic Drawer") as drawer:
+ antd.Typography.Paragraph("Some contents...")
+ antd.Typography.Paragraph("Some contents...")
+ antd.Typography.Paragraph("Some contents...")
+ btn.click(fn=lambda: gr.update(open=True), outputs=[drawer])
+
+ drawer.close(fn=lambda: gr.update(open=False), outputs=[drawer])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/drawer/demos/extra_actions.py b/components/antd/drawer/demos/extra_actions.py
new file mode 100644
index 0000000000000000000000000000000000000000..21661caf07581ca270ddf7fae5c682b888638dad
--- /dev/null
+++ b/components/antd/drawer/demos/extra_actions.py
@@ -0,0 +1,36 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+default_placement = 'right'
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space():
+ placement = antd.RadioGroup(
+ options=["top", "bottom", "left", "right"],
+ value=default_placement)
+ btn = antd.Button("Open Drawer", type="primary")
+ with antd.Drawer(open=False,
+ title="Drawer with extra actions",
+ width=500) as drawer:
+ with ms.Slot("extra"):
+ with antd.Space():
+ cancel_btn = antd.Button("Cancel")
+ ok_btn = antd.Button("OK", type="primary")
+ antd.Typography.Paragraph("Some contents...")
+ antd.Typography.Paragraph("Some contents...")
+ antd.Typography.Paragraph("Some contents...")
+ placement.change(fn=lambda p: gr.update(placement=p),
+ inputs=[placement],
+ outputs=[drawer])
+ btn.click(fn=lambda: gr.update(open=True), outputs=[drawer])
+
+ gr.on([drawer.close, ok_btn.click, cancel_btn.click],
+ fn=lambda: gr.update(open=False),
+ outputs=[drawer])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/dropdown/README-zh_CN.md b/components/antd/dropdown/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..cc35de09d270714aae94d1ab4814168e3c417ada
--- /dev/null
+++ b/components/antd/dropdown/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Dropdown
+
+A dropdown list. See [Ant Design](https://ant.design/components/dropdown/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/dropdown/README.md b/components/antd/dropdown/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..cc35de09d270714aae94d1ab4814168e3c417ada
--- /dev/null
+++ b/components/antd/dropdown/README.md
@@ -0,0 +1,7 @@
+# Dropdown
+
+A dropdown list. See [Ant Design](https://ant.design/components/dropdown/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/dropdown/app.py b/components/antd/dropdown/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/dropdown/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/dropdown/demos/basic.py b/components/antd/dropdown/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..1eb5447cc6e5347d30e8f1f6da31c99c75abf336
--- /dev/null
+++ b/components/antd/dropdown/demos/basic.py
@@ -0,0 +1,51 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def Menu():
+ with antd.Menu.Item(key="1"):
+ with ms.Slot("label"):
+ antd.Button(
+ "General",
+ type="link",
+ href="https://modelscope.cn",
+ href_target="_blank",
+ )
+ with antd.Menu.Item(key="2"):
+ with ms.Slot("label"):
+ antd.Button(
+ "Layout",
+ type="link",
+ href="https://ant.design/",
+ href_target="_blank",
+ )
+ with antd.Menu.Item(key="3"):
+ with ms.Slot("label"):
+ antd.Button(
+ "Navigation",
+ type="link",
+ href="https://www.alipay.com/",
+ href_target="_blank",
+ )
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space():
+ with antd.Dropdown():
+ with antd.Button(type="text"):
+ with antd.Space():
+ ms.Text("Hover me")
+ antd.Icon("DownOutlined")
+ with ms.Slot("menu.items"):
+ Menu()
+ with antd.Dropdown.Button(danger=True):
+ ms.Text("Danger")
+ with ms.Slot("menu.items"):
+ Menu()
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/empty/README-zh_CN.md b/components/antd/empty/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..a15150d712deb03f93d55e5c04f16e2b9fd2c6fa
--- /dev/null
+++ b/components/antd/empty/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Empty
+
+Empty state placeholder. See [Ant Design](https://ant.design/components/empty/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/empty/README.md b/components/antd/empty/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..a15150d712deb03f93d55e5c04f16e2b9fd2c6fa
--- /dev/null
+++ b/components/antd/empty/README.md
@@ -0,0 +1,7 @@
+# Empty
+
+Empty state placeholder. See [Ant Design](https://ant.design/components/empty/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/empty/app.py b/components/antd/empty/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/empty/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/empty/demos/basic.py b/components/antd/empty/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..feafe3510ebd9056b7c7d18b41d351468ecefcda
--- /dev/null
+++ b/components/antd/empty/demos/basic.py
@@ -0,0 +1,25 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+default_bordered = False
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(direction="vertical"):
+ antd.Empty()
+ antd.Empty(description=False)
+ antd.Empty(image="PRESENTED_IMAGE_SIMPLE")
+ with antd.Empty(
+ image=
+ "https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg",
+ image_style=dict(height=60)):
+ with ms.Slot("description"):
+ with antd.Typography.Text():
+ ms.Text("Customize")
+ antd.Button('Description', type="link", href="#")
+ antd.Button("Create Now", type="primary")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/flex/README-zh_CN.md b/components/antd/flex/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..2e21bfddd02e88a5e14c305d3038fefcd2599437
--- /dev/null
+++ b/components/antd/flex/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Flex
+
+A flex layout container for alignment. See [Ant Design](https://ant.design/components/flex/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="align"></demo>
diff --git a/components/antd/flex/README.md b/components/antd/flex/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..2e21bfddd02e88a5e14c305d3038fefcd2599437
--- /dev/null
+++ b/components/antd/flex/README.md
@@ -0,0 +1,8 @@
+# Flex
+
+A flex layout container for alignment. See [Ant Design](https://ant.design/components/flex/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="align"></demo>
diff --git a/components/antd/flex/app.py b/components/antd/flex/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/flex/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/flex/demos/align.py b/components/antd/flex/demos/align.py
new file mode 100644
index 0000000000000000000000000000000000000000..a4aa401bedbb91a2410e553d2ca26474e81fdb5e
--- /dev/null
+++ b/components/antd/flex/demos/align.py
@@ -0,0 +1,45 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Flex(gap="middle", align="start", vertical=True):
+ ms.Div("Select justify:")
+ justify_segmented = antd.Segmented('flex-start',
+ options=[
+ 'flex-start',
+ 'center',
+ 'flex-end',
+ 'space-between',
+ 'space-around',
+ 'space-evenly',
+ ])
+ ms.Div("Select align:")
+ align_segmented = antd.Segmented(
+ 'flex-start', options=['flex-start', 'center', 'flex-end'])
+ with antd.Flex(elem_style=dict(
+ width='100%',
+ height=120,
+ borderRadius=6,
+ border='1px solid #40a9ff',
+ ),
+ justify="flex-start",
+ align="flex-start") as flex:
+ antd.Button("Primary", type="primary")
+ antd.Button("Primary", type="primary")
+ antd.Button("Primary", type="primary")
+ antd.Button("Primary", type="primary")
+ justify_segmented.change(fn=lambda _justify_segmented: gr.
+ update(justify=_justify_segmented),
+ inputs=[justify_segmented],
+ outputs=[flex])
+ align_segmented.change(fn=lambda _align_segmented: gr.update(
+ align=_align_segmented),
+ inputs=[align_segmented],
+ outputs=[flex])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/flex/demos/basic.py b/components/antd/flex/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..4971b64a71d5de0dd0de5684de21337734e30225
--- /dev/null
+++ b/components/antd/flex/demos/basic.py
@@ -0,0 +1,26 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Flex(gap="middle", vertical=True):
+ with antd.Radio.Group("horizontal") as radio_group:
+ with antd.Radio("horizontal"):
+ ms.Text("horizontal")
+ with antd.Radio("vertical"):
+ ms.Text("vertical")
+ with antd.Flex(vertical=False) as flex:
+ for i in range(4):
+ ms.Div(elem_style=dict(height=54,
+ width="25%",
+ backgroundColor='#1677ff' if i %
+ 2 else '#1677ffbf'))
+ radio_group.change(fn=lambda _radio_group: gr.update(
+ vertical=True if _radio_group == "vertical" else False),
+ inputs=[radio_group],
+ outputs=[flex])
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/float_button/README-zh_CN.md b/components/antd/float_button/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..0c7d28f367a3096eb5a8afce28274d000463a29d
--- /dev/null
+++ b/components/antd/float_button/README-zh_CN.md
@@ -0,0 +1,7 @@
+# FloatButton
+
+A button that floats at the top of the page. See [Ant Design](https://ant.design/components/float-button/) for more information.
+
+## Examples
+
+<demo name="basic" fixed></demo>
diff --git a/components/antd/float_button/README.md b/components/antd/float_button/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..0c7d28f367a3096eb5a8afce28274d000463a29d
--- /dev/null
+++ b/components/antd/float_button/README.md
@@ -0,0 +1,7 @@
+# FloatButton
+
+A button that floats at the top of the page. See [Ant Design](https://ant.design/components/float-button/) for more information.
+
+## Examples
+
+<demo name="basic" fixed></demo>
diff --git a/components/antd/float_button/app.py b/components/antd/float_button/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/float_button/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/float_button/demos/basic.py b/components/antd/float_button/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..c0ab7f937c16e15888c6606fc525eacc1e7f4764
--- /dev/null
+++ b/components/antd/float_button/demos/basic.py
@@ -0,0 +1,30 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.FloatButton.Group(shape="circle",
+ elem_style=dict(insetInlineEnd=24)):
+ with antd.FloatButton(badge=dict(count=12)):
+ antd.Icon("QuestionCircleOutlined")
+ antd.FloatButton(badge=dict(count=123, overflowCount=999))
+ antd.FloatButton.BackTop(visibility_height=0)
+
+ antd.FloatButton(type="primary",
+ elem_style=dict(insetInlineEnd=24 + 70))
+
+ with antd.FloatButton(elem_style=dict(insetInlineEnd=24 + 70 +
+ 70)):
+ with ms.Slot("icon"):
+ antd.Icon("QuestionCircleOutlined")
+ with antd.FloatButton(type="primary",
+ description="Tooltip",
+ elem_style=dict(insetInlineEnd=24 + 140 +
+ 70)):
+ with ms.Slot("tooltip"):
+ ms.Div("Documents")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/form/README-zh_CN.md b/components/antd/form/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..4def98ab8d218a5a56d12c76c4e54f4a626ef168
--- /dev/null
+++ b/components/antd/form/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Form
+
+High-performance form component with data domain management. Includes data entry, validation, and corresponding styles. See [Ant Design](https://ant.design/components/form/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="form_rules" title="Form Rules"></demo>
diff --git a/components/antd/form/README.md b/components/antd/form/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..4def98ab8d218a5a56d12c76c4e54f4a626ef168
--- /dev/null
+++ b/components/antd/form/README.md
@@ -0,0 +1,8 @@
+# Form
+
+High-performance form component with data domain management. Includes data entry, validation, and corresponding styles. See [Ant Design](https://ant.design/components/form/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="form_rules" title="Form Rules"></demo>
diff --git a/components/antd/form/app.py b/components/antd/form/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/form/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/form/demos/basic.py b/components/antd/form/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..23dc7a80b0ad4495067e0ed1ba8293525c9f9e4e
--- /dev/null
+++ b/components/antd/form/demos/basic.py
@@ -0,0 +1,94 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def on_submit(_form):
+ print(_form) # the Form Component will automatically collect the form data
+
+
+def on_change(_form):
+ return gr.update(layout=_form["layout"],
+ disabled=_form["form_disabled"],
+ variant=_form["variant"])
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Form(value={
+ "layout": "horizontal",
+ "remember": True,
+ "form_disabled": False,
+ "variant": "outlined",
+ },
+ variant="outlined",
+ label_col=dict(span=8),
+ wrapper_col=dict(span=16),
+ layout="horizontal") as form:
+ with antd.Form.Item(form_name="form_disabled",
+ value_prop_name="checked"):
+ with antd.Checkbox(disabled=False):
+ ms.Text("Form disabled")
+ with antd.Form.Item(form_name="layout", label="Form Layout"):
+ antd.Radio.Group(options=[{
+ "label": "Horizontal",
+ "value": "horizontal"
+ }, {
+ "label": "Vertical",
+ "value": "vertical"
+ }, {
+ "label": "Inline",
+ "value": "inline"
+ }])
+ with antd.Form.Item(form_name="variant", label="Form variant"):
+ antd.Segmented(
+ options=['outlined', 'filled', 'borderless'])
+ with antd.Form.Item(form_name="username",
+ label="Username",
+ tooltip="This is a required field",
+ rules=[{
+ "required":
+ True,
+ "message":
+ 'Please input your username!'
+ }]):
+ antd.Input()
+ with antd.Form.Item(form_name="password",
+ label="Password",
+ tooltip="This is a required field",
+ rules=[{
+ "required":
+ True,
+ "message":
+ 'Please input your password!'
+ }]):
+ antd.Input.Password()
+ with antd.Form.Item(form_name="files", label="Upload"):
+ with antd.Upload.Dragger():
+ with ms.Div(
+ elem_style=dict(fontSize=40, color="#1677ff")):
+ antd.Icon("InboxOutlined")
+ antd.Typography.Paragraph(
+ "Click or drag file to this area to upload")
+ antd.Typography.Paragraph(
+ "Support for a single or bulk upload.",
+ type="secondary")
+
+ with antd.Form.Item(
+ wrapper_col=dict(offset=8, span=16),
+ form_name="remember",
+ value_prop_name="checked",
+ ):
+ with antd.Checkbox():
+ ms.Text("Remember me")
+ with antd.Form.Item(wrapper_col=dict(offset=8, span=16)):
+ submit_btn = antd.Button("Submit",
+ type="primary",
+ html_type="submit")
+ form.values_change(on_change, inputs=[form], outputs=[form])
+ form.finish(on_submit, inputs=[form])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/form/demos/form_rules.py b/components/antd/form/demos/form_rules.py
new file mode 100644
index 0000000000000000000000000000000000000000..35128c22237e2c3997a8bd034dedbc6b9036c4bf
--- /dev/null
+++ b/components/antd/form/demos/form_rules.py
@@ -0,0 +1,67 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def on_submit(_form):
+ print(_form) # the Form Component will automatically collect the form data
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Form(label_col=dict(span=8),
+ wrapper_col=dict(span=16)) as form:
+ with antd.Form.Item(
+ form_name="username",
+ label="Username",
+ rules=[{
+ "required": True,
+ "message": 'Please input your username!'
+ }, {
+ "pattern":
+ "^[a-zA-Z0-9]+$",
+ "message":
+ "Username can only contain letters and numbers!"
+ }, {
+ "min":
+ 6,
+ "message":
+ "Username must be at least 6 characters long!"
+ }, {
+ "max":
+ 20,
+ "message":
+ "Username must be at most 20 characters long!"
+ }]):
+ antd.Input()
+ with antd.Form.Item(
+ form_name="password",
+ label="Password",
+ rules=[
+ {
+ "required": True,
+ "message": 'Please input your password!'
+ },
+ {
+ # custom validator with javascript function
+ "validator":
+ """(rule, value, cb) => {
+ if (value !== '123') {
+ cb('Password must be "123"')
+ }
+ cb()
+ }"""
+ }
+ ]):
+ antd.Input.Password()
+
+ with antd.Form.Item(wrapper_col=dict(offset=8, span=16)):
+ submit_btn = antd.Button("Submit",
+ type="primary",
+ html_type="submit")
+ form.finish(on_submit, inputs=[form])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/grid/README-zh_CN.md b/components/antd/grid/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..2d7b27bf2c24be13e12bf201afd89eeda835c41a
--- /dev/null
+++ b/components/antd/grid/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Grid
+
+24 Grids System. See [Ant Design](https://ant.design/components/grid/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="playground" title="Playground"></demo>
diff --git a/components/antd/grid/README.md b/components/antd/grid/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..2d7b27bf2c24be13e12bf201afd89eeda835c41a
--- /dev/null
+++ b/components/antd/grid/README.md
@@ -0,0 +1,8 @@
+# Grid
+
+24 Grids System. See [Ant Design](https://ant.design/components/grid/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="playground" title="Playground"></demo>
diff --git a/components/antd/grid/app.py b/components/antd/grid/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/grid/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/grid/demos/basic.py b/components/antd/grid/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..b666ba7cf893c09f9392c7e4fda4a5a53a15111c
--- /dev/null
+++ b/components/antd/grid/demos/basic.py
@@ -0,0 +1,25 @@
+import json
+
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Row(gutter=[6, 10]):
+ with antd.Col(span=6):
+ ms.Text("Col-6")
+ with antd.Col(span=12):
+ ms.Text("Col-12")
+ with antd.Col(span=6):
+ ms.Text("Col-6")
+ with antd.Col(span=6):
+ ms.Text("Col-6")
+ with antd.Col(span=12):
+ ms.Text("Col-12")
+ with antd.Col(span=6):
+ ms.Text("Col-6")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/grid/demos/playground.py b/components/antd/grid/demos/playground.py
new file mode 100644
index 0000000000000000000000000000000000000000..98ef90cc738c8e64b7a5dcd6b31dc0210573ecad
--- /dev/null
+++ b/components/antd/grid/demos/playground.py
@@ -0,0 +1,90 @@
+import json
+
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+gutters = {}
+vgutters = {}
+col_counts = {}
+
+for i, v in enumerate([8, 16, 24, 32, 40, 48]):
+ gutters[str(i)] = vgutters[str(i)] = v
+
+for i, v in enumerate([2, 3, 4, 6, 8, 12]):
+ col_counts[str(i)] = v
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ ms.Span("Horizontal Gutter (px): ")
+ with ms.Div(elem_style=dict(width="50%")):
+ horizontal_slider = antd.Slider(
+ value=1,
+ min=0,
+ max=len(gutters) - 1,
+ marks=gutters,
+ step=None,
+ tooltip=dict(
+ formatter=f"(value) => ({json.dumps(gutters)}[value])")
+ )
+ ms.Span("Vertical Gutter (px): ")
+ with ms.Div(elem_style=dict(width="50%")):
+ vertical_slider = antd.Slider(
+ value=1,
+ min=0,
+ max=len(vgutters) - 1,
+ marks=vgutters,
+ step=None,
+ tooltip=dict(
+ formatter=f"(value) => ({json.dumps(vgutters)}[value])"
+ ))
+ ms.Span("Column Count: ")
+ with ms.Div(elem_style=dict(width="50%", marginBottom=48)):
+ count_slider = antd.Slider(
+ value=1,
+ min=0,
+ max=len(col_counts) - 1,
+ marks=col_counts,
+ step=None,
+ tooltip=dict(
+ formatter=
+ f"(value) => ({json.dumps(col_counts)}[value])"))
+ with antd.Row(gutter=[gutters["1"], vgutters["1"]]) as row:
+ with ms.Each(value=[{
+ "span": 8
+ }, {
+ "span": 8
+ }, {
+ "span": 8
+ }] * 2) as cols:
+ with antd.Col(elem_style=dict(background="transparent",
+ border=0)):
+ ms.Div("Column",
+ elem_style=dict(height=120,
+ fontSize=14,
+ lineHeight='120px',
+ background="#0092ff",
+ borderRadius=4,
+ color="#fff",
+ textAlign='center'))
+
+ def on_change(_horizontal_slider, _vertical_slider, _count_slider):
+ return gr.update(gutter=[
+ gutters[str(_horizontal_slider)], vgutters[str(
+ _vertical_slider)]
+ ]), gr.update(
+ value=[{
+ "span": int(24 / col_counts[str(_count_slider)])
+ } for _ in range(col_counts[str(_count_slider)])] * 2)
+
+ gr.on([
+ horizontal_slider.change, vertical_slider.change,
+ count_slider.change
+ ],
+ fn=on_change,
+ inputs=[horizontal_slider, vertical_slider, count_slider],
+ outputs=[row, cols])
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/icon/README-zh_CN.md b/components/antd/icon/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..4305174efc7f28f0e23d00d3c1cf8c203554d013
--- /dev/null
+++ b/components/antd/icon/README-zh_CN.md
@@ -0,0 +1,9 @@
+# Icon
+
+Semantic vector graphics. See [Ant Design](https://ant.design/components/icon/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+
+<demo name="iconfont" title="Use iconfont.cn"></demo>
diff --git a/components/antd/icon/README.md b/components/antd/icon/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..4305174efc7f28f0e23d00d3c1cf8c203554d013
--- /dev/null
+++ b/components/antd/icon/README.md
@@ -0,0 +1,9 @@
+# Icon
+
+Semantic vector graphics. See [Ant Design](https://ant.design/components/icon/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+
+<demo name="iconfont" title="Use iconfont.cn"></demo>
diff --git a/components/antd/icon/app.py b/components/antd/icon/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/icon/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/icon/demos/basic.py b/components/antd/icon/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..edb488dddbb66ae25f62a0176c1a844a04dc363c
--- /dev/null
+++ b/components/antd/icon/demos/basic.py
@@ -0,0 +1,20 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space():
+ antd.Icon("HomeOutlined")
+ antd.Icon("SettingFilled")
+ antd.Icon("SmileOutlined")
+ antd.Icon("SyncOutlined", spin=True)
+ antd.Icon("SmileOutlined", rotate=180)
+ antd.Icon("LoadingOutlined")
+ antd.Icon("SmileTwoTone")
+ icon = antd.Icon("HeartTwoTone", two_tone_color="#eb2f96")
+ icon.click(lambda: print("clicked"))
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/icon/demos/iconfont.py b/components/antd/icon/demos/iconfont.py
new file mode 100644
index 0000000000000000000000000000000000000000..d724724ee1f3c92b2589f78109907ba8d5835646
--- /dev/null
+++ b/components/antd/icon/demos/iconfont.py
@@ -0,0 +1,22 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ # If you are using [iconfont.cn](https://www.iconfont.cn/), you can use the icons in your project gracefully.
+ with antd.Icon.IconfontProvider(script_url=[
+ "//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js",
+ "//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js"
+ ]):
+ with antd.Space():
+ antd.Icon("icon-python")
+ antd.Icon("icon-tuichu")
+ antd.Icon("icon-facebook",
+ elem_style=dict(color="#1877F2"))
+ antd.Icon("icon-twitter")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/image/README-zh_CN.md b/components/antd/image/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..cd6eed9e0ab42b3cbda213d001837204d22006c6
--- /dev/null
+++ b/components/antd/image/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Image
+
+Preview-able image. See [Ant Design](https://ant.design/components/image/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/image/README.md b/components/antd/image/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..cd6eed9e0ab42b3cbda213d001837204d22006c6
--- /dev/null
+++ b/components/antd/image/README.md
@@ -0,0 +1,7 @@
+# Image
+
+Preview-able image. See [Ant Design](https://ant.design/components/image/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/image/app.py b/components/antd/image/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/image/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/image/demos/basic.py b/components/antd/image/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..c09a323f0b8f28ab872cbcb15276eaecf2f6e384
--- /dev/null
+++ b/components/antd/image/demos/basic.py
@@ -0,0 +1,40 @@
+import os
+
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Image(
+ "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
+ width=200)
+ antd.Image(
+ "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
+ preview=False,
+ width=200)
+ antd.Image(
+ os.path.join(os.path.dirname(__file__),
+ "../resources/modelscope.png"))
+ antd.Divider("Multiple image preview")
+ with antd.Image.PreviewGroup():
+ antd.Image(
+ "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
+ width=200)
+ antd.Image(
+ "https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg",
+ width=200)
+ antd.Divider("Preview from one image")
+ with antd.Image.PreviewGroup(items=[
+ 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
+ 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
+ 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
+ ]):
+ antd.Image(
+ "https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp",
+ width=200)
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/image/resources/modelscope.png b/components/antd/image/resources/modelscope.png
new file mode 100644
index 0000000000000000000000000000000000000000..1fb167d3fefdd804744be42404612032e4fc534f
Binary files /dev/null and b/components/antd/image/resources/modelscope.png differ
diff --git a/components/antd/input/README-zh_CN.md b/components/antd/input/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..c1c832ce44bb7317cd1fefe063216d0be3d7edab
--- /dev/null
+++ b/components/antd/input/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Input
+
+Through mouse or keyboard input content, it is the most basic form field wrapper. See [Ant Design](https://ant.design/components/input/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/input/README.md b/components/antd/input/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..c1c832ce44bb7317cd1fefe063216d0be3d7edab
--- /dev/null
+++ b/components/antd/input/README.md
@@ -0,0 +1,7 @@
+# Input
+
+Through mouse or keyboard input content, it is the most basic form field wrapper. See [Ant Design](https://ant.design/components/input/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/input/app.py b/components/antd/input/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/input/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/input/demos/basic.py b/components/antd/input/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..800393a9984011da1831b057957316123eabf483
--- /dev/null
+++ b/components/antd/input/demos/basic.py
@@ -0,0 +1,31 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(direction="vertical"):
+ antd.Input()
+ antd.Input.Password()
+ antd.Input.Textarea(
+ placeholder=
+ "Autosize height with minimum and maximum number of lines",
+ auto_size={
+ "minRows": 2,
+ "maxRows": 6
+ })
+ antd.Input.Search(placeholder="Input search text",
+ addon_before="https://",
+ allow_clear=True)
+ with antd.Input.Search(enter_button="Search",
+ placeholder="input search text",
+ size="large"):
+ with ms.Slot("suffix"):
+ antd.Icon("AudioOutlined",
+ elem_style=dict(fontSize=16,
+ color="#1677ff"))
+ antd.Input.OTP()
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/input_number/README-zh_CN.md b/components/antd/input_number/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..ae09ddd8155785e35e8c16350f50418648efb1f5
--- /dev/null
+++ b/components/antd/input_number/README-zh_CN.md
@@ -0,0 +1,7 @@
+# InputNumber
+
+Enter a number within certain range with the mouse or keyboard. See [Ant Design](https://ant.design/components/input-number/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/input_number/README.md b/components/antd/input_number/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..ae09ddd8155785e35e8c16350f50418648efb1f5
--- /dev/null
+++ b/components/antd/input_number/README.md
@@ -0,0 +1,7 @@
+# InputNumber
+
+Enter a number within certain range with the mouse or keyboard. See [Ant Design](https://ant.design/components/input-number/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/input_number/app.py b/components/antd/input_number/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/input_number/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/input_number/demos/basic.py b/components/antd/input_number/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..a92ba4fc8e7362cbc5068e9e0de233d7a19d9efe
--- /dev/null
+++ b/components/antd/input_number/demos/basic.py
@@ -0,0 +1,42 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(direction="vertical"):
+ antd.InputNumber()
+ antd.InputNumber(min=1, max=10, keyboard=True)
+ antd.InputNumber(value=100, addon_after="$", addon_before="+")
+ with antd.InputNumber(value=100):
+ with ms.Slot("addonBefore"):
+ antd.Select(value="add",
+ elem_style=dict(width=60),
+ options=[{
+ "value": "add",
+ "label": "+"
+ }, {
+ "value": "minus",
+ "label": "-"
+ }])
+ with ms.Slot("addonAfter"):
+ antd.Select(value="USD",
+ elem_style=dict(width=60),
+ options=[{
+ "value": "USD",
+ "label": "$"
+ }, {
+ "value": "EUR",
+ "label": "€"
+ }, {
+ "value": "GBP",
+ "label": "£"
+ }, {
+ "value": "CNY",
+ "label": "¥"
+ }])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/layout/README-zh_CN.md b/components/antd/layout/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..dd78e41f375f6f85fdab538ce4f76137d4f0e4e1
--- /dev/null
+++ b/components/antd/layout/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Layout
+
+Handling the overall layout of a page. See [Ant Design](https://ant.design/components/layout/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/layout/README.md b/components/antd/layout/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..dd78e41f375f6f85fdab538ce4f76137d4f0e4e1
--- /dev/null
+++ b/components/antd/layout/README.md
@@ -0,0 +1,7 @@
+# Layout
+
+Handling the overall layout of a page. See [Ant Design](https://ant.design/components/layout/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/layout/app.py b/components/antd/layout/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/layout/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/layout/demos/basic.py b/components/antd/layout/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..e566ac68235ef4ca0aff987e3e9cc24a9242fbb6
--- /dev/null
+++ b/components/antd/layout/demos/basic.py
@@ -0,0 +1,88 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+header_style = {
+ "textAlign": 'center',
+ "color": '#fff',
+ "height": 64,
+ "paddingInline": 48,
+ "lineHeight": '64px',
+ "backgroundColor": '#4096ff',
+}
+
+content_style = {
+ "textAlign": 'center',
+ "minHeight": 120,
+ "lineHeight": '120px',
+ "color": '#fff',
+ "backgroundColor": '#0958d9',
+}
+
+sider_style = {
+ "textAlign": 'center',
+ "lineHeight": '120px',
+ "color": '#fff',
+ "backgroundColor": '#1677ff',
+}
+
+footer_style = {
+ "textAlign": 'center',
+ "color": '#fff',
+ "backgroundColor": '#4096ff',
+}
+
+layout_style = {
+ "borderRadius": 8,
+ "overflow": 'hidden',
+ "width": 'calc(50% - 8px)',
+ "maxWidth": 'calc(50% - 8px)',
+}
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Flex(gap="middle", wrap="wrap"):
+ with antd.Layout(elem_style=layout_style):
+ with antd.Layout.Header(elem_style=header_style):
+ ms.Text("Header")
+ with antd.Layout.Content(elem_style=content_style):
+ ms.Text("Content")
+ with antd.Layout.Footer(elem_style=footer_style):
+ ms.Text("Footer")
+ with antd.Layout(elem_style=layout_style):
+ with antd.Layout.Header(elem_style=header_style):
+ ms.Text("Header")
+ with antd.Layout():
+ with antd.Layout.Sider(width="25%",
+ elem_style=sider_style):
+ ms.Text("Sider")
+ with antd.Layout.Content(elem_style=content_style):
+ ms.Text("Content")
+ with antd.Layout.Footer(elem_style=footer_style):
+ ms.Text("Footer")
+ with antd.Layout(elem_style=layout_style):
+ with antd.Layout.Header(elem_style=header_style):
+ ms.Text("Header")
+ with antd.Layout():
+ with antd.Layout.Content(elem_style=content_style):
+ ms.Text("Content")
+ with antd.Layout.Sider(width="25%",
+ elem_style=sider_style):
+ ms.Text("Sider")
+ with antd.Layout.Footer(elem_style=footer_style):
+ ms.Text("Footer")
+ with antd.Layout(elem_style=layout_style):
+ with antd.Layout.Sider(width="25%",
+ elem_style=sider_style):
+ ms.Text("Sider")
+ with antd.Layout():
+ with antd.Layout.Header(elem_style=header_style):
+ ms.Text("Header")
+ with antd.Layout.Content(elem_style=content_style):
+ ms.Text("Content")
+ with antd.Layout.Footer(elem_style=footer_style):
+ ms.Text("Footer")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/list/README-zh_CN.md b/components/antd/list/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..14165ff022f0f9e417ee9dde45eee01f907240d6
--- /dev/null
+++ b/components/antd/list/README-zh_CN.md
@@ -0,0 +1,8 @@
+# List
+
+Basic list display, which can carry text, lists, pictures, paragraphs. See [Ant Design](https://ant.design/components/list/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="vertical_item" title="Vertical Item"></demo>
diff --git a/components/antd/list/README.md b/components/antd/list/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..14165ff022f0f9e417ee9dde45eee01f907240d6
--- /dev/null
+++ b/components/antd/list/README.md
@@ -0,0 +1,8 @@
+# List
+
+Basic list display, which can carry text, lists, pictures, paragraphs. See [Ant Design](https://ant.design/components/list/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="vertical_item" title="Vertical Item"></demo>
diff --git a/components/antd/list/app.py b/components/antd/list/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/list/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/list/demos/basic.py b/components/antd/list/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..d42de7fb2d216fc3ac672bf765eadbd48cbe562c
--- /dev/null
+++ b/components/antd/list/demos/basic.py
@@ -0,0 +1,52 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [{
+ "text": 'Racing car sprays burning fuel into crowd.',
+}, {
+ "text": 'Japanese princess to wed commoner.',
+}, {
+ "text": 'Australian walks 100km after outback crash.',
+}, {
+ "text": 'Man charged over missing wedding girl.',
+}, {
+ "text": 'Los Angeles battles huge wildfires.',
+}]
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Divider("Static Render")
+ with antd.List(header="Header", footer="Footer", bordered=True):
+ for item in data:
+ with antd.List.Item():
+ antd.Typography.Text("[ITEM]", mark=True)
+ ms.Text(item["text"])
+
+ antd.Divider("Dynamic Render")
+ with antd.List(header="Header", footer="Footer", bordered=True):
+ with ms.Each(value=data):
+ with antd.List.Item():
+ antd.Typography.Text("[ITEM]", mark=True)
+ ms.Text(as_item="text")
+ antd.Divider("Dynamic Render with JavaScript")
+ antd.List(header="Header",
+ footer="Footer",
+ bordered=True,
+ data_source=data,
+ render_item="""(item) => {
+ const React = window.ms_globals.React;
+ const antd = window.ms_globals.antd;
+ return React.createElement(
+ antd.List.Item,
+ null,
+ React.createElement(antd.Typography.Text, { mark: true }, '[ITEM]'),
+ React.createElement(antd.Typography.Text, null, item.text)
+ );
+};
+""")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/list/demos/vertical_item.py b/components/antd/list/demos/vertical_item.py
new file mode 100644
index 0000000000000000000000000000000000000000..e2e928593f19b66caba95bfc6091893bf21992ab
--- /dev/null
+++ b/components/antd/list/demos/vertical_item.py
@@ -0,0 +1,67 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [{
+ 'avatar':
+ f'https://api.dicebear.com/7.x/miniavs/svg?seed={i}',
+ "link": {
+ "href": "https://ant.design",
+ "value": f"ant design part {i}"
+ },
+ "meta": {
+ 'description':
+ 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
+ },
+ 'content':
+ 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
+} for i in range(10)]
+
+page_size = 3
+
+
+def IconText(icon: str, text: str):
+ with antd.Space():
+ antd.Icon(icon)
+ ms.Text(text)
+
+
+def on_pagination_change(e: gr.EventData):
+ current = e._data["payload"][0]
+ return gr.update(value=data[(current - 1) * 3:current * 3])
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.List(item_layout="vertical",
+ size="large",
+ pagination=dict(total=len(data),
+ pageSize=page_size)) as list:
+ with ms.Slot("footer"):
+ with ms.Div():
+ antd.Typography.Text('ant design', strong=True)
+ ms.Text("footer part")
+ with ms.Each(value=data[0:3]) as list_items:
+ with antd.List.Item():
+ with ms.Slot("actions"):
+ IconText('StarOutlined', 156)
+ IconText('LikeOutlined', 156)
+ IconText('MessageOutlined', 2)
+ with ms.Slot("extra"):
+ antd.Image(
+ "https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png",
+ preview=False,
+ alt="logo",
+ width=272)
+ with antd.List.Item.Meta(as_item="meta"):
+ with ms.Slot("avatar"):
+ antd.Avatar(as_item="avatar")
+ with ms.Slot("title"):
+ antd.Typography.Link(as_item="link")
+ ms.Text(as_item="content")
+ list.pagination_change(fn=on_pagination_change,
+ outputs=[list_items])
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/mentions/README-zh_CN.md b/components/antd/mentions/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..a4edd7015cd46ff41f776cf92e493ed9e1ec7f92
--- /dev/null
+++ b/components/antd/mentions/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Mentions
+
+Used to mention someone or something in an input. See [Ant Design](https://ant.design/components/mentions/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="dynamic_options" title="Dynamic Options"></demo>
diff --git a/components/antd/mentions/README.md b/components/antd/mentions/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..a4edd7015cd46ff41f776cf92e493ed9e1ec7f92
--- /dev/null
+++ b/components/antd/mentions/README.md
@@ -0,0 +1,8 @@
+# Mentions
+
+Used to mention someone or something in an input. See [Ant Design](https://ant.design/components/mentions/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="dynamic_options" title="Dynamic Options"></demo>
diff --git a/components/antd/mentions/app.py b/components/antd/mentions/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/mentions/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/mentions/demos/basic.py b/components/antd/mentions/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..1badd28ab25544b9652447953b59bd27459fdee5
--- /dev/null
+++ b/components/antd/mentions/demos/basic.py
@@ -0,0 +1,36 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(direction="vertical"):
+ antd.Mentions(elem_style=dict(width=320),
+ placeholder="Input @ to mention",
+ options=[{
+ "value": "modelscope",
+ "label": "modelscope"
+ }, {
+ "value": "gradio",
+ "label": "gradio"
+ }, {
+ "value": "ant design",
+ "label": "ant design"
+ }])
+ with antd.Mentions(elem_style=dict(width=320),
+ prefix=['@', "#"],
+ placeholder="Input @ or # to mention"):
+ with antd.Mentions.Option(value="modelscope"):
+ with ms.Slot("label"):
+ antd.Typography.Text("modelscope", type="success")
+ with antd.Mentions.Option(value="gradio"):
+ with ms.Slot("label"):
+ antd.Typography.Text("gradio", type="success")
+ with antd.Mentions.Option(value="ant design"):
+ with ms.Slot("label"):
+ antd.Typography.Text("ant design", type="success")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/mentions/demos/dynamic_options.py b/components/antd/mentions/demos/dynamic_options.py
new file mode 100644
index 0000000000000000000000000000000000000000..bdcd89980cc0cd6e14efb8187f78b9aeabb91d4e
--- /dev/null
+++ b/components/antd/mentions/demos/dynamic_options.py
@@ -0,0 +1,43 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def on_search(e: gr.EventData):
+ prefix = e._data['payload'][1]
+ if prefix == '@':
+ return gr.update(options=[{
+ "value": "modelscope",
+ "label": "modelscope"
+ }, {
+ "value": "gradio",
+ "label": "gradio"
+ }, {
+ "value": "ant design",
+ "label": "ant design"
+ }])
+ elif prefix == '#':
+ return gr.update(options=[{
+ "value": "1.0",
+ "label": "1.0"
+ }, {
+ "value": "2.0",
+ "label": "2.0"
+ }, {
+ "value": "3.0",
+ "label": "3.0"
+ }])
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ mentions = antd.Mentions(
+ elem_style=dict(width='100%'),
+ prefix=['@', "#"],
+ placeholder="input @ to mention people, # to mention tag")
+ mentions.search(fn=on_search, outputs=[mentions])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/menu/README-zh_CN.md b/components/antd/menu/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..b01c0a99516fd74910fb8cea226ad747f742f444
--- /dev/null
+++ b/components/antd/menu/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Menu
+
+A versatile menu for navigation. See [Ant Design](https://ant.design/components/menu/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/menu/README.md b/components/antd/menu/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..b01c0a99516fd74910fb8cea226ad747f742f444
--- /dev/null
+++ b/components/antd/menu/README.md
@@ -0,0 +1,7 @@
+# Menu
+
+A versatile menu for navigation. See [Ant Design](https://ant.design/components/menu/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/menu/app.py b/components/antd/menu/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/menu/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/menu/demos/basic.py b/components/antd/menu/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..d135632a0ffd68c2a137ff5754606d70cf2a4064
--- /dev/null
+++ b/components/antd/menu/demos/basic.py
@@ -0,0 +1,64 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+default_mode = 'horizontal'
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ mode_select = antd.Select(value=default_mode,
+ options=[{
+ "label": "horizontal",
+ "value": "horizontal"
+ }, {
+ "label": "inline",
+ "value": "inline"
+ }, {
+ "label": "vertical",
+ "value": "vertical"
+ }],
+ elem_style=dict(width=200))
+ inline_collapsed_switch = antd.Switch(
+ False,
+ checked_children="Inline Collapsed",
+ un_checked_children="Inline Expanded")
+ with antd.Menu(selected_keys=[default_mode],
+ mode="horizontal") as menu:
+ with antd.Menu.Item(key="mail", label="Navigation One"):
+ with ms.Slot("icon"):
+ antd.Icon("MailOutlined")
+ with antd.Menu.Item(key="app",
+ label="Navigation Two",
+ disabled=True):
+ with ms.Slot("icon"):
+ antd.Icon("AppstoreOutlined")
+ with antd.Menu.Item(key="SubMenu",
+ label="Navigation Three - Submenu"):
+ with ms.Slot("icon"):
+ antd.Icon("SettingOutlined")
+ with antd.Menu.Item(type="group", label="Item 1"):
+ antd.Menu.Item(label="Option 1", key="setting:1")
+ antd.Menu.Item(label="Option 2", key="setting:2")
+ with antd.Menu.Item(type="group", label="Item 2"):
+ antd.Menu.Item(label="Option 3", key="setting:3")
+ antd.Menu.Item(label="Option 4", key="setting:4")
+ with antd.Menu.Item(key="modelscope",
+ label="Navigation Four - Link"):
+ with ms.Slot("label"):
+ antd.Button("Navigation Four - Link",
+ type="link",
+ href="https://modelscope.cn",
+ href_target="_blank")
+ mode_select.change(
+ fn=lambda _mode_select: gr.update(mode=_mode_select),
+ inputs=[mode_select],
+ outputs=[menu])
+ inline_collapsed_switch.change(
+ fn=lambda _inline_collapsed_switch: gr.update(
+ inline_collapsed=_inline_collapsed_switch),
+ inputs=[inline_collapsed_switch],
+ outputs=[menu])
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/message/README-zh_CN.md b/components/antd/message/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..6a29b6234f3685987cb72a7eba3552813da6c929
--- /dev/null
+++ b/components/antd/message/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Message
+
+Display global messages as feedback in response to user operations. See [Ant Design](https://ant.design/components/message/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/message/README.md b/components/antd/message/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..6a29b6234f3685987cb72a7eba3552813da6c929
--- /dev/null
+++ b/components/antd/message/README.md
@@ -0,0 +1,7 @@
+# Message
+
+Display global messages as feedback in response to user operations. See [Ant Design](https://ant.design/components/message/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/message/app.py b/components/antd/message/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/message/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/message/demos/basic.py b/components/antd/message/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..36d34b558a5d78b22b93d7a8c18b9197024fdbdb
--- /dev/null
+++ b/components/antd/message/demos/basic.py
@@ -0,0 +1,51 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def info():
+ return gr.update(visible=True,
+ type="info",
+ content="This is a info message.",
+ key="info")
+
+
+def success():
+ return gr.update(visible=True,
+ type="success",
+ content="This is a success message.",
+ key="success")
+
+
+def error():
+ return gr.update(visible=True,
+ type="error",
+ content="This is an error message.",
+ key="error")
+
+
+def warning():
+ return gr.update(visible=True,
+ type="warning",
+ content="This is a warning message.",
+ key="warning")
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space():
+ info_btn = antd.Button("Info")
+ success_btn = antd.Button("Success")
+ error_btn = antd.Button("Error")
+ warning_btn = antd.Button("Warning")
+
+ message = antd.Message(visible=False)
+ info_btn.click(info, outputs=[message])
+ success_btn.click(success, outputs=[message])
+ error_btn.click(error, outputs=[message])
+ warning_btn.click(warning, outputs=[message])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/modal/README-zh_CN.md b/components/antd/modal/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..3e0f5e093c13407ffd2b4b7bf41b1621753433a7
--- /dev/null
+++ b/components/antd/modal/README-zh_CN.md
@@ -0,0 +1,12 @@
+# Modal
+
+Display a modal dialog box, providing a title, content area, and action buttons. See [Ant Design](https://ant.design/components/modal/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="custom_footer" title="Custom Footer"></demo>
+
+Like `Message` and `Notification`, `Modal` can be used as a static method.
+
+<demo name="static" title="Static"></demo>
diff --git a/components/antd/modal/README.md b/components/antd/modal/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..3e0f5e093c13407ffd2b4b7bf41b1621753433a7
--- /dev/null
+++ b/components/antd/modal/README.md
@@ -0,0 +1,12 @@
+# Modal
+
+Display a modal dialog box, providing a title, content area, and action buttons. See [Ant Design](https://ant.design/components/modal/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="custom_footer" title="Custom Footer"></demo>
+
+Like `Message` and `Notification`, `Modal` can be used as a static method.
+
+<demo name="static" title="Static"></demo>
diff --git a/components/antd/modal/app.py b/components/antd/modal/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/modal/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/modal/demos/basic.py b/components/antd/modal/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..b0aa1bfe7682a02793aa8d3f76c86500daf94a31
--- /dev/null
+++ b/components/antd/modal/demos/basic.py
@@ -0,0 +1,19 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ btn = antd.Button("Open Modal", type="primary")
+ with antd.Modal(open=False, title="Basic Modal") as modal:
+ antd.Typography.Paragraph("Some contents...")
+ antd.Typography.Paragraph("Some contents...")
+ antd.Typography.Paragraph("Some contents...")
+ btn.click(lambda: gr.update(open=True), outputs=[modal])
+
+ modal.ok(lambda: gr.update(open=False), outputs=[modal])
+ modal.cancel(lambda: gr.update(open=False), outputs=[modal])
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/modal/demos/custom_footer.py b/components/antd/modal/demos/custom_footer.py
new file mode 100644
index 0000000000000000000000000000000000000000..c69e91152364aa58107e74f2d35a27671a92e017
--- /dev/null
+++ b/components/antd/modal/demos/custom_footer.py
@@ -0,0 +1,31 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ btn = antd.Button("Open Modal", type="primary")
+ with antd.Modal(open=False, title="Basic Modal") as modal:
+ with ms.Slot("footer"):
+ cancel_btn = antd.Button("Return")
+ submit_btn = antd.Button("Submit", type="primary")
+ link_btn = antd.Button("Search on Google",
+ type="primary",
+ href_target="_blank",
+ href="https://google.com")
+ antd.Typography.Paragraph("Some contents...")
+ antd.Typography.Paragraph("Some contents...")
+ antd.Typography.Paragraph("Some contents...")
+ btn.click(lambda: gr.update(open=True), outputs=[modal])
+
+ modal.ok(lambda: gr.update(open=False), outputs=[modal])
+
+ cancel_btn.click(lambda: gr.update(open=False), outputs=[modal])
+ modal.cancel(lambda: gr.update(open=False), outputs=[modal])
+ gr.on([submit_btn.click, link_btn.click],
+ fn=lambda: gr.update(open=False),
+ outputs=[modal])
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/modal/demos/static.py b/components/antd/modal/demos/static.py
new file mode 100644
index 0000000000000000000000000000000000000000..5b1ad89b97e915c5b3f1b5aa56fcde403769bf85
--- /dev/null
+++ b/components/antd/modal/demos/static.py
@@ -0,0 +1,74 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def info():
+ return gr.update(
+ visible=True,
+ mask_closable=False,
+ title="Info",
+ type="info",
+ content="This is a info message.",
+ )
+
+
+def success():
+ return gr.update(
+ visible=True,
+ mask_closable=False,
+ title="Success",
+ type="success",
+ content="This is a success message.",
+ )
+
+
+def error():
+ return gr.update(
+ visible=True,
+ mask_closable=False,
+ title="Error",
+ type="error",
+ content="This is an error message.",
+ )
+
+
+def warning():
+ return gr.update(
+ visible=True,
+ mask_closable=False,
+ title="Warning",
+ type="warning",
+ content="This is a warning message.",
+ )
+
+
+def confirm():
+ return gr.update(
+ visible=True,
+ mask_closable=True,
+ title="Confirm",
+ type="confirm",
+ content="This is a confirm message.",
+ )
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space():
+ info_btn = antd.Button("Info")
+ success_btn = antd.Button("Success")
+ error_btn = antd.Button("Error")
+ warning_btn = antd.Button("Warning")
+ confirm_btn = antd.Button("Confirm")
+
+ modal = antd.Modal.Static(visible=False)
+ info_btn.click(info, outputs=[modal])
+ success_btn.click(success, outputs=[modal])
+ error_btn.click(error, outputs=[modal])
+ warning_btn.click(warning, outputs=[modal])
+ confirm_btn.click(confirm, outputs=[modal])
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/notification/README-zh_CN.md b/components/antd/notification/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..0070d377106e24f93d03172d2dde6feb6b971c26
--- /dev/null
+++ b/components/antd/notification/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Notification
+
+Prompt notification message globally. See [Ant Design](https://ant.design/components/notification/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/notification/README.md b/components/antd/notification/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..0070d377106e24f93d03172d2dde6feb6b971c26
--- /dev/null
+++ b/components/antd/notification/README.md
@@ -0,0 +1,7 @@
+# Notification
+
+Prompt notification message globally. See [Ant Design](https://ant.design/components/notification/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/notification/app.py b/components/antd/notification/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/notification/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/notification/demos/basic.py b/components/antd/notification/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..c3cae097a6fa3d30cbc5cee9535df018282e19b4
--- /dev/null
+++ b/components/antd/notification/demos/basic.py
@@ -0,0 +1,59 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def info():
+ return gr.update(visible=True,
+ type="info",
+ message="Info Notification Message",
+ description="This is a info description.",
+ placement="topLeft",
+ key="info")
+
+
+def success():
+ return gr.update(visible=True,
+ type="success",
+ message="Success Notification Message",
+ description="This is a success description.",
+ placement="topRight",
+ key="success")
+
+
+def error():
+ return gr.update(visible=True,
+ type="error",
+ message="Error Notification Message",
+ description="This is an error description.",
+ placement="bottomLeft",
+ key="error")
+
+
+def warning():
+ return gr.update(visible=True,
+ type="warning",
+ message="Warning Notification Message",
+ description="This is a warning description.",
+ placement="bottomRight",
+ key="warning")
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space():
+ info_btn = antd.Button("Info")
+ success_btn = antd.Button("Success")
+ error_btn = antd.Button("Error")
+ warning_btn = antd.Button("Warning")
+
+ notification = antd.Notification(visible=False)
+ info_btn.click(info, outputs=[notification])
+ success_btn.click(success, outputs=[notification])
+ error_btn.click(error, outputs=[notification])
+ warning_btn.click(warning, outputs=[notification])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/overview/README-zh_CN.md b/components/antd/overview/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..e4ab567abb81f8af3058105f0956448fcad14f80
--- /dev/null
+++ b/components/antd/overview/README-zh_CN.md
@@ -0,0 +1,73 @@
+# 概览
+
+`modelscope_studio`集成了 [Ant Design](https://ant.design/) 的组件，并支持大部分的组件属性，您只需要引入`antd`模块即可直接使用。
+
+```python
+import modelscope_studio.components.antd as antd
+```
+
+## 快速开始
+
+<demo name="quick_start"></demo>
+
+注意：其中`ms.Application`与`antd.ConfigProvider`是必须的。
+
+- `Application` 包含了`modelscope_studio`中所有的组件依赖，请确保`modelscope_studio`所有导出的组件都被其包裹，否则页面将会无法成功预览。
+- `ConfigProvider` 与 Ant Design 中的功能一致，除此之外，我们还加了一些额外的适配来兼容 Gradio 的样式。因此，为了保证页面样式正常，所有的`antd`组件需要包裹在该组件下。
+
+## 属性限制
+
+由于 Python 的类型限制，一些组件属性的支持形式有所不同。
+
+### 事件
+
+在`antd`中，所有以`onXxx`形式绑定的事件，均改为了`gradio`的事件绑定形式，如`onClick`、`onChange`等。如果您想要获取事件参数，也需要绑定`gr.EventData`，所有的事件参数都通过数组的形式保存在`e._data["payload"]`中。
+
+<demo name="limit_event"></demo>
+
+### ReactNode
+
+在 Python 中无法直接将某个组件作为参数，因此我们提供了插槽机制，您可以使用`ms.Slot`来包裹需要被渲染的模块。
+
+<demo name="limit_react_node"></demo>
+
+**注：**
+
+- 您可以通过查看组件的`SLOTS`属性获取所有支持的插槽。
+- 如果您只想渲染一段字符串或数字，您依然可以直接将其作为组件的属性传入，无需使用`ms.Slot`。下面两种写法效果是一样的，并且更推荐直接作为组件属性传入：
+
+ ```python
+ antd.Card(title="Card Title")
+
+ with antd.Card():
+ ms.Slot("title"):
+ ms.Text("Card Title")
+ ```
+
+### 普通函数（(...args) => {}）
+
+为了支持在 Python 直接传入 Javascript 函数，我们将其改为了`str`类型。因此，您只需要传递普通的函数字符串即可，它会在前端被自动编译为 Javascript 函数。
+
+<demo name="limit_function"></demo>
+
+我们在全局注入了事件通知对象，您可以通过在函数中调用`window.ms_globals.dispatch`来主动向 Python 端发送事件，在 Python 端可以通过`ms.Application.custom`事件接收。
+
+<demo name="limit_function_with_event"></demo>
+
+### 返回 ReactNode 的函数 ((...args) => ReactNode)
+
+当您的 Javascript 函数返回值为 ReactNode 时，我们提供了两种处理方式：
+
+1. 将其当做普通的 ReactNode 值，继续使用`ms.Slot`来渲染模块，在此基础上，`ms.Slot`还支持传入`params_mapping`参数，该参数同样接收一个 Javascript 函数字符串，它可以将函数的参数映射为当前`slot`环境的上下文（具体请参考`ms.Each`）。
+
+<demo name="limit_react_node_function_by_slot"></demo>
+
+2. 将其当做普通函数，通过`window.ms_globals.React`与`window.ms_globals.antd`等全局变量在前端生成 ReactNode（注意此时不能使用 jsx，需要使用 `React.createElement`）。
+
+<demo name="limit_react_node_function_by_function"></demo>
+
+## 集成其他 Gradio 组件
+
+某些组件的插槽可能只支持`modelscope_studio`中的组件，如果您想要支持其他的 Gradio 组件，您需要使用`Fragment`来将其包裹。
+
+<demo name="integrate_other_components"></demo>
diff --git a/components/antd/overview/README.md b/components/antd/overview/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..82bb9278703414a46891fbeff9530cd6627a97d7
--- /dev/null
+++ b/components/antd/overview/README.md
@@ -0,0 +1,73 @@
+# Overview
+
+`modelscope_studio` integrates [Ant Design](https://ant.design/) components and supports most component properties. You can use them directly by importing the `antd` module.
+
+```python
+import modelscope_studio.components.antd as antd
+```
+
+## Quick Start
+
+<demo name="quick_start"></demo>
+
+Note: Both `ms.Application` and `antd.ConfigProvider` are required.
+
+- `Application` contains all component dependencies in `modelscope_studio`. Please ensure that all components exported from `modelscope_studio` are wrapped by it, otherwise the page will not be successfully previewed.
+- `ConfigProvider` functions the same as in Ant Design. Additionally, we have added some extra adaptations to be compatible with Gradio's styles. Therefore, to ensure normal page styling, all `antd` components need to be wrapped within this component.
+
+## Property Limitations
+
+Due to Python's type restrictions, the support for some component properties differs.
+
+### Events
+
+In `antd`, all events bound in the form of `onXxx` have been changed to Gradio's event binding form, such as `onClick`, `onChange`, etc. If you want to get event parameters, you also need to bind `gr.EventData`. All event parameters are stored in the form of an array in `e._data["payload"]`.
+
+<demo name="limit_event"></demo>
+
+### ReactNode
+
+In Python, it's not possible to directly pass a component as a parameter, so we provide a slot mechanism. You can use `ms.Slot` to wrap the module that needs to be rendered.
+
+<demo name="limit_react_node"></demo>
+
+**Note:**
+
+- You can view the `SLOTS` property of the component to get all supported slots.
+- If you only want to render a string or number, you can still pass it directly as a component property without using `ms.Slot`. The following two ways of writing have the same effect, and it's more recommended to pass it directly as a component property:
+
+ ```python
+ antd.Card(title="Card Title")
+
+ with antd.Card():
+ ms.Slot("title"):
+ ms.Text("Card Title")
+ ```
+
+### Regular Functions ((...args) => {})
+
+To support passing JavaScript functions directly in Python, we have changed them to `str` type. Therefore, you only need to pass a regular function string, and it will be automatically compiled into a JavaScript function on the frontend.
+
+<demo name="limit_function"></demo>
+
+We have injected a global event notification object. You can actively send events to the Python side by calling `window.ms_globals.dispatch` in the function, which can be received on the Python side through the `ms.Application.custom` event.
+
+<demo name="limit_function_with_event"></demo>
+
+### Functions Returning ReactNode ((...args) => ReactNode)
+
+When your JavaScript function returns a ReactNode, we provide two handling methods:
+
+1. Treat it as a regular ReactNode value and continue using `ms.Slot` to render the module. Additionally, `ms.Slot` supports passing a `params_mapping` parameter, which also accepts a JavaScript function string. It can map the function's parameters to the context of the current `slot` environment (refer to `ms.Each` for details).
+
+<demo name="limit_react_node_function_by_slot"></demo>
+
+2. Treat it as a regular function and generate ReactNode on the frontend using global variables like `window.ms_globals.React` and `window.ms_globals.antd` (note that JSX cannot be used here, you need to use `React.createElement`).
+
+<demo name="limit_react_node_function_by_function"></demo>
+
+## Integrating Other Gradio Components
+
+Some component slots may only support components from `modelscope_studio`. If you want to support other Gradio components, you need to wrap them with `Fragment`.
+
+<demo name="integrate_other_components"></demo>
diff --git a/components/antd/overview/app.py b/components/antd/overview/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/overview/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/overview/demos/integrate_other_components.py b/components/antd/overview/demos/integrate_other_components.py
new file mode 100644
index 0000000000000000000000000000000000000000..5749b5c185327b3fdf9730d97f94afd53ba45d40
--- /dev/null
+++ b/components/antd/overview/demos/integrate_other_components.py
@@ -0,0 +1,17 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space():
+ antd.Button("1")
+ antd.Button("2")
+ # other gradio components
+ with ms.Fragment():
+ gr.Button("3")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/overview/demos/limit_event.py b/components/antd/overview/demos/limit_event.py
new file mode 100644
index 0000000000000000000000000000000000000000..f41e652be3d60165d8fe1097aa0cde24292ab7e4
--- /dev/null
+++ b/components/antd/overview/demos/limit_event.py
@@ -0,0 +1,18 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def on_change(e: gr.EventData):
+ print(e._data["payload"])
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ rate = antd.Rate()
+ rate.change(on_change)
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/overview/demos/limit_function.py b/components/antd/overview/demos/limit_function.py
new file mode 100644
index 0000000000000000000000000000000000000000..646efb1f134bb26f2ca2e001afacb8fa2f7a49ae
--- /dev/null
+++ b/components/antd/overview/demos/limit_function.py
@@ -0,0 +1,14 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Input(show_count=dict(formatter="""({ count }) => {
+ return `${count} characters`;
+ }"""))
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/overview/demos/limit_function_with_event.py b/components/antd/overview/demos/limit_function_with_event.py
new file mode 100644
index 0000000000000000000000000000000000000000..61eb45a8cd6a426a57bef1e4272d4b8639677739
--- /dev/null
+++ b/components/antd/overview/demos/limit_function_with_event.py
@@ -0,0 +1,21 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def on_custom(e: gr.EventData):
+ print(e._data)
+
+
+with gr.Blocks() as demo:
+ with ms.Application() as app:
+ with antd.ConfigProvider():
+ antd.Input(show_count=dict(formatter="""({ count }) => {
+ window.ms_globals.dispatch({ type: "input_count_change", payload: count });
+ return `${count} characters`;
+ }"""))
+ app.custom(on_custom)
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/overview/demos/limit_react_node.py b/components/antd/overview/demos/limit_react_node.py
new file mode 100644
index 0000000000000000000000000000000000000000..70cf6f4b7419b583aab4bea7eef408fdf138ccb0
--- /dev/null
+++ b/components/antd/overview/demos/limit_react_node.py
@@ -0,0 +1,22 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Card():
+ ms.Div("Card Content")
+ ms.Div("Card Content")
+ ms.Div("Card Content")
+ # slots
+ with ms.Slot("title"):
+ ms.Text("Card Title")
+ with ms.Slot("extra"):
+ with antd.Button():
+ ms.Text("GitHub")
+ with ms.Slot("icon"):
+ antd.Icon("GithubOutlined")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/overview/demos/limit_react_node_function_by_function.py b/components/antd/overview/demos/limit_react_node_function_by_function.py
new file mode 100644
index 0000000000000000000000000000000000000000..d00467887901884bed0aab3b8aa60fe81189edc2
--- /dev/null
+++ b/components/antd/overview/demos/limit_react_node_function_by_function.py
@@ -0,0 +1,75 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def on_custom(e: gr.EventData):
+ print(e._data)
+
+
+with gr.Blocks() as demo:
+ with ms.Application() as app:
+ with antd.ConfigProvider():
+ with antd.Table([
+ {
+ "key": '1',
+ "name": 'Mike',
+ "age": 32,
+ "address": '10 Downing Street',
+ },
+ {
+ "key": '2',
+ "name": 'John',
+ "age": 42,
+ "address": '11 Downing Street',
+ },
+ ],
+ pagination=False):
+ antd.Table.Column(title="Name", data_index="name", key="name")
+ antd.Table.Column(title="Age", data_index="age", key="age")
+ antd.Table.Column(title="Address",
+ data_index="address",
+ key="address")
+ antd.Table.Column(title="Action",
+ key="action",
+ column_render="""(_, record) => {
+ const React = window.ms_globals.React;
+ const antd = window.ms_globals.antd;
+ const dispatch = window.ms_globals.dispatch;
+ return React.createElement(antd.Space, {
+ size: "middle",
+ children: [
+ React.createElement(antd.Button, {
+ type: "link",
+ onClick: () => {
+ dispatch({
+ type: "table_column_action",
+ payload: {
+ action: "invite",
+ record,
+ },
+ });
+ },
+ children: "Invite " + record.name
+ }),
+ React.createElement(antd.Button, {
+ type: "link",
+ children: "Delete",
+ onClick: () => {
+ dispatch({
+ type: "table_column_action",
+ payload: {
+ action: "delete",
+ record,
+ },
+ });
+ },
+ }),
+ ],
+ });
+ }""")
+
+ app.custom(on_custom)
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/overview/demos/limit_react_node_function_by_slot.py b/components/antd/overview/demos/limit_react_node_function_by_slot.py
new file mode 100644
index 0000000000000000000000000000000000000000..6d543362c52d06e9ec694780d21fccb3a0930fd9
--- /dev/null
+++ b/components/antd/overview/demos/limit_react_node_function_by_slot.py
@@ -0,0 +1,15 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Statistic(title="Active Users", value=112893):
+ with ms.Slot("formatter",
+ params_mapping="(value) => ({ text: { value }})"):
+ antd.Typography.Text(type="success", as_item="text")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/overview/demos/quick_start.py b/components/antd/overview/demos/quick_start.py
new file mode 100644
index 0000000000000000000000000000000000000000..e2e76aea925f9a76a561a46c5221cdf111459b7e
--- /dev/null
+++ b/components/antd/overview/demos/quick_start.py
@@ -0,0 +1,12 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Button("Hello Ant Design", type="primary")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/pagination/README-zh_CN.md b/components/antd/pagination/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..b8af2424acdae0c1f9874491b06aa90fce46b1ef
--- /dev/null
+++ b/components/antd/pagination/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Pagination
+
+A long list can be divided into several pages, and only one page will be loaded at a time. See [Ant Design](https://ant.design/components/pagination/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/pagination/README.md b/components/antd/pagination/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..b8af2424acdae0c1f9874491b06aa90fce46b1ef
--- /dev/null
+++ b/components/antd/pagination/README.md
@@ -0,0 +1,7 @@
+# Pagination
+
+A long list can be divided into several pages, and only one page will be loaded at a time. See [Ant Design](https://ant.design/components/pagination/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/pagination/app.py b/components/antd/pagination/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/pagination/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/pagination/demos/basic.py b/components/antd/pagination/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..7ef86e935fd2dc096f5acac413658835c5ffeeb2
--- /dev/null
+++ b/components/antd/pagination/demos/basic.py
@@ -0,0 +1,15 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Pagination(total=85,
+ show_quick_jumper=True,
+ show_size_changer=True,
+ show_total="(total) => `Total ${total} items`")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/popconfirm/README-zh_CN.md b/components/antd/popconfirm/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..972483ca2c1eebdae708335d9b0820dbba256fbb
--- /dev/null
+++ b/components/antd/popconfirm/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Popconfirm
+
+Pop up a bubble confirmation box for an action. See [Ant Design](https://ant.design/components/popconfirm/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/popconfirm/README.md b/components/antd/popconfirm/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..972483ca2c1eebdae708335d9b0820dbba256fbb
--- /dev/null
+++ b/components/antd/popconfirm/README.md
@@ -0,0 +1,7 @@
+# Popconfirm
+
+Pop up a bubble confirmation box for an action. See [Ant Design](https://ant.design/components/popconfirm/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/popconfirm/app.py b/components/antd/popconfirm/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/popconfirm/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/popconfirm/demos/basic.py b/components/antd/popconfirm/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..01eef8cc868250b7644b7adef60391ef4bc333de
--- /dev/null
+++ b/components/antd/popconfirm/demos/basic.py
@@ -0,0 +1,19 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Popconfirm(
+ title="Delete the task",
+ description="Are you sure to delete this task?",
+ ok_text="Yes",
+ cancel_text="No") as popconfirm:
+ antd.Button("Delete", danger=True)
+ popconfirm.confirm(lambda: print("confirm"))
+ popconfirm.cancel(lambda: print("cancel"))
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/popover/README-zh_CN.md b/components/antd/popover/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..61fee781aba475b20b2378bfe0ec03609c750465
--- /dev/null
+++ b/components/antd/popover/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Popover
+
+The floating card pops up when clicking/mouse hovering over an element. See [Ant Design](https://ant.design/components/popover/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/popover/README.md b/components/antd/popover/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..61fee781aba475b20b2378bfe0ec03609c750465
--- /dev/null
+++ b/components/antd/popover/README.md
@@ -0,0 +1,7 @@
+# Popover
+
+The floating card pops up when clicking/mouse hovering over an element. See [Ant Design](https://ant.design/components/popover/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/popover/app.py b/components/antd/popover/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/popover/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/popover/demos/basic.py b/components/antd/popover/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..ce9f7ab297186927a24c0e262fd89259e6a7a7e0
--- /dev/null
+++ b/components/antd/popover/demos/basic.py
@@ -0,0 +1,30 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def Content():
+ antd.Typography.Paragraph("Content")
+ antd.Typography.Paragraph("Content")
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space():
+ with antd.Popover(title="Title", trigger="hover"):
+ with ms.Slot("content"):
+ Content()
+ antd.Button("Hover me", type="primary")
+ with antd.Popover(title="Title", trigger="focus"):
+ with ms.Slot("content"):
+ Content()
+ antd.Button("Focus me", type="primary")
+ with antd.Popover(title="Title", trigger="click"):
+ with ms.Slot("content"):
+ Content()
+ antd.Button("Click me", type="primary")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/progress/README-zh_CN.md b/components/antd/progress/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..325305096c2132647acbb8f470dbab5398cecbc7
--- /dev/null
+++ b/components/antd/progress/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Progress
+
+Display the current progress of the operation. See [Ant Design](https://ant.design/components/progress/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/progress/README.md b/components/antd/progress/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..325305096c2132647acbb8f470dbab5398cecbc7
--- /dev/null
+++ b/components/antd/progress/README.md
@@ -0,0 +1,7 @@
+# Progress
+
+Display the current progress of the operation. See [Ant Design](https://ant.design/components/progress/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/progress/app.py b/components/antd/progress/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/progress/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/progress/demos/basic.py b/components/antd/progress/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..27ade316b25fb8c1cd7c3ffd2fb769fb2d7b963c
--- /dev/null
+++ b/components/antd/progress/demos/basic.py
@@ -0,0 +1,39 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Flex(gap="small", vertical=True):
+ antd.Progress(percent=30)
+ antd.Progress(percent=50, status='active')
+ antd.Progress(percent=70, status="exception")
+ antd.Progress(percent=100)
+ antd.Progress(percent=50, show_info=False)
+ antd.Divider("Circular progress bar")
+ with antd.Flex(gap="small", wrap=True):
+ antd.Progress(type="circle", percent=75)
+ antd.Progress(type="circle", percent=70, status="exception")
+ antd.Progress(type="circle", percent=100)
+ antd.Progress(
+ type="circle",
+ percent=100,
+ format=
+ """( percent ) => percent === 100 ? 'Done' : percent + '%' """
+ )
+ antd.Divider("Progress bar with steps")
+ with antd.Flex(gap="small", vertical=True):
+ antd.Progress(percent=50, steps=3)
+ antd.Progress(percent=30, steps=5)
+ antd.Progress(percent=100,
+ steps=5,
+ size="small",
+ stroke_color='#f56a00')
+ antd.Progress(percent=60,
+ steps=5,
+ stroke_color=['#f56a00', '#1890ff', '#13c2c2'])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/qr_code/README-zh_CN.md b/components/antd/qr_code/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..aee01c17512cdfae62d11c9e1944fa636800df27
--- /dev/null
+++ b/components/antd/qr_code/README-zh_CN.md
@@ -0,0 +1,7 @@
+# QRCode
+
+Components that can convert text into QR codes, and support custom color and logo. See [Ant Design](https://ant.design/components/qr-code/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/qr_code/README.md b/components/antd/qr_code/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..aee01c17512cdfae62d11c9e1944fa636800df27
--- /dev/null
+++ b/components/antd/qr_code/README.md
@@ -0,0 +1,7 @@
+# QRCode
+
+Components that can convert text into QR codes, and support custom color and logo. See [Ant Design](https://ant.design/components/qr-code/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/qr_code/app.py b/components/antd/qr_code/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/qr_code/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/qr_code/demos/basic.py b/components/antd/qr_code/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..93b7b6b7092bceb585f32d1db8abfc1ee397d0c3
--- /dev/null
+++ b/components/antd/qr_code/demos/basic.py
@@ -0,0 +1,19 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.QRCode("https://ant.design")
+ antd.Divider("With Icon")
+ antd.QRCode(
+ value="https://ant.design/",
+ error_level='H',
+ icon=
+ "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+ )
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/radio/README-zh_CN.md b/components/antd/radio/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..71aea44541e1aaa79446602c3329b027d752e7b3
--- /dev/null
+++ b/components/antd/radio/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Radio
+
+Used to select a single state from multiple options. See [Ant Design](https://ant.design/components/radio/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/radio/README.md b/components/antd/radio/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..71aea44541e1aaa79446602c3329b027d752e7b3
--- /dev/null
+++ b/components/antd/radio/README.md
@@ -0,0 +1,7 @@
+# Radio
+
+Used to select a single state from multiple options. See [Ant Design](https://ant.design/components/radio/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/radio/app.py b/components/antd/radio/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/radio/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/radio/demos/basic.py b/components/antd/radio/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..dab1862f455315bccd00858a8a7d61030cd43373
--- /dev/null
+++ b/components/antd/radio/demos/basic.py
@@ -0,0 +1,40 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Radio():
+ ms.Text("Radio")
+ antd.Divider("Radio Group")
+ with antd.Radio.Group():
+ with antd.Radio(group_value=1):
+ ms.Text("A")
+ with antd.Radio(group_value=2):
+ ms.Text("B")
+ with antd.Radio(group_value=3):
+ ms.Text("C")
+ with antd.Radio(group_value=4):
+ ms.Text("D")
+ antd.Divider("Configuring Options")
+ antd.Radio.Group(option_type="button",
+ button_style="solid",
+ options=[
+ {
+ "label": 'Apple',
+ "value": 'Apple'
+ },
+ {
+ "label": 'Pear',
+ "value": 'Pear'
+ },
+ {
+ "label": 'Orange',
+ "value": 'Orange',
+ "disabled": True
+ },
+ ])
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/rate/README-zh_CN.md b/components/antd/rate/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..13098b21ef12657322134a3a491de2b87e908a18
--- /dev/null
+++ b/components/antd/rate/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Rate
+
+Used for rating operation on something. See [Ant Design](https://ant.design/components/rate/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/rate/README.md b/components/antd/rate/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..13098b21ef12657322134a3a491de2b87e908a18
--- /dev/null
+++ b/components/antd/rate/README.md
@@ -0,0 +1,7 @@
+# Rate
+
+Used for rating operation on something. See [Ant Design](https://ant.design/components/rate/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/rate/app.py b/components/antd/rate/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/rate/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/rate/demos/basic.py b/components/antd/rate/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..53c0ad9d2af38728ab0592aff237c26a7b31e7ab
--- /dev/null
+++ b/components/antd/rate/demos/basic.py
@@ -0,0 +1,20 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(direction="vertical"):
+ antd.Rate(tooltips=[
+ 'terrible', 'bad', 'normal', 'good', 'wonderful'
+ ])
+ antd.Rate(allow_half=True, allow_clear=False)
+ antd.Rate(value=2, character="({ index = 0 }) => index + 1")
+ antd.Rate(value=2, character="A", allow_half=True)
+ with antd.Rate(value=3):
+ with ms.Slot("character"):
+ antd.Icon("SmileOutlined")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/result/README-zh_CN.md b/components/antd/result/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..450ad8f47b9626db67ee0066251069942a29295e
--- /dev/null
+++ b/components/antd/result/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Result
+
+Used to feedback the processing results of a series of operations. See [Ant Design](https://ant.design/components/result/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/result/README.md b/components/antd/result/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..450ad8f47b9626db67ee0066251069942a29295e
--- /dev/null
+++ b/components/antd/result/README.md
@@ -0,0 +1,7 @@
+# Result
+
+Used to feedback the processing results of a series of operations. See [Ant Design](https://ant.design/components/result/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/result/app.py b/components/antd/result/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/result/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/result/demos/basic.py b/components/antd/result/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..9db8e2bcbc30eae7fc36cab661fccbf590b34e28
--- /dev/null
+++ b/components/antd/result/demos/basic.py
@@ -0,0 +1,57 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Divider("Success")
+ with antd.Result(
+ status="success",
+ title="Successfully Purchased Cloud Server ECS!",
+ sub_title=
+ "Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.",
+ ):
+ with ms.Slot("extra"):
+ antd.Button("Go Console", type="primary")
+ antd.Button("Buy Again")
+ antd.Divider("Info")
+ with antd.Result(title="Your operation has been executed", ):
+ with ms.Slot("extra"):
+ antd.Button("Go Console", type="primary")
+ antd.Divider("Warning")
+ with antd.Result(
+ status="warning",
+ title="There are some problems with your operation.",
+ ):
+ with ms.Slot("extra"):
+ antd.Button("Go Console", type="primary")
+ antd.Divider("Error")
+ with antd.Result(
+ status="error",
+ title="Submission Failed.",
+ sub_title=
+ "Please check and modify the following information before resubmitting."
+ ):
+ with ms.Slot("extra"):
+ antd.Button("Go Console", type="primary")
+ antd.Button("Buy Again")
+ with ms.Div():
+ with antd.Typography.Paragraph():
+ antd.Typography.Text(
+ "The content you submitted has the following error:",
+ strong=True,
+ elem_style=dict(fontSize=16))
+ with antd.Typography.Paragraph():
+ antd.Icon("CloseCircleOutlined",
+ elem_style=dict(color="red"))
+ ms.Text("Your account has been frozen.")
+ antd.Typography.Link("Thaw immediately >")
+ with antd.Typography.Paragraph():
+ antd.Icon("CloseCircleOutlined",
+ elem_style=dict(color="red"))
+ ms.Text("our account is not yet eligible to apply.")
+ antd.Typography.Link("TApply Unlock >")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/segmented/README-zh_CN.md b/components/antd/segmented/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..4d70176be7087717aace2a269a3ce5464f7909f7
--- /dev/null
+++ b/components/antd/segmented/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Segmented
+
+Display multiple options and allow users to select a single option. See [Ant Design](https://ant.design/components/segmented/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/segmented/README.md b/components/antd/segmented/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..4d70176be7087717aace2a269a3ce5464f7909f7
--- /dev/null
+++ b/components/antd/segmented/README.md
@@ -0,0 +1,7 @@
+# Segmented
+
+Display multiple options and allow users to select a single option. See [Ant Design](https://ant.design/components/segmented/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/segmented/app.py b/components/antd/segmented/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/segmented/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/segmented/demos/basic.py b/components/antd/segmented/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..cb67026387ac4d413bc464ba1d325aac04e47345
--- /dev/null
+++ b/components/antd/segmented/demos/basic.py
@@ -0,0 +1,53 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(direction="vertical"):
+ antd.Segmented(options=[
+ 'Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly'
+ ])
+ antd.Segmented(options=[
+ 'Daily',
+ {
+ "label": 'Weekly',
+ "value": 'Weekly',
+ "disabled": True
+ },
+ 'Monthly',
+ {
+ "label": 'Quarterly',
+ "value": 'Quarterly',
+ "disabled": True
+ },
+ 'Yearly',
+ ])
+ with antd.Segmented():
+ with antd.Segmented.Option(value="user1"):
+ with ms.Slot("label"):
+ with ms.Div():
+ antd.Avatar(
+ "https://api.dicebear.com/7.x/miniavs/svg?seed=8"
+ )
+ ms.Div("User 1")
+ with antd.Segmented.Option(value="user2"):
+ with ms.Slot("label"):
+ with ms.Div(elem_style=dict(padding=4)):
+ with antd.Avatar(elem_style=dict(
+ backgroundColor="#f56a00")):
+ ms.Text("K")
+ ms.Div("User 2")
+ with antd.Segmented.Option(value="user3"):
+ with ms.Slot("label"):
+ with ms.Div(elem_style=dict(padding=4)):
+ with antd.Avatar(elem_style=dict(
+ backgroundColor="#87d068")):
+ with ms.Slot("icon"):
+ antd.Icon("UserOutlined")
+ ms.Div("User 3")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/select/README-zh_CN.md b/components/antd/select/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..bd061d8a2e3ade21a334d42e5b2b3fec585fd1d9
--- /dev/null
+++ b/components/antd/select/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Select
+
+A dropdown menu for displaying choices. See [Ant Design](https://ant.design/components/select/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/select/README.md b/components/antd/select/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..bd061d8a2e3ade21a334d42e5b2b3fec585fd1d9
--- /dev/null
+++ b/components/antd/select/README.md
@@ -0,0 +1,7 @@
+# Select
+
+A dropdown menu for displaying choices. See [Ant Design](https://ant.design/components/select/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/select/app.py b/components/antd/select/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/select/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/select/demos/basic.py b/components/antd/select/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..efa1e4cd1c5b6009208125364095af443d5ec8b7
--- /dev/null
+++ b/components/antd/select/demos/basic.py
@@ -0,0 +1,50 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(direction="vertical"):
+ antd.Select(elem_style=dict(width=200),
+ allow_clear=True,
+ options=[
+ {
+ "value": 'jack',
+ "label": 'Jack'
+ },
+ {
+ "value": 'lucy',
+ "label": 'Lucy'
+ },
+ {
+ "value": 'Yiminghe',
+ "label": 'yiminghe'
+ },
+ {
+ "value": 'disabled',
+ "label": 'Disabled',
+ "disabled": True
+ },
+ ])
+ # custom label
+ with antd.Select(
+ elem_style=dict(width=200),
+ mode="multiple",
+ ):
+ with antd.Select.Option(value="jack"):
+ with ms.Slot("label"):
+ antd.Tag("Jack", color="red")
+ with antd.Select.Option(value="lucy"):
+ with ms.Slot("label"):
+ antd.Tag("Lucy", color="green")
+ with antd.Select.Option(value="Yiminghe"):
+ with ms.Slot("label"):
+ antd.Tag("Yiminghe", color="blue")
+ with antd.Select.Option(value="disabled", disabled=True):
+ with ms.Slot("label"):
+ antd.Tag("Disabled", color="gray")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/skeleton/README-zh_CN.md b/components/antd/skeleton/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..40b6d3ce0f57c485b10230d66aa692074b692d23
--- /dev/null
+++ b/components/antd/skeleton/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Skeleton
+
+Provide a placeholder while you wait for content to load, or to visualize content that doesn't exist yet. See [Ant Design](https://ant.design/components/skeleton/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/skeleton/README.md b/components/antd/skeleton/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..40b6d3ce0f57c485b10230d66aa692074b692d23
--- /dev/null
+++ b/components/antd/skeleton/README.md
@@ -0,0 +1,7 @@
+# Skeleton
+
+Provide a placeholder while you wait for content to load, or to visualize content that doesn't exist yet. See [Ant Design](https://ant.design/components/skeleton/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/skeleton/app.py b/components/antd/skeleton/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/skeleton/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/skeleton/demos/basic.py b/components/antd/skeleton/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..aa3c293009e1f8e70ee24b93815a4b7ac22c8dde
--- /dev/null
+++ b/components/antd/skeleton/demos/basic.py
@@ -0,0 +1,29 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Flex(gap="middle", vertical=True):
+ antd.Skeleton()
+ antd.Skeleton(avatar=True, paragraph=dict(rows=4))
+ antd.Skeleton(active=True)
+ antd.Divider("Button/Avatar/Input/Image/Node")
+ with antd.Flex(vertical=True, gap="small"):
+ with antd.Space():
+ antd.Skeleton.Button()
+ antd.Skeleton.Avatar()
+ antd.Skeleton.Input()
+ antd.Skeleton.Button(block=True)
+ antd.Skeleton.Input(block=True)
+ with antd.Space():
+ antd.Skeleton.Image()
+ antd.Skeleton.Node(elem_style=dict(width=160))
+ with antd.Skeleton.Node():
+ antd.Icon("DotChartOutlined",
+ elem_style=dict(font_size=40,
+ color="#bfbfbf"))
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/slider/README-zh_CN.md b/components/antd/slider/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..c270882b9e1b33c7974877f9407a384a7aa9a692
--- /dev/null
+++ b/components/antd/slider/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Slider
+
+A Slider component for displaying current value and intervals in range. See [Ant Design](https://ant.design/components/slider/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="marks" title="With Marks"></demo>
diff --git a/components/antd/slider/README.md b/components/antd/slider/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..c270882b9e1b33c7974877f9407a384a7aa9a692
--- /dev/null
+++ b/components/antd/slider/README.md
@@ -0,0 +1,8 @@
+# Slider
+
+A Slider component for displaying current value and intervals in range. See [Ant Design](https://ant.design/components/slider/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="marks" title="With Marks"></demo>
diff --git a/components/antd/slider/app.py b/components/antd/slider/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/slider/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/slider/demos/basic.py b/components/antd/slider/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..36a5fc9e97573aac7ff894162800030659be36bf
--- /dev/null
+++ b/components/antd/slider/demos/basic.py
@@ -0,0 +1,21 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Slider(value=50)
+ antd.Slider(range=True, value=[20, 50])
+ antd.Divider("Vertical")
+ antd.Slider(range=True,
+ value=[20, 50],
+ step=5,
+ vertical=True,
+ elem_style=dict(height=200))
+ antd.Divider("Customize tooltip")
+ antd.Slider(tooltip=dict(formatter="(value) => `${value}%`"))
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/slider/demos/marks.py b/components/antd/slider/demos/marks.py
new file mode 100644
index 0000000000000000000000000000000000000000..d9adad017f9e61b66846f6a1b6e6a88dd89d06f0
--- /dev/null
+++ b/components/antd/slider/demos/marks.py
@@ -0,0 +1,43 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Slider(
+ marks={
+ "0": '0°C',
+ "26": '26°C',
+ "37": '37°C',
+ "100": {
+ "style": {
+ "color": '#f50'
+ },
+ "label": "100°C",
+ },
+ })
+ with antd.Slider():
+ with ms.Slot("marks"):
+ antd.Slider.Mark(
+ number=0,
+ label="0°C",
+ )
+ antd.Slider.Mark(
+ number=26,
+ label="26°C",
+ )
+ antd.Slider.Mark(
+ number=37,
+ label="37°C",
+ )
+ with antd.Slider.Mark(
+ number=100,
+ elem_style=dict(width=40),
+ ):
+ with ms.Slot("label"):
+ antd.Typography.Text("100°C", type="success")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/space/README-zh_CN.md b/components/antd/space/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..8eb5de8203bae6f08ad2b376c240e572b51561c1
--- /dev/null
+++ b/components/antd/space/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Space
+
+Set components spacing. See [Ant Design](https://ant.design/components/space/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/space/README.md b/components/antd/space/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..8eb5de8203bae6f08ad2b376c240e572b51561c1
--- /dev/null
+++ b/components/antd/space/README.md
@@ -0,0 +1,7 @@
+# Space
+
+Set components spacing. See [Ant Design](https://ant.design/components/space/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/space/app.py b/components/antd/space/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/space/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/space/demos/basic.py b/components/antd/space/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..b9ae02167927ed409a8b5df1053d9604609c0afd
--- /dev/null
+++ b/components/antd/space/demos/basic.py
@@ -0,0 +1,15 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space():
+ antd.Button("Primary", type="primary")
+ antd.Button("Default")
+ antd.Button("Dashed", type="dashed")
+ ms.Text("Space")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/spin/README-zh_CN.md b/components/antd/spin/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..d5c1538e1f9398453fb3e45d1fcbb56e7908b9ee
--- /dev/null
+++ b/components/antd/spin/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Spin
+
+Used for the loading status of a page or a block. See [Ant Design](https://ant.design/components/spin/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/spin/README.md b/components/antd/spin/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..d5c1538e1f9398453fb3e45d1fcbb56e7908b9ee
--- /dev/null
+++ b/components/antd/spin/README.md
@@ -0,0 +1,7 @@
+# Spin
+
+Used for the loading status of a page or a block. See [Ant Design](https://ant.design/components/spin/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/spin/app.py b/components/antd/spin/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/spin/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/spin/demos/basic.py b/components/antd/spin/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..fbfadbf79f4b4b0a775b60ff200f7fee163a7adc
--- /dev/null
+++ b/components/antd/spin/demos/basic.py
@@ -0,0 +1,54 @@
+import time
+
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def show_loading():
+ yield gr.update(spinning=True)
+ time.sleep(2)
+ yield gr.update(spinning=False)
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Flex(align="center", gap="middle"):
+ antd.Spin(size="small")
+ antd.Spin()
+ antd.Spin(size="large")
+ antd.Divider("Custom spinning indicator")
+ with antd.Flex(align="center", gap="middle"):
+ with antd.Spin(size="small"):
+ with ms.Slot("indicator"):
+ antd.Icon("LoadingOutlined", spin=True)
+ with antd.Spin():
+ with ms.Slot("indicator"):
+ antd.Icon("LoadingOutlined", spin=True)
+ with antd.Spin(size="large"):
+ with ms.Slot("indicator"):
+ antd.Icon("LoadingOutlined", spin=True)
+ antd.Divider("Progress")
+ with antd.Flex(align="center", gap="middle"):
+ antd.Spin(percent=50, size="small")
+ antd.Spin(percent=90)
+ antd.Spin(percent="auto", size="large")
+ antd.Divider("Embedded mode")
+ with antd.Space(direction='vertical'):
+ with antd.Spin(tip="Loading...", spinning=False) as spin1:
+ antd.Alert(
+ message="Alert message title",
+ description=
+ "Further details about the context of this alert.",
+ type="info")
+ antd.Button("Show loading").click(fn=show_loading,
+ outputs=[spin1])
+ antd.Divider("Fullscreen")
+ spin2 = antd.Spin(spinning=False, fullscreen=True)
+ antd.Button("Show fullscreen").click(fn=show_loading,
+ outputs=[spin2])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/splitter/README-zh_CN.md b/components/antd/splitter/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..68d7064db76ef6b4f35bd344399e89e9883993e0
--- /dev/null
+++ b/components/antd/splitter/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Splitter
+
+Split panels to isolate. See [Ant Design](https://ant.design/components/space/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/splitter/README.md b/components/antd/splitter/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..68d7064db76ef6b4f35bd344399e89e9883993e0
--- /dev/null
+++ b/components/antd/splitter/README.md
@@ -0,0 +1,7 @@
+# Splitter
+
+Split panels to isolate. See [Ant Design](https://ant.design/components/space/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/splitter/app.py b/components/antd/splitter/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/splitter/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/splitter/demos/basic.py b/components/antd/splitter/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..5d03acb33d66372352ecef3c4be2625a16fa3184
--- /dev/null
+++ b/components/antd/splitter/demos/basic.py
@@ -0,0 +1,30 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def Desc(text: str):
+ with antd.Flex(justify="center"):
+ with antd.Typography.Title(type="secondary",
+ level=5,
+ elem_style=dict(whiteSpace="nowrap")):
+ ms.Text(text)
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Splitter(elem_style=dict(
+ height=500, boxShadow='0 0 10px rgba(0, 0, 0, 0.1)')):
+ with antd.Splitter.Panel(collapsible=True):
+ Desc("Left")
+ with antd.Splitter.Panel(collapsible=True):
+ with antd.Splitter(layout="vertical"):
+ with antd.Splitter.Panel():
+ Desc("Top")
+ with antd.Splitter.Panel():
+ Desc("Bottom")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/statistic/README-zh_CN.md b/components/antd/statistic/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..479752c7e97883afa6bc7de097fb1365b352f3be
--- /dev/null
+++ b/components/antd/statistic/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Statistic
+
+Display statistic number. See [Ant Design](https://ant.design/components/statistic/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="countdown" title="Countdown"></demo>
diff --git a/components/antd/statistic/README.md b/components/antd/statistic/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..479752c7e97883afa6bc7de097fb1365b352f3be
--- /dev/null
+++ b/components/antd/statistic/README.md
@@ -0,0 +1,8 @@
+# Statistic
+
+Display statistic number. See [Ant Design](https://ant.design/components/statistic/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="countdown" title="Countdown"></demo>
diff --git a/components/antd/statistic/app.py b/components/antd/statistic/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/statistic/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/statistic/demos/basic.py b/components/antd/statistic/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..a68c3273b8b00f112eb18d2cc984db31d1610859
--- /dev/null
+++ b/components/antd/statistic/demos/basic.py
@@ -0,0 +1,25 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Row(gutter=20):
+ with antd.Col(span=12):
+ antd.Statistic(value=112893, title="Active Users")
+ with antd.Col(span=12):
+ antd.Statistic(value=112893,
+ precision=2,
+ title="Account Balance (CNY)")
+ with antd.Col(span=12):
+ with antd.Statistic(value=1128,
+ precision=2,
+ title="Feedback"):
+ with ms.Slot("prefix"):
+ antd.Icon("LikeOutlined")
+ with antd.Col(span=12):
+ antd.Statistic(value=93, suffix="/ 100", title="Unmerged")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/statistic/demos/countdown.py b/components/antd/statistic/demos/countdown.py
new file mode 100644
index 0000000000000000000000000000000000000000..2f4a169fe730d1595622875789f625f6e2617de5
--- /dev/null
+++ b/components/antd/statistic/demos/countdown.py
@@ -0,0 +1,27 @@
+import time
+
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Row(gutter=20):
+ with antd.Col(span=12):
+ antd.Statistic.Countdown(
+ value=lambda: time.time() + 60 * 60 * 24 * 2,
+ title="Countdown")
+ with antd.Col(span=12):
+ antd.Statistic.Countdown(
+ value=lambda: time.time() + 60 * 60 * 24 * 2,
+ title="Million Seconds",
+ format="HH:mm:ss:SSS")
+ with antd.Col(span=12):
+ antd.Statistic.Countdown(
+ value=lambda: time.time() + 60 * 60 * 24 * 2,
+ title="Day Level",
+ format="D-H-m-s")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/steps/README-zh_CN.md b/components/antd/steps/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..0bf4394dbe6cb31c122bc9668485da5ee5dbcb01
--- /dev/null
+++ b/components/antd/steps/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Steps
+
+A navigation bar that guides users through the steps of a task. See [Ant Design](https://ant.design/components/steps/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/steps/README.md b/components/antd/steps/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..0bf4394dbe6cb31c122bc9668485da5ee5dbcb01
--- /dev/null
+++ b/components/antd/steps/README.md
@@ -0,0 +1,7 @@
+# Steps
+
+A navigation bar that guides users through the steps of a task. See [Ant Design](https://ant.design/components/steps/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/steps/app.py b/components/antd/steps/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/steps/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/steps/demos/basic.py b/components/antd/steps/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..e41c6257f88602e1063d2930f182778d1820696d
--- /dev/null
+++ b/components/antd/steps/demos/basic.py
@@ -0,0 +1,48 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+description = "This is a description."
+
+
+def on_next(_state):
+ _state["current"] += 1
+ return {
+ steps: gr.update(current=_state["current"]),
+ prev_btn: gr.update(visible=True if _state["current"] > 0 else False),
+ next_btn: gr.update(visible=True if _state["current"] < 3 else False)
+ }
+
+
+def on_prev(_state):
+ _state["current"] -= 1
+ return {
+ steps: gr.update(current=_state["current"]),
+ prev_btn: gr.update(visible=True if _state["current"] > 0 else False),
+ next_btn: gr.update(visible=True if _state["current"] < 3 else False)
+ }
+
+
+with gr.Blocks() as demo:
+ state = gr.State({"current": 0})
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Steps(0) as steps:
+ antd.Steps.Item(title="Waiting", description=description)
+ antd.Steps.Item(title="In Progress",
+ sub_title="Left 00:00:08",
+ description=description)
+ antd.Steps.Item(title="Finished", description=description)
+ prev_btn = antd.Button("Prev", visible=False)
+ next_btn = antd.Button("Next", type="primary")
+
+ prev_btn.click(fn=on_prev,
+ inputs=[state],
+ outputs=[steps, prev_btn, next_btn])
+ next_btn.click(fn=on_next,
+ inputs=[state],
+ outputs=[steps, prev_btn, next_btn])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/switch/README-zh_CN.md b/components/antd/switch/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..9e067cff3b3004d0005312cbf092663472e1727f
--- /dev/null
+++ b/components/antd/switch/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Switch
+
+Used to toggle between two states. See [Ant Design](https://ant.design/components/switch/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/switch/README.md b/components/antd/switch/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..9e067cff3b3004d0005312cbf092663472e1727f
--- /dev/null
+++ b/components/antd/switch/README.md
@@ -0,0 +1,7 @@
+# Switch
+
+Used to toggle between two states. See [Ant Design](https://ant.design/components/switch/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/switch/app.py b/components/antd/switch/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/switch/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/switch/demos/basic.py b/components/antd/switch/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..c3c96f8d00972cf62a8e472c0f4b75b392f54805
--- /dev/null
+++ b/components/antd/switch/demos/basic.py
@@ -0,0 +1,20 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space():
+ antd.Switch(value=True)
+ antd.Switch(checked_children="Open",
+ un_checked_children="Close")
+ with antd.Switch(value=True):
+ with ms.Slot("checkedChildren"):
+ antd.Icon("CheckOutlined")
+ with ms.Slot("unCheckedChildren"):
+ antd.Icon("CloseOutlined")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/table/README-zh_CN.md b/components/antd/table/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..e234950bfc787841dbbe54f2bd052a363afafd7d
--- /dev/null
+++ b/components/antd/table/README-zh_CN.md
@@ -0,0 +1,14 @@
+# Table
+
+A table displays rows of data. See [Ant Design](https://ant.design/components/table/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="pagination" title="Pagination"></demo>
+
+Currently, due to the rendering limitations in Python, if you need to customize the columns of the rendered table, you can only do this by writing a JavaScript function.
+
+<demo name="custom_columns" title="Custom Columns"></demo>
+<demo name="expandable_row" title="Expandable Row"></demo>
+<demo name="order_specific_column" title="Order Specific Column"></demo>
diff --git a/components/antd/table/README.md b/components/antd/table/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..e234950bfc787841dbbe54f2bd052a363afafd7d
--- /dev/null
+++ b/components/antd/table/README.md
@@ -0,0 +1,14 @@
+# Table
+
+A table displays rows of data. See [Ant Design](https://ant.design/components/table/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="pagination" title="Pagination"></demo>
+
+Currently, due to the rendering limitations in Python, if you need to customize the columns of the rendered table, you can only do this by writing a JavaScript function.
+
+<demo name="custom_columns" title="Custom Columns"></demo>
+<demo name="expandable_row" title="Expandable Row"></demo>
+<demo name="order_specific_column" title="Order Specific Column"></demo>
diff --git a/components/antd/table/app.py b/components/antd/table/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/table/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/table/demos/basic.py b/components/antd/table/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..f66dda7c3007db0740ca7b168a222e05e79c8f87
--- /dev/null
+++ b/components/antd/table/demos/basic.py
@@ -0,0 +1,30 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [
+ {
+ "key": '1',
+ "name": 'Mike',
+ "age": 32,
+ "address": '10 Downing Street',
+ },
+ {
+ "key": '2',
+ "name": 'John',
+ "age": 42,
+ "address": '10 Downing Street',
+ },
+]
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.Table(data_source=data):
+ antd.Table.Column(title="Name", data_index="name", key="name")
+ antd.Table.Column(title="Age", data_index="age", key="age")
+ antd.Table.Column(title="Address",
+ data_index="address",
+ key="address")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/table/demos/custom_columns.py b/components/antd/table/demos/custom_columns.py
new file mode 100644
index 0000000000000000000000000000000000000000..690e9754aece8854316f2b7b15282e86b4950d03
--- /dev/null
+++ b/components/antd/table/demos/custom_columns.py
@@ -0,0 +1,104 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [{
+ "key": "1",
+ "name": "John Brown",
+ "age": 32,
+ "address": "New York No. 1 Lake Park",
+ "tags": ["nice", "developer"]
+}, {
+ "key": "2",
+ "name": "Jim Green",
+ "age": 42,
+ "address": "London No. 1 Lake Park",
+ "tags": ["loser"]
+}, {
+ "key": "3",
+ "name": "Joe Black",
+ "age": 32,
+ "address": "Sydney No. 1 Lake Park",
+ "tags": ["cool", "teacher"]
+}]
+
+
+def on_custom(e: gr.EventData):
+ print(e._data)
+
+
+with gr.Blocks() as demo:
+ with ms.Application() as app:
+ with antd.Table(data_source=data):
+ antd.Table.Column(title="Name",
+ data_index="name",
+ key="name",
+ column_render="""(text) => {
+ const React = window.ms_globals.React;
+ return React.createElement('a', null, text);
+}""")
+ antd.Table.Column(title="Age", data_index="age", key="age")
+ antd.Table.Column(title="Address",
+ data_index="address",
+ key="address")
+ antd.Table.Column(title="Tags",
+ data_index="tags",
+ key="tags",
+ column_render="""(_, { tags }) => {
+ const React = window.ms_globals.React;
+ const antd = window.ms_globals.antd;
+ return tags.map((tag) => {
+ let color = tag.length > 5 ? 'geekblue' : 'green';
+ if (tag === 'loser') {
+ color = 'volcano';
+ }
+ return React.createElement(antd.Tag, { color, key: tag }, tag.toUpperCase());
+ });
+}""")
+ antd.Table.Column(title="Action",
+ key="action",
+ column_render="""(_, record) => {
+ const React = window.ms_globals.React;
+ const antd = window.ms_globals.antd;
+ const dispatch = window.ms_globals.dispatch;
+ return React.createElement(
+ antd.Space,
+ { size: 'middle' },
+ React.createElement(
+ antd.Button,
+ {
+ type: 'primary',
+ onClick: () => {
+ dispatch({
+ type: 'custom_table',
+ action: 'invite',
+ payload: record,
+ });
+ },
+ },
+ 'Invite ',
+ record.name
+ ),
+ React.createElement(
+ antd.Button,
+ {
+ type: 'primary',
+ danger: true,
+ onClick: () => {
+ dispatch({
+ type: 'custom_table',
+ action: 'delete',
+ payload: record,
+ });
+ },
+ },
+ 'Delete'
+ )
+ );
+}""")
+
+ app.custom(fn=on_custom)
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/table/demos/expandable_row.py b/components/antd/table/demos/expandable_row.py
new file mode 100644
index 0000000000000000000000000000000000000000..6cff14121c2f21f86882bae50aa433f40a72cd88
--- /dev/null
+++ b/components/antd/table/demos/expandable_row.py
@@ -0,0 +1,61 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [{
+ "key":
+ 1,
+ "name":
+ "John Brown",
+ "age":
+ 32,
+ "address":
+ "New York No. 1 Lake Park",
+ "description":
+ "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
+}, {
+ "key":
+ 2,
+ "name":
+ "Jim Green",
+ "age":
+ 42,
+ "address":
+ "London No. 1 Lake Park",
+ "description":
+ "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
+}, {
+ "key": 3,
+ "name": "Not Expandable",
+ "age": 29,
+ "address": "Jiangsu No. 1 Lake Park",
+ "description": "This not expandable"
+}, {
+ "key":
+ 4,
+ "name":
+ "Joe Black",
+ "age":
+ 32,
+ "address":
+ "Sydney No. 1 Lake Park",
+ "description":
+ "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
+}]
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.Table(data_source=data):
+ with ms.Slot("expandable"):
+ antd.Table.Expandable(
+ expanded_row_render="""(record) => record.description""",
+ row_expandable=
+ """(record) => record.name !== 'Not Expandable'""")
+ antd.Table.Column(title="Name", data_index="name", key="name")
+ antd.Table.Column(title="Age", data_index="age", key="age")
+ antd.Table.Column(title="Address",
+ data_index="address",
+ key="address")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/table/demos/order_specific_column.py b/components/antd/table/demos/order_specific_column.py
new file mode 100644
index 0000000000000000000000000000000000000000..fcf893d57e34486068538e4e893361d3caf0407b
--- /dev/null
+++ b/components/antd/table/demos/order_specific_column.py
@@ -0,0 +1,65 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [{
+ "key":
+ 1,
+ "name":
+ "John Brown",
+ "age":
+ 32,
+ "address":
+ "New York No. 1 Lake Park",
+ "description":
+ "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
+}, {
+ "key":
+ 2,
+ "name":
+ "Jim Green",
+ "age":
+ 42,
+ "address":
+ "London No. 1 Lake Park",
+ "description":
+ "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
+}, {
+ "key": 3,
+ "name": "Not Expandable",
+ "age": 29,
+ "address": "Jiangsu No. 1 Lake Park",
+ "description": "This not expandable"
+}, {
+ "key":
+ 4,
+ "name":
+ "Joe Black",
+ "age":
+ 32,
+ "address":
+ "Sydney No. 1 Lake Park",
+ "description":
+ "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
+}]
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.Table(data_source=data):
+ with ms.Slot("rowSelection"):
+ selection = antd.Table.RowSelection()
+ with ms.Slot("expandable"):
+ antd.Table.Expandable(
+ expanded_row_render="""(record) => record.description""",
+ row_expandable=
+ """(record) => record.name !== 'Not Expandable'""")
+ antd.Table.Column(title="Name", data_index="name", key="name")
+ antd.Table.Column(built_in_column="EXPAND_COLUMN")
+ antd.Table.Column(title="Age", data_index="age", key="age")
+ antd.Table.Column(built_in_column="SELECTION_COLUMN")
+ antd.Table.Column(title="Address",
+ data_index="address",
+ key="address")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/table/demos/pagination.py b/components/antd/table/demos/pagination.py
new file mode 100644
index 0000000000000000000000000000000000000000..e396353414541c7120c1e449eac66728fb1582d9
--- /dev/null
+++ b/components/antd/table/demos/pagination.py
@@ -0,0 +1,29 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [{
+ "key": f"{i}",
+ "name": f'Item {i}',
+ "age": 32,
+ "address": '10 Downing Street',
+} for i in range(20)]
+
+
+def on_change(e: gr.EventData):
+ print(e._data)
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.Table(data_source=data,
+ pagination=dict(pageSize=4)) as table:
+ antd.Table.Column(title="Name", data_index="name", key="name")
+ antd.Table.Column(title="Age", data_index="age", key="age")
+ antd.Table.Column(title="Address",
+ data_index="address",
+ key="address")
+ table.change(fn=on_change)
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/table/demos/selection.py b/components/antd/table/demos/selection.py
new file mode 100644
index 0000000000000000000000000000000000000000..984dc2f1b7a98f5e3d7c83b7d64b28d026c28b0a
--- /dev/null
+++ b/components/antd/table/demos/selection.py
@@ -0,0 +1,56 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [
+ {
+ "key": '1',
+ "name": 'Mike',
+ "age": 32,
+ "address": '10 Downing Street',
+ },
+ {
+ "key": '2',
+ "name": 'John',
+ "age": 42,
+ "address": '10 Downing Street',
+ },
+]
+
+
+def on_selection_change(e: gr.EventData):
+ print(e._data)
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.Table(data_source=data):
+ # add selection config
+ with ms.Slot("rowSelection"):
+ selection = antd.Table.RowSelection()
+ antd.Table.Column(title="Name", data_index="name", key="name")
+ antd.Table.Column(title="Age", data_index="age", key="age")
+ antd.Table.Column(title="Address",
+ data_index="address",
+ key="address")
+ selection.change(on_selection_change)
+ antd.Divider("Custom selection")
+ with antd.Table(data_source=data):
+ # add selection config
+ with ms.Slot("rowSelection"):
+ with antd.Table.RowSelection():
+ with ms.Slot("selections"):
+ antd.Table.RowSelection.Selection(
+ built_in_selection='SELECT_ALL')
+ antd.Table.RowSelection.Selection(
+ built_in_selection='SELECT_INVERT')
+ antd.Table.RowSelection.Selection(
+ built_in_selection='SELECT_NONE')
+ antd.Table.Column(title="Name", data_index="name", key="name")
+ antd.Table.Column(title="Age", data_index="age", key="age")
+ antd.Table.Column(title="Address",
+ data_index="address",
+ key="address")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/tabs/README-zh_CN.md b/components/antd/tabs/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..82342642e9dd9ea1ea242fb1967ac5871d2da009
--- /dev/null
+++ b/components/antd/tabs/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Tabs
+
+Tabs make it easy to explore and switch between different views. See [Ant Design](https://ant.design/components/tabs/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="position" title="Position"></demo>
diff --git a/components/antd/tabs/README.md b/components/antd/tabs/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..82342642e9dd9ea1ea242fb1967ac5871d2da009
--- /dev/null
+++ b/components/antd/tabs/README.md
@@ -0,0 +1,8 @@
+# Tabs
+
+Tabs make it easy to explore and switch between different views. See [Ant Design](https://ant.design/components/tabs/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="position" title="Position"></demo>
diff --git a/components/antd/tabs/app.py b/components/antd/tabs/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/tabs/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/tabs/demos/basic.py b/components/antd/tabs/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..002b36bf23cd4e632261a12d9652c06ab15261f8
--- /dev/null
+++ b/components/antd/tabs/demos/basic.py
@@ -0,0 +1,32 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Tabs(default_active_key='1'):
+ with antd.Tabs.Item(key="1", label="Tab1"):
+ ms.Text("Tab 1")
+ with antd.Tabs.Item(key="2", label="Tab2", disabled=True):
+ ms.Text("Tab 2")
+ with antd.Tabs.Item(key="3", label="Tab3"):
+ ms.Text("Tab 3")
+ with ms.Slot("icon"):
+ antd.Icon("AndroidOutlined")
+ antd.Divider("Extra content")
+ with antd.Tabs(default_active_key='1'):
+ with ms.Slot("tabBarExtraContent.left"):
+ antd.Button("Left Extra Action")
+ with ms.Slot("tabBarExtraContent.right"):
+ antd.Button("Right Extra Action")
+ with antd.Tabs.Item(key="1", label="Tab1"):
+ ms.Text("Tab 1")
+ with antd.Tabs.Item(key="2", label="Tab2"):
+ ms.Text("Tab 2")
+ with antd.Tabs.Item(key="3", label="Tab3"):
+ ms.Text("Tab 3")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/tabs/demos/position.py b/components/antd/tabs/demos/position.py
new file mode 100644
index 0000000000000000000000000000000000000000..715ba59cf802e1f9a0c1f5ff512d1a22da3ef47b
--- /dev/null
+++ b/components/antd/tabs/demos/position.py
@@ -0,0 +1,29 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+default_position = "top"
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space():
+ ms.Text("Tab position")
+ position = antd.Radio.Group(
+ value=default_position,
+ option_type="button",
+ options=["top", "left", "right", "bottom"])
+ with antd.Tabs(default_active_key='1') as tabs:
+ with antd.Tabs.Item(key="1", label="Tab1"):
+ ms.Text("Tab 1")
+ with antd.Tabs.Item(key="2", label="Tab2"):
+ ms.Text("Tab 2")
+ with antd.Tabs.Item(key="3", label="Tab3"):
+ ms.Text("Tab 3")
+ position.change(fn=lambda x: gr.update(tab_position=x),
+ inputs=[position],
+ outputs=[tabs])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/tag/README-zh_CN.md b/components/antd/tag/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..ff43eb834d7da65d60c945a2fd1045eaad306100
--- /dev/null
+++ b/components/antd/tag/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Tag
+
+Used for marking and categorization. See [Ant Design](https://ant.design/components/tag/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="checkable_tag" title="Checkable Tag"></demo>
diff --git a/components/antd/tag/README.md b/components/antd/tag/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..ff43eb834d7da65d60c945a2fd1045eaad306100
--- /dev/null
+++ b/components/antd/tag/README.md
@@ -0,0 +1,8 @@
+# Tag
+
+Used for marking and categorization. See [Ant Design](https://ant.design/components/tag/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="checkable_tag" title="Checkable Tag"></demo>
diff --git a/components/antd/tag/app.py b/components/antd/tag/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/tag/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/tag/demos/basic.py b/components/antd/tag/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..5be53309e5a9eddc4250632d7f328dc39211fc39
--- /dev/null
+++ b/components/antd/tag/demos/basic.py
@@ -0,0 +1,60 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(size="small"):
+ antd.Tag("Tag1")
+ with antd.Tag():
+ antd.Typography.Link(
+ "Link",
+ href=
+ "https://github.com/ant-design/ant-design/issues/1862")
+ antd.Tag('Closeable', close_icon=True)
+ with antd.Tag():
+ with ms.Slot("closeIcon"):
+ antd.Icon("CloseCircleOutlined",
+ elem_style=dict(fontSize=14,
+ marginLeft="4px"))
+ ms.Text("Custom Close Icon")
+ with antd.Divider(orientation="left"):
+ ms.Text("Icon Tag")
+ with antd.Flex(gap=("4px", "0"), wrap=True):
+ with antd.Tag(color="#55acee"):
+ ms.Text("Twitter")
+ with antd.Tag(color="#cd201f"):
+ ms.Text("Youtube")
+ with antd.Tag(color="#3b5999"):
+ ms.Text("Facebook")
+ with antd.Tag(color="#55acee"):
+ ms.Text("LinkedIn")
+
+ with antd.Divider(orientation="left"):
+ ms.Text("Presets Colorful Tag")
+
+ with antd.Flex(gap=("4px", "0"), wrap=True):
+ antd.Tag("magenta", color="magenta")
+ antd.Tag("red", color="red")
+ antd.Tag("volcano", color="volcano")
+ antd.Tag("orange", color="orange")
+ antd.Tag("gold", color="gold")
+ antd.Tag("lime", color="lime")
+ antd.Tag("green", color="green")
+ antd.Tag("cyan", color="cyan")
+ antd.Tag("blue", color="blue")
+ antd.Tag("geekblue", color="geekblue")
+ antd.Tag("purple", color="purple")
+
+ with antd.Divider(orientation="left"):
+ ms.Text("Custom Colorful Tag")
+
+ with antd.Flex(gap="4px 0", wrap=True):
+ antd.Tag("#f50", color="#f50")
+ antd.Tag("#2db7f5", color="#2db7f5")
+ antd.Tag("#87d068", color="#87d068")
+ antd.Tag("#108ee9", color="#108ee9")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/tag/demos/checkable_tag.py b/components/antd/tag/demos/checkable_tag.py
new file mode 100644
index 0000000000000000000000000000000000000000..53f1d8a0e900ef45e848c9d4aa546214958cf66d
--- /dev/null
+++ b/components/antd/tag/demos/checkable_tag.py
@@ -0,0 +1,19 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+default_position = "top"
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Flex(gap=4, wrap=True, align="center"):
+ ms.Span("Categories:")
+ antd.Tag.CheckableTag("Movies", value=True)
+ antd.Tag.CheckableTag("Books")
+ antd.Tag.CheckableTag("Music")
+ antd.Tag.CheckableTag("Sports")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/time_picker/README-zh_CN.md b/components/antd/time_picker/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..94521170633e17ecd0cd208fbfa7500fc875bb78
--- /dev/null
+++ b/components/antd/time_picker/README-zh_CN.md
@@ -0,0 +1,8 @@
+# TimePicker
+
+To select/input a time. See [Ant Design](https://ant.design/components/time-picker/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="range_picker" title="Range Picker"></demo>
diff --git a/components/antd/time_picker/README.md b/components/antd/time_picker/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..94521170633e17ecd0cd208fbfa7500fc875bb78
--- /dev/null
+++ b/components/antd/time_picker/README.md
@@ -0,0 +1,8 @@
+# TimePicker
+
+To select/input a time. See [Ant Design](https://ant.design/components/time-picker/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="range_picker" title="Range Picker"></demo>
diff --git a/components/antd/time_picker/app.py b/components/antd/time_picker/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/time_picker/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/time_picker/demos/basic.py b/components/antd/time_picker/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..01ab45dcdb288a6c4723805165b3d981e287c016
--- /dev/null
+++ b/components/antd/time_picker/demos/basic.py
@@ -0,0 +1,32 @@
+import time
+
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(direction='vertical'):
+ antd.TimePicker()
+ antd.TimePicker(format="HH:mm")
+ antd.TimePicker(minute_step=15,
+ second_step=10,
+ hour_step=1,
+ need_confirm=True)
+ antd.Divider("12 hours")
+ with antd.Space(direction='vertical'):
+ antd.TimePicker(use_12_hours=True)
+ antd.TimePicker(use_12_hours=True, format="h:mm:ss A")
+ antd.TimePicker(use_12_hours=True, format="h:mm a")
+ antd.Divider("Prefix and Suffix")
+ with antd.Space(direction='vertical'):
+ with antd.TimePicker():
+ with ms.Slot("suffixIcon"):
+ antd.Icon("SmileOutlined")
+ with antd.TimePicker():
+ with ms.Slot("prefix"):
+ antd.Icon("SmileOutlined")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/time_picker/demos/range_picker.py b/components/antd/time_picker/demos/range_picker.py
new file mode 100644
index 0000000000000000000000000000000000000000..a22049bf38107ce372c069feb536cb0171a45001
--- /dev/null
+++ b/components/antd/time_picker/demos/range_picker.py
@@ -0,0 +1,14 @@
+import time
+
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.TimePicker.RangePicker(
+ value=lambda: [time.time(), time.time()], format="HH:mm:ss")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/timeline/README-zh_CN.md b/components/antd/timeline/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..2c09103561fbcf60727951939f6cbcf1eb327bc9
--- /dev/null
+++ b/components/antd/timeline/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Timeline
+
+Vertical display timeline. See [Ant Design](https://ant.design/components/timeline/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/timeline/README.md b/components/antd/timeline/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..2c09103561fbcf60727951939f6cbcf1eb327bc9
--- /dev/null
+++ b/components/antd/timeline/README.md
@@ -0,0 +1,7 @@
+# Timeline
+
+Vertical display timeline. See [Ant Design](https://ant.design/components/timeline/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/timeline/app.py b/components/antd/timeline/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/timeline/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/timeline/demos/basic.py b/components/antd/timeline/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..e10e3d4792b80b553c880999bf0d87400e907997
--- /dev/null
+++ b/components/antd/timeline/demos/basic.py
@@ -0,0 +1,41 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Timeline():
+ with antd.Timeline.Item():
+ ms.Text("Create a services site 2015-09-01")
+ with antd.Timeline.Item():
+ ms.Text("Solve initial network problems 2015-09-01")
+ with antd.Timeline.Item():
+ ms.Text("Technical testing 2015-09-01")
+ with antd.Timeline.Item():
+ ms.Text("Network problems being solved 2015-09-01")
+ antd.Divider("Alternate")
+ with antd.Timeline(mode="alternate"):
+ with antd.Timeline.Item():
+ ms.Text("Create a services site 2015-09-01")
+ with antd.Timeline.Item(color="green"):
+ ms.Text("Solve initial network problems 2015-09-01")
+ with antd.Timeline.Item():
+ ms.Text(
+ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."
+ )
+ with ms.Slot("dot"):
+ antd.Icon("ClockCircleOutlined",
+ elem_style=dict(fontSize=16))
+ with antd.Timeline.Item(color="red"):
+ ms.Text("Network problems being solved 2015-09-01")
+ with antd.Timeline.Item():
+ ms.Text("Create a services site 2015-09-01")
+ with antd.Timeline.Item():
+ with ms.Slot("dot"):
+ antd.Icon("ClockCircleOutlined",
+ elem_style=dict(fontSize=16))
+ ms.Text("Technical testing 2015-09-01")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/tooltip/README-zh_CN.md b/components/antd/tooltip/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..3b1fd2619ada3c4816560150abcd93ce9c009e05
--- /dev/null
+++ b/components/antd/tooltip/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Tooltip
+
+Simple text popup box. See [Ant Design](https://ant.design/components/tooltip/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/tooltip/README.md b/components/antd/tooltip/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..3b1fd2619ada3c4816560150abcd93ce9c009e05
--- /dev/null
+++ b/components/antd/tooltip/README.md
@@ -0,0 +1,7 @@
+# Tooltip
+
+Simple text popup box. See [Ant Design](https://ant.design/components/tooltip/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/tooltip/app.py b/components/antd/tooltip/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/tooltip/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/tooltip/demos/basic.py b/components/antd/tooltip/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..588e8c64ea440f593ca8a7b6184320cf4413ee76
--- /dev/null
+++ b/components/antd/tooltip/demos/basic.py
@@ -0,0 +1,17 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Space(direction="vertical"):
+ with antd.Tooltip(title="prompt text"):
+ ms.Span("Tooltip will show on mouse enter.")
+ with antd.Tooltip():
+ with ms.Slot("title"):
+ antd.Typography.Text("prompt text", type="success")
+ ms.Span("Custom Title")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/tour/README-zh_CN.md b/components/antd/tour/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..be9e064c590fa801c4bc571df0a2fe21747ffd2e
--- /dev/null
+++ b/components/antd/tour/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Tour
+
+A popup component for guiding users through a product. See [Ant Design](https://ant.design/components/tour/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/tour/README.md b/components/antd/tour/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..be9e064c590fa801c4bc571df0a2fe21747ffd2e
--- /dev/null
+++ b/components/antd/tour/README.md
@@ -0,0 +1,7 @@
+# Tour
+
+A popup component for guiding users through a product. See [Ant Design](https://ant.design/components/tour/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/tour/app.py b/components/antd/tour/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/tour/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/tour/demos/basic.py b/components/antd/tour/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..f00b53c931f7577b3616e4bce6d2a64e4c7f67c2
--- /dev/null
+++ b/components/antd/tour/demos/basic.py
@@ -0,0 +1,38 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ btn = antd.Button("Begin Tour",
+ type="primary",
+ elem_id="tour-begin-btn")
+ with antd.Tour(open=False) as tour:
+ antd.Tour.Step(
+ title="Center",
+ description="Displayed in the center of screen.",
+ get_target=None)
+ antd.Tour.Step(
+ title="Right",
+ description="On the right of target.",
+ get_target=
+ "() => document.querySelector('#tour-begin-btn')",
+ placement="right")
+ with antd.Tour.Step(
+ title="Top",
+ get_target=
+ "() => document.querySelector('#tour-begin-btn')",
+ placement="top"):
+ with ms.Slot("description"):
+ antd.Typography.Text("On the top of target.",
+ type="success")
+
+ btn.click(lambda: gr.update(open=True), outputs=[tour])
+ gr.on([tour.close, tour.finish],
+ lambda: gr.update(open=False),
+ outputs=[tour])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/transfer/README-zh_CN.md b/components/antd/transfer/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..56b8440c0bcf9f2ad688fa836a6a61d0ad0a8524
--- /dev/null
+++ b/components/antd/transfer/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Transfer
+
+Double column transfer choice box. See [Ant Design](https://ant.design/components/transfer/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/transfer/README.md b/components/antd/transfer/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..56b8440c0bcf9f2ad688fa836a6a61d0ad0a8524
--- /dev/null
+++ b/components/antd/transfer/README.md
@@ -0,0 +1,7 @@
+# Transfer
+
+Double column transfer choice box. See [Ant Design](https://ant.design/components/transfer/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/transfer/app.py b/components/antd/transfer/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/transfer/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/transfer/demos/basic.py b/components/antd/transfer/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..6bb87430be0a9b5489744b8bee79c019db02de46
--- /dev/null
+++ b/components/antd/transfer/demos/basic.py
@@ -0,0 +1,37 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+mock_data = [{
+ "key": str(i),
+ "title": f"content{i + 1}",
+ "description": f"description of content{i + 1}"
+} for i in range(20)]
+
+initial_target_keys = [
+ item['key'] for item in mock_data if int(item['key']) > 10
+]
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Transfer(value=initial_target_keys,
+ data_source=mock_data,
+ titles=['Source', 'Target'])
+ antd.Divider("One Way")
+ antd.Transfer(one_way=True,
+ data_source=mock_data,
+ titles=['Source', 'Target'])
+ antd.Divider("Search")
+ antd.Transfer(
+ value=initial_target_keys,
+ show_search=True,
+ # use javascript function to filter options
+ filter_option=
+ "(inputValue, option) => option.description.indexOf(inputValue) > -1",
+ data_source=mock_data,
+ titles=['Source', 'Target'])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/tree/README-zh_CN.md b/components/antd/tree/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..9ead8c07a558ac6b103c592a59e117d6d57be0df
--- /dev/null
+++ b/components/antd/tree/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Tree
+
+Multiple-level structure list. See [Ant Design](https://ant.design/components/tree/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="directory_tree" title="Directory Tree"></demo>
diff --git a/components/antd/tree/README.md b/components/antd/tree/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..9ead8c07a558ac6b103c592a59e117d6d57be0df
--- /dev/null
+++ b/components/antd/tree/README.md
@@ -0,0 +1,8 @@
+# Tree
+
+Multiple-level structure list. See [Ant Design](https://ant.design/components/tree/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="directory_tree" title="Directory Tree"></demo>
diff --git a/components/antd/tree/app.py b/components/antd/tree/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/tree/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/tree/demos/basic.py b/components/antd/tree/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..02753e00c268612600698224de046e9b994d67a5
--- /dev/null
+++ b/components/antd/tree/demos/basic.py
@@ -0,0 +1,83 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+tree_data = [{
+ "title":
+ "parent 1",
+ "key":
+ "0-0",
+ "children": [{
+ "title":
+ "parent 1-0",
+ "key":
+ "0-0-0",
+ "disabled":
+ True,
+ "children": [{
+ "title": "leaf",
+ "key": "0-0-0-0",
+ "disableCheckbox": True
+ }, {
+ "title": "leaf",
+ "key": "0-0-0-1"
+ }]
+ }, {
+ "title": "parent 1-1",
+ "key": "0-0-1",
+ "children": [{
+ "title": "sss",
+ "key": "0-0-1-0"
+ }]
+ }]
+}]
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Tree(elem_style=dict(width="100%"),
+ checkable=True,
+ default_checked_keys=['0-0-0', '0-0-1'],
+ default_selected_keys=['0-0-0', '0-0-1'],
+ default_expanded_keys=['0-0-0', '0-0-1'],
+ tree_data=tree_data)
+ antd.Divider("Custom TreeNode")
+ with antd.Tree(show_line=True,
+ show_icon=True,
+ default_expanded_keys=['parent-1', 'parent-1-0'],
+ elem_style=dict(width=300)):
+ with ms.Slot("treeData"):
+ with antd.Tree.TreeNode(key="parent-1", title="parent 1"):
+ with ms.Slot("icon"):
+ antd.Icon("CarryOutOutlined")
+ with antd.Tree.TreeNode(key="parent-1-0",
+ title="parent 1-0"):
+ with ms.Slot("icon"):
+ antd.Icon("CarryOutOutlined")
+ with antd.Tree.TreeNode(key="leaf1",
+ title="leaf1"):
+ with ms.Slot("icon"):
+ antd.Icon("CarryOutOutlined")
+ with antd.Tree.TreeNode(key="leaf2",
+ title="leaf2"):
+ with ms.Slot("icon"):
+ antd.Icon("CarryOutOutlined")
+ with antd.Tree.TreeNode(key="leaf3",
+ title="leaf3"):
+ with ms.Slot("icon"):
+ antd.Icon("CarryOutOutlined")
+ with antd.Tree.TreeNode(
+ key="parent-1-1",
+ title="parent 1-1",
+ ):
+ with ms.Slot("icon"):
+ antd.Icon("CarryOutOutlined")
+ with antd.Tree.TreeNode(key="leaf11"):
+ with ms.Slot("title"):
+ antd.Typography.Text("leaf11",
+ type="success")
+ with ms.Slot("icon"):
+ antd.Icon("CarryOutOutlined")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/tree/demos/directory_tree.py b/components/antd/tree/demos/directory_tree.py
new file mode 100644
index 0000000000000000000000000000000000000000..515e25873e568601d1792d142969bfe04ee0c0a0
--- /dev/null
+++ b/components/antd/tree/demos/directory_tree.py
@@ -0,0 +1,45 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+tree_data = [{
+ "title":
+ "parent 0",
+ "key":
+ "0-0",
+ "children": [{
+ "title": "leaf 0-0",
+ "key": "0-0-0",
+ "isLeaf": True
+ }, {
+ "title": "leaf 0-1",
+ "key": "0-0-1",
+ "isLeaf": True
+ }]
+}, {
+ "title":
+ "parent 1",
+ "key":
+ "0-1",
+ "children": [{
+ "title": "leaf 1-0",
+ "key": "0-1-0",
+ "isLeaf": True
+ }, {
+ "title": "leaf 1-1",
+ "key": "0-1-1",
+ "isLeaf": True
+ }]
+}]
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Tree.DirectoryTree(draggable=True,
+ multiple=True,
+ default_expand_all=True,
+ tree_data=tree_data)
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/tree_select/README-zh_CN.md b/components/antd/tree_select/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..d90241015db3bb4bd6802cf6d191692cd7683fa6
--- /dev/null
+++ b/components/antd/tree_select/README-zh_CN.md
@@ -0,0 +1,7 @@
+# TreeSelect
+
+Tree selection control. See [Ant Design](https://ant.design/components/tree-select/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/tree_select/README.md b/components/antd/tree_select/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..d90241015db3bb4bd6802cf6d191692cd7683fa6
--- /dev/null
+++ b/components/antd/tree_select/README.md
@@ -0,0 +1,7 @@
+# TreeSelect
+
+Tree selection control. See [Ant Design](https://ant.design/components/tree-select/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/tree_select/app.py b/components/antd/tree_select/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/tree_select/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/tree_select/demos/basic.py b/components/antd/tree_select/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..c13dc35a564eff5fd6ddd25ab2c453cec2b7313d
--- /dev/null
+++ b/components/antd/tree_select/demos/basic.py
@@ -0,0 +1,96 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+tree_data = [{
+ "value":
+ "parent 1",
+ "title":
+ "parent 1",
+ "children": [{
+ "value":
+ "parent 1-0",
+ "title":
+ "parent 1-0",
+ "children": [{
+ "value": "leaf1",
+ "title": "leaf1"
+ }, {
+ "value": "leaf2",
+ "title": "leaf2"
+ }, {
+ "value": "leaf3",
+ "title": "leaf3"
+ }, {
+ "value": "leaf4",
+ "title": "leaf4"
+ }, {
+ "value": "leaf5",
+ "title": "leaf5"
+ }, {
+ "value": "leaf6",
+ "title": "leaf6"
+ }]
+ }, {
+ "value": "parent 1-1",
+ "title": "parent 1-1",
+ "children": [{
+ "value": "leaf11",
+ "title": "leaf11"
+ }]
+ }]
+}]
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.TreeSelect(show_search=True,
+ elem_style=dict(width="100%"),
+ dropdown_style=dict(maxHeight=400,
+ overflow="auto"),
+ multiple=True,
+ placeholder="Please Select",
+ tree_checkable=True,
+ show_checked_strategy="SHOW_PARENT",
+ tree_default_expand_all=True,
+ tree_data=tree_data)
+ antd.Divider("Custom TreeNode")
+ with antd.TreeSelect(tree_line=True,
+ tree_icon=True,
+ elem_style=dict(width=300)):
+ with ms.Slot("treeData"):
+ with antd.TreeSelect.TreeNode(value="parent 1",
+ title="parent 1"):
+ with ms.Slot("icon"):
+ antd.Icon("CarryOutOutlined")
+ with antd.TreeSelect.TreeNode(value="parent 1-0",
+ title="parent 1-0"):
+ with ms.Slot("icon"):
+ antd.Icon("CarryOutOutlined")
+ with antd.TreeSelect.TreeNode(value="leaf1",
+ title="leaf1"):
+ with ms.Slot("icon"):
+ antd.Icon("CarryOutOutlined")
+ with antd.TreeSelect.TreeNode(value="leaf2",
+ title="leaf2"):
+ with ms.Slot("icon"):
+ antd.Icon("CarryOutOutlined")
+ with antd.TreeSelect.TreeNode(value="leaf3",
+ title="leaf3"):
+ with ms.Slot("icon"):
+ antd.Icon("CarryOutOutlined")
+ with antd.TreeSelect.TreeNode(
+ value="parent 1-1",
+ title="parent 1-1",
+ ):
+ with ms.Slot("icon"):
+ antd.Icon("CarryOutOutlined")
+ with antd.TreeSelect.TreeNode(value="leaf11"):
+ with ms.Slot("title"):
+ antd.Typography.Text("leaf11",
+ type="success")
+ with ms.Slot("icon"):
+ antd.Icon("CarryOutOutlined")
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/typography/README-zh_CN.md b/components/antd/typography/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..809ae8666c9cfd82e65f63069bd05cc9e8bbff90
--- /dev/null
+++ b/components/antd/typography/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Button
+
+See [Ant Design](https://ant.design/components/float-button/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/typography/README.md b/components/antd/typography/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..cefa66ef6d080eff86e8bb4061ca18531de7011f
--- /dev/null
+++ b/components/antd/typography/README.md
@@ -0,0 +1,7 @@
+# Typography
+
+Basic text writing, including headings, body text, lists, and more. See [Ant Design](https://ant.design/components/typography/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/antd/typography/app.py b/components/antd/typography/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/typography/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/typography/demos/basic.py b/components/antd/typography/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..0bb2e584e6bdd9fe9d0883a473215cc62e07046d
--- /dev/null
+++ b/components/antd/typography/demos/basic.py
@@ -0,0 +1,23 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def on_edit(e: gr.EventData):
+ return gr.update(value=e._data["payload"][0])
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Typography.Title("Hello, World!", level=3)
+ antd.Typography.Text("Hello, World!", disabled=True)
+ antd.Typography.Text("Hello, World!", type="danger")
+ antd.Typography.Paragraph('This is a copyable text.',
+ copyable=True)
+ p = antd.Typography.Paragraph('This is an editable text.')
+ p.editable_change(on_edit, outputs=[p])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/upload/README-zh_CN.md b/components/antd/upload/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..d2559b7337932cd4bb970652e6825de50f46a3cd
--- /dev/null
+++ b/components/antd/upload/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Upload
+
+Used to select and upload files or drag and drop files. See [Ant Design](https://ant.design/components/upload/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="avatar" title="Avatar"></demo>
diff --git a/components/antd/upload/README.md b/components/antd/upload/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..d2559b7337932cd4bb970652e6825de50f46a3cd
--- /dev/null
+++ b/components/antd/upload/README.md
@@ -0,0 +1,8 @@
+# Upload
+
+Used to select and upload files or drag and drop files. See [Ant Design](https://ant.design/components/upload/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="avatar" title="Avatar"></demo>
diff --git a/components/antd/upload/app.py b/components/antd/upload/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/upload/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/upload/demos/avatar.py b/components/antd/upload/demos/avatar.py
new file mode 100644
index 0000000000000000000000000000000000000000..4d4afcf1c1f9ed72f14a489e44eff250f0b8e4fe
--- /dev/null
+++ b/components/antd/upload/demos/avatar.py
@@ -0,0 +1,31 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Upload(list_type="picture-card",
+ max_count=1,
+ show_upload_list=False,
+ accept="image/*") as upload:
+ image = antd.Image(elem_style=dict(width="100%"),
+ preview=False,
+ visible=False)
+ with ms.Div(visible=True) as btn:
+ antd.Icon("PlusOutlined")
+ ms.Div("Upload", elem_style=dict(marginTop=8))
+
+ def on_change(_upload):
+ return gr.update(value=[]), gr.update(
+ visible=True,
+ value=None if not _upload else _upload[0]), gr.update(
+ visible=False)
+
+ upload.change(fn=on_change,
+ inputs=[upload],
+ outputs=[upload, image, btn])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/upload/demos/basic.py b/components/antd/upload/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..6fc654977dfad55cf39014d8c6f7a57d0e0dfdb6
--- /dev/null
+++ b/components/antd/upload/demos/basic.py
@@ -0,0 +1,35 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Upload(multiple=True) as upload:
+ with antd.Button():
+ ms.Text("Click to Upload")
+ with ms.Slot("icon"):
+ antd.Icon("UploadOutlined")
+ upload.change(fn=lambda _upload: print(_upload), inputs=[upload])
+ antd.Divider("Pictures with list style")
+ with antd.Upload(multiple=True,
+ max_count=3,
+ list_type="picture",
+ accept="image/*"):
+ with antd.Button(type="primary"):
+ ms.Text("Upload (Max: 3)")
+ with ms.Slot("icon"):
+ antd.Icon("UploadOutlined")
+ antd.Divider("Drag and Drop")
+ with antd.Upload.Dragger(multiple=True):
+ with ms.Div(elem_style=dict(fontSize=40, color="#1677ff")):
+ antd.Icon("InboxOutlined")
+ antd.Typography.Paragraph(
+ "Click or drag file to this area to upload")
+ antd.Typography.Paragraph(
+ "Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files.",
+ type="secondary")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/watermark/README-zh_CN.md b/components/antd/watermark/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..d59676829191d35cd342e403368c161febd4d2d8
--- /dev/null
+++ b/components/antd/watermark/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Watermark
+
+Add specific text or patterns to the page. See [Ant Design](https://ant.design/components/watermark/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="modal_or_drawer" title="Modal or Drawer"></demo>
diff --git a/components/antd/watermark/README.md b/components/antd/watermark/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..d59676829191d35cd342e403368c161febd4d2d8
--- /dev/null
+++ b/components/antd/watermark/README.md
@@ -0,0 +1,8 @@
+# Watermark
+
+Add specific text or patterns to the page. See [Ant Design](https://ant.design/components/watermark/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="modal_or_drawer" title="Modal or Drawer"></demo>
diff --git a/components/antd/watermark/app.py b/components/antd/watermark/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/antd/watermark/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/antd/watermark/demos/basic.py b/components/antd/watermark/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..f0521b977bc6dfcc7c754d252d9f5ad3e2d98cc0
--- /dev/null
+++ b/components/antd/watermark/demos/basic.py
@@ -0,0 +1,23 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Flex(vertical=True, gap="small"):
+ with antd.Watermark(content="Ant Design"):
+ antd.Card(elem_style=dict(height=200))
+ with antd.Watermark(content=['Ant Design', 'Happy Working']):
+ antd.Card(elem_style=dict(height=200))
+ with antd.Watermark(
+ height=30,
+ width=130,
+ image=
+ "https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*lkAoRbywo0oAAAAAAAAAAAAADrJ8AQ/original"
+ ):
+ antd.Card(elem_style=dict(height=200))
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/antd/watermark/demos/modal_or_drawer.py b/components/antd/watermark/demos/modal_or_drawer.py
new file mode 100644
index 0000000000000000000000000000000000000000..c54bc31a73bb9810644519ccbb9e524fc831e339
--- /dev/null
+++ b/components/antd/watermark/demos/modal_or_drawer.py
@@ -0,0 +1,30 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Flex(gap="middle"):
+ btn = antd.Button("Open Modal", type="primary")
+ btn2 = antd.Button("Open Drawer", type="primary")
+ with antd.Watermark(content="Ant Design"):
+ with antd.Modal(open=False, title="Basic Modal") as modal:
+ antd.Typography.Paragraph("Some contents...")
+ antd.Typography.Paragraph("Some contents...")
+ antd.Typography.Paragraph("Some contents...")
+
+ modal.ok(lambda: gr.update(open=False), outputs=[modal])
+ modal.cancel(lambda: gr.update(open=False), outputs=[modal])
+ with antd.Watermark(content="Ant Design"):
+ with antd.Drawer(open=False, title="Basic Drawer") as drawer:
+ antd.Typography.Paragraph("Some contents...")
+ antd.Typography.Paragraph("Some contents...")
+ antd.Typography.Paragraph("Some contents...")
+ drawer.close(lambda: gr.update(open=False), outputs=[drawer])
+ btn.click(lambda: gr.update(open=True), outputs=[modal])
+ btn2.click(lambda: gr.update(open=True), outputs=[drawer])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/application/README-zh_CN.md b/components/base/application/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..d73dbb8c813351c8c1ca84374b2be01b8db3c933
--- /dev/null
+++ b/components/base/application/README-zh_CN.md
@@ -0,0 +1,20 @@
+# Application
+
+应用的根组件，该组件包含了所有`modelscope_studio`的组件依赖，需要确保所有从`modelscope_studio`导出的组件都被其包裹，否则页面将会无法成功预览。
+
+该组件还可以监听用户页面的生命周期，并获取当前用户的环境信息，您可以
+
+- 获取当前用户的语言、页面主题、user agent 和屏幕状态。
+- 监听页面行为并触发相应事件（页面加载、尺寸变化、页面关闭等）。
+
+另外，该组件还提供了`custom`事件，您可以通过在任意 Javascript 函数中调用`window.ms_globals.dispatch`主动向 Python 端发送事件，在 Python 端可以通过`ms.Application.custom`事件接收。
+
+## 示例
+
+<demo name="basic"></demo>
+
+<demo name="language_adaptation" title="自动适配用户语言环境"></demo>
+
+<demo name="theme_adaptation" title="根据用户界面主题返回不同权重内容"></demo>
+
+<demo name="custom_event" title="发送自定义事件"></demo>
diff --git a/components/base/application/README.md b/components/base/application/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..4972184464b0d6f5885c0fa087dbfabd2a5a3097
--- /dev/null
+++ b/components/base/application/README.md
@@ -0,0 +1,20 @@
+# Application
+
+The root component of the application, this component contains all the component dependencies of `modelscope_studio`. It is necessary to ensure that all components exported from `modelscope_studio` are wrapped by it, otherwise the page will not be successfully previewed.
+
+In addition, this component can also listen to the lifecycle of the user's page and obtain the current user's environment information, you can:
+
+- Obtain the current user's language, page theme, user agent, and screen status.
+- Listen to page behaviors and trigger corresponding events (page loading, size changes, page closing, etc.).
+
+In addition, this component provides the `custom` event, you can send events to the Python side by calling `window.ms_globals.dispatch` in any Javascript function, and receive the events on the Python side through the `ms.Application.custom` event.
+
+## Examples
+
+<demo name="basic"></demo>
+
+<demo name="language_adaptation" title="Automatically adapt to user language environment"></demo>
+
+<demo name="theme_adaptation" title="Return different weighted content based on user interface theme"></demo>
+
+<demo name="custom_event" title="Send custom events"></demo>
diff --git a/components/base/application/app.py b/components/base/application/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/base/application/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/base/application/demos/basic.py b/components/base/application/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..14d84d05ee4a75af69a61d6fcfd84f99ef2d5b54
--- /dev/null
+++ b/components/base/application/demos/basic.py
@@ -0,0 +1,14 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Button("Primary Button", type="primary")
+ antd.Divider()
+ antd.Input()
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/application/demos/custom_event.py b/components/base/application/demos/custom_event.py
new file mode 100644
index 0000000000000000000000000000000000000000..3251dca2cd85e1d638cb4fa17f2ef69ac232087a
--- /dev/null
+++ b/components/base/application/demos/custom_event.py
@@ -0,0 +1,20 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def on_custom(e: gr.EventData):
+ print(e._data)
+
+
+with gr.Blocks() as demo:
+ with ms.Application() as app:
+ with antd.ConfigProvider():
+ gr.HTML(
+ """<button onclick="window.ms_globals.dispatch({type: 'custom', data: 'test'})">Click me</button>"""
+ )
+
+ app.custom(on_custom)
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/application/demos/language_adaptation.py b/components/base/application/demos/language_adaptation.py
new file mode 100644
index 0000000000000000000000000000000000000000..b1ae2170c5f969655db53010245900c6f9d0a57c
--- /dev/null
+++ b/components/base/application/demos/language_adaptation.py
@@ -0,0 +1,39 @@
+import time
+
+import gradio as gr
+
+import modelscope_studio.components.base as ms
+
+messages = {
+ 'en': {
+ "hello": "Hello"
+ },
+ 'en-US': {
+ "hello": "Hello"
+ },
+ 'zh-CN': {
+ "hello": "你好"
+ }
+}
+
+default_lang = "en"
+
+
+def mount(e: gr.EventData, _state):
+ lang = e._data["language"]
+ if (lang in messages):
+ _state["current_lang"] = lang
+ yield 'Switch Language...', _state
+ time.sleep(2)
+ yield messages[lang]["hello"], _state
+
+
+with gr.Blocks() as demo:
+ with ms.Application() as app:
+ state = gr.State({"current_lang": default_lang})
+ markdown = gr.Markdown(value=messages[default_lang]["hello"])
+
+ app.mount(fn=mount, inputs=[state], outputs=[markdown, state])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/application/demos/theme_adaptation.py b/components/base/application/demos/theme_adaptation.py
new file mode 100644
index 0000000000000000000000000000000000000000..4d9cb2ef823a36eeaed607e47e2a8d6c481e115e
--- /dev/null
+++ b/components/base/application/demos/theme_adaptation.py
@@ -0,0 +1,34 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def mount(e: gr.EventData, _state):
+ _state["theme"] = e._data["theme"]
+ yield _state
+
+
+def fn(_state):
+ theme = _state["theme"]
+ color = '000/fff' if theme == 'dark' else 'fff/000'
+ yield gr.update(
+ value=f"https://dummyimage.com/200x100/{color}.png&text={theme}")
+
+
+with gr.Blocks() as demo:
+ state = gr.State({"theme": "light"})
+ with ms.Application() as app:
+ with antd.ConfigProvider():
+ btn = antd.Button(
+ "Run",
+ type="primary",
+ block=True,
+ )
+ image = antd.Image()
+
+ app.mount(fn=mount, inputs=[state], outputs=[state])
+ btn.click(fn=fn, inputs=[state], outputs=[image])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/auto_loading/README-zh_CN.md b/components/base/auto_loading/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..d775c819d7454cfb5edca98b45740de2a1b55df3
--- /dev/null
+++ b/components/base/auto_loading/README-zh_CN.md
@@ -0,0 +1,35 @@
+# AutoLoading 自动加载
+
+在`Gradio`前端发送请求时自动为被包裹的内容添加加载动画。该组件会自动收集子组件的加载状态，建议至少在全局使用一次此组件，以显示兜底的加载反馈。
+
+> **注：** 如果有多个嵌套的`AutoLoading`组件，则只有最内层的`AutoLoading`能收集到子组件的加载状态并展示加载动画。
+
+在`Gradio`中，前端到服务端的请求一共有 4 种状态：
+
+- `pending`：此时前端发出的请求还没有收到服务端的响应。
+- `generating`：此时前端发出的请求已经收到了响应，但是服务端还没有完成所有内容返回（该状态并不是必定发生的，只有当服务端的处理函数使用`yield`返回值时才会存在）。
+- `completed`：服务端返回了所有内容，本次请求结束。
+- `error`：本次请求发生错误。
+
+默认情况下，`AutoLoading`组件会：
+
+- 在请求状态为`pending`时添加加载动画。
+- 在请求状态为`generating`时结束加载动画，此时用户可以手动控制应用的加载效果，您也可以通过设置`generating=True`来继续展示动画。
+- 在请求状态为`completed`时结束加载动画。
+- 在请求状态为`error`时结束加载动画，您可以通过设置`show_error=True`来为用户展示错误信息（该信息会在页面居中显示）。
+
+## 示例
+
+<demo name="basic"></demo>
+
+<demo name="nested" title="嵌套的 AutoLoading"></demo>
+
+## API
+
+| 属性 | 类型 | 默认值 | 描述 |
+| ------------ | ---- | ------ | ---------------------------------------------------------------------------------------- |
+| generating | bool | False | 是否包含对`generating`状态的处理 |
+| show_error | bool | True | 是否显示错误信息 |
+| show_mask | bool | True | 是否显示遮罩 |
+| show_timer | bool | True | 是否显示计时器 |
+| loading_text | str | None | 加载中文案，默认不填写使用 `Gradio` 的加载文案显示（包括加载时间、当前用户的排队队列等） |
diff --git a/components/base/auto_loading/README.md b/components/base/auto_loading/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..6e5be586294ad9bad3f99fd953d0c41096085c0a
--- /dev/null
+++ b/components/base/auto_loading/README.md
@@ -0,0 +1,35 @@
+# AutoLoading
+
+Automatically adds loading animations to the wrapped content when requests are sent from the `Gradio` frontend. This component will automatically collect the loading states of child components, it's recommended to use this component at least once globally to provide fallback loading feedback.
+
+> **Note:** If there are multiple nested `AutoLoading` components, only the innermost `AutoLoading` can collect the loading states of child components and display the loading animation.
+
+In `Gradio`, there are 4 states for requests from the frontend to the backend:
+
+- `pending`: The frontend has sent a request but has not yet received a response from the backend.
+- `generating`: The frontend has received a response, but the backend has not completed sending all content (this state does not necessarily occur and only exists when the backend's processing function uses `yield` to return values).
+- `completed`: The backend has returned all content, and the request has ended.
+- `error`: An error occurred during the request.
+
+By default, the `AutoLoading` component will:
+
+- Add a loading animation when the request status is `pending`.
+- End the loading animation when the request status is `generating`. At this point, users can manually control the application's loading effect, or you can set `generating=True` to continue displaying the animation.
+- End the loading animation when the request status is `completed`.
+- End the loading animation when the request status is `error`. You can set `show_error=True` to display error information to the user (this information will be centered on the page).
+
+## Examples
+
+<demo name="basic"></demo>
+
+<demo name="nested" title="Nested AutoLoading"></demo>
+
+## API
+
+| Attribute | Type | Default Value | Description |
+| ------------ | ---- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| generating | bool | False | Whether to include handling of the `generating` state |
+| show_error | bool | True | Whether to display error information |
+| show_mask | bool | True | Whether to display the mask |
+| show_timer | bool | True | Whether to display the timer |
+| loading_text | str | None | Loading text, if not filled, it will use the loading text provided by `Gradio` (including loading time, current user's queue position, etc.) |
diff --git a/components/base/auto_loading/app.py b/components/base/auto_loading/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/base/auto_loading/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/base/auto_loading/demos/basic.py b/components/base/auto_loading/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..4026edfb6d440538c40bddf2a86c6c9384b66afe
--- /dev/null
+++ b/components/base/auto_loading/demos/basic.py
@@ -0,0 +1,24 @@
+import time
+
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def click():
+ time.sleep(2)
+ yield gr.update(value="Hello")
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with ms.AutoLoading():
+ textarea = antd.Input.Textarea()
+
+ btn = antd.Button("Click")
+ btn.click(click, outputs=[textarea])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/auto_loading/demos/nested.py b/components/base/auto_loading/demos/nested.py
new file mode 100644
index 0000000000000000000000000000000000000000..c4bab53e704806c4635726bb089a4befb6fa6c17
--- /dev/null
+++ b/components/base/auto_loading/demos/nested.py
@@ -0,0 +1,43 @@
+import time
+
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def click():
+ time.sleep(2)
+ yield gr.update(value="Hello"), gr.update(value="Hello")
+ time.sleep(2)
+ yield gr.update(value="Hello World"), gr.update(value="Hello World")
+
+
+def click2():
+ time.sleep(2)
+ yield gr.update(value="Hello")
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with ms.AutoLoading():
+ with antd.Space(direction="vertical",
+ elem_style=dict(width="100%")):
+ with ms.AutoLoading(generating=True):
+ textarea = antd.Input.Textarea()
+
+ with ms.AutoLoading(show_mask=True):
+ textarea2 = antd.Input.Textarea()
+
+ textarea3 = antd.Input.Textarea()
+
+ with antd.Space():
+ btn = antd.Button("Click")
+ btn2 = antd.Button("Click2")
+
+ btn.click(click, outputs=[textarea, textarea2])
+ btn2.click(click2, outputs=[textarea3])
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/div/README-zh_CN.md b/components/base/div/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..34937273795a16369b70e415f7d9b06e4cd362f7
--- /dev/null
+++ b/components/base/div/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Div
+
+同 HTML 中的`div`标签，用于辅助布局，可以绑定常用的 HTML 事件，具体事件请查看`EVENTS`属性。
+
+## 示例
+
+<demo name="basic"></demo>
diff --git a/components/base/div/README.md b/components/base/div/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..76615738ad5bd6481f20ef9b5bfa9290defc4186
--- /dev/null
+++ b/components/base/div/README.md
@@ -0,0 +1,7 @@
+# Div
+
+Same as the `div` tag in HTML, used for layout assistance, can bind common HTML events, please refer to the `EVENTS` property for specific events.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/base/div/app.py b/components/base/div/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/base/div/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/base/div/demos/basic.py b/components/base/div/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..ca614f9b4fbc155004bad4ff00f665562ac01c36
--- /dev/null
+++ b/components/base/div/demos/basic.py
@@ -0,0 +1,12 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with ms.Div(elem_style=dict(color="red", fontSize=22)):
+ ms.Text("Hello Div")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/each/README-zh_CN.md b/components/base/each/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..4fd5241952e3b519da87c903f54d2912e33fef62
--- /dev/null
+++ b/components/base/each/README-zh_CN.md
@@ -0,0 +1,30 @@
+# Each
+
+辅助渲染组件，该组件支持传入列表作为参数，并会在前端遍历被包裹的组件，将列表的每一项注入当前遍历的上下文中，被包裹的组件属性会在前端被相应的上下文属性替换（只支持从`modelscope_studio`中导出的组件）。
+
+> 注意：在大多数情况下，您不需要使用`Each`组件，如果您需要动态渲染组件，我们更建议您使 Gradio 提供的 [render](https://www.gradio.app/docs/gradio/render) 函数。
+
+## 何时使用
+
+- 当被遍历的组件中全部都是`modelscope_studio`组件或非`modelscope_studio`的组件值不与被遍历的值绑定时；
+- 当需要遍历展示的列表长度无法确定时；
+- 不想要在 Python 中绑定过多事件监听时；
+
+## 示例
+
+<demo name="basic"></demo>
+
+`modelscope_studio`中的每个组件都有一个`as_item`参数（包括`Each`组件本身），指定该参数值后可以直接基于上下文的值做过滤，逻辑上类似`ctx_value = ctx_value["as_item"]`。该特性通常在需要遍历多个组件时使用，可以有效避免属性冲突。
+
+<demo name="use_as_item" title="使用 as_item 参数"></demo>
+
+如果您需要为所有的列表项的组件都添加某些统一的属性，您还可以传入`context_value`参数，该参数会与列表项的上下文深度合并，共同传递给前端组件。
+
+<demo name="use_context_value" title="使用 context_value 参数"></demo>
+
+### API
+
+| 属性 | 类型 | 默认值 | 描述 |
+| ------------- | ---- | ------ | ---------------- |
+| value | list | None | 组件的数据源 |
+| context_value | dict | None | 统一的上下文参数 |
diff --git a/components/base/each/README.md b/components/base/each/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..ddc30c9f2300f5ae5e14c18d02856d9ec85c1c5c
--- /dev/null
+++ b/components/base/each/README.md
@@ -0,0 +1,29 @@
+# Each
+
+A helper rendering component that supports passing a list as a parameter and will traverse the wrapped components on the front end, injecting each item of the list into the current traversal context. The attributes of the wrapped components will be replaced by corresponding context properties on the front end (only supports components exported from `modelscope_studio`).
+
+> Note: In most cases, you do not need to use the `Each` component. If you need to render components dynamically, we recommend using the [render](https://www.gradio.app/docs/gradio/render) function provided by Gradio.
+
+## When to Use
+
+- When all components being traversed are `modelscope_studio` components or non-`modelscope_studio` components whose values do not bind to the traversed values.
+- When the length of the list to be traversed is uncertain.
+
+## Examples
+
+<demo name="basic"></demo>
+
+Each component within `modelscope_studio` has an `as_item` parameter (including the `Each` component itself). Specifying this parameter value allows filtering based directly on the context value, similar logically to `ctx_value = ctx_value["as_item"]`. This feature is typically used when multiple components need to be iterated over, effectively avoiding property conflicts.
+
+<demo name="use_as_item" title="Using the as_item Parameter"></demo>
+
+If you need to add certain unified properties to all list item components, you can also pass in the `context_value` parameter. This parameter will be deeply merged with the list item's context and passed together to the front-end component.
+
+<demo name="use_context_value" title="Using the context_value Parameter"></demo>
+
+### API
+
+| Attribute | Type | Default Value | Description |
+| ------------- | ---- | ------------- | ----------------------------- |
+| value | list | None | Data source for the component |
+| context_value | dict | None | Unified context parameters |
diff --git a/components/base/each/app.py b/components/base/each/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/base/each/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/base/each/demos/basic.py b/components/base/each/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..ca2743605283d33213329c1026581e8aae492b2a
--- /dev/null
+++ b/components/base/each/demos/basic.py
@@ -0,0 +1,35 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [{
+ "message": "Success Text",
+ "description":
+ "Success Description Success Description Success Description Success Description",
+ "type": "success"
+}, {
+ "message": "Info Text",
+ "description":
+ "Info Description Info Description Info Description Info Description",
+ "type": "info"
+}, {
+ "message": "Warning Text",
+ "description":
+ "Warning Description Warning Description Warning Description Warning Description",
+ "type": "warning"
+}, {
+ "message": "Error Text",
+ "description":
+ "Error Description Error Description Error Description Error Description",
+ "type": "error"
+}]
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.Space(direction="vertical"):
+ with ms.Each(value=data):
+ antd.Alert()
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/each/demos/use_as_item.py b/components/base/each/demos/use_as_item.py
new file mode 100644
index 0000000000000000000000000000000000000000..a2982911c5afec8606dee5e87d8da91f83964c1a
--- /dev/null
+++ b/components/base/each/demos/use_as_item.py
@@ -0,0 +1,69 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [{
+ "card": {
+ "title": "Success Card Title",
+ },
+ "each": {
+ "value": [{
+ "value": "Card Content"
+ }, {
+ "value": "Card Content"
+ }, {
+ "value": "Card Content"
+ }]
+ }
+}, {
+ "card": {
+ "title": "Info Card Title",
+ },
+ "each": {
+ "value": [{
+ "value": "Card Content"
+ }, {
+ "value": "Card Content"
+ }, {
+ "value": "Card Content"
+ }]
+ }
+}, {
+ "card": {
+ "title": "Warning Card Title",
+ },
+ "each": {
+ "value": [{
+ "value": "Card Content"
+ }, {
+ "value": "Card Content"
+ }, {
+ "value": "Card Content"
+ }]
+ }
+}, {
+ "card": {
+ "title": "Error Card Title",
+ },
+ "each": {
+ "value": [{
+ "value": "Card Content"
+ }, {
+ "value": "Card Content"
+ }, {
+ "value": "Card Content"
+ }]
+ }
+}]
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with ms.Each(value=data):
+ with antd.Card(as_item="card"):
+ # Inner loop
+ with ms.Each(as_item="each"):
+ antd.Typography.Paragraph()
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/each/demos/use_context_value.py b/components/base/each/demos/use_context_value.py
new file mode 100644
index 0000000000000000000000000000000000000000..2e6e0f1981193c3ba1b04e74d3167159dc36649c
--- /dev/null
+++ b/components/base/each/demos/use_context_value.py
@@ -0,0 +1,69 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [{
+ "card": {
+ "title": "Success Card Title",
+ },
+ "each": {
+ "value": [{
+ "value": "Card Content"
+ }, {
+ "value": "Card Content"
+ }, {
+ "value": "Card Content"
+ }]
+ }
+}, {
+ "card": {
+ "title": "Info Card Title",
+ },
+ "each": {
+ "value": [{
+ "value": "Card Content"
+ }, {
+ "value": "Card Content"
+ }, {
+ "value": "Card Content"
+ }]
+ }
+}, {
+ "card": {
+ "title": "Warning Card Title",
+ },
+ "each": {
+ "value": [{
+ "value": "Card Content"
+ }, {
+ "value": "Card Content"
+ }, {
+ "value": "Card Content"
+ }]
+ }
+}, {
+ "card": {
+ "title": "Error Card Title",
+ },
+ "each": {
+ "value": [{
+ "value": "Card Content"
+ }, {
+ "value": "Card Content"
+ }, {
+ "value": "Card Content"
+ }]
+ }
+}]
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with ms.Each(value=data, context_value={"card": {"hoverable": True}}):
+ with antd.Card(as_item="card"):
+ # Inner loop
+ with ms.Each(as_item="each"):
+ antd.Typography.Paragraph()
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/filter/README-zh_CN.md b/components/base/filter/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..488c422f034eaefdeb24f7c21810bb78df4716bd
--- /dev/null
+++ b/components/base/filter/README-zh_CN.md
@@ -0,0 +1,21 @@
+# Filter
+
+辅助渲染组件，该组件需要与`Each`组件配合使用，用于过滤`Each`组件中的上下文信息。
+
+该组件的`as_item`参数有所不同，它会将过滤后的上下文信息作为基础继续往下传递，适合在多个模块组件的`Each`组件遍历中使用。
+
+同时，您也可以传入`params_mapping`参数，该参数允许用户通过 Javascript 函数的形式自定义过滤上下文信息。
+
+而如果不传入任何参数，该组件会阻断`Each`组件的上下文传递，让属性的覆盖失效。
+
+## 示例
+
+<demo name="basic"></demo>
+<demo name="use_as_item" title="使用 as_item 参数"></demo>
+<demo name="use_params_mapping" title="使用 params_mapping 参数"></demo
+
+### API
+
+| 属性 | 类型 | 默认值 | 描述 |
+| -------------- | ---- | ------ | -------------------------------------------------------------------------------------------- |
+| params_mapping | str | None | 该值为一个 Javascript 的函数字符串，允许用户通过 Javascript 函数的形式自定义过滤上下文信息。 |
diff --git a/components/base/filter/README.md b/components/base/filter/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..f389c5df5ea84e0b7b49910e672326654e446c0e
--- /dev/null
+++ b/components/base/filter/README.md
@@ -0,0 +1,21 @@
+# Filter
+
+An auxiliary rendering component that needs to be used in conjunction with the `Each` component to filter context information within the `Each` component.
+
+The `as_item` parameter of this component behaves differently; it passes down the filtered context information as a base, making it suitable for use across multiple module components within an `Each` component iteration.
+
+Additionally, you can pass the `params_mapping` parameter, which allows users to customize the filtering of context information through a JavaScript function.
+
+If no parameters are provided, this component will block the context transmission of the `Each` component, making attribute overrides ineffective.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="use_as_item" title="Using the as_item Parameter"></demo>
+<demo name="use_params_mapping" title="Using the params_mapping Parameter"></demo>
+
+### API
+
+| Property | Type | Default Value | Description |
+| -------------- | ---- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| params_mapping | str | None | This value is a string of a Javascript function, allowing users to customize the filtering of context information via a JavaScript function. |
diff --git a/components/base/filter/app.py b/components/base/filter/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/base/filter/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/base/filter/demos/basic.py b/components/base/filter/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..54f6658111f99d6a0c2c83b687301f395b3fb2bc
--- /dev/null
+++ b/components/base/filter/demos/basic.py
@@ -0,0 +1,20 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [{"value": "Hello"}, {"value": "World"}]
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.Space(direction="vertical"):
+ antd.Divider("Without Filter")
+ with ms.Each(value=data):
+ antd.Button()
+ antd.Divider("With Filter")
+ with ms.Each(value=data):
+ with ms.Filter():
+ antd.Button("Run")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/filter/demos/use_as_item.py b/components/base/filter/demos/use_as_item.py
new file mode 100644
index 0000000000000000000000000000000000000000..a6fc55c01df34c89e6594a106a5151adc6a5f3da
--- /dev/null
+++ b/components/base/filter/demos/use_as_item.py
@@ -0,0 +1,27 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [{
+ "title": "Card Title",
+ "btn": {
+ "value": "Hello"
+ }
+}, {
+ "title": "Card Title",
+ "btn": {
+ "value": "World"
+ }
+}]
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.Space(direction="vertical"):
+ with ms.Each(value=data):
+ with antd.Card():
+ with ms.Filter(as_item="btn"):
+ antd.Button()
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/filter/demos/use_params_mapping.py b/components/base/filter/demos/use_params_mapping.py
new file mode 100644
index 0000000000000000000000000000000000000000..e048ca7d5cbb9f026cb5d6103d5a396b2882961a
--- /dev/null
+++ b/components/base/filter/demos/use_params_mapping.py
@@ -0,0 +1,26 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [{
+ "title": "Card Title",
+ "desc": "Hello"
+}, {
+ "title": "Card Title",
+ "desc": "World"
+}]
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.Space(direction="vertical"):
+ with ms.Each(value=data):
+ with antd.Card():
+ with ms.Filter(
+ params_mapping=
+ """(props) => ({ value: props.desc, type: props.desc === 'World' ? 'primary' : 'default' })"""
+ ):
+ antd.Button()
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/fragment/README-zh_CN.md b/components/base/fragment/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..23b19fa74a39de85ea55f29f87ad1b49abf76a1f
--- /dev/null
+++ b/components/base/fragment/README-zh_CN.md
@@ -0,0 +1,9 @@
+# Fragment 片段
+
+分段组件，该组件本身不会参与页面布局，它的主要作用是组合多个子组件，并将它们共同包装为`modelscope_studio`组件。
+
+> 部分组件的插槽仅支持从`modelscope_studio`中导出的组件，如果您需要插入其他组件，就需要使用`Fragment`组件进行包裹。
+
+## 示例
+
+<demo name="basic"></demo>
diff --git a/components/base/fragment/README.md b/components/base/fragment/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..02bc4b456ec28e2c32cf3ce4b6420bff658ed911
--- /dev/null
+++ b/components/base/fragment/README.md
@@ -0,0 +1,9 @@
+# Fragment
+
+A fragment component that does not participate in page layout itself. Its main purpose is to combine multiple child components and wrap them together as a `modelscope_studio` component.
+
+> Some component slots only support components exported from `modelscope_studio`. If you need to insert other components, you'll need to wrap them with the `Fragment` component.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/base/fragment/app.py b/components/base/fragment/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/base/fragment/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/base/fragment/demos/basic.py b/components/base/fragment/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..4f82b3eab9ba7154c92ff853870f05af680aba62
--- /dev/null
+++ b/components/base/fragment/demos/basic.py
@@ -0,0 +1,22 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.Divider("Without Fragment")
+ with antd.Space():
+ antd.Button("Antd Button")
+ antd.Button("Antd Button")
+ gr.Button("Gradio Button")
+ antd.Divider("With Fragment")
+ with antd.Space():
+ antd.Button("Antd Button")
+ antd.Button("Antd Button")
+ with ms.Fragment():
+ gr.Button("Gradio Button")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/slot/README-zh_CN.md b/components/base/slot/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..998a74918b765f062ccb1241467a63bac6b989fe
--- /dev/null
+++ b/components/base/slot/README-zh_CN.md
@@ -0,0 +1,16 @@
+# Slot 插槽
+
+插槽组件，需要与`modelscope_studio`中的其他组件一起使用，可以传入指定插槽名称，从而将该组件插入到目标组件的指定位置。
+
+`modelscope_studio`中组件的插槽可以通过获取`SLOTS`属性查看。
+
+## 示例
+
+<demo name="basic"></demo>
+
+### API
+
+| 属性 | 类型 | 默认值 | 描述 |
+| -------------- | ---- | ------ | -------------------------------------------------------------------------------------------------------------------------- |
+| value | str | None | 插槽名称 |
+| params_mapping | str | None | 该值为一个 Javascript 的函数字符串，当对应插槽可以接受参数时，通过此参数可以将参数映射为插槽的上下文，具体请参考`Each`组件 |
diff --git a/components/base/slot/README.md b/components/base/slot/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..a8c4fc4b3711f1de85c17797aed8fb12be96c8b4
--- /dev/null
+++ b/components/base/slot/README.md
@@ -0,0 +1,16 @@
+# Slot
+
+A slot component that needs to be used with other components in `modelscope_studio`. You can pass in a specified slot name to insert this component into the specified position of the target component.
+
+The slots of components in `modelscope_studio` can be viewed by getting the `SLOTS` property.
+
+## Examples
+
+<demo name="basic"></demo>
+
+### API
+
+| Attribute | Type | Default Value | Description |
+| -------------- | ---- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| value | str | None | Slot name |
+| params_mapping | str | None | This value is a string of a Javascript function. When the corresponding slot can accept parameters, the parameters can be mapped to the slot context through this parameter, please refer to the `Each` component for details. |
diff --git a/components/base/slot/app.py b/components/base/slot/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/base/slot/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/base/slot/demos/basic.py b/components/base/slot/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..7123e0a368e81dbc5a98e192d52b1a4b5df77812
--- /dev/null
+++ b/components/base/slot/demos/basic.py
@@ -0,0 +1,23 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with antd.Card():
+ ms.Div("Card Content")
+ ms.Div("Card Content")
+ ms.Div("Card Content")
+ # slots
+ with ms.Slot("title"):
+ ms.Text("Card Title")
+ with ms.Slot("extra"):
+ with antd.Button():
+ ms.Text("GitHub")
+ with ms.Slot("icon"):
+ antd.Icon("GithubOutlined")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/span/README-zh_CN.md b/components/base/span/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..22ed1ed9096a5c8522eabb24405352b5e6ed49aa
--- /dev/null
+++ b/components/base/span/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Span
+
+同 HTML 中的`span`标签，用于辅助布局，可以绑定常用的 HTML 事件，具体事件请查看`EVENTS`属性。
+
+## 示例
+
+<demo name="basic"></demo>
diff --git a/components/base/span/README.md b/components/base/span/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..df2c4b44d048442d1ce4a6c3c6f72a985470c18f
--- /dev/null
+++ b/components/base/span/README.md
@@ -0,0 +1,7 @@
+# Span
+
+Same as the `span` tag in HTML, used for layout assistance, can bind common HTML events, please refer to the `EVENTS` property for specific events.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/base/span/app.py b/components/base/span/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/base/span/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/base/span/demos/basic.py b/components/base/span/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..ed722ca8f197d772ef40c7842f461861a6181144
--- /dev/null
+++ b/components/base/span/demos/basic.py
@@ -0,0 +1,12 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with ms.Span(elem_style=dict(color="red", fontSize=22)):
+ ms.Text("Hello Span")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/base/text/README-zh_CN.md b/components/base/text/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..d932c34b67fdce11570727db7d7c0011b85e192b
--- /dev/null
+++ b/components/base/text/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Text
+
+纯文本字符串，类似 HTML 中的`textNode`，用于辅助布局。
+
+## 示例
+
+<demo name="basic"></demo>
diff --git a/components/base/text/README.md b/components/base/text/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..902e8054c450cbe7cc2edca45dd5de7236bf8a6c
--- /dev/null
+++ b/components/base/text/README.md
@@ -0,0 +1,7 @@
+# Text
+
+Plain text string, similar to `textNode` in HTML, used for layout assistance.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/components/base/text/app.py b/components/base/text/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..0018b7c1d02f97731da6e29c06bb4ebb0326d3e9
--- /dev/null
+++ b/components/base/text/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/base/text/demos/basic.py b/components/base/text/demos/basic.py
new file mode 100644
index 0000000000000000000000000000000000000000..e6ec5d4ee533708dcdeef7f8b384f991d99a5425
--- /dev/null
+++ b/components/base/text/demos/basic.py
@@ -0,0 +1,11 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ ms.Text("Hello Text")
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/components/Chatbot/README-zh_CN.md b/components/legacy/Chatbot/README-zh_CN.md
similarity index 99%
rename from components/Chatbot/README-zh_CN.md
rename to components/legacy/Chatbot/README-zh_CN.md
index d88ea4a8279f43b69b804108bd63606bd26c6771..307e40d832fd247dc4e9a9df80a507d0b82da584 100644
--- a/components/Chatbot/README-zh_CN.md
+++ b/components/legacy/Chatbot/README-zh_CN.md
@@ -30,7 +30,7 @@
```python
import modelscope_studio as mgr
-from modelscope_studio.components.Chatbot.llm_thinking_presets import qwen
+from modelscope_studio.components.legacy.Chatbot.llm_thinking_presets import qwen
# 添加 qwen 解析预设
mgr.Chatbot(llm_thinking_presets=[qwen()])
diff --git a/components/Chatbot/README.md b/components/legacy/Chatbot/README.md
similarity index 99%
rename from components/Chatbot/README.md
rename to components/legacy/Chatbot/README.md
index 21d1904d6ff739bbe3a81ff3b6a4f0293e64384a..5aeb32e14675a55d575dbeef296754bf29f55e8f 100644
--- a/components/Chatbot/README.md
+++ b/components/legacy/Chatbot/README.md
@@ -29,7 +29,7 @@ Additionally, to adapt to the toolchain usage of large models, some preset confi
```python
import modelscope_studio as mgr
-from modelscope_studio.components.Chatbot.llm_thinking_presets import qwen
+from modelscope_studio.components.legacy.Chatbot.llm_thinking_presets import qwen
# Add qwen preset
mgr.Chatbot(llm_thinking_presets=[qwen()])
diff --git a/components/legacy/Chatbot/app.py b/components/legacy/Chatbot/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..ea841f78832d9254426dc781674f7e39f7f7fd2f
--- /dev/null
+++ b/components/legacy/Chatbot/app.py
@@ -0,0 +1,6 @@
+from components.legacy.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/Chatbot/demos/accordion.py b/components/legacy/Chatbot/demos/accordion.py
similarity index 93%
rename from components/Chatbot/demos/accordion.py
rename to components/legacy/Chatbot/demos/accordion.py
index 2f6430bdc6a7143c975a0592b082448dee4bd3ad..ed3ca9e2c66872dfac28ae892b3c0cb2f3014313 100644
--- a/components/Chatbot/demos/accordion.py
+++ b/components/legacy/Chatbot/demos/accordion.py
@@ -3,7 +3,8 @@ import os
import gradio as gr
import modelscope_studio as mgr
-from modelscope_studio.components.Chatbot.llm_thinking_presets import qwen
+from modelscope_studio.components.legacy.Chatbot.llm_thinking_presets import \
+ qwen
def resolve_assets(relative_path):
diff --git a/components/Chatbot/demos/basic.py b/components/legacy/Chatbot/demos/basic.py
similarity index 100%
rename from components/Chatbot/demos/basic.py
rename to components/legacy/Chatbot/demos/basic.py
diff --git a/components/Chatbot/demos/chart.py b/components/legacy/Chatbot/demos/chart.py
similarity index 100%
rename from components/Chatbot/demos/chart.py
rename to components/legacy/Chatbot/demos/chart.py
diff --git a/components/Chatbot/demos/message_config.py b/components/legacy/Chatbot/demos/message_config.py
similarity index 100%
rename from components/Chatbot/demos/message_config.py
rename to components/legacy/Chatbot/demos/message_config.py
diff --git a/components/Chatbot/demos/multi_bots.py b/components/legacy/Chatbot/demos/multi_bots.py
similarity index 100%
rename from components/Chatbot/demos/multi_bots.py
rename to components/legacy/Chatbot/demos/multi_bots.py
diff --git a/components/Chatbot/demos/multimodal.py b/components/legacy/Chatbot/demos/multimodal.py
similarity index 91%
rename from components/Chatbot/demos/multimodal.py
rename to components/legacy/Chatbot/demos/multimodal.py
index 28aebe4cc924df119e89230790e40e180e806dbe..06af466c7db51f2f89e2c392b496ecec25022abe 100644
--- a/components/Chatbot/demos/multimodal.py
+++ b/components/legacy/Chatbot/demos/multimodal.py
@@ -20,10 +20,6 @@ Image
<img src="{resolve_assets("user.jpeg")}" />
-Video
-
-<video src="{resolve_assets("dog.mp4")}"></video>
-
Audio
<audio src="{resolve_assets("audio.wav")}"></audio>
diff --git a/components/Chatbot/demos/select-box.py b/components/legacy/Chatbot/demos/select-box.py
similarity index 88%
rename from components/Chatbot/demos/select-box.py
rename to components/legacy/Chatbot/demos/select-box.py
index 6035ba30cf5f7a956396693b600560e34c49073a..89b7b6f743ea4782a0f9e92d0e173d165f088293 100644
--- a/components/Chatbot/demos/select-box.py
+++ b/components/legacy/Chatbot/demos/select-box.py
@@ -11,9 +11,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>
diff --git a/components/Docs.py b/components/legacy/Docs.py
similarity index 97%
rename from components/Docs.py
rename to components/legacy/Docs.py
index 71d863bb5d9ed10a6636d868c680ec0651460432..ca095155e3050dd9191a214e6ce392117166229d 100644
--- a/components/Docs.py
+++ b/components/legacy/Docs.py
@@ -3,6 +3,7 @@ import re
from typing import Callable
import gradio as gr
+from helper.env import is_modelscope_studio
import modelscope_studio as mgr
@@ -62,9 +63,6 @@ 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):
@@ -153,7 +151,7 @@ class Docs:
def render(self, components_tabs=None):
def tab_link_click(data: gr.EventData):
- tab: str = data._data["value"].get("tab", '')
+ tab: str = data._data.get("value", {}).get("tab", '')
component_tab: str = data._data["value"].get("component_tab", '')
if tab and tabs:
return {tabs: gr.update(selected=tab)}
diff --git a/components/Flow/README-zh_CN.md b/components/legacy/Flow/README-zh_CN.md
similarity index 100%
rename from components/Flow/README-zh_CN.md
rename to components/legacy/Flow/README-zh_CN.md
diff --git a/components/Flow/README.md b/components/legacy/Flow/README.md
similarity index 100%
rename from components/Flow/README.md
rename to components/legacy/Flow/README.md
diff --git a/components/legacy/Flow/app.py b/components/legacy/Flow/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..ea841f78832d9254426dc781674f7e39f7f7fd2f
--- /dev/null
+++ b/components/legacy/Flow/app.py
@@ -0,0 +1,6 @@
+from components.legacy.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/Flow/define_schema-zh_CN.md b/components/legacy/Flow/define_schema-zh_CN.md
similarity index 100%
rename from components/Flow/define_schema-zh_CN.md
rename to components/legacy/Flow/define_schema-zh_CN.md
diff --git a/components/Flow/define_schema.md b/components/legacy/Flow/define_schema.md
similarity index 100%
rename from components/Flow/define_schema.md
rename to components/legacy/Flow/define_schema.md
diff --git a/components/Flow/demos/basic.py b/components/legacy/Flow/demos/basic.py
similarity index 92%
rename from components/Flow/demos/basic.py
rename to components/legacy/Flow/demos/basic.py
index 920e7fc58203b70a0f48905e2285395ec7135e24..3505892fd765ace7c08f9f3f1dc5e2d231e1f696 100644
--- a/components/Flow/demos/basic.py
+++ b/components/legacy/Flow/demos/basic.py
@@ -4,7 +4,7 @@ import os
import gradio as gr
import modelscope_studio as mgr
-from modelscope_studio.components.Flow import Edge, Node
+from modelscope_studio.components.legacy.Flow import Edge, Node
with open((os.path.join(os.path.dirname(__file__),
"../schema/agents_schema.json"))) as f:
diff --git a/components/Flow/demos/component_options.py b/components/legacy/Flow/demos/component_options.py
similarity index 96%
rename from components/Flow/demos/component_options.py
rename to components/legacy/Flow/demos/component_options.py
index b080470f54d63694d7a0811c1f48091457920b31..6182594fe1a00dbd2516974489d6cc5ec445e9f0 100644
--- a/components/Flow/demos/component_options.py
+++ b/components/legacy/Flow/demos/component_options.py
@@ -4,7 +4,8 @@ import os
import gradio as gr
import modelscope_studio as mgr
-from modelscope_studio.components.Flow import BackgroundPropsDict, Edge, Node
+from modelscope_studio.components.legacy.Flow import (BackgroundPropsDict,
+ Edge, Node)
with open((os.path.join(os.path.dirname(__file__),
"../schema/agents_schema.json"))) as f:
diff --git a/components/Flow/demos/custom_node_type.py b/components/legacy/Flow/demos/custom_node_type.py
similarity index 87%
rename from components/Flow/demos/custom_node_type.py
rename to components/legacy/Flow/demos/custom_node_type.py
index e40d3e40864c0ad3f02af8f7826807c468dbb83f..c3f59e74c1218a5ea4844c89972fe9d02592cdba 100644
--- a/components/Flow/demos/custom_node_type.py
+++ b/components/legacy/Flow/demos/custom_node_type.py
@@ -1,9 +1,9 @@
import gradio as gr
import modelscope_studio as mgr
-from modelscope_studio.components.Flow import (FlowSchemaDict, Node,
- NodeSchemaAttributeDict,
- NodeSchemaDict)
+from modelscope_studio.components.legacy.Flow import (FlowSchemaDict, Node,
+ NodeSchemaAttributeDict,
+ NodeSchemaDict)
def on_data_change(_flow):
diff --git a/components/Flow/schema/agents_schema.json b/components/legacy/Flow/schema/agents_schema.json
similarity index 100%
rename from components/Flow/schema/agents_schema.json
rename to components/legacy/Flow/schema/agents_schema.json
diff --git a/components/Flow/schema/agents_schema.py b/components/legacy/Flow/schema/agents_schema.py
similarity index 97%
rename from components/Flow/schema/agents_schema.py
rename to components/legacy/Flow/schema/agents_schema.py
index 9cc1f6c8150b8c4c71ca84d76b0aefd49a196028..d80f78483713a654899a9bcfe73ee836e8c2ff6a 100644
--- a/components/Flow/schema/agents_schema.py
+++ b/components/legacy/Flow/schema/agents_schema.py
@@ -1,6 +1,6 @@
import os
-from modelscope_studio.components.Flow import (
+from modelscope_studio.components.legacy.Flow import (
FlowSchemaDict, NodeSchemaAttributeDict, NodeSchemaAttributeListDict,
NodeSchemaAttributeRequiredDict, NodeSchemaDict, NodeSchemaPortsDict,
NodeSchemaTemplateDict)
diff --git a/components/Lifecycle/README-zh_CN.md b/components/legacy/Lifecycle/README-zh_CN.md
similarity index 100%
rename from components/Lifecycle/README-zh_CN.md
rename to components/legacy/Lifecycle/README-zh_CN.md
diff --git a/components/Lifecycle/README.md b/components/legacy/Lifecycle/README.md
similarity index 100%
rename from components/Lifecycle/README.md
rename to components/legacy/Lifecycle/README.md
diff --git a/components/legacy/Lifecycle/app.py b/components/legacy/Lifecycle/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..ea841f78832d9254426dc781674f7e39f7f7fd2f
--- /dev/null
+++ b/components/legacy/Lifecycle/app.py
@@ -0,0 +1,6 @@
+from components.legacy.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/Lifecycle/demos/basic.py b/components/legacy/Lifecycle/demos/basic.py
similarity index 100%
rename from components/Lifecycle/demos/basic.py
rename to components/legacy/Lifecycle/demos/basic.py
diff --git a/components/Lifecycle/demos/language_adaptation.py b/components/legacy/Lifecycle/demos/language_adaptation.py
similarity index 100%
rename from components/Lifecycle/demos/language_adaptation.py
rename to components/legacy/Lifecycle/demos/language_adaptation.py
diff --git a/components/Lifecycle/demos/theme_adaptation.py b/components/legacy/Lifecycle/demos/theme_adaptation.py
similarity index 100%
rename from components/Lifecycle/demos/theme_adaptation.py
rename to components/legacy/Lifecycle/demos/theme_adaptation.py
diff --git a/components/Markdown/README-zh_CN.md b/components/legacy/Markdown/README-zh_CN.md
similarity index 100%
rename from components/Markdown/README-zh_CN.md
rename to components/legacy/Markdown/README-zh_CN.md
diff --git a/components/Markdown/README.md b/components/legacy/Markdown/README.md
similarity index 100%
rename from components/Markdown/README.md
rename to components/legacy/Markdown/README.md
diff --git a/components/Markdown/app.py b/components/legacy/Markdown/app.py
similarity index 90%
rename from components/Markdown/app.py
rename to components/legacy/Markdown/app.py
index 4e59b2548c878772ff9c32e0308b393caf24ed2e..7b991a9dd6cdf70f2cf2bb84766850a0f2c3cd21 100644
--- a/components/Markdown/app.py
+++ b/components/legacy/Markdown/app.py
@@ -1,6 +1,6 @@
import os
-from components.Docs import Docs
+from components.legacy.Docs import Docs
def resolve(relative_path: str):
diff --git a/components/Markdown/custom_tags/accordion-zh_CN.md b/components/legacy/Markdown/custom_tags/accordion-zh_CN.md
similarity index 100%
rename from components/Markdown/custom_tags/accordion-zh_CN.md
rename to components/legacy/Markdown/custom_tags/accordion-zh_CN.md
diff --git a/components/Markdown/custom_tags/accordion.md b/components/legacy/Markdown/custom_tags/accordion.md
similarity index 100%
rename from components/Markdown/custom_tags/accordion.md
rename to components/legacy/Markdown/custom_tags/accordion.md
diff --git a/components/Markdown/custom_tags/chart-zh_CN.md b/components/legacy/Markdown/custom_tags/chart-zh_CN.md
similarity index 100%
rename from components/Markdown/custom_tags/chart-zh_CN.md
rename to components/legacy/Markdown/custom_tags/chart-zh_CN.md
diff --git a/components/Markdown/custom_tags/chart.md b/components/legacy/Markdown/custom_tags/chart.md
similarity index 100%
rename from components/Markdown/custom_tags/chart.md
rename to components/legacy/Markdown/custom_tags/chart.md
diff --git a/components/Markdown/custom_tags/select-box-zh_CN.md b/components/legacy/Markdown/custom_tags/select-box-zh_CN.md
similarity index 100%
rename from components/Markdown/custom_tags/select-box-zh_CN.md
rename to components/legacy/Markdown/custom_tags/select-box-zh_CN.md
diff --git a/components/Markdown/custom_tags/select-box.md b/components/legacy/Markdown/custom_tags/select-box.md
similarity index 100%
rename from components/Markdown/custom_tags/select-box.md
rename to components/legacy/Markdown/custom_tags/select-box.md
diff --git a/components/Markdown/demos/accordion.py b/components/legacy/Markdown/demos/accordion.py
similarity index 89%
rename from components/Markdown/demos/accordion.py
rename to components/legacy/Markdown/demos/accordion.py
index 924b354830adb16e90c86d49003057c0fa3aa10a..dc92779e9e4cdebc3662e5af883ad39c38a9d4e0 100644
--- a/components/Markdown/demos/accordion.py
+++ b/components/legacy/Markdown/demos/accordion.py
@@ -12,7 +12,7 @@ with gr.Blocks() as demo:
</accordion>
-Use `::accordion-title` to support markdown：
+Use `::accordion-title` to support markdown:
<accordion>
diff --git a/components/Markdown/demos/basic.py b/components/legacy/Markdown/demos/basic.py
similarity index 100%
rename from components/Markdown/demos/basic.py
rename to components/legacy/Markdown/demos/basic.py
diff --git a/components/Markdown/demos/chart.py b/components/legacy/Markdown/demos/chart.py
similarity index 100%
rename from components/Markdown/demos/chart.py
rename to components/legacy/Markdown/demos/chart.py
diff --git a/components/Markdown/demos/custom-tag.py b/components/legacy/Markdown/demos/custom-tag.py
similarity index 87%
rename from components/Markdown/demos/custom-tag.py
rename to components/legacy/Markdown/demos/custom-tag.py
index 530e7027d182e9b76026e815c60723c073ef6b7c..3a8dadd081946e39bd236879a8f4ddaeffaa1f9e 100644
--- a/components/Markdown/demos/custom-tag.py
+++ b/components/legacy/Markdown/demos/custom-tag.py
@@ -12,7 +12,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>"
}
})
diff --git a/components/Markdown/demos/custom-tag2.py b/components/legacy/Markdown/demos/custom-tag2.py
similarity index 100%
rename from components/Markdown/demos/custom-tag2.py
rename to components/legacy/Markdown/demos/custom-tag2.py
diff --git a/components/Markdown/demos/custom-tag3.py b/components/legacy/Markdown/demos/custom-tag3.py
similarity index 100%
rename from components/Markdown/demos/custom-tag3.py
rename to components/legacy/Markdown/demos/custom-tag3.py
diff --git a/components/Markdown/demos/custom-tag4.py b/components/legacy/Markdown/demos/custom-tag4.py
similarity index 100%
rename from components/Markdown/demos/custom-tag4.py
rename to components/legacy/Markdown/demos/custom-tag4.py
diff --git a/components/Markdown/demos/custom_tags/accordion/accordion-title.py b/components/legacy/Markdown/demos/custom_tags/accordion/accordion-title.py
similarity index 100%
rename from components/Markdown/demos/custom_tags/accordion/accordion-title.py
rename to components/legacy/Markdown/demos/custom_tags/accordion/accordion-title.py
diff --git a/components/Markdown/demos/custom_tags/accordion/basic.py b/components/legacy/Markdown/demos/custom_tags/accordion/basic.py
similarity index 100%
rename from components/Markdown/demos/custom_tags/accordion/basic.py
rename to components/legacy/Markdown/demos/custom_tags/accordion/basic.py
diff --git a/components/Markdown/demos/custom_tags/chart/basic.py b/components/legacy/Markdown/demos/custom_tags/chart/basic.py
similarity index 100%
rename from components/Markdown/demos/custom_tags/chart/basic.py
rename to components/legacy/Markdown/demos/custom_tags/chart/basic.py
diff --git a/components/Markdown/demos/custom_tags/select-box/basic.py b/components/legacy/Markdown/demos/custom_tags/select-box/basic.py
similarity index 75%
rename from components/Markdown/demos/custom_tags/select-box/basic.py
rename to components/legacy/Markdown/demos/custom_tags/select-box/basic.py
index eb03c2fe925703f09c6f97b9cd20d12323b96ec4..faa90914d0c01994660d47ddbb4d1e47067c864d 100644
--- a/components/Markdown/demos/custom_tags/select-box/basic.py
+++ b/components/legacy/Markdown/demos/custom_tags/select-box/basic.py
@@ -10,9 +10,9 @@ 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>
""", )
diff --git a/components/Markdown/demos/custom_tags/select-box/card_shape.py b/components/legacy/Markdown/demos/custom_tags/select-box/card_shape.py
similarity index 95%
rename from components/Markdown/demos/custom_tags/select-box/card_shape.py
rename to components/legacy/Markdown/demos/custom_tags/select-box/card_shape.py
index b2813b85be31b8f4c111ab585a66f6fed984f275..6142f9595700ca44edac3b4cb5a3bb30dd777c3c 100644
--- a/components/Markdown/demos/custom_tags/select-box/card_shape.py
+++ b/components/legacy/Markdown/demos/custom_tags/select-box/card_shape.py
@@ -20,11 +20,11 @@ with gr.Blocks() as demo:
mgr.Markdown(
f"""<select-box shape="card" options='{json.dumps(options)}' select-once equal-height></select-box>
-Custom Columns：
+Custom Columns:
<select-box shape="card" columns="2" options='{json.dumps(options)}' select-once equal-height></select-box>
-Vertical Direction：
+Vertical Direction:
<select-box shape="card" direction="vertical" options='{json.dumps(options)}' select-once equal-height></select-box>
""")
diff --git a/components/Markdown/demos/custom_tags/select-box/card_shape_width_auto.py b/components/legacy/Markdown/demos/custom_tags/select-box/card_shape_width_auto.py
similarity index 100%
rename from components/Markdown/demos/custom_tags/select-box/card_shape_width_auto.py
rename to components/legacy/Markdown/demos/custom_tags/select-box/card_shape_width_auto.py
diff --git a/components/Markdown/demos/custom_tags/select-box/python_events.py b/components/legacy/Markdown/demos/custom_tags/select-box/python_events.py
similarity index 100%
rename from components/Markdown/demos/custom_tags/select-box/python_events.py
rename to components/legacy/Markdown/demos/custom_tags/select-box/python_events.py
diff --git a/components/Markdown/demos/multimodal.py b/components/legacy/Markdown/demos/multimodal.py
similarity index 89%
rename from components/Markdown/demos/multimodal.py
rename to components/legacy/Markdown/demos/multimodal.py
index ecc5928e3fd96cf79caf6102113670448e19ca99..c1504b3adbb5a23f8c48efeb5cfcee97085aa6b9 100644
--- a/components/Markdown/demos/multimodal.py
+++ b/components/legacy/Markdown/demos/multimodal.py
@@ -18,10 +18,6 @@ Image
<img src="{resolve_assets("user.jpeg")}" />
-Video
-
-<video src="{resolve_assets("dog.mp4")}"></video>
-
Audio
<audio src="{resolve_assets("audio.wav")}"></audio>
diff --git a/components/Markdown/demos/select-box.py b/components/legacy/Markdown/demos/select-box.py
similarity index 85%
rename from components/Markdown/demos/select-box.py
rename to components/legacy/Markdown/demos/select-box.py
index 9b69862bdf1d79dc6d36646449c0cf0c24c61a2f..5aca51aaea1234b9ad3613e967dcff32552b6816 100644
--- a/components/Markdown/demos/select-box.py
+++ b/components/legacy/Markdown/demos/select-box.py
@@ -11,9 +11,9 @@ 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>
diff --git a/components/MultimodalInput/README-zh_CN.md b/components/legacy/MultimodalInput/README-zh_CN.md
similarity index 100%
rename from components/MultimodalInput/README-zh_CN.md
rename to components/legacy/MultimodalInput/README-zh_CN.md
diff --git a/components/MultimodalInput/README.md b/components/legacy/MultimodalInput/README.md
similarity index 100%
rename from components/MultimodalInput/README.md
rename to components/legacy/MultimodalInput/README.md
diff --git a/components/legacy/MultimodalInput/app.py b/components/legacy/MultimodalInput/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..ea841f78832d9254426dc781674f7e39f7f7fd2f
--- /dev/null
+++ b/components/legacy/MultimodalInput/app.py
@@ -0,0 +1,6 @@
+from components.legacy.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/MultimodalInput/demos/basic.py b/components/legacy/MultimodalInput/demos/basic.py
similarity index 100%
rename from components/MultimodalInput/demos/basic.py
rename to components/legacy/MultimodalInput/demos/basic.py
diff --git a/components/MultimodalInput/demos/config_buttons.py b/components/legacy/MultimodalInput/demos/config_buttons.py
similarity index 100%
rename from components/MultimodalInput/demos/config_buttons.py
rename to components/legacy/MultimodalInput/demos/config_buttons.py
diff --git a/components/MultimodalInput/demos/upload_sources.py b/components/legacy/MultimodalInput/demos/upload_sources.py
similarity index 100%
rename from components/MultimodalInput/demos/upload_sources.py
rename to components/legacy/MultimodalInput/demos/upload_sources.py
diff --git a/components/MultimodalInput/demos/with_chatbot.py b/components/legacy/MultimodalInput/demos/with_chatbot.py
similarity index 100%
rename from components/MultimodalInput/demos/with_chatbot.py
rename to components/legacy/MultimodalInput/demos/with_chatbot.py
diff --git a/components/legacy/README-zh_CN.md b/components/legacy/README-zh_CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..578a17393bbd2e735c0dd12d6c94894ea8b15aeb
--- /dev/null
+++ b/components/legacy/README-zh_CN.md
@@ -0,0 +1,33 @@
+<h1>ModelScope Studio</h1>
+
+<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>
+
+<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 4.x 的扩展组件库，致力于服务于 ModelScope 创空间中对于 gradio 应用的各类扩展需求，目前主要聚集在对话场景增强、多模态场景以及一些其他垂直场景支持。
+
+## Install
+
+```sh
+pip install modelscope_studio
+```
+
+## API
+
+- <tab-link component-tab="API">load</tab-link>
+
+## 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>
+- <tab-link component-tab="WaterfallGallery">WaterfallGallery</tab-link>
+- <tab-link component-tab="Lifecycle">Lifecycle</tab-link>
+- <tab-link component-tab="Flow">Flow</tab-link>
diff --git a/components/legacy/README.md b/components/legacy/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..821b96faa7c0e722c74f2d6455ae9eb4ec315003
--- /dev/null
+++ b/components/legacy/README.md
@@ -0,0 +1,33 @@
+<h1>ModelScope Studio</h1>
+
+<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>
+
+<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 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_studio
+```
+
+## API
+
+- <tab-link component-tab="API">load</tab-link>
+
+## 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>
+- <tab-link component-tab="Lifecycle">Lifecycle</tab-link>
+- <tab-link component-tab="WaterfallGallery">WaterfallGallery</tab-link>
+- <tab-link component-tab="Flow">Flow</tab-link>
diff --git a/components/WaterfallGallery/README-zh_CN.md b/components/legacy/WaterfallGallery/README-zh_CN.md
similarity index 100%
rename from components/WaterfallGallery/README-zh_CN.md
rename to components/legacy/WaterfallGallery/README-zh_CN.md
diff --git a/components/WaterfallGallery/README.md b/components/legacy/WaterfallGallery/README.md
similarity index 100%
rename from components/WaterfallGallery/README.md
rename to components/legacy/WaterfallGallery/README.md
diff --git a/components/legacy/WaterfallGallery/app.py b/components/legacy/WaterfallGallery/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..ea841f78832d9254426dc781674f7e39f7f7fd2f
--- /dev/null
+++ b/components/legacy/WaterfallGallery/app.py
@@ -0,0 +1,6 @@
+from components.legacy.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+ docs.render().queue().launch()
diff --git a/components/WaterfallGallery/demos/basic.py b/components/legacy/WaterfallGallery/demos/basic.py
similarity index 100%
rename from components/WaterfallGallery/demos/basic.py
rename to components/legacy/WaterfallGallery/demos/basic.py
diff --git a/components/WaterfallGallery/demos/like_click_feedback.py b/components/legacy/WaterfallGallery/demos/like_click_feedback.py
similarity index 100%
rename from components/WaterfallGallery/demos/like_click_feedback.py
rename to components/legacy/WaterfallGallery/demos/like_click_feedback.py
diff --git a/components/WaterfallGallery/demos/load_more.py b/components/legacy/WaterfallGallery/demos/load_more.py
similarity index 100%
rename from components/WaterfallGallery/demos/load_more.py
rename to components/legacy/WaterfallGallery/demos/load_more.py
diff --git a/components/WaterfallGallery/demos/responsive_columns.py b/components/legacy/WaterfallGallery/demos/responsive_columns.py
similarity index 100%
rename from components/WaterfallGallery/demos/responsive_columns.py
rename to components/legacy/WaterfallGallery/demos/responsive_columns.py
diff --git a/components/legacy/app.py b/components/legacy/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..b379d049e6fde4316faab1231d4e2bf195f6d388
--- /dev/null
+++ b/components/legacy/app.py
@@ -0,0 +1,35 @@
+import gradio as gr
+from api.app import docs as api_docs
+from components.legacy.Chatbot.app import docs as chatbot_docs
+from components.legacy.Docs import Docs
+from components.legacy.Flow.app import docs as flow_docs
+from components.legacy.Lifecycle.app import docs as lifecycle_docs
+from components.legacy.Markdown.app import docs as markdown_docs
+from components.legacy.MultimodalInput.app import docs as multimodel_input_docs
+from components.legacy.WaterfallGallery.app import \
+ docs as waterfall_gallery_docs
+
+import modelscope_studio.components.base as ms
+
+readme_docs = Docs(__file__)
+
+docs = [
+ ["Quick Start", readme_docs],
+ ["API", api_docs],
+ ["Chatbot", chatbot_docs],
+ ["MultimodalInput", multimodel_input_docs],
+ ["Markdown", markdown_docs],
+ ["Lifecycle", lifecycle_docs],
+ ["WaterfallGallery", waterfall_gallery_docs],
+ ["Flow", flow_docs],
+]
+
+with gr.Blocks() as legacy_demo:
+ with ms.Application():
+ 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__":
+ legacy_demo.launch()
diff --git a/components/parse_markdown.py b/components/legacy/parse_markdown.py
similarity index 100%
rename from components/parse_markdown.py
rename to components/legacy/parse_markdown.py
diff --git a/components/resources/audio.wav b/components/legacy/resources/audio.wav
similarity index 100%
rename from components/resources/audio.wav
rename to components/legacy/resources/audio.wav
diff --git a/components/resources/bot.jpeg b/components/legacy/resources/bot.jpeg
similarity index 100%
rename from components/resources/bot.jpeg
rename to components/legacy/resources/bot.jpeg
diff --git a/components/resources/custom_components/custom_select.js b/components/legacy/resources/custom_components/custom_select.js
similarity index 100%
rename from components/resources/custom_components/custom_select.js
rename to components/legacy/resources/custom_components/custom_select.js
diff --git a/components/resources/image-bot.jpeg b/components/legacy/resources/image-bot.jpeg
similarity index 100%
rename from components/resources/image-bot.jpeg
rename to components/legacy/resources/image-bot.jpeg
diff --git a/components/resources/modelscope.svg b/components/legacy/resources/modelscope.svg
similarity index 100%
rename from components/resources/modelscope.svg
rename to components/legacy/resources/modelscope.svg
diff --git a/components/resources/music-bot.jpeg b/components/legacy/resources/music-bot.jpeg
similarity index 100%
rename from components/resources/music-bot.jpeg
rename to components/legacy/resources/music-bot.jpeg
diff --git a/components/resources/screen.jpeg b/components/legacy/resources/screen.jpeg
similarity index 100%
rename from components/resources/screen.jpeg
rename to components/legacy/resources/screen.jpeg
diff --git a/components/resources/user.jpeg b/components/legacy/resources/user.jpeg
similarity index 100%
rename from components/resources/user.jpeg
rename to components/legacy/resources/user.jpeg
diff --git a/components/tab-link.js b/components/legacy/tab-link.js
similarity index 100%
rename from components/tab-link.js
rename to components/legacy/tab-link.js
diff --git a/components/resources/dog.mp4 b/components/resources/dog.mp4
deleted file mode 100644
index 062b9c81317de43f392c56e9e03444bf8cc31d51..0000000000000000000000000000000000000000
--- a/components/resources/dog.mp4
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:39d086ce29e48cf76e5042d2f3f0611ee46575f70fa3dc0c40dd4cfffde3d933
-size 8626383
diff --git a/demos/example.py b/demos/example.py
new file mode 100644
index 0000000000000000000000000000000000000000..a5551f184749f6c401d3ef0e1a607b66c7495e75
--- /dev/null
+++ b/demos/example.py
@@ -0,0 +1,12 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ antd.DatePicker()
+
+if __name__ == "__main__":
+ demo.queue().launch()
diff --git a/helper/Docs.py b/helper/Docs.py
new file mode 100644
index 0000000000000000000000000000000000000000..385f0b7d216eb32a3357be3f327b21d7ce4a876d
--- /dev/null
+++ b/helper/Docs.py
@@ -0,0 +1,147 @@
+import os
+import re
+
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.legacy as mgr
+
+from .env import is_modelscope_studio
+from .parse_markdown import parse_markdown
+
+
+class Docs:
+
+ def __init__(self, file_path: str):
+ self.file_path = file_path
+ # default current directory
+ self.markdown_files = [
+ filename for filename in os.listdir(os.path.dirname(file_path))
+ if filename.endswith(".md")
+ ]
+ self.demo_modules = self._get_demo_modules()
+ if is_modelscope_studio:
+ self.markdown_files = list(
+ filter(
+ lambda x: x.endswith("-zh_CN.md") or
+ (f"{'.'.join(x.split('.')[:-1])}-zh_CN.md" not in self.
+ markdown_files), self.markdown_files))
+ else:
+ self.markdown_files = list(
+ filter(lambda x: not x.endswith("-zh_CN.md"),
+ self.markdown_files))
+
+ def _remove_formatter(self, markdown_text):
+ pattern = r"^ *---[\s\S]*?---"
+ replaced_text = re.sub(pattern, "", markdown_text)
+ return replaced_text
+
+ def _list_demos(self, 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(self._list_demos(path, sub_prefix))
+
+ return result
+
+ def _get_demo_modules(self):
+ import importlib.util
+
+ demos = [
+ demo for demo in self._list_demos(
+ os.path.join(os.path.dirname(self.file_path), "demos"))
+ if demo.endswith(".py") and not demo.startswith("__")
+ ]
+ 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(self.file_path), "demos", demo))
+ module = importlib.util.module_from_spec(spec)
+ spec.loader.exec_module(module)
+ demo_modules[demo_name] = module
+ return demo_modules
+
+ 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='',
+ fixed=False,
+ title=''):
+ content = self._read_file(f"./demos/{demo_name}.py")
+ module = self.demo_modules[demo_name]
+ with antd.Card(styles=dict(body=dict(padding=10)),
+ elem_style=dict(margin="8px 0")):
+ if title:
+ with ms.Slot("title"):
+ ms.Text(title)
+ with antd.Row(align="stretch", wrap=True, gutter=8):
+ with antd.Col(sm=dict(span=10, order=1),
+ xs=dict(span=24, order=2)):
+ with antd.Row(elem_style=dict(height='100%'),
+ gutter=[8, 8]):
+ with antd.Col(sm=0, xs=24):
+ antd.Divider(type="horizontal",
+ variant="dashed",
+ elem_style=dict(width='100%',
+ margin='8px 0 0'))
+ with antd.Col(sm=23, xs=24):
+ prefix = prefix + "\n" if prefix else ""
+ suffix = "\n" + suffix if suffix else ""
+ gr.Markdown(f"""{prefix}```python
+{content}
+```{suffix}""",
+ header_links=True)
+
+ with antd.Col(sm=1,
+ xs=0,
+ elem_style=dict(height="100%")):
+ with ms.Div(
+ elem_style=dict(display="flex",
+ justifyContent="center",
+ width="100%",
+ height="100%")):
+ antd.Divider(type="vertical",
+ variant="dashed",
+ elem_style=dict(height='100%',
+ margin=0))
+ with antd.Col(
+ sm=dict(span=14, order=2),
+ xs=dict(span=24, order=1),
+ elem_style=dict(
+ width='100%',
+ transform="translate(0, 0)" if fixed else None)):
+ module.demo.render()
+
+ def _render_markdown(self, markdown_file):
+ items = parse_markdown(self._remove_formatter(
+ self._read_file(markdown_file)),
+ read_file=self._read_file)
+ for item in items:
+ if item["type"] == "text":
+ mgr.Markdown(item["value"], header_links=True, preview=False)
+ elif item["type"] == "demo":
+ self._render_demo(item["name"],
+ prefix=item["prefix"],
+ suffix=item["suffix"],
+ fixed=item["fixed"],
+ title=item["title"])
+
+ def render(self):
+ with gr.Blocks() as demo:
+ self._render_markdown(self.markdown_files[0])
+ return demo
diff --git a/helper/Site.py b/helper/Site.py
new file mode 100644
index 0000000000000000000000000000000000000000..c90ddeda9162a99d5e4a488dcd1afd7c234fee1e
--- /dev/null
+++ b/helper/Site.py
@@ -0,0 +1,243 @@
+from typing import Callable
+
+import gradio as gr
+from gradio.components.base import Component
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+class Site:
+
+ def __init__(self,
+ tabs: list,
+ docs: dict,
+ default_active_tab: str | None = None,
+ logo: Component | Callable | None = None):
+ self.tabs = tabs
+ self.docs = docs
+ self.default_active_tab = default_active_tab
+ self.default_active_tab_item = next(
+ (item for item in self.tabs if item["key"] == default_active_tab),
+ {})
+ self.logo = logo
+
+ def _render_docs(self, items: list, tab: dict):
+ docs_tabs = []
+ for item in items:
+ if "children" in item:
+ docs_tabs.extend(self._render_docs(item["children"], tab))
+ elif "key" in item:
+ key = item["key"].replace("-", "_")
+ tab_docs = self.docs.get(tab["key"], {})
+ if key in tab_docs:
+ with antd.Tabs.Item(
+ key=key,
+ visible=True if tab.get("default_active_key")
+ == key else False) as docs_tab:
+ docs_tabs.append(docs_tab)
+ tab_docs[key].render()
+ return docs_tabs
+
+ def render(self):
+
+ def on_tab_menu_select(e: gr.EventData):
+ selected_tab = e._data["payload"][0]["key"]
+ item = next(
+ (item for item in tab_components if item.key == selected_tab),
+ tab_components[0])
+
+ return {
+ tab_menu: gr.update(selected_keys=[selected_tab]),
+ tabs: gr.update(active_key=selected_tab),
+ item: gr.update(visible=True)
+ }
+
+ with gr.Blocks(css="""
+.gradio-container {
+ max-width: 100% !important;
+ padding: 0 !important;
+}
+.docs-layout-sider {
+ width: 100% !important;
+ max-width: 100% !important;
+}
+""") as demo:
+ with ms.Application() as app:
+ with antd.ConfigProvider():
+ with antd.Layout(elem_style=dict(
+ height=
+ "calc(100vh - var(--size-4) - var(--body-text-size) * 1.5)"
+ )):
+ with antd.Layout.Header(elem_style=dict(
+ padding='0 16px',
+ backgroundColor=
+ "var(--ms-gr-ant-color-bg-container)")):
+ with antd.Flex(align='center', gap=8):
+ if self.logo:
+ with antd.Flex(
+ justify="center",
+ align='center',
+ elem_style=dict(height='100%')):
+ if callable(self.logo):
+ self.logo()
+ else:
+ self.logo.render()
+ tab_menu = antd.Menu(
+ mode="horizontal",
+ selected_keys=[self.default_active_tab],
+ items=self.tabs,
+ elem_style=dict(flex=1, minWidth=0))
+ with ms.AutoLoading(show_mask=True):
+ with antd.Tabs(
+ active_key=self.default_active_tab,
+ render_tab_bar="() => null",
+ ) as tabs:
+ tab_components = []
+ for tab in self.tabs:
+ with antd.Tabs.Item(
+ key=tab["key"],
+ elem_style=dict(
+ height=
+ "calc(100vh - var(--size-4) - var(--body-text-size) * 1.5 - 64px)"
+ ),
+ visible=True
+ if self.default_active_tab
+ == tab["key"] else
+ False) as tab_item:
+ tab_components.append(tab_item)
+ if "content" in tab:
+ # custom render
+ with ms.Div(elem_style=dict(
+ maxHeight="100%",
+ overflow="auto")):
+ tab["content"].render()
+ elif "menus" in tab:
+ # menus render
+ with antd.Layout(elem_style=dict(
+ height='100%')):
+ with antd.Splitter():
+ with antd.Splitter.Panel(
+ default_size=213,
+ max="50%",
+ min=82,
+ elem_style=dict(
+ backgroundColor=
+ "var(--ms-gr-ant-color-bg-container)"
+ )) as sider_panel:
+ with antd.Layout.Sider(
+ breakpoint="sm",
+ trigger=None,
+ elem_classes=
+ "docs-layout-sider",
+ elem_style=dict(
+ # height=
+ # "calc(100vh - 64px)",
+ # overflow=
+ # "auto",
+ position=
+ "relative",
+ backgroundColor
+ ="var(--ms-gr-ant-color-bg-container)"
+ )):
+ sider_menu = antd.Menu(
+ selected_keys=[
+ tab.get(
+ "default_active_key",
+ None)
+ ],
+ mode="inline",
+ items=tab.get(
+ "menus",
+ []))
+ if "extra_menu_footer" in tab:
+ if callable(tab[
+ "extra_menu_footer"]
+ ):
+ tab["extra_menu_footer"](
+ )
+ else:
+ tab["extra_menu_footer"].render(
+ )
+ with antd.Splitter.Panel():
+ with antd.Layout(
+ elem_style=dict(
+ width="100%"
+ )):
+ with antd.Layout.Content(
+ elem_style=
+ dict(
+ padding=
+ '12px 28px',
+ overflow
+ ="auto"
+ )):
+ with antd.Tabs(
+ active_key
+ =tab.
+ get(
+ "default_active_key",
+ None
+ ),
+ render_tab_bar
+ ="() => null"
+ ) as layout_content_tabs:
+ docs_tabs = self._render_docs(
+ tab.
+ get(
+ "menus",
+ []
+ ), tab)
+
+ def on_layout_menu_select_wrapper(
+ tabs, sider_menu,
+ layout_content_tabs):
+
+ def on_layout_menu_select(
+ e: gr.EventData):
+ selected_menu = e._data[
+ "payload"][0]["key"]
+
+ item = next(
+ (item for item in tabs
+ if item.key ==
+ selected_menu), tabs[0])
+
+ return {
+ sider_menu:
+ gr.update(selected_keys=[
+ selected_menu
+ ]),
+ layout_content_tabs:
+ gr.update(
+ active_key=selected_menu
+ ),
+ item:
+ gr.update(visible=True)
+ }
+
+ return on_layout_menu_select
+
+ sider_menu.select(
+ fn=on_layout_menu_select_wrapper(
+ docs_tabs, sider_menu,
+ layout_content_tabs),
+ outputs=[
+ sider_menu, layout_content_tabs,
+ *docs_tabs
+ ])
+
+ def on_app_mount(e: gr.EventData):
+ screen_width = e._data["screen"][
+ "width"]
+ return gr.update(
+ default_size=82 if screen_width <
+ 576 else 213)
+
+ app.mount(on_app_mount,
+ outputs=[sider_panel])
+
+ tab_menu.select(
+ fn=on_tab_menu_select,
+ outputs=[tab_menu, tabs, *tab_components])
+ return demo
diff --git a/helper/env.py b/helper/env.py
new file mode 100644
index 0000000000000000000000000000000000000000..f8bcd12404ef9bf37edfd9ab2e990e0fd52bf202
--- /dev/null
+++ b/helper/env.py
@@ -0,0 +1,3 @@
+import os
+
+is_modelscope_studio = os.getenv('MODELSCOPE_ENVIRONMENT') == 'studio'
diff --git a/helper/parse_markdown.py b/helper/parse_markdown.py
new file mode 100644
index 0000000000000000000000000000000000000000..73f58104c2343262659f32d9e9d82d0854d79b94
--- /dev/null
+++ b/helper/parse_markdown.py
@@ -0,0 +1,81 @@
+from html.parser import HTMLParser
+
+
+def default_read_file(path):
+ with open(path, "r") as f:
+ return f.read()
+
+
+enable_tags = ["demo", "demo-prefix", "demo-suffix", "file"]
+
+
+class MarkdownParser(HTMLParser):
+
+ def __init__(self, read_file=None):
+ super().__init__()
+ self.value = [{"type": "text", "value": ""}]
+ self.tag_stack = []
+ self.read_file = read_file or default_read_file
+ self.current_tag = None
+
+ def get_value(self):
+ return self.value
+
+ def handle_data(self, data: str) -> None:
+ if self.value[-1]["type"] == "text":
+ self.value[-1]["value"] += data
+ elif self.current_tag is None:
+ self.value.append({"type": "text", "value": data})
+ elif self.current_tag == "demo-prefix":
+ self.value[-1]["prefix"] += data
+ elif self.current_tag == "demo-suffix":
+ self.value[-1]["suffix"] += data
+
+ def handle_startendtag(self, tag: str, attrs) -> None:
+ if tag not in enable_tags:
+ self.handle_data(self.get_starttag_text())
+ return
+
+ def handle_starttag(self, tag: str, attrs) -> None:
+ if (tag not in enable_tags):
+ self.handle_data(self.get_starttag_text())
+ return
+ if tag == "demo":
+ self.value.append({
+ "type": "demo",
+ "name": dict(attrs)["name"],
+ "fixed": "fixed" in dict(attrs),
+ "prefix": "",
+ "suffix": "",
+ "title": dict(attrs).get("title", "")
+ })
+ elif tag == "file":
+ content = self.read_file(dict(attrs)["src"])
+ if self.value[-1]["type"] == "text":
+ self.value[-1]["value"] += content
+ elif self.current_tag == "demo-prefix":
+ self.value[-1]["prefix"] += content
+ elif self.current_tag == "demo-suffix":
+ self.value[-1]["suffix"] += content
+ self.current_tag = tag
+ self.tag_stack.append(self.current_tag)
+
+ def handle_endtag(self, tag: str) -> None:
+
+ if (tag not in enable_tags):
+ self.handle_data(f"</{tag}>")
+ return
+ if (len(self.tag_stack) > 0):
+ self.tag_stack.pop()
+ if (len(self.tag_stack) > 0):
+ self.current_tag = self.tag_stack[-1]
+ else:
+ self.current_tag = None
+ else:
+ self.current_tag = None
+
+
+def parse_markdown(markdown: str, read_file=None):
+ parser = MarkdownParser(read_file=read_file)
+ parser.feed(markdown)
+ return parser.get_value()
diff --git a/legacy_app.py b/legacy_app.py
new file mode 100644
index 0000000000000000000000000000000000000000..d7b855dfbec86a9b10abf03321848795d3775a21
--- /dev/null
+++ b/legacy_app.py
@@ -0,0 +1,6 @@
+from components.legacy.app import legacy_demo
+
+demo = legacy_demo
+
+if __name__ == "__main__":
+ demo.launch()
diff --git a/modelscope_studio-0.4.0-py3-none-any.whl b/modelscope_studio-0.4.0-py3-none-any.whl
deleted file mode 100644
index ccb59b4d59e5b0ea55c7964f1274c03d53ada899..0000000000000000000000000000000000000000
--- a/modelscope_studio-0.4.0-py3-none-any.whl
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:4ea6dc30b6a751eff8b0e7e99554af09ad2b6d13841e8896e5e5af544d9425b7
-size 10995416
diff --git a/requirements.txt b/requirements.txt
index b4f81f0ed622406099117d2b1b10d1cefd1cb6ba..610a4237cb48e0d7d145d14c2ff4af43c4b83e8a 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,2 +1 @@
-modelscope_studio
-modelscope_studio-0.4.0-py3-none-any.whl
+modelscope_studio==1.0.0
diff --git a/resources/gradio.png b/resources/gradio.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b0eedf4af724e36d28caa72882695cb0a5e5e06
Binary files /dev/null and b/resources/gradio.png differ
diff --git a/resources/modelscope.png b/resources/modelscope.png
new file mode 100644
index 0000000000000000000000000000000000000000..1fb167d3fefdd804744be42404612032e4fc534f
Binary files /dev/null and b/resources/modelscope.png differ
diff --git a/src/pyproject.toml b/src/pyproject.toml
index 016557687e30cf6dd83ea619b814ee3c44d301a6..3a6b11779c138d759ff1166249f7699e87d38742 100644
--- a/src/pyproject.toml
+++ b/src/pyproject.toml
@@ -8,8 +8,8 @@ build-backend = "hatchling.build"
[project]
name = "modelscope_studio"
-version = "0.1.7"
-description = "A set of extension component, inluding components for conversational input and display in multimodal scenarios, as well as more components for vertical scenarios."
+version = "1.0.0"
+description = "A third-party component library based on Gradio."
readme = "README.md"
license = "Apache-2.0"
requires-python = ">=3.8"
@@ -17,10 +17,11 @@ authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
keywords = [
"gradio-custom-component",
"modelscope-studio",
- "gradio-template-Chatbot",
+ 'antd',
+ 'gradio-antd',
]
# Add dependencies here
-dependencies = ["gradio>=4.0,<5.0"]
+dependencies = ["gradio>=4.0,<6.0"]
classifiers = [
'Development Status :: 3 - Alpha',
'License :: OSI Approved :: Apache Software License',
@@ -42,10 +43,166 @@ dev = ["build", "twine"]
[tool.hatch.build]
artifacts = [
"*.pyi",
- "backend/modelscope_studio/components/Chatbot/templates",
- "backend/modelscope_studio/components/MultimodalInput/templates",
- "backend/modelscope_studio/components/Markdown/templates",
- "backend/modelscope_studio/components/WaterfallGallery/templates",
+ "backend/modelscope_studio/components/legacy/Chatbot/templates",
+ "backend/modelscope_studio/components/legacy/Flow/templates",
+ "backend/modelscope_studio/components/legacy/MultimodalInput/templates",
+ "backend/modelscope_studio/components/legacy/Markdown/templates",
+ "backend/modelscope_studio/components/legacy/WaterfallGallery/templates",
+ "/backend/modelscope_studio/components/legacy/Lifecycle/templates",
+ "/backend/modelscope_studio/components/antd/button/templates",
+ "/backend/modelscope_studio/components/antd/card/templates",
+ "/backend/modelscope_studio/components/antd/card/grid/templates",
+ "/backend/modelscope_studio/components/antd/card/meta/templates",
+ "/backend/modelscope_studio/components/antd/config_provider/templates",
+ "/backend/modelscope_studio/components/base/fragment/templates",
+ "/backend/modelscope_studio/components/base/each/templates",
+ "/backend/modelscope_studio/components/base/slot/templates",
+ "/backend/modelscope_studio/components/base/application/templates",
+ "/backend/modelscope_studio/components/antd/message/templates",
+ "/backend/modelscope_studio/components/antd/spin/templates",
+ "/backend/modelscope_studio/components/antd/upload/templates",
+ "/backend/modelscope_studio/components/antd/icon/templates",
+ "/backend/modelscope_studio/components/antd/icon/iconfont_provider/templates",
+ "/backend/modelscope_studio/components/antd/button/group/templates",
+ "/backend/modelscope_studio/components/antd/float_button/templates",
+ "/backend/modelscope_studio/components/antd/affix/templates",
+ "/backend/modelscope_studio/components/base/filter/templates",
+ "/backend/modelscope_studio/components/antd/float_button/back_top/templates",
+ "/backend/modelscope_studio/components/antd/float_button/group/templates",
+ "/backend/modelscope_studio/components/antd/typography/link/templates",
+ "/backend/modelscope_studio/components/antd/typography/paragraph/templates",
+ "/backend/modelscope_studio/components/antd/typography/text/templates",
+ "/backend/modelscope_studio/components/antd/typography/title/templates",
+ "/backend/modelscope_studio/components/antd/anchor/templates",
+ "/backend/modelscope_studio/components/antd/anchor/item/templates",
+ "/backend/modelscope_studio/components/antd/breadcrumb/templates",
+ "/backend/modelscope_studio/components/antd/breadcrumb/item/templates",
+ "/backend/modelscope_studio/components/antd/grid/col/templates",
+ "/backend/modelscope_studio/components/antd/divider/templates",
+ "/backend/modelscope_studio/components/antd/dropdown/templates",
+ "/backend/modelscope_studio/components/antd/dropdown/button/templates",
+ "/backend/modelscope_studio/components/antd/flex/templates",
+ "/backend/modelscope_studio/components/antd/layout/templates",
+ "/backend/modelscope_studio/components/antd/layout/content/templates",
+ "/backend/modelscope_studio/components/antd/layout/footer/templates",
+ "/backend/modelscope_studio/components/antd/layout/header/templates",
+ "/backend/modelscope_studio/components/antd/layout/sider/templates",
+ "/backend/modelscope_studio/components/antd/menu/templates",
+ "/backend/modelscope_studio/components/antd/menu/item/templates",
+ "/backend/modelscope_studio/components/antd/grid/row/templates",
+ "/backend/modelscope_studio/components/antd/space/templates",
+ "/backend/modelscope_studio/components/antd/space/compact/templates",
+ "/backend/modelscope_studio/components/base/div/templates",
+ "/backend/modelscope_studio/components/base/auto_loading/templates",
+ "/backend/modelscope_studio/components/antd/pagination/templates",
+ "/backend/modelscope_studio/components/base/span/templates",
+ "/backend/modelscope_studio/components/base/text/templates",
+ "/backend/modelscope_studio/components/antd/alert/templates",
+ "/backend/modelscope_studio/components/antd/alert/error_boundary/templates",
+ "/backend/modelscope_studio/components/antd/avatar/templates",
+ "/backend/modelscope_studio/components/antd/avatar/group/templates",
+ "/backend/modelscope_studio/components/antd/badge/templates",
+ "/backend/modelscope_studio/components/antd/badge/ribbon/templates",
+ "/backend/modelscope_studio/components/antd/calendar/templates",
+ "/backend/modelscope_studio/components/antd/carousel/templates",
+ "/backend/modelscope_studio/components/antd/collapse/templates",
+ "/backend/modelscope_studio/components/antd/collapse/item/templates",
+ "/backend/modelscope_studio/components/antd/descriptions/templates",
+ "/backend/modelscope_studio/components/antd/descriptions/item/templates",
+ "/backend/modelscope_studio/components/antd/drawer/templates",
+ "/backend/modelscope_studio/components/antd/empty/templates",
+ "/backend/modelscope_studio/components/antd/image/templates",
+ "/backend/modelscope_studio/components/antd/image/preview_group/templates",
+ "/backend/modelscope_studio/components/antd/list/templates",
+ "/backend/modelscope_studio/components/antd/list/item/templates",
+ "/backend/modelscope_studio/components/antd/list/item/meta/templates",
+ "/backend/modelscope_studio/components/antd/modal/templates",
+ "/backend/modelscope_studio/components/antd/notification/templates",
+ "/backend/modelscope_studio/components/antd/popconfirm/templates",
+ "/backend/modelscope_studio/components/antd/popover/templates",
+ "/backend/modelscope_studio/components/antd/progress/templates",
+ "/backend/modelscope_studio/components/antd/result/templates",
+ "/backend/modelscope_studio/components/antd/skeleton/templates",
+ "/backend/modelscope_studio/components/antd/skeleton/avatar/templates",
+ "/backend/modelscope_studio/components/antd/skeleton/button/templates",
+ "/backend/modelscope_studio/components/antd/skeleton/image/templates",
+ "/backend/modelscope_studio/components/antd/skeleton/input/templates",
+ "/backend/modelscope_studio/components/antd/skeleton/node/templates",
+ "/backend/modelscope_studio/components/antd/steps/templates",
+ "/backend/modelscope_studio/components/antd/steps/item/templates",
+ "/backend/modelscope_studio/components/antd/tooltip/templates",
+ "/backend/modelscope_studio/components/antd/tree/templates",
+ "/backend/modelscope_studio/components/antd/tree/directory_tree/templates",
+ "/backend/modelscope_studio/components/antd/tree/tree_node/templates",
+ "/backend/modelscope_studio/components/antd/watermark/templates",
+ "/backend/modelscope_studio/components/antd/qr_code/templates",
+ "/backend/modelscope_studio/components/antd/auto_complete/templates",
+ "/backend/modelscope_studio/components/antd/auto_complete/option/templates",
+ "/backend/modelscope_studio/components/antd/cascader/templates",
+ "/backend/modelscope_studio/components/antd/cascader/option/templates",
+ "/backend/modelscope_studio/components/antd/cascader/panel/templates",
+ "/backend/modelscope_studio/components/antd/checkbox/templates",
+ "/backend/modelscope_studio/components/antd/checkbox/group/templates",
+ "/backend/modelscope_studio/components/antd/checkbox/group/option/templates",
+ "/backend/modelscope_studio/components/antd/color_picker/templates",
+ "/backend/modelscope_studio/components/antd/color_picker/preset/templates",
+ "/backend/modelscope_studio/components/antd/date_picker/templates",
+ "/backend/modelscope_studio/components/antd/date_picker/preset/templates",
+ "/backend/modelscope_studio/components/antd/date_picker/range_picker/templates",
+ "/backend/modelscope_studio/components/antd/form/templates",
+ "/backend/modelscope_studio/components/antd/form/item/templates",
+ "/backend/modelscope_studio/components/antd/form/item/rule/templates",
+ "/backend/modelscope_studio/components/antd/input/templates",
+ "/backend/modelscope_studio/components/antd/input_number/templates",
+ "/backend/modelscope_studio/components/antd/input/otp/templates",
+ "/backend/modelscope_studio/components/antd/input/password/templates",
+ "/backend/modelscope_studio/components/antd/input/search/templates",
+ "/backend/modelscope_studio/components/antd/input/textarea/templates",
+ "/backend/modelscope_studio/components/antd/mentions/templates",
+ "/backend/modelscope_studio/components/antd/mentions/option/templates",
+ "/backend/modelscope_studio/components/antd/radio/templates",
+ "/backend/modelscope_studio/components/antd/radio/button/templates",
+ "/backend/modelscope_studio/components/antd/radio/group/templates",
+ "/backend/modelscope_studio/components/antd/radio/group/option/templates",
+ "/backend/modelscope_studio/components/antd/rate/templates",
+ "/backend/modelscope_studio/components/antd/segmented/templates",
+ "/backend/modelscope_studio/components/antd/segmented/option/templates",
+ "/backend/modelscope_studio/components/antd/select/templates",
+ "/backend/modelscope_studio/components/antd/statistic/templates",
+ "/backend/modelscope_studio/components/antd/statistic/countdown/templates",
+ "/backend/modelscope_studio/components/antd/table/templates",
+ "/backend/modelscope_studio/components/antd/table/column/templates",
+ "/backend/modelscope_studio/components/antd/table/column_group/templates",
+ "/backend/modelscope_studio/components/antd/table/expandable/templates",
+ "/backend/modelscope_studio/components/antd/table/row_selection/templates",
+ "/backend/modelscope_studio/components/antd/table/row_selection/selection/templates",
+ "/backend/modelscope_studio/components/antd/tabs/templates",
+ "/backend/modelscope_studio/components/antd/tabs/item/templates",
+ "/backend/modelscope_studio/components/antd/tag/templates",
+ "/backend/modelscope_studio/components/antd/tag/checkable_tag/templates",
+ "/backend/modelscope_studio/components/antd/time_picker/templates",
+ "/backend/modelscope_studio/components/antd/time_picker/range_picker/templates",
+ "/backend/modelscope_studio/components/antd/timeline/templates",
+ "/backend/modelscope_studio/components/antd/timeline/item/templates",
+ "/backend/modelscope_studio/components/antd/tour/templates",
+ "/backend/modelscope_studio/components/antd/tour/step/templates",
+ "/backend/modelscope_studio/components/antd/select/option/templates",
+ "/backend/modelscope_studio/components/antd/slider/templates",
+ "/backend/modelscope_studio/components/antd/slider/mark/templates",
+ "/backend/modelscope_studio/components/antd/switch/templates",
+ "/backend/modelscope_studio/components/antd/transfer/templates",
+ "/backend/modelscope_studio/components/antd/tree_select/templates",
+ "/backend/modelscope_studio/components/antd/tree_select/tree_node/templates",
+ "/backend/modelscope_studio/components/antd/upload/dragger/templates",
+ "/backend/modelscope_studio/components/antd/splitter/templates",
+ "/backend/modelscope_studio/components/antd/splitter/panel/templates",
+ "/backend/modelscope_studio/components/legacy/Chatbot/templates",
+ "/backend/modelscope_studio/components/legacy/Flow/templates",
+ "/backend/modelscope_studio/components/legacy/Markdown/templates",
+ "/backend/modelscope_studio/components/legacy/MultimodalInput/templates",
+ "/backend/modelscope_studio/components/legacy/WaterfallGallery/templates",
+ "/backend/modelscope_studio/components/antd/form/provider/templates",
+ "/backend/modelscope_studio/components/antd/modal/static/templates",
]
[tool.hatch.build.targets.sdist]