feat: add layout template `coder_artifacts`

app.py

@@ -15,11 +15,11 @@ def get_text(text: str, cn_text: str):
     return text
 
 
-def get_docs(file_path: str, type: Literal["antd", "base"]):
+def get_docs(type: Literal["antd", "antdx", "base"]):
     import importlib.util
 
     components = []
-    components_dir = os.path.join(os.path.dirname(file_path), "components",
+    components_dir = os.path.join(os.path.dirname(__file__), "components",
                                   type)
     for dir in os.listdir(components_dir):
         abs_dir = os.path.join(components_dir, dir)
@@ -38,15 +38,49 @@ def get_docs(file_path: str, type: Literal["antd", "base"]):
     return docs
 
 
-index_docs = {"modelscope_studio": Docs(__file__)}
+def get_layout_templates():
+    import importlib.util
+
+    templates = []
+    templates_dir = os.path.join(os.path.dirname(__file__), "layout_templates")
+    for dir in os.listdir(templates_dir):
+        abs_dir = os.path.join(templates_dir, dir)
+        if os.path.isdir(abs_dir):
+            app_file = os.path.join(abs_dir, "app.py")
+            if os.path.exists(app_file):
+                templates.append(dir)
+
+    docs = {}
+    for template in templates:
+        spec = importlib.util.spec_from_file_location(
+            "doc", os.path.join(templates_dir, template, "app.py"))
+        module = importlib.util.module_from_spec(spec)
+        spec.loader.exec_module(module)
+        docs[template] = module.docs
+    return docs
+
+
+layout_templates = get_layout_templates()
 
-base_docs = get_docs(__file__, "base")
-antd_docs = get_docs(__file__, "antd")
+index_docs = {"overview": Docs(__file__), **layout_templates}
+
+base_docs = get_docs("base")
+antd_docs = get_docs("antd")
+# antdx_docs = get_docs("antdx")
 
 default_active_tab = "index"
 index_menu_items = [{
     "label": get_text("ModelScope-Studio", "ModelScope-Studio"),
-    "key": "modelscope_studio"
+    "key": "overview"
+}, {
+    "label":
+    get_text("Layout Templates", "布局模板"),
+    "type":
+    "group",
+    "children": [{
+        "label": get_text("Coder-Artifacts", "Coder-Artifacts"),
+        "key": "coder_artifacts"
+    }]
 }]
 
 base_menu_items = [{
@@ -350,6 +384,35 @@ antd_menu_items = [{
     }]
 }]
 
+antdx_menu_items = [{
+    "label": get_text("Overview", "概览"),
+    "key": "overview"
+}, {
+    "label":
+    get_text("Common", "通用"),
+    "type":
+    "group",
+    "children": [{
+        "label": get_text("Bubble", "Bubble 对话气泡"),
+        "key": "bubble"
+    }, {
+        "label": get_text("Conversations", "Conversations 管理对话"),
+        "key": "conversations"
+    }]
+}, {
+    "label":
+    get_text("Wake", "唤醒"),
+    "type":
+    "group",
+    "children": [{
+        "label": get_text("Welcome", "Welcome 欢迎"),
+        "key": "welcome"
+    }, {
+        "label": get_text("Prompts", "Prompts 提示集"),
+        "key": "prompts"
+    }]
+}]
+
 
 def logo():
     with antd.Flex(align='center', gap=8):
@@ -386,7 +449,7 @@ tabs = [
     {
         "label": get_text("Overview", "概览"),
         "key": "index",
-        "default_active_key": "modelscope_studio",
+        "default_active_key": "overview",
         "menus": index_menu_items
     },
     {
@@ -402,6 +465,12 @@ tabs = [
         "menus": antd_menu_items,
         "extra_menu_footer": more_components
     },
+    # {
+    #     "label": get_text("Antdx Components", "Antdx 组件"),
+    #     "key": "antdx",
+    #     "default_active_key": "overview",
+    #     "menus": antdx_menu_items,
+    # },
     {
         "label": get_text("Version 0.x", "0.x 版本"),
         "key": "legacy",
@@ -415,6 +484,7 @@ site = Site(
         # match the key of tabs
         "index": index_docs,
         "antd": antd_docs,
+        # "antdx": antdx_docs,
         "base": base_docs
     },
     default_active_tab=default_active_tab,

components/antd/table/demos/custom_columns.py

@@ -69,6 +69,7 @@ with gr.Blocks() as demo:
                 ):
                     with ms.Slot(
                             "render",
+                            params_mapping=
                             "(_, record, index) => ({ invite: { value: 'Invite ' + record.name, index }, delete: { index }})"
                     ):
                         with antd.Space(size="middle"):

components/antdx/bubble/README-zh_CN.md

@@ -0,0 +1,12 @@
+# Bubble
+
+A bubble component for chat. See [Ant Design X](https://x.ant.design/components/bubble/) for more information.
+
+## Examples
+
+<demo name="basic" position="bottom" collapsible="true"></demo>
+<demo name="typing_effect" title="Typing Effect"></demo>
+<demo name="variant" title="Variant"></demo>
+<demo name="bubble_list" title="Bubble List"></demo>
+<demo name="custom_list_content" title="Custom List Content"></demo>
+<demo name="chatbot" title="Chatbot" position="bottom" collapsible="true"></demo>

components/antdx/bubble/README.md

@@ -0,0 +1,12 @@
+# Bubble
+
+A bubble component for chat. See [Ant Design X](https://x.ant.design/components/bubble/) for more information.
+
+## Examples
+
+<demo name="basic" position="bottom" collapsible="true"></demo>
+<demo name="typing_effect" title="Typing Effect"></demo>
+<demo name="variant" title="Variant"></demo>
+<demo name="bubble_list" title="Bubble List"></demo>
+<demo name="custom_list_content" title="Custom List Content"></demo>
+<demo name="chatbot" title="Chatbot" position="bottom" collapsible="true"></demo>

components/antdx/bubble/app.py

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

components/antdx/bubble/demos/basic.py

@@ -0,0 +1,90 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+fooAvatar = {
+    "color": '#f56a00',
+    "backgroundColor": '#fde3cf',
+}
+
+barAvatar = {
+    "color": '#fff',
+    "backgroundColor": '#87d068',
+}
+
+hideAvatar = {
+    "visibility": 'hidden',
+}
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+
+            antdx.Bubble("Hello World!")
+
+            antd.Divider("Placement and avatar")
+            with antd.Flex(gap="middle", vertical=True):
+                with antdx.Bubble(placement="start",
+                                  content="Good morning, how are you?"):
+                    with ms.Slot("avatar"):
+                        with antd.Avatar(elem_style=fooAvatar):
+                            with ms.Slot("icon"):
+                                antd.Icon("UserOutlined")
+                antdx.Bubble(placement="start",
+                             content="What a beautiful day!",
+                             avatar=dict(),
+                             styles={"avatar": hideAvatar})
+                with antdx.Bubble(placement="end",
+                                  content="Hi, good morning, I'm fine!"):
+                    with ms.Slot("avatar"):
+                        with antd.Avatar(elem_style=barAvatar):
+                            with ms.Slot("icon"):
+                                antd.Icon("UserOutlined")
+                antdx.Bubble(placement="end",
+                             content="Thank you!",
+                             avatar=dict(),
+                             styles={"avatar": hideAvatar})
+
+            antd.Divider("Header and footer")
+
+            with antdx.Bubble(
+                    "Hello, welcome to use Ant Design X! Just ask if you have any questions.",
+                    header="Ant Design X"):
+                with ms.Slot("avatar.icon"):
+                    antd.Icon("UserOutlined")
+                with ms.Slot("footer"):
+                    with antd.Space(size="small"):
+                        with antd.Button(value=None,
+                                         color="default",
+                                         variant="text",
+                                         size="small"):
+                            with ms.Slot("icon"):
+                                antd.Icon("SyncOutlined")
+                        with antd.Button(value=None,
+                                         color="default",
+                                         variant="text",
+                                         size="small"):
+                            with ms.Slot("icon"):
+                                antd.Icon("CopyOutlined")
+
+            antd.Divider("Loading")
+            with antd.Space():
+                ms.Span("Loading State")
+                loading_switch = antd.Switch(value=False)
+            with antdx.Bubble("hello world !") as loading_bubble:
+                with ms.Slot("avatar.icon"):
+                    antd.Icon("UserOutlined")
+
+            loading_switch.change(fn=lambda x: gr.update(loading=x),
+                                  inputs=[loading_switch],
+                                  outputs=[loading_bubble])
+            antd.Divider("Markdown")
+            with antdx.Bubble():
+                with ms.Slot("avatar.icon"):
+                    antd.Icon("UserOutlined")
+                with ms.Slot("content"):
+                    ms.Markdown("Hello `Markdown`!")
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/bubble/demos/bubble_list.py

@@ -0,0 +1,83 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+
+def get_bubble_items(count):
+    result = []
+    for i in range(count):
+        is_ai = i % 2 != 0
+        content = 'Mock AI content. ' * 20 if is_ai else f'Mock User content `{i}`.'
+        result.append({
+            "role": "ai" if is_ai else "user",
+            "content": content,
+            "key": i - 1
+        })
+    return result
+
+
+def add_bubble(state_value):
+    state_value["history_count"] = state_value["history_count"] + 1
+    return gr.update(value=state_value), gr.update(
+        items=get_bubble_items(state_value["history_count"]))
+
+
+with gr.Blocks() as demo:
+
+    with ms.Application():
+        state = gr.State({"history_count": 3})
+        with antdx.XProvider():
+            antd.Typography.Paragraph(
+                "Preset Bubble list. Support auto scroll. Use roles to set default properties of Bubble."
+            )
+            with antd.Flex(gap="small", vertical=True):
+                with antd.Flex(gap="small",
+                               elem_style=dict(alignSelf="flex-end")):
+                    add_bubble_btn = antd.Button("Add Bubble")
+                    scroll_btn = antd.Button("Scroll To First")
+                with antdx.Bubble.List(items=get_bubble_items(3),
+                                       elem_style=dict(maxHeight=300),
+                                       elem_id="bubble-list") as bubble_list:
+                    # Define Roles
+                    with ms.Slot("roles"):
+                        with antdx.Bubble.List.Role(
+                                role="ai",
+                                placement="start",
+                                typing=dict(step=5, interval=20),
+                                elem_style=dict(maxWidth=600)):
+                            with ms.Slot("avatar"):
+                                with antd.Avatar(elem_style=dict(
+                                        backgroundColor="#fde3cf")):
+                                    with ms.Slot("icon"):
+                                        antd.Icon("UserOutlined")
+                            # use messageRender to render markdown content
+                            with ms.Slot(
+                                    "messageRender",
+                                    params_mapping="""content => content"""):
+                                ms.Markdown()
+
+                        with antdx.Bubble.List.Role(
+                                role="user",
+                                placement="end",
+                        ):
+                            with ms.Slot("avatar"):
+                                with antd.Avatar(elem_style=dict(
+                                        backgroundColor="#87d068")):
+                                    with ms.Slot("icon"):
+                                        antd.Icon("UserOutlined")
+                            with ms.Slot(
+                                    "messageRender",
+                                    params_mapping="(content) => content"):
+                                ms.Markdown()
+            add_bubble_btn.click(fn=add_bubble,
+                                 inputs=[state],
+                                 outputs=[state, bubble_list])
+            scroll_btn.click(fn=None,
+                             js="""() => {
+                const bubbleList = document.getElementById("bubble-list");
+                bubbleList.scrollTo({ top:0, behavior:'smooth' });
+}""")
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/bubble/demos/chatbot.py

@@ -0,0 +1,149 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+
+def create_bubble_item(i: int):
+    is_ai = i % 2 != 0
+    content = 'Mock AI content. ' * 20 if is_ai else f'Mock User content `{i}`.'
+    return {
+        "role": "ai" if is_ai else "user",
+        "content": content,
+        "key": i - 1
+    }
+
+
+def add_bubble(state_value):
+    history_len = len(state_value["history"])
+    state_value["history"].append(create_bubble_item(history_len + 1))
+    return gr.update(value=state_value), gr.update(
+        items=state_value["history"])
+
+
+def refresh(state_value, e: gr.EventData):
+    clicked_key = e._data["component"]["key"]
+    gr.Info(f"You clicked refresh button, item {clicked_key}")
+    state_value["history"][clicked_key]["content"] = "Refreshed"
+    return gr.update(value=state_value), gr.update(
+        items=state_value["history"])
+
+
+def like(state_value, e: gr.EventData):
+    clicked_key = e._data["component"]["key"]
+    gr.Info(f"You clicked like button, item {clicked_key}")
+    state_value["history"][clicked_key]["meta"] = {
+        "action": "like",
+    }
+    return gr.update(value=state_value), gr.update(
+        items=state_value["history"])
+
+
+def dislike(state_value, e: gr.EventData):
+    clicked_key = e._data["component"]["key"]
+    gr.Info(f"You clicked dislike button, item {clicked_key}")
+    state_value["history"][clicked_key]["meta"] = {
+        "action": "dislike",
+    }
+    return gr.update(value=state_value), gr.update(
+        items=state_value["history"])
+
+
+default_history = [
+    create_bubble_item(1),
+    create_bubble_item(2),
+    create_bubble_item(3)
+]
+
+with gr.Blocks() as demo:
+
+    with ms.Application():
+        state = gr.State({"history": default_history})
+        with antdx.XProvider():
+            with antd.Flex(gap="small", vertical=True):
+                with antd.Flex(gap="small",
+                               elem_style=dict(alignSelf="flex-end")):
+                    add_bubble_btn = antd.Button("Add Bubble")
+                    scroll_btn = antd.Button("Scroll To First")
+                with antdx.Bubble.List(items=default_history,
+                                       elem_style=dict(maxHeight=500),
+                                       elem_id="bubble-list") as bubble_list:
+                    # Define Roles
+                    with ms.Slot("roles"):
+                        with antdx.Bubble.List.Role(
+                                role="ai",
+                                placement="start",
+                                typing=dict(step=5, interval=20),
+                                styles=dict(footer=dict(width="100%")),
+                                elem_style=dict(maxWidth=600)):
+                            with ms.Slot("avatar"):
+                                with antd.Avatar(elem_style=dict(
+                                        backgroundColor="#fde3cf")):
+                                    with ms.Slot("icon"):
+                                        antd.Icon("UserOutlined")
+                            # use messageRender to render markdown content
+                            with ms.Slot(
+                                    "messageRender",
+                                    params_mapping="""content => content"""):
+                                ms.Markdown()
+
+                            # render footer
+                            with ms.Slot("footer",
+                                         params_mapping="""(item) => {
+                                            return { refresh: { key: item.key }, like: { key: item.key, color: item.meta?.action === "like" ? 'primary' : 'default' }, dislike: { key: item.key, color: item.meta?.action === "dislike" ? 'primary' : 'default' } }
+                                         }"""):
+                                with antd.Button(
+                                        value=None,
+                                        size="small",
+                                        color="default",
+                                        variant="text",
+                                        as_item="refresh") as refresh_btn:
+                                    with ms.Slot("icon"):
+                                        antd.Icon("SyncOutlined")
+                                refresh_btn.click(fn=refresh,
+                                                  inputs=[state],
+                                                  outputs=[state, bubble_list])
+                                with antd.Button(value=None,
+                                                 size="small",
+                                                 variant="text",
+                                                 as_item="like") as like_btn:
+                                    with ms.Slot("icon"):
+                                        antd.Icon("SmileOutlined")
+                                like_btn.click(fn=like,
+                                               inputs=[state],
+                                               outputs=[state, bubble_list])
+                                with antd.Button(
+                                        value=None,
+                                        size="small",
+                                        variant="text",
+                                        as_item="dislike") as dislike_btn:
+                                    with ms.Slot("icon"):
+                                        antd.Icon("FrownOutlined")
+                                dislike_btn.click(fn=dislike,
+                                                  inputs=[state],
+                                                  outputs=[state, bubble_list])
+
+                        with antdx.Bubble.List.Role(
+                                role="user",
+                                placement="end",
+                        ):
+                            with ms.Slot("avatar"):
+                                with antd.Avatar(elem_style=dict(
+                                        backgroundColor="#87d068")):
+                                    with ms.Slot("icon"):
+                                        antd.Icon("UserOutlined")
+                            with ms.Slot(
+                                    "messageRender",
+                                    params_mapping="(content) => content"):
+                                ms.Markdown()
+            add_bubble_btn.click(fn=add_bubble,
+                                 inputs=[state],
+                                 outputs=[state, bubble_list])
+            scroll_btn.click(fn=None,
+                             js="""() => {
+                const bubbleList = document.getElementById("bubble-list");
+                bubbleList.scrollTo({ top:0, behavior:'smooth' });
+}""")
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/bubble/demos/custom_list_content.py

@@ -0,0 +1,118 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+items = [
+    {
+        "key": '1',
+        "role": "ai-markdown",
+        "content": "`Hello, world!`"
+    },
+    {
+        "key": '2',
+        "role": "ai-error-message",
+        "content": "Error message"
+    },
+    {
+        "key":
+        '3',
+        "role":
+        'ai-suggestion',
+        "content": [
+            {
+                "key": '1',
+                "description":
+                'How to rest effectively after long hours of work?',
+            },
+            {
+                "key":
+                '2',
+                "description":
+                'What are the secrets to maintaining a positive mindset?',
+            },
+            {
+                "key": '3',
+                "description": 'How to stay calm under immense pressure?',
+            },
+        ],
+    },
+    {
+        "key":
+        '4',
+        "role":
+        'ai-file',
+        "content": [
+            {
+                "uid": '1',
+                "name": 'excel-file.xlsx',
+                "size": 111111,
+                "description": 'Checking the data',
+            },
+            {
+                "uid": '2',
+                "name": 'word-file.docx',
+                "size": 222222,
+                "status": 'uploading',
+                "percent": 23,
+            },
+        ],
+    },
+]
+
+with gr.Blocks() as demo:
+
+    with ms.Application():
+        with antdx.XProvider():
+            antd.Typography.Paragraph(
+                "Customize the content of the bubble list, which is very useful for personalized customization scenarios."
+            )
+            with antdx.Bubble.List(items=items) as bubble_list:
+                # Define Roles
+                with ms.Slot("roles"):
+                    with antdx.Bubble.List.Role(role="ai-markdown",
+                                                placement="start"):
+                        with ms.Slot("avatar"):
+                            with antd.Avatar(elem_style=dict(
+                                    backgroundColor="#fde3cf")):
+                                with ms.Slot("icon"):
+                                    antd.Icon("UserOutlined")
+                        with ms.Slot("messageRender",
+                                     params_mapping="(content) => content"):
+                            ms.Markdown()
+                    with antdx.Bubble.List.Role(role="ai-error-message",
+                                                placement="start"):
+                        with ms.Slot("avatar"):
+                            with antd.Avatar(elem_style=dict(
+                                    backgroundColor="#fde3cf")):
+                                with ms.Slot("icon"):
+                                    antd.Icon("UserOutlined")
+                        with ms.Slot("messageRender",
+                                     params_mapping="(content) => content"):
+                            antd.Typography.Text(type="danger")
+                    with antdx.Bubble.List.Role(
+                            role="ai-suggestion",
+                            placement="start",
+                            variant="borderless",
+                            avatar=dict(style=dict(visibility='hidden'))):
+                        with ms.Slot("messageRender",
+                                     params_mapping="(items) => ({ items })"):
+                            prompts = antdx.Prompts(vertical=True)
+
+                    with antdx.Bubble.List.Role(
+                            role="ai-file",
+                            placement="start",
+                            variant="borderless",
+                            avatar=dict(style=dict(visibility='hidden'))):
+                        with ms.Slot("messageRender",
+                                     params_mapping="""(content) => {
+                                            return {
+                                                each: content?.map(item => ({ item }))
+                                            }
+}"""):
+                            with antd.Flex(vertical=True, gap="middle"):
+                                with ms.Each(as_item="each"):
+                                    antdx.Attachments.FileCard()
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/bubble/demos/typing_effect.py

@@ -0,0 +1,41 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+text = "Ant Design X love you! "
+
+
+def repeat(state_value):
+    if state_value["repeat"] < 5:
+        state_value["repeat"] = state_value["repeat"] + 1
+    else:
+        state_value["repeat"] = 1
+    return gr.update(value=state_value), gr.update(
+        value=f"Repeat {state_value["repeat"]} Times"), gr.update(
+            content=text * state_value["repeat"]), gr.update(content=text * state_value["repeat"])
+
+
+with gr.Blocks() as demo:
+    state = gr.State({"repeat": 1})
+    with ms.Application():
+        with antdx.XProvider():
+            antd.Typography.Paragraph("Enable typing output by setting the typing prop. If the updated content is a subset of the previous content, it will continue to output, otherwise it will output again.")
+            with antd.Flex(vertical=True, gap="small"):
+                with antdx.Bubble(content=text,
+                                  typing=dict(step=2, interval=50)) as bubble1:
+                    with ms.Slot("avatar.icon"):
+                        antd.Icon("UserOutlined")
+                with antdx.Bubble(content=text,
+                                  typing=dict(step=2, interval=50,
+                                              suffix="💗")) as bubble2:
+                    with ms.Slot("avatar.icon"):
+                        antd.Icon("UserOutlined")
+                btn = antd.Button("Repeat 1 Times",
+                                  elem_style=dict(alignSelf="flex-end"))
+                btn.click(fn=repeat,
+                          inputs=[state],
+                          outputs=[state, btn, bubble1, bubble2])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/bubble/demos/variant.py

@@ -0,0 +1,56 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            antd.Typography.Paragraph(
+                "Set the style variant of the bubble through the variant property."
+            )
+            with antd.Flex(vertical=True, gap="middle"):
+                with antdx.Bubble(variant="filled", content="variant: filled"):
+                    with ms.Slot("avatar.icon"):
+                        antd.Icon("UserOutlined")
+                with antdx.Bubble(variant="outlined",
+                                  content="variant: outlined"):
+                    with ms.Slot("avatar.icon"):
+                        antd.Icon("UserOutlined")
+                with antdx.Bubble(variant="shadow", content="variant: shadow"):
+                    with ms.Slot("avatar.icon"):
+                        antd.Icon("UserOutlined")
+                with antdx.Bubble(variant="borderless"):
+                    with ms.Slot("avatar.icon"):
+                        antd.Icon("UserOutlined")
+                    with ms.Slot("content"):
+                        with antdx.Prompts(
+                                vertical=True,
+                                title="variant: borderless to customize"):
+                            with antdx.Prompts.Item(
+                                    key='1',
+                                    description=
+                                    'How to rest effectively after long hours of work?'
+                            ):
+                                with ms.Slot("icon"):
+                                    antd.Icon("CoffeeOutlined",
+                                              elem_style={"color": '#964B00'})
+                            with antdx.Prompts.Item(
+                                    key='2',
+                                    description=
+                                    'What are the secrets to maintaining a positive mindset?',
+                            ):
+                                with ms.Slot("icon"):
+                                    antd.Icon("SmileOutlined",
+                                              elem_style={"color": '#FAAD14'})
+                            with antdx.Prompts.Item(
+                                    key='3',
+                                    description=
+                                    'How to stay calm under immense pressure?',
+                            ):
+                                with ms.Slot("icon"):
+                                    antd.Icon("FireOutlined",
+                                              elem_style={"color": '#FF4D4F'})
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/conversations/README-zh_CN.md

@@ -0,0 +1,9 @@
+# Conversations
+
+Used to manage and view the conversation list. See [Ant Design X](https://x.ant.design/components/conversations/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="operations" title="Operations"></demo>
+<demo name="group" title="Group"></demo>

components/antdx/conversations/README.md

@@ -0,0 +1,9 @@
+# Conversations
+
+Used to manage and view the conversation list. See [Ant Design X](https://x.ant.design/components/conversations/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="operations" title="Operations"></demo>
+<demo name="group" title="Group"></demo>

components/antdx/conversations/app.py

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

components/antdx/conversations/demos/basic.py

@@ -0,0 +1,49 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+
+def active_change(e: gr.EventData):
+    print(e._data["payload"])
+
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            conversations1 = antdx.Conversations(default_active_key="item1",
+                                                 items=[{
+                                                     "key": "item1",
+                                                     "label": "Item1"
+                                                 }, {
+                                                     "key": "item2",
+                                                     "label": "Item2",
+                                                 }, {
+                                                     "key": "item3",
+                                                     "label": "Item3",
+                                                 }, {
+                                                     "key": "item4",
+                                                     "label": "Item4",
+                                                     "disabled": True
+                                                 }])
+
+            antd.Divider("Customized Item")
+
+            with antdx.Conversations(
+                    default_active_key="item1") as conversations2:
+                with antdx.Conversations.Item(key="item1"):
+                    with ms.Slot("label"):
+                        antd.Typography.Text("Item1", type="success")
+                    with ms.Slot("icon"):
+                        antd.Icon()
+
+                with antdx.Conversations.Item(key="item2"):
+                    with ms.Slot("label"):
+                        antd.Typography.Text("Item2", type="success")
+                    with ms.Slot("icon"):
+                        antd.Icon()
+            conversations1.active_change(fn=active_change)
+            conversations2.active_change(fn=active_change)
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/conversations/demos/group.py

@@ -0,0 +1,30 @@
+import gradio as gr
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            conversations1 = antdx.Conversations(default_active_key="item1",
+                                                 groupable=True,
+                                                 items=[{
+                                                     "key": "item1",
+                                                     "label": "Item1",
+                                                     "group": "Group1"
+                                                 }, {
+                                                     "key": "item2",
+                                                     "label": "Item2",
+                                                     "group": "Group1"
+                                                 }, {
+                                                     "key": "item3",
+                                                     "label": "Item3",
+                                                     "group": "Group2"
+                                                 }, {
+                                                     "key": "item4",
+                                                     "label": "Item4",
+                                                     "group": "Group2",
+                                                     "disabled": True
+                                                 }])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/conversations/demos/operations.py

@@ -0,0 +1,46 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+
+def menu_click(e: gr.EventData):
+    print(e._data["payload"])
+
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            with antdx.Conversations(default_active_key="item1",
+                                     items=[{
+                                         "key": "item1",
+                                         "label": "Item1"
+                                     }, {
+                                         "key": "item2",
+                                         "label": "Item2",
+                                     }, {
+                                         "key": "item3",
+                                         "label": "Item3",
+                                     }, {
+                                         "key": "item4",
+                                         "label": "Item4",
+                                         "disabled": True
+                                     }]) as conversations:
+                with ms.Slot("menu.items"):
+                    with antd.Menu.Item(label="Operation 1", key="o1"):
+                        with ms.Slot("icon"):
+                            antd.Icon("EditOutlined")
+                    with antd.Menu.Item(label="Operation 2",
+                                        key="o2",
+                                        disabled=True):
+                        with ms.Slot("icon"):
+                            antd.Icon("StopOutlined")
+                    with antd.Menu.Item(label="Operation 3",
+                                        key="o3",
+                                        danger=True):
+                        with ms.Slot("icon"):
+                            antd.Icon("DeleteOutlined")
+            conversations.menu_click(fn=menu_click)
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/overview/README-zh_CN.md

@@ -0,0 +1,20 @@
+# 概览
+
+`modelscope_studio`集成了 [Ant Design X](https://x.ant.design/) 的组件，并支持大部分的组件属性，您只需要引入`antdx`模块即可直接使用。
+
+```python
+import modelscope_studio.components.antdx as antdx
+```
+
+## 快速开始
+
+<demo name="quick_start"></demo>
+
+注意：其中`ms.Application`与`antdx.XProvider`（或者`antd.ConfigProvider`）是必须的。
+
+- `Application` 包含了`modelscope_studio`中所有的组件依赖，请确保`modelscope_studio`所有导出的组件都被其包裹，否则页面将会无法成功预览。
+- `XProvider`（`ConfigProvider`） 与 Ant Design X（Ant Design）中的功能一致，除此之外，我们还加了一些额外的适配来兼容 Gradio 的样式。因此，为了保证页面样式正常，所有的`antdx`组件需要包裹在该组件下。
+
+## 其他
+
+同`Antd`组件。

components/antdx/overview/README.md

@@ -0,0 +1,20 @@
+# Overview
+
+`modelscope_studio` integrates [Ant Design X](https://x.ant.design/) components and supports most component properties. You can use them directly by importing the `antdx` module.
+
+```python
+import modelscope_studio.components.antdx as antdx
+```
+
+## Quick Start
+
+<demo name="quick_start"></demo>
+
+Note: Both `ms.Application` and `antdx.XProvider`(or `antd.ConfigProvider`) are required.
+
+- `Application` contains all component dependencies in `modelscope_studio`. Please ensure that all components exported from `modelscope_studio` are wrapped by it, otherwise the page will not be successfully previewed.
+- `XProvider`(`ConfigProvider`) functions the same as in Ant Design X(Ant Design). Additionally, we have added some extra adaptations to be compatible with Gradio's styles. Therefore, to ensure normal page styling, all `antdx` components need to be wrapped within this component.
+
+## Others
+
+Same as `Antd` components.

components/antdx/overview/app.py

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

components/antdx/overview/demos/quick_start.py

@@ -0,0 +1,17 @@
+import gradio as gr
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():  # or antd.ConfigProvider
+            antdx.Welcome(
+                icon=
+                "https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp",
+                title="Hello, I'm Ant Design X",
+                description=
+                "Base on Ant Design, AGI product interface solution, create a better intelligent vision~"
+            )
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/prompts/README-zh_CN.md

@@ -0,0 +1,8 @@
+# Prompts
+
+Display a predefined set of questions or suggestion. See [Ant Design X](https://x.ant.design/components/prompts/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="nest_usage" title="Nest Usage"></demo>

components/antdx/prompts/README.md

@@ -0,0 +1,8 @@
+# Prompts
+
+Display a predefined set of questions or suggestion. See [Ant Design X](https://x.ant.design/components/prompts/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="nest_usage" title="Nest Usage"></demo>

components/antdx/prompts/app.py

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

components/antdx/prompts/demos/basic.py

@@ -0,0 +1,81 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+
+def item_click(e: gr.EventData):
+    payload = e._data["payload"]
+    gr.Info("You clicked on item " + payload[0]["data"]["key"])
+
+
+default_vertical = False
+default_wrap = False
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            vertical = antd.Switch(value=default_vertical,
+                                   checked_children="Vertical",
+                                   un_checked_children="Horizontal")
+            wrap = antd.Switch(value=default_wrap,
+                               checked_children="Wrap",
+                               un_checked_children="No Wrap")
+            with antdx.Prompts(
+                    title="✨ Inspirational Sparks and Marvelous Tips",
+                    wrap=default_wrap,
+                    vertical=default_vertical) as prompts:
+                with antdx.Prompts.Item(
+                        key='1',
+                        label='Ignite Your Creativity',
+                        description='Got any sparks for a new project?',
+                        disabled=True):
+                    with ms.Slot("icon"):
+                        antd.Icon("BulbOutlined",
+                                  elem_style={"color": '#FFD700'})
+                with antdx.Prompts.Item(
+                        key='2',
+                        label='Uncover Background Info',
+                        description=
+                        'Help me understand the background of this topic.',
+                ):
+                    with ms.Slot("icon"):
+                        antd.Icon("InfoCircleOutlined",
+                                  elem_style={"color": '#1890FF'})
+                with antdx.Prompts.Item(
+                        key='3',
+                        label='Efficiency Boost Battle',
+                        description='How can I work faster and better?',
+                ):
+                    with ms.Slot("icon"):
+                        antd.Icon("RocketOutlined",
+                                  elem_style={"color": '#722ED1'})
+                with antdx.Prompts.Item(
+                        key='4',
+                        label='Tell me a Joke',
+                        description=
+                        'Why do not ants get sick? Because they have tiny ant-bodies!',
+                ):
+                    with ms.Slot("icon"):
+                        antd.Icon("SmileOutlined",
+                                  elem_style={"color": '#52C41A'})
+                with antdx.Prompts.Item(
+                        key='5',
+                        label='Common Issue Solutions',
+                        description=
+                        'How to solve common issues? Share some tips!',
+                ):
+                    with ms.Slot("icon"):
+                        antd.Icon("WarningOutlined",
+                                  elem_style={"color": '#FF4D4F'})
+
+            prompts.item_click(fn=item_click)
+            vertical.change(fn=lambda x: gr.update(vertical=x),
+                            inputs=[vertical],
+                            outputs=[prompts])
+            wrap.change(fn=lambda x: gr.update(wrap=x),
+                        inputs=[wrap],
+                        outputs=[prompts])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/prompts/demos/nest_usage.py

@@ -0,0 +1,86 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+
+def item_click(e: gr.EventData):
+    payload = e._data["payload"]
+    gr.Info("You clicked on item " + payload[0]["data"]["key"])
+
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider(theme=dict(algorithm=dict(dark=False))):
+            with antd.Card(elem_style=dict(borderRadius=0, border=0)):
+                with antdx.Prompts(
+                        title="Do you want?",
+                        wrap=True,
+                        styles=dict(item={
+                            "flex": 'none',
+                            "width": 'calc(30% - 6px)',
+                            "backgroundImage":
+                            "linear-gradient(137deg, #e5f4ff 0%, #efe7ff 100%)",
+                            "border": 0,
+                        },
+                                    subItem={
+                                        "background": 'rgba(255,255,255,0.45)',
+                                        "border": '1px solid #FFF',
+                                    })) as prompts:
+                    with antdx.Prompts.Item(
+                            key='1',
+                            description='What are you interested in?',
+                    ):
+                        with ms.Slot("label"):
+                            with antd.Space():
+                                antd.Icon("FireOutlined",
+                                          elem_style={"color": '#FF4D4F'})
+                                ms.Text("Hot Topics")
+                        antdx.Prompts.Item(key="1-1",
+                                           description="What's new in X?")
+                        antdx.Prompts.Item(key="1-2",
+                                           description="What's AGI?")
+                        antdx.Prompts.Item(key="1-3",
+                                           description="Where is the doc?")
+                    with antdx.Prompts.Item(
+                            key='2',
+                            description='How to design a good product?',
+                    ):
+                        with ms.Slot("label"):
+                            with antd.Space():
+                                antd.Icon("ReadOutlined",
+                                          elem_style={"color": '#1890FF'})
+                                ms.Text("Design Guide")
+                        with antdx.Prompts.Item(key="2-1",
+                                                description="Know the well"):
+                            with ms.Slot("icon"):
+                                antd.Icon("HeartOutlined")
+                        with antdx.Prompts.Item(key="2-2",
+                                                description="Set the AI role"):
+                            with ms.Slot("icon"):
+                                antd.Icon("SmileOutlined")
+                        with antdx.Prompts.Item(
+                                key="2-3", description="Express the feeling"):
+                            with ms.Slot("icon"):
+                                antd.Icon("CommentOutlined")
+                    with antdx.Prompts.Item(
+                            key='3',
+                            description='How to start a new project?',
+                    ):
+                        with ms.Slot("label"):
+                            with antd.Space():
+                                antd.Icon("RocketOutlined",
+                                          elem_style={"color": '#722ED1'})
+                                ms.Text("Start Creating")
+                        antdx.Prompts.Item(key="3-1",
+                                           label='Fast Start',
+                                           description="Install Ant Design X")
+                        antdx.Prompts.Item(
+                            key="3-2",
+                            label='Online Playground',
+                            description="Play on the web without installing")
+
+                prompts.item_click(fn=item_click)
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/welcome/README-zh_CN.md

@@ -0,0 +1,7 @@
+# Welcome
+
+Clearly convey the scope of intent and expected functionality to the user. See [Ant Design X](https://x.ant.design/components/welcome/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

components/antdx/welcome/README.md

@@ -0,0 +1,7 @@
+# Welcome
+
+Clearly convey the scope of intent and expected functionality to the user. See [Ant Design X](https://x.ant.design/components/welcome/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

components/antdx/welcome/app.py

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

components/antdx/welcome/demos/basic.py

@@ -0,0 +1,36 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            antdx.Welcome(
+                icon=
+                "https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp",
+                title="Hello, I'm Ant Design X",
+                description=
+                "Base on Ant Design, AGI product interface solution, create a better intelligent vision~"
+            )
+
+            antd.Divider("Borderless")
+
+            with antdx.Welcome(
+                    icon=
+                    "https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp",
+                    title="Hello, I'm Ant Design X",
+                    description=
+                    "Base on Ant Design, AGI product interface solution, create a better intelligent vision~",
+                    variant="borderless"):
+                with ms.Slot("extra"):
+                    with antd.Space():
+                        with antd.Button(None):
+                            with ms.Slot("icon"):
+                                antd.Icon("ShareAltOutlined")
+                        with antd.Button(None):
+                            with ms.Slot("icon"):
+                                antd.Icon("EllipsisOutlined")
+
+if __name__ == "__main__":
+    demo.queue().launch()

helper/Docs.py

@@ -78,6 +78,8 @@ class Docs:
                      demo_name,
                      prefix='',
                      suffix='',
+                     position="left",
+                     collapsible=False,
                      fixed=False,
                      title=''):
         content = self._read_file(f"./demos/{demo_name}.py")
@@ -87,38 +89,49 @@ class Docs:
             if title:
                 with ms.Slot("title"):
                     ms.Text(title)
-            with antd.Row(align="stretch", wrap=True, gutter=8):
-                with antd.Col(sm=dict(span=10, order=1),
+            with antd.Row(align="stretch", wrap=True, gutter=[8, 8]):
+                with antd.Col(sm=dict(span=24 if position == "bottom" else 10,
+                                      order=2 if position == "bottom" else 1),
                               xs=dict(span=24, order=2)):
-                    with antd.Row(elem_style=dict(height='100%'),
-                                  gutter=[8, 8]):
-                        with antd.Col(sm=0, xs=24):
-                            antd.Divider(type="horizontal",
-                                         variant="dashed",
-                                         elem_style=dict(width='100%',
-                                                         margin='8px 0 0'))
-                        with antd.Col(sm=23, xs=24):
-                            prefix = prefix + "\n" if prefix else ""
-                            suffix = "\n" + suffix if suffix else ""
-                            ms.Markdown(f"""{prefix}```python
-{content}
-```{suffix}""",
-                                        header_links=True)
-
-                        with antd.Col(sm=1,
-                                      xs=0,
-                                      elem_style=dict(height="100%")):
-                            with ms.Div(
-                                    elem_style=dict(display="flex",
-                                                    justifyContent="center",
-                                                    width="100%",
-                                                    height="100%")):
-                                antd.Divider(type="vertical",
+
+                    def render_code():
+                        with antd.Row(elem_style=dict(height='100%'),
+                                      gutter=[8, 8]):
+                            with antd.Col(sm=0, xs=24):
+                                antd.Divider(type="horizontal",
                                              variant="dashed",
-                                             elem_style=dict(height='100%',
-                                                             margin=0))
+                                             elem_style=dict(width='100%',
+                                                             margin='8px 0 0'))
+                            with antd.Col(sm=23, xs=24):
+                                ms.Markdown(
+                                    f"""{prefix + "\n" if prefix else ""}```python
+{content}
+  ```{"\n" + suffix if suffix else ""}""",
+                                    header_links=True)
+
+                            with antd.Col(sm=1,
+                                          xs=0,
+                                          elem_style=dict(height="100%")):
+                                with ms.Div(elem_style=dict(
+                                        display="flex",
+                                        justifyContent="center",
+                                        width="100%",
+                                        height="100%")):
+                                    antd.Divider(type="vertical",
+                                                 variant="dashed",
+                                                 elem_style=dict(height='100%',
+                                                                 margin=0))
+
+                    if collapsible:
+                        with antd.Collapse():
+                            with antd.Collapse.Item(label="Show Code",
+                                                    key="code"):
+                                render_code()
+                    else:
+                        render_code()
                 with antd.Col(
-                        sm=dict(span=14, order=2),
+                        sm=dict(span=24 if position == "bottom" else 14,
+                                order=1 if position == "bottom" else 2),
                         xs=dict(span=24, order=1),
                         elem_style=dict(
                             width='100%',
@@ -136,9 +149,19 @@ class Docs:
                 self._render_demo(item["name"],
                                   prefix=item["prefix"],
                                   suffix=item["suffix"],
+                                  position=item["position"],
+                                  collapsible=item["collapsible"],
                                   fixed=item["fixed"],
                                   title=item["title"])
 
+    def get_css(self):
+        css = ""
+        for demo_name in self.demo_modules:
+            module = self.demo_modules[demo_name]
+            if hasattr(module, "css"):
+                css += module.css
+        return css
+
     def render(self):
         with gr.Blocks() as demo:
             self._render_markdown(self.markdown_files[0])

helper/Site.py

@@ -52,7 +52,12 @@ class Site:
                 item: gr.update(visible=True)
             }
 
-        with gr.Blocks(css="""
+        # Css is not working in demo if there are multiple Blocks, so we need to add css from demos
+        css = ""
+        for category in self.docs:
+            for component in self.docs[category]:
+                css += self.docs[category][component].get_css()
+        with gr.Blocks(css=css + """
 .gradio-container {
   max-width: 100% !important;
   padding: 0 !important;

helper/parse_markdown.py

@@ -47,6 +47,8 @@ class MarkdownParser(HTMLParser):
                 "fixed": "fixed" in dict(attrs),
                 "prefix": "",
                 "suffix": "",
+                "position": dict(attrs).get("position", "left"),
+                "collapsible": "collapsible" in dict(attrs),
                 "title": dict(attrs).get("title", "")
             })
         elif tag == "file":

layout_templates/coder_artifacts/README-zh_CN.md

@@ -0,0 +1,7 @@
+# Coder Artifacts
+
+用于构建代码生成界面的应用模板。
+
+## 示例
+
+<demo name="app" position="bottom" collapsible="true"></demo>

layout_templates/coder_artifacts/README.md

@@ -0,0 +1,7 @@
+# Coder Artifacts
+
+Application template for building code generation interfaces.
+
+## Examples
+
+<demo name="app" position="bottom" collapsible="true"></demo>

layout_templates/coder_artifacts/app.py

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

layout_templates/coder_artifacts/demos/app.py

@@ -0,0 +1,446 @@
+import base64
+import os
+import re
+
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+from openai import OpenAI
+
+# =========== Configuration
+
+# API KEY
+MODELSCOPE_ACCESS_TOKEN = os.getenv('MODELSCOPE_ACCESS_TOKEN')
+
+client = OpenAI(api_key=MODELSCOPE_ACCESS_TOKEN,
+                base_url="https://api-inference.modelscope.cn/v1")
+
+# =========== Configuration
+
+DEFAULT_SYSTEM_PROMPT = """You are a web development engineer, writing web pages according to the instructions below. You are a powerful code editing assistant capable of writing code and creating artifacts in conversations with users, or modifying and updating existing artifacts as requested by users.
+All code is written in a single code block to form a complete code file for display, without separating HTML and JavaScript code. An artifact refers to a runnable complete code snippet, you prefer to integrate and output such complete runnable code rather than breaking it down into several code blocks. For certain types of code, they can render graphical interfaces in a UI window. After generation, please check the code execution again to ensure there are no errors in the output.
+Output only the HTML, without any additional descriptive text."""
+
+EXAMPLES = [
+    {
+        "title":
+        "Qwen，Start！",
+        "description":
+        "Help me design an interface with a purple button that says 'Qwen, Start!'. When the button is clicked, display a countdown from 5 in a very large font for 5 seconds.",
+    },
+    {
+        "title":
+        "Spam with emojis!",
+        "description":
+        "Write code in a single HTML file: Capture the click event, place a random number of emojis at the click position, and add gravity and collision effects to each emoji."
+    },
+    {
+        "title":
+        "TODO list",
+        "description":
+        "I want a TODO list that allows me to add tasks, delete tasks, and I would like the overall color theme to be purple."
+    },
+]
+
+DEFAULT_LOCALE = 'en_US'
+
+DEFAULT_THEME = {
+    "token": {
+        "colorPrimary": "#6A57FF",
+    }
+}
+
+
+class GradioEvents:
+
+    @staticmethod
+    def generate_code(input_value, system_prompt_input_value, state_value):
+        # Define your code here
+
+        def remove_code_block(text):
+            pattern = r'```html\n(.+?)\n```'
+            match = re.search(pattern, text, re.DOTALL)
+            if match:
+                return match.group(1).strip()
+            else:
+                return text.strip()
+
+        def send_to_sandbox(code):
+            encoded_html = base64.b64encode(
+                code.encode('utf-8')).decode('utf-8')
+            data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}"
+            return f"<iframe src=\"{data_uri}\" width=\"100%\" height=\"100%\"></iframe>"
+
+        yield {
+            output_loading: gr.update(spinning=True),
+            state_tab: gr.update(active_key="loading"),
+            output: gr.update(value=None)
+        }
+
+        if input_value is None:
+            input_value = ''
+
+        messages = [{
+            'role': "system",
+            'content': system_prompt_input_value
+        }] + state_value["history"]
+
+        messages.append({'role': "user", 'content': input_value})
+
+        generator = client.chat.completions.create(
+            model="Qwen/Qwen2.5-Coder-32B-Instruct",
+            messages=messages,
+            stream=True)
+        response = ""
+        for chunk in generator:
+            content = chunk.choices[0].delta.content
+            response += content
+            if chunk.choices[0].finish_reason == 'stop':
+                state_value["history"] = messages + [{
+                    'role': "assistant",
+                    'content': response
+                }]
+                # Completed
+                yield {
+                    output:
+                    gr.update(value=response),
+                    download_content:
+                    gr.update(value=remove_code_block(response)),
+                    state_tab:
+                    gr.update(active_key="render"),
+                    output_loading:
+                    gr.update(spinning=False),
+                    sandbox:
+                    gr.update(
+                        value=send_to_sandbox(remove_code_block(response))),
+                    state:
+                    gr.update(value=state_value)
+                }
+
+            else:
+                # Generating
+                yield {
+                    output: gr.update(value=response),
+                    output_loading: gr.update(spinning=False),
+                }
+
+    @staticmethod
+    def select_example(example: dict):
+        return lambda: gr.update(value=example["description"])
+
+    @staticmethod
+    def close_modal():
+        return gr.update(open=False)
+
+    @staticmethod
+    def open_modal():
+        return gr.update(open=True)
+
+    @staticmethod
+    def disable_btns(btns: list):
+        return lambda: [gr.update(disabled=True) for _ in btns]
+
+    @staticmethod
+    def enable_btns(btns: list):
+        return lambda: [gr.update(disabled=False) for _ in btns]
+
+    @staticmethod
+    def update_system_prompt(system_prompt_input_value, state_value):
+        state_value["system_prompt"] = system_prompt_input_value
+        return gr.update(value=state_value)
+
+    @staticmethod
+    def reset_system_prompt(state_value):
+        return gr.update(value=state_value["system_prompt"])
+
+    @staticmethod
+    def render_history(state):
+        return gr.update(value=state["history"])
+
+    @staticmethod
+    def clear_history(e: gr.EventData, state_value):
+        item = e._data["payload"][0]["key"]
+        if item == "clear":
+            gr.Success("History Cleared.")
+            state_value["history"] = []
+            return gr.update(value=state_value)
+        return gr.skip()
+
+
+css = """
+#coder-artifacts .output-empty,.output-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 680px;
+}
+
+#coder-artifacts .output-html {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 680px;
+}
+
+#coder-artifacts .output-html > iframe {
+  flex: 1;
+}
+
+#code-artifacts-code-drawer .output-code {
+  flex:1;
+}
+#code-artifacts-code-drawer .output-code .ms-gr-ant-spin-nested-loading {
+  min-height: 100%;
+}
+"""
+
+with gr.Blocks(css=css) as demo:
+    # Global State
+    state = gr.State({"system_prompt": DEFAULT_SYSTEM_PROMPT, "history": []})
+    with ms.Application(elem_id="coder-artifacts") as app:
+        with antd.ConfigProvider(theme=DEFAULT_THEME, locale=DEFAULT_LOCALE):
+            #  Header
+            with antd.Flex(justify="center", align="center", gap="middle"):
+                antd.Typography.Title("Coder-Artifacts",
+                                      level=1,
+                                      elem_style=dict(fontSize=24))
+            with ms.AutoLoading():
+                with antd.Row(gutter=[32, 12],
+                              elem_style=dict(marginTop=20),
+                              align="stretch"):
+                    # Left Column
+                    with antd.Col(span=24, md=8):
+                        with antd.Flex(vertical=True, gap="middle", wrap=True):
+                            # Input
+                            input = antd.Input.Textarea(
+                                size="large",
+                                allow_clear=True,
+                                auto_size=dict(minRows=2, maxRows=6),
+                                placeholder=
+                                "Describe the web application you want to create",
+                                elem_id="input-container")
+                            # Input Notes
+                            with antd.Flex(align="center",
+                                           justify="space-between"):
+                                antd.Typography.Text(
+                                    "Note: The model supports multi-round dialogue.",
+                                    strong=True,
+                                    type="warning")
+
+                                tour_btn = antd.Button("Usage Tour",
+                                                       variant="filled",
+                                                       color="default")
+                            # Submit Button
+                            submit_btn = antd.Button("Submit",
+                                                     type="primary",
+                                                     block=True,
+                                                     size="large",
+                                                     elem_id="submit-btn")
+
+                            antd.Divider("Settings")
+
+                            # Settings Area
+                            with antd.Space(size="small",
+                                            wrap=True,
+                                            elem_id="settings-area"):
+                                system_prompt_btn = antd.Button(
+                                    "⚙️ Set System Prompt", type="default")
+                                history_btn = antd.Dropdown.Button(
+                                    "📜 History",
+                                    type="default",
+                                    elem_id="history-btn",
+                                    menu=dict(items=[{
+                                        "key": "clear",
+                                        "label": "Clear History",
+                                        "danger": True
+                                    }]))
+
+                            antd.Divider("Examples")
+
+                            # Examples
+                            with antd.Flex(gap="small", wrap=True):
+                                for example in EXAMPLES:
+                                    with antd.Card(
+                                            hoverable=True) as example_card:
+                                        antd.Card.Meta(
+                                            title=example['title'],
+                                            description=example['description'])
+
+                                    example_card.click(
+                                        fn=GradioEvents.select_example(
+                                            example),
+                                        outputs=[input])
+
+                    # 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"):
+                            # Output Container Extra
+                            with ms.Slot("extra"):
+                                with ms.Div(elem_id="output-container-extra"):
+                                    with antd.Button(
+                                            "Download HTML",
+                                            type="link",
+                                            href_target="_blank",
+                                            disabled=True,
+                                    ) as download_btn:
+                                        with ms.Slot("icon"):
+                                            antd.Icon("DownloadOutlined")
+                                    download_content = gr.Text(visible=False)
+
+                                    view_code_btn = antd.Button(
+                                        "🧑‍💻 View Code", type="primary")
+                            # Output Content
+                            with antd.Tabs(
+                                    active_key="empty",
+                                    render_tab_bar="() => null") as state_tab:
+                                with antd.Tabs.Item(key="empty"):
+                                    antd.Empty(
+                                        description=
+                                        "Enter your request to generate code",
+                                        elem_classes="output-empty")
+                                with antd.Tabs.Item(key="loading"):
+                                    with antd.Spin(
+                                            tip="Generating code...",
+                                            size="large",
+                                            elem_classes="output-loading"):
+                                        # placeholder
+                                        ms.Div()
+                                with antd.Tabs.Item(key="render"):
+                                    sandbox = gr.HTML(
+                                        elem_classes="output-html")
+
+                    # Modals and Drawers
+                    with antd.Modal(open=False,
+                                    title="System Prompt",
+                                    width="800px") as system_prompt_modal:
+                        system_prompt_input = antd.Input.Textarea(
+                            DEFAULT_SYSTEM_PROMPT,
+                            size="large",
+                            placeholder="Enter your system prompt here",
+                            allow_clear=True,
+                            auto_size=dict(minRows=4, maxRows=14))
+
+                    with antd.Drawer(
+                            open=False,
+                            title="Output Code",
+                            placement="right",
+                            get_container=
+                            "() => document.querySelector('.gradio-container')",
+                            elem_id="code-artifacts-code-drawer",
+                            styles=dict(
+                                body=dict(display="flex",
+                                          flexDirection="column-reverse")),
+                            width="750px") as output_code_drawer:
+                        with ms.Div(elem_classes="output-code"):
+                            with antd.Spin(spinning=False) as output_loading:
+                                output = ms.Markdown()
+
+                    with antd.Drawer(
+                            open=False,
+                            title="Chat History",
+                            placement="left",
+                            get_container=
+                            "() => document.querySelector('.gradio-container')",
+                            width="750px") as history_drawer:
+                        history_output = gr.Chatbot(
+                            show_label=False,
+                            type="messages",
+                            height='100%',
+                            elem_classes="history_chatbot")
+                    # Tour
+                    with antd.Tour(open=False) as usage_tour:
+                        antd.Tour.Step(
+                            title="Step 1",
+                            description=
+                            "Describe the web application you want to create.",
+                            get_target=
+                            "() => document.querySelector('#input-container')")
+                        antd.Tour.Step(
+                            title="Step 2",
+                            description="Click the submit button.",
+                            get_target=
+                            "() => document.querySelector('#submit-btn')")
+                        antd.Tour.Step(
+                            title="Step 3",
+                            description="Wait for the result.",
+                            get_target=
+                            "() => document.querySelector('#output-container')"
+                        )
+                        antd.Tour.Step(
+                            title="Step 4",
+                            description=
+                            "Download the generated HTML here or view the code.",
+                            get_target=
+                            "() => document.querySelector('#output-container-extra')"
+                        )
+                        antd.Tour.Step(
+                            title="Additional Settings",
+                            description=
+                            "You can change the system prompt or chat history here.",
+                            get_target=
+                            "() => document.querySelector('#settings-area')")
+    # Event Handler
+    gr.on(fn=GradioEvents.close_modal,
+          triggers=[usage_tour.close, usage_tour.finish],
+          outputs=[usage_tour])
+    tour_btn.click(fn=GradioEvents.open_modal, outputs=[usage_tour])
+
+    system_prompt_btn.click(fn=GradioEvents.open_modal,
+                            outputs=[system_prompt_modal])
+
+    system_prompt_modal.ok(GradioEvents.update_system_prompt,
+                           inputs=[system_prompt_input, state],
+                           outputs=[state]).then(fn=GradioEvents.close_modal,
+                                                 outputs=[system_prompt_modal])
+
+    system_prompt_modal.cancel(GradioEvents.close_modal,
+                               outputs=[system_prompt_modal]).then(
+                                   fn=GradioEvents.reset_system_prompt,
+                                   inputs=[state],
+                                   outputs=[system_prompt_input])
+    output_code_drawer.close(fn=GradioEvents.close_modal,
+                             outputs=[output_code_drawer])
+    history_btn.menu_click(fn=GradioEvents.clear_history,
+                           inputs=[state],
+                           outputs=[state])
+    history_btn.click(fn=GradioEvents.open_modal,
+                      outputs=[history_drawer
+                               ]).then(fn=GradioEvents.render_history,
+                                       inputs=[state],
+                                       outputs=[history_output])
+    history_drawer.close(fn=GradioEvents.close_modal, outputs=[history_drawer])
+
+    download_btn.click(fn=None,
+                       inputs=[download_content],
+                       js="""(content) => {
+        const blob = new Blob([content], { type: 'text/html' })
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = 'output.html'
+        a.click()
+}""")
+    view_code_btn.click(fn=GradioEvents.open_modal,
+                        outputs=[output_code_drawer])
+    submit_btn.click(
+        fn=GradioEvents.open_modal,
+        outputs=[output_code_drawer],
+    ).then(fn=GradioEvents.disable_btns([submit_btn, download_btn]),
+           outputs=[submit_btn, download_btn]).then(
+               fn=GradioEvents.generate_code,
+               inputs=[input, system_prompt_input, state],
+               outputs=[
+                   output, state_tab, sandbox, download_content,
+                   output_loading, state
+               ]).then(fn=GradioEvents.enable_btns([submit_btn, download_btn]),
+                       outputs=[submit_btn, download_btn
+                                ]).then(fn=GradioEvents.close_modal,
+                                        outputs=[output_code_drawer])
+
+if __name__ == "__main__":
+    demo.queue().launch(ssr_mode=False)

requirements.txt

@@ -1 +1,2 @@
-modelscope_studio==1.1.0
+modelscope_studio==1.1.1
+openai

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "modelscope_studio"
-version = "1.1.0"
+version = "1.1.1"
 description = "A third-party component library based on Gradio."
 readme = "README.md"
 license = "Apache-2.0"
@@ -226,6 +226,9 @@ artifacts = [
   "/backend/modelscope_studio/components/antdx/x_provider/templates",
 ]
 
+[tool.yapfignore]
+ignore_patterns = ["node_modules/**", "__pycache__/**", "**/*.pyi"]
+
 [tool.hatch.build.targets.sdist]
 exclude = ["__pycache__"]
 include = ["/backend/modelscope_studio"]