前言¶
在 DeepSeek Harness (DSH) 的对话流中，模型通常通过文字描述图表或流程。这种方式虽然准确，但在对话中难以直观查看。dsh-widget 插件通过一个工具调用，将模型生成的 SVG 或 HTML 片段直接渲染为对话中的可视化卡片，解决了“看图”的问题，无需人工干预或额外的可视化库。
这是什么¶
这是一个 DSH 插件，用于将模型编写的 SVG/HTML 片段渲染为对话中的内联可视化卡片（图表、流程图等），支持沙箱隔离。插件由 anneqaq 维护，许可证为 MIT。它通过注册 ToolDefinition 工具，让模型直接调用渲染逻辑。
核心功能¶
- 可视化渲染：支持将模型输出的 SVG 或 HTML 片段渲染为流程图、时间线、对比表格、布局稿等。
- 沙箱隔离：使用
srcdoc帧进行渲染，默认无脚本权限。内容在隔离的 iframe 中执行，CSP 策略为default-src 'none'，防止跨域资源加载或数据泄露。 - 无网络依赖：渲染过程不依赖外部 CDN，所有资源需内联。
- 工具集成：注册了
render_widget工具定义，模型调用该工具时，DSH 会自动处理卡片的展示逻辑。
安装与启用¶
插件没有构建步骤，安装后直接可用。
- 执行安装命令：
dsh plugin --profile web add github:anneqaq/dsh-widget
- 重启
dsh web。插件在启动时挂载，不支持热重载。 - 验证配置是否生效（可选）：
dsh --profile web --dump-config | grep -A2 dsh-widget
典型用法¶
模型负责编写代码，DSH 负责渲染。模型调用 render_widget 工具，传入自包含的 HTML 或 SVG 片段。
参数说明：
* html：必填。一段自包含的 SVG 或 HTML 片段。
* title：可选。卡片标题，同时作为帧标题。
* height：可选。高度，单位 CSS 像素。默认 420，限制范围 80-2000。
* allowScripts：可选。是否允许片段中包含脚本。默认关闭。
使用示例：
模型在对话中调用：
{
"tool": "render_widget",
"arguments": {
"html": "<svg ...>...</svg>",
"title": "服务请求生命周期",
"height": 300
}
}
适用场景与注意¶
该插件适合需要在对话流中展示复杂结构、图表或布局稿的场景。
注意事项：
* 安全性：由于内容来自模型编写，默认视为不可信内容。渲染基于沙箱 iframe，默认禁止脚本。如需脚本，需在调用时设置 allowScripts: true，且必须关闭 allow-same-origin 以避免 iframe 访问宿主文档。
* 资源限制：软预算 8 KB，硬上限 512 KB。当片段大小超过软预算时，系统会提示模型。超过硬上限的请求会被拒绝。
* 显示时机：卡片在 html 参数闭合时出现。流式传输过程中显示占位符。
* 依赖：插件依赖 react，且依赖当前 DSH 进程的模块解析能力。
* 安装前检查：插件以当前 DSH 进程权限运行，安装前应检查源码与许可证。
总结¶
dsh-widget 通过工具化的方式，让模型生成的可视化内容直接嵌入对话，提升了信息传达效率。对于需要高交互图表或复杂布局的场景，这是一个直接的落地方案。
