docs: update

docs/app.py

@@ -41,11 +41,46 @@ def get_docs(file_path: str, type: Literal["antd", "base"]):
     "label": "Overview",
     "key": "overview"
 }, {
-    "label": "Core",
-    "type": "group",
+    "label":
+    "Core",
+    "type":
+    "group",
     "children": [{
         "label": "Application",
         "key": "application"
+    }, {
+        "label": "Slot",
+        "key": "slot"
+    }, {
+        "label": "Fragment",
+        "key": "fragment"
+    }]
+}, {
+    "label":
+    "Layout",
+    "type":
+    "group",
+    "children": [{
+        "label": "Div",
+        "key": "div"
+    }, {
+        "label": "Span",
+        "key": "span"
+    }, {
+        "label": "Text",
+        "key": "text"
+    }]
+}, {
+    "label":
+    "Flow-Control",
+    "type":
+    "group",
+    "children": [{
+        "label": "Each",
+        "key": "each"
+    }, {
+        "label": "Filter",
+        "key": "filter"
     }]
 }]
 

docs/components/antd/overview/README-zh_CN.md

@@ -1,6 +1,6 @@
 # 概览
 
-`modelscope_studio`集成了 [Ant Design](https://ant.design/components/icon/) 的组件，并支持大部分的组件属性，您只需要引入`antd`模块即可直接使用。
+`modelscope_studio`集成了 [Ant Design](https://ant.design/) 的组件，并支持大部分的组件属性，您只需要引入`antd`模块即可直接使用。
 
 ```python
 import modelscope_studio.components.antd as antd

docs/components/antd/overview/README.md

@@ -1,40 +1,40 @@
-# 概览
+# Overview
 
-`modelscope_studio`集成了 [Ant Design](https://ant.design/components/icon/) 的组件，并支持大部分的组件属性，您只需要引入`antd`模块即可直接使用。
+`modelscope_studio` integrates [Ant Design](https://ant.design/) components and supports most component properties. You can use them directly by importing the `antd` module.
 
 ```python
 import modelscope_studio.components.antd as antd
 ```
 
-## 快速开始
+## Quick Start
 
 <demo name="quick_start"></demo>
 
-注意：其中`ms.Application`与`antd.ConfigProvider`是必须的。
+Note: Both `ms.Application` and `antd.ConfigProvider` are required.
 
-- `Application` 包含了`modelscope_studio`中所有的组件依赖，请确保`modelscope_studio`所有导出的组件都被其包裹，否则页面将会无法成功预览。
-- `ConfigProvider` 与 Ant Design 中的功能一致，除此之外，我们还加了一些额外的适配来兼容 Gradio 的样式。因此，为了保证页面样式正常，所有的`antd`组件需要包裹在该组件下。
+- `Application` contains all component dependencies in `modelscope_studio`. Please ensure that all components exported from `modelscope_studio` are wrapped by it, otherwise the page will not be successfully previewed.
+- `ConfigProvider` functions the same as in Ant Design. Additionally, we have added some extra adaptations to be compatible with Gradio's styles. Therefore, to ensure normal page styling, all `antd` components need to be wrapped within this component.
 
-## 属性限制
+## Property Limitations
 
-由于 Python 的类型限制，一些组件属性的支持形式有所不同。
+Due to Python's type restrictions, the support for some component properties differs.
 
-### 事件
+### Events
 
-在`antd`中，所有以`onXxx`形式绑定的事件，均改为了`gradio`的事件绑定形式，如`onClick`、`onChange`等。如果您想要获取事件参数，也需要绑定`gr.EventData`，所有的事件参数都通过数组的形式保存在`e._data["payload"]`中。
+In `antd`, all events bound in the form of `onXxx` have been changed to Gradio's event binding form, such as `onClick`, `onChange`, etc. If you want to get event parameters, you also need to bind `gr.EventData`. All event parameters are stored in the form of an array in `e._data["payload"]`.
 
 <demo name="limit_event"></demo>
 
 ### ReactNode
 
-在 Python 中无法直接将某个组件作为参数，因此我们提供了插槽机制，您可以使用`ms.Slot`来包裹需要被渲染的模块。
+In Python, it's not possible to directly pass a component as a parameter, so we provide a slot mechanism. You can use `ms.Slot` to wrap the module that needs to be rendered.
 
 <demo name="limit_react_node"></demo>
 
-**注：**
+**Note:**
 
-- 您可以通过查看组件的`SLOTS`属性获取所有支持的插槽。
-- 如果您只想渲染一段字符串或数字，您依然可以直接将其作为组件的属性传入，无需使用`ms.Slot`。下面两种写法效果是一样的，并且更推荐直接作为组件属性传入：
+- You can view the `SLOTS` property of the component to get all supported slots.
+- If you only want to render a string or number, you can still pass it directly as a component property without using `ms.Slot`. The following two ways of writing have the same effect, and it's more recommended to pass it directly as a component property:
 
   ```python
   antd.Card(title="Card Title")
@@ -44,30 +44,30 @@ import modelscope_studio.components.antd as antd
       ms.Text("Card Title")
   ```
 
-### 普通函数（(...args) => {}）
+### Regular Functions ((...args) => {})
 
-为了支持在 Python 直接传入 Javascript 函数，我们将其改为了`str`类型。因此，您只需要传递普通的函数字符串即可，它会在前端被自动编译为 Javascript 函数。
+To support passing JavaScript functions directly in Python, we have changed them to `str` type. Therefore, you only need to pass a regular function string, and it will be automatically compiled into a JavaScript function on the frontend.
 
 <demo name="limit_function"></demo>
 
-我们在全局注入了事件通知对象，您可以通过在函数中调用`window.ms_globals.dispatch`来主动向 Python 端发送事件，在 Python 端可以通过`ms.Application.custom`事件接收。
+We have injected a global event notification object. You can actively send events to the Python side by calling `window.ms_globals.dispatch` in the function, which can be received on the Python side through the `ms.Application.custom` event.
 
 <demo name="limit_function_with_event"></demo>
 
-### 返回 ReactNode 的函数 ((...args) => ReactNode)
+### Functions Returning ReactNode ((...args) => ReactNode)
 
-当您的 Javascript 函数返回值为 ReactNode 时，我们提供了两种处理方式：
+When your JavaScript function returns a ReactNode, we provide two handling methods:
 
-1. 将其当做普通的 ReactNode 值，继续使用`ms.Slot`来渲染模块，在此基础上，`ms.Slot`还支持传入`params_mapping`参数，该参数同样接收一个 Javascript 函数字符串，它可以将函数的参数映射为当前`slot`环境的上下文（具体请参考`ms.Each`）。
+1. Treat it as a regular ReactNode value and continue using `ms.Slot` to render the module. Additionally, `ms.Slot` supports passing a `params_mapping` parameter, which also accepts a JavaScript function string. It can map the function's parameters to the context of the current `slot` environment (refer to `ms.Each` for details).
 
 <demo name="limit_react_node_function_by_slot"></demo>
 
-2. 将其当做普通函数，通过`window.ms_globals.React`与`window.ms_globals.antd`等全局变量在前端生成 ReactNode（注意此时不能使用 jsx，需要使用 `React.createElement`）。
+2. Treat it as a regular function and generate ReactNode on the frontend using global variables like `window.ms_globals.React` and `window.ms_globals.antd` (note that JSX cannot be used here, you need to use `React.createElement`).
 
 <demo name="limit_react_node_function_by_function"></demo>
 
-## 集成其他 Gradio 组件
+## Integrating Other Gradio Components
 
-某些组件的插槽可能只支持`modelscope_studio`中的组件，如果您想要支持其他的 Gradio 组件，您需要使用`Fragment`来将其包裹。
+Some component slots may only support components from `modelscope_studio`. If you want to support other Gradio components, you need to wrap them with `Fragment`.
 
 <demo name="integrate_other_components"></demo>

docs/components/base/application/README-zh_CN.md

@@ -1,7 +1,20 @@
-# Button
+# Application
 
-See [Ant Design](https://ant.design/components/button/) for more information.
+应用的根组件，该组件包含了所有`modelscope_studio`的组件依赖，需要确保所有从`modelscope_studio`导出的组件都被其包裹，否则页面将会无法成功预览。
+
+该组件还可以监听用户页面的生命周期，并获取当前用户的环境信息，您可以
+
+- 获取当前用户的语言、页面主题、user agent 和屏幕状态。
+- 监听页面行为并触发相应事件（页面加载、尺寸变化、页面关闭等）。
+
+另外，该组件还提供了`custom`事件，您可以通过在任意 Javascript 函数中调用`window.ms_globals.dispatch`主动向 Python 端发送事件，在 Python 端可以通过`ms.Application.custom`事件接收。
 
 ## Examples
 
 <demo name="basic"></demo>
+
+<demo name="language_adaptation" title="自动适配用户语言环境"></demo>
+
+<demo name="theme_adaptation" title="根据用户界面主题返回不同权重内容"></demo>
+
+<demo name="custom_event" title="发送自定义事件"></demo>

docs/components/base/application/README.md

@@ -1,7 +1,20 @@
 # Application
 
-A Provider for all components of modelscope_studio.
+The root component of the application, this component contains all the component dependencies of `modelscope_studio`. It is necessary to ensure that all components exported from `modelscope_studio` are wrapped by it, otherwise the page will not be successfully previewed.
+
+In addition, this component can also listen to the lifecycle of the user's page and obtain the current user's environment information, you can:
+
+- Obtain the current user's language, page theme, user agent, and screen status.
+- Listen to page behaviors and trigger corresponding events (page loading, size changes, page closing, etc.).
+
+In addition, this component provides the `custom` event, you can send events to the Python side by calling `window.ms_globals.dispatch` in any Javascript function, and receive the events on the Python side through the `ms.Application.custom` event.
 
 ## Examples
 
 <demo name="basic"></demo>
+
+<demo name="language_adaptation" title="Automatically adapt to user language environment"></demo>
+
+<demo name="theme_adaptation" title="Return different weighted content based on user interface theme"></demo>
+
+<demo name="custom_event" title="Send custom events"></demo>

docs/components/base/application/demos/custom_event.py

@@ -0,0 +1,20 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def on_custom(e: gr.EventData):
+    print(e)
+
+
+with gr.Blocks() as demo:
+    with ms.Application() as app:
+        with antd.ConfigProvider():
+            gr.HTML(
+                """<button onclick="window.ms_globals.dispatch({type: 'custom', data: 'test'})">Click me</button>"""
+            )
+
+    app.custom(on_custom)
+if __name__ == "__main__":
+    demo.queue().launch()

docs/components/base/application/demos/language_adaptation.py

@@ -0,0 +1,39 @@
+import time
+
+import gradio as gr
+
+import modelscope_studio.components.base as ms
+
+messages = {
+    'en': {
+        "hello": "Hello"
+    },
+    'en-US': {
+        "hello": "Hello"
+    },
+    'zh-CN': {
+        "hello": "你好"
+    }
+}
+
+default_lang = "en"
+
+
+def mount(e: gr.EventData, _state):
+    lang = e._data["language"]
+    if (lang in messages):
+        _state["current_lang"] = lang
+    yield 'Switch Language...', _state
+    time.sleep(2)
+    yield messages[lang]["hello"], _state
+
+
+with gr.Blocks() as demo:
+    with ms.Application() as app:
+        state = gr.State({"current_lang": default_lang})
+        markdown = gr.Markdown(value=messages[default_lang]["hello"])
+
+        app.mount(fn=mount, inputs=[state], outputs=[markdown, state])
+
+if __name__ == "__main__":
+    demo.queue().launch()

docs/components/base/application/demos/theme_adaptation.py

@@ -0,0 +1,34 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def mount(e: gr.EventData, _state):
+    _state["theme"] = e._data["theme"]
+    yield _state
+
+
+def fn(_state):
+    theme = _state["theme"]
+    color = '000/fff' if theme == 'dark' else 'fff/000'
+    yield gr.update(
+        value=f"https://dummyimage.com/200x100/{color}.png&text={theme}")
+
+
+with gr.Blocks() as demo:
+    state = gr.State({"theme": "light"})
+    with ms.Application() as app:
+        with antd.ConfigProvider():
+            btn = antd.Button(
+                "Run",
+                type="primary",
+                block=True,
+            )
+            image = antd.Image()
+
+            app.mount(fn=mount, inputs=[state], outputs=[state])
+            btn.click(fn=fn, inputs=[state], outputs=[image])
+
+if __name__ == "__main__":
+    demo.queue().launch()

docs/components/base/overview/README-zh_CN.md

@@ -1,7 +1,54 @@
-# Button
+# ModelScope Studio
 
-See [Ant Design](https://ant.design/components/button/) for more information.
+<p align="center">
+    <img src="https://modelscope.oss-cn-beijing.aliyuncs.com/modelscope.gif" height="60" style="vertical-align: middle;"/>
+    <span style="font-size: 30px; vertical-align: middle;">
+    ✖️
+    </span>
+    <img src="https://github.com/gradio-app/gradio/raw/main/readme_files/gradio.svg" height="60" style="vertical-align: middle;">
+<p>
 
-## Examples
+<p align="center">
+<a href="https://github.com/modelscope/modelscope-studio">GitHub</a> | 🤖 <a href="https://modelscope.cn/studios/modelscope/modelscope-studio/summary">ModelScope Studio</a> ｜ 🤗 <a href="https://huggingface.co/spaces/modelscope/modelscope-studio">Hugging Face Space</a>
 
-<demo name="basic"></demo>
+`modelscope_studio`是一个基于 Gradio 的三方组件库，在原有 Gradio 组件的基础上延伸了更多的组件和使用形式。
+
+目前支持的 UI 库：
+
+- [Ant Design](https://ant.design/)
+
+## 何时使用
+
+比起 Gradio 自身的组件，`modelscope_studio`更加注重页面布局和组件的灵活性，如果您想要构建更漂亮的用户界面，我们非常推荐您使用`modelscope_studio`。然而，当您的应用需要 Gradio 在 Python 端更多地处理内置数据时，`modelscope_studio`可能不是最好的选择，但仍然可以使用`modelscope_studio`的布局和展示组件来帮助您构建页面。
+
+## 依赖
+
+- Gradio >= 4.0
+
+## 安装
+
+> 目前`modelscope_studio` 1.0 版本仍在开发中，您可以通过安装`beta`版本提前使用。
+
+```sh
+pip install modelscope_studio~=1.0.0b
+```
+
+## 示例
+
+<demo name="example"></demo>
+
+## 迁移到 1.0
+
+如果您在之前使用了`modelscope_studio`的组件，并且想要在新版本中继续使用。不需要对原有组件做任何修改，只需要在外层引入`ms.Application`即可。
+
+```python
+import gradio as gr
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.legacy as mgr
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        mgr.Chatbot()
+
+demo.launch()
+```