feat: support gradio 6.28.0

README-zh_CN.md

@@ -27,9 +27,7 @@
 
 ## 依赖
 
-- Gradio >= 6.0.0
-
-> 注意：您的 Gradio 版本必须`<=6.8.0`，[为什么？](https://github.com/gradio-app/gradio/issues/13131)
+- Gradio >= 6.28.0
 
 ## 安装
 

README.md

@@ -9,7 +9,7 @@ colorFrom: blue
 colorTo: gray
 short_description: A third-party component library based on Gradio.
 sdk: gradio
-sdk_version: 6.8.0
+sdk_version: 6.28.0
 pinned: false
 header: mini
 app_file: app.py
@@ -45,9 +45,7 @@ However, when your application needs Gradio to handle more built-in data on the
 
 ## Dependencies
 
-- Gradio >= 6.0.0
-
-> Note: Your Gradio version must`<=6.8.0`, [why?](https://github.com/gradio-app/gradio/issues/13131)
+- Gradio >= 6.28.0
 
 ## Installation
 

app.py

@@ -353,6 +353,9 @@ antd_menu_items = [{
     }, {
         "label": get_text("List", "List 列表"),
         "key": "list"
+    }, {
+        "label": get_text("Listy", "Listy 虚拟列表"),
+        "key": "listy"
     }, {
         "label": get_text("Popover", "Popover 气泡卡片"),
         "key": "popover"
@@ -434,6 +437,9 @@ antd_menu_items = [{
     "children": [{
         "label": get_text("Affix", "Affix 固钉"),
         "key": "affix"
+    }, {
+        "label": get_text("BorderBeam", "BorderBeam 边框流光"),
+        "key": "border_beam"
     }, {
         "label": get_text("ConfigProvider", "ConfigProvider 全局化配置"),
         "key": "config_provider"

components/antd/border_beam/README-zh_CN.md

@@ -0,0 +1,9 @@
+# BorderBeam
+
+A decorative component that renders a flowing highlight animation along the border of its child container. See [Ant Design](https://ant.design/components/border-beam/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="color" title="Custom Color"></demo>
+<demo name="multiple_beams" title="Multiple Beams"></demo>

components/antd/border_beam/README.md

@@ -0,0 +1,9 @@
+# BorderBeam
+
+A decorative component that renders a flowing highlight animation along the border of its child container. See [Ant Design](https://ant.design/components/border-beam/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="color" title="Custom Color"></demo>
+<demo name="multiple_beams" title="Multiple Beams"></demo>

components/antd/border_beam/app.py

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

components/antd/border_beam/demos/basic.py

@@ -0,0 +1,14 @@
+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 antd.ConfigProvider():
+            with antd.BorderBeam(elem_style=dict(borderRadius=8)):
+                with antd.Card(title="BorderBeam",
+                               elem_style=dict(width=320, marginBottom=0)):
+                    ms.Div("A flowing highlight runs along the border.")
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antd/border_beam/demos/color.py

@@ -0,0 +1,30 @@
+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 antd.ConfigProvider():
+            with antd.Space(size="large"):
+                # a solid color beam
+                with antd.BorderBeam(color="#f5222d",
+                                     duration=3,
+                                     elem_style=dict(borderRadius=8)):
+                    with antd.Card(title="Solid Color",
+                                   elem_style=dict(width=280, marginBottom=0)):
+                        ms.Div("color='#f5222d'")
+                # a gradient beam
+                with antd.BorderBeam(color=[
+                        dict(color="#1677ff", percent=0),
+                        dict(color="#722ed1", percent=50),
+                        dict(color="#eb2f96", percent=70),
+                ],
+                                     line_width=2,
+                                     size=120,
+                                     elem_style=dict(borderRadius=8)):
+                    with antd.Card(title="Gradient",
+                                   elem_style=dict(width=280, marginBottom=0)):
+                        ms.Div("color=[{color, percent}, ...]")
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antd/border_beam/demos/multiple_beams.py

@@ -0,0 +1,21 @@
+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 antd.ConfigProvider():
+            with antd.Space(size="large"):
+                for count in [1, 2, 4]:
+                    with antd.BorderBeam(count=count,
+                                         duration=4,
+                                         elem_style=dict(borderRadius=8)):
+                        with antd.Card(title=f"count={count}",
+                                       elem_style=dict(width=240,
+                                                       marginBottom=0)):
+                            ms.Div(
+                                f"{count} beam(s) evenly distributed along the border."
+                            )
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antd/listy/README-zh_CN.md

@@ -0,0 +1,11 @@
+# Listy
+
+A high performance list component which renders large data sets with virtual scrolling. See [Ant Design](https://ant.design/components/listy/) for more information.
+
+Items are plain data, and each item is rendered by the `itemRender` slot (or the `item_render` function property). `row_key` accepts either a field name of the item or a Javascript function string.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="group" title="Group with Sticky Header"></demo>
+<demo name="item_render_function" title="Render Item by Javascript Function"></demo>

components/antd/listy/README.md

@@ -0,0 +1,11 @@
+# Listy
+
+A high performance list component which renders large data sets with virtual scrolling. See [Ant Design](https://ant.design/components/listy/) for more information.
+
+Items are plain data, and each item is rendered by the `itemRender` slot (or the `item_render` function property). `row_key` accepts either a field name of the item or a Javascript function string.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="group" title="Group with Sticky Header"></demo>
+<demo name="item_render_function" title="Render Item by Javascript Function"></demo>

components/antd/listy/app.py

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

components/antd/listy/demos/basic.py

@@ -0,0 +1,25 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+items = [{
+    "key": f"item-{i}",
+    "title": f"Item {i}",
+} for i in range(2000)]
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Listy(items=items,
+                            row_key="key",
+                            height=360,
+                            virtual=True,
+                            elem_style=dict(border="1px solid #f0f0f0",
+                                            borderRadius=8)):
+                with ms.Slot(
+                        "itemRender",
+                        params_mapping="(item) => ({ value: item.title })"):
+                    ms.Div(elem_style=dict(padding="0 16px"))
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antd/listy/demos/group.py

@@ -0,0 +1,36 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+categories = ["Fruit", "Vegetable", "Drink", "Snack"]
+
+items = [{
+    "key": f"item-{i}",
+    "title": f"Item {i}",
+    "category": categories[i % len(categories)],
+} for i in range(400)]
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Listy(items=items,
+                            row_key="key",
+                            height=360,
+                            sticky=True,
+                            virtual=True,
+                            group=dict(key="(item) => item.category"),
+                            elem_style=dict(border="1px solid #f0f0f0",
+                                            borderRadius=8)):
+                with ms.Slot(
+                        "group.title",
+                        params_mapping=
+                        "(groupKey, items) => ({ value: groupKey + ' (' + items.length + ')' })"
+                ):
+                    ms.Div(elem_style=dict(fontWeight=600))
+                with ms.Slot(
+                        "itemRender",
+                        params_mapping="(item) => ({ value: item.title })"):
+                    ms.Div(elem_style=dict(padding="0 16px"))
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antd/listy/demos/item_render_function.py

@@ -0,0 +1,23 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+items = [{
+    "id": i,
+    "title": f"Item {i}",
+} for i in range(1000)]
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            # both `row_key` and `item_render` accept a Javascript function string
+            antd.Listy(
+                items=items,
+                row_key="(item) => item.id",
+                item_render="(item, index) => `#${index} ${item.title}`",
+                height=360,
+                virtual=True,
+                elem_style=dict(border="1px solid #f0f0f0", borderRadius=8))
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/folder/README-zh_CN.md

@@ -5,3 +5,4 @@ A folder tree component for displaying file structures. See [Ant Design X](https
 ## Examples
 
 <demo name="basic" position="bottom" collapsible="true"></demo>
+<demo name="context_menu" title="Context Menu" position="bottom" collapsible="true"></demo>

components/antdx/folder/README.md

@@ -5,3 +5,4 @@ A folder tree component for displaying file structures. See [Ant Design X](https
 ## Examples
 
 <demo name="basic" position="bottom" collapsible="true"></demo>
+<demo name="context_menu" title="Context Menu" position="bottom" collapsible="true"></demo>

components/antdx/folder/demos/context_menu.py

@@ -0,0 +1,67 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+
+def on_right_click(e: gr.EventData):
+    print("right clicked:", e._data["payload"])
+
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            antd.Divider("Shared Context Menu")
+            # `context_menu` applies to all nodes, a node can override it
+            # with its own `context_menu` (pass False to disable).
+            with antdx.Folder(default_expand_all=True,
+                              context_menu=[{
+                                  "key": "rename",
+                                  "label": "Rename"
+                              }, {
+                                  "key": "delete",
+                                  "label": "Delete",
+                                  "danger": True
+                              }]) as folder:
+                with antdx.Folder.TreeNode(title="src", path="/src"):
+                    antdx.Folder.TreeNode(title="index.ts",
+                                          path="/src/index.ts",
+                                          content="export * from './app';")
+                    # disable the context menu for this node only
+                    antdx.Folder.TreeNode(title="app.ts",
+                                          path="/src/app.ts",
+                                          content="console.log('Hello');",
+                                          context_menu=False)
+                antdx.Folder.TreeNode(
+                    title="package.json",
+                    path="/package.json",
+                    content='{\n  "name": "my-project"\n}',
+                    # override the shared menu for this node
+                    context_menu=[{
+                        "key": "copy_path",
+                        "label": "Copy Path"
+                    }])
+
+            antd.Divider("Dynamic Context Menu")
+            # `context_menu` also accepts a Javascript function string,
+            # which receives the node data and its full path key.
+            antdx.Folder(
+                default_expand_all=True,
+                context_menu=
+                "(node, key) => node.children ? [{ key: 'new_file', label: 'New File' }] : [{ key: 'open', label: 'Open ' + key }]",
+                tree_data=[{
+                    "title":
+                    "project",
+                    "path":
+                    "/project",
+                    "children": [{
+                        "title": "main.py",
+                        "path": "/project/main.py",
+                        "content": "print('Hello, World!')"
+                    }]
+                }])
+
+            folder.right_click(fn=on_right_click)
+
+if __name__ == "__main__":
+    demo.queue().launch()

helper/Site.py

@@ -250,8 +250,8 @@ class Site:
                                         screen_width = e._data["screen"][
                                             "width"]
                                         return gr.update(
-                                            default_size=82 if screen_width <
-                                            576 else 213)
+                                            size=82 if screen_width <
+                                            576 else None)
 
                                     app.mount(on_app_mount,
                                               outputs=[sider_panel])

requirements.txt

@@ -1,3 +1,3 @@
 gradio==6.8.0
-modelscope_studio==2.0.2
+modelscope_studio==2.1.0
 openai

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "modelscope_studio"
-version = "2.0.2"
+version = "2.1.0"
 description = "A third-party component library based on Gradio."
 readme = "README.md"
 license = "Apache-2.0"