Introduction¶
When sending screenshots in DSH (DeepSeek Harness), you usually need to circle the key points first. Because pending images in the editor only support previewing, annotation often has to be done in another application, and then the file has to be reattached. This plugin moves that step directly into the editor.
Below is an introduction to the features, installation, and usage of the dsh-image-annotate plugin.
Overview¶
dsh-image-annotate is a DSH web plugin maintained by janewas under the MIT license. Its core feature is: click a pending image to open an annotation dialog. It supports pen, rectangle, arrow, and movable/resizable text box tools, and inserts the annotated PNG as a new attachment while keeping the original image unchanged.
The plugin does not reset DSH’s UI, takes up minimal space, and has no dependencies or configuration file.
Installation and Activation¶
Before installing, ensure that DSH version is 0.1.5-rc.1 or a compatible version.
Install it using the officially recommended GitHub method:
dsh plugin --profile web add github:janewas/dsh-image-annotate
The install command adds the plugin to the configuration file, and the plugin is mounted via its own cordis.patch.yml. Because the configuration list is read at startup, please restart dsh web after installing.
Core Features¶
The plugin mainly provides the following capabilities:
- Click interaction: Click the thumbnail of a pending image to open the annotation dialog instead of the original preview lightbox.
- Drawing tools: Provides four tools
- Pen: Draw freely.
- Rectangle: Drag to draw a border.
- Arrow: Drag to draw an arrow.
- Text: Drag to create a text box, or click to create a default-size box.
- Text box behavior:
- Move and resize: When using the text tool, drag the box body to move it and drag the 8 handles to resize it. Text automatically reflows based on the box size (automatic line wrapping), and the box does not shrink to a size where the text can no longer be displayed.
- Edit and delete: Double-click the text inside the box to modify it (clearing the text deletes the box), or select it and press Delete to delete it. Supports Ctrl/Cmd+Z to undo move, resize, text editing, or deletion.
- Style: Supports three shapes—rectangle, rounded, and ellipse—and three fill modes—transparent, tinted, and solid—using the currently selected color.
- Style options: Provides 6 colors (red, yellow, green, blue, white, black) and 3 line widths (thin, medium, thick).
- Operation controls: Supports undo (button or Ctrl/Cmd+Z), clear, and close (Esc or clicking the background).
- Result output: After clicking “Insert into input box”, the annotated PNG is inserted as a new attachment, and the original image is retained.
Usage Steps¶
The operation flow is as follows:
- Add the image to the editor (drag-and-drop or use the paperclip).
- Click the image thumbnail to open the annotation editor. The image is displayed at full size.
- Select the tool, color, and line width. If using the text tool, drag to create a box and enter its content.
- Click “Insert into input box”. The annotated PNG appears at the end of the attachment bar, while the original image remains.
Tool Interaction Guide¶
| Operation Type | Interaction |
|---|---|
| Pen | Drag to draw freehand lines |
| Rectangle | Drag from one corner to another |
| Arrow | Drag from tail to head |
| Text | Drag to create a box, or click to create a default-size box |
| Move/resize text box | With the text tool active, drag the box body to move it and drag handles to resize it |
| Edit/delete text box | Double-click to enter text, then select and press Delete to remove it |
Settings¶
Go to Settings → Image Annotation to configure the plugin. The settings are saved in the browser’s localStorage (key: dsh-image-annotate.settings.v1) and are only effective for the current browser and origin.
The main configuration items are:
| Setting | Default | Effect |
|---|---|---|
| Enable click-to-edit | on | Master switch. When disabled, clicking the thumbnail restores default behavior. |
| Default tool | pen | Tool preselected when the dialog opens. |
| Default color | red | Starting color for pen, rectangles, arrows, and text. |
| Default line width | medium | Line width for pen, rectangles, and arrows. |
| Text box shape | rounded | Shape of newly created text boxes (rectangle/rounded/ellipse). |
| Text box tint | tinted | Fill mode (transparent/tinted/solid). |
| Insertion mode | append | Append mode keeps the original image; replace mode removes it. |
| Annotated image filename | annotation | Filename prefix for output, formatted as <prefix>-<suffix>.png. |
Ecosystem Background¶
The philosophy of DeepSeek Harness is “everything is a plugin.” Community directories (such as skillhub.cn) collect various plugins, with no direct affiliation with DeepSeek or High-Flyer official. This article only introduces the plugin’s features and usage.
