feat: add Flow component

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 from components.Chatbot.app import docs as chatbot_docs
 from components.Docs import Docs
+from components.Flow.app import docs as flow_docs
 from components.Markdown.app import docs as markdown_docs
 from components.MultimodalInput.app import docs as multimodel_input_docs
 from components.WaterfallGallery.app import docs as waterfall_gallery_docs
@@ -13,6 +14,7 @@ docs = [
     ["Markdown", markdown_docs],
     ["MultimodalInput", multimodel_input_docs],
     ["WaterfallGallery", waterfall_gallery_docs],
+    ["Flow", flow_docs],
 ]
 
 with gr.Blocks() as demo:

components/Chatbot/README-zh_CN.md

@@ -89,7 +89,7 @@ class MultimodalMessage(GradioModel):
     # message 容器的 elem id
     elem_id: Optional[str] = None
     # message 容器的 elem classes
-    elem_classes: Optional[list[str] | str] = None
+    elem_classes: Optional[List[str] | str] = None
     name: Optional[str] = None
     text: Optional[str] = None
     flushing: Optional[bool] = None
@@ -123,7 +123,7 @@ class ChatbotData(GradioRootModel):
 | llm_thinking_presets          | list\[dict\]                                                                     | \[\]     | llm 思考链路解析预设，可以将 llm 调用工具的输出格式转为固定的前端展示格式，需要从modelscope_studio.Chatbot.llm_thinking_presets引入，目前支持：qwen                                                                                                                                                      |
 | custom_components             | dict\[str, CustomComponentDict\] CustomComponentDict 定义见下方                  | None     | 支持用户定义自定义标签，并通过 js 控制标签渲染样式与触发 python 事件。                                                                                                                                                                                                                                   |
 
-**CustomComponent 定义如下**
+**CustomComponentDict 定义如下**
 
 ```python
 class CustomComponentDict(TypedDict):

components/Chatbot/README.md

@@ -88,7 +88,7 @@ class MultimodalMessage(GradioModel):
     # elem id of message container
     elem_id: Optional[str] = None
     # elem classes of message container
-    elem_classes: Optional[list[str] | str] = None
+    elem_classes: Optional[List[str] | str] = None
     name: Optional[str] = None
     text: Optional[str] = None
     flushing: Optional[bool] = None

components/Chatbot/demos/chart.py

@@ -35,6 +35,7 @@ Chart:
 with gr.Blocks() as demo:
     mgr.Chatbot(
         value=conversation,
+        flushing=False,
         height=600,
     )
 

components/Docs.py

@@ -49,7 +49,7 @@ def get_demo_modules(file_path: str):
     demos = [
         demo for demo in list_demos(
             os.path.join(os.path.dirname(file_path), "demos"))
-        if demo.endswith(".py")
+        if demo.endswith(".py") and not demo.startswith("__")
     ]
     demo_modules = {}
     for demo in demos:
@@ -93,23 +93,41 @@ class Docs:
                   "r") as f:
             return f.read()
 
-    def render_demo(self, demo_name, prefix='', suffix=''):
+    def render_demo(self,
+                    demo_name,
+                    code_position='left',
+                    prefix='',
+                    suffix=''):
         content = self.read_file(f"./demos/{demo_name}.py")
         module = self.demo_modules[demo_name]
         with gr.Accordion("Show Demo", open=False):
-            with gr.Row():
-                with gr.Column():
-                    mgr.Markdown(f"""
-{prefix}
+
+            def render_code():
+                mgr.Markdown(f"""{prefix}
 ````python
 {content}
 ````
-{suffix}
-""",
-                                 header_links=True,
-                                 custom_components=custom_components)
+{suffix}""",
+                             header_links=True,
+                             custom_components=custom_components)
+
+            if code_position == 'top':
+                with gr.Row():
+                    with gr.Column():
+                        render_code()
+            with gr.Row():
+                if code_position == 'left':
+                    with gr.Column():
+                        render_code()
                 with gr.Column():
                     module.demo.render()
+                if code_position == 'right':
+                    with gr.Column():
+                        render_code()
+            if code_position == 'bottom':
+                with gr.Row():
+                    with gr.Column():
+                        render_code()
 
     def render_markdown(self,
                         markdown_file,
@@ -129,7 +147,8 @@ class Docs:
             elif item["type"] == "demo":
                 self.render_demo(item["name"],
                                  prefix=item["prefix"],
-                                 suffix=item["suffix"])
+                                 suffix=item["suffix"],
+                                 code_position=item["code_position"])
 
     def render(self, components_tabs=None):
 

components/Flow/README-zh_CN.md

@@ -0,0 +1,109 @@
+# Flow
+
+基于 [reactflow](https://reactflow.dev/) 实现的 Flow 组件。
+
+- 支持通过 schema 自定义渲染节点
+- 支持自定义节点的渲染组件，并与 Python 事件交互
+
+## 如何使用
+
+### 定义 schema 节点 (重要)
+
+详见：<tab-link tab="define_schema">Define Schema</tab-link>
+
+### 基本使用
+
+<demo name="basic" code-position="bottom"></demo>
+
+### 组件配置项
+
+<demo name="component_options" code-position="bottom"></demo>
+
+### 自定义节点类型（高阶用法，需要了解前端知识）
+
+<demo name="custom_node_type" code-position="bottom"></demo>
+
+## API 及参数列表
+
+### value
+
+接口定义：
+
+```python
+class NodePosition(GradioModel):
+    x: Optional[int] = 0
+    y: Optional[int] = 0
+
+
+class Node(GradioModel):
+    id: Optional[str] = None
+    name: str
+    title: Optional[str] = None
+    position: Optional[Union[NodePosition, dict]] = None
+    data: Optional[dict] = None
+
+class EdgePort(GradioModel):
+    attr: Optional[str] = None
+    attrItemIndex: Optional[int] = None
+    handleIndex: Optional[int] = None
+
+class Edge(GradioModel):
+    id: Optional[str] = None
+    source: str
+    target: str
+    sourcePort: Optional[Union[EdgePort, dict]] = None
+    targetPort: Optional[Union[EdgePort, dict]] = None
+
+
+class FlowData(GradioModel):
+    nodes: Optional[List[Union[Node, dict]]] = []
+    edges: Optional[List[Union[Edge, dict]]] = []
+
+```
+
+### props
+
+| 属性                | 类型                                                            | 默认值 | 描述                                                                                                                                                                   |
+| ------------------- | --------------------------------------------------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| height              | int \| str                                                      | 600    | Flow 组件高度。                                                                                                                                                        |
+| sync_on_data_change | bool                                                            | None   | 是否仅在数据更改时同步 Python 值（例如：节点属性、节点计数、边缘计数、连接端口等，不包括节点位置）。 如果您想要更好的页面性能而不是完整数据同步，则应将其设置为 True。 |
+| schema              | FlowSchemaDict \| dict                                          | None   | 定义 Flow 组件的 nodes 与 edges。                                                                                                                                      |
+| show_sidebar        | bool                                                            | True   | 是否展示侧 Flow 组件侧边栏。                                                                                                                                           |
+| show_minimap        | bool                                                            | True   | 是否展示侧 Flow 组件小地图。                                                                                                                                           |
+| show_controls       | bool                                                            | True   | 是否展示侧Flow 组件控制栏。                                                                                                                                            |
+| background_props    | BackgroundPropsDict \| dict CustomComponentDict 定义见下方      | None   | 修改 Flow组件背景，详见 BackgroundPropsDict 类型。                                                                                                                     |
+| min_zoom            | int                                                             | 0.1    | Flow 组件最小缩放倍率。                                                                                                                                                |
+| max_zoom            | int                                                             | 2      | Flow 组件最大缩放倍率。                                                                                                                                                |
+| custom_components   | dict\[str, CustomComponentDict\] CustomComponentDict 定义见下方 | None   | 支持用户自定义节点类型，并通过 js 控制渲染样式与触发 python 事件。                                                                                                     |
+
+**BackgroundPropsDict 定义如下**
+
+```python
+class BackgroundPropsDict(TypedDict):
+    color: Optional[str]
+    className: Optional[str]
+    # The gap between patterns. Passing in a tuple allows you to control the x and y gap independently.
+    gap: Optional[Union[int, Tuple[int, int]]]
+    # The radius of each dot or the size of each rectangle if BackgroundVariant.Dots or BackgroundVariant.Cross is used. This defaults to 1 or 6 respectively, or ignored if BackgroundVariant.Lines is used.
+    size: Optional[int]
+    offset: Optional[int]
+    lineWidth: Optional[int]
+    variant: Optional[Literal['dots', 'lines', 'cross']]
+```
+
+**CustomComponentDict 定义如下**
+
+```python
+class CustomComponentDict(TypedDict):
+    props: Optional[List[str]]
+    template: Optional[str]
+    js: Optional[str]
+```
+
+### event listeners
+
+| 事件                            | 描述                                                                                                                                                                                                                                 |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `mgr.Flow.change(fn, ···)`      | 当 value 更新时触发，如果 sync_on_data_change 值为 True 时，此时 flow 的实际数据可能并不是实时的，建议监听 data_change 事件。                                                                                                        |
+| `mgr.Flow.data_change(fn, ···)` | 当在数据更改时触发（例如：节点属性、节点计数、边缘计数、连接端口等，不包括节点位置）                                                                                                                                                 |
+| `mgr.Flow.custom(fn, ···)`      | 自定义标签触发事件时触发，EventData 为：<br/> - id：当前触发节点 id。<br/> - node：当前触发节点类型。 <br/> - attr：当前触发节点属性。<br/> - index：当前触发节点属性索引，当节点属性为 list 时有值。<br/> - value：自定义传入的值。 |

components/Flow/README.md

@@ -0,0 +1,108 @@
+# Flow
+
+A Flow component implemented based on [reactflow](https://reactflow.dev/).
+
+- Supports customization of node rendering through a schema.
+- Allows for custom node render components with interaction from Python.
+
+## How to Use
+
+### Defining Schema Nodes (Important)
+
+See: <tab-link tab="define_schema">Define Schema</tab-link>
+
+### Basic Usage
+
+<demo name="basic" code-position="bottom"></demo>
+
+### Component Options
+
+<demo name="component_options" code-position="bottom"></demo>
+
+### Custom Node Types (Advanced usage, requires frontend knowledge)
+
+<demo name="custom_node_type" code-position="bottom"></demo>
+
+## API and Parameter List
+
+### value
+
+Interface definition:
+
+```python
+class NodePosition(GradioModel):
+    x: Optional[int] = 0
+    y: Optional[int] = 0
+
+
+class Node(GradioModel):
+    id: Optional[str] = None
+    name: str
+    title: Optional[str] = None
+    position: Optional[Union[NodePosition, dict]] = None
+    data: Optional[dict] = None
+
+class EdgePort(GradioModel):
+    attr: Optional[str] = None
+    attrItemIndex: Optional[int] = None
+    handleIndex: Optional[int] = None
+
+class Edge(GradioModel):
+    id: Optional[str] = None
+    source: str
+    target: str
+    sourcePort: Optional[Union[EdgePort, dict]] = None
+    targetPort: Optional[Union[EdgePort, dict]] = None
+
+
+class FlowData(GradioModel):
+    nodes: Optional[List[Union[Node, dict]]] = []
+    edges: Optional[List[Union[Edge, dict]]] = []
+```
+
+### props
+
+| Property            | Type                                                                  | Default | Description                                                                                                                                                                                                                         |
+| ------------------- | --------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| height              | int \| str                                                            | 600     | Height of the Flow component.                                                                                                                                                                                                       |
+| sync_on_data_change | bool                                                                  | None    | Whether to sync the Python value only on data change (e.g., node attributes, node count, edge count, connection ports, not including node positions). If you want better page performance without full data sync, set this to True. |
+| schema              | FlowSchemaDict \| dict                                                | None    | Defines the nodes and edges of the Flow component.                                                                                                                                                                                  |
+| show_sidebar        | bool                                                                  | True    | Whether to display the sidebar in the Flow component.                                                                                                                                                                               |
+| show_minimap        | bool                                                                  | True    | Whether to display the minimap in the Flow component.                                                                                                                                                                               |
+| show_controls       | bool                                                                  | True    | Whether to display the controls bar in the Flow component.                                                                                                                                                                          |
+| background_props    | BackgroundPropsDict \| dict BackgroundPropsDict definition below      | None    | Modify the background of the Flow component, see the BackgroundPropsDict type.                                                                                                                                                      |
+| min_zoom            | int                                                                   | 0.1     | Minimum zoom level for the Flow component.                                                                                                                                                                                          |
+| max_zoom            | int                                                                   | 2       | Maximum zoom level for the Flow component.                                                                                                                                                                                          |
+| custom_components   | dict\[str, CustomComponentDict\] CustomComponentDict definition below | None    | Supports user-defined custom tags and controls tag rendering styles and triggers Python events through js.                                                                                                                          |
+
+**BackgroundPropsDict definition:**
+
+```python
+class BackgroundPropsDict(TypedDict):
+    color: Optional[str]
+    className: Optional[str]
+    # The gap between patterns. Passing in a tuple allows you to control the x and y gap independently.
+    gap: Optional[Union[int, Tuple[int, int]]]
+    # The radius of each dot or the size of each rectangle if BackgroundVariant.Dots or BackgroundVariant.Cross is used. This defaults to 1 or 6 respectively, or ignored if BackgroundVariant.Lines is used.
+    size: Optional[int]
+    offset: Optional[int]
+    lineWidth: Optional[int]
+    variant: Optional[Literal['dots', 'lines', 'cross']]
+```
+
+**CustomComponentDict definition:**
+
+```python
+class CustomComponentDict(TypedDict):
+    props: Optional[List[str]]
+    template: Optional[str]
+    js: Optional[str]
+```
+
+### Event Listeners
+
+| Event                           | Description                                                                                                                                                                                                                                                                                                                          |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `mgr.Flow.change(fn, ...)`      | Triggers when the `value` updates. If `sync_on_data_change` is True, the actual data at this point might not be up-to-date; consider listening to the `data_change` event instead.                                                                                                                                                   |
+| `mgr.Flow.data_change(fn, ...)` | Triggers when there's a data change (e.g., node attributes, node count, edge count, connection ports), but not node positions.                                                                                                                                                                                                       |
+| `mgr.Flow.custom(fn, ...)`      | Triggers when a custom label event occurs. The `EventData` includes:<br/> - `id`: ID of the currently triggered node.<br/> - `node`: Type of the currently triggered node.<br/> - `attr`: Attributes of the currently triggered node.<br/> - `index`: Index of the attribute if it's a list.<br/> - `value`: Custom passed-in value. |

components/Flow/app.py

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

components/Flow/define_schema-zh_CN.md

@@ -0,0 +1,266 @@
+# Define Schema
+
+在使用 Flow 组件前，需要预先创建 Schema 定义 node 节点，schema 类型定义如下：
+
+```ts
+export interface FlowSchema {
+  nodes: FlowNodeSchema[];
+}
+
+export interface FlowNodeSchema {
+  /**
+   * 作为节点的唯一标识。必填。
+   */
+  name: string;
+
+  /**
+   * 节点显示图标。
+   */
+  icon?: string;
+
+  /**
+   * 节点标题，如果没有提供则默认使用 name。
+   */
+  title?: string;
+
+  /**
+   * 节点的简短描述。
+   */
+  description?: string;
+
+  /**
+   * 节点宽度。
+   */
+  width?: number;
+
+  /**
+   * 节点高度。
+   */
+  height?: number;
+
+  /**
+   * 显示/隐藏工具栏（删除、复制、重命名等）。
+   * @default true
+   */
+  show_toolbar?: boolean;
+
+  /**
+   * 启用/禁止添加更多此类节点实例。
+   * @default true
+   */
+  addable?: boolean;
+
+  /**
+   * 启用/禁止删除现有此类节点实例。
+   * @default true
+   */
+  deletable?: boolean;
+
+  /**
+   * 可以同时存在的此类节点的最大数量。
+   */
+  max?: number;
+
+  /**
+   * 可以同时存在的此类节点的最小数量。
+   */
+  min?: number;
+
+  /**
+   * 节点连接端口的配置。
+   */
+  ports?: {
+    /**
+     * 节点作为连接的源端口。
+     * @default ['right']
+     */
+    source?: Position[];
+
+    /**
+     * 允许此节点 source 端口连接到的其他节点或属性。默认为所有节点和属性。
+     * @default []
+     */
+    sourceConnections?: PortConnection[];
+
+    /**
+     * 节点作为连接的目标端口。
+     * @default ['left']
+     */
+    target?: Position[];
+
+    /**
+     * 其他允许连接到此节点 target 端口的节点或属性。默认为所有节点和属性
+     * @default []
+     */
+    targetConnections?: PortConnection[];
+  };
+
+  /**
+   * 节点的属性配置。
+   */
+  attrs?: FlowNodeAttrSchema[];
+
+  /**
+   * 创建新实例时节点属性的初始值。
+   */
+  template?: {
+    /**
+     * 在`attrs`字段中与其名称相对应的属性值，例如 { "a": 1, "b": 2 }。
+     */
+    attrs?: Attrs;
+  };
+}
+
+export interface FlowNodeAttrSchema {
+  /**
+   * 唯一的属性名称，在 node data 中用作 key。必填。
+   */
+  name: string;
+
+  /**
+   * 属性标题，如果没有提供则默认使用 name。
+   */
+  title?: string;
+
+  /**
+   * 属性的简短描述
+   */
+  description?: string;
+
+  /**
+   * 禁用用户编辑属性值。默认情况下，属性是可编辑的。
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * 属性输入类型。可以是内置的 Ant Design 组件或自定义组件之一。默认为'input'。
+   * @default 'input'
+   */
+  type?:
+    | 'input'
+    | 'textarea'
+    | 'radio'
+    | 'checkbox'
+    | 'number'
+    | 'select'
+    | 'switch'
+    | 'upload'
+    // 自定义
+    | (string & {});
+
+  /**
+   * 针对所选组件类型的特定配置选项，支持 Ant Design 组件({@link https://ant.design/components/overview/})或自定义组件的属性。
+   */
+  props?: Record<string, any>;
+
+  /**
+   * 节点属性连接端口的配置。
+   */
+  ports?: {
+    /**
+     * 节点属性作为连接的源端口。
+     * @default []
+     */
+    source?: Position[];
+
+    /**
+     * 允许此节点属性 source 端口连接到的其他节点或属性。
+     * @default []
+     */
+    sourceConnections?: PortConnection[];
+
+    /**
+     * 节点属性作为连接的目标端口。
+     * @default []
+     */
+    target?: Position[];
+
+    /**
+     * 其他允许连接到此节点属性 target 端口的节点或属性。
+     * @default []
+     */
+    targetConnections?: PortConnection[];
+  };
+
+  /**
+   * 表示该属性是否为列表值。
+   * @default false
+   */
+  list?:
+    | boolean
+    | {
+        /**
+         * 列表中每个 item 的端口配置。
+         */
+        ports?: {
+          /**
+           * 列表 item 作为连接的源端口。
+           * @default []
+           */
+          source?: Position[];
+
+          /**
+           * 允许此列表 item source 端口连接到的其他节点或属性。
+           * @default []
+           */
+          sourceConnections?: PortConnection[];
+
+          /**
+           * 列表 item 作为连接的目标端口。
+           */
+          target?: Position[];
+
+          /**
+           * 其他允许连接到此列表 item target 端口的节点或属性。
+           */
+          targetConnections?: PortConnection[];
+        };
+
+        /**
+         * 列表中的最小 item 数量。
+         */
+        min?: number;
+
+        /**
+         * 列表中的最大 item 数量。
+         */
+        max?: number;
+      };
+
+  /**
+   * 启用/禁用手风琴 UI。
+   * @default true
+   */
+  accordion?: boolean;
+
+  /**
+   * 指定该属性值是否为必填项。默认情况为非必填项。
+   * @default false
+   */
+  required?:
+    | boolean
+    | {
+        message?: string;
+      };
+
+  /**
+   * 使用 JSON schema 验证属性值。
+   */
+  json_schema_validator?: Record<string, any>;
+}
+```
+
+你可以通过 json 文件（推荐）或直接在 Python 端通过导出类型定义：
+
+- 通过 json 定义：
+
+```json
+<file src="./schema/agents_schema.json"></file>
+```
+
+- 通过 Python 定义：
+
+```python
+<file src="./schema/agents_schema.py"></file>
+```

components/Flow/define_schema.md

@@ -0,0 +1,262 @@
+# Define Schema
+
+Before using the Flow component, need to create a Schema definition node in advance. The schema type is defined as follows:
+
+```ts
+export interface FlowSchema {
+  nodes: FlowNodeSchema[];
+}
+
+export interface FlowNodeSchema {
+  /**
+   * As a unique identifier for the node. Mandatory.
+   */
+  name: string;
+
+  /**
+   * Display icon for the node.
+   */
+  icon?: string;
+
+  /**
+   * Display title for the node, defaults to the node name if not provided.
+   */
+  title?: string;
+
+  /**
+   * A short description of the node's purpose.
+   */
+  description?: string;
+
+  /**
+   * Width of the node.
+   */
+  width?: number;
+
+  /**
+   * Height of the node.
+   */
+  height?: number;
+
+  /**
+   * Shows/hides the toolbar (delete, copy, rename, etc.).
+   * @default true
+   */
+  show_toolbar?: boolean;
+
+  /**
+   * Enables/disables adding more instances of this node.
+   * @default true
+   */
+  addable?: boolean;
+
+  /**
+   * Enables/disables deleting existing instances of this node.
+   * @default true
+   */
+  deletable?: boolean;
+
+  /**
+   * Maximum number of this node type that can exist simultaneously.
+   */
+  max?: number;
+
+  /**
+   * Minimum number of this node type that must exist simultaneously.
+   */
+  min?: number;
+
+  /**
+   * Configurations for the node's connection ports.
+   */
+  ports?: {
+    /**
+     * Source ports for the node as a connection.
+     * @default ['right']
+     */
+    source?: Position[];
+
+    /**
+     * Allowed the source ports of this node to connect to other nodes or attributes. Defaults to all nodes and attributes
+     */
+    sourceConnections?: PortConnection[];
+
+    /**
+     * Target ports for the node as a connection
+     * @default ['left']
+     */
+    target?: Position[];
+
+    /**
+     * Allowed other nodes or attributes allowed to connect to the target ports of this node. Defaults to all nodes and attributes
+     *
+     */
+    targetConnections?: PortConnection[];
+  };
+
+  /**
+   * Configuration of the node's attributes.
+   */
+  attrs?: FlowNodeAttrSchema[];
+
+  /**
+   * Initial values for the node's attributes when creating a new instance.
+   */
+  template?: {
+    /**
+     * Attribute values corresponding to their names in the `attrs` field, e.g., `{ "a": 1, "b": 2 }`.
+     */
+    attrs?: Attrs;
+  };
+}
+
+export interface FlowNodeAttrSchema {
+  /**
+   * Unique attribute name used as a key in the node data. Mandatory.
+   */
+  name: string;
+
+  /**
+   * Display title for the attribute, defaults to the attribute name if not provided.
+   */
+  title?: string;
+
+  /**
+   * A brief explanation about the attribute purpose.
+   */
+  description?: string;
+
+  /**
+   * Disables user editing of the attribute value. By default, attributes are editable.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Attribute input type. Can be one of the built-in Ant Design components or a custom component. Defaults to 'input'.
+   * @default 'input'
+   */
+  type?:
+    | 'input'
+    | 'textarea'
+    | 'radio'
+    | 'checkbox'
+    | 'number'
+    | 'select'
+    | 'switch'
+    | 'upload'
+    // custom
+    | (string & {});
+
+  /**
+   * Configuration options specific to the chosen component type, supporting Ant Design ({@link https://ant.design/components/overview/}) or custom component properties.
+   */
+  props?: Record<string, any>;
+
+  /**
+   * Configurations for the node attribute ports.
+   */
+  ports?: {
+    /**
+     * Source ports for the attribute as a connection.
+     * @default []
+     */
+    source?: Position[];
+
+    /**
+     * Allowed the source ports of this attribute to connect to other nodes or attributes. Defaults to all nodes and attributes
+     */
+    sourceConnections?: PortConnection[];
+
+    /**
+     * Target ports for the attribute as a connection
+     * @default []
+     */
+    target?: Position[];
+
+    /**
+     * Allowed other nodes or attributes allowed to connect to the target ports of this attribute. Defaults to all nodes and attributes
+     */
+    targetConnections?: PortConnection[];
+  };
+
+  /**
+   * Indicates whether the attribute is a list.
+   * @default false
+   */
+  list?:
+    | boolean
+    | {
+        /**
+         * Port configurations for each item in the list.
+         */
+        ports?: {
+          /**
+           * Source ports for the list item as a connection.
+           * @default []
+           */
+          source?: Position[];
+
+          /**
+           * Allowed the source ports of this list item to connect to other nodes or attributes. Defaults to all nodes and attributes
+           */
+          sourceConnections?: PortConnection[];
+
+          /**
+           * Target ports for the list item as a connection
+           */
+          target?: Position[];
+
+          /**
+           * Allowed other nodes or attributes allowed to connect to the target ports of this list item. Defaults to all nodes and attributes
+           */
+          targetConnections?: PortConnection[];
+        };
+
+        /**
+         * Minimum number of items in the list.
+         */
+        min?: number;
+
+        /**
+         * Maximum number of items in the list.
+         */
+        max?: number;
+      };
+
+  /**
+   * Enable/disable accordion UI.
+   * @default true
+   */
+  accordion?: boolean;
+
+  /**
+   * Specifies if the attribute value is mandatory. By default, attributes are optional.
+   * @default false
+   */
+  required?:
+    | boolean
+    | {
+        message?: string;
+      };
+
+  /**
+   * Validates attribute values using JSON schema.
+   */
+  json_schema_validator?: Record<string, any>;
+}
+```
+
+You can define the schema by a json file (recommended) or directly on the Python by the exported types:
+
+- Defined by json:
+
+```json
+<file src="./schema/agents_schema.json"></file>
+```
+
+- Defined by Python:
+
+```python
+<file src="./schema/agents_schema.py"></file>
+```

components/Flow/demos/basic.py

@@ -0,0 +1,34 @@
+import json
+import os
+
+import gradio as gr
+
+import modelscope_studio as mgr
+from modelscope_studio.components.Flow import Edge, Node
+
+with open((os.path.join(os.path.dirname(__file__),
+                        "../schema/agents_schema.json"))) as f:
+    schema = json.load(f)
+
+# define the initial value of the flow
+data = {
+    "nodes": [
+        Node(id="start-node", name="start", position=dict(x=0, y=0)),
+        Node(name="agent",
+             position=dict(x=200, y=0),
+             data=dict(condition=['']))
+    ],
+    "edges": [Edge(source='start-node', target="initial-agent-node")],
+}
+
+
+def on_data_change(_flow):
+    print(_flow)
+
+
+with gr.Blocks() as demo:
+    flow = mgr.Flow(value=data, schema=schema, sync_on_data_change=True)
+    flow.data_change(fn=on_data_change, inputs=[flow])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Flow/demos/component_options.py

@@ -0,0 +1,104 @@
+import json
+import os
+
+import gradio as gr
+
+import modelscope_studio as mgr
+from modelscope_studio.components.Flow import BackgroundPropsDict, Edge, Node
+
+with open((os.path.join(os.path.dirname(__file__),
+                        "../schema/agents_schema.json"))) as f:
+    schema = json.load(f)
+
+# define the initial value of the flow
+data = {
+    "nodes": [
+        Node(id="start-node", name="start", position=dict(x=0, y=0)),
+        Node(name="agent",
+             position=dict(x=200, y=0),
+             data=dict(condition=['']))
+    ],
+    "edges": [Edge(source='start-node', target="initial-agent-node")],
+}
+
+
+def on_data_change(_flow):
+    print(_flow)
+
+
+flow_props = ["show_sidebar", "show_minimap", "show_controls"]
+
+
+def on_change(_flow_config, _bgc_variant, _bgc_color, _bgc_gap, _bgc_size,
+              _bgc_offset, _bgc_line_width):
+    new_props = {}
+    new_background_props = {
+        "variant": _bgc_variant,
+        "color": _bgc_color,
+        "gap": _bgc_gap,
+        "size": _bgc_size,
+        "offset": _bgc_offset,
+        'lineWidth': _bgc_line_width
+    }
+    for choice in flow_props:
+        if choice in _flow_config:
+            new_props[choice] = True
+        else:
+            new_props[choice] = False
+    return gr.update(**new_props, background_props=new_background_props)
+
+
+with gr.Blocks() as demo:
+    with gr.Accordion(label="Flow Options"):
+        flow_config = gr.CheckboxGroup(
+            container=False,
+            value=["show_sidebar", "show_minimap", "show_controls"],
+            choices=flow_props)
+        with gr.Accordion(label="Background Props"):
+            with gr.Row():
+                with gr.Column():
+                    bgc_variant = gr.Radio(choices=["dots", "lines", "cross"],
+                                           label="variant",
+                                           value="dots")
+                with gr.Column():
+                    bgc_color = gr.ColorPicker(label="color", value="")
+                with gr.Column():
+                    bgc_gap = gr.Slider(label="gap", value=28)
+                with gr.Column():
+                    bgc_size = gr.Slider(label="size",
+                                         value=1,
+                                         maximum=10,
+                                         step=1)
+                with gr.Column():
+                    bgc_offset = gr.Slider(label="offset",
+                                           value=1,
+                                           step=1,
+                                           maximum=10)
+                with gr.Column():
+                    bgc_line_width = gr.Slider(label="lineWidth",
+                                               value=1,
+                                               step=1,
+                                               maximum=10)
+
+    flow = mgr.Flow(value=data,
+                    schema=schema,
+                    show_controls=True,
+                    show_minimap=True,
+                    show_sidebar=True,
+                    sync_on_data_change=True,
+                    background_props=BackgroundPropsDict(variant='dots'))
+    gr.on(triggers=[
+        flow_config.change, bgc_variant.change, bgc_color.change,
+        bgc_gap.change, bgc_size.change, bgc_offset.change,
+        bgc_line_width.change
+    ],
+          fn=on_change,
+          inputs=[
+              flow_config, bgc_variant, bgc_color, bgc_gap, bgc_size,
+              bgc_offset, bgc_line_width
+          ],
+          outputs=[flow])
+    flow.data_change(fn=on_data_change, inputs=[flow])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Flow/demos/custom_node_type.py

@@ -0,0 +1,69 @@
+import gradio as gr
+
+import modelscope_studio as mgr
+from modelscope_studio.components.Flow import (FlowSchemaDict, Node,
+                                               NodeSchemaAttributeDict,
+                                               NodeSchemaDict)
+
+
+def on_data_change(_flow):
+    print(_flow)
+
+
+def on_custom(data: gr.EventData):
+    print(data._data)
+
+
+custom_components = {
+    "my-input": {
+        "js":
+        """
+(props, cc, { el, theme, onMount, onUpdate }) => {
+  onMount(() => {
+    el.innerHTML = `<input />`
+    const input = el.querySelector('input')
+    input.style.color = theme === 'dark' ? 'white' : 'black'
+    input.style.backgroundColor = theme === 'dark' ? 'black' : 'white'
+    input.addEventListener('change', (e) => {
+      cc.dispatch(e.target.value)
+    })
+  })
+  // props update
+  onUpdate(
+    () => {
+      const input = el.querySelector('input')
+      input.setAttribute('value', props.value || '')
+    },
+    // By default, the callback will not be called when the component is being mounted. Set `callAfterMount` to true to enable it.
+    { callAfterMount: true }
+  )
+}
+"""
+    }
+}
+
+schema = FlowSchemaDict(nodes=[
+    NodeSchemaDict(name="my-input-node",
+                   title="MyInputNode",
+                   attrs=[NodeSchemaAttributeDict(name="a", type="my-input")])
+])
+
+data = {
+    "nodes": [
+        Node(name="my-input-node",
+             position=dict(x=0, y=0),
+             data=dict(a='Hello'))
+    ]
+}
+
+with gr.Blocks() as demo:
+    flow = mgr.Flow(value=data,
+                    schema=schema,
+                    custom_components=custom_components,
+                    sync_on_data_change=True)
+    flow.data_change(fn=on_data_change, inputs=[flow])
+    # called when custom component dispatch event
+    flow.custom(fn=on_custom)
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Flow/schema/agents_schema.json

@@ -0,0 +1,66 @@
+{
+  "$schema": "https://raw.githubusercontent.com/modelscope/modelscope-studio/main/frontend/Flow/schema.json",
+  "nodes": [
+    {
+      "max": 1,
+      "min": 1,
+      "addable": false,
+      "show_toolbar": false,
+      "name": "start",
+      "title": "Start",
+      "ports": {
+        "source": ["right"],
+        "target": []
+      }
+    },
+    {
+      "icon": "https://img.alicdn.com/imgextra/i4/O1CN01fvt4it25rEZU4Gjso_!!6000000007579-2-tps-128-128.png",
+      "name": "agent",
+      "title": "Agent Node",
+      "description": "Agent Flow Node",
+      "ports": {
+        "target": ["left"],
+        "source": []
+      },
+      "attrs": [
+        {
+          "name": "prompt",
+          "title": "Agent Prompt",
+          "type": "textarea",
+          "required": {
+            "message": "Agent Prompt is required"
+          }
+        },
+        {
+          "name": "tool",
+          "title": "Tools",
+          "type": "select",
+          "props": {
+            "mode": "multiple",
+            "options": [
+              { "label": "Wanx Image Generation", "value": "image_gen" },
+              { "label": "Code Interpreter", "value": "code_interpreter" },
+              { "label": "Web Browsing", "value": "web_browser" }
+            ]
+          }
+        },
+        {
+          "name": "condition",
+          "title": "Jump Condition",
+          "list": {
+            "min": 1,
+            "ports": {
+              "source": ["right"]
+            }
+          },
+          "accordion": false
+        }
+      ],
+      "template": {
+        "attrs": {
+          "condition": [""]
+        }
+      }
+    }
+  ]
+}

components/Flow/schema/agents_schema.py

@@ -0,0 +1,59 @@
+import os
+
+from modelscope_studio.components.Flow import (
+    FlowSchemaDict, NodeSchemaAttributeDict, NodeSchemaAttributeListDict,
+    NodeSchemaAttributeRequiredDict, NodeSchemaDict, NodeSchemaPortsDict,
+    NodeSchemaTemplateDict)
+
+
+def resolve_assets(relative_path):
+    return os.path.join(os.path.dirname(__file__), "../../resources",
+                        relative_path)
+
+
+schema = FlowSchemaDict(nodes=[
+    NodeSchemaDict(max=1,
+                   min=1,
+                   addable=False,
+                   show_toolbar=False,
+                   name="start",
+                   title="Start",
+                   ports=NodeSchemaPortsDict(source=['right'], target=[])),
+    NodeSchemaDict(
+        icon=resolve_assets('./bot.jpeg'),
+        name="agent",
+        title="Agent Node",
+        description="Agent Flow Node",
+        ports=NodeSchemaPortsDict(source=[], target=['left']),
+        attrs=[
+            NodeSchemaAttributeDict(name="prompt",
+                                    title="Agent Prompt",
+                                    type='textarea',
+                                    required=NodeSchemaAttributeRequiredDict(
+                                        message="Agent Prompt is required")),
+            NodeSchemaAttributeDict(name="tool",
+                                    title="Tools",
+                                    type="select",
+                                    props={
+                                        "mode":
+                                        "multiple",
+                                        "options": [{
+                                            "label": "Wanx Image Generation",
+                                            "value": "image_gen"
+                                        }, {
+                                            "label": "Code Interpreter",
+                                            "value": "code_interpreter"
+                                        }, {
+                                            "label": "Web Browsing",
+                                            "value": "web_browser"
+                                        }]
+                                    }),
+            NodeSchemaAttributeDict(
+                name="condition",
+                title="Jump Condition",
+                list=NodeSchemaAttributeListDict(
+                    min=1, ports=NodeSchemaPortsDict(source=['right'])),
+                accordion=False)
+        ],
+        template=NodeSchemaTemplateDict(attrs=dict(condition=[''])))
+])

components/Markdown/README-zh_CN.md

@@ -55,7 +55,7 @@ custom_select.js
 </demo-suffix>
 </demo>
 
-#### 与 Python 侧交互
+#### 与 Python 交互
 
 在 js 中可以使用`cc.dispatch`触发 Python 侧监听的`custom`事件，以前面的custom_select.js为例，我们在前端调用了`cc.dispatch(options[i])`，则会向 Python 侧同时发送通知。
 
@@ -75,7 +75,7 @@ custom_select.js
 | preview                       | bool                                                            | True   | 是否开启图片预览功能                                                        |
 | custom_components             | dict\[str, CustomComponentDict\] CustomComponentDict 定义见下方 | None   | 支持用户定义自定义标签，并通过 js 控制标签渲染样式与触发 python 事件。      |
 
-**CustomComponent 定义如下**
+**CustomComponentDict 定义如下**
 
 ```python
 class CustomComponentDict(TypedDict):

components/Markdown/README.md

@@ -50,7 +50,7 @@ custom_select.js
 </demo-suffix>
 </demo>
 
-#### Interaction with Python Side
+#### Interaction with Python
 
 In js, you can use `cc.dispatch` to trigger the `custom` event listened to on the Python side. Taking the previous custom_select.js as an example, when we call `cc.dispatch(options[i])` on the frontend, a notification will be sent to the Python side simultaneously.
 <demo name="custom-tag4"></demo>
@@ -66,8 +66,8 @@ The following APIs are additional extended parameters beyond the original gradio
 | enable_base64                 | bool                                                                | False         | Whether to support rendering content as base64, since rendering base64 is unsafe, the default is False.    |
 | preview                       | bool                                                                | True          | Whether to enable image preview functionality.                                                             |
 | enable_latex                  | bool                                                                | True          | Whether to enable LaTeX rendering.                                                                         |
-| latex_single_dollar_delimiter | bool                                                                | True          | Whether to enable single dollar delimiter `$` for LaTeX rendering.                                         |
-| custom_components             | dict[str, CustomComponentDict] CustomComponentDict definition below | None          | Supports user-defined custom tags and controls tag rendering styles and triggers Python events through js. |
+| latex_single_dollar_delimiter | bool                                                                | True          | Whe ther to enable single dollar delimiter `$` for LaTeX rendering.                                        |
+| custom_components             | Dict[str, CustomComponentDict] CustomComponentDict definition below | None          | Supports user-defined custom tags and controls tag rendering styles and triggers Python events through js. |
 |                               |
 
 **CustomComponent definition is as follows:**

components/Markdown/demos/custom-tag2.py

@@ -15,12 +15,29 @@ custom tag:<custom-tag value="aaa"></custom-tag>
                 # The `js` property should be a string containing a JavaScript Function.
                 "js":
                 """
-(props, cc, { el, onMount }) => {
-    // `onMount` will be called after the template rendered
+(props, cc, { el, onMount, onUpdate }) => {
+    // `onMount` will be called after the template first rendered
     onMount(() => {
       // `el` is the container element
       console.log(el)
+
+      // the return function will be called when the component is being unmounted
+      return () => {
+        console.log('unmount')
+      }
+    })
+
+    // `onUpdate` will be called when the props changed
+    onUpdate(() => {
+      console.log(props)
     })
+    onUpdate(
+      () => {
+        console.log(props, 'after mount')
+      },
+      // By default, the callback will not be called when the component is being mounted. Set `callAfterMount` to true to enable it.
+      { callAfterMount: true }
+    )
     console.log(props.children) // By default, `props` will be passed a property named `children`, which can get the content in the tag, such as 'xx' in '<tag>xx</tag>'.
 
     // The return value will be merged with `props` and passed to the template.

components/MultimodalInput/README.md

@@ -43,7 +43,7 @@ class MultimodalInputData(GradioModel):
 
 | Attribute           | Type                                            | Default Value | Description                                                                                                                                                                            |
 | ------------------- | ----------------------------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| sources             | list[Literal['upload', 'microphone', 'webcam']] | ['upload']    | A list of types for uploading files. "upload" provides an upload file button. "microphone" supports user audio input. "webcam" supports user photography to generate images or videos. |
+| sources             | List[Literal['upload', 'microphone', 'webcam']] | ['upload']    | A list of types for uploading files. "upload" provides an upload file button. "microphone" supports user audio input. "webcam" supports user photography to generate images or videos. |
 | webcam_props        | dict                                            | None          | webcam component properties, currently supports passing mirror_webcam(bool), include_audio(bool)                                                                                       |
 | upload_button_props | dict                                            | None          | Upload file button properties, same as gradio UploadButton                                                                                                                             |
 | submit_button_props | dict                                            | None          | Submit button properties, same as gradio Button                                                                                                                                        |

components/parse_markdown.py

@@ -42,10 +42,16 @@ class MarkdownParser(HTMLParser):
             return
         if tag == "demo":
             self.value.append({
-                "type": "demo",
-                "name": dict(attrs)["name"],
-                "prefix": "",
-                "suffix": ""
+                "type":
+                "demo",
+                "code_position":
+                dict(attrs).get("code-position", 'left'),
+                "name":
+                dict(attrs)["name"],
+                "prefix":
+                "",
+                "suffix":
+                ""
             })
         elif tag == "file":
             content = self.read_file(dict(attrs)["src"])

components/resources/custom_components/custom_select.js

@@ -1,4 +1,4 @@
-(props, cc, { el, onMount }) => {
+(props, cc, { el, onUpdate }) => {
   const options = JSON.parse(props.options);
   el.innerHTML = `
   ${options
@@ -9,18 +9,21 @@
     })
     .join('')}
   `;
-  onMount(() => {
-    const inputs = Array.from(el.getElementsByTagName('input'));
-    Array.from(el.getElementsByTagName('label')).forEach((label, i) => {
-      label.addEventListener('click', () => {
-        inputs.forEach((input) => {
-          input.checked = false;
+  onUpdate(
+    () => {
+      const inputs = Array.from(el.getElementsByTagName('input'));
+      Array.from(el.getElementsByTagName('label')).forEach((label, i) => {
+        label.addEventListener('click', () => {
+          inputs.forEach((input) => {
+            input.checked = false;
+          });
+          const input = label.getElementsByTagName('input')[0];
+          input.checked = true;
+          // Use cc.dispatch to trigger events.
+          cc.dispatch(options[i]);
         });
-        const input = label.getElementsByTagName('input')[0];
-        input.checked = true;
-        // Use cc.dispatch to trigger events.
-        cc.dispatch(options[i]);
       });
-    });
-  });
+    },
+    { callAfterMount: true }
+  );
 };

modelscope_studio-0.1.4-py3-none-any.whl → modelscope_studio-0.2.0-py3-none-any.whl

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:918f05ea07a5ceffe1b6e759f288c214345f4f61b12b4315d9d61544b7196a4a
-size 7456942
+oid sha256:26497677e515ca086a7da0719cd3268516f842bab0833ebb00cd33a558b6a1bb
+size 11001355

requirements.txt

@@ -1,2 +1,2 @@
 modelscope_studio
-modelscope_studio-0.1.4-py3-none-any.whl
+modelscope_studio-0.2.0-py3-none-any.whl

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "modelscope_studio"
-version = "0.1.4"
+version = "0.1.7"
 description = "A set of extension component, inluding components for conversational input and display in multimodal scenarios, as well as more components for vertical scenarios."
 readme = "README.md"
 license = "Apache-2.0"
@@ -45,10 +45,13 @@ artifacts = [
   "backend/modelscope_studio/components/Chatbot/templates",
   "backend/modelscope_studio/components/MultimodalInput/templates",
   "backend/modelscope_studio/components/Markdown/templates",
+  "backend/modelscope_studio/components/WaterfallGallery/templates",
 ]
 
 [tool.hatch.build.targets.sdist]
+exclude = ["__pycache__"]
 include = ["/backend/modelscope_studio"]
 
 [tool.hatch.build.targets.wheel]
 packages = ["/backend/modelscope_studio"]
+exclude = ["__pycache__"]