upload

app.py

@@ -0,0 +1,644 @@
+import uuid
+import time
+import json
+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 openai import OpenAI
+from config import DEFAULT_LOCALE, DEFAULT_SETTINGS, DEFAULT_THEME, DEFAULT_SUGGESTIONS, save_history, get_text, user_config, bot_config, welcome_config, api_key, MODEL_OPTIONS_MAP
+from ui_components.logo import Logo
+from ui_components.settings_header import SettingsHeader
+from ui_components.thinking_button import ThinkingButton
+
+client = OpenAI(api_key=api_key,
+                base_url="https://dashscope.aliyuncs.com/compatible-mode/v1")
+
+
+def format_history(history, sys_prompt):
+    messages = [{
+        "role": "system",
+        "content": sys_prompt,
+    }]
+    for item in history:
+        if item["role"] == "user":
+            messages.append({"role": "user", "content": item["content"]})
+        elif item["role"] == "assistant":
+            contents = [{
+                "type": "text",
+                "text": content["content"]
+            } for content in item["content"] if content["type"] == "text"]
+            messages.append({
+                "role":
+                "assistant",
+                "content":
+                contents[0]["text"] if len(contents) > 0 else ""
+            })
+    return messages
+
+
+class Gradio_Events:
+
+    @staticmethod
+    def submit(state_value):
+
+        history = state_value["conversation_contexts"][
+            state_value["conversation_id"]]["history"]
+        settings = state_value["conversation_contexts"][
+            state_value["conversation_id"]]["settings"]
+        enable_thinking = state_value["conversation_contexts"][
+            state_value["conversation_id"]]["enable_thinking"]
+        model = settings.get("model")
+        messages = format_history(history,
+                                  sys_prompt=settings.get("sys_prompt", ""))
+
+        history.append({
+            "role":
+            "assistant",
+            "content": [],
+            "key":
+            str(uuid.uuid4()),
+            "header":
+            MODEL_OPTIONS_MAP.get(model, {}).get("label", None),
+            "loading":
+            True,
+            "status":
+            "pending"
+        })
+
+        yield {
+            chatbot: gr.update(value=history),
+            state: gr.update(value=state_value),
+        }
+        try:
+            response = client.chat.completions.create(
+                model=model,
+                messages=messages,
+                stream=True,
+                extra_body={
+                    "enable_thinking":
+                    enable_thinking,
+                    **({
+                        "thinking_budget":
+                        settings.get("thinking_budget", 1) * 1024
+                    } if enable_thinking else {})
+                })
+            start_time = time.time()
+            reasoning_content = ""
+            answer_content = ""
+            is_thinking = False
+            is_answering = False
+            contents = [None, None]
+            for chunk in response:
+                if not chunk.choices:
+                    pass
+                else:
+                    delta = chunk.choices[0].delta
+                    if hasattr(
+                            delta,
+                            'reasoning_content') and delta.reasoning_content:
+                        if not is_thinking:
+                            contents[0] = {
+                                "type": "tool",
+                                "content": "",
+                                "options": {
+                                    "title": get_text("Thinking...", "思考中..."),
+                                    "status": "pending"
+                                },
+                                "copyable": False,
+                                "editable": False
+                            }
+                            is_thinking = True
+                        reasoning_content += delta.reasoning_content
+                    else:
+                        if hasattr(delta, 'content') and delta.content != None:
+                            if not is_answering:
+                                thought_cost_time = "{:.2f}".format(
+                                    time.time() - start_time)
+                                if contents[0]:
+                                    contents[0]["options"]["title"] = get_text(
+                                        f"End of Thought ({thought_cost_time}s)",
+                                        f"已深度思考 (用时{thought_cost_time}s)")
+                                    contents[0]["options"]["status"] = "done"
+                                contents[1] = {
+                                    "type": "text",
+                                    "content": "",
+                                }
+
+                                is_answering = True
+                            answer_content += delta.content
+
+                    if contents[0]:
+                        contents[0]["content"] = reasoning_content
+                    if contents[1]:
+                        contents[1]["content"] = answer_content
+                history[-1]["content"] = [
+                    content for content in contents if content
+                ]
+                history[-1]["loading"] = False
+                yield {
+                    chatbot: gr.update(value=history),
+                    state: gr.update(value=state_value)
+                }
+            history[-1]["status"] = "done"
+            cost_time = "{:.2f}".format(time.time() - start_time)
+            history[-1]["footer"] = get_text(f"{cost_time}s",
+                                             f"用时{cost_time}s")
+            yield {
+                chatbot: gr.update(value=history),
+                state: gr.update(value=state_value),
+            }
+        except Exception as e:
+            history[-1]["loading"] = False
+            history[-1]["status"] = "done"
+            history[-1]["content"] += [{
+                "type":
+                "text",
+                "content":
+                f'<span style="color: var(--color-red-500)">{str(e)}</span>'
+            }]
+            yield {
+                chatbot: gr.update(value=history),
+                state: gr.update(value=state_value)
+            }
+            raise e
+
+    @staticmethod
+    def add_message(input_value, settings_form_value, thinking_btn_state_value,
+                    state_value):
+        if not state_value["conversation_id"]:
+            random_id = str(uuid.uuid4())
+            history = []
+            state_value["conversation_id"] = random_id
+            state_value["conversation_contexts"][
+                state_value["conversation_id"]] = {
+                    "history": history
+                }
+            state_value["conversations"].append({
+                "label": input_value,
+                "key": random_id
+            })
+
+        history = state_value["conversation_contexts"][
+            state_value["conversation_id"]]["history"]
+
+        state_value["conversation_contexts"][
+            state_value["conversation_id"]] = {
+                "history": history,
+                "settings": settings_form_value,
+                "enable_thinking": thinking_btn_state_value["enable_thinking"]
+            }
+        history.append({
+            "role": "user",
+            "content": input_value,
+            "key": str(uuid.uuid4())
+        })
+        yield Gradio_Events.preprocess_submit(clear_input=True)(state_value)
+
+        try:
+            for chunk in Gradio_Events.submit(state_value):
+                yield chunk
+        except Exception as e:
+            raise e
+        finally:
+            yield Gradio_Events.postprocess_submit(state_value)
+
+    @staticmethod
+    def preprocess_submit(clear_input=True):
+
+        def preprocess_submit_handler(state_value):
+            history = state_value["conversation_contexts"][
+                state_value["conversation_id"]]["history"]
+            return {
+                **({
+                    input:
+                    gr.update(value=None, loading=True) if clear_input else gr.update(loading=True),
+                } if clear_input else {}),
+                conversations:
+                gr.update(active_key=state_value["conversation_id"],
+                          items=list(
+                              map(
+                                  lambda item: {
+                                      **item,
+                                      "disabled":
+                                      True if item["key"] != state_value[
+                                          "conversation_id"] else False,
+                                  }, state_value["conversations"]))),
+                add_conversation_btn:
+                gr.update(disabled=True),
+                clear_btn:
+                gr.update(disabled=True),
+                conversation_delete_menu_item:
+                gr.update(disabled=True),
+                chatbot:
+                gr.update(value=history,
+                          bot_config=bot_config(
+                              disabled_actions=['edit', 'retry', 'delete']),
+                          user_config=user_config(
+                              disabled_actions=['edit', 'delete'])),
+                state:
+                gr.update(value=state_value),
+            }
+
+        return preprocess_submit_handler
+
+    @staticmethod
+    def postprocess_submit(state_value):
+        history = state_value["conversation_contexts"][
+            state_value["conversation_id"]]["history"]
+        return {
+            input:
+            gr.update(loading=False),
+            conversation_delete_menu_item:
+            gr.update(disabled=False),
+            clear_btn:
+            gr.update(disabled=False),
+            conversations:
+            gr.update(items=state_value["conversations"]),
+            add_conversation_btn:
+            gr.update(disabled=False),
+            chatbot:
+            gr.update(value=history,
+                      bot_config=bot_config(),
+                      user_config=user_config()),
+            state:
+            gr.update(value=state_value),
+        }
+
+    @staticmethod
+    def cancel(state_value):
+        history = state_value["conversation_contexts"][
+            state_value["conversation_id"]]["history"]
+        history[-1]["loading"] = False
+        history[-1]["status"] = "done"
+        history[-1]["footer"] = get_text("Chat completion paused", "对话已暂停")
+        return Gradio_Events.postprocess_submit(state_value)
+
+    @staticmethod
+    def delete_message(state_value, e: gr.EventData):
+        index = e._data["payload"][0]["index"]
+        history = state_value["conversation_contexts"][
+            state_value["conversation_id"]]["history"]
+        history = history[:index] + history[index + 1:]
+
+        state_value["conversation_contexts"][
+            state_value["conversation_id"]]["history"] = history
+
+        return gr.update(value=state_value)
+
+    @staticmethod
+    def edit_message(state_value, chatbot_value, e: gr.EventData):
+        index = e._data["payload"][0]["index"]
+        history = state_value["conversation_contexts"][
+            state_value["conversation_id"]]["history"]
+        history[index]["content"] = chatbot_value[index]["content"]
+        return gr.update(value=state_value)
+
+    @staticmethod
+    def regenerate_message(settings_form_value, thinking_btn_state_value,
+                           state_value, e: gr.EventData):
+        index = e._data["payload"][0]["index"]
+        history = state_value["conversation_contexts"][
+            state_value["conversation_id"]]["history"]
+        history = history[:index]
+
+        state_value["conversation_contexts"][
+            state_value["conversation_id"]] = {
+                "history": history,
+                "settings": settings_form_value,
+                "enable_thinking": thinking_btn_state_value["enable_thinking"]
+            }
+
+        yield Gradio_Events.preprocess_submit()(state_value)
+        try:
+            for chunk in Gradio_Events.submit(state_value):
+                yield chunk
+        except Exception as e:
+            raise e
+        finally:
+            yield Gradio_Events.postprocess_submit(state_value)
+
+    @staticmethod
+    def select_suggestion(input_value, e: gr.EventData):
+        input_value = input_value[:-1] + e._data["payload"][0]
+        return gr.update(value=input_value)
+
+    @staticmethod
+    def apply_prompt(e: gr.EventData):
+        return gr.update(value=e._data["payload"][0]["value"]["description"])
+
+    @staticmethod
+    def new_chat(state_value):
+        if not state_value["conversation_id"]:
+            return gr.skip()
+        state_value["conversation_id"] = ""
+        return gr.update(active_key=state_value["conversation_id"]), gr.update(
+            value=None), gr.update(value=DEFAULT_SETTINGS), gr.update(
+                value=state_value)
+
+    @staticmethod
+    def select_conversation(state_value, e: gr.EventData):
+        active_key = e._data["payload"][0]
+        if state_value["conversation_id"] == active_key or (
+                active_key not in state_value["conversation_contexts"]):
+            return gr.skip()
+        state_value["conversation_id"] = active_key
+        return gr.update(active_key=active_key), gr.update(
+            value=state_value["conversation_contexts"][active_key]["history"]
+        ), gr.update(value=state_value["conversation_contexts"][active_key]
+                     ["settings"]), gr.update(value=state_value)
+
+    @staticmethod
+    def click_conversation_menu(state_value, e: gr.EventData):
+        conversation_id = e._data["payload"][0]["key"]
+        operation = e._data["payload"][1]["key"]
+        if operation == "delete":
+            del state_value["conversation_contexts"][conversation_id]
+
+            state_value["conversations"] = [
+                item for item in state_value["conversations"]
+                if item["key"] != conversation_id
+            ]
+
+            if state_value["conversation_id"] == conversation_id:
+                state_value["conversation_id"] = ""
+                return gr.update(
+                    items=state_value["conversations"],
+                    active_key=state_value["conversation_id"]), gr.update(
+                        value=None), gr.update(value=state_value)
+            else:
+                return gr.update(
+                    items=state_value["conversations"]), gr.skip(), gr.update(
+                        value=state_value)
+        return gr.skip()
+
+    @staticmethod
+    def toggle_settings_header(settings_header_state_value):
+        settings_header_state_value[
+            "open"] = not settings_header_state_value["open"]
+        return gr.update(value=settings_header_state_value)
+
+    @staticmethod
+    def apply_thinking_btn_state(thinking_btn_state_value, state_value):
+        if not state_value["conversation_id"]:
+            return gr.skip()
+        state_value["conversation_contexts"][state_value["conversation_id"]][
+            "enable_thinking"] = thinking_btn_state_value["enable_thinking"]
+        return gr.update(value=state_value)
+
+    @staticmethod
+    def clear_conversation_history(state_value):
+        if not state_value["conversation_id"]:
+            return gr.skip()
+        state_value["conversation_contexts"][
+            state_value["conversation_id"]]["history"] = []
+        return gr.update(value=None), gr.update(value=state_value)
+
+    @staticmethod
+    def update_browser_state(state_value):
+
+        return gr.update(value=dict(
+            conversations=state_value["conversations"],
+            conversation_contexts=state_value["conversation_contexts"]))
+
+    @staticmethod
+    def apply_browser_state(browser_state_value, state_value):
+        state_value["conversations"] = browser_state_value["conversations"]
+        state_value["conversation_contexts"] = browser_state_value[
+            "conversation_contexts"]
+        return gr.update(
+            items=browser_state_value["conversations"]), gr.update(
+                value=state_value)
+
+
+css = """
+.gradio-container {
+  padding: 0 !important;
+}
+
+.gradio-container > main.fillable {
+  padding: 0 !important;
+}
+
+#chatbot {
+  height: calc(100vh - 21px - 16px);
+  max-height: 1500px;
+}
+
+#chatbot .chatbot-conversations {
+  height: 100vh;
+  background-color: var(--ms-gr-ant-color-bg-layout);
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+
+#chatbot .chatbot-conversations .chatbot-conversations-list {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+#chatbot .chatbot-chat {
+  padding: 32px;
+  padding-bottom: 0;
+  height: 100%;
+}
+
+@media (max-width: 768px) {
+  #chatbot .chatbot-chat {
+      padding: 0;
+  }
+}
+
+#chatbot .chatbot-chat .chatbot-chat-messages {
+  flex: 1;
+}
+
+
+#chatbot .setting-form-thinking-budget .ms-gr-ant-form-item-control-input-content {
+    display: flex;
+    flex-wrap: wrap;
+}
+"""
+
+model_options_map_json = json.dumps(MODEL_OPTIONS_MAP)
+js = "function init() { window.MODEL_OPTIONS_MAP=" + model_options_map_json + "}"
+
+with gr.Blocks(css=css, js=js, fill_width=True) as demo:
+    state = gr.State({
+        "conversation_contexts": {},
+        "conversations": [],
+        "conversation_id": "",
+    })
+
+    with ms.Application(), antdx.XProvider(
+            theme=DEFAULT_THEME, locale=DEFAULT_LOCALE), ms.AutoLoading():
+        with antd.Row(gutter=[20, 20], wrap=False, elem_id="chatbot"):
+            # Left Column
+            with antd.Col(md=dict(flex="0 0 260px", span=24, order=0),
+                          span=0,
+                          order=1):
+                with ms.Div(elem_classes="chatbot-conversations"):
+                    with antd.Flex(vertical=True,
+                                   gap="small",
+                                   elem_style=dict(height="100%")):
+                        # Logo
+                        Logo()
+
+                        # New Conversation Button
+                        with antd.Button(value=None,
+                                         color="primary",
+                                         variant="filled",
+                                         block=True) as add_conversation_btn:
+                            ms.Text(get_text("New Conversation", "新建对话"))
+                            with ms.Slot("icon"):
+                                antd.Icon("PlusOutlined")
+
+                        # Conversations List
+                        with antdx.Conversations(
+                                elem_classes="chatbot-conversations-list",
+                        ) as conversations:
+                            with ms.Slot('menu.items'):
+                                with antd.Menu.Item(
+                                        label="Delete", key="delete",
+                                        danger=True
+                                ) as conversation_delete_menu_item:
+                                    with ms.Slot("icon"):
+                                        antd.Icon("DeleteOutlined")
+            # Right Column
+            with antd.Col(flex=1, elem_style=dict(height="100%")):
+                with antd.Flex(vertical=True,
+                               gap="small",
+                               elem_classes="chatbot-chat"):
+                    # Chatbot
+                    chatbot = pro.Chatbot(elem_classes="chatbot-chat-messages",
+                                          height=0,
+                                          welcome_config=welcome_config(),
+                                          user_config=user_config(),
+                                          bot_config=bot_config())
+
+                    # Input
+                    with antdx.Suggestion(
+                            items=DEFAULT_SUGGESTIONS,
+                            # onKeyDown Handler in Javascript
+                            should_trigger="""(e, { onTrigger, onKeyDown }) => {
+                      switch(e.key) {
+                        case '/':
+                          onTrigger()
+                          break
+                        case 'ArrowRight':
+                        case 'ArrowLeft':
+                        case 'ArrowUp':
+                        case 'ArrowDown':
+                          break;
+                        default:
+                          onTrigger(false)
+                      }
+                      onKeyDown(e)
+                    }""") as suggestion:
+                        with ms.Slot("children"):
+                            with antdx.Sender(placeholder=get_text(
+                                    "Enter \"/\" to get suggestions",
+                                    "输入 \"/\" 获取提示"), ) as input:
+                                with ms.Slot("header"):
+                                    settings_header_state, settings_form = SettingsHeader(
+                                    )
+                                with ms.Slot("prefix"):
+                                    with antd.Flex(
+                                            gap=4,
+                                            wrap=True,
+                                            elem_style=dict(maxWidth='40vw')):
+                                        with antd.Button(
+                                                value=None,
+                                                type="text") as setting_btn:
+                                            with ms.Slot("icon"):
+                                                antd.Icon("SettingOutlined")
+                                        with antd.Button(
+                                                value=None,
+                                                type="text") as clear_btn:
+                                            with ms.Slot("icon"):
+                                                antd.Icon("ClearOutlined")
+                                        thinking_btn_state = ThinkingButton()
+
+    # Events Handler
+    # Browser State Handler
+    if save_history:
+        browser_state = gr.BrowserState(
+            {
+                "conversation_contexts": {},
+                "conversations": [],
+            },
+            storage_key="qwen3_chat_demo_storage")
+        state.change(fn=Gradio_Events.update_browser_state,
+                     inputs=[state],
+                     outputs=[browser_state])
+
+        demo.load(fn=Gradio_Events.apply_browser_state,
+                  inputs=[browser_state, state],
+                  outputs=[conversations, state])
+
+    # Conversations Handler
+    add_conversation_btn.click(
+        fn=Gradio_Events.new_chat,
+        inputs=[state],
+        outputs=[conversations, chatbot, settings_form, state])
+    conversations.active_change(
+        fn=Gradio_Events.select_conversation,
+        inputs=[state],
+        outputs=[conversations, chatbot, settings_form, state])
+    conversations.menu_click(fn=Gradio_Events.click_conversation_menu,
+                             inputs=[state],
+                             outputs=[conversations, chatbot, state])
+    # Chatbot Handler
+    chatbot.welcome_prompt_select(fn=Gradio_Events.apply_prompt,
+                                  outputs=[input])
+
+    chatbot.delete(fn=Gradio_Events.delete_message,
+                   inputs=[state],
+                   outputs=[state])
+    chatbot.edit(fn=Gradio_Events.edit_message,
+                 inputs=[state, chatbot],
+                 outputs=[state])
+
+    regenerating_event = chatbot.retry(
+        fn=Gradio_Events.regenerate_message,
+        inputs=[settings_form, thinking_btn_state, state],
+        outputs=[
+            input, clear_btn, conversation_delete_menu_item,
+            add_conversation_btn, conversations, chatbot, state
+        ])
+
+    # Input Handler
+    submit_event = input.submit(
+        fn=Gradio_Events.add_message,
+        inputs=[input, settings_form, thinking_btn_state, state],
+        outputs=[
+            input, clear_btn, conversation_delete_menu_item,
+            add_conversation_btn, conversations, chatbot, state
+        ])
+    input.cancel(fn=Gradio_Events.cancel,
+                 inputs=[state],
+                 outputs=[
+                     input, conversation_delete_menu_item, clear_btn,
+                     conversations, add_conversation_btn, chatbot, state
+                 ],
+                 cancels=[submit_event, regenerating_event],
+                 queue=False)
+    # Input Actions Handler
+    thinking_btn_state.change(fn=Gradio_Events.apply_thinking_btn_state,
+                              inputs=[thinking_btn_state, state],
+                              outputs=[state])
+    setting_btn.click(fn=Gradio_Events.toggle_settings_header,
+                      inputs=[settings_header_state],
+                      outputs=[settings_header_state])
+    clear_btn.click(fn=Gradio_Events.clear_conversation_history,
+                    inputs=[state],
+                    outputs=[chatbot, state])
+    suggestion.select(fn=Gradio_Events.select_suggestion,
+                      inputs=[input],
+                      outputs=[input])
+
+if __name__ == "__main__":
+    demo.queue(default_concurrency_limit=100,
+               max_size=100).launch(ssr_mode=False, max_threads=100)

config.py

@@ -0,0 +1,230 @@
+import os
+from modelscope_studio.components.pro.chatbot import ChatbotActionConfig, ChatbotBotConfig, ChatbotUserConfig, ChatbotWelcomeConfig
+
+# Env
+is_cn = os.getenv('MODELSCOPE_ENVIRONMENT') == 'studio'
+api_key = os.getenv('API_KEY')
+
+
+def get_text(text: str, cn_text: str):
+    if is_cn:
+        return cn_text
+    return text
+
+
+# Save history in browser
+save_history = True
+
+
+# Chatbot Config
+def user_config(disabled_actions=None):
+    return ChatbotUserConfig(
+        class_names=dict(content="user-message-content"),
+        actions=[
+            "copy", "edit",
+            ChatbotActionConfig(
+                action="delete",
+                popconfirm=dict(title=get_text("Delete the message", "删除消息"),
+                                description=get_text(
+                                    "Are you sure to delete this message?",
+                                    "确认删除该消息？"),
+                                okButtonProps=dict(danger=True)))
+        ],
+        disabled_actions=disabled_actions)
+
+
+def bot_config(disabled_actions=None):
+    return ChatbotBotConfig(actions=[
+        "copy", "edit",
+        ChatbotActionConfig(
+            action="retry",
+            popconfirm=dict(
+                title=get_text("Regenerate the message", "重新生成消息"),
+                description=get_text(
+                    "Regenerate the message will also delete all subsequent messages.",
+                    "重新生成消息会删除所有后续消息。"),
+                okButtonProps=dict(danger=True))),
+        ChatbotActionConfig(action="delete",
+                            popconfirm=dict(
+                                title=get_text("Delete the message", "删除消息"),
+                                description=get_text(
+                                    "Are you sure to delete this message?",
+                                    "确认删除该消息？"),
+                                okButtonProps=dict(danger=True)))
+    ],
+                            avatar="./assets/qwen.png",
+                            disabled_actions=disabled_actions)
+
+
+def welcome_config():
+    return ChatbotWelcomeConfig(
+        variant="borderless",
+        icon="./assets/qwen.png",
+        title=get_text("Hello, I'm Qwen3", "你好，我是 Qwen3"),
+        description=get_text("Select a model and enter text to get started.",
+                             "选择模型并输入文本，开始对话吧。"),
+        prompts=dict(
+            title=get_text("How can I help you today?", "有什么我能帮助你的吗?"),
+            styles={
+                "list": {
+                    "width": '100%',
+                },
+                "item": {
+                    "flex": 1,
+                },
+            },
+            items=[{
+                "label":
+                get_text("📅 Make a plan", "📅 制定计划"),
+                "children": [{
+                    "description":
+                    get_text("Help me with a plan to start a business",
+                             "帮助我制定一个创业计划")
+                }, {
+                    "description":
+                    get_text("Help me with a plan to achieve my goals",
+                             "帮助我制定一个实现目标的计划")
+                }, {
+                    "description":
+                    get_text("Help me with a plan for a successful interview",
+                             "帮助我制定一个成功的面试计划")
+                }]
+            }, {
+                "label":
+                get_text("🖋 Help me write", "🖋 帮我写"),
+                "children": [{
+                    "description":
+                    get_text("Help me write a story with a twist ending",
+                             "帮助我写一个带有意外结局的故事")
+                }, {
+                    "description":
+                    get_text("Help me write a blog post on mental health",
+                             "帮助我写一篇关于心理健康的博客文章")
+                }, {
+                    "description":
+                    get_text("Help me write a letter to my future self",
+                             "帮助我写一封给未来自己的信")
+                }]
+            }]),
+    )
+
+
+DEFAULT_SUGGESTIONS = [{
+    "label":
+    get_text('Make a plan', '制定计划'),
+    "value":
+    get_text('Make a plan', '制定计划'),
+    "children": [{
+        "label":
+        get_text("Start a business", "开始创业"),
+        "value":
+        get_text("Help me with a plan to start a business", "帮助我制定一个创业计划")
+    }, {
+        "label":
+        get_text("Achieve my goals", "实现我的目标"),
+        "value":
+        get_text("Help me with a plan to achieve my goals", "帮助我制定一个实现目标的计划")
+    }, {
+        "label":
+        get_text("Successful interview", "成功的面试"),
+        "value":
+        get_text("Help me with a plan for a successful interview",
+                 "帮助我制定一个成功的面试计划")
+    }]
+}, {
+    "label":
+    get_text('Help me write', '帮我写'),
+    "value":
+    get_text("Help me write", '帮我写'),
+    "children": [{
+        "label":
+        get_text("Story with a twist ending", "带有意外结局的故事"),
+        "value":
+        get_text("Help me write a story with a twist ending",
+                 "帮助我写一个带有意外结局的故事")
+    }, {
+        "label":
+        get_text("Blog post on mental health", "关于心理健康的博客文章"),
+        "value":
+        get_text("Help me write a blog post on mental health",
+                 "帮助我写一篇关于心理健康的博客文章")
+    }, {
+        "label":
+        get_text("Letter to my future self", "给未来自己的信"),
+        "value":
+        get_text("Help me write a letter to my future self", "帮助我写一封给未来自己的信")
+    }]
+}]
+
+DEFAULT_SYS_PROMPT = "You are a helpful and harmless assistant."
+
+MIN_THINKING_BUDGET = 1
+
+MAX_THINKING_BUDGET = 38
+
+DEFAULT_THINKING_BUDGET = 38
+
+DEFAULT_MODEL = "qwen3-32b"
+
+MODEL_OPTIONS = [
+    {
+        "label": get_text("Qwen3-235B-A22B", "通义千问3-235B-A22B"),
+        "modelId": "Qwen/Qwen3-235B-A22B",
+        "value": "qwen3-235b-a22b"
+    },
+    {
+        "label": get_text("Qwen3-32B", "通义千问3-32B"),
+        "modelId": "Qwen/Qwen3-32B",
+        "value": "qwen3-32b"
+    },
+    {
+        "label": get_text("Qwen3-30B-A3B", "通义千问3-30B-A3B"),
+        "modelId": "Qwen/Qwen3-30B-A3B",
+        "value": "qwen3-30b-a3b"
+    },
+    {
+        "label": get_text("Qwen3-14B", "通义千问3-14B"),
+        "modelId": "Qwen/Qwen3-14B",
+        "value": "qwen3-14b"
+    },
+    {
+        "label": get_text("Qwen3-8B", "通义千问3-8B"),
+        "modelId": "Qwen/Qwen3-8B",
+        "value": "qwen3-8b"
+    },
+    {
+        "label": get_text("Qwen3-4B", "通义千问3-4B"),
+        "modelId": "Qwen/Qwen3-4B",
+        "value": "qwen3-4b"
+    },
+    {
+        "label": get_text("Qwen3-1.7B", "通义千问3-1.7B"),
+        "modelId": "Qwen/Qwen3-1.7B",
+        "value": "qwen3-1.7b"
+    },
+    {
+        "label": get_text("Qwen3-0.6B", "通义千问3-0.6B"),
+        "modelId": "Qwen/Qwen3-0.6B",
+        "value": "qwen3-0.6b"
+    },
+]
+
+for model in MODEL_OPTIONS:
+    model[
+        "link"] = is_cn and f"https://modelscope.cn/models/{model['modelId']}" or f"https://huggingface.co/{model['modelId']}"
+
+MODEL_OPTIONS_MAP = {model["value"]: model for model in MODEL_OPTIONS}
+
+DEFAULT_LOCALE = 'zh_CN' if is_cn else 'en_US'
+
+DEFAULT_THEME = {
+    "token": {
+        "colorPrimary": "#6A57FF",
+    }
+}
+
+DEFAULT_SETTINGS = {
+    "model": DEFAULT_MODEL,
+    "sys_prompt": DEFAULT_SYS_PROMPT,
+    "thinking_budget": DEFAULT_THINKING_BUDGET
+}

requirements.txt

@@ -0,0 +1,3 @@
+gradio
+modelscope_studio
+openai

ui_components/logo.py

@@ -0,0 +1,16 @@
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def Logo():
+    with antd.Typography.Title(level=1,
+                               elem_style=dict(fontSize=24,
+                                               padding=8,
+                                               margin=0)):
+        with antd.Flex(align="center", gap="small", justify="center"):
+            antd.Image('./assets/qwen.png',
+                       preview=False,
+                       alt="logo",
+                       width=24,
+                       height=24)
+            ms.Span("Qwen3")

ui_components/settings_header.py

@@ -0,0 +1,57 @@
+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
+
+from config import DEFAULT_SETTINGS, MODEL_OPTIONS, MAX_THINKING_BUDGET, MIN_THINKING_BUDGET, get_text
+
+
+def SettingsHeader():
+    state = gr.State({"open": True})
+    with antdx.Sender.Header(title=get_text("Settings", "设置"),
+                             open=True) as settings_header:
+        with antd.Form(value=DEFAULT_SETTINGS) as settings_form:
+            with antd.Form.Item(form_name="model",
+                                label=get_text("Chat Model", "对话模型")):
+                with antd.Select(options=MODEL_OPTIONS):
+                    with ms.Slot(
+                        "labelRender",
+                            params_mapping=
+                            """(option) => ({
+                                label: option.label, 
+                                link: { href: window.MODEL_OPTIONS_MAP[option.value].link },  
+                            })"""
+                    ):
+                        antd.Typography.Text(as_item="label")
+                        antd.Typography.Link(get_text("Model Link", "模型链接"),
+                                            href_target="_blank",
+                                            as_item="link")
+
+            with antd.Form.Item(form_name="thinking_budget",
+                                label=get_text("Thinking Budget", "思考预算"),
+                                elem_classes="setting-form-thinking-budget"):
+                antd.Slider(elem_style=dict(flex=1, marginRight=14),
+                            min=MIN_THINKING_BUDGET,
+                            max=MAX_THINKING_BUDGET,
+                            tooltip=dict(formatter="(v) => `${v}k`"))
+                antd.InputNumber(max=MAX_THINKING_BUDGET,
+                                 min=MIN_THINKING_BUDGET,
+                                 elem_style=dict(width=100),
+                                 addon_after="k")
+            with antd.Form.Item(form_name="sys_prompt",
+                                label=get_text("System Prompt", "系统提示")):
+                antd.Input.Textarea(auto_size=dict(minRows=3, maxRows=6))
+
+    def close_header(state_value):
+        state_value["open"] = False
+        return gr.update(value=state_value)
+
+    state.change(fn=lambda state_value: gr.update(open=state_value["open"]),
+                 inputs=[state],
+                 outputs=[settings_header])
+
+    settings_header.open_change(fn=close_header,
+                                inputs=[state],
+                                outputs=[state])
+
+    return state, settings_form

ui_components/thinking_button.py

@@ -0,0 +1,28 @@
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import gradio as gr
+from config import get_text
+
+
+def ThinkingButton():
+    state = gr.State({"enable_thinking": True})
+    with antd.Button(get_text("Thinking", "深度思考"),
+                     shape="round",
+                     color="primary",
+                     variant="solid") as thinking_btn:
+        with ms.Slot("icon"):
+            antd.Icon("SunOutlined")
+
+    def toggle_thinking(state_value):
+        state_value["enable_thinking"] = not state_value["enable_thinking"]
+        return gr.update(value=state_value)
+
+    def apply_state_change(state_value):
+        return gr.update(
+            variant="solid" if state_value["enable_thinking"] else "")
+
+    state.change(fn=apply_state_change, inputs=[state], outputs=[thinking_btn])
+
+    thinking_btn.click(fn=toggle_thinking, inputs=[state], outputs=[state])
+
+    return state