fix: 0.x => 1.0

.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

Dockerfile

@@ -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"]

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()
+```

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()
+```

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):

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)

components/WaterfallGallery/app.py

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

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>

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>

components/{MultimodalInput → antd/affix}/app.py

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

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()

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()

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>

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>

components/{Flow → antd/alert}/app.py

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

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()

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>

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>

components/{Lifecycle → antd/anchor}/app.py

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

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()

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>

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>

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

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

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()

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()

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>

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>

components/antd/avatar/app.py

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

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()

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()

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>

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>

components/antd/badge/app.py

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

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()

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()

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>

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>

components/antd/breadcrumb/app.py

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

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()

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>

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>

components/antd/button/app.py

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

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()

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>

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>

components/antd/calendar/app.py

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

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()

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()

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>

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>