Upload 3 files

ui_components/add_mcp_server_button.py

@@ -0,0 +1,92 @@
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import gradio as gr
+import json
+
+
+def AddMcpServerButton():
+    with antd.Button("添加 MCP Server", type="primary",
+                     size="small") as add_mcp_server_btn:
+        with ms.Slot("icon"):
+            antd.Icon("PlusOutlined")
+    with antd.Modal(
+            title="添加 MCP Server",
+            footer=False,
+            styles=dict(footer=dict(display="none"))) as add_mcp_server_modal:
+        with antd.Tabs():
+            with antd.Tabs.Item(label="表单添加"):
+                with antd.Form(layout="vertical") as add_mcp_server_form:
+                    with antd.Form.Item(form_name="name",
+                                        label="名称",
+                                        rules=[{
+                                            "required": True
+                                        }]):
+                        antd.Input(placeholder="MCP Server 名称，如 fetch、time 等")
+                    with antd.Form.Item(form_name="url",
+                                        label="SSE 链接",
+                                        rules=[{
+                                            "required": True
+                                        }]):
+                        antd.Input(placeholder="MCP Server SSE 链接")
+                    with antd.Flex(gap="small", justify="end"):
+                        add_mcp_server_modal_cancel_btn = antd.Button("取消")
+                        antd.Button("确定", html_type="submit", type="primary")
+            with antd.Tabs.Item(label="JSON 添加"):
+                with antd.Form(layout="vertical") as add_mcp_server_json_form:
+                    with antd.Form.Item(form_name="json",
+                                        label="JSON",
+                                        rules=[{
+                                            "required":
+                                            True,
+                                            "validator":
+                                            """(_, value) => {
+                                                if (!value) {
+                                                    return Promise.reject('请输入 JSON 值');
+                                                }
+                                                try {
+                                                    const parsedValue = JSON.parse(value);
+                                                    if (!parsedValue.mcpServers || typeof parsedValue.mcpServers !== 'object') {
+                                                        return Promise.reject('配置必须包含正确的 mcpServers 字段');
+                                                    }
+                                                    return Promise.resolve()
+                                                } catch {
+                                                    return Promise.reject('请输入有效的 JSON 值');
+                                                }
+                                            } """
+                                        }]):
+                        antd.Input.Textarea(
+                            auto_size=dict(minRows=4, maxRows=8),
+                            placeholder=json.dumps(
+                                {
+                                    "mcpServers": {
+                                        "fetch": {
+                                            "type": "sse",
+                                            "url": "mcp server sse url"
+                                        }
+                                    }
+                                },
+                                indent=4))
+                    with antd.Flex(gap="small", justify="end"):
+                        add_mcp_server_modal_json_cancel_btn = antd.Button(
+                            "取消")
+                        antd.Button("确定", html_type="submit", type="primary")
+    add_mcp_server_btn.click(fn=lambda: gr.update(open=True),
+                             outputs=[add_mcp_server_modal],
+                             queue=False)
+    gr.on(triggers=[
+        add_mcp_server_modal_cancel_btn.click,
+        add_mcp_server_modal_json_cancel_btn.click, add_mcp_server_modal.cancel
+    ],
+          queue=False,
+          fn=lambda: gr.update(open=False),
+          outputs=[add_mcp_server_modal])
+    add_mcp_server_form.finish(
+        lambda: (gr.update(value={
+            "name": "",
+            "url": "",
+        }), gr.update(open=False)),
+        outputs=[add_mcp_server_form, add_mcp_server_modal])
+    add_mcp_server_json_form.finish(
+        lambda: (gr.update(value={"json": ""}), gr.update(open=False)),
+        outputs=[add_mcp_server_json_form, add_mcp_server_modal])
+    return add_mcp_server_form, add_mcp_server_json_form

ui_components/config_form.py

@@ -0,0 +1,155 @@
+import json
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+from .add_mcp_server_button import AddMcpServerButton
+from config import default_mcp_config, model_options, default_sys_prompt
+
+
+def ConfigForm():
+    with antd.Form(layout="vertical",
+                   value={
+                       "sys_prompt": default_sys_prompt,
+                       "model": model_options[0]["value"]
+                   }) as config_form:
+        with antd.Form.Item(label_col=24):
+            with ms.Slot("extra"):
+                with antd.Flex(justify="end", elem_style=dict(marginTop=10)):
+                    mcp_config_confirm_btn = antd.Button("保存配置",
+                                                         type="primary")
+            with antd.Flex(wrap=True,
+                           justify="space-between",
+                           gap="middle",
+                           elem_style=dict(paddingBottom=8)):
+                with antd.Flex(gap="middle", wrap=True):
+                    with antd.Flex(gap="small", align="center"):
+                        antd.Typography.Text("MCP Servers",
+                                             elem_style=dict(fontSize=14))
+                        antd.Typography.Text("编辑以下内容以修改运行中的 MCP Servers",
+                                             elem_style=dict(fontSize=12),
+                                             type="secondary")
+                        with antd.Tooltip(title="目前只支持 SSE 类型的 MCP Server"):
+                            with antd.Typography.Text(type="warning"):
+                                antd.Icon("InfoCircleOutlined")
+                    add_mcp_server_form, add_mcp_server_json_form = AddMcpServerButton(
+                    )
+
+                    with antd.Button("重置默认配置",
+                                     size="small") as reset_mcp_config_btn:
+                        with ms.Slot("icon"):
+                            antd.Icon("ReloadOutlined")
+                with ms.Div():
+                    with antd.Tooltip("在 MCP Inspector 中测试待连接的 MCP Server"):
+                        with antd.Button(
+                                "前往 MCP Inspector 测试",
+                                color="primary",
+                                variant="outlined",
+                                size="small",
+                                href_target="_blank",
+                                href=
+                                "https://modelscope.cn/studios/modelscope/mcp-inspector"
+                        ):
+                            with ms.Slot("icon"):
+                                antd.Icon("ExportOutlined")
+            mcp_config = gr.Code(default_mcp_config,
+                                 show_label=False,
+                                 container=False,
+                                 max_lines=20,
+                                 lines=3,
+                                 language="json")
+        with antd.Form.Item(form_name="model", label="模型"):
+            with ms.Slot("extra"):
+                with ms.Fragment(visible=False) as thought_tip:
+                    antd.Typography.Text("Note: 推理模式在调用工具前，会有较长的思考过程，需耐心等待。",
+                                         elem_style=dict(fontSize=12),
+                                         type="warning")
+
+                with antd.Flex(align="center",
+                               gap=4,
+                               elem_style=dict(marginTop=4)):
+                    ms.Text("Powered by")
+                    with antd.Typography.Link(
+                            href=
+                            "https://modelscope.cn/docs/model-service/API-Inference/intro",
+                            href_target="_blank",
+                            elem_style=dict(display="flex",
+                                            alignItems="center")):
+                        antd.Image(
+                            "https://gw.alicdn.com/imgextra/i4/O1CN01dCJ2sA1OHUQJFyCRm_!!6000000001680-2-tps-200-200.png",
+                            preview=False,
+                            width=20,
+                            height=20)
+                        ms.Text("ModelScope API-Inference")
+            with antd.Select(options=model_options) as model_select:
+                with ms.Slot("labelRender",
+                             params_mapping="""(option) => {
+                                const tag = window.MODEL_OPTIONS_MAP[option.value].tag
+                                return {
+                                    label: option.label, 
+                                    link: { href: `https://modelscope.cn/models/${option.value.split(':')[0]}` },  
+                                    tag: tag ? { value: tag.label, style: { display: 'inline-block', color: tag.color } } : undefined
+                                }
+                             }"""):
+                    with antd.Flex(gap="small"):
+                        antd.Typography.Text(as_item="label")
+                        antd.Tag(elem_style=dict(display="none"),
+                                 as_item="tag")
+                        antd.Typography.Link("模型链接",
+                                             href_target="_blank",
+                                             as_item="link")
+                with ms.Slot("optionRender",
+                             params_mapping="""(option) =>  ({ 
+                            label: option.data.label.split(':')[0], 
+                            tag: option.data.tag ? { value: option.data.tag.label, style: { display: 'inline-block', color: option.data.tag.color } } : undefined 
+                        })"""):
+
+                    with antd.Flex(gap="small"):
+                        antd.Typography.Text(as_item="label")
+                        antd.Tag(elem_style=dict(display="none"),
+                                 as_item="tag")
+
+        with antd.Form.Item(form_name="sys_prompt", label="系统提示"):
+            antd.Input.Textarea(auto_size=dict(minRows=2, maxRows=4))
+
+    def add_mcp_server(mcp_config_value, add_mcp_server_form_value):
+        if not mcp_config_value:
+            mcp_config_value = "{}"
+        mcp_config = json.loads(mcp_config_value)
+        name = add_mcp_server_form_value["name"]
+        url = add_mcp_server_form_value["url"]
+        if "mcpServers" not in mcp_config:
+            mcp_config["mcpServers"] = {}
+        mcp_config["mcpServers"][name] = {"type": "sse", "url": url}
+
+        return gr.update(value=json.dumps(mcp_config, indent=4))
+
+    def add_mcp_server_by_json(mcp_config_value,
+                               add_mcp_server_json_form_value):
+        if not mcp_config_value:
+            mcp_config_value = "{}"
+        mcp_config = json.loads(mcp_config_value)
+        json_value = add_mcp_server_json_form_value["json"]
+        json_config = json.loads(json_value)
+        if "mcpServers" not in mcp_config:
+            mcp_config["mcpServers"] = {}
+
+        mcp_config["mcpServers"].update(json_config.get("mcpServers", {}))
+
+        return gr.update(value=json.dumps(mcp_config, indent=4))
+
+    def select_model(e: gr.EventData):
+        return gr.update(visible=e._data["payload"][1].get("thought", False))
+
+    add_mcp_server_form.finish(fn=add_mcp_server,
+                               inputs=[mcp_config, add_mcp_server_form],
+                               outputs=[mcp_config],
+                               queue=False)
+    add_mcp_server_json_form.finish(
+        fn=add_mcp_server_by_json,
+        inputs=[mcp_config, add_mcp_server_json_form],
+        outputs=[mcp_config],
+        queue=False)
+    model_select.change(fn=select_model, outputs=[thought_tip], queue=False)
+
+    return config_form, mcp_config_confirm_btn, reset_mcp_config_btn, mcp_config

ui_components/mcp_servers_button.py

@@ -0,0 +1,108 @@
+from typing import List
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import gradio as gr
+from config import max_mcp_server_count
+
+
+def McpServersButton(data_source: List[dict]):
+    state = gr.State({"data_source": data_source})
+    with antd.Button(value=None, variant="text",
+                     color="primary") as mcp_servers_btn:
+        with ms.Slot("icon"):
+            antd.Icon("ToolOutlined")
+    with antd.Modal(
+            width=420,
+            footer=False,
+            centered=True,
+            styles=dict(footer=dict(display="none"))) as mcp_servers_modal:
+        with ms.Slot("title"):
+            with antd.Flex(gap="small", align="center"):
+                ms.Text("MCP Servers")
+                mcp_servers_switch = antd.Switch(True)
+                antd.Typography.Text(
+                    f"最大 MCP Server 连接数：{max_mcp_server_count}",
+                    type="secondary",
+                    elem_style=dict(fontSize=12, fontWeight="normal"))
+        with antd.List(
+                data_source=data_source,
+                pagination=dict(pageSize=10,
+                                hideOnSinglePage=True)) as mcp_servers_list:
+            with ms.Slot(
+                    "renderItem",
+                    params_mapping=
+                    "(item) => ({ text: { value: item.name, disabled: item.disabled }, tag: { style: { display: item.internal ? undefined: 'none' } }, switch: { value: item.enabled, mcp: item.name, disabled: item.disabled }})"
+            ):
+                with antd.List.Item():
+                    with antd.Flex(justify="space-between",
+                                   elem_style=dict(width="100%")):
+                        with antd.Flex(gap="small"):
+                            antd.Typography.Text(as_item="text")
+                            antd.Tag("官方示例", color="green", as_item="tag")
+                        mcp_server_switch = antd.Switch(as_item="switch")
+
+    def change_mcp_servers_switch(mcp_servers_switch_value, state_value):
+        state_value["data_source"] = [{
+            **item, "disabled":
+            not mcp_servers_switch_value
+        } for item in state_value["data_source"]]
+        return gr.update(value=state_value)
+
+    def change_mcp_server_switch(state_value, e: gr.EventData):
+        mcp = e._data["component"]["mcp"]
+
+        enabled = e._data["payload"][0]
+
+        state_value["data_source"] = [{
+            **item, "enabled": enabled
+        } if item["name"] == mcp else item
+                                      for item in state_value["data_source"]]
+        return gr.update(value=state_value)
+
+    def apply_state_change(state_value):
+        has_tool_use = False
+        disabled_tool_use = False
+        enabled_server_count = 0
+        for item in state_value["data_source"]:
+            if item.get("enabled"):
+                if enabled_server_count >= max_mcp_server_count:
+                    item["enabled"] = False
+                else:
+                    enabled_server_count += 1
+                    if item.get("disabled"):
+                        disabled_tool_use = True
+                    else:
+                        has_tool_use = True
+
+        if not disabled_tool_use:
+            for item in state_value["data_source"]:
+                if enabled_server_count >= max_mcp_server_count:
+                    item["disabled"] = not item.get("enabled", False)
+                else:
+                    item["disabled"] = False
+
+        return gr.update(
+            data_source=state_value["data_source"],
+            footer="没有可用的 MCP Server"
+            if len(state_value["data_source"]) == 0 else ""), gr.update(
+                color="primary" if has_tool_use else "default"), gr.update(
+                    value=not disabled_tool_use), gr.update(value=state_value)
+
+    mcp_servers_btn.click(fn=lambda: gr.update(open=True),
+                          outputs=[mcp_servers_modal],
+                          queue=False)
+    mcp_servers_switch.change(fn=change_mcp_servers_switch,
+                              inputs=[mcp_servers_switch, state],
+                              outputs=[state])
+    mcp_server_switch.change(fn=change_mcp_server_switch,
+                             inputs=[state],
+                             outputs=[state])
+    state.change(
+        fn=apply_state_change,
+        inputs=[state],
+        outputs=[mcp_servers_list, mcp_servers_btn, mcp_servers_switch, state],
+        queue=False)
+    mcp_servers_modal.cancel(fn=lambda: gr.update(open=False),
+                             outputs=[mcp_servers_modal],
+                             queue=False)
+    return state