@deepseek-ai/dsh-client-ui-design-mode

@deepseek-ai/dsh-client-ui-design-mode

English | 中文

React 18 and Konva browser surface for DSH Design Mode. It occupies the formal shell.secondary slot and communicates only through Layout, Composer Context, credential, and generated Design Remote contracts.

User surface

The session header arms Design Mode in the native Composer without opening the canvas. A blank session exposes the same action in the Composer toolbar because DSH hides the ordinary session header until the first message. The canvas opens only after a Design message is admitted or the user chooses a concrete image through upload or “Add to canvas.” Wide screens then collapse the sidebar to a compact rail, keep conversation at 400px by default, and give the remainder to the canvas; the divider clamps chat to 340–520px. Below 1024px the shell switches between Chat and Canvas panes.

The dotted infinite canvas supports pointer-centered zoom, pan, single and Cmd/Shift multi-selection, move, four-corner proportional resize, rotate, lock, hide, download, fit-to-view, and local undo/redo. Images arrive by upload, paste, drop, generation, or the explicit “Add to canvas” action on ordinary chat images.

Point, rectangle, and brush anchors create persistent comments against one parent version. The composer follows the selected anchor, and numbered canvas markers reopen their thread. Threads support reply, resolve, reopen, selection, and one 1–20-comment batch from the same parent. The tree panel locates versions and shows provider/job state; new results appear to the right of their parent with branch offsets and edges.

Image creation remains exclusively in the native Composer. Once an image is selected, a consumer-oriented edit dock exposes local edit, erase, background replacement/removal, upscale, outpaint, text editing/translation, angle, recolor, and authorized mark removal. Each capability has its own task-specific form; ecommerce-only model and logo workflows remain available to Agent tools for compatibility but are not primary canvas UI. The panel supports one target plus up to thirteen references. Text editing and translation display OCR boxes and require explicit selection before building their union mask.

The top-right Export menu produces PNG, PDF, standalone HTML, ZIP, and PPTX entirely in the browser. Exports include visible image nodes, version edges, and numbered comment annotations; ZIP also carries the canvas document and referenced source assets.

Composer synchronization

Selection atomically replaces this session's design-mode context entries. Each chip is removable. On submit, Design context parts resolve before ordinary image attachments and user text; a successful admission clears the one-shot entries, while a failure or cancellation retains them. Switching sessions or selection cannot accumulate stale target images.

Arming image creation contributes a separate removable design-mode-intent chip. Its resolver marks the submitted message as a Design request; the successful context commit opens the canvas and re-arms the protocol for the next message. New-image requests require three sequential clarification questions and may use up to five when material ambiguity remains. Each question is one dedicated card with three model-generated choices plus one UI-owned “Other” option for free-form input.

Model Experience

Selected image context

What the model sees

The model sees only design-mode chips still visible when the user submits. Each selected image contributes a structured role/version/comment record and its resolved image data; selected Mask and Crop data are explicit parts. Canvas-only actions are not model-visible.

Token effect

Every submitted metadata record consumes text tokens, and every selected image or mask uses model image-input accounting. Removing a chip removes its entire contribution.

KV Cache effect

Submitting a different selection changes the user-turn payload and its cache suffix. Pan, zoom, selection highlight, and panel state do not affect the model or cache.

Image intent clarification

What the model sees

The model receives the Design request protocol before the user's ordinary attachments and text. It asks one adaptive three-choice question per ask_user_question call, completes rounds one through three, optionally asks rounds four and five, synthesizes the answers into a production prompt, and then calls design_generate_image. The Host rejects that tool before three answered rounds and clears the live round sequence after job admission.

Token effect

The protocol and each answered clarification add text to the active turn. No image-input tokens are consumed until the final generation request includes an image reference.

KV Cache effect

Each answer advances the same live tool round and changes the following request suffix. Starting a later Design generation begins a fresh clarification sequence.

Known Limitations and Deferred Work

• The v1 canvas intentionally has no arbitrary text element, vector shape editor, or full layer panel.
• Undo/redo covers local layout and drafts; it never deletes already admitted provider jobs or committed versions.
• Fifty-image scenarios use thumbnail-oriented rendering, but very large source images still depend on browser GPU and memory limits.
• Video import, generation, editing, timeline, and controls are not implemented.