Skip to content

Commit ef84796

Browse files
Col0ringCol0ring
committed
refactor(antdx): new components mermaid & sources
1 parent d659bff commit ef84796

18 files changed

Lines changed: 635 additions & 0 deletions

File tree

‎backend/modelscope_studio/components/antdx/__init__.py‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,13 @@
2828
from .sender.switch import AntdXSenderSwitch as SenderSwitch
2929
from .suggestion import AntdXSuggestion as Suggestion
3030
from .suggestion.item import AntdXSuggestionItem as SuggestionItem
31+
from .sources import AntdXSources as Sources
32+
from .sources.item import AntdXSourcesItem as SourcesItem
3133
from .thought_chain import AntdXThoughtChain as ThoughtChain
3234
from .thought_chain.item import AntdXThoughtChainItem as ThoughtChainItem
3335
from .thought_chain.thought_chain_item import AntdXThoughtChainThoughtChainItem as ThoughtChainThoughtChainItem
3436
from .think import AntdXThink as Think
3537
from .welcome import AntdXWelcome as Welcome
38+
from .mermaid import AntdXMermaid as Mermaid
3639
from .notification import AntdXNotification as Notification
3740
from .x_provider import AntdXXProvider as XProvider

‎backend/modelscope_studio/components/antdx/components.py‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,15 @@
2525
from .sender import AntdXSender
2626
from .sender.header import AntdXSenderHeader
2727
from .sender.switch import AntdXSenderSwitch
28+
from .sources import AntdXSources
29+
from .sources.item import AntdXSourcesItem
2830
from .suggestion import AntdXSuggestion
2931
from .suggestion.item import AntdXSuggestionItem
3032
from .thought_chain import AntdXThoughtChain
3133
from .thought_chain.item import AntdXThoughtChainItem
3234
from .thought_chain.thought_chain_item import AntdXThoughtChainThoughtChainItem
3335
from .think import AntdXThink
3436
from .welcome import AntdXWelcome
37+
from .mermaid import AntdXMermaid
3538
from .notification import AntdXNotification
3639
from .x_provider import AntdXXProvider

‎backend/modelscope_studio/components/antdx/mermaid/__init__.py‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
from __future__ import annotations
2+
from gradio.events import EventListener
3+
from ....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
4+
5+
6+
class AntdXMermaid(ModelScopeLayoutComponent):
7+
"""
8+
Ant Design X: https://x.ant.design/components/mermaid
9+
"""
10+
EVENTS = [
11+
EventListener("render_type_change",
12+
callback=lambda block: block._internal.update(
13+
bind_renderTypeChange_event=True)),
14+
]
15+
16+
# supported slots
17+
SLOTS = ['header', 'actions.customActions']
18+
19+
def __init__(
20+
self,
21+
value: str | None = None,
22+
*,
23+
highlight_props: dict | None = None,
24+
config: dict | None = None,
25+
actions: dict | None = None,
26+
prefix_cls: str | None = None,
27+
styles: dict | str | None = None,
28+
class_names: dict | str | None = None,
29+
additional_props: dict | None = None,
30+
root_class_name: str | None = None,
31+
as_item: str | None = None,
32+
_internal: None = None,
33+
# gradio properties
34+
visible: bool = True,
35+
elem_id: str | None = None,
36+
elem_classes: list[str] | str | None = None,
37+
elem_style: dict | None = None,
38+
render: bool = True,
39+
**kwargs):
40+
super().__init__(visible=visible,
41+
elem_id=elem_id,
42+
elem_classes=elem_classes,
43+
render=render,
44+
as_item=as_item,
45+
elem_style=elem_style,
46+
**kwargs)
47+
self.additional_props = additional_props
48+
self.styles = styles
49+
self.class_names = class_names
50+
self.root_class_name = root_class_name
51+
self.value = value
52+
self.highlight_props = highlight_props
53+
self.config = config
54+
self.actions = actions
55+
self.prefix_cls = prefix_cls
56+
57+
FRONTEND_DIR = resolve_frontend_dir("mermaid", type="antdx")
58+
59+
@property
60+
def skip_api(self):
61+
return True
62+
63+
def preprocess(self, payload: None) -> None:
64+
return payload
65+
66+
def postprocess(self, value: None) -> None:
67+
68+
return value
69+
70+
def example_payload(self) -> None:
71+
return None
72+
73+
def example_value(self) -> None:
74+
return None

‎backend/modelscope_studio/components/antdx/sources/__init__.py‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
from __future__ import annotations
2+
3+
from typing import Any, Literal
4+
5+
from gradio.events import EventListener
6+
7+
from ....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
8+
from .item import AntdXSourcesItem
9+
10+
11+
class AntdXSources(ModelScopeLayoutComponent):
12+
"""
13+
Ant Design X: https://x.ant.design/components/sources
14+
"""
15+
16+
Item = AntdXSourcesItem
17+
18+
EVENTS = [
19+
EventListener("expand",
20+
callback=lambda block: block._internal.update(
21+
bind_expand_event=True)),
22+
EventListener("click",
23+
callback=lambda block: block._internal.update(
24+
bind_click_event=True)),
25+
]
26+
27+
# supported slots
28+
SLOTS = ['items']
29+
30+
def __init__(
31+
self,
32+
*,
33+
title: str | None = None,
34+
items: list[dict] | None = None,
35+
expand_icon_position: Literal['start', 'end'] | None = None,
36+
default_expanded: bool | None = None,
37+
expanded: bool | None = None,
38+
inline: bool | None = None,
39+
active_key: str | None = None,
40+
popover_overlay_width: str | int | float | None = None,
41+
additional_props: dict | None = None,
42+
styles: dict | str | None = None,
43+
class_names: dict | str | None = None,
44+
root_class_name: str | None = None,
45+
as_item: str | None = None,
46+
_internal: None = None,
47+
# gradio properties
48+
visible: bool = True,
49+
elem_id: str | None = None,
50+
elem_classes: list[str] | str | None = None,
51+
elem_style: dict | None = None,
52+
render: bool = True,
53+
**kwargs):
54+
super().__init__(visible=visible,
55+
elem_id=elem_id,
56+
elem_classes=elem_classes,
57+
render=render,
58+
as_item=as_item,
59+
elem_style=elem_style,
60+
**kwargs)
61+
self.additional_props = additional_props
62+
self.items = items
63+
self.styles = styles
64+
self.class_names = class_names
65+
self.root_class_name = root_class_name
66+
self.title = title
67+
self.expand_icon_position = expand_icon_position
68+
self.default_expanded = default_expanded
69+
self.expanded = expanded
70+
self.inline = inline
71+
self.active_key = active_key
72+
self.popover_overlay_width = popover_overlay_width
73+
74+
FRONTEND_DIR = resolve_frontend_dir("sources", type="antdx")
75+
76+
@property
77+
def skip_api(self):
78+
return True
79+
80+
def preprocess(self, payload: None) -> None:
81+
return payload
82+
83+
def postprocess(self, value: None) -> None:
84+
85+
return value
86+
87+
def example_payload(self) -> Any:
88+
return None
89+
90+
def example_value(self) -> Any:
91+
return None

‎backend/modelscope_studio/components/antdx/sources/item/__init__.py‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
from __future__ import annotations
2+
3+
from typing import Any
4+
5+
from .....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
6+
7+
8+
class AntdXSourcesItem(ModelScopeLayoutComponent):
9+
"""
10+
Ant Design X: https://x.ant.design/components/sources
11+
"""
12+
13+
EVENTS = []
14+
15+
# supported slots
16+
SLOTS = ['title', 'icon', 'description']
17+
18+
def __init__(
19+
self,
20+
key: str | None = None,
21+
*,
22+
description: str | None = None,
23+
icon: str | None = None,
24+
title: str | None = None,
25+
url: str | None = None,
26+
additional_props: dict | None = None,
27+
as_item: str | None = None,
28+
_internal: None = None,
29+
# gradio properties
30+
visible: bool = True,
31+
elem_id: str | None = None,
32+
elem_classes: list[str] | str | None = None,
33+
elem_style: dict | None = None,
34+
render: bool = True,
35+
**kwargs):
36+
super().__init__(visible=visible,
37+
elem_id=elem_id,
38+
elem_classes=elem_classes,
39+
render=render,
40+
as_item=as_item,
41+
elem_style=elem_style,
42+
**kwargs)
43+
self.additional_props = additional_props
44+
self.description = description
45+
self.icon = icon
46+
self.title = title
47+
self.key = key
48+
self.url = url
49+
50+
FRONTEND_DIR = resolve_frontend_dir("sources",
51+
"sources-item",
52+
type="antdx")
53+
54+
@property
55+
def skip_api(self):
56+
return True
57+
58+
def preprocess(self, payload: None) -> None:
59+
return payload
60+
61+
def postprocess(self, value: None) -> None:
62+
63+
return value
64+
65+
def example_payload(self) -> Any:
66+
return None
67+
68+
def example_value(self) -> Any:
69+
return None

‎frontend/antdx/mermaid/Index.svelte‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<script lang="ts">
2+
import {
3+
getProps,
4+
importComponent,
5+
processProps,
6+
} from '@svelte-preprocess-react/component';
7+
import { getSlots } from '@svelte-preprocess-react/svelte-contexts/slot.svelte';
8+
import cls from 'classnames';
9+
10+
const AwaitedMermaid = importComponent(() => import('./mermaid'));
11+
12+
const props = $props();
13+
const { gradio, getComponentProps, getAdditionalProps, children } = getProps<{
14+
additional_props?: Record<string, any>;
15+
as_item?: string | undefined;
16+
_internal: {
17+
layout?: boolean;
18+
};
19+
render_type_change?: any;
20+
}>(() => props);
21+
22+
const getProceedProps = processProps(
23+
() => {
24+
const {
25+
visible,
26+
_internal,
27+
as_item,
28+
elem_classes,
29+
elem_id,
30+
elem_style,
31+
...restProps
32+
} = getComponentProps();
33+
return {
34+
gradio,
35+
additionalProps: getAdditionalProps(),
36+
_internal,
37+
as_item,
38+
restProps,
39+
visible,
40+
elem_id,
41+
elem_classes,
42+
elem_style,
43+
};
44+
},
45+
{
46+
render_type_change: 'renderTypeChange',
47+
}
48+
);
49+
const proceedProps = $derived(getProceedProps());
50+
51+
const slots = getSlots();
52+
</script>
53+
54+
{#if proceedProps.visible}
55+
{#await AwaitedMermaid then Mermaid}
56+
<Mermaid
57+
style={proceedProps.elem_style}
58+
className={cls(proceedProps.elem_classes, 'ms-gr-antdx-mermaid')}
59+
id={proceedProps.elem_id}
60+
{...proceedProps.restProps}
61+
{...proceedProps.additionalProps}
62+
themeMode={proceedProps.gradio.shared.theme || 'light'}
63+
slots={slots.value}
64+
>
65+
{@render children?.()}
66+
</Mermaid>
67+
{/await}
68+
{/if}

‎frontend/antdx/mermaid/gradio.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import config from '../../defineConfig.js';
2+
3+
export default config();

0 commit comments

Comments
 (0)