From 83ed675286f88a97cc77bc522ca801b347b8cb43 Mon Sep 17 00:00:00 2001
From: Col0ring <1561999073@qq.com>
Date: Fri, 20 Dec 2024 17:57:49 +0800
Subject: [PATCH 1/3] fix: layout compatibility

---
 .../components/base/div/__init__.py           | 14 +-----
 .../components/base/span/__init__.py          | 14 +-----
 .../components/base/text/__init__.py          |  8 +---
 .../utils/dev/app_context.py                  |  5 ++-
 frontend/antd/button/Index.svelte             |  7 +--
 frontend/antd/button/button.tsx               | 15 ++++++-
 frontend/antd/divider/divider.tsx             |  8 ++--
 frontend/antd/dropdown/button/Index.svelte    |  7 +--
 .../antd/dropdown/button/dropdown.button.tsx  | 13 +++++-
 frontend/antd/table/table.tsx                 |  2 +-
 frontend/antd/tag/Index.svelte                |  7 +--
 frontend/antd/tag/checkable-tag/Index.svelte  |  7 +--
 .../tag/checkable-tag/tag.checkable-tag.tsx   | 16 ++++++-
 frontend/antd/tag/tag.tsx                     | 44 ++++++++++++-------
 frontend/antd/typography/typography.base.tsx  | 10 ++---
 15 files changed, 92 insertions(+), 85 deletions(-)

diff --git a/backend/modelscope_studio/components/base/div/__init__.py b/backend/modelscope_studio/components/base/div/__init__.py
index cf4d290d..27e735a9 100644
--- a/backend/modelscope_studio/components/base/div/__init__.py
+++ b/backend/modelscope_studio/components/base/div/__init__.py
@@ -5,10 +5,6 @@
 from gradio.events import EventListener
 
 from ....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
-from ...antd.carousel import AntdCarousel
-from ...antd.space import AntdSpace
-from ...antd.tooltip import AntdTooltip
-from ..slot import ModelScopeSlot
 
 
 class ModelScopeDiv(ModelScopeLayoutComponent):
@@ -66,14 +62,8 @@ def __init__(
                          as_item=as_item,
                          elem_style=elem_style,
                          **kwargs)
-        if self.parent and self._internal and (any(
-                isinstance(self.parent, component) for component in [
-                    AntdCarousel,
-                    AntdSpace,
-                    AntdTooltip,
-                    ModelScopeSlot,
-                ])):
-            self._internal.update(fragment=True)
+
+        self._internal.update(fragment=True)
         self.value = value
         self.props = props
 
diff --git a/backend/modelscope_studio/components/base/span/__init__.py b/backend/modelscope_studio/components/base/span/__init__.py
index 7793f5de..3b61c2e3 100644
--- a/backend/modelscope_studio/components/base/span/__init__.py
+++ b/backend/modelscope_studio/components/base/span/__init__.py
@@ -5,10 +5,6 @@
 from gradio.events import EventListener
 
 from ....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
-from ...antd.carousel import AntdCarousel
-from ...antd.space import AntdSpace
-from ...antd.tooltip import AntdTooltip
-from ..slot import ModelScopeSlot
 
 
 class ModelScopeSpan(ModelScopeLayoutComponent):
@@ -66,14 +62,8 @@ def __init__(
                          as_item=as_item,
                          elem_style=elem_style,
                          **kwargs)
-        if self.parent and self._internal and (any(
-                isinstance(self.parent, component) for component in [
-                    AntdCarousel,
-                    AntdSpace,
-                    AntdTooltip,
-                    ModelScopeSlot,
-                ])):
-            self._internal.update(fragment=True)
+
+        self._internal.update(fragment=True)
         self.value = value
         self.props = props
 
diff --git a/backend/modelscope_studio/components/base/text/__init__.py b/backend/modelscope_studio/components/base/text/__init__.py
index 42c50a41..1fa9a42d 100644
--- a/backend/modelscope_studio/components/base/text/__init__.py
+++ b/backend/modelscope_studio/components/base/text/__init__.py
@@ -3,9 +3,6 @@
 from typing import Any
 
 from ....utils.dev import ModelScopeComponent, resolve_frontend_dir
-from ...antd.carousel import AntdCarousel
-from ...antd.space import AntdSpace
-from ...antd.tooltip import AntdTooltip
 
 
 class ModelScopeText(ModelScopeComponent):
@@ -37,10 +34,7 @@ def __init__(
                          as_item=as_item,
                          elem_style=elem_style,
                          **kwargs)
-        if self.parent and self._internal and (any(
-                isinstance(self.parent, component)
-                for component in [AntdCarousel, AntdTooltip, AntdSpace])):
-            self._internal.update(fragment=True)
+        self._internal.update(fragment=True)
         self.value = value
 
     FRONTEND_DIR = resolve_frontend_dir("text", type="base")
diff --git a/backend/modelscope_studio/utils/dev/app_context.py b/backend/modelscope_studio/utils/dev/app_context.py
index 1301e39b..5ba9bc3e 100644
--- a/backend/modelscope_studio/utils/dev/app_context.py
+++ b/backend/modelscope_studio/utils/dev/app_context.py
@@ -1,3 +1,6 @@
+import warnings
+
+
 class AppContext:
     _app = None
 
@@ -12,7 +15,7 @@ def has_app(cls):
     @classmethod
     def assert_app(cls):
         if cls._app is None:
-            raise ImportError(
+            warnings.warn(
                 """<modelscope-studio>: Cannot find the `Application` component, did you forget to import it from `modelscope_studio.components.base`?"""
             )
 
diff --git a/frontend/antd/button/Index.svelte b/frontend/antd/button/Index.svelte
index 3ca3e94f..91038071 100644
--- a/frontend/antd/button/Index.svelte
+++ b/frontend/antd/button/Index.svelte
@@ -72,12 +72,9 @@
       {...$mergedProps.props}
       {...bindEvents($mergedProps)}
       slots={$slots}
+      value={$mergedProps.value}
     >
-      {#if $mergedProps._internal.layout}
-        <slot></slot>
-      {:else}
-        {$mergedProps.value}
-      {/if}
+      <slot></slot>
     </Button>
   {/await}
 {/if}
diff --git a/frontend/antd/button/button.tsx b/frontend/antd/button/button.tsx
index e305597a..2b18aa34 100644
--- a/frontend/antd/button/button.tsx
+++ b/frontend/antd/button/button.tsx
@@ -1,15 +1,26 @@
 import { sveltify } from '@svelte-preprocess-react';
 import { ReactSlot } from '@svelte-preprocess-react/react-slot';
 import React from 'react';
+import { useTargets } from '@utils/hooks/useTargets';
 import { Button as AButton, type GetProps } from 'antd';
 
 export const Button = sveltify<GetProps<typeof AButton>, ['icon']>(
-  ({ slots, ...props }) => {
+  ({ slots, value, children, ...props }) => {
+    const targets = useTargets(children);
     return (
       <AButton
         {...props}
         icon={slots.icon ? <ReactSlot slot={slots.icon} /> : props.icon}
-      />
+      >
+        {targets.length > 0 ? (
+          children
+        ) : (
+          <>
+            {children}
+            {value}
+          </>
+        )}
+      </AButton>
     );
   }
 );
diff --git a/frontend/antd/divider/divider.tsx b/frontend/antd/divider/divider.tsx
index e61d6ddc..0bef3e3f 100644
--- a/frontend/antd/divider/divider.tsx
+++ b/frontend/antd/divider/divider.tsx
@@ -1,10 +1,8 @@
 import { sveltify } from '@svelte-preprocess-react';
 import { Divider as ADivider, type GetProps } from 'antd';
 
-export const Divider = sveltify<GetProps<typeof ADivider>, ['children']>(
-  ({ ...props }) => {
-    return <ADivider {...props} />;
-  }
-);
+export const Divider = sveltify<GetProps<typeof ADivider>>(({ ...props }) => {
+  return <ADivider {...props} />;
+});
 
 export default Divider;
diff --git a/frontend/antd/dropdown/button/Index.svelte b/frontend/antd/dropdown/button/Index.svelte
index 50d808e9..0b0d202e 100644
--- a/frontend/antd/dropdown/button/Index.svelte
+++ b/frontend/antd/dropdown/button/Index.svelte
@@ -81,12 +81,9 @@
       slots={$slots}
       menuItems={$items}
       {setSlotParams}
+      value={$mergedProps.value}
     >
-      {#if $mergedProps._internal.layout}
-        <slot></slot>
-      {:else}
-        {$mergedProps.value}
-      {/if}
+      <slot></slot>
     </DropdownButton>
   {/await}
 {/if}
diff --git a/frontend/antd/dropdown/button/dropdown.button.tsx b/frontend/antd/dropdown/button/dropdown.button.tsx
index a2b10f76..5abfdff8 100644
--- a/frontend/antd/dropdown/button/dropdown.button.tsx
+++ b/frontend/antd/dropdown/button/dropdown.button.tsx
@@ -14,6 +14,7 @@ export const DropdownButton = sveltify<
   GetProps<typeof ADropdown.Button> & {
     menuItems: Item[];
     setSlotParams: SetSlotParams;
+    value?: string;
   },
   [
     'icon',
@@ -31,12 +32,15 @@ export const DropdownButton = sveltify<
     dropdownRender,
     buttonsRender,
     setSlotParams,
+    value,
     ...props
   }) => {
     const getPopupContainerFunction = useFunction(getPopupContainer);
     const dropdownRenderFunction = useFunction(dropdownRender);
     const buttonsRenderFunction = useFunction(buttonsRender);
     const buttonsRenderTargets = useTargets(children, 'buttonsRender');
+    const targets = useTargets(children);
+
     return (
       <ADropdown.Button
         {...props}
@@ -81,7 +85,14 @@ export const DropdownButton = sveltify<
             : dropdownRenderFunction
         }
       >
-        {children}
+        {targets.length > 0 ? (
+          children
+        ) : (
+          <>
+            {children}
+            {value}
+          </>
+        )}
       </ADropdown.Button>
     );
   }
diff --git a/frontend/antd/table/table.tsx b/frontend/antd/table/table.tsx
index efef003b..e6768f92 100644
--- a/frontend/antd/table/table.tsx
+++ b/frontend/antd/table/table.tsx
@@ -70,7 +70,7 @@ export const Table = sveltify<
     const paginationConfig = getConfig(pagination);
     const paginationShowTotalFunction = useFunction(paginationConfig.showTotal);
     const rowClassNameFunction = useFunction(rowClassName);
-    const rowKeyFunction = useFunction(rowKey);
+    const rowKeyFunction = useFunction(rowKey, true);
     const supportShowSorterTooltipConfig =
       slots['showSorterTooltip.title'] || typeof showSorterTooltip === 'object';
     const showSorterTooltipConfig = getConfig(showSorterTooltip);
diff --git a/frontend/antd/tag/Index.svelte b/frontend/antd/tag/Index.svelte
index eafaed74..3a40a567 100644
--- a/frontend/antd/tag/Index.svelte
+++ b/frontend/antd/tag/Index.svelte
@@ -69,12 +69,9 @@
       {...$mergedProps.props}
       {...bindEvents($mergedProps)}
       slots={$slots}
+      value={$mergedProps.value}
     >
-      {#if $mergedProps._internal.layout}
-        <slot></slot>
-      {:else}
-        {$mergedProps.value}
-      {/if}
+      <slot></slot>
     </Tag>
   {/await}
 {/if}
diff --git a/frontend/antd/tag/checkable-tag/Index.svelte b/frontend/antd/tag/checkable-tag/Index.svelte
index 5a20646a..a4287a95 100644
--- a/frontend/antd/tag/checkable-tag/Index.svelte
+++ b/frontend/antd/tag/checkable-tag/Index.svelte
@@ -74,16 +74,13 @@
       {...$mergedProps.props}
       {...bindEvents($mergedProps)}
       slots={$slots}
+      label={$mergedProps.label}
       checked={$mergedProps.props.checked ?? $mergedProps.value}
       onValueChange={(checked) => {
         value = checked;
       }}
     >
-      {#if $mergedProps._internal.layout}
-        <slot></slot>
-      {:else}
-        {$mergedProps.label}
-      {/if}
+      <slot></slot>
     </CheckableTag>
   {/await}
 {/if}
diff --git a/frontend/antd/tag/checkable-tag/tag.checkable-tag.tsx b/frontend/antd/tag/checkable-tag/tag.checkable-tag.tsx
index 3410949c..98606e53 100644
--- a/frontend/antd/tag/checkable-tag/tag.checkable-tag.tsx
+++ b/frontend/antd/tag/checkable-tag/tag.checkable-tag.tsx
@@ -1,12 +1,15 @@
 import { sveltify } from '@svelte-preprocess-react';
 import React from 'react';
+import { useTargets } from '@utils/hooks/useTargets';
 import { type GetProps, Tag as ATag } from 'antd';
 
 export const CheckableTag = sveltify<
   GetProps<typeof ATag.CheckableTag> & {
     onValueChange: (checked: boolean) => void;
+    label?: string;
   }
->(({ onChange, onValueChange, ...props }) => {
+>(({ onChange, onValueChange, children, label, ...props }) => {
+  const targets = useTargets(children);
   return (
     <ATag.CheckableTag
       {...props}
@@ -14,7 +17,16 @@ export const CheckableTag = sveltify<
         onChange?.(v);
         onValueChange(v);
       }}
-    />
+    >
+      {targets.length > 0 ? (
+        children
+      ) : (
+        <>
+          {children}
+          {label}
+        </>
+      )}
+    </ATag.CheckableTag>
   );
 });
 
diff --git a/frontend/antd/tag/tag.tsx b/frontend/antd/tag/tag.tsx
index 685e4667..f05c8a37 100644
--- a/frontend/antd/tag/tag.tsx
+++ b/frontend/antd/tag/tag.tsx
@@ -1,24 +1,34 @@
 import { sveltify } from '@svelte-preprocess-react';
 import { ReactSlot } from '@svelte-preprocess-react/react-slot';
 import React from 'react';
+import { useTargets } from '@utils/hooks/useTargets';
 import { type GetProps, Tag as ATag } from 'antd';
 
-export const Tag = sveltify<GetProps<typeof ATag>, ['closeIcon', 'icon']>(
-  ({ slots, ...props }) => {
-    return (
-      <ATag
-        {...props}
-        icon={slots.icon ? <ReactSlot slot={slots.icon} /> : props.icon}
-        closeIcon={
-          slots.closeIcon ? (
-            <ReactSlot slot={slots.closeIcon} />
-          ) : (
-            props.closeIcon
-          )
-        }
-      />
-    );
-  }
-);
+export const Tag = sveltify<
+  GetProps<typeof ATag> & {
+    value?: string;
+  },
+  ['closeIcon', 'icon']
+>(({ slots, value, children, ...props }) => {
+  const targets = useTargets(children);
+  return (
+    <ATag
+      {...props}
+      icon={slots.icon ? <ReactSlot slot={slots.icon} /> : props.icon}
+      closeIcon={
+        slots.closeIcon ? <ReactSlot slot={slots.closeIcon} /> : props.closeIcon
+      }
+    >
+      {targets.length > 0 ? (
+        children
+      ) : (
+        <>
+          {children}
+          {value}
+        </>
+      )}
+    </ATag>
+  );
+});
 
 export default Tag;
diff --git a/frontend/antd/typography/typography.base.tsx b/frontend/antd/typography/typography.base.tsx
index ef60ab6e..3d20a72a 100644
--- a/frontend/antd/typography/typography.base.tsx
+++ b/frontend/antd/typography/typography.base.tsx
@@ -3,14 +3,13 @@ import { ReactSlot } from '@svelte-preprocess-react/react-slot';
 import type { SetSlotParams } from '@svelte-preprocess-react/slot';
 import React, { useMemo } from 'react';
 import { useSlotsChildren } from '@utils/hooks/useSlotsChildren';
+import { useTargets } from '@utils/hooks/useTargets';
 import { omitUndefinedProps } from '@utils/omitUndefinedProps';
 import { renderParamsSlot } from '@utils/renderParamsSlot';
 import { type GetProps, Typography } from 'antd';
 import type { EllipsisConfig } from 'antd/es/typography/Base';
 import cls from 'classnames';
 
-import { useTargets } from '../../utils/hooks/useTargets';
-
 function getConfig<T>(value: T): Partial<T & Record<PropertyKey, any>> {
   if (typeof value === 'object' && value !== null) {
     return value as any;
@@ -83,6 +82,7 @@ export const TypographyBase = sveltify<
       }
     }, [component]);
     const [slotsChildren, restChildren] = useSlotsChildren(children);
+    const targets = useTargets(children);
     return (
       <>
         <div style={{ display: 'none' }}>{slotsChildren}</div>
@@ -103,7 +103,7 @@ export const TypographyBase = sveltify<
                   icon:
                     copyableIconTargets.length > 0
                       ? copyableIconTargets.map((slot, index) => {
-                          return <ReactSlot key={index} slot={slot} />;
+                          return <ReactSlot key={index} slot={slot} clone />;
                         })
                       : copyableConfig.icon,
                 })
@@ -114,7 +114,7 @@ export const TypographyBase = sveltify<
               ? {
                   ...editableConfig,
                   icon: slots['editable.icon'] ? (
-                    <ReactSlot slot={slots['editable.icon']} />
+                    <ReactSlot slot={slots['editable.icon']} clone />
                   ) : (
                     editableConfig.icon
                   ),
@@ -163,7 +163,7 @@ export const TypographyBase = sveltify<
                 : undefined) as boolean
           }
         >
-          {restChildren}
+          {targets.length > 0 ? restChildren : <>{value}</>}
         </TypographyComponent>
       </>
     );

From 47672477e7647db5d0a0b7c85e13b4284fee36cd Mon Sep 17 00:00:00 2001
From: Col0ring <1561999073@qq.com>
Date: Fri, 20 Dec 2024 18:38:02 +0800
Subject: [PATCH 2/3] docs: update legacy demo

---
 docs/components/legacy/Chatbot/demos/accordion.py              | 3 ++-
 docs/components/legacy/Chatbot/demos/basic.py                  | 3 ++-
 docs/components/legacy/Chatbot/demos/chart.py                  | 3 ++-
 docs/components/legacy/Chatbot/demos/message_config.py         | 3 ++-
 docs/components/legacy/Chatbot/demos/multi_bots.py             | 3 ++-
 docs/components/legacy/Chatbot/demos/multimodal.py             | 3 ++-
 docs/components/legacy/Chatbot/demos/select-box.py             | 3 ++-
 docs/components/legacy/Flow/demos/basic.py                     | 3 ++-
 docs/components/legacy/Flow/demos/component_options.py         | 3 ++-
 docs/components/legacy/Flow/demos/custom_node_type.py          | 3 ++-
 docs/components/legacy/Lifecycle/demos/basic.py                | 3 ++-
 docs/components/legacy/Lifecycle/demos/language_adaptation.py  | 3 ++-
 docs/components/legacy/Lifecycle/demos/theme_adaptation.py     | 3 ++-
 docs/components/legacy/Markdown/demos/accordion.py             | 3 ++-
 docs/components/legacy/Markdown/demos/basic.py                 | 3 ++-
 docs/components/legacy/Markdown/demos/chart.py                 | 3 ++-
 docs/components/legacy/Markdown/demos/custom-tag.py            | 3 ++-
 docs/components/legacy/Markdown/demos/custom-tag2.py           | 3 ++-
 docs/components/legacy/Markdown/demos/custom-tag3.py           | 3 ++-
 docs/components/legacy/Markdown/demos/custom-tag4.py           | 3 ++-
 .../Markdown/demos/custom_tags/accordion/accordion-title.py    | 3 ++-
 .../legacy/Markdown/demos/custom_tags/accordion/basic.py       | 3 ++-
 .../legacy/Markdown/demos/custom_tags/chart/basic.py           | 3 ++-
 .../legacy/Markdown/demos/custom_tags/select-box/basic.py      | 3 ++-
 .../legacy/Markdown/demos/custom_tags/select-box/card_shape.py | 3 ++-
 .../demos/custom_tags/select-box/card_shape_width_auto.py      | 3 ++-
 .../Markdown/demos/custom_tags/select-box/python_events.py     | 3 ++-
 docs/components/legacy/Markdown/demos/multimodal.py            | 3 ++-
 docs/components/legacy/Markdown/demos/select-box.py            | 3 ++-
 docs/components/legacy/MultimodalInput/demos/basic.py          | 3 ++-
 docs/components/legacy/MultimodalInput/demos/config_buttons.py | 3 ++-
 docs/components/legacy/MultimodalInput/demos/upload_sources.py | 3 ++-
 docs/components/legacy/MultimodalInput/demos/with_chatbot.py   | 3 ++-
 docs/components/legacy/WaterfallGallery/demos/basic.py         | 3 ++-
 .../legacy/WaterfallGallery/demos/like_click_feedback.py       | 3 ++-
 docs/components/legacy/WaterfallGallery/demos/load_more.py     | 3 ++-
 .../legacy/WaterfallGallery/demos/responsive_columns.py        | 3 ++-
 37 files changed, 74 insertions(+), 37 deletions(-)

diff --git a/docs/components/legacy/Chatbot/demos/accordion.py b/docs/components/legacy/Chatbot/demos/accordion.py
index ed3ca9e2..185fd3ab 100644
--- a/docs/components/legacy/Chatbot/demos/accordion.py
+++ b/docs/components/legacy/Chatbot/demos/accordion.py
@@ -3,6 +3,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 from modelscope_studio.components.legacy.Chatbot.llm_thinking_presets import \
   qwen
 
@@ -40,7 +41,7 @@ def resolve_assets(relative_path):
     ],
 ]
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Chatbot(
         value=conversation,
         llm_thinking_presets=[qwen()],
diff --git a/docs/components/legacy/Chatbot/demos/basic.py b/docs/components/legacy/Chatbot/demos/basic.py
index 6c5361d9..f645cc3c 100644
--- a/docs/components/legacy/Chatbot/demos/basic.py
+++ b/docs/components/legacy/Chatbot/demos/basic.py
@@ -4,6 +4,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 conversation = [
     [
@@ -31,7 +32,7 @@ def flushed():
     return gr.update(interactive=True)
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     chatbot = mgr.Chatbot(
         value=conversation,
         avatar_images=[
diff --git a/docs/components/legacy/Chatbot/demos/chart.py b/docs/components/legacy/Chatbot/demos/chart.py
index c07b3e0e..3c4892c2 100644
--- a/docs/components/legacy/Chatbot/demos/chart.py
+++ b/docs/components/legacy/Chatbot/demos/chart.py
@@ -3,6 +3,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 # echarts options, see: https://echarts.apache.org/en/index.html
 option1 = {
@@ -32,7 +33,7 @@
     ],
 ]
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Chatbot(
         value=conversation,
         flushing=False,
diff --git a/docs/components/legacy/Chatbot/demos/message_config.py b/docs/components/legacy/Chatbot/demos/message_config.py
index b2fe3e1b..c964ab1c 100644
--- a/docs/components/legacy/Chatbot/demos/message_config.py
+++ b/docs/components/legacy/Chatbot/demos/message_config.py
@@ -3,6 +3,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 
 def submit(_chatbot):
@@ -26,7 +27,7 @@ def submit(_chatbot):
     yield _chatbot
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     chatbot = mgr.Chatbot(height=600, )
     button = gr.Button("Submit")
     button.click(fn=submit, inputs=[chatbot], outputs=[chatbot])
diff --git a/docs/components/legacy/Chatbot/demos/multi_bots.py b/docs/components/legacy/Chatbot/demos/multi_bots.py
index ea167a88..b4177910 100644
--- a/docs/components/legacy/Chatbot/demos/multi_bots.py
+++ b/docs/components/legacy/Chatbot/demos/multi_bots.py
@@ -4,6 +4,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 
 def resolve_assets(relative_path):
@@ -58,7 +59,7 @@ def flushed():
     return gr.update(interactive=True)
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     chatbot = mgr.Chatbot(
         value=conversation,
         avatar_image_width=40,
diff --git a/docs/components/legacy/Chatbot/demos/multimodal.py b/docs/components/legacy/Chatbot/demos/multimodal.py
index 06af466c..593af879 100644
--- a/docs/components/legacy/Chatbot/demos/multimodal.py
+++ b/docs/components/legacy/Chatbot/demos/multimodal.py
@@ -3,6 +3,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 
 def resolve_assets(relative_path):
@@ -29,7 +30,7 @@ def resolve_assets(relative_path):
     ],
 ]
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Chatbot(
         value=conversation,
         height=600,
diff --git a/docs/components/legacy/Chatbot/demos/select-box.py b/docs/components/legacy/Chatbot/demos/select-box.py
index 89b7b6f7..56f03f12 100644
--- a/docs/components/legacy/Chatbot/demos/select-box.py
+++ b/docs/components/legacy/Chatbot/demos/select-box.py
@@ -3,6 +3,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 # `label` will display on the page, and `value` is the actual selected value.
 options = [{"label": "A", "value": "a"}, "b", "c"]
@@ -35,7 +36,7 @@ def fn(data: gr.EventData):
     print(data._data)
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     chatbot = mgr.Chatbot(
         value=conversation,
         flushing=False,
diff --git a/docs/components/legacy/Flow/demos/basic.py b/docs/components/legacy/Flow/demos/basic.py
index 3505892f..96686d2c 100644
--- a/docs/components/legacy/Flow/demos/basic.py
+++ b/docs/components/legacy/Flow/demos/basic.py
@@ -4,6 +4,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 from modelscope_studio.components.legacy.Flow import Edge, Node
 
 with open((os.path.join(os.path.dirname(__file__),
@@ -27,7 +28,7 @@ def on_data_change(_flow):
     print(_flow)
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     flow = mgr.Flow(value=data, schema=schema, sync_on_data_change=True)
     flow.data_change(fn=on_data_change, inputs=[flow])
 
diff --git a/docs/components/legacy/Flow/demos/component_options.py b/docs/components/legacy/Flow/demos/component_options.py
index 6182594f..f58431b5 100644
--- a/docs/components/legacy/Flow/demos/component_options.py
+++ b/docs/components/legacy/Flow/demos/component_options.py
@@ -4,6 +4,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 from modelscope_studio.components.legacy.Flow import (BackgroundPropsDict,
                                                       Edge, Node)
 
@@ -51,7 +52,7 @@ def on_change(_flow_config, _bgc_variant, _bgc_color, _bgc_bg_color, _bgc_gap,
     return gr.update(**new_props, background_props=new_background_props)
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     with gr.Accordion(label="Flow Options"):
         flow_config = gr.CheckboxGroup(
             container=False,
diff --git a/docs/components/legacy/Flow/demos/custom_node_type.py b/docs/components/legacy/Flow/demos/custom_node_type.py
index c3f59e74..7d6203d7 100644
--- a/docs/components/legacy/Flow/demos/custom_node_type.py
+++ b/docs/components/legacy/Flow/demos/custom_node_type.py
@@ -1,6 +1,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 from modelscope_studio.components.legacy.Flow import (FlowSchemaDict, Node,
                                                       NodeSchemaAttributeDict,
                                                       NodeSchemaDict)
@@ -56,7 +57,7 @@ def on_custom(data: gr.EventData):
     ]
 }
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     flow = mgr.Flow(value=data,
                     schema=schema,
                     custom_components=custom_components,
diff --git a/docs/components/legacy/Lifecycle/demos/basic.py b/docs/components/legacy/Lifecycle/demos/basic.py
index a7c36168..a9887cbe 100644
--- a/docs/components/legacy/Lifecycle/demos/basic.py
+++ b/docs/components/legacy/Lifecycle/demos/basic.py
@@ -1,6 +1,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 
 def mount(e: gr.EventData):
@@ -16,7 +17,7 @@ def onUnmount(e: gr.EventData):
     print("onUnmount", e._data)
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     gr.Markdown("The Lifecycle component will not be rendered on the page.")
     lifecycle = mgr.Lifecycle()
     # listen to the page lifecycle
diff --git a/docs/components/legacy/Lifecycle/demos/language_adaptation.py b/docs/components/legacy/Lifecycle/demos/language_adaptation.py
index 9b504300..61cc2b8e 100644
--- a/docs/components/legacy/Lifecycle/demos/language_adaptation.py
+++ b/docs/components/legacy/Lifecycle/demos/language_adaptation.py
@@ -3,6 +3,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 messages = {
     'en': {
@@ -28,7 +29,7 @@ def mount(_lifecycle, _state):
     yield messages[lang]["hello"], _state
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     lifecycle = mgr.Lifecycle()
     state = gr.State({"current_lang": default_lang})
     markdown = gr.Markdown(value=messages[default_lang]["hello"])
diff --git a/docs/components/legacy/Lifecycle/demos/theme_adaptation.py b/docs/components/legacy/Lifecycle/demos/theme_adaptation.py
index dc6a1287..ccab7624 100644
--- a/docs/components/legacy/Lifecycle/demos/theme_adaptation.py
+++ b/docs/components/legacy/Lifecycle/demos/theme_adaptation.py
@@ -1,6 +1,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 
 def mount(_lifecycle, _state):
@@ -15,7 +16,7 @@ def fn(_state):
         value=f"https://dummyimage.com/200x100/{color}.png&text={theme}")
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     lifecycle = mgr.Lifecycle()
     state = gr.State({"theme": "light"})
     btn = gr.Button()
diff --git a/docs/components/legacy/Markdown/demos/accordion.py b/docs/components/legacy/Markdown/demos/accordion.py
index dc92779e..09bc5d63 100644
--- a/docs/components/legacy/Markdown/demos/accordion.py
+++ b/docs/components/legacy/Markdown/demos/accordion.py
@@ -1,8 +1,9 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Markdown("""
 <accordion title="Using tool">
 
diff --git a/docs/components/legacy/Markdown/demos/basic.py b/docs/components/legacy/Markdown/demos/basic.py
index 2c423e26..47324b82 100644
--- a/docs/components/legacy/Markdown/demos/basic.py
+++ b/docs/components/legacy/Markdown/demos/basic.py
@@ -1,8 +1,9 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Markdown(
         "This _example_ was **written** in [Markdown](https://en.wikipedia.org/wiki/Markdown)\n"
     )
diff --git a/docs/components/legacy/Markdown/demos/chart.py b/docs/components/legacy/Markdown/demos/chart.py
index e611b159..132a49c6 100644
--- a/docs/components/legacy/Markdown/demos/chart.py
+++ b/docs/components/legacy/Markdown/demos/chart.py
@@ -3,6 +3,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 # echarts options, see: https://echarts.apache.org/en/index.html
 option1 = {
@@ -21,7 +22,7 @@
     ],
 }
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Markdown(f"""
 Chart:
 <chart options='{json.dumps(option1)}'></chart>
diff --git a/docs/components/legacy/Markdown/demos/custom-tag.py b/docs/components/legacy/Markdown/demos/custom-tag.py
index 3a8dadd0..4798a611 100644
--- a/docs/components/legacy/Markdown/demos/custom-tag.py
+++ b/docs/components/legacy/Markdown/demos/custom-tag.py
@@ -1,8 +1,9 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Markdown(
         """
 custom tag:<custom-tag value="aaa"></custom-tag>
diff --git a/docs/components/legacy/Markdown/demos/custom-tag2.py b/docs/components/legacy/Markdown/demos/custom-tag2.py
index ecbcb487..427817d4 100644
--- a/docs/components/legacy/Markdown/demos/custom-tag2.py
+++ b/docs/components/legacy/Markdown/demos/custom-tag2.py
@@ -1,8 +1,9 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Markdown(
         """
 custom tag:<custom-tag value="aaa"></custom-tag>
diff --git a/docs/components/legacy/Markdown/demos/custom-tag3.py b/docs/components/legacy/Markdown/demos/custom-tag3.py
index c87a9e19..0c30dcdc 100644
--- a/docs/components/legacy/Markdown/demos/custom-tag3.py
+++ b/docs/components/legacy/Markdown/demos/custom-tag3.py
@@ -4,6 +4,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 options = ["a", "b", "c"]
 
@@ -16,7 +17,7 @@ def resolve_assets(relative_path):
 with open(resolve_assets("./custom_components/custom_select.js"), 'r') as f:
     custom_select_js = f.read()
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Markdown(value=f"""
 custom tag: <custom-select options='{json.dumps(options)}'></custom-select>
 """,
diff --git a/docs/components/legacy/Markdown/demos/custom-tag4.py b/docs/components/legacy/Markdown/demos/custom-tag4.py
index 4f8e8a81..bd8e7526 100644
--- a/docs/components/legacy/Markdown/demos/custom-tag4.py
+++ b/docs/components/legacy/Markdown/demos/custom-tag4.py
@@ -4,6 +4,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 options = ["a", "b", "c"]
 
@@ -22,7 +23,7 @@ def fn(data: gr.EventData):
     print("custom value", data._data)
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     md = mgr.Markdown(value=f"""
 custom tag: <custom-select options='{json.dumps(options)}'></custom-select>
 """,
diff --git a/docs/components/legacy/Markdown/demos/custom_tags/accordion/accordion-title.py b/docs/components/legacy/Markdown/demos/custom_tags/accordion/accordion-title.py
index 1b692f01..ee41359c 100644
--- a/docs/components/legacy/Markdown/demos/custom_tags/accordion/accordion-title.py
+++ b/docs/components/legacy/Markdown/demos/custom_tags/accordion/accordion-title.py
@@ -1,8 +1,9 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Markdown("""
 <accordion>
 
diff --git a/docs/components/legacy/Markdown/demos/custom_tags/accordion/basic.py b/docs/components/legacy/Markdown/demos/custom_tags/accordion/basic.py
index 724b9f5c..f11635e0 100644
--- a/docs/components/legacy/Markdown/demos/custom_tags/accordion/basic.py
+++ b/docs/components/legacy/Markdown/demos/custom_tags/accordion/basic.py
@@ -1,8 +1,9 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Markdown("""
 <accordion title="Using tool">
 
diff --git a/docs/components/legacy/Markdown/demos/custom_tags/chart/basic.py b/docs/components/legacy/Markdown/demos/custom_tags/chart/basic.py
index 53d5f776..a4d0b602 100644
--- a/docs/components/legacy/Markdown/demos/custom_tags/chart/basic.py
+++ b/docs/components/legacy/Markdown/demos/custom_tags/chart/basic.py
@@ -3,6 +3,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 # echarts options, see: https://echarts.apache.org/en/index.html
 option1 = {
@@ -75,7 +76,7 @@
     }]
 }
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     chatbot = mgr.Markdown(f"""<chart options='{json.dumps(option1)}'></chart>
 
 <chart options='{json.dumps(option2)}'></chart>
diff --git a/docs/components/legacy/Markdown/demos/custom_tags/select-box/basic.py b/docs/components/legacy/Markdown/demos/custom_tags/select-box/basic.py
index faa90914..db305d64 100644
--- a/docs/components/legacy/Markdown/demos/custom_tags/select-box/basic.py
+++ b/docs/components/legacy/Markdown/demos/custom_tags/select-box/basic.py
@@ -3,10 +3,11 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 options = [{"label": "A", "value": "a"}, "b", "c"]
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Markdown(
         f"""Single Select: <select-box options='{json.dumps(options)}' select-once></select-box>
 
diff --git a/docs/components/legacy/Markdown/demos/custom_tags/select-box/card_shape.py b/docs/components/legacy/Markdown/demos/custom_tags/select-box/card_shape.py
index 6142f959..76734dbf 100644
--- a/docs/components/legacy/Markdown/demos/custom_tags/select-box/card_shape.py
+++ b/docs/components/legacy/Markdown/demos/custom_tags/select-box/card_shape.py
@@ -4,6 +4,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 # Card shape supports setting `imgSrc` as the cover.
 options = [{
@@ -16,7 +17,7 @@
     "a"
 }, "b", "c", "d"]
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Markdown(
         f"""<select-box shape="card" options='{json.dumps(options)}' select-once equal-height></select-box>
 
diff --git a/docs/components/legacy/Markdown/demos/custom_tags/select-box/card_shape_width_auto.py b/docs/components/legacy/Markdown/demos/custom_tags/select-box/card_shape_width_auto.py
index 41e9f63b..d4519146 100644
--- a/docs/components/legacy/Markdown/demos/custom_tags/select-box/card_shape_width_auto.py
+++ b/docs/components/legacy/Markdown/demos/custom_tags/select-box/card_shape_width_auto.py
@@ -4,6 +4,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 # Card shape supports setting `imgSrc` as the cover.
 options = [{
@@ -16,7 +17,7 @@
     "a"
 }, "b", "c", "d"]
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Markdown(
         # item-width="auto"
         f"""
diff --git a/docs/components/legacy/Markdown/demos/custom_tags/select-box/python_events.py b/docs/components/legacy/Markdown/demos/custom_tags/select-box/python_events.py
index dd585e7a..5ec0c97f 100644
--- a/docs/components/legacy/Markdown/demos/custom_tags/select-box/python_events.py
+++ b/docs/components/legacy/Markdown/demos/custom_tags/select-box/python_events.py
@@ -3,6 +3,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 options = [{"label": "A", "value": "a"}, "b", "c"]
 
@@ -14,7 +15,7 @@ def fn(data: gr.EventData):
               )  # 'a' or 'b' or 'c', the value set in the options.
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     md = mgr.Markdown(
         f"<select-box options='{json.dumps(options)}' select-once></select-box>"
     )
diff --git a/docs/components/legacy/Markdown/demos/multimodal.py b/docs/components/legacy/Markdown/demos/multimodal.py
index c1504b3a..2c55bdd2 100644
--- a/docs/components/legacy/Markdown/demos/multimodal.py
+++ b/docs/components/legacy/Markdown/demos/multimodal.py
@@ -3,6 +3,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 
 def resolve_assets(relative_path):
@@ -10,7 +11,7 @@ def resolve_assets(relative_path):
                         relative_path)
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Markdown(f"""
 Image
 
diff --git a/docs/components/legacy/Markdown/demos/select-box.py b/docs/components/legacy/Markdown/demos/select-box.py
index 5aca51aa..bca3ec34 100644
--- a/docs/components/legacy/Markdown/demos/select-box.py
+++ b/docs/components/legacy/Markdown/demos/select-box.py
@@ -3,11 +3,12 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 # `label` will display on the page, and `value` is the actual selected value.
 options = [{"label": "A", "value": "a"}, "b", "c"]
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Markdown(f"""
 Single Select: <select-box options='{json.dumps(options)}' select-once></select-box>
 
diff --git a/docs/components/legacy/MultimodalInput/demos/basic.py b/docs/components/legacy/MultimodalInput/demos/basic.py
index 67d7470d..045041b7 100644
--- a/docs/components/legacy/MultimodalInput/demos/basic.py
+++ b/docs/components/legacy/MultimodalInput/demos/basic.py
@@ -1,6 +1,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 
 def fn(value):
@@ -8,7 +9,7 @@ def fn(value):
     print(value.text, value.files)
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     input = mgr.MultimodalInput()
     input.change(fn=fn, inputs=[input])
 
diff --git a/docs/components/legacy/MultimodalInput/demos/config_buttons.py b/docs/components/legacy/MultimodalInput/demos/config_buttons.py
index 493c59a6..9b0a5fb7 100644
--- a/docs/components/legacy/MultimodalInput/demos/config_buttons.py
+++ b/docs/components/legacy/MultimodalInput/demos/config_buttons.py
@@ -1,13 +1,14 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 
 def fn(value):
     print(value.text, value.files)
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     input = mgr.MultimodalInput(upload_button_props=dict(variant="primary"),
                                 submit_button_props=dict(visible=False))
     input.change(fn=fn, inputs=[input])
diff --git a/docs/components/legacy/MultimodalInput/demos/upload_sources.py b/docs/components/legacy/MultimodalInput/demos/upload_sources.py
index 2e9b5476..a79b148f 100644
--- a/docs/components/legacy/MultimodalInput/demos/upload_sources.py
+++ b/docs/components/legacy/MultimodalInput/demos/upload_sources.py
@@ -1,13 +1,14 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 
 def fn(value):
     print(value.text, value.files)
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     input = mgr.MultimodalInput(sources=["upload", "microphone", "webcam"])
     input.change(fn=fn, inputs=[input])
 
diff --git a/docs/components/legacy/MultimodalInput/demos/with_chatbot.py b/docs/components/legacy/MultimodalInput/demos/with_chatbot.py
index 6ad7784a..7b94a84b 100644
--- a/docs/components/legacy/MultimodalInput/demos/with_chatbot.py
+++ b/docs/components/legacy/MultimodalInput/demos/with_chatbot.py
@@ -3,6 +3,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 
 def fn(input, chatbot):
@@ -24,7 +25,7 @@ def flushed():
     return mgr.MultimodalInput(interactive=True)
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     user_chatbot = mgr.Chatbot()
     user_input = mgr.MultimodalInput()
     user_input.submit(fn=fn,
diff --git a/docs/components/legacy/WaterfallGallery/demos/basic.py b/docs/components/legacy/WaterfallGallery/demos/basic.py
index 7f1c2760..1ec2e5cb 100644
--- a/docs/components/legacy/WaterfallGallery/demos/basic.py
+++ b/docs/components/legacy/WaterfallGallery/demos/basic.py
@@ -3,6 +3,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 
 def resolve_assets(relative_path):
@@ -10,7 +11,7 @@ def resolve_assets(relative_path):
                         relative_path)
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.WaterfallGallery(
         value=[
             resolve_assets('modelscope.svg'),
diff --git a/docs/components/legacy/WaterfallGallery/demos/like_click_feedback.py b/docs/components/legacy/WaterfallGallery/demos/like_click_feedback.py
index 10e2c37d..ab43c528 100644
--- a/docs/components/legacy/WaterfallGallery/demos/like_click_feedback.py
+++ b/docs/components/legacy/WaterfallGallery/demos/like_click_feedback.py
@@ -3,6 +3,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 
 def resolve_assets(relative_path):
@@ -14,7 +15,7 @@ def fn(data: gr.EventData):
     print(data._data)
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     gallery = mgr.WaterfallGallery(
         value=[
             resolve_assets('modelscope.svg'),
diff --git a/docs/components/legacy/WaterfallGallery/demos/load_more.py b/docs/components/legacy/WaterfallGallery/demos/load_more.py
index a6a23e78..2d5179cc 100644
--- a/docs/components/legacy/WaterfallGallery/demos/load_more.py
+++ b/docs/components/legacy/WaterfallGallery/demos/load_more.py
@@ -4,6 +4,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 
 def resolve_assets(relative_path):
@@ -23,7 +24,7 @@ def load_more(_gallery):
     return gr.update(value=_gallery, has_more=has_more)
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     gallery = mgr.WaterfallGallery(
         value=[
             resolve_assets('modelscope.svg'),
diff --git a/docs/components/legacy/WaterfallGallery/demos/responsive_columns.py b/docs/components/legacy/WaterfallGallery/demos/responsive_columns.py
index f6bded30..12d25d07 100644
--- a/docs/components/legacy/WaterfallGallery/demos/responsive_columns.py
+++ b/docs/components/legacy/WaterfallGallery/demos/responsive_columns.py
@@ -3,6 +3,7 @@
 import gradio as gr
 
 import modelscope_studio as mgr
+import modelscope_studio.components.base as ms
 
 
 def resolve_assets(relative_path):
@@ -14,7 +15,7 @@ def fn():
     return gr.update(columns={"xs": 2, "lg": 3})
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     gallery = mgr.WaterfallGallery(
         value=[
             resolve_assets('modelscope.svg'),

From 2b7a2c13238545196d57cff6b1a4e169072f4404 Mon Sep 17 00:00:00 2001
From: Col0ring <1561999073@qq.com>
Date: Mon, 23 Dec 2024 10:42:23 +0800
Subject: [PATCH 3/3] fix: layout compatibility

---
 .changeset/soft-goats-thank.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/soft-goats-thank.md

diff --git a/.changeset/soft-goats-thank.md b/.changeset/soft-goats-thank.md
new file mode 100644
index 00000000..0cacd28e
--- /dev/null
+++ b/.changeset/soft-goats-thank.md
@@ -0,0 +1,6 @@
+---
+'@modelscope-studio/antd': patch
+'modelscope_studio': patch
+---
+
+fix: layout compatibility