From c4258bef70affd45577988cd6d2ad0de7eb82bd5 Mon Sep 17 00:00:00 2001 From: Col0ring <1561999073@qq.com> Date: Fri, 29 Nov 2024 16:32:06 +0800 Subject: [PATCH] feat: update docs --- .changeset/late-cameras-speak.md | 17 ++++++++ README.md | 2 +- .../components/antd/mentions/__init__.py | 8 ++++ .../components/antd/rate/__init__.py | 2 +- docs/README.md | 2 +- docs/app.py | 12 ++++++ docs/components/antd/input/README-zh_CN.md | 7 +++ docs/components/antd/input/README.md | 7 +++ docs/components/antd/input/app.py | 6 +++ docs/components/antd/input/demos/basic.py | 31 +++++++++++++ .../antd/input_number/README-zh_CN.md | 7 +++ docs/components/antd/input_number/README.md | 7 +++ docs/components/antd/input_number/app.py | 6 +++ .../antd/input_number/demos/basic.py | 42 ++++++++++++++++++ docs/components/antd/mentions/README-zh_CN.md | 8 ++++ docs/components/antd/mentions/README.md | 8 ++++ docs/components/antd/mentions/app.py | 6 +++ docs/components/antd/mentions/demos/basic.py | 36 ++++++++++++++++ .../antd/mentions/demos/dynamic_options.py | 43 +++++++++++++++++++ docs/components/antd/radio/README-zh_CN.md | 7 +++ docs/components/antd/radio/README.md | 7 +++ docs/components/antd/radio/app.py | 6 +++ docs/components/antd/radio/demos/basic.py | 40 +++++++++++++++++ docs/components/antd/rate/README-zh_CN.md | 7 +++ docs/components/antd/rate/README.md | 7 +++ docs/components/antd/rate/app.py | 6 +++ docs/components/antd/rate/demos/basic.py | 20 +++++++++ frontend/antd/rate/rate.tsx | 4 +- frontend/utils/createFunction.ts | 14 +++++- frontend/utils/hooks/useFunction.ts | 9 ++-- 30 files changed, 375 insertions(+), 9 deletions(-) create mode 100644 .changeset/late-cameras-speak.md create mode 100644 docs/components/antd/input/README-zh_CN.md create mode 100644 docs/components/antd/input/README.md create mode 100644 docs/components/antd/input/app.py create mode 100644 docs/components/antd/input/demos/basic.py create mode 100644 docs/components/antd/input_number/README-zh_CN.md create mode 100644 docs/components/antd/input_number/README.md create mode 100644 docs/components/antd/input_number/app.py create mode 100644 docs/components/antd/input_number/demos/basic.py create mode 100644 docs/components/antd/mentions/README-zh_CN.md create mode 100644 docs/components/antd/mentions/README.md create mode 100644 docs/components/antd/mentions/app.py create mode 100644 docs/components/antd/mentions/demos/basic.py create mode 100644 docs/components/antd/mentions/demos/dynamic_options.py create mode 100644 docs/components/antd/radio/README-zh_CN.md create mode 100644 docs/components/antd/radio/README.md create mode 100644 docs/components/antd/radio/app.py create mode 100644 docs/components/antd/radio/demos/basic.py create mode 100644 docs/components/antd/rate/README-zh_CN.md create mode 100644 docs/components/antd/rate/README.md create mode 100644 docs/components/antd/rate/app.py create mode 100644 docs/components/antd/rate/demos/basic.py diff --git a/.changeset/late-cameras-speak.md b/.changeset/late-cameras-speak.md new file mode 100644 index 00000000..a50b1647 --- /dev/null +++ b/.changeset/late-cameras-speak.md @@ -0,0 +1,17 @@ +--- +'@modelscope-studio/legacy-waterfall-gallery': patch +'@modelscope-studio/legacy-multimodal-input': patch +'@modelscope-studio/legacy-lifecycle': patch +'@modelscope-studio/legacy-markdown': patch +'@modelscope-studio/legacy-compiled': patch +'@modelscope-studio/legacy-chatbot': patch +'@modelscope-studio/legacy-flow': patch +'@modelscope-studio/lint-config': patch +'@modelscope-studio/changelog': patch +'@modelscope-studio/antd': patch +'@modelscope-studio/base': patch +'@modelscope-studio/frontend': patch +'modelscope_studio': patch +--- + +fix: component paramters in Python diff --git a/README.md b/README.md index 2a60f5ee..5e6f005d 100644 --- a/README.md +++ b/README.md @@ -63,7 +63,7 @@ demo.queue().launch() ## Migration to 1.0 -If you have previously used `modelscope_studio` components and want to continue using them in the new version, no modifications to the original components are needed. You just need to introduce `ms.Application` in the outer layer. +If you have used the `modelscope_studio` component before and want to continue using it in the new version, you do not need to make any changes to the original component, just import `ms.Application` in the outer layer. ```python import gradio as gr diff --git a/backend/modelscope_studio/components/antd/mentions/__init__.py b/backend/modelscope_studio/components/antd/mentions/__init__.py index b3100963..97d34fd7 100644 --- a/backend/modelscope_studio/components/antd/mentions/__init__.py +++ b/backend/modelscope_studio/components/antd/mentions/__init__.py @@ -50,14 +50,18 @@ def __init__( allow_clear: bool | dict | None = None, auto_focus: bool | None = None, auto_size: bool | dict | None = None, + class_names: dict | None = None, default_value: str | None = None, filter_option: bool | str | None = None, disabled: bool | None = None, read_only: bool | None = None, get_popup_container: str | None = None, + popup_class_name: str | None = None, not_found_content: str | None = None, options: list[dict] | None = None, + loading: bool | None = None, placement: Literal['top', 'bottom'] | None = None, + placeholder: str | None = None, prefix: str | list[str] | None = '@', split: str | None = None, status: Literal['error', 'warning'] | None = None, @@ -90,9 +94,13 @@ def __init__( self.disabled = disabled self.read_only = read_only self.get_popup_container = get_popup_container + self.popup_class_name = popup_class_name self.not_found_content = not_found_content self.options = options + self.placeholder = placeholder + self.loading = loading self.placement = placement + self.class_names = class_names self.prefix = prefix self.split = split self.status = status diff --git a/backend/modelscope_studio/components/antd/rate/__init__.py b/backend/modelscope_studio/components/antd/rate/__init__.py index cf5a2236..e3966e1f 100644 --- a/backend/modelscope_studio/components/antd/rate/__init__.py +++ b/backend/modelscope_studio/components/antd/rate/__init__.py @@ -44,7 +44,7 @@ def __init__( auto_focus: bool | None = None, character: str | None = None, count: int | float | None = 5, - default_value: int | float | None = 0, + default_value: int | float | None = None, disabled: bool | None = None, keyboard: bool | None = None, tooltips: list[str] | None = None, diff --git a/docs/README.md b/docs/README.md index 31329e8c..06251951 100644 --- a/docs/README.md +++ b/docs/README.md @@ -58,7 +58,7 @@ pip install modelscope_studio~=1.0.0b ## Migration to 1.0 -If you have previously used `modelscope_studio` components and want to continue using them in the new version, no modifications to the original components are needed. You just need to introduce `ms.Application` in the outer layer. +If you have used the `modelscope_studio` component before and want to continue using it in the new version, you do not need to make any changes to the original component, just import `ms.Application` in the outer layer. ```python import gradio as gr diff --git a/docs/app.py b/docs/app.py index 6e287345..49d97d53 100644 --- a/docs/app.py +++ b/docs/app.py @@ -192,6 +192,18 @@ def get_docs(file_path: str, type: Literal["antd", "base"]): }, { "label": get_text("Input", "Input 输入框"), "key": "input" + }, { + "label": get_text("InputNumber", "InputNumber 数字输入框"), + "key": "input_number" + }, { + "label": get_text("Mentions", "Mentions 提及"), + "key": "mentions" + }, { + "label": get_text("Radio", "Radio 单选框"), + "key": "radio" + }, { + "label": get_text("Rate", "Rate 评分"), + "key": "rate" }, { "label": get_text("Select", "Select 选择器"), "key": "select" diff --git a/docs/components/antd/input/README-zh_CN.md b/docs/components/antd/input/README-zh_CN.md new file mode 100644 index 00000000..c1c832ce --- /dev/null +++ b/docs/components/antd/input/README-zh_CN.md @@ -0,0 +1,7 @@ +# Input + +Through mouse or keyboard input content, it is the most basic form field wrapper. See [Ant Design](https://ant.design/components/input/) for more information. + +## Examples + + diff --git a/docs/components/antd/input/README.md b/docs/components/antd/input/README.md new file mode 100644 index 00000000..c1c832ce --- /dev/null +++ b/docs/components/antd/input/README.md @@ -0,0 +1,7 @@ +# Input + +Through mouse or keyboard input content, it is the most basic form field wrapper. See [Ant Design](https://ant.design/components/input/) for more information. + +## Examples + + diff --git a/docs/components/antd/input/app.py b/docs/components/antd/input/app.py new file mode 100644 index 00000000..0018b7c1 --- /dev/null +++ b/docs/components/antd/input/app.py @@ -0,0 +1,6 @@ +from helper.Docs import Docs + +docs = Docs(__file__) + +if __name__ == "__main__": + docs.render().queue().launch() diff --git a/docs/components/antd/input/demos/basic.py b/docs/components/antd/input/demos/basic.py new file mode 100644 index 00000000..800393a9 --- /dev/null +++ b/docs/components/antd/input/demos/basic.py @@ -0,0 +1,31 @@ +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(direction="vertical"): + antd.Input() + antd.Input.Password() + antd.Input.Textarea( + placeholder= + "Autosize height with minimum and maximum number of lines", + auto_size={ + "minRows": 2, + "maxRows": 6 + }) + antd.Input.Search(placeholder="Input search text", + addon_before="https://", + allow_clear=True) + with antd.Input.Search(enter_button="Search", + placeholder="input search text", + size="large"): + with ms.Slot("suffix"): + antd.Icon("AudioOutlined", + elem_style=dict(fontSize=16, + color="#1677ff")) + antd.Input.OTP() +if __name__ == "__main__": + demo.queue().launch() diff --git a/docs/components/antd/input_number/README-zh_CN.md b/docs/components/antd/input_number/README-zh_CN.md new file mode 100644 index 00000000..ae09ddd8 --- /dev/null +++ b/docs/components/antd/input_number/README-zh_CN.md @@ -0,0 +1,7 @@ +# InputNumber + +Enter a number within certain range with the mouse or keyboard. See [Ant Design](https://ant.design/components/input-number/) for more information. + +## Examples + + diff --git a/docs/components/antd/input_number/README.md b/docs/components/antd/input_number/README.md new file mode 100644 index 00000000..ae09ddd8 --- /dev/null +++ b/docs/components/antd/input_number/README.md @@ -0,0 +1,7 @@ +# InputNumber + +Enter a number within certain range with the mouse or keyboard. See [Ant Design](https://ant.design/components/input-number/) for more information. + +## Examples + + diff --git a/docs/components/antd/input_number/app.py b/docs/components/antd/input_number/app.py new file mode 100644 index 00000000..0018b7c1 --- /dev/null +++ b/docs/components/antd/input_number/app.py @@ -0,0 +1,6 @@ +from helper.Docs import Docs + +docs = Docs(__file__) + +if __name__ == "__main__": + docs.render().queue().launch() diff --git a/docs/components/antd/input_number/demos/basic.py b/docs/components/antd/input_number/demos/basic.py new file mode 100644 index 00000000..a92ba4fc --- /dev/null +++ b/docs/components/antd/input_number/demos/basic.py @@ -0,0 +1,42 @@ +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(direction="vertical"): + antd.InputNumber() + antd.InputNumber(min=1, max=10, keyboard=True) + antd.InputNumber(value=100, addon_after="$", addon_before="+") + with antd.InputNumber(value=100): + with ms.Slot("addonBefore"): + antd.Select(value="add", + elem_style=dict(width=60), + options=[{ + "value": "add", + "label": "+" + }, { + "value": "minus", + "label": "-" + }]) + with ms.Slot("addonAfter"): + antd.Select(value="USD", + elem_style=dict(width=60), + options=[{ + "value": "USD", + "label": "$" + }, { + "value": "EUR", + "label": "€" + }, { + "value": "GBP", + "label": "£" + }, { + "value": "CNY", + "label": "¥" + }]) + +if __name__ == "__main__": + demo.queue().launch() diff --git a/docs/components/antd/mentions/README-zh_CN.md b/docs/components/antd/mentions/README-zh_CN.md new file mode 100644 index 00000000..a4edd701 --- /dev/null +++ b/docs/components/antd/mentions/README-zh_CN.md @@ -0,0 +1,8 @@ +# Mentions + +Used to mention someone or something in an input. See [Ant Design](https://ant.design/components/mentions/) for more information. + +## Examples + + + diff --git a/docs/components/antd/mentions/README.md b/docs/components/antd/mentions/README.md new file mode 100644 index 00000000..a4edd701 --- /dev/null +++ b/docs/components/antd/mentions/README.md @@ -0,0 +1,8 @@ +# Mentions + +Used to mention someone or something in an input. See [Ant Design](https://ant.design/components/mentions/) for more information. + +## Examples + + + diff --git a/docs/components/antd/mentions/app.py b/docs/components/antd/mentions/app.py new file mode 100644 index 00000000..0018b7c1 --- /dev/null +++ b/docs/components/antd/mentions/app.py @@ -0,0 +1,6 @@ +from helper.Docs import Docs + +docs = Docs(__file__) + +if __name__ == "__main__": + docs.render().queue().launch() diff --git a/docs/components/antd/mentions/demos/basic.py b/docs/components/antd/mentions/demos/basic.py new file mode 100644 index 00000000..1badd28a --- /dev/null +++ b/docs/components/antd/mentions/demos/basic.py @@ -0,0 +1,36 @@ +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(direction="vertical"): + antd.Mentions(elem_style=dict(width=320), + placeholder="Input @ to mention", + options=[{ + "value": "modelscope", + "label": "modelscope" + }, { + "value": "gradio", + "label": "gradio" + }, { + "value": "ant design", + "label": "ant design" + }]) + with antd.Mentions(elem_style=dict(width=320), + prefix=['@', "#"], + placeholder="Input @ or # to mention"): + with antd.Mentions.Option(value="modelscope"): + with ms.Slot("label"): + antd.Typography.Text("modelscope", type="success") + with antd.Mentions.Option(value="gradio"): + with ms.Slot("label"): + antd.Typography.Text("gradio", type="success") + with antd.Mentions.Option(value="ant design"): + with ms.Slot("label"): + antd.Typography.Text("ant design", type="success") + +if __name__ == "__main__": + demo.queue().launch() diff --git a/docs/components/antd/mentions/demos/dynamic_options.py b/docs/components/antd/mentions/demos/dynamic_options.py new file mode 100644 index 00000000..bdcd8998 --- /dev/null +++ b/docs/components/antd/mentions/demos/dynamic_options.py @@ -0,0 +1,43 @@ +import gradio as gr + +import modelscope_studio.components.antd as antd +import modelscope_studio.components.base as ms + + +def on_search(e: gr.EventData): + prefix = e._data['payload'][1] + if prefix == '@': + return gr.update(options=[{ + "value": "modelscope", + "label": "modelscope" + }, { + "value": "gradio", + "label": "gradio" + }, { + "value": "ant design", + "label": "ant design" + }]) + elif prefix == '#': + return gr.update(options=[{ + "value": "1.0", + "label": "1.0" + }, { + "value": "2.0", + "label": "2.0" + }, { + "value": "3.0", + "label": "3.0" + }]) + + +with gr.Blocks() as demo: + with ms.Application(): + with antd.ConfigProvider(): + mentions = antd.Mentions( + elem_style=dict(width='100%'), + prefix=['@', "#"], + placeholder="input @ to mention people, # to mention tag") + mentions.search(fn=on_search, outputs=[mentions]) + +if __name__ == "__main__": + demo.queue().launch() diff --git a/docs/components/antd/radio/README-zh_CN.md b/docs/components/antd/radio/README-zh_CN.md new file mode 100644 index 00000000..71aea445 --- /dev/null +++ b/docs/components/antd/radio/README-zh_CN.md @@ -0,0 +1,7 @@ +# Radio + +Used to select a single state from multiple options. See [Ant Design](https://ant.design/components/radio/) for more information. + +## Examples + + diff --git a/docs/components/antd/radio/README.md b/docs/components/antd/radio/README.md new file mode 100644 index 00000000..71aea445 --- /dev/null +++ b/docs/components/antd/radio/README.md @@ -0,0 +1,7 @@ +# Radio + +Used to select a single state from multiple options. See [Ant Design](https://ant.design/components/radio/) for more information. + +## Examples + + diff --git a/docs/components/antd/radio/app.py b/docs/components/antd/radio/app.py new file mode 100644 index 00000000..0018b7c1 --- /dev/null +++ b/docs/components/antd/radio/app.py @@ -0,0 +1,6 @@ +from helper.Docs import Docs + +docs = Docs(__file__) + +if __name__ == "__main__": + docs.render().queue().launch() diff --git a/docs/components/antd/radio/demos/basic.py b/docs/components/antd/radio/demos/basic.py new file mode 100644 index 00000000..dab1862f --- /dev/null +++ b/docs/components/antd/radio/demos/basic.py @@ -0,0 +1,40 @@ +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.Radio(): + ms.Text("Radio") + antd.Divider("Radio Group") + with antd.Radio.Group(): + with antd.Radio(group_value=1): + ms.Text("A") + with antd.Radio(group_value=2): + ms.Text("B") + with antd.Radio(group_value=3): + ms.Text("C") + with antd.Radio(group_value=4): + ms.Text("D") + antd.Divider("Configuring Options") + antd.Radio.Group(option_type="button", + button_style="solid", + options=[ + { + "label": 'Apple', + "value": 'Apple' + }, + { + "label": 'Pear', + "value": 'Pear' + }, + { + "label": 'Orange', + "value": 'Orange', + "disabled": True + }, + ]) +if __name__ == "__main__": + demo.queue().launch() diff --git a/docs/components/antd/rate/README-zh_CN.md b/docs/components/antd/rate/README-zh_CN.md new file mode 100644 index 00000000..13098b21 --- /dev/null +++ b/docs/components/antd/rate/README-zh_CN.md @@ -0,0 +1,7 @@ +# Rate + +Used for rating operation on something. See [Ant Design](https://ant.design/components/rate/) for more information. + +## Examples + + diff --git a/docs/components/antd/rate/README.md b/docs/components/antd/rate/README.md new file mode 100644 index 00000000..13098b21 --- /dev/null +++ b/docs/components/antd/rate/README.md @@ -0,0 +1,7 @@ +# Rate + +Used for rating operation on something. See [Ant Design](https://ant.design/components/rate/) for more information. + +## Examples + + diff --git a/docs/components/antd/rate/app.py b/docs/components/antd/rate/app.py new file mode 100644 index 00000000..0018b7c1 --- /dev/null +++ b/docs/components/antd/rate/app.py @@ -0,0 +1,6 @@ +from helper.Docs import Docs + +docs = Docs(__file__) + +if __name__ == "__main__": + docs.render().queue().launch() diff --git a/docs/components/antd/rate/demos/basic.py b/docs/components/antd/rate/demos/basic.py new file mode 100644 index 00000000..53c0ad9d --- /dev/null +++ b/docs/components/antd/rate/demos/basic.py @@ -0,0 +1,20 @@ +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(direction="vertical"): + antd.Rate(tooltips=[ + 'terrible', 'bad', 'normal', 'good', 'wonderful' + ]) + antd.Rate(allow_half=True, allow_clear=False) + antd.Rate(value=2, character="({ index = 0 }) => index + 1") + antd.Rate(value=2, character="A", allow_half=True) + with antd.Rate(value=3): + with ms.Slot("character"): + antd.Icon("SmileOutlined") +if __name__ == "__main__": + demo.queue().launch() diff --git a/frontend/antd/rate/rate.tsx b/frontend/antd/rate/rate.tsx index c3a857cc..31a9a009 100644 --- a/frontend/antd/rate/rate.tsx +++ b/frontend/antd/rate/rate.tsx @@ -1,5 +1,6 @@ import { sveltify } from '@svelte-preprocess-react'; import type { SetSlotParams } from '@svelte-preprocess-react/slot'; +import { useFunction } from '@utils/hooks/useFunction'; import { renderParamsSlot } from '@utils/renderParamsSlot'; import { type GetProps, Rate as ARate } from 'antd'; @@ -21,6 +22,7 @@ export const Rate = sveltify< elRef, ...props }) => { + const characterFunction = useFunction(character, true); return ( <>
{children}
@@ -34,7 +36,7 @@ export const Rate = sveltify< character={ slots.character ? renderParamsSlot({ slots, setSlotParams, key: 'character' }) - : character + : characterFunction || character } /> diff --git a/frontend/utils/createFunction.ts b/frontend/utils/createFunction.ts index c5e99dd4..eb7bdb7f 100644 --- a/frontend/utils/createFunction.ts +++ b/frontend/utils/createFunction.ts @@ -1,7 +1,18 @@ +function isFunctionString(str: string): boolean { + const funcRegex = + /^(?:async\s+)?(?:function\s*(?:\w*\s*)?\(|\([\w\s,=]*\)\s*=>|\(\{[\w\s,=]*\}\)\s*=>|function\s*\*\s*\w*\s*\()/i; + + return funcRegex.test(str.trim()); +} + export function createFunction any>( - target: any + target: any, + plainText = false ): T | undefined { try { + if (plainText && !isFunctionString(target)) { + return undefined; + } if (typeof target == 'string') { let formattedStr = target.trim(); if (formattedStr.startsWith(';')) { @@ -10,7 +21,6 @@ export function createFunction any>( if (formattedStr.endsWith(';')) { formattedStr = formattedStr.slice(0, -1); } - return new Function( `return (...args) => (${formattedStr})(...args)` )() as T; diff --git a/frontend/utils/hooks/useFunction.ts b/frontend/utils/hooks/useFunction.ts index 030ec2fb..cf5451ae 100644 --- a/frontend/utils/hooks/useFunction.ts +++ b/frontend/utils/hooks/useFunction.ts @@ -2,8 +2,11 @@ import { useMemo } from 'react'; import { createFunction } from '../createFunction'; -export function useFunction any>(target: any) { +export function useFunction any>( + target: any, + plainText?: boolean +) { return useMemo(() => { - return createFunction(target); - }, [target]); + return createFunction(target, plainText); + }, [target, plainText]); }