docs: add copilot demo for chatbot (#92)

Col0ring · web-flow · commit 369e50a7465f · 2025-09-05T10:56:41.000+08:00
diff --git a/.changeset/pink-carrots-hammer.md b/.changeset/pink-carrots-hammer.md
@@ -0,0 +1,5 @@
+---
+'modelscope_studio': patch
+---
+
+docs: add copilot demo for chatbot
diff --git a/backend/modelscope_studio/components/antd/card/__init__.py b/backend/modelscope_studio/components/antd/card/__init__.py
@@ -59,6 +59,7 @@ def __init__(
             *,
             actions: str | None = None,
             active_tab_key: str | None = None,
+            variant: Literal['outlined', 'borderless'] | None = None,
             bordered: bool | None = None,
             cover: str | None = None,
             default_active_tab_key: str | None = None,
@@ -87,6 +88,7 @@ def __init__(
         Parameters:
             actions:  The action list, shows at the bottom of the Card.
             active_tab_key:  Current TabPane's key.
+            variant:  Card variant.
             bordered:  Toggles rendering of the border around the card.
             cover:  Card cover.
             default_active_tab_key:  Initial active TabPane's key, if activeTabKey is not set.
@@ -111,6 +113,7 @@ def __init__(
         self.actions = actions
         self.active_tab_key = active_tab_key
         self.bordered = bordered
+        self.variant = variant
         self.cover = cover
         self.default_active_tab_key = default_active_tab_key
         self.extra = extra
diff --git a/docs/layout_templates/chatbot/README-zh_CN.md b/docs/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>
diff --git a/docs/layout_templates/chatbot/README.md b/docs/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>
diff --git a/docs/layout_templates/chatbot/demos/copilot.py b/docs/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()
diff --git a/docs/layout_templates/coder_artifacts/demos/app.py b/docs/layout_templates/coder_artifacts/demos/app.py

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'modelscope_studio': patch
 +---
++
 +docs: add copilot demo for chatbot