feat: Each and context value handler

backend/modelscope_studio/components/base/filter/__init__.py

@@ -11,8 +11,8 @@ class ModelScopeFilter(ModelScopeLayoutComponent):
     EVENTS = []
 
     def __init__(self,
-                 *,
                  params_mapping: str | None = None,
+                 *,
                  as_item: str | None = None,
                  _internal: None = None,
                  visible: bool = True,

docs/app.py

@@ -1,12 +1,18 @@
 import os
 from typing import Literal
 
+from helper.env import is_modelscope_studio
 from helper.Site import Site
+from legacy_app import legacy_demo
 
 import modelscope_studio.components.antd as antd
 import modelscope_studio.components.base as ms
 
-# from legacy_app import legacy_demo
+
+def get_text(text: str, cn_text: str):
+    if is_modelscope_studio:
+        return cn_text
+    return text
 
 
 def get_docs(file_path: str, type: Literal["antd", "base"]):
@@ -38,11 +44,11 @@ def get_docs(file_path: str, type: Literal["antd", "base"]):
 default_active_tab = "base"
 
 base_menu_items = [{
-    "label": "Overview",
+    "label": get_text("Overview", "概览"),
     "key": "overview"
 }, {
     "label":
-    "Core",
+    get_text("Core", "核心"),
     "type":
     "group",
     "children": [{
@@ -57,7 +63,7 @@ def get_docs(file_path: str, type: Literal["antd", "base"]):
     }]
 }, {
     "label":
-    "Layout",
+    get_text("Layout", "布局"),
     "type":
     "group",
     "children": [{
@@ -72,7 +78,7 @@ def get_docs(file_path: str, type: Literal["antd", "base"]):
     }]
 }, {
     "label":
-    "Flow-Control",
+    get_text("Render", "渲染"),
     "type":
     "group",
     "children": [{
@@ -85,31 +91,33 @@ def get_docs(file_path: str, type: Literal["antd", "base"]):
 }]
 
 antd_menu_items = [{
-    "label": "Overview",
+    "label": get_text("Overview", "概览"),
     "key": "overview"
 }, {
     "label":
-    "General",
+    get_text("General", "通用"),
     "type":
     "group",
     "children": [{
-        "label": "Button",
+        "label": get_text("Button", "Button 按钮"),
         "key": "button"
     }, {
-        "label": "FloatButton",
+        "label": get_text("FloatButton", "FloatButton 悬浮按钮"),
         "key": "float_button"
     }, {
-        "label": "Icon",
+        "label": get_text("Icon", "图标"),
         "key": "icon"
     }, {
-        "label": "Typography",
+        "label": get_text("Typography", "Typography 排版"),
         "key": "typography"
     }]
 }, {
-    "label": "Layout",
-    "type": "group",
+    "label":
+    get_text("Layout", "布局"),
+    "type":
+    "group",
     "children": [{
-        "label": "Divider",
+        "label": get_text("Divider", "Divider 分割线"),
         "key": "divider"
     }]
 }]
@@ -132,31 +140,31 @@ def more_components():
     with antd.Button(type="link",
                      href="https://ant.design/components/overview/",
                      href_target="_blank"):
-        ms.Text("More Components")
+        ms.Text(get_text("More Components", "更多组件"))
 
         with ms.Slot("icon"):
             antd.Icon("ExportOutlined")
 
 
 tabs = [
     {
-        "label": "Base",
+        "label": get_text("Base Components", "基础组件"),
         "key": "base",
         "default_active_key": "overview",
         "menus": base_menu_items
     },
     {
-        "label": "Antd",
+        "label": get_text("Antd Components", "Antd 组件"),
         "key": "antd",
         "default_active_key": "overview",
         "menus": antd_menu_items,
         "extra_menu_footer": more_components
     },
-    # {
-    #     "label": "Legacy",
-    #     "key": "legacy",
-    #     "content": legacy_demo
-    # },
+    {
+        "label": get_text("Version 0.x", "0.x 版本"),
+        "key": "legacy",
+        "content": legacy_demo
+    },
 ]
 
 site = Site(

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

@@ -9,7 +9,7 @@
 
 另外，该组件还提供了`custom`事件，您可以通过在任意 Javascript 函数中调用`window.ms_globals.dispatch`主动向 Python 端发送事件，在 Python 端可以通过`ms.Application.custom`事件接收。
 
-## Examples
+## 示例
 
 <demo name="basic"></demo>
 

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

@@ -5,7 +5,7 @@
 
 
 def on_custom(e: gr.EventData):
-    print(e)
+    print(e._data)
 
 
 with gr.Blocks() as demo:

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

@@ -0,0 +1,7 @@
+# Div
+
+同 HTML 中的`div`标签，用于辅助布局，可以绑定常用的 HTML 事件，具体事件请查看`EVENTS`属性。
+
+## 示例
+
+<demo name="basic"></demo>

docs/components/base/div/README.md

@@ -0,0 +1,7 @@
+# Div
+
+Same as the `div` tag in HTML, used for layout assistance, can bind common HTML events, please refer to the `EVENTS` property for specific events.
+
+## Examples
+
+<demo name="basic"></demo>

docs/components/base/div/app.py

@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()

docs/components/base/div/demos/basic.py

@@ -0,0 +1,12 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with ms.Div(elem_style=dict(color="red", fontSize=22)):
+            ms.Text("Hello Div")
+
+if __name__ == "__main__":
+    demo.queue().launch()

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

@@ -0,0 +1,27 @@
+# Each
+
+辅助渲染组件，该组件支持传入列表作为参数，并会在前端遍历被包裹的组件，将列表的每一项注入当前遍历的上下文中，被包裹的组件属性会在前端被相应的上下文属性替换（只支持从`modelscope_studio`中导出的组件）。
+
+## 何时使用
+
+- 当被遍历的组件中全部都是`modelscope_studio`组件或非`modelscope_studio`的组件值不与被遍历的值绑定时；
+- 当需要遍历展示的列表长度无法确定时；
+
+## 示例
+
+<demo name="basic"></demo>
+
+`modelscope_studio`中的每个组件都有一个`as_item`参数（包括`Each`组件本身），指定该参数值后可以直接基于上下文的值做过滤，逻辑上类似`ctx_value = ctx_value["as_item"]`。该特性通常在需要遍历多个组件时使用，可以有效避免属性冲突。
+
+<demo name="use_as_item" title="使用 as_item 参数"></demo>
+
+如果您需要为所有的列表项的组件都添加某些统一的属性，您还可以传入`context_value`参数，该参数会与列表项的上下文深度合并，共同传递给前端组件。
+
+<demo name="use_context_value" title="使用 context_value 参数"></demo>
+
+### API
+
+| 属性          | 类型 | 默认值 | 描述             |
+| ------------- | ---- | ------ | ---------------- |
+| value         | list | None   | 组件的数据源     |
+| context_value | dict | None   | 统一的上下文参数 |

docs/components/base/each/README.md

@@ -0,0 +1,27 @@
+# Each
+
+A helper rendering component that supports passing a list as a parameter and will traverse the wrapped components on the front end, injecting each item of the list into the current traversal context. The attributes of the wrapped components will be replaced by corresponding context properties on the front end (only supports components exported from `modelscope_studio`).
+
+## When to Use
+
+- When all components being traversed are `modelscope_studio` components or non-`modelscope_studio` components whose values do not bind to the traversed values.
+- When the length of the list to be traversed is uncertain.
+
+## Examples
+
+<demo name="basic"></demo>
+
+Each component within `modelscope_studio` has an `as_item` parameter (including the `Each` component itself). Specifying this parameter value allows filtering based directly on the context value, similar logically to `ctx_value = ctx_value["as_item"]`. This feature is typically used when multiple components need to be iterated over, effectively avoiding property conflicts.
+
+<demo name="use_as_item" title="Using the as_item Parameter"></demo>
+
+If you need to add certain unified properties to all list item components, you can also pass in the `context_value` parameter. This parameter will be deeply merged with the list item's context and passed together to the front-end component.
+
+<demo name="use_context_value" title="Using the context_value Parameter"></demo>
+
+### API
+
+| Attribute     | Type | Default Value | Description                   |
+| ------------- | ---- | ------------- | ----------------------------- |
+| value         | list | None          | Data source for the component |
+| context_value | dict | None          | Unified context parameters    |

docs/components/base/each/app.py

@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()

docs/components/base/each/demos/basic.py

@@ -0,0 +1,35 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [{
+    "message": "Success Text",
+    "description":
+    "Success Description Success Description Success Description Success Description",
+    "type": "success"
+}, {
+    "message": "Info Text",
+    "description":
+    "Info Description Info Description Info Description Info Description",
+    "type": "info"
+}, {
+    "message": "Warning Text",
+    "description":
+    "Warning Description Warning Description Warning Description Warning Description",
+    "type": "warning"
+}, {
+    "message": "Error Text",
+    "description":
+    "Error Description Error Description Error Description Error Description",
+    "type": "error"
+}]
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.Space(direction="vertical"):
+            with ms.Each(value=data):
+                antd.Alert()
+
+if __name__ == "__main__":
+    demo.queue().launch()

docs/components/base/each/demos/use_as_item.py

@@ -0,0 +1,69 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+data = [{
+    "card": {
+        "title": "Success Card Title",
+    },
+    "each": {
+        "value": [{
+            "value": "Card Content"
+        }, {
+            "value": "Card Content"
+        }, {
+            "value": "Card Content"
+        }]
+    }
+}, {
+    "card": {
+        "title": "Info Card Title",
+    },
+    "each": {
+        "value": [{
+            "value": "Card Content"
+        }, {
+            "value": "Card Content"
+        }, {
+            "value": "Card Content"
+        }]
+    }
+}, {
+    "card": {
+        "title": "Warning Card Title",
+    },
+    "each": {
+        "value": [{
+            "value": "Card Content"
+        }, {
+            "value": "Card Content"
+        }, {
+            "value": "Card Content"
+        }]
+    }
+}, {
+    "card": {
+        "title": "Error Card Title",
+    },
+    "each": {
+        "value": [{
+            "value": "Card Content"
+        }, {
+            "value": "Card Content"
+        }, {
+            "value": "Card Content"
+        }]
+    }
+}]
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with ms.Each(value=data):
+            with antd.Card(as_item="card"):
+                # Inner loop
+                with ms.Each(as_item="each"):
+                    antd.Typography.Paragraph()
+
+if __name__ == "__main__":
+    demo.queue().launch()