Spaces:
Running
Running
| import gradio as gr | |
| import modelscope_studio.components.antd as antd | |
| import modelscope_studio.components.base as ms | |
| card_contents = [ | |
| ("Card 1", 120), | |
| ("Card 2", 80), | |
| ("Card 3", 160), | |
| ("Card 4", 100), | |
| ("Card 5", 140), | |
| ("Card 6", 90), | |
| ("Card 7", 110), | |
| ("Card 8", 130), | |
| ] | |
| default_columns = 3 | |
| with gr.Blocks() as demo: | |
| with ms.Application(): | |
| with antd.ConfigProvider(): | |
| with antd.Flex(gap="middle", vertical=True): | |
| ms.Div("Select number of columns:") | |
| columns_segmented = antd.Segmented(default_columns, | |
| options=[ | |
| dict(label="1 Column", | |
| value=1), | |
| dict(label="2 Columns", | |
| value=2), | |
| dict(label="3 Columns", | |
| value=3), | |
| dict(label="4 Columns", | |
| value=4), | |
| ]) | |
| with antd.Masonry(columns=default_columns, | |
| gutter=16) as masonry: | |
| for title, height in card_contents: | |
| with antd.Masonry.Item(): | |
| with antd.Card(title=title, | |
| elem_style=dict(marginBottom=0)): | |
| ms.Div(elem_style=dict(height=height, | |
| background='#f0f5ff', | |
| borderRadius=4)) | |
| columns_segmented.change( | |
| fn=lambda _columns: gr.update(columns=_columns), | |
| inputs=[columns_segmented], | |
| outputs=[masonry]) | |
| if __name__ == "__main__": | |
| demo.queue().launch() | |