feat: ModalStatic component

backend/modelscope_studio/components/antd/__init__.py

@@ -76,6 +76,7 @@
 from .menu.item import AntdMenuItem as MenuItem
 from .message import AntdMessage as Message
 from .modal import AntdModal as Modal
+from .modal.static import AntdModalStatic as ModalStatic
 from .notification import AntdNotification as Notification
 from .pagination import AntdPagination as Pagination
 from .popconfirm import AntdPopconfirm as Popconfirm

backend/modelscope_studio/components/antd/components.py

@@ -73,6 +73,7 @@
 from .menu.item import AntdMenuItem
 from .message import AntdMessage
 from .modal import AntdModal
+from .modal.static import AntdModalStatic
 from .notification import AntdNotification
 from .pagination import AntdPagination
 from .popconfirm import AntdPopconfirm

backend/modelscope_studio/components/antd/message/__init__.py

@@ -1,5 +1,7 @@
 from __future__ import annotations
 
+from typing import Literal
+
 from gradio.events import EventListener
 
 from ....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
@@ -23,15 +25,17 @@ class AntdMessage(ModelScopeLayoutComponent):
 
     def __init__(
             self,
-            content: str | None = "",
+            content: str | None = None,
             props: dict | None = None,
             *,
-            duration: float | int | None = 3,
+            type: Literal['success', 'info', 'warning', 'error', 'loading']
+        | None = None,
+            duration: float | int | None = None,
             icon: str | None = None,
             key: str | int | float | None = None,
             get_container: str | None = None,
             rtl: bool | None = None,
-            top: int | float | None = 8,
+            top: int | float | None = None,
             root_class_name: str | None = None,
             as_item: str | None = None,
             _internal: None = None,
@@ -52,6 +56,7 @@ def __init__(
         self.content = content
         self.duration = duration
         self.icon = icon
+        self.type = type
         self.key = key
         self.get_container = get_container
         self.rtl = rtl

backend/modelscope_studio/components/antd/modal/__init__.py

@@ -5,12 +5,16 @@
 from gradio.events import EventListener
 
 from ....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
+from .static import AntdModalStatic
 
 
 class AntdModal(ModelScopeLayoutComponent):
     """
     Ant Design: https://ant.design/components/modal
     """
+
+    Static = AntdModalStatic
+
     EVENTS = [
         EventListener(
             "ok",

backend/modelscope_studio/components/antd/modal/static/__init__.py

@@ -0,0 +1,132 @@
+from __future__ import annotations
+
+from typing import Any, Literal
+
+from gradio.events import EventListener
+
+from .....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
+
+
+class AntdModalStatic(ModelScopeLayoutComponent):
+    """
+    Ant Design: https://ant.design/components/modal
+    """
+    EVENTS = [
+        EventListener(
+            "ok",
+            callback=lambda block: block._internal.update(bind_ok_event=True)),
+        EventListener("cancel",
+                      callback=lambda block: block._internal.update(
+                          bind_cancel_event=True))
+    ]
+
+    # supported slots
+    SLOTS = [
+        'closeIcon', 'cancelButtonProps.icon', 'cancelText',
+        'closable.closeIcon', 'closeIcon', 'footer', 'title', 'content',
+        'okButtonProps.icon', 'okText', 'modalRender'
+    ]
+
+    def __init__(
+            self,
+            props: dict | None = None,
+            *,
+            after_close: str | None = None,
+            auto_focus_button: Literal['ok', 'cancel'] | None = 'ok',
+            type: Literal['info', 'success', 'error', 'warning', 'confirm']
+        | None = None,
+            class_names: dict | None = None,
+            styles: dict | None = None,
+            cancel_button_props: dict | None = None,
+            cancel_text: str | None = None,
+            centered: bool | None = None,
+            closable: bool | dict | None = None,
+            close_icon: str | None = None,
+            confirm_loading: bool | None = None,
+            destroy_on_close: bool | None = None,
+            focus_trigger_after_close: bool | None = None,
+            content: str | None = None,
+            footer: str | None = None,
+            force_render: bool | None = None,
+            get_container: str | None = None,
+            keyboard: bool | None = None,
+            mask: bool | None = None,
+            mask_closable: bool | None = None,
+            modal_render: str | None = None,
+            ok_text: str | None = None,
+            ok_type: str | None = None,
+            ok_button_props: dict | None = None,
+            loading: bool | None = None,
+            title: str | None = None,
+            width: int | float | str | None = None,
+            wrap_class_name: str | None = None,
+            z_index: int | None = None,
+            after_open_change: str | None = None,
+            root_class_name: str | None = None,
+            as_item: str | None = None,
+            _internal: None = None,
+            # gradio properties
+            visible: bool = True,
+            elem_id: str | None = None,
+            elem_classes: list[str] | str | None = None,
+            elem_style: dict | None = None,
+            render: bool = True,
+            **kwargs):
+        super().__init__(visible=visible,
+                         elem_id=elem_id,
+                         elem_classes=elem_classes,
+                         render=render,
+                         as_item=as_item,
+                         elem_style=elem_style,
+                         **kwargs)
+        self.props = props
+        self.after_close = after_close
+        self.auto_focus_button = auto_focus_button
+        self.class_names = class_names
+        self.styles = styles
+        self.type = type
+        self.cancel_button_props = cancel_button_props
+        self.cancel_text = cancel_text
+        self.centered = centered
+        self.closable = closable
+        self.close_icon = close_icon
+        self.confirm_loading = confirm_loading
+        self.destroy_on_close = destroy_on_close
+        self.focus_trigger_after_close = focus_trigger_after_close
+        self.content = content
+        self.footer = footer
+        self.force_render = force_render
+        self.get_container = get_container
+        self.keyboard = keyboard
+        self.mask = mask
+        self.mask_closable = mask_closable
+        self.modal_render = modal_render
+        self.ok_text = ok_text
+        self.ok_type = ok_type
+        self.ok_button_props = ok_button_props
+        self.loading = loading
+        self.title = title
+        self.width = width
+        self.wrap_class_name = wrap_class_name
+        self.z_index = z_index
+        self.after_open_change = after_open_change
+        self.root_class_name = root_class_name
+
+    FRONTEND_DIR = resolve_frontend_dir("modal", "static")
+
+    @property
+    def skip_api(self):
+        return True
+
+    def preprocess(self, payload: None) -> None:
+        return payload
+
+    def postprocess(self, value: None) -> None:
+
+        return value
+
+    def example_payload(self) -> Any:
+        return None
+
+    def example_value(self) -> Any:
+        return None

backend/modelscope_studio/components/antd/notification/__init__.py

@@ -29,6 +29,7 @@ def __init__(
             description: str | None = "",
             props: dict | None = None,
             *,
+            type: Literal['success', 'info', 'warning', 'error'] | None = None,
             btn: str | None = None,
             close_icon: str | bool | None = None,
             duration: int | float | None = 4.5,
@@ -63,6 +64,7 @@ def __init__(
                          **kwargs)
         self.props = props
         self.message = message
+        self.type = type
         self.description = description
         self.btn = btn
         self.close_icon = close_icon

docs/app.py

@@ -303,6 +303,36 @@ def get_docs(file_path: str, type: Literal["antd", "base"]):
     "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":

docs/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>

docs/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>

docs/components/antd/drawer/app.py

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

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

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

docs/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>

docs/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>

docs/components/antd/message/app.py

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