fix: layout compatibility

.changeset/soft-goats-thank.md

@@ -0,0 +1,6 @@
+---
+'@modelscope-studio/antd': patch
+'modelscope_studio': patch
+---
+
+fix: layout compatibility

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
 

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
 

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

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`?"""
             )
 

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

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=[

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,

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

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,

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,

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,

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

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,

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,

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

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

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

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

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

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>

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>

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>

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>
 """,