docs: update legacy demo

components/legacy/Chatbot/demos/accordion.py

@@ -3,6 +3,7 @@ import os
 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 @@ Observation: <result>「Any md content will be displayed in the drop-down box wh
     ],
 ]
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Chatbot(
         value=conversation,
         llm_thinking_presets=[qwen()],

components/legacy/Chatbot/demos/basic.py

@@ -4,6 +4,7 @@ import time
 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=[

components/legacy/Chatbot/demos/chart.py

@@ -3,6 +3,7 @@ import json
 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 @@ Chart:
     ],
 ]
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Chatbot(
         value=conversation,
         flushing=False,

components/legacy/Chatbot/demos/message_config.py

@@ -3,6 +3,7 @@ import time
 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])

components/legacy/Chatbot/demos/multi_bots.py

@@ -4,6 +4,7 @@ import time
 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,

components/legacy/Chatbot/demos/multimodal.py

@@ -3,6 +3,7 @@ import os
 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 @@ Audio
     ],
 ]
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Chatbot(
         value=conversation,
         height=600,

components/legacy/Chatbot/demos/select-box.py

@@ -3,6 +3,7 @@ import json
 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,

components/legacy/Flow/demos/basic.py

@@ -4,6 +4,7 @@ import os
 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])
 

components/legacy/Flow/demos/component_options.py

@@ -4,6 +4,7 @@ import os
 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,

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 @@ data = {
     ]
 }
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     flow = mgr.Flow(value=data,
                     schema=schema,
                     custom_components=custom_components,

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

components/legacy/Lifecycle/demos/language_adaptation.py

@@ -3,6 +3,7 @@ import time
 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"])

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

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

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

components/legacy/Markdown/demos/chart.py

@@ -3,6 +3,7 @@ import json
 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 @@ option1 = {
     ],
 }
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Markdown(f"""
 Chart:
 <chart options='{json.dumps(option1)}'></chart>

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>

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>

components/legacy/Markdown/demos/custom-tag3.py

@@ -4,6 +4,7 @@ import os
 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>
 """,

components/legacy/Markdown/demos/custom-tag4.py

@@ -4,6 +4,7 @@ import os
 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>
 """,

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>
 

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

components/legacy/Markdown/demos/custom_tags/chart/basic.py

@@ -3,6 +3,7 @@ import json
 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 @@ option2 = {
     }]
 }
 
-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>

components/legacy/Markdown/demos/custom_tags/select-box/basic.py

@@ -3,10 +3,11 @@ import json
 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>
 

components/legacy/Markdown/demos/custom_tags/select-box/card_shape.py

@@ -4,6 +4,7 @@ import os
 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 @@ options = [{
     "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>
 

components/legacy/Markdown/demos/custom_tags/select-box/card_shape_width_auto.py

@@ -4,6 +4,7 @@ import os
 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 @@ options = [{
     "a"
 }, "b", "c", "d"]
 
-with gr.Blocks() as demo:
+with gr.Blocks() as demo, ms.Application():
     mgr.Markdown(
         # item-width="auto"
         f"""

components/legacy/Markdown/demos/custom_tags/select-box/python_events.py

@@ -3,6 +3,7 @@ import json
 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>"
     )

components/legacy/Markdown/demos/multimodal.py

@@ -3,6 +3,7 @@ import os
 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
 

components/legacy/Markdown/demos/select-box.py

@@ -3,11 +3,12 @@ import json
 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>
 

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

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

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

components/legacy/MultimodalInput/demos/with_chatbot.py

@@ -3,6 +3,7 @@ import time
 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,

components/legacy/WaterfallGallery/demos/basic.py

@@ -3,6 +3,7 @@ import os
 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'),

components/legacy/WaterfallGallery/demos/like_click_feedback.py

@@ -3,6 +3,7 @@ import os
 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'),

components/legacy/WaterfallGallery/demos/load_more.py

@@ -4,6 +4,7 @@ import time
 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'),

components/legacy/WaterfallGallery/demos/responsive_columns.py

@@ -3,6 +3,7 @@ import os
 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'),

requirements.txt

@@ -1 +1 @@
-modelscope_studio==1.0.0
+modelscope_studio==1.0.1

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "modelscope_studio"
-version = "1.0.0"
+version = "1.0.1"
 description = "A third-party component library based on Gradio."
 readme = "README.md"
 license = "Apache-2.0"