feat: add Lifecycle component

README-zh_CN.md

@@ -29,4 +29,5 @@ pip install modelscope_studio
 - <tab-link component-tab="MultimodalInput">MultimodalInput</tab-link>
 - <tab-link component-tab="Markdown">Markdown</tab-link>
 - <tab-link component-tab="WaterfallGallery">WaterfallGallery</tab-link>
+- <tab-link component-tab="Lifecycle">Lifecycle</tab-link>
 - <tab-link component-tab="Flow">Flow</tab-link>

README.md

@@ -44,5 +44,6 @@ pip install modelscope_studio
 - <tab-link component-tab="Chatbot">Chatbot</tab-link>
 - <tab-link component-tab="MultimodalInput">MultimodalInput</tab-link>
 - <tab-link component-tab="Markdown">Markdown</tab-link>
+- <tab-link component-tab="Lifecycle">Lifecycle</tab-link>
 - <tab-link component-tab="WaterfallGallery">WaterfallGallery</tab-link>
 - <tab-link component-tab="Flow">Flow</tab-link>

app.py

@@ -3,6 +3,7 @@ from api.app import docs as api_docs
 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.Lifecycle.app import docs as lifecycle_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,8 +14,9 @@ docs = [
     ["Quick Start", readme_docs],
     ["API", api_docs],
     ["Chatbot", chatbot_docs],
-    ["Markdown", markdown_docs],
     ["MultimodalInput", multimodel_input_docs],
+    ["Markdown", markdown_docs],
+    ["Lifecycle", lifecycle_docs],
     ["WaterfallGallery", waterfall_gallery_docs],
     ["Flow", flow_docs],
 ]

components/Lifecycle/README-zh_CN.md

@@ -0,0 +1,53 @@
+# Lifecycle
+
+生命周期组件，用于获取当前用户的环境信息。
+
+- 获取当前用户的语言、页面主题、user agent 和屏幕状态。
+- 监听页面行为并触发相应事件（页面加载、尺寸变化、页面关闭等）。
+
+## 如何使用
+
+### 基本使用
+
+<demo name="basic"></demo>
+
+### 自动适配用户语言环境
+
+<demo name="language_adaptation"></demo>
+
+### 根据用户界面主题返回不同权重内容
+
+<demo name="theme_adaptation"></demo>
+
+## API 及参数列表
+
+### value
+
+接口定义：
+
+```python
+class LifecycleScreenData(GradioModel):
+    width: float
+    height: float
+    scrollX: float
+    scrollY: float
+
+
+class LifecycleData(GradioModel):
+    screen: LifecycleScreenData
+    language: str
+    theme: str
+    userAgent: str
+```
+
+### props
+
+该组件不支持传入 props。
+
+### event listeners
+
+| 事件                             | 描述                                                                  |
+| -------------------------------- | --------------------------------------------------------------------- |
+| `mgr.Lifecycle.mount(fn, ···)`   | 用户页面加载时触发，EventData 为当前组件 value 的 dict 类型值。       |
+| `mgr.Lifecycle.unmount(fn, ···)` | 用户页面关闭时触发，EventData 为当前组件 value 的 dict 类型值。       |
+| `mgr.Lifecycle.resize(fn, ···)`  | 自定义标签触发事件时触发，EventData 为当前组件 value 的 dict 类型值。 |

components/Lifecycle/README.md

@@ -0,0 +1,53 @@
+# Lifecycle
+
+A Lifecycle component for getting the current user's environment information.
+
+- Get the current user's language, page theme, user agent, and screen state.
+- Listen to page actions and trigger corresponding events (page loading, size changes, page closing, etc.).
+
+## How to Use
+
+### Basic Usage
+
+<demo name="basic"></demo>
+
+### Automatically Adapt to User Language Environment
+
+<demo name="language_adaptation"></demo>
+
+### Return Different Weighted Content Based on UI Theme
+
+<demo name="theme_adaptation"></demo>
+
+## API and Parameter List
+
+### Value
+
+Interface definition:
+
+```python
+class LifecycleScreenData(GradioModel):
+    width: float
+    height: float
+    scrollX: float
+    scrollY: float
+
+
+class LifecycleData(GradioModel):
+    screen: LifecycleScreenData
+    language: str
+    theme: str
+    userAgent: str
+```
+
+### Props
+
+This component does not support passing in props.
+
+### Event Listeners
+
+| Event                            | Description                                                                                                             |
+| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `mgr.Lifecycle.mount(fn, ···)`   | Triggered when the user's page loads. The EventData is a dictionary type value of the current component's value.        |
+| `mgr.Lifecycle.unmount(fn, ···)` | Triggered when the user's page closes. The EventData is a dictionary type value of the current component's value.       |
+| `mgr.Lifecycle.resize(fn, ···)`  | Triggered when custom labels trigger events. The EventData is a dictionary type value of the current component's value. |

components/Lifecycle/app.py

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

components/Lifecycle/demos/basic.py

@@ -0,0 +1,28 @@
+import gradio as gr
+
+import modelscope_studio as mgr
+
+
+def mount(e: gr.EventData):
+    # current page state
+    print("onMount", e._data)
+
+
+def resize(e: gr.EventData):
+    print("onResize", e._data)
+
+
+def onUnmount(e: gr.EventData):
+    print("onUnmount", e._data)
+
+
+with gr.Blocks() as demo:
+    gr.Markdown("The Lifecycle component will not be rendered on the page.")
+    lifecycle = mgr.Lifecycle()
+    # listen to the page lifecycle
+    lifecycle.mount(fn=mount)
+    lifecycle.resize(fn=resize)
+    lifecycle.unmount(fn=onUnmount)
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Lifecycle/demos/language_adaptation.py

@@ -0,0 +1,41 @@
+import time
+
+import gradio as gr
+
+import modelscope_studio as mgr
+
+messages = {
+    'en': {
+        "hello": "Hello"
+    },
+    'en-US': {
+        "hello": "Hello"
+    },
+    'zh-CN': {
+        "hello": "你好"
+    }
+}
+
+default_lang = "en"
+
+
+def mount(_lifecycle, _state):
+    lang = _lifecycle.language
+    if (lang in messages):
+        _state["current_lang"] = lang
+    yield 'Switch Language...', _state
+    time.sleep(2)
+    yield messages[lang]["hello"], _state
+
+
+with gr.Blocks() as demo:
+    lifecycle = mgr.Lifecycle()
+    state = gr.State({"current_lang": default_lang})
+    markdown = gr.Markdown(value=messages[default_lang]["hello"])
+
+    lifecycle.mount(fn=mount,
+                    inputs=[lifecycle, state],
+                    outputs=[markdown, state])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Lifecycle/demos/theme_adaptation.py

@@ -0,0 +1,28 @@
+import gradio as gr
+
+import modelscope_studio as mgr
+
+
+def mount(_lifecycle, _state):
+    _state["theme"] = _lifecycle.theme
+    yield _state
+
+
+def fn(_state):
+    theme = _state["theme"]
+    color = '000/fff' if theme == 'dark' else 'fff/000'
+    yield gr.update(
+        value=f"https://dummyimage.com/200x100/{color}.png&text={theme}")
+
+
+with gr.Blocks() as demo:
+    lifecycle = mgr.Lifecycle()
+    state = gr.State({"theme": "light"})
+    btn = gr.Button()
+    image = gr.Image()
+
+    lifecycle.mount(fn=mount, inputs=[lifecycle, state], outputs=[state])
+    btn.click(fn=fn, inputs=[state], outputs=[image])
+
+if __name__ == "__main__":
+    demo.queue().launch()

modelscope_studio-0.3.0-py3-none-any.whl → modelscope_studio-0.4.0-py3-none-any.whl

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b64a48534196fea70a43e9b1cebf7dc881ae8138d10a3e520fa59b5477480967
-size 10950399
+oid sha256:4ea6dc30b6a751eff8b0e7e99554af09ad2b6d13841e8896e5e5af544d9425b7
+size 10995416

requirements.txt

@@ -1,2 +1,2 @@
 modelscope_studio
-modelscope_studio-0.3.0-py3-none-any.whl
+modelscope_studio-0.4.0-py3-none-any.whl