dsh-comfyui-canvas 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +184 -0
- package/README.zh.md +210 -0
- package/comfyui-bridge/ComfyUI-DSH-Canvas/__init__.py +174 -0
- package/comfyui-bridge/ComfyUI-DSH-Canvas/entry/bridge.js +414 -0
- package/cordis.patch.yml +9 -0
- package/docs/NEXT-VERSION-PLAN.md +199 -0
- package/docs/PLAN-v0.1.2.md +307 -0
- package/docs/architecture-flow.html +210 -0
- package/docs/architecture.html +252 -0
- package/docs/comfyui-nav-icon.svg +5 -0
- package/docs/screenshots/01-startup-prompt.png +0 -0
- package/docs/screenshots/02-canvas-ready.png +0 -0
- package/docs/screenshots/03-workflow-output.png +0 -0
- package/lib/client.js +810 -0
- package/lib/index.js +726 -0
- package/package.json +57 -0
- package/screenshots.json +5 -0
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>dsh-comfyui-canvas — 架构图</title>
|
|
6
|
+
<style>
|
|
7
|
+
:root {
|
|
8
|
+
--bg: #0f1115;
|
|
9
|
+
--panel: #171a21;
|
|
10
|
+
--panel2: #1d212b;
|
|
11
|
+
--border: #2a3040;
|
|
12
|
+
--text: #e6e9ef;
|
|
13
|
+
--muted: #9aa3b2;
|
|
14
|
+
--accent: #4f9cf9;
|
|
15
|
+
--green: #3fb27f;
|
|
16
|
+
--amber: #d9a13b;
|
|
17
|
+
--red: #d96a6a;
|
|
18
|
+
--purple: #9b7ce8;
|
|
19
|
+
}
|
|
20
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
21
|
+
body {
|
|
22
|
+
background: var(--bg);
|
|
23
|
+
color: var(--text);
|
|
24
|
+
font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
|
25
|
+
padding: 28px 32px 40px;
|
|
26
|
+
}
|
|
27
|
+
h1 { font-size: 21px; font-weight: 650; margin-bottom: 4px; }
|
|
28
|
+
.subtitle { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
|
|
29
|
+
.grid { display: flex; gap: 18px; align-items: stretch; }
|
|
30
|
+
.col { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
|
|
31
|
+
.col-label {
|
|
32
|
+
text-align: center; font-size: 12px; letter-spacing: .12em;
|
|
33
|
+
text-transform: uppercase; color: var(--muted); padding: 2px 0 4px;
|
|
34
|
+
}
|
|
35
|
+
.col.left .col-label { color: var(--accent); }
|
|
36
|
+
.col.right .col-label { color: var(--green); }
|
|
37
|
+
|
|
38
|
+
.box {
|
|
39
|
+
background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
|
|
40
|
+
padding: 12px 14px; position: relative;
|
|
41
|
+
}
|
|
42
|
+
.box h3 { font-size: 13px; font-weight: 650; color: var(--text); margin-bottom: 6px; }
|
|
43
|
+
.box .tag {
|
|
44
|
+
display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 20px;
|
|
45
|
+
margin-left: 6px; vertical-align: 1px; letter-spacing: .03em;
|
|
46
|
+
}
|
|
47
|
+
.tag.pkg { background: rgba(79,156,249,.16); color: var(--accent); }
|
|
48
|
+
.tag.js { background: rgba(217,161,59,.16); color: var(--amber); }
|
|
49
|
+
.tag.py { background: rgba(63,178,127,.16); color: var(--green); }
|
|
50
|
+
.tag.opt { background: rgba(155,124,232,.16); color: var(--purple); }
|
|
51
|
+
.mini { font-size: 11.5px; color: var(--muted); line-height: 1.65; }
|
|
52
|
+
.mini b { color: var(--text); font-weight: 600; }
|
|
53
|
+
.chip {
|
|
54
|
+
display: inline-block; font-size: 11px; background: var(--panel2);
|
|
55
|
+
border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; margin: 2px 3px 2px 0;
|
|
56
|
+
}
|
|
57
|
+
.box.accent { border-color: rgba(79,156,249,.55); }
|
|
58
|
+
.box.green { border-color: rgba(63,178,127,.55); }
|
|
59
|
+
.box.dim { opacity: .85; }
|
|
60
|
+
|
|
61
|
+
.arrow-row { display: flex; align-items: center; justify-content: center; gap: 10px; height: 40px; }
|
|
62
|
+
.arrow {
|
|
63
|
+
font-size: 15px; color: var(--accent); text-align: center; white-space: nowrap;
|
|
64
|
+
}
|
|
65
|
+
.arrow .proto {
|
|
66
|
+
display: block; font-size: 10px; color: var(--muted); letter-spacing: .04em;
|
|
67
|
+
margin-top: 1px;
|
|
68
|
+
}
|
|
69
|
+
.arrow.green { color: var(--green); }
|
|
70
|
+
.arrow.purple { color: var(--purple); }
|
|
71
|
+
.svg-arrow { display: block; }
|
|
72
|
+
|
|
73
|
+
.bridge {
|
|
74
|
+
background: linear-gradient(180deg, #1a2320, #1d2620);
|
|
75
|
+
border: 1px solid rgba(63,178,127,.5); border-radius: 10px;
|
|
76
|
+
padding: 12px 14px;
|
|
77
|
+
}
|
|
78
|
+
.bridge h3 { color: var(--green); }
|
|
79
|
+
|
|
80
|
+
.note {
|
|
81
|
+
margin-top: 20px; font-size: 11.5px; color: var(--muted); line-height: 1.8;
|
|
82
|
+
border-top: 1px solid var(--border); padding-top: 12px;
|
|
83
|
+
}
|
|
84
|
+
.note b { color: var(--text); }
|
|
85
|
+
.legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
|
|
86
|
+
.legend span { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
|
|
87
|
+
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
|
|
88
|
+
</style>
|
|
89
|
+
</head>
|
|
90
|
+
<body>
|
|
91
|
+
|
|
92
|
+
<h1>dsh-comfyui-canvas 架构图</h1>
|
|
93
|
+
<div class="subtitle">DSH × 画布插件 协同架构 — 浏览器 / Host / ComfyUI 三侧交互与数据流</div>
|
|
94
|
+
|
|
95
|
+
<div class="grid">
|
|
96
|
+
<!-- ===================== 左列：浏览器（DSH Web） ===================== -->
|
|
97
|
+
<div class="col left">
|
|
98
|
+
<div class="col-label">浏览器 · DeepSeek Harness Web</div>
|
|
99
|
+
|
|
100
|
+
<div class="box accent">
|
|
101
|
+
<h3>DSH 会话区 <span class="tag pkg">ui-conversation</span></h3>
|
|
102
|
+
<div class="mini">
|
|
103
|
+
<b>Chat rail</b>（对话、授权弹窗、附件）<br>
|
|
104
|
+
<b>ComfyUI 分屏标签</b>（<span class="chip">conversation.view</span>）
|
|
105
|
+
<span class="tag js">plugin client</span>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<div class="box">
|
|
110
|
+
<h3>画布标签视图 <span class="tag js">dsh-comfyui-canvas / client.js</span></h3>
|
|
111
|
+
<div class="mini">
|
|
112
|
+
顶栏：状态点 · 刷新 · 在新标签页打开<br>
|
|
113
|
+
<b><iframe></b> 常驻加载 → <b>ComfyUI 前端页面</b><br>
|
|
114
|
+
会话隔离 activeView 上报 · 探活
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<div class="arrow-row">
|
|
119
|
+
<div class="svg-arrow">
|
|
120
|
+
<svg width="150" height="22" viewBox="0 0 150 22"><path d="M4 11 H138" stroke="#4f9cf9" stroke-width="2" fill="none" marker-end="url(#ah)"/><defs><marker id="ah" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L7,3 L0,6 Z" fill="#4f9cf9"/></marker></defs></svg>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="arrow">iframe 加载<span class="proto">HTTP(S) · 同屏内嵌</span></div>
|
|
123
|
+
</div>
|
|
124
|
+
|
|
125
|
+
<div class="box green">
|
|
126
|
+
<h3>ComfyUI 前端页面 <span class="tag js">bridge.js 注入扩展</span></h3>
|
|
127
|
+
<div class="mini">
|
|
128
|
+
<b>LiteGraph 画布</b> — 用户正在看的活画布<br>
|
|
129
|
+
上报变更 / 执行命令（add/connect/set_param/run…）<br>
|
|
130
|
+
<span class="chip">graphToPrompt</span> <span class="chip">queuePrompt</span>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<div class="box dim">
|
|
135
|
+
<h3>侧边栏工作台 <span class="tag opt">可选 · better-sidebar</span></h3>
|
|
136
|
+
<div class="mini">内嵌浏览器 / 终端 / 文件等（生态插件，非本插件）</div>
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<!-- ===================== 中缝：Host ===================== -->
|
|
142
|
+
<div class="col" style="flex:0 0 340px;">
|
|
143
|
+
<div class="col-label" style="color:#d9a13b;">DSH Host · Node 进程</div>
|
|
144
|
+
|
|
145
|
+
<div class="box">
|
|
146
|
+
<h3>Agent 循环 <span class="tag pkg">agent-loop</span></h3>
|
|
147
|
+
<div class="mini">
|
|
148
|
+
LLM 编排 · 会话隔离 · 授权审批<br>
|
|
149
|
+
agent 在对话中「副驾」式操作画布
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
|
|
153
|
+
<div class="arrow-row">
|
|
154
|
+
<div class="arrow">工具调用<span class="proto">DSH tool layer</span></div>
|
|
155
|
+
</div>
|
|
156
|
+
|
|
157
|
+
<div class="box accent">
|
|
158
|
+
<h3>画布插件 host <span class="tag js">lib/index.js</span></h3>
|
|
159
|
+
<div class="mini">
|
|
160
|
+
<b>12 个工具</b>：read / add / connect / set_param / remove /
|
|
161
|
+
load / run / debug / config / upgrade / get_outputs / batch_run<br>
|
|
162
|
+
设置注册（baseURL / token / 启动命令 / rail 宽）
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<div class="arrow-row">
|
|
167
|
+
<div class="arrow green">HTTP<span class="proto">/dsh-bridge/* 可选 Bearer token</span></div>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
<div class="box dim">
|
|
171
|
+
<h3>启动 watcher <span class="tag js">launchRequested</span></h3>
|
|
172
|
+
<div class="mini">用 shell 服务拉起 ComfyUI 启动命令</div>
|
|
173
|
+
</div>
|
|
174
|
+
|
|
175
|
+
<div class="arrow-row">
|
|
176
|
+
<div class="arrow purple">MCP（可选）<span class="proto">comfy-cli · 模板/模型/批量</span></div>
|
|
177
|
+
</div>
|
|
178
|
+
<div class="box dim" style="border-color:rgba(155,124,232,.4);">
|
|
179
|
+
<h3 style="color:#9b7ce8;">ComfyUI MCP 服务器 <span class="tag opt">可选</span></h3>
|
|
180
|
+
<div class="mini">官方 comfy-cli · pip 安装 · 独立 CLI</div>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<!-- ===================== 右列：ComfyUI 服务 ===================== -->
|
|
185
|
+
<div class="col right">
|
|
186
|
+
<div class="col-label">ComfyUI 服务（本地 127.0.0.1:8188 / 云端）</div>
|
|
187
|
+
|
|
188
|
+
<div class="bridge">
|
|
189
|
+
<h3>桥接后端 <span class="tag py">ComfyUI-DSH-Canvas / __init__.py</span></h3>
|
|
190
|
+
<div class="mini">
|
|
191
|
+
路由：<span class="chip">GET /dsh-bridge/workflow</span>
|
|
192
|
+
<span class="chip">POST /dsh-bridge/report</span>
|
|
193
|
+
<span class="chip">POST /dsh-bridge/command</span>
|
|
194
|
+
<span class="chip">POST /dsh-bridge/result</span><br>
|
|
195
|
+
可选 <b>DSH_BRIDGE_TOKEN</b> 鉴权 · report 8MB 上限 ·
|
|
196
|
+
多标签 <b>clientId</b> 定向执行
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
<div class="arrow-row">
|
|
201
|
+
<div class="arrow">WebSocket<span class="proto">send_sync · 命令下发 → 前端执行</span></div>
|
|
202
|
+
</div>
|
|
203
|
+
|
|
204
|
+
<div class="box">
|
|
205
|
+
<h3>ComfyUI 核心 API</h3>
|
|
206
|
+
<div class="mini">
|
|
207
|
+
<span class="chip">POST /prompt</span> 入队执行
|
|
208
|
+
<span class="chip">GET /history/:id</span> 结果
|
|
209
|
+
<span class="chip">GET /view</span> 取图
|
|
210
|
+
<span class="chip">GET /system_stats</span> 探活
|
|
211
|
+
</div>
|
|
212
|
+
</div>
|
|
213
|
+
|
|
214
|
+
<div class="arrow-row">
|
|
215
|
+
<div class="arrow">执行结果<span class="proto">output / temp 图片</span></div>
|
|
216
|
+
</div>
|
|
217
|
+
|
|
218
|
+
<div class="box">
|
|
219
|
+
<h3>出图落盘</h3>
|
|
220
|
+
<div class="mini">
|
|
221
|
+
<b>output/</b> — SaveImage 永久保存<br>
|
|
222
|
+
<b>temp/</b> — PreviewImage 临时预览<br>
|
|
223
|
+
<span class="tag js">get_outputs 拉回对话</span>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
<div class="box dim">
|
|
228
|
+
<h3>custom_nodes</h3>
|
|
229
|
+
<div class="mini">含桥接节点 · 以及 LLM/视频/3D 等生态节点</div>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<div class="note">
|
|
235
|
+
<b>数据流（一次画布操作）：</b>
|
|
236
|
+
agent 调 host 工具 → HTTP <span style="color:#3fb27f;">/dsh-bridge/command</span> → 桥接后端 → WebSocket →
|
|
237
|
+
前端 bridge.js → LiteGraph 画布实时变化（所见即所得）→ 前端 POST result ↔ host 轮询。
|
|
238
|
+
<b>读画布：</b> <span style="color:#3fb27f;">refresh_report</span> 拉取最新 → <span style="color:#3fb27f;">/dsh-bridge/workflow</span> 返回。
|
|
239
|
+
<b>批量：</b> <span style="color:#4f9cf9;">batch_run</span> 参数矩阵逐组入队 →
|
|
240
|
+
<span style="color:#4f9cf9;">get_outputs</span> 经 <span style="color:#3fb27f;">/history + /view</span> 取回图片。
|
|
241
|
+
<b>环境：</b> <span style="color:#4f9cf9;">upgrade</span> → git pull 核心 + 自定义节点；启动按钮 → shell 拉起。
|
|
242
|
+
<b>可选 MCP：</b> comfy-cli 直接提交 API 工作流 / 模板 / 模型管理，与画布插件并存不冲突。
|
|
243
|
+
<div class="legend">
|
|
244
|
+
<span><i class="dot" style="background:#4f9cf9"></i> DSH / 插件 host</span>
|
|
245
|
+
<span><i class="dot" style="background:#3fb27f"></i> ComfyUI 桥接</span>
|
|
246
|
+
<span><i class="dot" style="background:#9b7ce8"></i> 可选 MCP</span>
|
|
247
|
+
<span><i class="dot" style="background:#2a3040"></i> 生态 / 底层</span>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
|
|
251
|
+
</body>
|
|
252
|
+
</html>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg viewBox="30 28 122 126" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<!-- ComfyUI square "C" icon (two slanted rounded blocks), traced from the
|
|
3
|
+
official ComfyUI icon, single-color currentColor for 16px DSH nav. -->
|
|
4
|
+
<path fill="currentColor" d="M 88.218 35.663 C 83.809 37.836, 81.579 41.233, 79.462 49 C 76.672 59.236, 76.920 59, 68.933 59 C 61.118 59, 56.643 60.502, 53.141 64.301 C 50.092 67.610, 36.740 113.081, 37.595 117.249 C 38.465 121.495, 41.516 123, 49.254 123 C 57.436 123, 57.918 123.669, 55.621 131.853 C 53.473 139.511, 53.541 144.274, 55.829 146.345 C 57.426 147.791, 60.770 148, 82.252 148 L 106.847 148 109.959 145.381 C 113.987 141.991, 115.125 139.591, 118.435 127.500 C 121.512 116.260, 121.090 112.745, 116.453 110.982 C 115.032 110.442, 105.847 110, 96.042 110 C 81.448 110, 78.114 109.739, 77.661 108.560 C 77.065 107.006, 85.703 75.314, 87.286 73.250 C 87.995 72.325, 93.352 71.999, 107.872 71.996 C 134.256 71.991, 134.414 71.897, 139.945 52.769 C 145.339 34.114, 145.174 33.992, 114.527 34.023 C 95.367 34.042, 90.949 34.317, 88.218 35.663"/>
|
|
5
|
+
</svg>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|