[Feature] Integrate Ant Design

[Col0ring]

English Version

In version 1.0, we will integrate components from Ant Design and ensure compatibility with most of its APIs. The existing components of modelscope_studio will be moved to the legacy directory. They will not be able to benefit from the upgrade changes of the new version for the time being, but we will upgrade the components to be compatible with them in the future.

Download

Currently, you can get an early taste of Ant Design components by running the following command.

pip install modelscope_studio~=1.0.0b

Warning

The current version is still under development and the API may change at any time. If you need to use it in a production environment, please lock the version in advance.

Usage Example

import gradio as gr
import modelscope_studio.components.antd as ant
import modelscope_studio.components.base as ms

with gr.Blocks() as demo:
    with ms.Application():
        with ant.ConfigProvider():
            with ant.Card():
                ant.Button("Hello")

demo.queue().launch()

In these code:

• Application contains all component dependencies in modelscope_studio. Please make sure that all exported components of modelscope_studio are wrapped under it, otherwise the page will not be previewed successfully.
• ConfigProvider has the same features as in Ant Design. In addition, we have added some additional adaptations to be compatible with the styles in gradio. Therefore, in order to ensure the normal page style, all Antd components need to be wrapped under this component.

Parameter Binding

We provide a props parameter for all Antd components. The parameter type is dict, which represents all APIs of the corresponding component in Ant Design:

ant.Button('Hello', props=dict(danger=True))

Additionally, we are trying to complete the direct exposure of Antd component API to Python. Currently, some components can also pass in properties via Python parameters. You can check the corresponding component type for details.

ant.Button('Hello', danger=True)

Support Slot

Some properties in Antd are typed as ReactNode, which cannot be directly implemented by simple Python types. so we offer a slot mechanism for these cases.

import gradio as gr
import modelscope_studio.components.antd as ant
import modelscope_studio.components.base as ms

with gr.Blocks() as demo:
    with ms.Application():
        with ant.ConfigProvider():
            with ant.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 ant.Button():
                        ms.Text("GitHub")
                        with ms.Slot("icon"):
                            ant.Icon("GithubOutlined")

demo.queue().launch()

Typically, inspecting the SLOTS property of a component will show the supported slots.

Embedding Other Gradio Components

The slots of some components may only support components in modelscope_studio. If you want to support other gradio components, it is also very simple. You only need to use Fragment to wrap it.

import gradio as gr
import modelscope_studio.components.antd as ant
import modelscope_studio.components.base as ms

with gr.Blocks() as demo:
    with ms.Application():
        with ant.ConfigProvider():
            with ant.Space():
                ant.Button("1")
                ant.Button("2")
                # other gradio components
                with ms.Fragment():
                    gr.Button("3")

demo.queue().launch()

Additional Components

Besides Antd components, we also provide Span, Div, and Text components, corresponding to HTML span, div, and text elements respectively. These should be imported from modelscope_studio.components.base.

More Information

For detailed insights into these changes, visit our development branch feat/antd.

The release of version 1.0 awaits completion of the following milestones:

• Known component issues.
• Directly expose all component APIs to users without relying on the props parameter.
• Complete migration and writing of all component documentations.
• Write demos for all components.
• Launch a component site.

中文版

在 1.0 版本中，我们将会与 Ant Design 中的组件集成，并兼容其大多数 API。modelscope_studio 原有的组件将会移动到 legacy目录下，它们暂时无法享受到新版本的升级改动，但是在后期我们会进行组件升级来兼容它们。

下载

现在，您可以通过运行以下命令来提前体验 Ant Design 组件。

pip install modelscope_studio~=1.0.0b

Warning

目前该版本仍在开发中，API 可能会随时变更，如果您需要在生产环境中使用，请提前锁定版本。

使用示例

import gradio as gr
import modelscope_studio.components.antd as ant
import modelscope_studio.components.base as ms

with gr.Blocks() as demo:
    with ms.Application():
        with ant.ConfigProvider():
            with ant.Card():
                ant.Button("Hello")

demo.queue().launch()

其中：

• Application 包含了modelscope_studio中所有的组件依赖，请确保modelscope_studio所有导出的组件都被其包裹，否则页面将会无法成功预览。
• ConfigProvider 与 Ant Design 中的功能一致，除此之外，我们还加了一些额外的适配来兼容 gradio 中样式。因此，为了保证页面样式正常，所有的 Antd 组件需要包裹在该组件下面。

参数绑定

我们为所有的 Antd 组件都提供了props属性，该属性的类型为dict，代表 Ant Design 中对应组件的所有 API ：

ant.Button('Hello', props=dict(danger=True))

同时，我们也在尽量完成 Antd 组件 API 到 Python 的直接透出，目前部分组件也可以基于 Python 参数的形式输入属性，具体请查看对应组件类型。

ant.Button('Hello', danger=True)

支持插槽

在 Antd 中，有一些类型为ReactNode的属性，这些属性无法直接通过简单的 Python 类型实现，因为我们为其提供了插槽机制。

import gradio as gr
import modelscope_studio.components.antd as ant
import modelscope_studio.components.base as ms

with gr.Blocks() as demo:
    with ms.Application():
        with ant.ConfigProvider():
            with ant.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 ant.Button():
                        ms.Text("GitHub")
                        with ms.Slot("icon"):
                            ant.Icon("GithubOutlined")

demo.queue().launch()

通常，您可以点入组件内部，通过查看其SLOTS属性来确认该组件支持哪些插槽。

嵌入其他 gradio 组件

某些组件的插槽可能只支持modelscope_studio中的组件，如果您想要支持其他的 gradio 组件，这也很简单，您只需要使用Fragment来将其包裹。

import gradio as gr
import modelscope_studio.components.antd as ant
import modelscope_studio.components.base as ms

with gr.Blocks() as demo:
    with ms.Application():
        with ant.ConfigProvider():
            with ant.Space():
                ant.Button("1")
                ant.Button("2")
                # other gradio components
                with ms.Fragment():
                    gr.Button("3")

demo.queue().launch()

其他组件

除了 Antd 组件外，我们还提供了Span、Div和Text组件，分别对应 HTML 中的span、div和text节点，这些组件需要从modelscope_studio.components.base中导入。

更多

如果您想要更详细地了解此次变更，可以查看我们的开发分支 feat/antd 来获取更多信息。

我们将在完成以下规划后发布 1.0 版本：

• 目前已知的组件问题
• 直接向用户透出所有的组件 API ，不再依赖props属性
• 完成所有组件文档迁移与编写
• 完成所有组件的 Demo 编写
• 组件站点