diff --git a/.changeset/chilly-lemons-pretend.md b/.changeset/chilly-lemons-pretend.md
new file mode 100644
index 00000000..30e6c1be
--- /dev/null
+++ b/.changeset/chilly-lemons-pretend.md
@@ -0,0 +1,17 @@
+---
+'@modelscope-studio/legacy-waterfall-gallery': patch
+'@modelscope-studio/legacy-multimodal-input': patch
+'@modelscope-studio/legacy-lifecycle': patch
+'@modelscope-studio/legacy-markdown': patch
+'@modelscope-studio/legacy-compiled': patch
+'@modelscope-studio/legacy-chatbot': patch
+'@modelscope-studio/legacy-flow': patch
+'@modelscope-studio/lint-config': patch
+'@modelscope-studio/changelog': patch
+'@modelscope-studio/antd': patch
+'@modelscope-studio/base': patch
+'@modelscope-studio/frontend': patch
+'modelscope_studio': patch
+---
+
+feat: add AutoLoading
diff --git a/docs/components/base/auto_loading/README-zh_CN.md b/docs/components/base/auto_loading/README-zh_CN.md
index cfc5f7c8..d775c819 100644
--- a/docs/components/base/auto_loading/README-zh_CN.md
+++ b/docs/components/base/auto_loading/README-zh_CN.md
@@ -2,6 +2,8 @@
在`Gradio`前端发送请求时自动为被包裹的内容添加加载动画。该组件会自动收集子组件的加载状态，建议至少在全局使用一次此组件，以显示兜底的加载反馈。
+> **注：** 如果有多个嵌套的`AutoLoading`组件，则只有最内层的`AutoLoading`能收集到子组件的加载状态并展示加载动画。
+
在`Gradio`中，前端到服务端的请求一共有 4 种状态：
- `pending`：此时前端发出的请求还没有收到服务端的响应。
@@ -20,6 +22,8 @@
+
+
## API
| 属性 | 类型 | 默认值 | 描述 |
diff --git a/docs/components/base/auto_loading/README.md b/docs/components/base/auto_loading/README.md
index cfc5f7c8..6e5be586 100644
--- a/docs/components/base/auto_loading/README.md
+++ b/docs/components/base/auto_loading/README.md
@@ -1,31 +1,35 @@
-# AutoLoading 自动加载
+# AutoLoading
-在`Gradio`前端发送请求时自动为被包裹的内容添加加载动画。该组件会自动收集子组件的加载状态，建议至少在全局使用一次此组件，以显示兜底的加载反馈。
+Automatically adds loading animations to the wrapped content when requests are sent from the `Gradio` frontend. This component will automatically collect the loading states of child components, it's recommended to use this component at least once globally to provide fallback loading feedback.
-在`Gradio`中，前端到服务端的请求一共有 4 种状态：
+> **Note:** If there are multiple nested `AutoLoading` components, only the innermost `AutoLoading` can collect the loading states of child components and display the loading animation.
-- `pending`：此时前端发出的请求还没有收到服务端的响应。
-- `generating`：此时前端发出的请求已经收到了响应，但是服务端还没有完成所有内容返回（该状态并不是必定发生的，只有当服务端的处理函数使用`yield`返回值时才会存在）。
-- `completed`：服务端返回了所有内容，本次请求结束。
-- `error`：本次请求发生错误。
+In `Gradio`, there are 4 states for requests from the frontend to the backend:
-默认情况下，`AutoLoading`组件会：
+- `pending`: The frontend has sent a request but has not yet received a response from the backend.
+- `generating`: The frontend has received a response, but the backend has not completed sending all content (this state does not necessarily occur and only exists when the backend's processing function uses `yield` to return values).
+- `completed`: The backend has returned all content, and the request has ended.
+- `error`: An error occurred during the request.
-- 在请求状态为`pending`时添加加载动画。
-- 在请求状态为`generating`时结束加载动画，此时用户可以手动控制应用的加载效果，您也可以通过设置`generating=True`来继续展示动画。
-- 在请求状态为`completed`时结束加载动画。
-- 在请求状态为`error`时结束加载动画，您可以通过设置`show_error=True`来为用户展示错误信息（该信息会在页面居中显示）。
+By default, the `AutoLoading` component will:
-## 示例
+- Add a loading animation when the request status is `pending`.
+- End the loading animation when the request status is `generating`. At this point, users can manually control the application's loading effect, or you can set `generating=True` to continue displaying the animation.
+- End the loading animation when the request status is `completed`.
+- End the loading animation when the request status is `error`. You can set `show_error=True` to display error information to the user (this information will be centered on the page).
+
+## Examples
+
+
## API
-| 属性 | 类型 | 默认值 | 描述 |
-| ------------ | ---- | ------ | ---------------------------------------------------------------------------------------- |
-| generating | bool | False | 是否包含对`generating`状态的处理 |
-| show_error | bool | True | 是否显示错误信息 |
-| show_mask | bool | True | 是否显示遮罩 |
-| show_timer | bool | True | 是否显示计时器 |
-| loading_text | str | None | 加载中文案，默认不填写使用 `Gradio` 的加载文案显示（包括加载时间、当前用户的排队队列等） |
+| Attribute | Type | Default Value | Description |
+| ------------ | ---- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| generating | bool | False | Whether to include handling of the `generating` state |
+| show_error | bool | True | Whether to display error information |
+| show_mask | bool | True | Whether to display the mask |
+| show_timer | bool | True | Whether to display the timer |
+| loading_text | str | None | Loading text, if not filled, it will use the loading text provided by `Gradio` (including loading time, current user's queue position, etc.) |
diff --git a/docs/components/base/auto_loading/demos/basic.py b/docs/components/base/auto_loading/demos/basic.py
index 5014b1de..4026edfb 100644
--- a/docs/components/base/auto_loading/demos/basic.py
+++ b/docs/components/base/auto_loading/demos/basic.py
@@ -9,16 +9,16 @@
def click():
time.sleep(2)
yield gr.update(value="Hello")
- time.sleep(2)
- yield gr.update(value="Hello World")
with gr.Blocks() as demo:
with ms.Application():
- with ms.AutoLoading(generating=True, show_mask=True):
- textarea = antd.Input.Textarea()
- btn = antd.Button("Click")
- btn.click(click, outputs=[textarea])
+ with antd.ConfigProvider():
+ with ms.AutoLoading():
+ textarea = antd.Input.Textarea()
+
+ btn = antd.Button("Click")
+ btn.click(click, outputs=[textarea])
if __name__ == "__main__":
demo.queue().launch()
diff --git a/docs/components/base/auto_loading/demos/nested.py b/docs/components/base/auto_loading/demos/nested.py
new file mode 100644
index 00000000..c4bab53e
--- /dev/null
+++ b/docs/components/base/auto_loading/demos/nested.py
@@ -0,0 +1,43 @@
+import time
+
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def click():
+ time.sleep(2)
+ yield gr.update(value="Hello"), gr.update(value="Hello")
+ time.sleep(2)
+ yield gr.update(value="Hello World"), gr.update(value="Hello World")
+
+
+def click2():
+ time.sleep(2)
+ yield gr.update(value="Hello")
+
+
+with gr.Blocks() as demo:
+ with ms.Application():
+ with antd.ConfigProvider():
+ with ms.AutoLoading():
+ with antd.Space(direction="vertical",
+ elem_style=dict(width="100%")):
+ with ms.AutoLoading(generating=True):
+ textarea = antd.Input.Textarea()
+
+ with ms.AutoLoading(show_mask=True):
+ textarea2 = antd.Input.Textarea()
+
+ textarea3 = antd.Input.Textarea()
+
+ with antd.Space():
+ btn = antd.Button("Click")
+ btn2 = antd.Button("Click2")
+
+ btn.click(click, outputs=[textarea, textarea2])
+ btn2.click(click2, outputs=[textarea3])
+
+if __name__ == "__main__":
+ demo.queue().launch()