dsh-agnes-create 0.3.0 → 0.4.1

package/README.md

@@ -66,9 +66,31 @@ Key 从 [Agnes AI 平台](https://platform.agnes-ai.com) 获取。端点默认
 
 | 类型 | 尺寸 | 宽高比 | 其它 |
 | --- | --- | --- | --- |
-| 图片 | `1K` `2K` `3K` `4K` | `1:1` `3:4` `4:3` `16:9` `9:16` `2:3` `3:2` `21:9` | — |
+| 图片 | `1K` `2K` `3K` `4K` | `1:1` `3:4` `4:3` `16:9` `9:16` `2:3` `3:2` `21:9` | 可选 1–8 张参考图（图生图 / 多图合成） |
 | 视频 | 固定 `720P` | `21:9` `16:9` `4:3` `1:1` `3:4` `9:16` | 时长 4–12 秒 |
 
+### 图生图 / 多图合成
+
+「参考图」区有两种来源，可以混着加，最多 8 张：
+
+- **＋ 本地图片** —— 从磁盘选一个或多个文件（PNG / JPEG / WebP / GIF）
+- **＋ 生成结果** —— 从下方「最近生成」里挑一张（视频不能当参考图）
+
+加好之后提示词写「想怎么改」，按钮会变成 **图生图**：
+
+| 参考图数量 | 实际行为 |
+| --- | --- |
+| 0 张 | 纯文生图 |
+| 1 张 | 图生图（按参考图重绘 / 改风格 / 换背景） |
+| 2–8 张 | 多图合成（把多张图的元素 / 配色融合） |
+
+实现细节：
+
+- 图片在**浏览器侧先下采样到长边 1280** 再编码成 data URI（PNG 优先保留透明通道，超过 800 KB 自动转 JPEG），所以一张 4K 原图发出的请求也只有几百 KB
+- 参考图走接口的 `extra_body.image`；多图就是往这个数组里放多条
+- 校验在前端和内核各做一次：只接受 `http(s)` 或 `data:image/…;base64`，超过 8 张、空串、非图片类型都会直接报错，不会把脏数据发给上游
+- 本地文件路径**不会**被读取或上传到别处：文件内容只在内存里转成 base64 随请求发给 Agnes
+
 ## 关于费用
 
 插件的费用由 Agnes AI 账号结算，本插件不涉及任何计费。
@@ -82,7 +104,8 @@ Key 从 [Agnes AI 平台](https://platform.agnes-ai.com) 获取。端点默认
 
 - 视频为**异步任务**：提交后轮询，通常需要 1–4 分钟；队列繁忙时提交会返回 `503`，插件会自动重试
 - 查询接口有频率限制，触发 `429` 时面板会显示「限流重试中…」并退避，任务不会因此失败
-- 只支持文生图 / 文生视频，暂未接图生图、首尾帧与参考音频
+- 视频只支持**文生视频**：暂无首尾帧、参考音频与视频输入（Flash 版接口本身不支持这些）
+- 参考图最多 8 张；单张在浏览器侧压到长边 1280，细节极多的小字参考图重绘后可能看不清
 - 生成结果只保留最近 8 条（本次会话内），刷新页面后历史清空；文件本身在输出目录里不会丢
 
 ## 开发

package/lib/agnes.js

@@ -40,6 +40,35 @@ export const TIMEOUT_MS = 300_000; // 文档建议 60s–360s
 export const SIZES = ['1K', '2K', '3K', '4K'];
 export const RATIOS = ['1:1', '3:4', '4:3', '16:9', '9:16', '2:3', '3:2', '21:9'];
 
+/** 图生图 / 多图合成：一次最多几张参考图。文档没写上限，8 张是面板与请求体的安全值。 */
+export const MAX_REF_IMAGES = 8;
+
+/** data URI 只接受图片 MIME，其余一律拒绝（防止把任意 base64 塞进上游请求）。 */
+const DATA_URI_RE = /^data:image\/(png|jpe?g|webp|gif);base64,[A-Za-z0-9+/=]+$/i;
+
+/**
+ * 校验并规整参考图数组。
+ * 文档要求 extra_body.image 里是「公共图像 URL 或 Data URI Base64」，
+ * 所以这里只放行 http(s) 与 data:image 两种，别的直接报错而不是透传给上游。
+ */
+export function normalizeRefs(images) {
+  if (images === undefined || images === null) return [];
+  if (!Array.isArray(images)) throw new Error('参考图必须是数组');
+  if (images.length > MAX_REF_IMAGES) {
+    throw new Error(`参考图最多 ${MAX_REF_IMAGES} 张，收到 ${images.length} 张`);
+  }
+  return images.map((value, i) => {
+    if (typeof value !== 'string' || value.trim() === '') {
+      throw new Error(`第 ${i + 1} 张参考图不是有效字符串`);
+    }
+    const s = value.trim();
+    if (/^https?:\/\//i.test(s)) return s;
+    if (DATA_URI_RE.test(s)) return s;
+    const kind = s.slice(0, 30).replace(/\s+/g, ' ');
+    throw new Error(`第 ${i + 1} 张参考图只接受 http(s) 链接或 data:image/…;base64，收到：${kind}`);
+  });
+}
+
 /** 把开头的 ~ 展开成家目录；其余原样返回。 */
 export function expandHome(p) {
   const s = String(p ?? '').trim();
@@ -210,10 +239,13 @@ export async function generate({
   if (!SIZES.includes(size)) throw new Error(`size 必须是 ${SIZES.join(' / ')}`);
   if (!RATIOS.includes(ratio)) throw new Error(`ratio 必须是 ${RATIOS.join(' / ')}`);
 
+  // 有参考图 → 图生图 / 多图合成；没有 → 纯文生图。校验在发请求之前做完。
+  const refs = normalizeRefs(images);
+
   const key = await readKey();
   const started = Date.now();
 
-  let { payload, item } = await post({ baseUrl, key, body: buildBody({ prompt, size, ratio, model, fmt, images }) });
+  let { payload, item } = await post({ baseUrl, key, body: buildBody({ prompt, size, ratio, model, fmt, images: refs }) });
 
   const dir = outDir ?? (await resolvePaths()).outDir;
   const name = filename || `agnes-${stamp()}.png`;
@@ -266,6 +298,9 @@ export async function generate({
     size,
     ratio,
     model,
+    // 有参考图 = 图生图 / 多图合成；没有 = 文生图。面板据此显示模式。
+    mode: refs.length > 0 ? 'img2img' : 'text2img',
+    refCount: refs.length,
     revisedPrompt: item.revised_prompt ?? null,
     remoteUrl,
   };

package/lib/client.js

@@ -16,6 +16,12 @@ window.__ModuleLoader__.load({
     const HISTORY_MAX = 8;
     const POLL_MS = 6000;
     const VIDEO_DEADLINE_MS = 15 * 60 * 1000;
+    // 图生图：一次最多 8 张参考图（与宿主 MAX_REF_IMAGES 保持一致）
+    const MAX_REFS = 8;
+    // 发给上游前先下采样：长边 1280 足够模型识别，base64 也压得住
+    const REF_MAX_EDGE = 1280;
+    const REF_QUALITY = 0.88;
+    const REF_PNG_KEEP_BYTES = 800 * 1024;
 
     const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 
@@ -109,6 +115,35 @@ window.__ModuleLoader__.load({
       .agn-hint { font-size: 12px; color: var(--dsw-alias-label-secondary, #888); line-height: 1.6; }
       .agn-code { font-family: var(--ds-font-family-code, ui-monospace, monospace); font-size: 11px;
                   word-break: break-all; }
+
+      /* 参考图（图生图 / 多图合成） */
+      .agn-refs { display: flex; flex-direction: column; gap: 8px; }
+      .agn-ref-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+      .agn-ref-strip { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+      .agn-ref { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden;
+                 flex: none; border: 1px solid var(--dsw-alias-border-l2, #e3e3e3);
+                 background: var(--dsw-alias-bg-layer-2, #fafafa); }
+      .agn-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
+      .agn-ref-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
+                     border: none; border-radius: 50%; cursor: pointer; padding: 0;
+                     font-size: 11px; line-height: 18px; text-align: center;
+                     color: #fff; background: rgba(0, 0, 0, .6); }
+      .agn-ref-del:hover { background: rgba(0, 0, 0, .8); }
+      .agn-ref-add { width: 72px; height: 72px; border-radius: 8px; cursor: pointer; flex: none;
+                     font: inherit; font-size: 11px; line-height: 1.35; padding: 4px;
+                     color: var(--dsw-alias-label-secondary, #666); background: transparent;
+                     border: 1px dashed var(--dsw-alias-border-l2, #ccc); }
+      .agn-ref-add:disabled { opacity: .45; cursor: not-allowed; }
+      .agn-ref-pick { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px; border-radius: 8px;
+                      border: 1px solid var(--dsw-alias-border-l2, #e3e3e3);
+                      background: var(--dsw-alias-bg-layer-2, #fafafa); }
+      .agn-ref-pick button { width: 56px; height: 56px; padding: 0; border-radius: 6px;
+                             overflow: hidden; cursor: pointer; flex: none;
+                             border: 1px solid var(--dsw-alias-border-l2, #ddd); background: transparent; }
+      .agn-ref-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
+      .agn-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px;
+                 background: var(--dsw-alias-bg-layer-2, #f1f1f1);
+                 color: var(--dsw-alias-label-secondary, #555); }
     `;
 
     function ensureCss() {
@@ -125,6 +160,84 @@ window.__ModuleLoader__.load({
       return "/agnes/media?name=" + encodeURIComponent(name);
     }
 
+    /* ==========================================================================
+       参考图预处理（图生图）
+       --------------------------------------------------------------------------
+       两个来源最终都归一成 data URI：
+         · 本地文件  —— <input type="file"> 给的 File
+         · 生成结果  —— /agnes/media 取回 Blob
+       先按长边 1280 下采样再编码，否则一张 4K PNG 的 base64 就有十几 MB，
+       宿主请求体和上游都要跟着炸。
+       ========================================================================== */
+
+    let refSeq = 0;
+    const nextRefId = () => "ref-" + (refSeq += 1) + "-" + Date.now();
+
+    function blobToDataUrl(blob) {
+      return new Promise((resolve, reject) => {
+        const fr = new FileReader();
+        fr.onload = () => resolve(String(fr.result));
+        fr.onerror = () => reject(new Error("读取图片失败"));
+        fr.readAsDataURL(blob);
+      });
+    }
+
+    /** 编码一次 canvas；toBlob 回调可能是 null（极端尺寸/内存不足） */
+    function canvasToBlob(canvas, type, quality) {
+      return new Promise((resolve) => {
+        try {
+          canvas.toBlob((b) => resolve(b), type, quality);
+        } catch {
+          resolve(null);
+        }
+      });
+    }
+
+    /**
+     * 把任意图片 Blob 压成适合上传的 data URI。
+     * PNG 优先保留（多图合成常带透明通道），但超过阈值就退回 JPEG。
+     */
+    async function shrinkImage(blob) {
+      if (!(blob instanceof Blob) || blob.size === 0) throw new Error("图片是空的");
+
+      let bitmap;
+      try {
+        bitmap = await createImageBitmap(blob);
+      } catch {
+        // 极少数格式解码不了：小图原样上传，大图明确报错而不是偷偷传十几 MB
+        if (blob.size <= REF_PNG_KEEP_BYTES) {
+          return { src: await blobToDataUrl(blob), bytes: blob.size, shrunk: false };
+        }
+        throw new Error("无法解码这张图片（试试 PNG/JPEG/WebP）");
+      }
+
+      const longest = Math.max(bitmap.width, bitmap.height) || 1;
+      const scale = Math.min(1, REF_MAX_EDGE / longest);
+      const w = Math.max(1, Math.round(bitmap.width * scale));
+      const h = Math.max(1, Math.round(bitmap.height * scale));
+
+      const canvas = document.createElement("canvas");
+      canvas.width = w;
+      canvas.height = h;
+      const ctx = canvas.getContext("2d");
+      if (ctx === null) {
+        if (typeof bitmap.close === "function") bitmap.close();
+        return { src: await blobToDataUrl(blob), bytes: blob.size, shrunk: false };
+      }
+      ctx.drawImage(bitmap, 0, 0, w, h);
+      if (typeof bitmap.close === "function") bitmap.close();
+
+      const wantPng = blob.type === "image/png";
+      let out = await canvasToBlob(canvas, wantPng ? "image/png" : "image/jpeg", REF_QUALITY);
+      if (out === null) throw new Error("图片编码失败");
+      if (wantPng && out.size > REF_PNG_KEEP_BYTES) {
+        const jpeg = await canvasToBlob(canvas, "image/jpeg", REF_QUALITY);
+        if (jpeg !== null && jpeg.size < out.size) out = jpeg;
+      }
+
+      return { src: await blobToDataUrl(out), bytes: out.size, shrunk: scale < 1 };
+    }
+
     /* ==========================================================================
        状态仓库（放组件外面：main slot 切换会卸载组件，状态必须独立存活）
        ========================================================================== */
@@ -160,6 +273,12 @@ window.__ModuleLoader__.load({
         cfgSaving: false,
         cfgError: "",
         cfgNotice: "",
+
+        /* ---- 图生图参考图 ---- */
+        refs: [],               // { id, name, src(dataURI), bytes, from: 'local' | 'result' }
+        refsBusy: false,
+        refsError: "",
+        refPickOpen: false,
       };
 
       const snapshot = () => ({ ...state, history: state.history.slice() });
@@ -172,6 +291,12 @@ window.__ModuleLoader__.load({
         Object.assign(state, patch);
         notify();
       };
+      /** 基于当前状态计算补丁：避免「读旧值再写回」导致的覆盖。 */
+      const update = (fn) => {
+        const patch = fn(state);
+        if (patch !== null && patch !== undefined) Object.assign(state, patch);
+        notify();
+      };
 
       let timer = null;
       let runToken = 0;
@@ -259,10 +384,18 @@ window.__ModuleLoader__.load({
 
       /* ---------- 图片：一次请求就出结果 ---------- */
       async function runImage(token, prompt) {
+        const refs = state.refs;
+        const payload = {
+          prompt,
+          size: state.size,
+          ratio: state.ratio,
+          // 有参考图就是图生图 / 多图合成；宿主原样透传给上游的 extra_body.image
+          ...(refs.length > 0 ? { images: refs.map((r) => r.src) } : {}),
+        };
         const res = await fetch("/agnes/generate", {
           method: "POST",
           headers: { "content-type": "application/json" },
-          body: JSON.stringify({ prompt, size: state.size, ratio: state.ratio }),
+          body: JSON.stringify(payload),
         });
         const data = await res.json();
         if (!data.ok) throw new Error(data.error || "生成失败");
@@ -270,6 +403,122 @@ window.__ModuleLoader__.load({
         pushResult({ ...data, kind: "image", wallSec: ((Date.now() - state.startedAt) / 1000).toFixed(1) });
       }
 
+      /* ---------- 参考图（图生图） ---------- */
+
+      const refsFull = () => state.refs.length >= MAX_REFS;
+
+      /**
+       * 参考图操作串行化。
+       *
+       * 之前用 `if (state.refsBusy) return` 做互斥：一旦某个操作正在跑
+       * （读生成结果要 fetch + 解码，可能几百毫秒），这期间用户的另一次添加
+       * 会被**静默丢弃**——点了没反应，看起来就像"刚加的图不见了"。
+       * 现在改成排队执行：不丢单，也不会出现两个操作互相覆盖 refs。
+       */
+      let refQueue = Promise.resolve();
+      function queueRefOp(task) {
+        const run = refQueue.then(task, task);
+        // 单个操作失败不能卡死后面的队列
+        refQueue = run.catch(() => {});
+        return run;
+      }
+
+      /** 来源一：本地磁盘文件（可多选）。返回 Promise，调用方可等它读完再清空 input。 */
+      function addRefsFromFiles(files) {
+        const list = Array.from(files || []).filter(
+          (f) => f && String(f.type || "").startsWith("image/")
+        );
+        if (list.length === 0) {
+          set({ refsError: "没有可用的图片文件（需要 PNG / JPEG / WebP / GIF）" });
+          return Promise.resolve();
+        }
+
+        return queueRefOp(async () => {
+          set({ refsBusy: true, refsError: "" });
+          const added = [];
+          const failed = [];
+          try {
+            for (const file of list) {
+              if (state.refs.length + added.length >= MAX_REFS) {
+                failed.push("超出 " + MAX_REFS + " 张上限");
+                break;
+              }
+              try {
+                // 先把文件读进内存再继续：即使 input.value 被清空，读也不会断
+                const r = await shrinkImage(file);
+                added.push({
+                  id: nextRefId(),
+                  name: file.name || "本地图片",
+                  src: r.src,
+                  bytes: r.bytes,
+                  from: "local",
+                });
+              } catch (e) {
+                failed.push((file.name || "图片") + "：" + (e && e.message ? e.message : String(e)));
+              }
+            }
+            if (added.length > 0) {
+              // 用 update 基于最新状态追加，杜绝覆盖别的来源刚加进来的图
+              update((prev) => ({ refs: prev.refs.concat(added) }));
+            }
+            set({
+              refsError: failed.length > 0 ? failed.join("；") : "",
+              refPickOpen: false,
+            });
+          } finally {
+            set({ refsBusy: false });
+          }
+        });
+      }
+
+      /** 来源二：生成结果里的图片（通过 /agnes/media 取回再下采样） */
+      function addRefFromResult(entry) {
+        if (!entry || entry.kind !== "image" || !entry.filename) return Promise.resolve();
+        if (refsFull()) {
+          set({ refsError: "参考图最多 " + MAX_REFS + " 张" });
+          return Promise.resolve();
+        }
+
+        return queueRefOp(async () => {
+          set({ refsBusy: true, refsError: "" });
+          try {
+            const res = await fetch(srcOf(entry.filename));
+            if (!res.ok) throw new Error("读取生成结果失败：HTTP " + res.status);
+            const blob = await res.blob();
+            const r = await shrinkImage(blob);
+            update((prev) => ({
+              refs: prev.refs.concat([{
+                id: nextRefId(),
+                name: entry.filename,
+                src: r.src,
+                bytes: r.bytes,
+                from: "result",
+              }]),
+              refPickOpen: false,
+            }));
+          } catch (e) {
+            set({ refsError: e && e.message ? e.message : String(e) });
+          } finally {
+            set({ refsBusy: false });
+          }
+        });
+      }
+
+      function removeRef(id) {
+        if (state.busy) return;
+        update((prev) => ({ refs: prev.refs.filter((r) => r.id !== id), refsError: "" }));
+      }
+
+      function clearRefs() {
+        if (state.busy) return;
+        set({ refs: [], refsError: "", refPickOpen: false });
+      }
+
+      function toggleRefPick() {
+        if (state.busy) return;
+        set({ refPickOpen: !state.refPickOpen, refsError: "" });
+      }
+
       /* ---------- 视频：提交 → 轮询 → 下载完成 ---------- */
       async function runVideo(token, prompt) {
         set({ vStatus: "提交中…", vProgress: 0, videoId: null });
@@ -344,7 +593,7 @@ window.__ModuleLoader__.load({
       }
 
       async function run() {
-        if (state.busy) return;
+        if (state.busy || state.refsBusy) return;
         const prompt = state.prompt.trim();
         if (prompt === "") return;
 
@@ -385,6 +634,13 @@ window.__ModuleLoader__.load({
         },
         toggleCfg() { set({ cfgOpen: !state.cfgOpen }); },
         run,
+        /* ---- 参考图动作 ---- */
+        addRefsFromFiles,
+        addRefFromResult,
+        removeRef,
+        clearRefs,
+        toggleRefPick,
+        maxRefs: MAX_REFS,
         /** 切换主预览到历史里的某一张 */
         show(entry) { set({ result: entry }); },
         /**
@@ -506,14 +762,18 @@ window.__ModuleLoader__.load({
       const key = s.health && s.health.key ? s.health.key : null;
       const keyBad = key !== null && key.present !== true;
       const shown = s.result;
+      const hasRefs = s.refs.length > 0;
+      const refsFull = s.refs.length >= MAX_REFS;
+      const imageHistory = s.history.filter((h) => h.kind === "image");
+      const fileInput = React.useRef(null);
 
       const onKeyDown = (e) => {
         if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { e.preventDefault(); store.run(); }
       };
 
       const buttonLabel = busy
-        ? (isVideo ? "生成视频… " : "生成中… ") + (s.elapsed > 0 ? s.elapsed.toFixed(0) + "s" : "")
-        : (isVideo ? "生成视频" : "生成");
+        ? (isVideo ? "生成视频… " : (hasRefs ? "图生图中… " : "生成中… ")) + (s.elapsed > 0 ? s.elapsed.toFixed(0) + "s" : "")
+        : (isVideo ? "生成视频" : (hasRefs ? "图生图" : "生成"));
 
       const modeBtn = (mode, text) => React.createElement("button", {
         key: mode,
@@ -556,6 +816,25 @@ window.__ModuleLoader__.load({
         : (shown.kind === "video" ? "生成结果 · 视频" : "生成结果 · 图片");
 
       return React.createElement("div", { className: "agn-root" },
+        /* 隐藏的文件选择器：由「＋ 本地图片」按钮触发，支持多选 */
+        React.createElement("input", {
+          ref: fileInput,
+          type: "file",
+          accept: "image/png,image/jpeg,image/webp,image/gif",
+          multiple: true,
+          style: { display: "none" },
+          onChange: (e) => {
+            const el = e.target;
+            const files = el.files;
+            // 关键：等文件真正读完再清空 input。
+            // 之前是「发起读取后立刻 el.value = ''」，Chromium 下会把刚选的文件
+            // 的底层数据一起释放，读取中途失败 → 这一次添加被整单丢掉。
+            Promise.resolve(store.addRefsFromFiles(files))
+              .catch(() => {})
+              .finally(() => { try { el.value = ""; } catch { /* input 可能已卸载 */ } });
+          },
+        }),
+
         React.createElement("div", { className: "agn-head" },
           React.createElement("span", { className: "agn-title" }, "Agnes 创作"),
           React.createElement("span", { className: "agn-meta" },
@@ -569,6 +848,79 @@ window.__ModuleLoader__.load({
             modeBtn("image", "图片"),
             modeBtn("video", "视频")
           ),
+
+          /* ---- 参考图（图生图 / 多图合成）：本地文件 + 生成结果两种来源 ---- */
+          !isVideo
+            ? React.createElement("div", { className: "agn-refs" },
+                React.createElement("div", { className: "agn-ref-head" },
+                  React.createElement("span", { className: "agn-label" }, "参考图"),
+                  React.createElement("span", { className: "agn-tag" },
+                    s.refs.length + " / " + MAX_REFS),
+                  s.refsBusy ? React.createElement("span", { className: "agn-hint" }, "处理中…") : null,
+                  s.refs.length > 0
+                    ? React.createElement("button", {
+                        type: "button", className: "agn-btn-ghost", disabled: busy,
+                        onClick: () => store.clearRefs(),
+                      }, "清空参考图")
+                    : null
+                ),
+                React.createElement("div", { className: "agn-ref-strip" },
+                  s.refs.map((r) => React.createElement("div", {
+                    key: r.id,
+                    className: "agn-ref",
+                    title: r.name + "  ·  " + (r.bytes / 1024).toFixed(0) + " KB  ·  " +
+                      (r.from === "result" ? "来自生成结果" : "来自本地"),
+                  },
+                    React.createElement("img", { src: r.src, alt: r.name }),
+                    React.createElement("button", {
+                      type: "button", className: "agn-ref-del",
+                      title: "移除这张参考图",
+                      disabled: busy,
+                      onClick: () => store.removeRef(r.id),
+                    }, "×")
+                  )),
+                  React.createElement("button", {
+                    type: "button", className: "agn-ref-add",
+                    disabled: busy || refsFull,
+                    title: "从本地磁盘选择一个或多个图片（PNG / JPEG / WebP / GIF）",
+                    onClick: () => {
+                      const el = fileInput.current;
+                      if (el !== null) el.click();
+                    },
+                  }, "＋ 本地图片"),
+                  React.createElement("button", {
+                    type: "button", className: "agn-ref-add",
+                    disabled: busy || refsFull || imageHistory.length === 0,
+                    title: imageHistory.length === 0 ? "还没有生成过图片" : "从「生成结果」里挑一张",
+                    onClick: () => store.toggleRefPick(),
+                  }, "＋ 生成结果")
+                ),
+
+                /* 从生成结果挑图：只列图片（视频不能当参考图） */
+                s.refPickOpen
+                  ? React.createElement("div", { className: "agn-ref-pick" },
+                      imageHistory.length === 0
+                        ? React.createElement("span", { className: "agn-hint" }, "还没有生成过图片")
+                        : imageHistory.map((h) => React.createElement("button", {
+                            key: "pick-" + h.filename,
+                            type: "button",
+                            title: h.filename,
+                            onClick: () => store.addRefFromResult(h),
+                          }, React.createElement("img", {
+                            src: srcOf(h.filename), alt: h.filename, loading: "lazy",
+                          })))
+                    )
+                  : null,
+
+                React.createElement("div", { className: "agn-note" },
+                  hasRefs
+                    ? "将按参考图重绘（" + s.refs.length + " 张" +
+                      (s.refs.length > 1 ? "，多图合成" : "") + "）——提示词写「想怎么改」"
+                    : "不加参考图 = 纯文生图；加 1 张 = 图生图；加多张 = 多图合成"),
+                s.refsError !== "" ? React.createElement("div", { className: "agn-err" }, s.refsError) : null
+              )
+            : null,
+
           React.createElement("div", { className: "agn-label" }, "提示词"),
           React.createElement("textarea", {
             className: "agn-textarea",
@@ -584,7 +936,7 @@ window.__ModuleLoader__.load({
             params,
             React.createElement("button", {
               className: "agn-btn", type: "button",
-              disabled: busy || s.prompt.trim() === "" || keyBad,
+              disabled: busy || s.refsBusy || s.prompt.trim() === "" || keyBad,
               onClick: () => store.run(),
             }, buttonLabel)
           ),
@@ -642,6 +994,7 @@ window.__ModuleLoader__.load({
                     : (shown.bytes / 1024).toFixed(0) + " KB")
                   + "  ·  " + shown.size + "/" + shown.ratio
                   + (shown.seconds ? "  ·  " + shown.seconds + " 秒" : "")
+                  + (shown.mode === "img2img" ? "  ·  图生图 " + (shown.refCount || 0) + " 张参考" : "")
                   + "  ·  用时 " + shown.elapsedSec + "s"),
                 React.createElement("br"),
                 React.createElement("span", null, "已保存到 "),
@@ -777,7 +1130,7 @@ window.__ModuleLoader__.load({
 
     exports.apply = apply;
     exports.inject = ["slots"];
-    exports.__internals = { getStore, createStore, srcOf };
+    exports.__internals = { getStore, createStore, srcOf, shrinkImage, MAX_REFS };
     return module.exports;
   },
 });

package/lib/index.js

@@ -20,13 +20,20 @@
 
 import {
   MODEL, VIDEO_MODEL, VIDEO_SECONDS, VIDEO_RATIOS, VIDEO_SIZE,
-  DEFAULT_BASE, SIZES, RATIOS,
+  DEFAULT_BASE, SIZES, RATIOS, MAX_REF_IMAGES,
   generate, keyStatus, readMedia, resolvePaths, saveConfig,
   submitVideo, queryVideo, saveVideo,
 } from './agnes.js';
 
 export const name = 'dsh-agnes-create';
 
+/** 普通 JSON 请求（配置、视频）1 MB 够用。 */
+const BODY_LIMIT = 1_000_000;
+
+/** 图生图的参考图走 base64 data URI，必须单独放宽到 32 MB：
+ *  8 张 × 前端下采样后的约 300–600 KB，base64 膨胀 4/3，再留足余量。 */
+const REF_BODY_LIMIT = 32 * 1024 * 1024;
+
 function sendJson(res, data, status = 200) {
   res.writeHead(status, {
     'content-type': 'application/json; charset=utf-8',
@@ -35,20 +42,24 @@ function sendJson(res, data, status = 200) {
   res.end(JSON.stringify(data));
 }
 
-function readJson(req) {
+function readJson(req, limit = BODY_LIMIT) {
   return new Promise((resolve, reject) => {
     const chunks = [];
     let size = 0;
+    let aborted = false;
     req.on('data', (c) => {
+      if (aborted) return;
       size += c.length;
-      if (size > 1_000_000) {
-        reject(new Error('请求体过大'));
+      if (size > limit) {
+        aborted = true;
+        reject(new Error(`请求体过大（上限 ${(limit / 1024 / 1024).toFixed(0)} MB）`));
         req.destroy();
         return;
       }
       chunks.push(c);
     });
     req.on('end', () => {
+      if (aborted) return;
       const text = Buffer.concat(chunks).toString('utf8');
       if (text.trim() === '') return resolve({});
       try {
@@ -148,6 +159,7 @@ export function apply(ctx) {
             defaults: cfg.defaults,
             sizes: SIZES,
             ratios: RATIOS,
+            maxRefImages: MAX_REF_IMAGES,   // 图生图 / 多图合成的参考图上限
             videoSizes: [VIDEO_SIZE],
             videoSeconds: VIDEO_SECONDS,
             videoRatios: VIDEO_RATIOS,
@@ -210,7 +222,7 @@ export function apply(ctx) {
       handler: async (req, res) => {
         if (req.method !== 'POST') return sendJson(res, { ok: false, error: '需要 POST' }, 405);
         try {
-          const body = await readJson(req);
+          const body = await readJson(req, REF_BODY_LIMIT);
           if (typeof body.prompt !== 'string' || body.prompt.trim() === '') {
             return sendJson(res, { ok: false, error: '提示词不能为空' }, 400);
           }
@@ -219,10 +231,16 @@ export function apply(ctx) {
             size: body.size,
             ratio: body.ratio,
             model: body.model,
+            // 图生图 / 多图合成：参考图数组（data URI 或 http(s) 链接）。
+            // 校验在内核 normalizeRefs 里做，这里只负责透传。
+            images: body.images,
           });
           sendJson(res, { ...result, kind: 'image' });
         } catch (e) {
-          sendJson(res, { ok: false, error: errMessage(e) }, 500);
+          // 参考图参数不合法属于用户输入问题，用 400 区分于上游 500
+          const msg = errMessage(e);
+          const status = /参考图|images|prompt|size 必须|ratio 必须/.test(msg) ? 400 : 500;
+          sendJson(res, { ok: false, error: msg }, status);
         }
       },
     });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-agnes-create",
-  "version": "0.3.0",
-  "description": "Agnes 创作：在 DeepSeek Harness 里用 agnes-image-2.5-flash 出图、agnes-video-2.5-flash 出视频。侧边栏面板 + 提示词输入框，Key 与输出目录可在界面里配置。",
+  "version": "0.4.1",
+  "description": "Agnes 创作：在 DeepSeek Harness 里用 agnes-image-2.5-flash 出图（含图生图 / 多图合成）、agnes-video-2.5-flash 出视频。侧边栏面板 + 提示词 + 参考图，结果内联展示，Key 与输出目录可在面板配置。",
   "type": "module",
   "main": "lib/index.js",
   "exports": {
@@ -31,7 +31,10 @@
     "deepseek-harness",
     "agnes",
     "image-generation",
-    "video-generation"
+    "video-generation",
+    "image-to-image",
+    "img2img",
+    "multi-image"
   ],
   "engines": {
     "dsh": ">=0.2.2-rc.1"