Fix: make sure bind correct events when use gr.render triggers (#37)

* fix: make sure bind correct events when use gr.render triggers * docs: update
modelscope · Dec 16, 2024 · ae6f594 · ae6f594
1 parent d58b453
commit ae6f594
Show file tree

Hide file tree

Showing 63 changed files with 315 additions and 150 deletions.
diff --git a/.changeset/healthy-buckets-flash.md b/.changeset/healthy-buckets-flash.md
@@ -0,0 +1,7 @@
+---
+'@modelscope-studio/antd': patch
+'@modelscope-studio/frontend': patch
+'modelscope_studio': patch
+---
+
+fix: make sure bind correct events when use gr.render triggers
diff --git a/backend/modelscope_studio/components/antd/button/__init__.py b/backend/modelscope_studio/components/antd/button/__init__.py
@@ -56,16 +56,16 @@ def __init__(
             disabled: bool | None = None,
             ghost: bool | None = None,
             href: str | None = None,
-            html_type: Literal["button", "submit", "reset"] | None = "button",
+            html_type: Literal["button", "submit", "reset"] | None = None,
             icon: str | None = None,
-            icon_position: Literal["start", "end"] | None = "start",
+            icon_position: Literal["start", "end"] | None = None,
             loading: bool | None = None,
-            shape: Literal["default", "circle", "round"] | None = "default",
+            shape: Literal["default", "circle", "round"] | None = None,
             size: Literal["large", "middle", "small"] | None = None,
             styles: dict | None = None,
             href_target: str | None = None,
             type: Literal["primary", "dashed", "link", "text", "default"]
-        | None = "default",
+        | None = None,
             variant: Literal["outlined", "dashed", "solid", "filled", "text",
                              "link"] | None = None,
             color: Literal['default', 'primary', 'danger'] | None = None,

diff --git a/backend/modelscope_studio/components/antd/date_picker/range_picker/__init__.py b/backend/modelscope_studio/components/antd/date_picker/range_picker/__init__.py
@@ -17,12 +17,12 @@ class AntdDatePickerRangePicker(ModelScopeDataLayoutComponent):
         EventListener("change",
                       callback=lambda block: block._internal.update(
                           bind_change_event=True)),
-        EventListener(
-            "calendar_change",
-            callback=lambda block: block._internal.update(bind_ok_event=True)),
-        EventListener("focus",
+        EventListener("calendar_change",
                       callback=lambda block: block._internal.update(
                           bind_calendarChange_event=True)),
+        EventListener("focus",
+                      callback=lambda block: block._internal.update(
+                          bind_focus_event=True)),
         EventListener("blur",
                       callback=lambda block: block._internal.update(
                           bind_blur_event=True)),

diff --git a/backend/modelscope_studio/components/antd/time_picker/range_picker/__init__.py b/backend/modelscope_studio/components/antd/time_picker/range_picker/__init__.py
@@ -17,12 +17,12 @@ class AntdTimePickerRangePicker(ModelScopeDataLayoutComponent):
         EventListener("change",
                       callback=lambda block: block._internal.update(
                           bind_change_event=True)),
-        EventListener(
-            "calendar_change",
-            callback=lambda block: block._internal.update(bind_ok_event=True)),
-        EventListener("focus",
+        EventListener("calendar_change",
                       callback=lambda block: block._internal.update(
                           bind_calendarChange_event=True)),
+        EventListener("focus",
+                      callback=lambda block: block._internal.update(
+                          bind_focus_event=True)),
         EventListener("blur",
                       callback=lambda block: block._internal.update(
                           bind_blur_event=True)),

diff --git a/backend/modelscope_studio/components/antd/tour/step/__init__.py b/backend/modelscope_studio/components/antd/tour/step/__init__.py
@@ -15,10 +15,10 @@ class AntdTourStep(ModelScopeLayoutComponent):
         EventListener("close",
                       callback=lambda block: block._internal.update(
                           bind_close_event=True)),
-        EventListener("next_button_props_click",
+        EventListener("next_button_click",
                       callback=lambda block: block._internal.update(
                           bind_nextButtonProps_click_event=True)),
-        EventListener("prev_button_props_click",
+        EventListener("prev_button_click",
                       callback=lambda block: block._internal.update(
                           bind_prevButtonProps_click_event=True)),
     ]

diff --git a/backend/modelscope_studio/components/antd/tree/__init__.py b/backend/modelscope_studio/components/antd/tree/__init__.py
@@ -37,7 +37,7 @@ class AntdTree(ModelScopeLayoutComponent):
                           bind_dragStart_event=True)),
         EventListener("drop",
                       callback=lambda block: block._internal.update(
-                          bind_dragDrop_event=True)),
+                          bind_drop_event=True)),
         EventListener("expand",
                       callback=lambda block: block._internal.update(
                           bind_expand_event=True)),

diff --git a/backend/modelscope_studio/components/antd/tree/directory_tree/__init__.py b/backend/modelscope_studio/components/antd/tree/directory_tree/__init__.py
@@ -33,7 +33,7 @@ class AntdTreeDirectoryTree(ModelScopeLayoutComponent):
                           bind_dragStart_event=True)),
         EventListener("drop",
                       callback=lambda block: block._internal.update(
-                          bind_dragDrop_event=True)),
+                          bind_drop_event=True)),
         EventListener("expand",
                       callback=lambda block: block._internal.update(
                           bind_expand_event=True)),

diff --git a/docs/README-zh_CN.md b/docs/README-zh_CN.md
@@ -5,7 +5,7 @@
     <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;">
+    <img src="https://img.alicdn.com/imgextra/i1/O1CN01OmXst929933KJd7og_!!6000000008024-55-tps-2016-703.svg" height="60" style="vertical-align: middle;">
 <p>
 
 <p align="center">

diff --git a/docs/components/antd/date_picker/README-zh_CN.md b/docs/components/antd/date_picker/README-zh_CN.md
@@ -5,4 +5,4 @@ To select or input a date. See [Ant Design](https://ant.design/components/date-p
 ## Examples
 
 <demo name="basic"></demo>
-<demo name="ranger_picker" title="Ranger Picker"></demo>
+<demo name="range_picker" title="Range Picker"></demo>
diff --git a/docs/components/antd/date_picker/README.md b/docs/components/antd/date_picker/README.md
@@ -5,4 +5,4 @@ To select or input a date. See [Ant Design](https://ant.design/components/date-p
 ## Examples
 
 <demo name="basic"></demo>
-<demo name="ranger_picker" title="Ranger Picker"></demo>
+<demo name="range_picker" title="Range Picker"></demo>
diff --git a/...s/antd/date_picker/demos/ranger_picker.py → ...ts/antd/date_picker/demos/range_picker.py b/...s/antd/date_picker/demos/ranger_picker.py → ...ts/antd/date_picker/demos/range_picker.py
@@ -1,5 +1,3 @@
-import time
-
 import gradio as gr
 
 import modelscope_studio.components.antd as antd

diff --git a/docs/components/antd/time_picker/README-zh_CN.md b/docs/components/antd/time_picker/README-zh_CN.md
@@ -5,4 +5,4 @@ To select/input a time. See [Ant Design](https://ant.design/components/time-pick
 ## Examples
 
 <demo name="basic"></demo>
-<demo name="ranger_picker" title="Range Picker"></demo>
+<demo name="range_picker" title="Range Picker"></demo>
diff --git a/docs/components/antd/time_picker/README.md b/docs/components/antd/time_picker/README.md
@@ -5,4 +5,4 @@ To select/input a time. See [Ant Design](https://ant.design/components/time-pick
 ## Examples
 
 <demo name="basic"></demo>
-<demo name="ranger_picker" title="Range Picker"></demo>
+<demo name="range_picker" title="Range Picker"></demo>
diff --git a/...s/antd/time_picker/demos/ranger_picker.py → ...ts/antd/time_picker/demos/range_picker.py b/...s/antd/time_picker/demos/ranger_picker.py → ...ts/antd/time_picker/demos/range_picker.py
diff --git a/docs/components/base/each/README-zh_CN.md b/docs/components/base/each/README-zh_CN.md
@@ -2,10 +2,13 @@
 
 辅助渲染组件，该组件支持传入列表作为参数，并会在前端遍历被包裹的组件，将列表的每一项注入当前遍历的上下文中，被包裹的组件属性会在前端被相应的上下文属性替换（只支持从`modelscope_studio`中导出的组件）。
 
+> 注意：在大多数情况下，您不需要使用`Each`组件，如果您需要动态渲染组件，我们更建议您使 Gradio 提供的 [render](https://www.gradio.app/docs/gradio/render) 函数。
+
 ## 何时使用
 
 - 当被遍历的组件中全部都是`modelscope_studio`组件或非`modelscope_studio`的组件值不与被遍历的值绑定时；
 - 当需要遍历展示的列表长度无法确定时；
+- 不想要在 Python 中绑定过多事件监听时；
 
 ## 示例
 

diff --git a/docs/components/base/each/README.md b/docs/components/base/each/README.md
@@ -2,6 +2,8 @@
 
 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`).
 
+> Note: In most cases, you do not need to use the `Each` component. If you need to render components dynamically, we recommend using the [render](https://www.gradio.app/docs/gradio/render) function provided by Gradio.
+
 ## 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.

diff --git a/frontend/antd/auto-complete/Index.svelte b/frontend/antd/auto-complete/Index.svelte
@@ -71,7 +71,9 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        dropdown_visible_change: 'dropdownVisibleChange',
+      })}
       value={$mergedProps.props.value ?? $mergedProps.value}
       slots={$slots}
       optionItems={$options.length > 0 ? $options : $children}

diff --git a/frontend/antd/breadcrumb/Index.svelte b/frontend/antd/breadcrumb/Index.svelte
@@ -69,7 +69,14 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        menu_open_change: 'menu_openChange',
+        dropdown_open_change: 'dropdownProps_openChange',
+        dropdown_menu_click: 'dropdownProps_menu_click',
+        dropdown_menu_deselect: 'dropdownProps_menu_deselect',
+        dropdown_menu_open_change: 'dropdownProps_menu_openChange',
+        dropdown_menu_select: 'dropdownProps_menu_select',
+      })}
       slots={$slots}
       slotItems={$items.length > 0 ? $items : $children}
       {setSlotParams}

diff --git a/frontend/antd/calendar/Index.svelte b/frontend/antd/calendar/Index.svelte
@@ -69,7 +69,9 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        panel_change: 'panelChange',
+      })}
       slots={$slots}
       value={$mergedProps.props.value || $mergedProps.value}
       onValueChange={(val) => {

diff --git a/frontend/antd/card/Index.svelte b/frontend/antd/card/Index.svelte
@@ -65,7 +65,9 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        tab_change: 'tabChange',
+      })}
       containsGrid={$mergedProps._internal.contains_grid}
       slots={$slots}
       tabListItems={$tabList}

diff --git a/frontend/antd/cascader/Index.svelte b/frontend/antd/cascader/Index.svelte
@@ -71,7 +71,10 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        dropdown_visible_change: 'dropdownVisibleChange',
+        load_data: 'loadData',
+      })}
       value={$mergedProps.props.value ?? $mergedProps.value}
       slots={$slots}
       optionItems={$options.length > 0 ? $options : $children}

diff --git a/frontend/antd/cascader/panel/Index.svelte b/frontend/antd/cascader/panel/Index.svelte
@@ -68,7 +68,9 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        load_data: 'loadData',
+      })}
       value={$mergedProps.props.value ?? $mergedProps.value}
       slots={$slots}
       optionItems={$options.length > 0 ? $options : $children}

diff --git a/frontend/antd/collapse/item/Index.svelte b/frontend/antd/collapse/item/Index.svelte
@@ -64,7 +64,9 @@
       id: $mergedProps.elem_id,
       ...$mergedProps.restProps,
       ...$mergedProps.props,
-      ...bindEvents($mergedProps),
+      ...bindEvents($mergedProps, {
+        item_click: 'itemClick',
+      }),
     },
     slots: {
       children: $slot,

diff --git a/frontend/antd/color-picker/Index.svelte b/frontend/antd/color-picker/Index.svelte
@@ -72,7 +72,11 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        change_complete: 'changeComplete',
+        open_change: 'openChange',
+        format_change: 'formatChange',
+      })}
       value={$mergedProps.props.value ?? $mergedProps.value ?? undefined}
       slots={$slots}
       presetItems={$presets}

diff --git a/frontend/antd/date-picker/Index.svelte b/frontend/antd/date-picker/Index.svelte
@@ -73,7 +73,10 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        panel_change: 'panelChange',
+        open_change: 'openChange',
+      })}
       slots={$slots}
       value={$mergedProps.props.value || $mergedProps.value}
       presetItems={$presets}

diff --git a/frontend/antd/date-picker/range-picker/Index.svelte b/frontend/antd/date-picker/range-picker/Index.svelte
@@ -78,7 +78,9 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        calendar_change: 'calendarChange',
+      })}
       slots={$slots}
       value={$mergedProps.props.value || $mergedProps.value}
       presetItems={$presets}

diff --git a/frontend/antd/dropdown/Index.svelte b/frontend/antd/dropdown/Index.svelte
@@ -68,7 +68,10 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        open_change: 'openChange',
+        menu_open_change: 'menu_openChange',
+      })}
       slots={$slots}
       menuItems={$items}
       {setSlotParams}

diff --git a/frontend/antd/dropdown/button/Index.svelte b/frontend/antd/dropdown/button/Index.svelte
@@ -74,7 +74,10 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        open_change: 'openChange',
+        menu_open_change: 'menu_OpenChange',
+      })}
       slots={$slots}
       menuItems={$items}
       {setSlotParams}

diff --git a/frontend/antd/float-button/Index.svelte b/frontend/antd/float-button/Index.svelte
@@ -66,7 +66,9 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        open_change: 'openChange',
+      })}
       slots={$slots}
     >
       <slot></slot>

diff --git a/frontend/antd/form/Index.svelte b/frontend/antd/form/Index.svelte
@@ -73,7 +73,11 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        fields_change: 'fieldsChange',
+        finish_failed: 'finishFailed',
+        values_change: 'valuesChange',
+      })}
       slots={$slots}
       value={$mergedProps.value}
       onValueChange={(v) => {

diff --git a/frontend/antd/form/provider/Index.svelte b/frontend/antd/form/provider/Index.svelte
@@ -54,7 +54,10 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        form_change: 'formChange',
+        form_finish: 'formFinish',
+      })}
       slots={{}}
     >
       <slot></slot>

diff --git a/frontend/antd/image/Index.svelte b/frontend/antd/image/Index.svelte
@@ -78,7 +78,9 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        preview_visible_change: 'preview_visibleChange',
+      })}
       slots={$slots}
       src={$mergedProps.props.src || src}
       {setSlotParams}

diff --git a/frontend/antd/image/preview-group/Index.svelte b/frontend/antd/image/preview-group/Index.svelte
@@ -69,7 +69,9 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        preview_visible_change: 'preview_visibleChange',
+      })}
       slots={$slots}
       items={$mergedProps.props.items || $mergedProps.items}
     >

diff --git a/frontend/antd/input-number/Index.svelte b/frontend/antd/input-number/Index.svelte
@@ -63,7 +63,9 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        press_enter: 'pressEnter',
+      })}
       value={$mergedProps.props.value ?? $mergedProps.value}
       slots={$slots}
       onValueChange={(v) => {

diff --git a/frontend/antd/input/Index.svelte b/frontend/antd/input/Index.svelte
@@ -67,7 +67,9 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        press_enter: 'pressEnter',
+      })}
       value={$mergedProps.props.value ?? $mergedProps.value}
       slots={$slots}
       onValueChange={(v) => {

diff --git a/frontend/antd/input/password/Index.svelte b/frontend/antd/input/password/Index.svelte
@@ -72,7 +72,10 @@
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
-      {...bindEvents($mergedProps)}
+      {...bindEvents($mergedProps, {
+        press_enter: 'pressEnter',
+        visibility_toggle_visible_change: 'visibilityToggle_visibleChange',
+      })}
       value={$mergedProps.props.value ?? $mergedProps.value}
       slots={$slots}
       onValueChange={(v) => {