Update

FAQ-zh_CN.md

@@ -4,7 +4,7 @@
 
 在 Hugging Face Space 中，默认开启了 Gradio 的 ssr 模式，但是此功能目前还无法很好的兼容自定义组件，需要我们手动关闭。请在`demo.launch()`方法中添加`ssr_mode=False`参数：`demo.launch(ssr_mode=False)`。
 
-## 为什么我的应用每次操作都需要等待一小段时间才会有响应
+## 为什么我的应用每次操作都需要等待一小段时间才会有响应？
 
 `modelscope_studio`将组件的加载反馈进行了单独抽离。由于 Gradio 的交互操作涉及到前后端通信，需要有一段加载中的等待时间，当没有`AutoLoading`组件时，页面将不会显示 Gradio 的加载状态。因此，建议您至少在全局使用一次`AutoLoading`组件，以显示兜底的加载反馈。
 

components/antd/pagination/README-zh_CN.md

@@ -5,3 +5,9 @@ A long list can be divided into several pages, and only one page will be loaded
 ## Examples
 
 <demo name="basic"></demo>
+
+### Data Changes
+
+The `Pagination` component is not designed as a data component and cannot be placed in the inputs of other events, but you can get the changed value of the pagination through the pagination change event. If you need to persist the page data, you can save it to `gr.State`
+
+<demo name="data_changes">

components/antd/pagination/README.md

@@ -5,3 +5,9 @@ A long list can be divided into several pages, and only one page will be loaded
 ## Examples
 
 <demo name="basic"></demo>
+
+### Data Changes
+
+The `Pagination` component is not designed as a data component and cannot be placed in the inputs of other events, but you can get the changed value of the pagination through the pagination change event. If you need to persist the page data, you can save it to `gr.State`
+
+<demo name="data_changes">

components/antd/pagination/demos/data_changes.py

@@ -0,0 +1,35 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def on_change(e: gr.EventData, state_value):
+    page = e._data["payload"][0]
+    page_size = e._data["payload"][1]
+    state_value["page"] = page
+    state_value["page_size"] = page_size
+    return state_value
+
+
+def on_click(state_value):
+    gr.Info(
+        f"Page: {state_value['page']}, Page Size: {state_value['page_size']}")
+
+
+with gr.Blocks() as demo:
+    state = gr.State({"page": 1, "page_size": 10})
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Flex(vertical=True, gap="middle"):
+                pagination = antd.Pagination(
+                    total=85,
+                    show_quick_jumper=True,
+                    show_size_changer=True,
+                )
+                btn = antd.Button("Show me the page",
+                                  type="primary",
+                                  block=True)
+    pagination.change(fn=on_change, inputs=[state], outputs=[state])
+    btn.click(fn=on_click, inputs=[state], outputs=[btn])
+if __name__ == "__main__":
+    demo.queue().launch()

layout_templates/coder_artifacts/demos/app.py

@@ -177,21 +177,27 @@ css = """
   min-height: 680px;
 }
 
+#coder-artifacts #output-container .ms-gr-ant-tabs-content,.ms-gr-ant-tabs-tabpane {
+    height: 100%;
+}
+
 #coder-artifacts .output-html {
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: 100%;
   min-height: 680px;
+  max-height: 1200px;
 }
 
-#coder-artifacts .output-html > iframe {
-  flex: 1;
+#coder-artifacts .output-html .html-container {
+  height: 100%;
 }
 
-#code-artifacts-code-drawer .output-code {
+#coder-artifacts-code-drawer .output-code {
   flex:1;
 }
-#code-artifacts-code-drawer .output-code .ms-gr-ant-spin-nested-loading {
+#coder-artifacts-code-drawer .output-code .ms-gr-ant-spin-nested-loading {
   min-height: 100%;
 }
 """
@@ -277,10 +283,13 @@ with gr.Blocks(css=css) as demo:
 
                     # Right Column
                     with antd.Col(span=24, md=16):
-                        with antd.Card(title="Output",
-                                       elem_style=dict(height="100%"),
-                                       styles=dict(body=dict(height="100%")),
-                                       elem_id="output-container"):
+                        with antd.Card(
+                                title="Output",
+                                elem_style=dict(height="100%",
+                                                display="flex",
+                                                flexDirection="column"),
+                                styles=dict(body=dict(height=0, flex=1)),
+                                elem_id="output-container"):
                             # Output Container Extra
                             with ms.Slot("extra"):
                                 with ms.Div(elem_id="output-container-extra"):
@@ -298,6 +307,7 @@ with gr.Blocks(css=css) as demo:
                                         "🧑‍💻 View Code", type="primary")
                             # Output Content
                             with antd.Tabs(
+                                    elem_style=dict(height="100%"),
                                     active_key="empty",
                                     render_tab_bar="() => null") as state_tab:
                                 with antd.Tabs.Item(key="empty"):
@@ -333,7 +343,7 @@ with gr.Blocks(css=css) as demo:
                             placement="right",
                             get_container=
                             "() => document.querySelector('.gradio-container')",
-                            elem_id="code-artifacts-code-drawer",
+                            elem_id="coder-artifacts-code-drawer",
                             styles=dict(
                                 body=dict(display="flex",
                                           flexDirection="column-reverse")),

requirements.txt

@@ -1,2 +1,2 @@
-modelscope_studio==1.4.2
+modelscope_studio==1.4.5
 openai

src/pyproject.toml

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