DSH Download Image:在助手消息旁一键导出 PNG

前言

在 DeepSeek Harness Web UI 里,助手消息自带复制按钮,复制的是 Markdown 文本。要把某条回复发给同事、贴进文档或留档,往往还需要再截图或自己排版。截图容易裁掉边距、主题不一致;纯 Markdown 粘贴到 IM 里也不总是所见即所得。

下面介绍社区插件 dsh-download-image(维护者 gghyoo):在原生复制按钮旁增加 下载 PNG 图标,把当前助手消息在浏览器本地渲染成一张适合分享的图片,且不改变复制按钮原有行为。

这是什么

dsh-download-image 是 DSH 的客户端插件(分类:客户端)。所有渲染与下载在浏览器本地完成,不上传消息内容。

Host 端 index.js 仅为占位;业务逻辑在 client.js。

核心功能

插件通过 DSH 助手消息操作行 Slot conversation.chat.assistant-actions 注入按钮,order: 5,界面顺序为:原生复制 → 下载 PNG → 反馈 → 分支。原生复制仍由 DSH 处理 Markdown,插件不接管。

已核实能力包括:

  1. 点击下载图标,将最后一条 assistant-step(最终回复,不含工具调用、思考过程、操作栏)导出为 PNG;文件名形如 dsh-message-<时间戳>.png。
  2. PNG 只含助手消息正文,不含点赞、分支、时间、Token 用量等操作栏。
  3. 尽量保留 Markdown 标题、段落、列表、引用、表格、链接、行内代码与代码块样式;使用当前主题计算样式,深/浅色主题均可。
  4. 短行内代码(非 pre 内、≤40 字符)默认不拆行,避免 180px、Ctrl+Shift+R 被断成两行。
  5. 检测横向溢出并加宽画布(最多 2000 CSS px);按最多 2 倍分辨率导出,长消息自动缩放以适配 Canvas 限制。
  6. 样式渲染失败时回退为纯文本 PNG;下载按钮有 idle / 生成中 / 完成 / 失败四种状态;Tooltip 与 DSH 语言一致(简体中文 / English)。

README 说明:当前版本选择下载 PNG 而非复制到剪贴板,是因为在 HTTP(例如局域网 IP)访问时 navigator.clipboard 写入图片不可靠;下载是稳定路径。

安装与启用

环境

  • DeepSeek Harness Web UI
  • 已在 DSH 0.2.1-rc.2 / Chromium 上测试
  • 安装依赖 DSH 自带插件管理器(底层 pnpm)

从 GitHub 安装

dsh plugin add "github:gghyoo/dsh-download-image"

安装完成后刷新 Web UI。若按钮未出现,打开 Settings → Plugins,确认 dsh-download-image 已启用,再硬刷新页面。

更新与卸载

更新可再次执行:

dsh plugin add "github:gghyoo/dsh-download-image"

卸载:

dsh plugin remove "dsh-download-image"

插件为纯 JavaScript,无构建步骤;安装或卸载后建议刷新浏览器,若 DSH 提示重启则按提示操作。

插件不发布到 npm,需从 GitHub 或本地目录安装。本地目录安装命令见仓库 README(含 git clone 与 dsh plugin add "$PWD")。

典型用法

  1. 找到一条已完成的助手消息。
  2. 鼠标移到消息下方操作行,在复制按钮旁会出现下载图标。
  3. 点击下载图标,浏览器保存 PNG。

界面示意(来自 README):

助手消息
─────────────────────────────────────
  [复制]  [下载 PNG]  [反馈]  [分支]      19:42

适用场景与注意

适合:需要把 DSH 助手回复以图片形式分享、存档,且希望样式接近当前 Web UI 主题的用户。

运行与信任:客户端插件随 DSH Web UI 在浏览器中执行;安装前建议阅读 源码 与 MIT 许可证。消息正文若含远程图片,插件会尝试 fetch 并转为 data URL 以嵌入 PNG。

限制(摘自 README):

  • 仅处理助手消息,不修改用户消息复制按钮。
  • 依赖 DSH DOM 标记(如 data-turn-tail、data-chat-flow-kind="assistant-step");上游 UI 大改时选择器可能需同步。
  • Canvas 图表、iframe、Shadow DOM 等复杂组件在 PNG 中可能不完整;纯文本兜底不保留这些组件。
  • 内容宽度最多扩至 2000 CSS px;极长内容可能缩放或截断。
  • 建议使用 Chromium;Safari/Firefox 的 foreignObject 与字体渲染可能有差异。

DeepSeek Harness 生态理念是「一切皆插件」;SkillHub 目录 为社区站点,与 DeepSeek / 幻方无官方从属关系。

结尾

dsh-download-image 在不动原生 Markdown 复制的前提下,为助手消息增加本地 PNG 导出,适合需要「所见即所得」图片分享的 DSH 用户。

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye