dsh-image-gen 0.2.0 → 0.2.2

package/lib/client.js

@@ -17,19 +17,58 @@ window.__ModuleLoader__.load({
 		const DEFAULT_OPENAI_BASE_URL = "https://api.openai.com/v1";
 		const DEFAULT_SEEDREAM_BASE_URL = "https://ark.cn-beijing.volces.com/api/v3";
 		const DEFAULT_DASHSCOPE_ENDPOINT = "https://dashscope.aliyuncs.com/api/v1";
+		const DEFAULT_COMFYUI_BASE_URL = "http://127.0.0.1:8188";
+		const DEFAULT_COMFYUI_TIMEOUT_MS = 3e5;
 		const DEFAULT_MODELS = {
 			google: "gemini-3.1-flash-image",
 			openai: "gpt-image-2",
 			seedream: "doubao-seedream-5-0-260128",
-			dashscope: "qwen-image-3.0"
+			dashscope: "qwen-image-3.0",
+			comfyui: "API workflow"
 		};
 		const DEFAULT_BASE_URLS = {
 			google: DEFAULT_GOOGLE_ENDPOINT,
 			openai: DEFAULT_OPENAI_BASE_URL,
 			seedream: DEFAULT_SEEDREAM_BASE_URL,
-			dashscope: DEFAULT_DASHSCOPE_ENDPOINT
+			dashscope: DEFAULT_DASHSCOPE_ENDPOINT,
+			comfyui: DEFAULT_COMFYUI_BASE_URL
 		};
 		//#endregion
+		//#region lib/types/comfyui-workflow.js
+		/** Pure ComfyUI API-workflow validation and placeholder injection. */
+		const COMFYUI_PROMPT_PLACEHOLDER = "{{prompt}}";
+		/** Validate imported JSON without exposing workflow graph details to callers. */
+		function validateComfyUIWorkflowJson(workflowJson) {
+			parseWorkflow(workflowJson);
+		}
+		function parseWorkflow(workflowJson) {
+			if (workflowJson.trim().length === 0) throw new Error("Import a ComfyUI API workflow JSON file in Settings before generating");
+			if (new TextEncoder().encode(workflowJson).byteLength > 5242880) throw new Error("ComfyUI workflow file must be no larger than 5 MB");
+			let value;
+			try {
+				value = JSON.parse(workflowJson);
+			} catch {
+				throw new Error("ComfyUI workflow file is not valid JSON");
+			}
+			if (!isRecord(value) || Object.keys(value).length === 0) throw new Error("ComfyUI workflow must be a non-empty API-format JSON object");
+			if (!Object.values(value).some((node) => {
+				const inputs = record(node)?.inputs;
+				return inputs !== void 0 && containsPromptPlaceholder(inputs);
+			})) throw new Error(`ComfyUI workflow must contain ${COMFYUI_PROMPT_PLACEHOLDER} in a text input`);
+			return value;
+		}
+		function containsPromptPlaceholder(value) {
+			if (typeof value === "string") return value.includes(COMFYUI_PROMPT_PLACEHOLDER);
+			if (Array.isArray(value)) return value.some(containsPromptPlaceholder);
+			return isRecord(value) && Object.values(value).some(containsPromptPlaceholder);
+		}
+		function isRecord(value) {
+			return typeof value === "object" && value !== null && !Array.isArray(value);
+		}
+		function record(value) {
+			return isRecord(value) ? value : void 0;
+		}
+		//#endregion
 		//#region lib/types/client/gallery-store.js
 		const DB_NAME = "dsh_image_gen_db";
 		const DB_VERSION = 2;
@@ -906,6 +945,7 @@ window.__ModuleLoader__.load({
 				providerOpenAI: "OpenAI / 中转站",
 				providerSeedream: "字节 Seedream",
 				providerDashScope: "阿里 DashScope (通义万相 / Qwen)",
+				providerComfyUI: "本地 ComfyUI",
 				apiKeyLabel: "{provider} API Key",
 				apiKeyPlaceholder: "留空即可保留已配置的 Key",
 				apiKeyHint: "安全保存为 {key}；页面不会读回明文。",
@@ -916,7 +956,17 @@ window.__ModuleLoader__.load({
 				endpointHintOpenAI: "中转站请填其 OpenAI 兼容的 /v1 地址。",
 				endpointHintSeedream: "火山方舟兼容的 /api/v3 地址。",
 				endpointHintDashScope: "阿里云百炼 DashScope 官方接口地址。",
+				endpointHintComfyUI: "正在运行且 DSH Host 可以访问的 ComfyUI 地址，默认使用本机 8188 端口。",
 				model: "模型",
+				workflow: "API Workflow",
+				workflowImport: "导入 JSON 文件",
+				workflowReplace: "替换 JSON 文件",
+				workflowMissing: "尚未导入工作流",
+				workflowImported: "已导入 {name}",
+				workflowHint: "请从 ComfyUI 导出 API Format JSON，并在提示词输入位置写入 {{prompt}}；可用 {{seed}} 作为随机种子。",
+				workflowTooLarge: "工作流文件不能超过 5 MB。",
+				timeout: "生成超时（秒）",
+				timeoutHint: "包括提交、等待和下载图片；默认 300 秒。",
 				saveToWorkspace: "保存到工作区",
 				saveToWorkspaceHint: "每次生成后，把图片文件保存到当前会话工作区。",
 				folder: "工作区文件夹",
@@ -946,6 +996,7 @@ window.__ModuleLoader__.load({
 				providerOpenAI: "OpenAI / Relay",
 				providerSeedream: "ByteDance Seedream",
 				providerDashScope: "Aliyun DashScope (Wanx / Qwen)",
+				providerComfyUI: "Local ComfyUI",
 				apiKeyLabel: "{provider} API Key",
 				apiKeyPlaceholder: "Leave empty to keep configured key",
 				apiKeyHint: "Securely saved as {key}; never read back in plaintext.",
@@ -956,7 +1007,17 @@ window.__ModuleLoader__.load({
 				endpointHintOpenAI: "OpenAI-compatible /v1 base URL for relays.",
 				endpointHintSeedream: "Volcengine Ark compatible /api/v3 base URL.",
 				endpointHintDashScope: "Official Aliyun DashScope endpoint.",
+				endpointHintComfyUI: "A running ComfyUI server reachable by the DSH Host; the default points to port 8188 on this computer.",
 				model: "Model",
+				workflow: "API Workflow",
+				workflowImport: "Import JSON file",
+				workflowReplace: "Replace JSON file",
+				workflowMissing: "No workflow imported",
+				workflowImported: "Imported {name}",
+				workflowHint: "Export an API Format JSON from ComfyUI and place {{prompt}} in its prompt input. {{seed}} is available for a random seed.",
+				workflowTooLarge: "Workflow files must be no larger than 5 MB.",
+				timeout: "Generation timeout (seconds)",
+				timeoutHint: "Covers submission, waiting, and image download; defaults to 300 seconds.",
 				saveToWorkspace: "Save to workspace",
 				saveToWorkspaceHint: "Write each generated image as a file into the session workspace.",
 				folder: "Workspace folder",
@@ -996,6 +1057,12 @@ window.__ModuleLoader__.load({
 .dsh-ig-input{box-sizing:border-box;width:100%;padding:8px 12px;font-size:13px;border:1px solid var(--dsw-alias-border-l2,#d7dbe0);border-radius:8px;background:var(--dsw-alias-bg-layer-3,transparent);color:inherit;outline:none;transition:border-color .15s}
 .dsh-ig-input:focus{border-color:var(--dsw-alias-brand-primary,#4c78ff)}
 .dsh-ig-input-group{display:flex;gap:8px;align-items:center}
+.dsh-ig-file-row{display:flex;align-items:center;gap:10px;min-width:0}
+.dsh-ig-file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%)}
+.dsh-ig-file-button{appearance:none;flex:none;border:1px solid var(--dsw-alias-border-l2,#d7dbe0);border-radius:8px;padding:7px 12px;background:var(--dsw-alias-bg-layer-3,#f9fafb);color:var(--dsw-alias-label-secondary,inherit);font-size:13px;cursor:pointer;transition:background .15s,border-color .15s}
+.dsh-ig-file-button:hover{background:var(--dsw-alias-bg-layer-2,#edf0f3);border-color:var(--dsw-alias-label-dimmed,#9ca3af)}
+.dsh-ig-file-button:focus-within{outline:2px solid var(--dsw-alias-brand-primary,#4c78ff);outline-offset:2px}
+.dsh-ig-file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-secondary,inherit);font-size:12px}
 .dsh-ig-btn-reset{appearance:none;border:1px solid var(--dsw-alias-border-l2,#d7dbe0);border-radius:8px;padding:7px 12px;background:var(--dsw-alias-bg-layer-3,#f9fafb);color:var(--dsw-alias-label-secondary,inherit);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
 .dsh-ig-btn-reset:hover{background:var(--dsw-alias-bg-layer-2,#edf0f3);border-color:var(--dsw-alias-label-dimmed,#9ca3af)}
 .dsh-ig-hint,.dsh-ig-status{margin:0;color:var(--dsw-alias-label-tertiary,#7b818b);font-size:12px;line-height:1.4}
@@ -1078,16 +1145,16 @@ window.__ModuleLoader__.load({
 		/** Required browser services. */
 		const inject = [
 			"slots",
-			"connection",
 			"remote",
+			"remote.credentials",
 			"settingsScope",
 			"locale"
 		];
 		/** Mount the settings card, generated-image card, and native conversation gallery view. */
 		function apply(ctx) {
-			const { api } = ctx.get("connection");
 			const scope = ctx.settingsScope.bind({ namespace: IMAGE_GENERATION_NAMESPACE });
 			const locale = ctx.get("locale");
+			const credentials = ctx.remote.credentials;
 			ctx.effect(() => {
 				const style = document.createElement("style");
 				style.dataset.plugin = "dsh-image-gen";
@@ -1103,7 +1170,7 @@ window.__ModuleLoader__.load({
 				key: IMAGE_GENERATION_NAMESPACE,
 				inject: () => ({
 					scope,
-					credentials: api.credentials,
+					credentials,
 					locale
 				})
 			}, ImageGenerationSettingsCard));
@@ -1135,6 +1202,9 @@ window.__ModuleLoader__.load({
 			const [provider, setProvider] = (0, react.useState)("google");
 			const [model, setModel] = (0, react.useState)("");
 			const [baseURL, setBaseURL] = (0, react.useState)("");
+			const [workflowJson, setWorkflowJson] = (0, react.useState)("");
+			const [workflowName, setWorkflowName] = (0, react.useState)("");
+			const [timeoutSeconds, setTimeoutSeconds] = (0, react.useState)(DEFAULT_COMFYUI_TIMEOUT_MS / 1e3);
 			const [saveToWorkspace, setSaveToWorkspace] = (0, react.useState)(true);
 			const [workspaceFolder, setWorkspaceFolder] = (0, react.useState)("dsh-image-gen");
 			const [key, setKey] = (0, react.useState)("");
@@ -1158,7 +1228,8 @@ window.__ModuleLoader__.load({
 				google: t("providerGoogle"),
 				openai: t("providerOpenAI"),
 				seedream: t("providerSeedream"),
-				dashscope: t("providerDashScope")
+				dashscope: t("providerDashScope"),
+				comfyui: t("providerComfyUI")
 			};
 			(0, react.useEffect)(() => {
 				const value = snapshot.value;
@@ -1166,13 +1237,21 @@ window.__ModuleLoader__.load({
 				setProvider(next);
 				setModel(modelOf(next, value));
 				setBaseURL(baseURLOf(next, value));
+				setWorkflowJson(value?.comfyuiWorkflowJson ?? "");
+				setWorkflowName(value?.comfyuiWorkflowName ?? "");
+				setTimeoutSeconds(Math.max(1, Math.round((value?.comfyuiTimeoutMs ?? 3e5) / 1e3)));
 				setSaveToWorkspace(value?.saveToWorkspace ?? true);
 				setWorkspaceFolder(value?.workspaceFolder ?? "dsh-image-gen");
 			}, [snapshot]);
 			(0, react.useEffect)(() => {
+				const keyRef = KEY_REF[provider];
+				if (keyRef === void 0) {
+					setConfigured(void 0);
+					return;
+				}
 				let active = true;
-				props.credentials.describe({ refs: [KEY_REF[provider]] }).then((response) => {
-					if (active) setConfigured(response.result.ok ? response.result.value.credentials[KEY_REF[provider]]?.configured ?? false : void 0);
+				props.credentials.describe([keyRef]).then((response) => {
+					if (active) setConfigured(response.ok ? response.value?.[keyRef]?.configured ?? false : void 0);
 				}).catch(() => {
 					if (active) setConfigured(void 0);
 				});
@@ -1186,16 +1265,23 @@ window.__ModuleLoader__.load({
 				setMessage("");
 				try {
 					await props.scope.set("provider", provider);
-					await props.scope.set(provider === "google" ? "googleModel" : provider === "openai" ? "openaiModel" : provider === "seedream" ? "seedreamModel" : "dashscopeModel", model);
-					await props.scope.set(provider === "google" ? "googleEndpoint" : provider === "openai" ? "openaiBaseURL" : provider === "seedream" ? "seedreamBaseURL" : "dashscopeEndpoint", baseURL);
+					if (provider === "comfyui") {
+						validateComfyUIWorkflowJson(workflowJson);
+						await props.scope.set("comfyuiBaseURL", baseURL);
+						await props.scope.set("comfyuiWorkflowJson", workflowJson);
+						await props.scope.set("comfyuiWorkflowName", workflowName);
+						await props.scope.set("comfyuiTimeoutMs", Math.max(1, Math.round(timeoutSeconds)) * 1e3);
+					} else {
+						await props.scope.set(provider === "google" ? "googleModel" : provider === "openai" ? "openaiModel" : provider === "seedream" ? "seedreamModel" : "dashscopeModel", model);
+						await props.scope.set(provider === "google" ? "googleEndpoint" : provider === "openai" ? "openaiBaseURL" : provider === "seedream" ? "seedreamBaseURL" : "dashscopeEndpoint", baseURL);
+					}
 					await props.scope.set("saveToWorkspace", saveToWorkspace);
 					await props.scope.set("workspaceFolder", workspaceFolder.trim());
 					if (key.trim().length > 0) {
-						const response = await props.credentials.set({
-							ref: KEY_REF[provider],
-							value: key.trim()
-						});
-						if (!response.result.ok) throw new Error(response.result.error.message);
+						const keyRef = KEY_REF[provider];
+						if (keyRef === void 0) throw new Error("ComfyUI does not use an API key in this version");
+						const response = await props.credentials.set(keyRef, key.trim());
+						if (!response.ok) throw new Error(response.error?.message ?? "Failed to save API key");
 						setKey("");
 						setConfigured(true);
 					}
@@ -1207,6 +1293,23 @@ window.__ModuleLoader__.load({
 				}
 			};
 			const keyStatus = configured === void 0 ? t("checkingKey") : configured ? t("keyConfigured") : t("keyNotConfigured");
+			const workflowStatus = workflowName.length > 0 ? t("workflowImported", { name: workflowName }) : t("workflowMissing");
+			const importWorkflow = async (event) => {
+				const file = event.target.files?.[0];
+				event.target.value = "";
+				if (file === void 0) return;
+				setMessage("");
+				try {
+					if (file.size > 5242880) throw new Error(t("workflowTooLarge"));
+					const json = await file.text();
+					validateComfyUIWorkflowJson(json);
+					setWorkflowJson(json);
+					setWorkflowName(file.name);
+					setMessage(t("workflowImported", { name: file.name }));
+				} catch (cause) {
+					setMessage(cause instanceof Error ? cause.message : String(cause));
+				}
+			};
 			return (0, react_jsx_runtime.jsxs)("li", {
 				className: `dsh-ig-card ${open ? "dsh-ig-card-open" : ""}`,
 				children: [(0, react_jsx_runtime.jsxs)("button", {
@@ -1279,6 +1382,10 @@ window.__ModuleLoader__.load({
 										(0, react_jsx_runtime.jsx)("option", {
 											value: "dashscope",
 											children: t("providerDashScope")
+										}),
+										(0, react_jsx_runtime.jsx)("option", {
+											value: "comfyui",
+											children: t("providerComfyUI")
 										})
 									]
 								}),
@@ -1288,7 +1395,7 @@ window.__ModuleLoader__.load({
 								})
 							]
 						}),
-						(0, react_jsx_runtime.jsxs)("label", {
+						provider !== "comfyui" ? (0, react_jsx_runtime.jsxs)("label", {
 							className: "dsh-ig-field",
 							children: [
 								(0, react_jsx_runtime.jsx)("span", {
@@ -1307,10 +1414,10 @@ window.__ModuleLoader__.load({
 								}),
 								(0, react_jsx_runtime.jsx)("span", {
 									className: "dsh-ig-hint",
-									children: t("apiKeyHint", { key: KEY_REF[provider] })
+									children: t("apiKeyHint", { key: KEY_REF[provider] ?? "" })
 								})
 							]
-						}),
+						}) : null,
 						(0, react_jsx_runtime.jsxs)("label", {
 							className: "dsh-ig-field",
 							children: [
@@ -1340,11 +1447,11 @@ window.__ModuleLoader__.load({
 								}),
 								(0, react_jsx_runtime.jsx)("span", {
 									className: "dsh-ig-hint",
-									children: provider === "google" ? t("endpointHintGoogle") : provider === "openai" ? t("endpointHintOpenAI") : provider === "seedream" ? t("endpointHintSeedream") : t("endpointHintDashScope")
+									children: provider === "google" ? t("endpointHintGoogle") : provider === "openai" ? t("endpointHintOpenAI") : provider === "seedream" ? t("endpointHintSeedream") : provider === "dashscope" ? t("endpointHintDashScope") : t("endpointHintComfyUI")
 								})
 							]
 						}),
-						(0, react_jsx_runtime.jsxs)("label", {
+						provider !== "comfyui" ? (0, react_jsx_runtime.jsxs)("label", {
 							className: "dsh-ig-field",
 							children: [(0, react_jsx_runtime.jsx)("span", {
 								className: "dsh-ig-label",
@@ -1357,7 +1464,61 @@ window.__ModuleLoader__.load({
 								},
 								required: true
 							})]
-						}),
+						}) : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-ig-field",
+							children: [
+								(0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-ig-label",
+									children: t("workflow")
+								}),
+								(0, react_jsx_runtime.jsxs)("div", {
+									className: "dsh-ig-file-row",
+									children: [(0, react_jsx_runtime.jsxs)("label", {
+										className: "dsh-ig-file-button",
+										children: [(0, react_jsx_runtime.jsx)("input", {
+											className: "dsh-ig-file-input",
+											type: "file",
+											accept: ".json,application/json",
+											onChange: (event) => {
+												importWorkflow(event);
+											}
+										}), workflowName.length > 0 ? t("workflowReplace") : t("workflowImport")]
+									}), (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ig-file-name",
+										title: workflowName,
+										children: workflowName || t("workflowMissing")
+									})]
+								}),
+								(0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-ig-hint",
+									children: t("workflowHint")
+								})
+							]
+						}), (0, react_jsx_runtime.jsxs)("label", {
+							className: "dsh-ig-field",
+							children: [
+								(0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-ig-label",
+									children: t("timeout")
+								}),
+								(0, react_jsx_runtime.jsx)("input", {
+									className: "dsh-ig-input",
+									type: "number",
+									min: "1",
+									max: "3600",
+									step: "1",
+									value: timeoutSeconds,
+									onChange: (event) => {
+										setTimeoutSeconds(Number(event.target.value));
+									},
+									required: true
+								}),
+								(0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-ig-hint",
+									children: t("timeoutHint")
+								})
+							]
+						})] }),
 						(0, react_jsx_runtime.jsxs)("div", {
 							className: "dsh-ig-field",
 							children: [(0, react_jsx_runtime.jsxs)("label", {
@@ -1403,11 +1564,11 @@ window.__ModuleLoader__.load({
 							children: [(0, react_jsx_runtime.jsx)("p", {
 								className: "dsh-ig-status",
 								role: "status",
-								children: message || keyStatus
+								children: message || (provider === "comfyui" ? workflowStatus : keyStatus)
 							}), (0, react_jsx_runtime.jsx)("button", {
 								className: "dsh-ig-save",
 								type: "submit",
-								disabled: saving || !snapshot.writable,
+								disabled: saving || !snapshot.writable || provider === "comfyui" && workflowJson.length === 0,
 								children: saving ? t("saving") : t("save")
 							})]
 						})
@@ -1656,11 +1817,11 @@ window.__ModuleLoader__.load({
 			});
 		}
 		function modelOf(provider, value) {
-			const stored = provider === "google" ? value?.googleModel : provider === "openai" ? value?.openaiModel : provider === "seedream" ? value?.seedreamModel : value?.dashscopeModel;
+			const stored = provider === "google" ? value?.googleModel : provider === "openai" ? value?.openaiModel : provider === "seedream" ? value?.seedreamModel : provider === "dashscope" ? value?.dashscopeModel : value?.comfyuiWorkflowName;
 			return typeof stored === "string" && stored.length > 0 ? stored : DEFAULT_MODELS[provider];
 		}
 		function baseURLOf(provider, value) {
-			const stored = provider === "google" ? value?.googleEndpoint : provider === "openai" ? value?.openaiBaseURL : provider === "seedream" ? value?.seedreamBaseURL : value?.dashscopeEndpoint;
+			const stored = provider === "google" ? value?.googleEndpoint : provider === "openai" ? value?.openaiBaseURL : provider === "seedream" ? value?.seedreamBaseURL : provider === "dashscope" ? value?.dashscopeEndpoint : value?.comfyuiBaseURL;
 			return typeof stored === "string" && stored.length > 0 ? stored : DEFAULT_BASE_URLS[provider];
 		}
 		function imageRef(block) {