DeepSeek Harness 插件：dsh-image-annotate

前言¶

DeepSeek Harness（DSH）通過插件擴展能力。在調試代碼、閱讀文檔時，常見場景是：需要把側欄裏的一段代碼、一張圖表或一段 PDF 內容發給 AI，並附帶標註。傳統做法是複製文字、截圖、再手動拼湊座標，容易遺漏或對不準。

DSH 的「請求修改」流程（marquee request-changes）允許在右側欄裏框選內容、逐塊寫註釋，一次性打包成一條消息發給 Agent。dsh-image-annotate 就是這套流程的插件實現：框選、註釋、截圖座標、凍結幀，全部在插件內部完成，Agent 收到消息後即可根據座標裁出真實像素。

功能概覽¶

dsh-image-annotate 爲 DSH 增加一個「右側欄框選標註」流程：

點擊側欄頭部的「⌗ 請求修改」或右下角懸浮球，進入框選模式。
遮罩只覆蓋右側欄，不影響聊天區點擊。
拖出一個矩形，框旁邊彈出註釋框（✓ 保存 / × 丟棄）。
可繼續框選第 2、3…塊，每塊都有獨立註釋。
點底部「確認修改併發送」，所有框一次性作爲一條消息發出。

消息內容包含：

當前打開的文件路徑
窗口幾何（innerW×innerH、dpr、screenX/Y、outerW×outerH、chromeH）
側欄矩形與滾動量
每個框的視口座標、換算後的桌面截圖座標、註釋、框內文字
若框內有 <img>，還包含原圖尺寸與裁剪矩形

Agent 可以先對桌面整屏截圖，再按插件給出的座標裁出用戶看到的真實像素。

安裝¶

插件發佈在 npm，也可直接從 GitHub 倉庫安裝。

Web profile（推薦）¶

dsh plugin --profile web add dsh-image-annotate

從 GitHub 倉庫安裝¶

git clone git@github.com:ImpartialLucas/dsh-image-annotate.git
cd dsh-image-annotate
npm pack
dsh plugin --profile web add "file:<絕對路徑>/dsh-image-annotate-0.7.1.tgz"

Desktop profile¶

desktop profile 由 Electron 獨佔，dsh plugin --profile desktop 會被 CLI 拒絕。建議通過 DSH 插件市場 UI 安裝，或使用官方通道 runCli({ manageDesktopProfile: true })。

使用流程¶

打開一個文件（代碼、文檔等），確保側欄可見。
點擊側欄頭部的「⌗ 請求修改」或右下角懸浮球，進入框選模式。
在右側欄區域拖出矩形，框旁邊彈出註釋框。
輸入或修改註釋，點擊 ✓ 保存，× 丟棄。
重複步驟 3–4，框選更多區域。
點底部「確認修改併發送」，所有框作爲一條消息發出。

Agent 收到消息後，會收到窗口幾何、側欄矩形、滾動量、截圖座標（已乘 DPR）以及凍結幀（如可用）。根據這些信息，Agent 可以在宿主側完成 DPI-aware 截屏，再按座標裁剪出與用戶所見一致的圖像。

技術細節¶

消息內容¶

消息中的截圖座標已經乘過 DPR，是給 DPI-aware 截屏用的。Agent 應該在發送後儘快執行截屏，因爲用戶可能在之後切換文件或關閉側欄，導致佈局變化。

凍結幀（freeze-frame）¶

v0.7.0+ 引入宿主側截屏：插件在點「請求修改」的瞬間（遮罩繪製之前）向宿主發起一個 POST 請求，宿主用 DPI-aware PowerShell 截取整屏並保存爲 PNG。消息中優先包含這張圖（路徑、尺寸、時間戳），若宿主路由不可用，則降級爲「請 Agent 在收到消息後立刻 DPI-aware 截屏」。

座標系統¶

框的座標存儲爲 {cx, cy, w, h}，其中 cx 相對側欄左邊緣，cy 相對滾動內容原點。發送時，會根據當前的側欄矩形和滾動量重新解析一次，確保裁剪座標對應發送那一刻的真實位置。

已知限制¶

無法在瀏覽器內把 DOM 轉成圖片（宿主沒有 html2canvas，插件包也不提供截圖 API）。
PDF 無法在頁面上直接框選，需要先渲染成 PNG 再框選。
截圖座標存在幾個像素的不確定度（Windows 最大化窗口的不可見邊框），必要時應預留 2–4px 餘量。

Agent 側 DPI-aware 截屏示例（PowerShell）¶

Add-Type -TypeDefinition @'
using System; using System.Runtime.InteropServices;
public class Dpi { [DllImport("user32.dll")] public static extern bool SetProcessDPIAware(); }
'@
[Dpi]::SetProcessDPIAware() | Out-Null
Add-Type -AssemblyName System.Windows.Forms,System.Drawing
$b = [System.Windows.Forms.SystemInformation]::VirtualScreen   # 現在返回 3200x2000
$bmp = New-Object System.Drawing.Bitmap($b.Width, $b.Height)
$g = [System.Drawing.Graphics]::FromImage($bmp)
$g.CopyFromScreen($b.X, $b.Y, 0, 0, $bmp.Size)
$bmp.Save('full.png', [System.Drawing.Imaging.ImageFormat]::Png)
$g.Dispose(); $bmp.Dispose()

得到整屏 PNG 後，直接用插件給出的「截圖座標」Rectangle(x, y, w, h) 裁剪即可，不要再乘 DPR。

適用場景¶

需要把側欄中的代碼片段、圖表、文檔段落髮給 AI 並附帶標註。
需要精確的截圖座標，以避免手動截圖對不準。
Agent 需要在宿主側執行 DPI-aware 截屏，以獲得與用戶所見一致的圖像。

維護者與許可證¶

維護者：ImpartialLucas
許可證：MIT
GitHub：https://github.com/ImpartialLucas/dsh-image-annotate
分類：客戶端

總結¶

dsh-image-annotate 爲 DSH 增加了一套完整的「右側欄框選標註」流程：框選、註釋、截圖座標、凍結幀，全部在插件內部完成，Agent 收到消息後即可按座標裁出真實像素。這對需要精確標註和截圖的場景很有幫助。

參考資源¶

GitHub：https://github.com/ImpartialLucas/dsh-image-annotate
npm：https://www.npmjs.com/package/dsh-image-annotate
SkillHub 目錄頁：https://www.skillhub.cn/plugins/ImpartialLucas/dsh-image-annotate