dsh-agnes-create 0.7.0 → 0.10.3

package/lib/client.js

@@ -13,11 +13,16 @@ window.__ModuleLoader__.load({
     // 视频：Flash 固定 720P，seconds 是字符串 "4"–"12"
     const VIDEO_SECONDS = ["4", "5", "6", "7", "8", "9", "10", "11", "12"];
     const VIDEO_RATIOS = ["21:9", "16:9", "4:3", "1:1", "3:4", "9:16"];
-    const HISTORY_MAX = 8;
+    /* 与宿主 agnes.js 的 HISTORY_MAX 保持一致：首屏先按 24 条渲染，
+       loadHistory() 回来后以宿主返回的 max 为准 */
+    const HISTORY_MAX = 24;
     const POLL_MS = 6000;
     const VIDEO_DEADLINE_MS = 15 * 60 * 1000;
     // 图生图：一次最多 8 张参考图（与宿主 MAX_REF_IMAGES 保持一致）
     const MAX_REFS = 8;
+
+    /** 视频 reference 模式的参考图上限（上游：images 最多 5 张） */
+    const MAX_VREFS = 5;
     // 发给上游前先下采样：长边 1280 足够模型识别，base64 也压得住
     const REF_MAX_EDGE = 1280;
     const REF_QUALITY = 0.88;
@@ -45,6 +50,13 @@ window.__ModuleLoader__.load({
       .agn-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
       .agn-title { font-size: 16px; font-weight: 600; color: var(--dsw-alias-label-primary, inherit); }
       .agn-meta { font-size: 12px; color: var(--dsw-alias-label-secondary, #888); }
+      /* 标题栏里的模型下拉：长得像一行说明文字，但可以点开换模型 */
+      .agn-model { font: inherit; font-size: 12px; line-height: 1.4; padding: 1px 4px;
+                   max-width: 220px; cursor: pointer; border-radius: 6px;
+                   color: var(--dsw-alias-label-secondary, #888); background: transparent;
+                   border: 1px solid transparent; }
+      .agn-model:hover:not(:disabled) { border-color: var(--dsw-alias-border-l2, #ddd); }
+      .agn-model:disabled { opacity: .6; cursor: not-allowed; }
       .agn-card { border: 1px solid var(--dsw-alias-border-l2, #e3e3e3); border-radius: 10px;
                   padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
       .agn-label { font-size: 12px; font-weight: 600; color: var(--dsw-alias-label-secondary, #666); }
@@ -243,6 +255,8 @@ window.__ModuleLoader__.load({
                        color: var(--dsw-alias-state-business-primary, #4b7bec); }
       .agn-act-on { border-color: var(--dsw-alias-state-business-primary, #4b7bec);
                     color: var(--dsw-alias-state-business-primary, #4b7bec); }
+      /* 「测试连接」的结果行：和按钮之间留一点距离 */
+      .agn-check { margin-top: 6px; }
       .agn-notice { font-size: 12px; color: var(--dsw-alias-state-success-primary, #2a2);
                     line-height: 1.6; }
     `;
@@ -261,6 +275,25 @@ window.__ModuleLoader__.load({
       return "/agnes/media?name=" + encodeURIComponent(name);
     }
 
+    /* 「＋ 结果」的候选：最近生成的图片 + 当前结果区那张（按文件名去重）。
+       从「输出目录」点出来的图只进了结果区、没进历史，只翻历史会漏掉它，
+       于是刚在眼前看到的那张图反而选不进参考图 / 关键帧。 */
+    function pickableImagesOf(state) {
+      const history = (Array.isArray(state.history) ? state.history : []).filter((h) => h.kind === "image");
+      const cur = state.result;
+      if (cur === null || cur === undefined || cur.kind !== "image") return history;
+      if (typeof cur.filename !== "string" || cur.filename === "") return history;
+      if (history.some((h) => h.filename === cur.filename)) return history;
+      return [cur].concat(history);
+    }
+
+    /* 视频生成方式：宿主回来的 mode 只可能是这三种之一，其余一律当纯文本 */
+    function modeOf(mode) {
+      if (mode === "keyframe") return "keyframe";
+      if (mode === "reference") return "reference";
+      return "text";
+    }
+
     /* ==========================================================================
        参考图预处理（图生图）
        --------------------------------------------------------------------------
@@ -362,6 +395,7 @@ window.__ModuleLoader__.load({
         vProgress: 0,
         vStatus: "",
         videoId: null,
+        vTaskId: null,
         health: null,
         healthRequested: false,
 
@@ -369,17 +403,25 @@ window.__ModuleLoader__.load({
         cfg: null,              // 生效配置 { keyFile, outDir }
         cfgDefaults: null,
         cfgStored: null,
-        cfgDraft: { keyFile: "", outDir: "" },
+        cfgDraft: { keyFile: "", outDir: "", imageModel: "", videoModel: "" },
         cfgOpen: false,
         cfgSaving: false,
         cfgError: "",
         cfgNotice: "",
+        checking: false,        // 正在测连通性
+        checkResult: null,      // { ok, text, detail }
+        upModels: null,         // 连接测试拿到的上游真实模型清单 { image: [], video: [] }
 
         /* ---- 图生图参考图 ---- */
         refs: [],               // { id, name, src(dataURI), bytes, from: 'local' | 'result' }
         refsBusy: false,
         refsError: "",
         refPickOpen: false,
+        /* ---- 视频参考图（reference 模式，最多 5 张） ---- */
+        vRefs: [],
+        vRefsBusy: false,
+        vRefsError: "",
+        vRefPickOpen: false,
 
         /* ---- 视频关键帧（可选）：本地图直接当首帧 / 尾帧 ---- */
         vFirst: null,           // { src(dataURI), name, bytes }
@@ -437,6 +479,8 @@ window.__ModuleLoader__.load({
         set({ result: entry, history: [entry, ...state.history].slice(0, state.historyMax) });
         // 顺手落盘：/agnes/history 是唯一真相，写失败也不影响本次展示
         void appendHistory(entry);
+        // 新文件已经写进输出目录了，目录清单开着的话跟着变（没加载过就不去打扰）
+        void refreshLibrary();
       };
 
       /* ---------- 历史（宿主持久化） ---------- */
@@ -512,7 +556,12 @@ window.__ModuleLoader__.load({
             cfg: data.config,
             cfgDefaults: data.defaults,
             cfgStored: data.stored,
-            cfgDraft: { keyFile: data.config.keyFile, outDir: data.config.outDir },
+            cfgDraft: {
+              keyFile: data.config.keyFile,
+              outDir: data.config.outDir,
+              imageModel: data.config.imageModel || "",
+              videoModel: data.config.videoModel || "",
+            },
             cfgError: "",
           });
         } catch (e) {
@@ -530,6 +579,9 @@ window.__ModuleLoader__.load({
             body: JSON.stringify({
               keyFile: state.cfgDraft.keyFile,
               outDir: state.cfgDraft.outDir,
+              // 空串 = 回退到内置默认模型
+              imageModel: state.cfgDraft.imageModel,
+              videoModel: state.cfgDraft.videoModel,
             }),
           });
           if (res.status === 404) throw new Error("配置接口尚未就绪：需要完全重启应用（只重载窗口不够）");
@@ -539,7 +591,12 @@ window.__ModuleLoader__.load({
             cfg: data.config,
             cfgDefaults: data.defaults,
             cfgStored: data.stored,
-            cfgDraft: { keyFile: data.config.keyFile, outDir: data.config.outDir },
+            cfgDraft: {
+              keyFile: data.config.keyFile,
+              outDir: data.config.outDir,
+              imageModel: data.config.imageModel || "",
+              videoModel: data.config.videoModel || "",
+            },
             cfgNotice: "已保存",
           });
           // 路径变了，key 是否存在/目录是否可写都要重新算
@@ -553,6 +610,43 @@ window.__ModuleLoader__.load({
         }
       }
 
+      /** 测一下 Key 能不能连上游：顺便把上游真实的模型名单拉回来 */
+      async function checkKey() {
+        if (state.checking) return;
+        set({ checking: true, checkResult: null, cfgError: "" });
+        try {
+          const res = await fetch("/agnes/models");
+          const data = await res.json().catch(() => ({}));
+          if (res.status === 404) {
+            throw new Error("模型探测接口尚未就绪：需要完全重启应用（只重载窗口不够）");
+          }
+          if (!res.ok || !data || data.ok !== true) {
+            throw new Error((data && data.error) || ("探测失败：HTTP " + res.status));
+          }
+          const up = data.upstream || {};
+          const imgs = Array.isArray(up.image) ? up.image.length : 0;
+          const vids = Array.isArray(up.video) ? up.video.length : 0;
+          set({
+            checking: false,
+            // 把上游真实清单留下：顶部的模型下拉优先用它，比内置清单更可信
+            upModels: {
+              image: Array.isArray(up.image) ? up.image : [],
+              video: Array.isArray(up.video) ? up.video : [],
+            },
+            checkResult: {
+              ok: true,
+              text: "连接正常：上游可用 " + imgs + " 个图片模型、" + vids + " 个视频模型",
+              detail: ""
+            },
+          });
+        } catch (e) {
+          set({
+            checking: false,
+            checkResult: { ok: false, text: e && e.message ? e.message : String(e), detail: "" },
+          });
+        }
+      }
+
       /* ---------- 图片：一次请求就出结果 ---------- */
       async function runImage(token, prompt) {
         const refs = state.refs;
@@ -690,6 +784,101 @@ window.__ModuleLoader__.load({
         set({ refPickOpen: !state.refPickOpen, refsError: "" });
       }
 
+      /* ---------- 视频参考图（reference 模式，≤5 张） ---------- */
+      const vRefsFull = () => state.vRefs.length >= MAX_VREFS;
+
+      function addVRefsFromFiles(files) {
+        const list = Array.from(files || []).filter(
+          (f) => f && String(f.type || "").startsWith("image/")
+        );
+        if (list.length === 0) {
+          set({ vRefsError: "没有可用的图片文件（需要 PNG / JPEG / WebP / GIF）" });
+          return Promise.resolve();
+        }
+
+        return queueRefOp(async () => {
+          set({ vRefsBusy: true, vRefsError: "" });
+          const added = [];
+          const failed = [];
+          try {
+            for (const file of list) {
+              if (state.vRefs.length + added.length >= MAX_VREFS) {
+                failed.push("超出 " + MAX_VREFS + " 张上限");
+                break;
+              }
+              try {
+                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((prev) => ({ vRefs: prev.vRefs.concat(added) }));
+            }
+            set({
+              vRefsError: failed.length > 0 ? failed.join("；") : "",
+              vRefPickOpen: false,
+            });
+          } finally {
+            set({ vRefsBusy: false });
+          }
+        });
+      }
+
+      function addVRefFromResult(entry) {
+        if (!entry || entry.kind !== "image" || !entry.filename) return Promise.resolve();
+        if (vRefsFull()) {
+          set({ vRefsError: "参考图最多 " + MAX_VREFS + " 张" });
+          return Promise.resolve();
+        }
+
+        return queueRefOp(async () => {
+          set({ vRefsBusy: true, vRefsError: "" });
+          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) => ({
+              vRefs: prev.vRefs.concat([{
+                id: nextRefId(),
+                name: entry.filename,
+                src: r.src,
+                bytes: r.bytes,
+                from: "result",
+              }]),
+              vRefPickOpen: false,
+            }));
+          } catch (e) {
+            set({ vRefsError: e && e.message ? e.message : String(e) });
+          } finally {
+            set({ vRefsBusy: false });
+          }
+        });
+      }
+
+      function removeVRef(id) {
+        if (state.busy) return;
+        update((prev) => ({ vRefs: prev.vRefs.filter((r) => r.id !== id), vRefsError: "" }));
+      }
+
+      function clearVRefs() {
+        if (state.busy) return;
+        set({ vRefs: [], vRefsError: "", vRefPickOpen: false });
+      }
+
+      function toggleVRefPick() {
+        if (state.busy) return;
+        set({ vRefPickOpen: !state.vRefPickOpen, vRefsError: "" });
+      }
+
       /* ---------- 视频关键帧（首帧 / 尾帧，本地图直接当帧） ---------- */
       const frameField = (which) => (which === "last" ? "vLast" : "vFirst");
 
@@ -797,14 +986,17 @@ window.__ModuleLoader__.load({
         set({ notice: "已开始下载" });
       }
 
-      /** 停掉等待：让在途的轮询/请求结果失效（服务端任务本身无法撤回） */
+      /** 停掉等待：让在途的轮询/请求结果失效（宿主的任务照常跑，文件会正常落盘） */
       function cancel() {
         if (!state.busy) return;
+        const hadTask = state.vTaskId !== null;
         runToken += 1;
         stopTimer();
         set({
           busy: false, vStatus: "", vProgress: 0,
-          notice: "已停止等待；服务端任务可能仍在跑",
+          notice: hadTask
+            ? "已停止跟踪；宿主会继续推进，刷新面板还能接回进度，文件也会照常落盘"
+            : "已停止等待；服务端任务可能仍在跑",
         });
       }
 
@@ -850,6 +1042,23 @@ window.__ModuleLoader__.load({
         }
       }
 
+      /**
+       * 静默刷新输出目录清单：生成完成后新文件已经落盘，列表要跟着更新。
+       * 只在清单已经加载过时才拉（没展开过就别偷偷把面板撑开），失败保留旧清单。
+       */
+      async function refreshLibrary() {
+        if (state.library === null || state.libraryBusy) return;
+        try {
+          const res = await fetch("/agnes/library");
+          const data = await res.json().catch(() => ({}));
+          if (!res.ok || !data || data.ok !== true) return;
+          if (!Array.isArray(data.files)) return;
+          update(() => ({ library: data.files, libraryError: "" }));
+        } catch {
+          // 刷新失败保留旧清单，不打扰用户
+        }
+      }
+
       function toggleLibrary() {
         if (state.libraryOpen) {
           set({ libraryOpen: false });
@@ -882,59 +1091,32 @@ window.__ModuleLoader__.load({
         });
       }
 
-      /* ---------- 视频：提交 → 轮询 → 下载完成 ---------- */
-      async function runVideo(token, prompt) {
-        set({ vStatus: "提交中…", vProgress: 0, videoId: null });
-
-        const seedText = String(state.vSeed).trim();
-        const seedValue = seedText === "" ? null : Number(seedText);
-        if (seedValue !== null && !(Number.isInteger(seedValue) && seedValue >= 0)) {
-          throw new Error("seed 需要非负整数（也可以留空）");
-        }
-
-        // 关键帧直接发 data URI：上游已实测接受 base64，本地图片不用先传图床
-        const subRes = await fetch("/agnes/video", {
-          method: "POST",
-          headers: { "content-type": "application/json" },
-          body: JSON.stringify({
-            prompt,
-            seconds: state.vSeconds,
-            ratio: state.vRatio,
-            seed: seedValue,
-            firstFrame: state.vFirst !== null ? state.vFirst.src : null,
-            lastFrame: state.vLast !== null ? state.vLast.src : null,
-          }),
-        });
-        const sub = await subRes.json();
-        if (!sub.ok) throw new Error(sub.error || "提交失败");
-        if (token !== runToken) return;
-
-        const usedMode = sub.mode === "keyframe" ? "keyframe" : "text";
-        set({ videoId: sub.videoId, vStatus: "排队中…" });
+      /* ---------- 视频：交给宿主任务队列，面板只负责看进度 ---------- */
+      // 提交后 video_id 由宿主保管：关面板、刷新页面、重启应用都不影响任务继续推进。
+      async function watchTask(token, taskId, fallback) {
         const deadline = Date.now() + VIDEO_DEADLINE_MS;
-
         let transientFails = 0;
+
         for (;;) {
           await sleep(POLL_MS);
           if (token !== runToken) return;
 
           let st;
           try {
-            const r = await fetch("/agnes/video?id=" + encodeURIComponent(sub.videoId));
-            st = await r.json();
+            const r = await fetch("/agnes/task?id=" + encodeURIComponent(taskId));
+            st = r.ok ? await r.json() : { ok: false, error: "查询任务失败：HTTP " + r.status };
           } catch (e) {
             st = { ok: false, error: "网络错误：" + (e && e.message ? e.message : String(e)) };
           }
 
           if (!st.ok) {
             const msg = String(st.error || "查询任务失败");
-            // 429/503 只是限流，任务还在服务端跑：退避后继续，别把整个任务判死。
-            // 实测提交后立刻查询就会 429，这条路径是必需的。
+            // 宿主自己会重试上游；这里只在本地接口抖动时容忍几次
             if (/\b429\b|\b503\b|频繁|队列已满|网络错误|timeout/i.test(msg)) {
               transientFails += 1;
               if (transientFails > 8) throw new Error(msg);
-              set({ vStatus: "限流重试中…" });
-              await sleep(Math.min(30000, 6000 * transientFails));
+              set({ vStatus: "重试中…" });
+              await sleep(Math.min(30000, 3000 * transientFails));
               continue;
             }
             throw new Error(msg);
@@ -943,33 +1125,126 @@ window.__ModuleLoader__.load({
           transientFails = 0;
           if (token !== runToken) return;
 
+          const task = st.task || {};
           set({
-            vStatus: st.status,
-            vProgress: typeof st.progress === "number" ? st.progress : 0,
+            vStatus: task.status ? String(task.status) : "",
+            vProgress: typeof task.progress === "number" ? task.progress : 0,
+            videoId: task.videoId || fallback.videoId || null,
           });
 
-          if (st.status === "completed") {
+          if (task.status === "completed") {
             pushResult({
               kind: "video",
-              filename: st.filename,
-              path: st.path,
-              bytes: st.bytes,
+              filename: task.filename,
+              path: task.path,
+              bytes: task.bytes,
               size: "720P",
-              ratio: state.vRatio,
-              seconds: st.seconds || state.vSeconds,
-              transport: "异步任务",
-              mode: usedMode,
-              seed: seedValue === null ? undefined : seedValue,
-              prompt,
+              ratio: task.ratio || fallback.ratio,
+              seconds: task.seconds || fallback.seconds,
+              transport: "宿主任务",
+              mode: modeOf(task.mode || fallback.mode),
+              seed: task.seed === null || task.seed === undefined ? undefined : task.seed,
+              prompt: task.prompt || fallback.prompt,
               wallSec: ((Date.now() - state.startedAt) / 1000).toFixed(1),
             });
             return;
           }
-          if (st.status === "failed") {
-            const err = st.error;
-            throw new Error(typeof err === "string" ? err : (err && err.message) || "视频生成失败");
+          if (task.status === "failed") throw new Error(task.error || "视频生成失败");
+          if (task.status === "cancelled") throw new Error("任务已取消");
+          if (Date.now() > deadline) {
+            throw new Error("等待超时（15 分钟）；宿主仍在推进，稍后刷新还能看到结果");
           }
-          if (Date.now() > deadline) throw new Error("等待超时（15 分钟）");
+        }
+      }
+
+      async function runVideo(token, prompt) {
+        set({ vStatus: "提交中…", vProgress: 0, videoId: null, vTaskId: null });
+
+        const seedText = String(state.vSeed).trim();
+        const seedValue = seedText === "" ? null : Number(seedText);
+        if (seedValue !== null && !(Number.isInteger(seedValue) && seedValue >= 0)) {
+          throw new Error("seed 需要非负整数（也可以留空）");
+        }
+
+        // 关键帧直接发 data URI：上游已实测接受 base64，本地图片不用先传图床
+        const subRes = await fetch("/agnes/tasks", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({
+            prompt,
+            seconds: state.vSeconds,
+            ratio: state.vRatio,
+            seed: seedValue,
+            firstFrame: state.vFirst !== null ? state.vFirst.src : null,
+            lastFrame: state.vLast !== null ? state.vLast.src : null,
+            // 参考图（reference 模式）：有首/尾帧时上游会用 keyframe，参考图自动让位
+            referenceImages: state.vRefs.map((r) => r.src),
+          }),
+        });
+        const sub = await subRes.json();
+        if (!sub.ok) throw new Error(sub.error || "提交失败");
+        if (token !== runToken) return;
+
+        const task = sub.task || {};
+        if (!task.id) throw new Error("宿主没有返回任务号");
+        set({ videoId: task.videoId || null, vTaskId: task.id, vStatus: "排队中…" });
+
+        await watchTask(token, task.id, {
+          prompt,
+          ratio: state.vRatio,
+          seconds: state.vSeconds,
+          mode: task.mode,
+          videoId: task.videoId,
+        });
+      }
+
+      /* 面板重新挂载时把宿主上还在跑的任务接回来：刷新页面不会让进度消失 */
+      async function resumeTasks() {
+        if (state.busy) return;
+        try {
+          const r = await fetch("/agnes/tasks");
+          if (!r.ok) return;
+          const data = await r.json();
+          if (!data || data.ok !== true || !Array.isArray(data.tasks)) return;
+          const active = data.tasks.find((t) => t.status === "queued" || t.status === "running");
+          if (!active || state.busy) return;
+
+          const token = ++runToken;
+          const created = Date.parse(active.createdAt);
+          set({
+            mode: "video",
+            busy: true,
+            error: "",
+            notice: "",
+            startedAt: Number.isFinite(created) ? created : Date.now(),
+            elapsed: 0,
+            vFirst: null,
+            vLast: null,
+            videoId: active.videoId || null,
+            vTaskId: active.id,
+            vStatus: active.status,
+            vProgress: typeof active.progress === "number" ? active.progress : 0,
+            prompt: state.prompt.trim() === "" ? String(active.prompt || "") : state.prompt,
+          });
+          startTimer();
+          try {
+            await watchTask(token, active.id, {
+              prompt: active.prompt,
+              ratio: active.ratio || state.vRatio,
+              seconds: active.seconds || state.vSeconds,
+              mode: active.mode,
+              videoId: active.videoId,
+            });
+          } catch (e) {
+            if (token === runToken) set({ error: e && e.message ? e.message : String(e) });
+          } finally {
+            if (token === runToken) {
+              stopTimer();
+              set({ busy: false, elapsed: (Date.now() - state.startedAt) / 1000 });
+            }
+          }
+        } catch {
+          // 旧宿主没有 /agnes/tasks：静默跳过，不打扰用户
         }
       }
 
@@ -1014,7 +1289,19 @@ window.__ModuleLoader__.load({
         setCfgDraft(field, value) {
           set({ cfgDraft: { ...state.cfgDraft, [field]: value }, cfgNotice: "" });
         },
+
+        /* 顶部标题栏直接换模型：先写进草稿，再立刻落盘（不然刷新就回退了） */
+        async setModel(kind, value) {
+          if (state.busy || state.cfgSaving) return;
+          const field = kind === "video" ? "videoModel" : "imageModel";
+          set({ cfgDraft: { ...state.cfgDraft, [field]: value }, cfgNotice: "", cfgError: "" });
+          await saveConfig();
+          if (state.cfgError === "") {
+            set({ notice: "已切换模型：" + (value === "" ? "内置默认" : value) });
+          }
+        },
         toggleCfg() { set({ cfgOpen: !state.cfgOpen }); },
+        checkKey,
         run,
         /* ---- 参考图动作 ---- */
         addRefsFromFiles,
@@ -1022,6 +1309,12 @@ window.__ModuleLoader__.load({
         removeRef,
         clearRefs,
         toggleRefPick,
+        /* ---- 视频参考图（reference 模式，≤5 张） ---- */
+        addVRefsFromFiles,
+        addVRefFromResult,
+        removeVRef,
+        clearVRefs,
+        toggleVRefPick,
         /* ---- 视频关键帧 ---- */
         pickFrame,
         setFrameFromFile,
@@ -1029,6 +1322,8 @@ window.__ModuleLoader__.load({
         toggleFramePick,
         setFrameFromResult,
         useResultAsFrame,
+        /* ---- 视频任务（宿主侧推进，刷新可接回） ---- */
+        resumeTasks,
         /* ---- 结果收尾 ---- */
         copyPath,
         reveal,
@@ -1041,6 +1336,7 @@ window.__ModuleLoader__.load({
         setLibraryTab,
         showLibraryFile,
         maxRefs: MAX_REFS,
+        maxVRefs: MAX_VREFS,
         /** 切换主预览到历史里的某一张 */
         show(entry) { set({ result: entry }); },
         /**
@@ -1172,7 +1468,13 @@ window.__ModuleLoader__.load({
         return () => { off(); };
       }, []);
 
-      React.useEffect(() => { store.loadHealth(); store.loadConfig(); store.loadHistory(); }, []);
+      React.useEffect(() => {
+        store.loadHealth();
+        store.loadConfig();
+        store.loadHistory();
+        // 上次没跑完的视频任务：宿主还在推进，接回进度
+        store.resumeTasks();
+      }, []);
 
       const busy = s.busy;
       const isVideo = s.mode === "video";
@@ -1181,13 +1483,16 @@ window.__ModuleLoader__.load({
       const shown = s.result;
       const hasRefs = s.refs.length > 0;
       const refsFull = s.refs.length >= MAX_REFS;
+      const vRefsFull = s.vRefs.length >= MAX_VREFS;
       const imageHistory = s.history.filter((h) => h.kind === "image");
+      const pickableImages = pickableImagesOf(s);
       const libraryAll = s.library || [];
       const libraryImages = libraryAll.filter((f) => f.kind !== "video");
       const libraryVideos = libraryAll.filter((f) => f.kind === "video");
       const libraryShown = s.libraryTab === "video" ? libraryVideos : libraryImages;
       const fileInput = React.useRef(null);
       const frameInput = React.useRef(null);
+      const vRefInput = React.useRef(null);
 
       const onKeyDown = (e) => {
         if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { e.preventDefault(); store.run(); }
@@ -1279,15 +1584,15 @@ window.__ModuleLoader__.load({
             }, "＋ 本地"),
         React.createElement("button", {
           type: "button", className: "agn-frame-from",
-          disabled: busy || s.frameBusy || imageHistory.length === 0,
-          title: imageHistory.length === 0
+          disabled: busy || s.frameBusy || pickableImages.length === 0,
+          title: pickableImages.length === 0
             ? "还没有生成过图片，先出一张图再来选"
             : "从生成结果里挑一张当" + label,
           onClick: () => store.toggleFramePick(which),
         }, s.framePickFrom === which ? "收起" : "＋ 结果"),
         s.framePickFrom === which
           ? React.createElement("div", { className: "agn-ref-pick agn-frame-pick" },
-              imageHistory.map((h) => React.createElement("button", {
+              pickableImages.map((h) => React.createElement("button", {
                 key: h.filename, type: "button", title: h.filename,
                 disabled: busy || s.frameBusy,
                 onClick: () => store.setFrameFromResult(which, h),
@@ -1331,12 +1636,49 @@ window.__ModuleLoader__.load({
           },
         }),
 
+        /* 隐藏的视频参考图选择器（reference 模式，最多 5 张） */
+        React.createElement("input", {
+          ref: vRefInput,
+          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;
+            Promise.resolve(store.addVRefsFromFiles(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" },
-            isVideo
-              ? (s.health && s.health.videoModel ? s.health.videoModel : "agnes-video-2.5-flash")
-              : (s.health && s.health.model ? s.health.model : "agnes-image-2.5-flash"))
+          (() => {
+            const kind = isVideo ? "video" : "image";
+            const cur = isVideo
+              ? (s.cfgDraft.videoModel || (s.health && s.health.videoModel) || "agnes-video-2.5-flash")
+              : (s.cfgDraft.imageModel || (s.health && s.health.model) || "agnes-image-2.5-flash");
+            /* 选项优先用连接测试拿到的上游真实清单，没有就退回内置清单 */
+            const fromUp = s.upModels && Array.isArray(s.upModels[kind]) ? s.upModels[kind] : null;
+            const fromHealth = s.health && s.health.models && Array.isArray(s.health.models[kind])
+              ? s.health.models[kind]
+              : [];
+            let list = fromUp !== null && fromUp.length > 0 ? fromUp : fromHealth;
+            if (list.length < 2) {
+              /* 只有一个模型时给下拉没有意义，直接显示名字 */
+              return React.createElement("span", { className: "agn-meta" }, cur);
+            }
+            list = list.slice();
+            if (list.indexOf(cur) === -1) list.unshift(cur);
+            return React.createElement("select", {
+              className: "agn-model",
+              value: cur,
+              disabled: busy || s.cfgSaving,
+              title: "切换" + (isVideo ? "视频" : "图片") + "模型（立刻保存到配置）",
+              onChange: (e) => store.setModel(kind, e.target.value),
+            }, list.map((m) => React.createElement("option", { key: m, value: m }, m)));
+          })()
         ),
 
         React.createElement("div", { className: "agn-card" },
@@ -1402,8 +1744,8 @@ window.__ModuleLoader__.load({
                   }, "＋ 本地图片"),
                   React.createElement("button", {
                     type: "button", className: "agn-ref-add",
-                    disabled: busy || refsFull || imageHistory.length === 0,
-                    title: imageHistory.length === 0 ? "还没有生成过图片" : "从「生成结果」里挑一张",
+                    disabled: busy || refsFull || pickableImages.length === 0,
+                    title: pickableImages.length === 0 ? "还没有生成过图片" : "从「生成结果」里挑一张",
                     onClick: () => store.toggleRefPick(),
                   }, "＋ 生成结果")
                 ),
@@ -1411,9 +1753,9 @@ window.__ModuleLoader__.load({
                 /* 从生成结果挑图：只列图片（视频不能当参考图） */
                 s.refPickOpen
                   ? React.createElement("div", { className: "agn-ref-pick" },
-                      imageHistory.length === 0
+                      pickableImages.length === 0
                         ? React.createElement("span", { className: "agn-hint" }, "还没有生成过图片")
-                        : imageHistory.map((h) => React.createElement("button", {
+                        : pickableImages.map((h) => React.createElement("button", {
                             key: "pick-" + h.filename,
                             type: "button",
                             title: h.filename,
@@ -1433,6 +1775,76 @@ window.__ModuleLoader__.load({
               )
             : null,
 
+          /* ---- 视频参考图（reference 模式，≤5 张）：给风格 / 主体参考，不是首帧 ---- */
+          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.vRefs.length + " / " + MAX_VREFS),
+                  s.vRefsBusy ? React.createElement("span", { className: "agn-hint" }, "处理中…") : null,
+                  s.vRefs.length > 0
+                    ? React.createElement("button", {
+                        type: "button", className: "agn-btn-ghost", disabled: busy,
+                        onClick: () => store.clearVRefs(),
+                      }, "清空参考图")
+                    : null
+                ),
+                React.createElement("div", { className: "agn-ref-strip" },
+                  s.vRefs.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.removeVRef(r.id),
+                    }, "×")
+                  )),
+                  React.createElement("button", {
+                    type: "button", className: "agn-ref-add",
+                    disabled: busy || vRefsFull,
+                    title: "从本地磁盘选择一个或多个图片（PNG / JPEG / WebP / GIF）",
+                    onClick: () => {
+                      const el = vRefInput.current;
+                      if (el !== null) el.click();
+                    },
+                  }, "＋ 本地"),
+                  React.createElement("button", {
+                    type: "button", className: "agn-ref-add",
+                    disabled: busy || vRefsFull || pickableImages.length === 0,
+                    title: pickableImages.length === 0 ? "还没有生成过图片" : "从「生成结果」里挑一张",
+                    onClick: () => store.toggleVRefPick(),
+                  }, "＋ 结果")
+                ),
+                s.vRefPickOpen
+                  ? React.createElement("div", { className: "agn-ref-pick" },
+                      pickableImages.length === 0
+                        ? React.createElement("span", { className: "agn-hint" }, "还没有生成过图片")
+                        : pickableImages.map((h) => React.createElement("button", {
+                            key: "vpick-" + h.filename,
+                            type: "button",
+                            title: h.filename,
+                            onClick: () => store.addVRefFromResult(h),
+                          }, React.createElement("img", {
+                            src: srcOf(h.filename), alt: h.filename, loading: "lazy",
+                          })))
+                    )
+                  : null,
+                React.createElement("div", { className: "agn-note" },
+                  s.vRefs.length > 0
+                    ? (s.vFirst !== null || s.vLast !== null
+                        ? "已给关键帧，本次按首尾帧生成，参考图不生效"
+                        : "将按参考图生成（" + s.vRefs.length + " 张）——参考风格 / 主体 / 构图")
+                    : "可选：给上游 1–5 张参考图；留空 = 纯文本生视频"),
+                s.vRefsError !== "" ? React.createElement("div", { className: "agn-err" }, s.vRefsError) : null
+              )
+            : null,
+
           React.createElement("div", { className: "agn-label" }, "提示词"),
           React.createElement("div", { className: "agn-presets" },
             PROMPT_PRESETS.map((preset) => React.createElement("button", {
@@ -1539,6 +1951,7 @@ window.__ModuleLoader__.load({
                   + "  ·  " + shown.size + "/" + shown.ratio
                   + (shown.seconds ? "  ·  " + shown.seconds + " 秒" : "")
                   + (shown.mode === "keyframe" ? "  ·  图生视频" : "")
+                  + (shown.mode === "reference" ? "  ·  参考生视频" : "")
                   + (shown.mode === "img2img" ? "  ·  图生图 " + (shown.refCount || 0) + " 张参考" : "")
                   + (shown.seed !== undefined && shown.seed !== null ? "  ·  seed " + shown.seed : "")
                   + "  ·  用时 " + (shown.elapsedSec || shown.wallSec) + "s"),
@@ -1711,6 +2124,52 @@ window.__ModuleLoader__.load({
               )
             : null,
 
+          s.cfgOpen
+            ? React.createElement("div", { className: "agn-field" },
+                React.createElement("div", { className: "agn-label" }, "图片模型"),
+                React.createElement("select", {
+                  className: "agn-input", value: s.cfgDraft.imageModel, disabled: s.cfgSaving,
+                  onChange: (e) => store.setCfgDraft("imageModel", e.target.value),
+                },
+                  React.createElement("option", { value: "" }, "默认（" + ((s.health && s.health.model) || "agnes-image-2.5-flash") + "）"),
+                  ((s.health && s.health.models && s.health.models.image) || []).map((m) =>
+                    React.createElement("option", { key: m, value: m }, m))
+                ),
+                React.createElement("div", { className: "agn-note" }, "只列出当前上游真实存在的图片模型")
+              )
+            : null,
+
+          s.cfgOpen
+            ? React.createElement("div", { className: "agn-field" },
+                React.createElement("div", { className: "agn-label" }, "视频模型"),
+                React.createElement("select", {
+                  className: "agn-input", value: s.cfgDraft.videoModel, disabled: s.cfgSaving,
+                  onChange: (e) => store.setCfgDraft("videoModel", e.target.value),
+                },
+                  React.createElement("option", { value: "" }, "默认（" + ((s.health && s.health.videoModel) || "agnes-video-2.5-flash") + "）"),
+                  ((s.health && s.health.models && s.health.models.video) || []).map((m) =>
+                    React.createElement("option", { key: m, value: m }, m))
+                ),
+                React.createElement("div", { className: "agn-note" }, "换模型后新提交的任务才会用新模型")
+              )
+            : null,
+
+          s.cfgOpen
+            ? React.createElement("div", { className: "agn-field" },
+                React.createElement("button", {
+                  type: "button", className: "agn-btn-ghost", disabled: s.checking,
+                  title: "用当前 Key 请求一次上游模型清单，确认 Key 能用、网络通",
+                  onClick: () => store.checkKey(),
+                }, s.checking ? "连接中…" : "测试连接"),
+                s.checkResult !== null
+                  ? React.createElement("div", {
+                      // 别给 style 传字符串：React 会抛错并卸载整块面板（白屏）
+                      className: (s.checkResult.ok ? "agn-okline" : "agn-err") + " agn-check",
+                    }, s.checkResult.text)
+                  : null
+              )
+            : null,
+
           s.cfgOpen
             ? React.createElement("div", { className: "agn-row" },
                 React.createElement("button", {
@@ -1773,7 +2232,7 @@ window.__ModuleLoader__.load({
 
     exports.apply = apply;
     exports.inject = ["slots"];
-    exports.__internals = { getStore, createStore, srcOf, shrinkImage, MAX_REFS };
+    exports.__internals = { pickableImagesOf, getStore, createStore, srcOf, shrinkImage, MAX_REFS };
     return module.exports;
   },
 });