Spaces:
Running
Running
import gradio as gr | |
import modelscope_studio.components.antd as antd | |
import modelscope_studio.components.base as ms | |
default_locale = "en_US" | |
default_direction = 'ltr' | |
default_color = "#816DF8" | |
with gr.Blocks() as demo: | |
with ms.Application(): | |
with antd.ConfigProvider( | |
locale=default_locale, | |
direction=default_direction, | |
theme=dict(token=dict( | |
colorPrimary=default_color))) as config_provider: | |
with antd.Card(): | |
with ms.Div(elem_style=dict(marginBottom=16)): | |
ms.Span("change locale of components:", | |
elem_style=dict(marginInlineEnd=16)) | |
with antd.Radio.Group(value=default_locale) as locale: | |
with antd.Radio("en_US"): | |
ms.Text("English") | |
with antd.Radio("zh_CN"): | |
ms.Text("中文") | |
with antd.Radio("ja_JP"): | |
ms.Text("日本語") | |
with antd.Radio("ko_KR"): | |
ms.Text("한국어") | |
with antd.Space(wrap=True): | |
antd.DatePicker() | |
antd.DatePicker.RangePicker() | |
antd.TimePicker() | |
antd.TimePicker.RangePicker() | |
with ms.Div(elem_style=dict(marginBottom=16)): | |
ms.Span("change direction of components:", | |
elem_style=dict(marginInlineEnd=16)) | |
with antd.Radio.Group( | |
value=default_direction) as direction: | |
with antd.Radio.Button("ltr"): | |
ms.Text("LTR") | |
with antd.Radio.Button("rtl"): | |
ms.Text("RTL") | |
antd.Input(placeholder="do something...") | |
with ms.Div(elem_style=dict(marginBottom=16)): | |
ms.Span("change theme of components:", | |
elem_style=dict(marginInlineEnd=16)) | |
with antd.Space(): | |
with antd.Checkbox.Group() as theme: | |
antd.Checkbox.Group.Option("dark", label="dark") | |
antd.Checkbox.Group.Option("compact", | |
label="compact") | |
ms.Text("Primary Color: ") | |
color = antd.ColorPicker(value=default_color) | |
antd.Button("Primary Button", type="primary", block=True) | |
locale.change(fn=lambda _locale: gr.update(locale=_locale), | |
inputs=[locale], | |
outputs=[config_provider]) | |
direction.change(fn=lambda _direction: gr.update(direction=_direction), | |
inputs=[direction], | |
outputs=[config_provider]) | |
gr.on( | |
[theme.change, color.change], | |
fn=lambda _theme, _color: gr.update(theme=dict( | |
token=dict(colorPrimary=_color) if _color else None, | |
algorithm=dict(dark=True | |
if _theme and 'dark' in _theme else False, | |
compact=True | |
if _theme and 'compact' in _theme else False))), | |
inputs=[theme, color], | |
outputs=[config_provider]) | |
if __name__ == "__main__": | |
demo.queue().launch() | |