docs: add copilot demo for chatbot

layout_templates/chatbot/README-zh_CN.md

@@ -15,3 +15,5 @@
 <demo name="basic" position="bottom" collapsible="true"></demo>
 
 <demo name="fine_grained_control" title="细粒度控制"  position="bottom" collapsible="true"></demo>
+
+<demo name="copilot" title="助手式"  position="bottom" collapsible="true"></demo>

layout_templates/chatbot/README.md

@@ -15,3 +15,5 @@ This template provides the following features:
 <demo name="basic" position="bottom" collapsible="true"></demo>
 
 <demo name="fine_grained_control" title="Fine-grained Control"  position="bottom" collapsible="true"></demo>
+
+<demo name="copilot" title="Copilot"  position="bottom" collapsible="true"></demo>

layout_templates/chatbot/demos/copilot.py

@@ -0,0 +1,325 @@
+import base64
+import os
+import time
+
+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
+import modelscope_studio.components.pro as pro
+from modelscope_studio.components.pro.chatbot import (ChatbotBotConfig,
+                                                      ChatbotPromptsConfig,
+                                                      ChatbotWelcomeConfig)
+from modelscope_studio.components.pro.multimodal_input import \
+  MultimodalInputUploadConfig
+from openai import OpenAI
+
+client = OpenAI(
+    base_url='https://api-inference.modelscope.cn/v1/',
+    api_key=os.getenv("MODELSCOPE_ACCESS_TOKEN"),  # ModelScope Token
+)
+
+model = "Qwen/Qwen2.5-72B-Instruct"
+
+
+def prompt_select(input_value, e: gr.EventData):
+    input_value["text"] = e._data["payload"][0]["value"]["description"]
+    return gr.update(value=input_value)
+
+
+def clear():
+    return gr.update(value=None)
+
+
+def cancel(chatbot_value):
+    chatbot_value[-1]["loading"] = False
+    chatbot_value[-1]["status"] = "done"
+    chatbot_value[-1]["footer"] = "Chat completion paused"
+
+    return gr.update(value=chatbot_value), gr.update(loading=False), gr.update(
+        disabled=False)
+
+
+def retry(chatbot_value, e: gr.EventData):
+    index = e._data["payload"][0]["index"]
+    chatbot_value = chatbot_value[:index]
+
+    yield gr.update(loading=True), gr.update(value=chatbot_value), gr.update(
+        disabled=True)
+    for chunk in submit(None, chatbot_value):
+        yield chunk
+
+
+def format_history(history):
+    messages = [{"role": "system", "content": "You are a helpful assistant."}]
+    for item in history:
+        if item["role"] == "user":
+            messages.append({
+                "role":
+                "user",
+                "content": [{
+                    "type": "text",
+                    "text": item["content"]
+                }]
+            })
+        elif item["role"] == "assistant":
+            # ignore thought message
+            messages.append({"role": "assistant", "content": item["content"]})
+    return messages
+
+
+def submit(input_value, chatbot_value):
+    if input_value is not None:
+        chatbot_value.append({
+            "role": "user",
+            "content": input_value["text"],
+        })
+    history_messages = format_history(chatbot_value)
+    chatbot_value.append({
+        "role": "assistant",
+        "content": "",
+        "loading": True,
+        "status": "pending"
+    })
+    yield {
+        input: gr.update(value=None, loading=True),
+        clear_btn: gr.update(disabled=True),
+        chatbot: gr.update(value=chatbot_value)
+    }
+
+    try:
+        response = client.chat.completions.create(model=model,
+                                                  messages=history_messages,
+                                                  stream=True)
+        start_time = time.time()
+
+        for chunk in response:
+            chatbot_value[-1]["content"] += chunk.choices[0].delta.content
+            chatbot_value[-1]["loading"] = False
+
+            yield {chatbot: gr.update(value=chatbot_value)}
+
+        chatbot_value[-1]["footer"] = "{:.2f}".format(time.time() -
+                                                      start_time) + 's'
+        chatbot_value[-1]["status"] = "done"
+        yield {
+            clear_btn: gr.update(disabled=False),
+            input: gr.update(loading=False),
+            chatbot: gr.update(value=chatbot_value),
+        }
+    except Exception as e:
+        chatbot_value[-1]["loading"] = False
+        chatbot_value[-1]["status"] = "done"
+        chatbot_value[-1]["content"] = "Failed to respond, please try again."
+        yield {
+            clear_btn: gr.update(disabled=False),
+            input: gr.update(loading=False),
+            chatbot: gr.update(value=chatbot_value),
+        }
+        raise e
+
+
+def close_copilot():
+    return gr.update(md=24), gr.update(md=0), gr.update(elem_style=dict(
+        display=""))
+
+
+def open_copilot():
+    return gr.update(md=16), gr.update(md=8), gr.update(elem_style=dict(
+        display="none"))
+
+
+def resize_window(e: gr.EventData):
+    screen_width = e._data["screen"]["width"]
+    is_mobile = screen_width < 768
+    return gr.update(visible=False if is_mobile else True), gr.update(
+        visible=False if is_mobile else True)
+
+
+css = """
+.copilot-container {
+    height: calc(100vh - 32px - 21px - 16px);
+}
+
+.copilot-container .copilot {
+    height: 100%;
+    padding: 10px;
+    background: var(--background-fill-secondary);
+    border-top: 1px solid var(--border-color-primary);
+    border-right: 1px solid var(--border-color-primary);
+    border-bottom: 1px solid var(--border-color-primary);
+}
+
+
+.copilot-container .content-body {
+    height: 100%;
+    overflow: auto;
+}
+
+@media (max-width: 768px) {
+    .copilot-container {
+        height: auto;
+    }
+    .copilot-container .copilot {
+        height: 600px;
+        border-left: 1px solid var(--border-color-primary);
+    }
+    .copilot-container .content-body {
+        height: auto;
+        max-height: 400px;
+    }
+}
+"""
+
+with gr.Blocks(css=css) as demo, ms.Application() as app, antdx.XProvider():
+    with antd.Row(elem_classes="copilot-container", wrap=True):
+        # Content column
+        with antd.Col(md=16, xs=24,
+                      elem_style=dict(height="100%")) as content_col:
+            with ms.AutoLoading(elem_style=dict(height="100%")):
+                with antd.Card(elem_style=dict(height="100%",
+                                               borderRadius=0,
+                                               display="flex",
+                                               flexDirection="column"),
+                               class_names=dict(body="content-body")):
+                    # Title
+                    with ms.Slot("title"):
+                        with antd.Typography.Title(level=1,
+                                                   elem_style=dict(
+                                                       margin=0,
+                                                       textAlign="center",
+                                                       fontSize=30)):
+                            ms.Text("🤖 Copilot Template")
+
+                    # Copilot button
+                    with ms.Slot("extra"):
+                        copilot_open_btn = antd.Button(
+                            "✨ AI Copilot",
+                            shape="round",
+                            variant='filled',
+                            color="primary",
+                            elem_style=dict(display="none"))
+
+                    # Content
+                    ms.Markdown("""
+<img src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*48RLR41kwHIAAAAAAAAAAAAADgCCAQ/fmt.webp" style="width: 100%;" />
+<h4>What is the RICH design paradigm?</h4>
+<div>
+RICH is an AI interface design paradigm we propose, similar to how the WIMP paradigm
+relates to graphical user interfaces.
+</div>
+<br />
+<div>
+The ACM SIGCHI 2005 (the premier conference on human-computer interaction) defined
+that the core issues of human-computer interaction can be divided into three levels:
+</div>
+<ul>
+<li>
+    Interface Paradigm Layer: Defines the design elements of human-computer
+    interaction interfaces, guiding designers to focus on core issues.
+</li>
+<li>
+    User model layer: Build an interface experience evaluation model to measure the
+    quality of the interface experience.
+</li>
+<li>
+    Software framework layer: The underlying support algorithms and data structures
+    for human-computer interfaces, which are the contents hidden behind the front-end
+    interface.
+</li>
+</ul>
+<div>
+The interface paradigm is the aspect that designers need to focus on and define the
+most when a new human-computer interaction technology is born. The interface
+paradigm defines the design elements that designers should pay attention to, and
+based on this, it is possible to determine what constitutes good design and how to
+achieve it.
+</div>
+""")
+
+        # Copilot column
+        with antd.Col(md=8, xs=24,
+                      elem_style=dict(height="100%")) as copilot_col:
+            with ms.AutoLoading(elem_style=dict(height="100%")):
+                with antd.Flex(
+                        vertical=True,
+                        gap="small",
+                        elem_classes="copilot",
+                ):
+                    with antd.Flex(justify="space-between", align="center"):
+                        antd.Typography.Title("✨ AI Copilot",
+                                              level=4,
+                                              elem_style=dict(margin=0))
+                        with antd.Flex(align="center", gap="small"):
+                            with antd.Button(
+                                    variant="text",
+                                    color="default") as copilot_close_btn:
+                                with ms.Slot("icon"):
+                                    antd.Icon("CloseOutlined")
+                    antd.Divider(size="small")
+                    chatbot = pro.Chatbot(
+                        # for flex=1 to fill the remaining space
+                        height=0,
+                        elem_style=dict(flex=1),
+                        welcome_config=ChatbotWelcomeConfig(
+                            variant="filled",
+                            title="👋🏻 Hello, I'm AI Copilot",
+                            description="Enter a prompt to get started",
+                            prompts=ChatbotPromptsConfig(
+                                title="I can help: ",
+                                vertical=True,
+                                items=[{
+                                    "description":
+                                    "Help me with a plan to start a business"
+                                }, {
+                                    "description":
+                                    "Help me with a plan to achieve my goals"
+                                }, {
+                                    "description":
+                                    "Help me with a plan for a successful interview"
+                                }])),
+                        user_config=dict(
+                            avatar=
+                            "https://api.dicebear.com/7.x/miniavs/svg?seed=3"),
+                        bot_config=ChatbotBotConfig(
+                            header="Copilot",
+                            actions=["copy", "retry"],
+                            avatar=
+                            "https://api.dicebear.com/7.x/miniavs/svg?seed=2"),
+                    )
+
+                    with pro.MultimodalInput(
+                            upload_config=MultimodalInputUploadConfig(
+                                allow_upload=False)) as input:
+                        with ms.Slot("prefix"):
+                            with antd.Button(value=None,
+                                             color="default",
+                                             variant="text") as clear_btn:
+                                with ms.Slot("icon"):
+                                    antd.Icon("ClearOutlined")
+        clear_btn.click(fn=clear, outputs=[chatbot])
+        submit_event = input.submit(fn=submit,
+                                    inputs=[input, chatbot],
+                                    outputs=[input, chatbot, clear_btn])
+        input.cancel(fn=cancel,
+                     inputs=[chatbot],
+                     outputs=[chatbot, input, clear_btn],
+                     cancels=[submit_event],
+                     queue=False)
+        chatbot.retry(fn=retry,
+                      inputs=[chatbot],
+                      outputs=[input, chatbot, clear_btn])
+        chatbot.welcome_prompt_select(fn=prompt_select,
+                                      inputs=[input],
+                                      outputs=[input])
+        copilot_open_btn.click(
+            fn=open_copilot,
+            outputs=[content_col, copilot_col, copilot_open_btn])
+        copilot_close_btn.click(
+            fn=close_copilot,
+            outputs=[content_col, copilot_col, copilot_open_btn])
+        gr.on([app.mount, app.resize],
+              fn=resize_window,
+              outputs=[copilot_open_btn, copilot_close_btn])
+if __name__ == "__main__":
+    demo.queue().launch()

layout_templates/coder_artifacts/demos/app.py

@@ -22,26 +22,41 @@ DEFAULT_SYSTEM_PROMPT = """You are a web development engineer, writing web pages
 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."
-    },
-]
+EXAMPLES = [{
+    "tab":
+    "Section 1",
+    "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."
+        },
+    ]
+}, {
+    "tab":
+    "Section 2",
+    "examples": [
+        {
+            "title":
+            "Strawberry card",
+            "description":
+            """How many "r"s are in the word "strawberry"? Make a cute little card!"""
+        },
+        {
+            "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'
 
@@ -266,20 +281,26 @@ with gr.Blocks(css=css) as demo:
                             antd.Divider("Examples")
 
                             # Examples
-                            with antd.Flex(gap="small", wrap=True):
-                                for example in EXAMPLES:
-                                    with antd.Card(
-                                            elem_style=dict(
-                                                flex="1 1 fit-content"),
-                                            hoverable=True) as example_card:
-                                        antd.Card.Meta(
-                                            title=example['title'],
-                                            description=example['description'])
-
-                                    example_card.click(
-                                        fn=GradioEvents.select_example(
-                                            example),
-                                        outputs=[input])
+                            with antd.Tabs():
+                                for item in EXAMPLES:
+                                    with antd.Tabs.Item(label=item["tab"]):
+                                        with antd.Flex(gap="small", wrap=True):
+                                            for example in item["examples"]:
+                                                with antd.Card(
+                                                        elem_style=dict(
+                                                            flex=
+                                                            "1 1 fit-content"),
+                                                        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):