@dsh-plus/image-studio 0.1.6 → 0.1.8

package/lib/client.js

@@ -637,10 +637,11 @@ ${extra}
 			{
 				key: "size",
 				kind: "string",
+				rules: "image-size",
 				applies: ["generation", "edit"],
 				generation: "current",
 				advanced: false,
-				description: "尺寸，如 1024x1024 / 1536x1024 / 1024x1536 / auto；宽高需为 16 的倍数、最大边 ≤3840、比例 ≤3:1（依模型限制）"
+				description: "尺寸：auto 或「宽x高」。推荐 1024x1024 / 1536x1024 / 1024x1536；自定义需宽高为 16 的倍数、长边 ≤3840、比例 ≤3:1、总像素 655360-8294400"
 			},
 			{
 				key: "quality",
@@ -649,12 +650,14 @@ ${extra}
 					"auto",
 					"low",
 					"medium",
-					"high"
+					"high",
+					"xhigh",
+					"max"
 				],
 				applies: ["generation", "edit"],
 				generation: "current",
 				advanced: false,
-				description: "质量档位"
+				description: "质量档位（xhigh/max 为 image 2.5 新增高档位）"
 			},
 			{
 				key: "background",
@@ -764,6 +767,90 @@ ${extra}
 			return key === "model";
 		}
 		//#endregion
+		//#region src/params/size.ts
+		/** GPT Image 代自定义尺寸规则。 */
+		const IMAGE_SIZE_RULE = Object.freeze({
+			multiple: 16,
+			maxEdge: 3840,
+			minPixels: 655360,
+			maxPixels: 8294400,
+			maxAspect: 3
+		});
+		/** 免校验取值：实际尺寸由模型按提示词决定。 */
+		const SIZE_AUTO = "auto";
+		/** 预设尺寸表（顺序即展示序：常用在前；全部满足 16 倍数约束）。 */
+		const SIZE_PRESETS = Object.freeze([
+			Object.freeze({
+				value: SIZE_AUTO,
+				label: "auto（由模型决定）"
+			}),
+			Object.freeze({
+				value: "1024x1024",
+				label: "1024×1024 方形 1:1"
+			}),
+			Object.freeze({
+				value: "1536x1024",
+				label: "1536×1024 横向 3:2"
+			}),
+			Object.freeze({
+				value: "1024x1536",
+				label: "1024×1536 纵向 2:3"
+			}),
+			Object.freeze({
+				value: "2048x1152",
+				label: "2048×1152 宽屏 16:9"
+			}),
+			Object.freeze({
+				value: "1152x2048",
+				label: "1152×2048 竖屏 9:16"
+			}),
+			Object.freeze({
+				value: "3840x2160",
+				label: "3840×2160 4K 16:9"
+			}),
+			Object.freeze({
+				value: "2160x3840",
+				label: "2160×3840 4K 9:16"
+			})
+		]);
+		const OK = { ok: true };
+		/** 「宽x高」规范形态（小写 x、无空白；`auto` 原样）。 */
+		function normalizeImageSize(value) {
+			const text = value.trim();
+			if (text === "auto") return SIZE_AUTO;
+			return text.replace(/[×✕✖]/g, "x").replace(/\s+/g, "").toLowerCase();
+		}
+		/** 规范化后的「宽x高」形态。 */
+		const SIZE_PATTERN = /^(\d{2,5})x(\d{2,5})$/;
+		/**
+		* 校验一个尺寸取值（`auto` 或「宽x高」，容忍大小写/全角乘号/空白）。
+		* @param value - 用户输入或预设值（提交/保存前校验）。
+		* @param rule - 尺寸约束（缺省 GPT Image 代规则）。
+		*/
+		function checkImageSize(value, rule = IMAGE_SIZE_RULE) {
+			const text = normalizeImageSize(value);
+			if (text === "auto") return OK;
+			const match = SIZE_PATTERN.exec(text);
+			if (match === null) return fail("需为「宽x高」（如 1024x1024）或 auto");
+			const width = Number(match[1]);
+			const height = Number(match[2]);
+			if (width % rule.multiple !== 0 || height % rule.multiple !== 0) return fail(`宽高需为 ${rule.multiple} 的倍数（当前 ${width}x${height}）`);
+			const long = Math.max(width, height);
+			const short = Math.min(width, height);
+			if (long > rule.maxEdge) return fail(`长边不能超过 ${rule.maxEdge}px（当前 ${long}px）`);
+			if (long / short > rule.maxAspect) return fail(`宽高比不能超过 ${rule.maxAspect}:1`);
+			const pixels = width * height;
+			if (pixels < rule.minPixels) return fail(`总像素不能少于 ${rule.minPixels}（当前 ${pixels}）`);
+			if (pixels > rule.maxPixels) return fail(`总像素不能超过 ${rule.maxPixels}（当前 ${pixels}）`);
+			return OK;
+		}
+		function fail(message) {
+			return {
+				ok: false,
+				message
+			};
+		}
+		//#endregion
 		//#region src/params/spec.ts
 		/** 归一化失败原因（边界校验用，端点转 invalid-request）。 */
 		var ParamValidationError = class extends Error {
@@ -781,7 +868,7 @@ ${extra}
 			switch (entry.kind) {
 				case "string":
 					if (typeof value !== "string" || value.length === 0) throw new ParamValidationError(key, "必须是非空字符串");
-					return value;
+					return validateRule(entry.rules, key, value);
 				case "enum":
 					if (typeof value !== "string" || !entry.values?.includes(value)) throw new ParamValidationError(key, `必须是 ${entry.values?.join(" | ") ?? "枚举值"} 之一`);
 					return value;
@@ -795,6 +882,18 @@ ${extra}
 					return value;
 			}
 		}
+		/**
+		* 结构化值域规则分派（目录声明 → 校验实现单一入口）。
+		* 无规则的参数原样返回；规则拒绝时错误消息即为面向用户的原因。
+		*/
+		function validateRule(rule, key, value) {
+			if (rule === "image-size") {
+				const checked = checkImageSize(value);
+				if (!checked.ok) throw new ParamValidationError(key, checked.message);
+				return normalizeImageSize(value);
+			}
+			return value;
+		}
 		/** 校验预设里的参数表（结构合法但可跨端点；应用时再按端点归一化）。 */
 		function validateParamSpecs(specs) {
 			if (specs === null || typeof specs !== "object" || Array.isArray(specs)) throw new ParamValidationError("(整体)", "必须是对象");
@@ -845,6 +944,27 @@ ${extra}
 		function imageUrl(imageId) {
 			return `${BASE}/images/${imageId}`;
 		}
+		/** 上传原图 URL（缩略图直连，非 fetch）。 */
+		function uploadImageUrl(uploadId) {
+			return `${BASE}/uploads/${uploadId}`;
+		}
+		/** 上传本地图片：raw body 流（query 携带原文件名，仅展示用）。 */
+		async function uploadImage(file) {
+			const query = new URLSearchParams({ name: file.name });
+			const res = await fetch(`${BASE}/uploads?${query.toString()}`, {
+				method: "POST",
+				credentials: "same-origin",
+				headers: { "content-type": "application/octet-stream" },
+				body: file
+			});
+			const body = await res.json();
+			if (!res.ok) throw new Error(body.message ?? body.error ?? `HTTP ${res.status}`);
+			return body;
+		}
+		/** 上传列表（最新在后；界面自行倒序）。 */
+		async function fetchUploads() {
+			return getJson(`${BASE}/uploads`);
+		}
 		/** 凭据状态（describe，永不回传值）。 */
 		function fetchCredentialStatus(refName) {
 			return getJson(`${BASE}/credentials/${refName}`);
@@ -903,7 +1023,8 @@ ${extra}
 				maxConcurrent: String(value.maxConcurrent),
 				requestTimeoutMs: String(value.requestTimeoutMs),
 				proxy: value.proxy,
-				galleryMaxItems: String(value.galleryMaxItems)
+				galleryMaxItems: String(value.galleryMaxItems),
+				uploadTtlHours: String(value.uploadTtlHours)
 			};
 		}
 		function parseJson(text, label) {
@@ -944,7 +1065,8 @@ ${extra}
 				maxConcurrent: Math.max(0, Math.floor(Number(draft.maxConcurrent) || 0)),
 				requestTimeoutMs: Math.max(1e4, Math.floor(Number(draft.requestTimeoutMs) || 3e5)),
 				proxy: draft.proxy,
-				galleryMaxItems: Math.max(0, Math.floor(Number(draft.galleryMaxItems) || 0))
+				galleryMaxItems: Math.max(0, Math.floor(Number(draft.galleryMaxItems) || 0)),
+				uploadTtlHours: Math.max(1, Math.floor(Number(draft.uploadTtlHours) || 24))
 			};
 		}
 		/** 单个提供商预设的 API Key 行（describe 徽标 + 设置/删除，值不回显）。 */
@@ -1385,6 +1507,15 @@ ${extra}
 							disabled,
 							onEdit: (v) => patch({ galleryMaxItems: v })
 						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
+						prefix: "imsc",
+						id: "imsc-upload-ttl",
+						label: t("card.uploadTtlHours"),
+						numeric: true,
+						value: draft.uploadTtlHours,
+						disabled,
+						onEdit: (v) => patch({ uploadTtlHours: v })
 					})
 				]
 			});
@@ -1444,8 +1575,15 @@ ${extra}
 			"sources.mask": "遮罩（可选）",
 			"sources.maskPick": "选择遮罩",
 			"sources.maskClear": "清除",
+			"sources.maskHint": "遮罩必须是与源图同尺寸的 PNG（透明区域为可重绘范围）",
+			"sources.uploaded": "本地文件上传",
+			"upload.pick": "上传图片",
+			"upload.empty": "暂无上传图片，点上方「上传图片」从本地选择",
+			"upload.failed": "上传失败：",
 			"picker.empty": "画廊暂无图片",
 			"picker.confirm": "使用所选（{n}）",
+			"picker.section.gallery": "画廊",
+			"picker.section.uploads": "本地上传",
 			"generate.submit": "生成",
 			"generate.submitted": "已提交任务 {id}，进度见下方任务条",
 			"generate.failed": "提交失败：",
@@ -1496,6 +1634,7 @@ ${extra}
 			"card.requestTimeoutMs": "单请求超时（毫秒）",
 			"card.proxy": "上游代理（空 = 直连）",
 			"card.galleryMaxItems": "画廊保留上限（0 = 不清理）",
+			"card.uploadTtlHours": "上传原图保留时长（小时）",
 			"card.specsInvalid": "参数表非法：",
 			"card.idInvalid": "ID 非法：",
 			"card.save": "保存",
@@ -1552,8 +1691,15 @@ ${extra}
 			"sources.mask": "Mask (optional)",
 			"sources.maskPick": "Pick mask",
 			"sources.maskClear": "Clear",
+			"sources.maskHint": "The mask must be a PNG the same size as the source (transparent area is repainted)",
+			"sources.uploaded": "Uploaded from disk",
+			"upload.pick": "Upload image",
+			"upload.empty": "No uploads yet — use \"Upload image\" above to pick a local file",
+			"upload.failed": "Upload failed: ",
 			"picker.empty": "No images in the gallery yet",
 			"picker.confirm": "Use selected ({n})",
+			"picker.section.gallery": "Gallery",
+			"picker.section.uploads": "Uploads",
 			"generate.submit": "Generate",
 			"generate.submitted": "Task {id} submitted; progress in the task bar below",
 			"generate.failed": "Submit failed: ",
@@ -1604,6 +1750,7 @@ ${extra}
 			"card.requestTimeoutMs": "Request timeout (ms)",
 			"card.proxy": "Upstream proxy (empty = direct)",
 			"card.galleryMaxItems": "Gallery retention (0 = keep all)",
+			"card.uploadTtlHours": "Upload retention (hours)",
 			"card.specsInvalid": "Invalid param specs: ",
 			"card.idInvalid": "Invalid ID: ",
 			"card.save": "Save",
@@ -1790,18 +1937,25 @@ ${extra}
 										className: "ims-detailPrompt",
 										children: item.prompt
 									}),
-									item.sourceIds.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+									item.sourceIds.length + item.sourceUploads.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
 										className: "ims-detailLabel",
 										children: t("gallery.detail.sources")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: "ims-sources",
-										children: item.sourceIds.map((imageId) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										children: [item.sourceIds.map((imageId) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											className: "ims-thumb",
 											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 												src: imageUrl(imageId),
 												alt: ""
 											})
-										}, imageId))
+										}, imageId)), item.sourceUploads.map((uploadId) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "ims-thumb",
+											title: t("sources.uploaded"),
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+												src: uploadImageUrl(uploadId),
+												alt: ""
+											})
+										}, uploadId))]
 									})] }) : null,
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
 										className: "ims-detailLabel",
@@ -2042,7 +2196,13 @@ ${extra}
 		}
 		//#endregion
 		//#region src/client/panel/params-form.tsx
-		/** 单参数行：开关 + 名称/说明 + 值控件。 */
+		/** 结构化规则的即时提示：规则通过或取值未填时不占位。 */
+		function ruleHint(entry, value) {
+			if (entry.rules !== "image-size" || value.trim() === "") return null;
+			const checked = checkImageSize(value);
+			return checked.ok ? null : checked.message;
+		}
+		/** 单参数行：开关 + 名称/说明 + 值控件（+ 预设与校验提示）。 */
 		function ParamRow(props) {
 			const { t, entry, form, onChange } = props;
 			const field = form[entry.key] ?? {
@@ -2056,11 +2216,15 @@ ${extra}
 					...next
 				}
 			});
+			const text = String(field.value);
+			const hint = field.enabled ? ruleHint(entry, text) : null;
+			/** size 预设：快捷填写，仍可自由改动输入框。 */
+			const presets = entry.rules === "image-size" ? SIZE_PRESETS : [];
 			const control = (() => {
 				if (entry.kind === "boolean") return null;
 				if (entry.kind === "enum") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
 					className: "ims-input ims-paramControl",
-					value: String(field.value),
+					value: text,
 					disabled: !field.enabled,
 					onChange: (event) => patch({ value: event.target.value }),
 					children: (entry.values ?? []).map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
@@ -2074,15 +2238,17 @@ ${extra}
 					inputMode: "numeric",
 					min: entry.min,
 					max: entry.max,
-					value: String(field.value),
+					value: text,
 					disabled: !field.enabled,
 					onChange: (event) => patch({ value: event.target.value })
 				});
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					className: "ims-input ims-paramControl",
+					className: `ims-input ims-paramControl${hint !== null ? " ims-inputInvalid" : ""}`,
 					type: "text",
-					value: String(field.value),
+					list: presets.length > 0 ? `ims-size-options-${entry.key}` : void 0,
+					value: text,
 					disabled: !field.enabled,
+					"aria-invalid": hint !== null,
 					onChange: (event) => patch({ value: event.target.value })
 				});
 			})();
@@ -2109,18 +2275,45 @@ ${extra}
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "ims-paramText",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "ims-paramKey",
-							children: [entry.key, entry.generation !== "current" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "ims-paramGen",
-								children: entry.generation
-							}) : null]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "ims-paramDesc",
-							children: entry.description
-						})]
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "ims-paramKey",
+								children: [entry.key, entry.generation !== "current" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "ims-paramGen",
+									children: entry.generation
+								}) : null]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ims-paramDesc",
+								children: entry.description
+							}),
+							hint !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ims-paramWarn",
+								role: "alert",
+								children: hint
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ims-paramValue",
+						children: [control, presets.length > 0 && field.enabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ims-paramPresets",
+							children: presets.map((preset) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								title: preset.label,
+								className: `ims-chip${preset.value === text ? " ims-chipOn" : ""}`,
+								onClick: () => patch({ value: preset.value }),
+								children: preset.value
+							}, preset.value))
+						}) : null]
 					}),
-					control
+					presets.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("datalist", {
+						id: `ims-size-options-${entry.key}`,
+						children: presets.map((preset) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: preset.value,
+							label: preset.label
+						}, preset.value))
+					}) : null
 				]
 			});
 		}
@@ -2161,10 +2354,84 @@ ${extra}
 			});
 		}
 		//#endregion
+		//#region src/client/panel/uploads.tsx
+		/**
+		* 本地文件上传的浏览器半：列表/上传/错误态封装为 hook，控件供生图表单与
+		* 图片选择器复用。上传为串行（逐个文件），首个失败即中断并展示原因；
+		* 成功后条目即时并入本地列表（选择器无需刷新即可见）。
+		* @module image-studio/client/panel/uploads
+		*/
+		/** 可接受的上传类型（宿主端另有魔数嗅探兜底）。 */
+		const ACCEPT = "image/png,image/jpeg,image/webp,image/gif";
+		/** 上传暂存区读写 hook（每个消费组件一份，互不共享状态）。 */
+		function useUploads() {
+			const [items, setItems] = (0, react.useState)([]);
+			const [busy, setBusy] = (0, react.useState)(false);
+			const [error, setError] = (0, react.useState)(null);
+			const reload = (0, react.useCallback)(() => {
+				setBusy(true);
+				fetchUploads().then((res) => setItems(res.items)).catch(() => setItems([])).finally(() => setBusy(false));
+			}, []);
+			return {
+				items,
+				busy,
+				error,
+				add: (0, react.useCallback)(async (files) => {
+					const list = Array.from(files);
+					if (list.length === 0) return [];
+					setBusy(true);
+					setError(null);
+					const saved = [];
+					try {
+						for (const file of list) {
+							const entry = await uploadImage(file);
+							saved.push(entry);
+						}
+						setItems((current) => [...current, ...saved]);
+						return saved;
+					} catch (err) {
+						setError(err instanceof Error ? err.message : String(err));
+						return saved;
+					} finally {
+						setBusy(false);
+					}
+				}, []),
+				reload
+			};
+		}
+		/** 隐藏 file input + 触发按钮（移动端显式 accept 图像类型，避免退化为相册单选）。 */
+		function UploadButton(props) {
+			const { t, uploads, onUploaded, multiple, disabled, className, children } = props;
+			const inputRef = (0, react.useRef)(null);
+			const onChange = (event) => {
+				const files = event.target.files;
+				if (files !== null && files.length > 0) uploads.add(files).then((entries) => {
+					if (entries.length > 0) onUploaded(entries);
+				});
+				event.target.value = "";
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: className ?? "ims-btn ims-btnGhost",
+				disabled: disabled === true || uploads.busy,
+				onClick: () => inputRef.current?.click(),
+				children
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: inputRef,
+				type: "file",
+				hidden: true,
+				multiple,
+				accept: props.accept ?? ACCEPT,
+				"aria-label": t("upload.pick"),
+				onChange
+			})] });
+		}
+		//#endregion
 		//#region src/client/panel/picker.tsx
 		/**
-		* 画廊图片选择器（模态）：源图多选（≤16）与遮罩单选共用。
-		* 扁平化全部画廊条目的图片，倒序排列；底部确认条显示已选数量。
+		* 源图选择器（模态）：源图多选（≤MAX_SOURCE_IMAGES）与遮罩单选共用。
+		* 两个来源分区——画廊（已生成图片）与本地上传（暂存区），可混合选择；
+		* 选中态以 SourceRef 记录（kind 区分 id 空间），底部确认条显示已选数量。
 		* @module image-studio/client/panel/picker
 		*/
 		function flattenImages(items) {
@@ -2176,17 +2443,66 @@ ${extra}
 			});
 			return out;
 		}
+		/** 引用键（选中判定与去重；两个 id 空间不重叠但不互相假设）。 */
+		function refKey(ref) {
+			return `${ref.kind}:${ref.id}`;
+		}
+		/** 缩略图地址（画廊 / 上传两套端点）。 */
+		function refUrl(ref) {
+			return ref.kind === "gallery" ? imageUrl(ref.id) : uploadImageUrl(ref.id);
+		}
 		function ImagePicker(props) {
-			const { t, title, items, multiple, initial, onConfirm, onClose } = props;
+			const { t, title, items, uploads, multiple, initial, onConfirm, onClose } = props;
 			const [selected, setSelected] = (0, react.useState)(initial);
+			const [section, setSection] = (0, react.useState)(uploads.items.length > 0 && items.length === 0 ? "uploads" : "gallery");
 			const images = flattenImages(items);
-			const toggle = (imageId) => {
+			const uploadItems = [...uploads.items].reverse();
+			const selectedKeys = selected.map(refKey);
+			const toggle = (ref) => {
+				const key = refKey(ref);
 				if (multiple) {
-					setSelected((current) => current.includes(imageId) ? current.filter((id) => id !== imageId) : current.length >= 16 ? current : [...current, imageId]);
+					setSelected((current) => current.some((item) => refKey(item) === key) ? current.filter((item) => refKey(item) !== key) : current.length >= 16 ? current : [...current, ref]);
 					return;
 				}
-				setSelected((current) => current.includes(imageId) ? [] : [imageId]);
+				setSelected((current) => current.some((item) => refKey(item) === key) ? [] : [ref]);
 			};
+			/** 新上传条目直接选中（少一次点击；超限按剩余额度截断）。 */
+			const selectUploaded = (entries) => {
+				const refs = entries.map((entry) => ({
+					kind: "upload",
+					id: entry.id
+				}));
+				setSelected((current) => multiple ? [...current, ...refs].slice(0, 16) : refs);
+				setSection("uploads");
+			};
+			const grid = (cells, empty) => cells.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "ims-empty",
+				children: empty
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "ims-pickerGrid",
+				role: "listbox",
+				"aria-multiselectable": multiple,
+				children: cells.map((cell) => {
+					const index = selectedKeys.indexOf(refKey(cell.ref));
+					const on = index >= 0;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						role: "option",
+						"aria-selected": on,
+						className: `ims-pickerCell${on ? " ims-pickerCellOn" : ""}`,
+						title: cell.title,
+						onClick: () => toggle(cell.ref),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+							src: refUrl(cell.ref),
+							alt: cell.title,
+							loading: "lazy"
+						}), on ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ims-pickerMark",
+							children: index + 1
+						}) : null]
+					}, refKey(cell.ref));
+				})
+			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
 				open: true,
 				onClose,
@@ -2198,43 +2514,69 @@ ${extra}
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "ims-subHead",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-								className: "ims-subTitle",
-								children: title
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+									className: "ims-subTitle",
+									children: title
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(UploadButton, {
+									t,
+									uploads,
+									multiple,
+									accept: multiple ? void 0 : "image/png",
+									onUploaded: selectUploaded,
+									className: "ims-btn ims-btnPrimary ims-btnSmall",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconPlusOutline16, { size: 14 }),
+										" ",
+										t("upload.pick")
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "ims-btn ims-btnGhost",
+									onClick: onClose,
+									children: t("common.close")
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "ims-seg",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: `ims-segItem${section === "gallery" ? " ims-segItemOn" : ""}`,
+								"aria-pressed": section === "gallery",
+								onClick: () => setSection("gallery"),
+								children: t("picker.section.gallery")
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
-								className: "ims-btn ims-btnGhost",
-								onClick: onClose,
-								children: t("common.close")
+								className: `ims-segItem${section === "uploads" ? " ims-segItemOn" : ""}`,
+								"aria-pressed": section === "uploads",
+								onClick: () => {
+									uploads.reload();
+									setSection("uploads");
+								},
+								children: t("picker.section.uploads")
 							})]
 						}),
-						images.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "ims-empty",
-							children: t("picker.empty")
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "ims-pickerGrid",
-							role: "listbox",
-							"aria-multiselectable": multiple,
-							children: images.map((image) => {
-								const on = selected.includes(image.imageId);
-								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-									type: "button",
-									role: "option",
-									"aria-selected": on,
-									className: `ims-pickerCell${on ? " ims-pickerCellOn" : ""}`,
-									title: image.prompt,
-									onClick: () => toggle(image.imageId),
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-										src: imageUrl(image.imageId),
-										alt: image.prompt,
-										loading: "lazy"
-									}), on ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "ims-pickerMark",
-										children: selected.indexOf(image.imageId) + 1
-									}) : null]
-								}, image.imageId);
-							})
-						}),
+						section === "gallery" ? grid(images.map((image) => ({
+							ref: {
+								kind: "gallery",
+								id: image.imageId
+							},
+							title: image.prompt
+						})), t("picker.empty")) : grid(uploadItems.map((entry) => ({
+							ref: {
+								kind: "upload",
+								id: entry.id
+							},
+							title: entry.name
+						})), t("upload.empty")),
+						uploads.error !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							className: "ims-status ims-statusError",
+							role: "alert",
+							children: [t("upload.failed"), uploads.error]
+						}) : null,
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "ims-subFoot",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -2261,7 +2603,7 @@ ${extra}
 		* - 提供商预设选择 + 凭据状态徽标 + inline 覆盖（凭据沿用预设）；
 		* - 提示词编辑 + 预设插入/另存；
 		* - 目录驱动的参数表单 + 参数预设应用/另存；
-		* - 图生图追加源图（≤16）与可选遮罩选择（画廊取图）；
+		* - 图生图追加源图（≤16，画廊选择与本地文件上传混用）与可选遮罩；
 		* - 提交 generate → 202 taskId 交由面板任务条轮询。
 		* 预设另存走 settings RPC（scope/api 注入），成功后经 onPresetSaved 刷新快照。
 		* @module image-studio/client/panel/generator
@@ -2274,6 +2616,14 @@ ${extra}
 		function presetId(prefix) {
 			return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`;
 		}
+		/** 单选上传结果 → 遮罩引用（无成功条目时保持原值）。 */
+		function uploadRef(entries) {
+			const first = entries[0];
+			return first === void 0 ? null : {
+				kind: "upload",
+				id: first.id
+			};
+		}
 		function GeneratorForm(props) {
 			const { t, endpoint, catalog, protocols, presets, gallery, scope, api } = props;
 			const [providerId, setProviderId] = (0, react.useState)("");
@@ -2286,8 +2636,8 @@ ${extra}
 			const [credentialOk, setCredentialOk] = (0, react.useState)(null);
 			const [prompt, setPrompt] = (0, react.useState)("");
 			const [form, setForm] = (0, react.useState)({});
-			const [sourceIds, setSourceIds] = (0, react.useState)([]);
-			const [maskId, setMaskId] = (0, react.useState)(null);
+			const [sources, setSources] = (0, react.useState)([]);
+			const [mask, setMask] = (0, react.useState)(null);
 			const [picker, setPicker] = (0, react.useState)(null);
 			const [naming, setNaming] = (0, react.useState)(null);
 			const [status, setStatus] = (0, react.useState)(IDLE);
@@ -2296,6 +2646,7 @@ ${extra}
 			const formReadyRef = (0, react.useRef)(false);
 			/** 已消费的种子 nonce（防重复回填）。 */
 			const seedRef = (0, react.useRef)(0);
+			const uploads = useUploads();
 			(0, react.useEffect)(() => {
 				if (formReadyRef.current || catalog.length === 0) return;
 				formReadyRef.current = true;
@@ -2306,7 +2657,7 @@ ${extra}
 				if (seed === null || seed.nonce === seedRef.current || !formReadyRef.current) return;
 				seedRef.current = seed.nonce;
 				setPrompt(seed.prompt);
-				setSourceIds(seed.sourceIds);
+				setSources(seed.sources);
 				setForm(applyParams(catalog, endpoint, seed.params));
 				if (seed.providerPresetId !== null) setProviderId(seed.providerPresetId);
 				setStatus(IDLE);
@@ -2400,7 +2751,7 @@ ${extra}
 					});
 					return;
 				}
-				if (endpoint === "edit" && sourceIds.length === 0) {
+				if (endpoint === "edit" && sources.length === 0) {
 					setStatus({
 						kind: "error",
 						text: t("generate.needSources")
@@ -2429,8 +2780,8 @@ ${extra}
 					model: inline.model.trim()
 				};
 				if (endpoint === "edit") {
-					request.sourceIds = sourceIds;
-					if (maskId !== null) request.maskId = maskId;
+					request.sources = sources;
+					if (mask !== null) request.mask = mask;
 				}
 				setSubmitting(true);
 				setStatus(IDLE);
@@ -2598,28 +2949,44 @@ ${extra}
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: "ims-sources",
-										children: [sourceIds.map((imageId) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-											className: "ims-thumb",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-												src: imageUrl(imageId),
-												alt: ""
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										children: [
+											sources.map((ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+												className: "ims-thumb",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+													src: refUrl(ref),
+													alt: ""
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: "ims-thumbRemove",
+													"aria-label": t("common.delete"),
+													onClick: () => setSources((current) => current.filter((item) => !(item.kind === ref.kind && item.id === ref.id))),
+													children: "×"
+												})]
+											}, `${ref.kind}:${ref.id}`)),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 												type: "button",
-												className: "ims-thumbRemove",
-												"aria-label": t("common.delete"),
-												onClick: () => setSourceIds((current) => current.filter((id) => id !== imageId)),
-												children: "×"
-											})]
-										}, imageId)), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-											type: "button",
-											className: "ims-thumbAdd",
-											onClick: () => setPicker("sources"),
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconLayers, { size: 18 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sources.pick") })]
-										})]
+												className: "ims-thumbAdd",
+												disabled: sources.length >= 16,
+												onClick: () => setPicker("sources"),
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconLayers, { size: 18 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sources.pick") })]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(UploadButton, {
+												t,
+												uploads,
+												multiple: true,
+												disabled: sources.length >= 16,
+												className: "ims-thumbAdd",
+												onUploaded: (entries) => setSources((current) => [...current, ...entries.map((entry) => ({
+													kind: "upload",
+													id: entry.id
+												}))].slice(0, 16)),
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconPlusOutline16, { size: 18 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("upload.pick") })]
+											})
+										]
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 										className: "ims-hint",
-										children: t("sources.count").replace("{n}", String(sourceIds.length))
+										children: t("sources.count").replace("{n}", String(sources.length))
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 										className: "ims-blockTitle",
@@ -2627,25 +2994,46 @@ ${extra}
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: "ims-sources",
-										children: [maskId !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-											className: "ims-thumb",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-												src: imageUrl(maskId),
-												alt: ""
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										children: [
+											mask !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+												className: "ims-thumb",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+													src: refUrl(mask),
+													alt: ""
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: "ims-thumbRemove",
+													"aria-label": t("sources.maskClear"),
+													onClick: () => setMask(null),
+													children: "×"
+												})]
+											}) : null,
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 												type: "button",
-												className: "ims-thumbRemove",
-												"aria-label": t("sources.maskClear"),
-												onClick: () => setMaskId(null),
-												children: "×"
-											})]
-										}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-											type: "button",
-											className: "ims-thumbAdd",
-											onClick: () => setPicker("mask"),
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconLayers, { size: 18 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sources.maskPick") })]
-										})]
-									})
+												className: "ims-thumbAdd",
+												onClick: () => setPicker("mask"),
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconLayers, { size: 18 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sources.maskPick") })]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(UploadButton, {
+												t,
+												uploads,
+												multiple: false,
+												accept: "image/png",
+												className: "ims-thumbAdd",
+												onUploaded: (entries) => setMask(uploadRef(entries)),
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconPlusOutline16, { size: 18 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("upload.pick") })]
+											})
+										]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "ims-hint",
+										children: t("sources.maskHint")
+									}),
+									uploads.error !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+										className: "ims-status ims-statusError",
+										role: "alert",
+										children: [t("upload.failed"), uploads.error]
+									}) : null
 								]
 							}) : null
 						]
@@ -2746,11 +3134,12 @@ ${extra}
 						t,
 						title: t(picker === "sources" ? "sources.label" : "sources.mask"),
 						items: gallery,
+						uploads,
 						multiple: picker === "sources",
-						initial: picker === "sources" ? sourceIds : [],
-						onConfirm: (ids) => {
-							if (picker === "sources") setSourceIds(ids);
-							else setMaskId(ids[0] ?? null);
+						initial: picker === "sources" ? sources : mask === null ? [] : [mask],
+						onConfirm: (refs) => {
+							if (picker === "sources") setSources(refs);
+							else setMask(refs[0] ?? null);
 							setPicker(null);
 						},
 						onClose: () => setPicker(null)
@@ -2980,7 +3369,13 @@ ${extra}
 									failed: galleryFailed,
 									onRefresh: reloadGallery,
 									onEdit: (item) => studio.seedEdit({
-										sourceIds: [...item.imageIds],
+										sources: [...item.imageIds.map((id) => ({
+											kind: "gallery",
+											id
+										})), ...item.sourceUploads.map((id) => ({
+											kind: "upload",
+											id
+										}))],
 										prompt: item.prompt,
 										params: item.params,
 										providerPresetId: item.providerPresetId
@@ -3243,6 +3638,32 @@ ${extra}
   white-space: nowrap;
 }
 .ims-paramControl { width: 132px; flex: none; min-height: 30px; padding: 4px 8px; }
+.ims-inputInvalid {
+  border-color: var(--dsw-alias-state-error-primary);
+}
+.ims-paramValue { display: grid; gap: 4px; justify-items: end; }
+.ims-paramPresets { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
+.ims-chip {
+  padding: 1px 6px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font-family: var(--ds-font-family-code);
+  font-size: 10px;
+  line-height: 16px;
+  cursor: pointer;
+}
+.ims-chip:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.ims-chipOn {
+  border-color: var(--dsw-alias-brand-primary);
+  color: var(--dsw-alias-brand-primary);
+}
+.ims-paramWarn {
+  margin-top: 2px;
+  color: var(--dsw-alias-state-error-primary);
+  font-size: 11px;
+}
 .ims-adv { margin-top: 8px; }
 .ims-advSummary {
   cursor: pointer;
@@ -3369,6 +3790,30 @@ ${extra}
 }
 .ims-subFoot .ims-status { margin: 0 auto 0 0; }
 
+/* 选择器来源切换（画廊 / 本地上传） */
+.ims-seg {
+  display: flex;
+  flex: none;
+  gap: 4px;
+  padding: 8px 14px 0;
+}
+.ims-segItem {
+  padding: 4px 10px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+  cursor: pointer;
+}
+.ims-segItem:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.ims-segItemOn {
+  border-color: var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-primary);
+  font-weight: 600;
+}
+
 /* 选择器网格 */
 .ims-pickerGrid {
   flex: 1;