前言¶
在 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 通過工具化的方式，讓模型生成的可視化內容直接嵌入對話，提升了信息傳達效率。對於需要高交互圖表或複雜佈局的場景，這是一個直接的落地方案。
