dsh-image-annotate: Adding a Paintbrush to DeepSeek Harness

前言¶

在使用 DeepSeek Harness（DSH）开发或使用智能体时，常遇到需要向模型指出图片中具体问题的场景。传统做法是截图、上传图片，再通过文字描述“这里”、“那个位置”。这种方式在图片信息复杂或模型理解偏差时，沟通成本较高。

dsh-image-annotate 插件旨在解决这一问题。它不改变 DSH 的预览逻辑，而是在图片预览层叠加了一支标注笔。用户可以直接在图片上圈点、添加文字说明，并将标注后的 PNG 原图直接送入输入框，随后继续打字发送。

插件定位¶

这是一个为 DeepSeek Harness 图片预览添加标注功能的插件，由 zhishengplus 维护，采用 MIT 许可证。插件本身零依赖、无构建步骤，仅作为预览层的增强存在。

核心能力¶

该插件提供了以下功能：

• 七种标注工具：移动、画笔、箭头、方框、圆圈、文字、橡皮擦。
• 全程可编辑：所有标注（包括圆圈和方框）都是对象，支持选中、拖动、缩放、双击改字、删除和撤销。
• 原生外观：工具条、按钮和选中框均使用 DSH 的设计 token（如 --dsw-menu-surface-fill），自动适配深浅色主题。
• 一键合成：支持将原图与标注层合并为 PNG，通过原生粘贴通道送入输入框；若失败则依次降级为拖放、剪贴板或下载。
• 多源支持：适用于消息里的截图、输入框草稿图以及工具返回的图片。

使用步骤¶

1. 在会话中点开任意图片。
2. 预览窗口右下角会出现一个圆形的 标注 按钮（与关闭按钮样式一致），点击它。
3. 选择工具（如圆圈、方框或文字）在图上进行标注。
4. 如果位置不合适，直接拖动标注对象。
5. 点击 加入输入框，标注图会自动进入输入框，随后继续打字发送。

快捷键参考¶

• V：选择 / 移动模式
• 1 – 7：切换工具（移动、画笔、箭头、方框、圆圈、文字、橡皮擦）
• E：橡皮擦
• Ctrl/⌘ + Z / Ctrl/⌘ + Shift + Z：撤销 / 重做
• Delete：删除选中
• 方向键（配合 Shift 加速）：微调位置（1px / 10px）
• 文字工具：点击输入文字，回车确认，Esc 取消

安装方法¶

在终端中执行以下命令进行安装：

dsh plugin --profile <PROFILE> add github:zhishengplus/dsh-image-annotate

安装后，该插件会出现在对应 Profile 的 package.json 配置中。首次安装后需要重启一次 DSH。

技术说明¶

• 运行环境：插件本身运行在浏览器端。仓库脚本开发环境需要 Node >= 20。
• 安全性处理：导出图片时，使用 fetch(src) 获取图片 Blob 并解码，避免跨源 drawImage 导致的 toBlob SecurityError。
• DOM 识别：插件通过 MutationObserver 监听，只识别满足特定条件的节点（body 之下、div[role="dialog"][aria-modal="true"] 且直接子元素包含 <img> 的节点）作为预览容器。

生态与链接¶

该插件属于 DSH 插件生态，可在社区目录查看详情。

• 仓库地址：https://github.com/zhishengplus/dsh-image-annotate
• 插件目录：https://www.skillhub.cn/plugins/zhishengplus/dsh-image-annotate