dsh-agnes-create 0.4.1 → 0.7.0

package/lib/client.js

@@ -23,6 +23,19 @@ window.__ModuleLoader__.load({
     const REF_QUALITY = 0.88;
     const REF_PNG_KEEP_BYTES = 800 * 1024;
 
+    /**
+     * 提示词预设：点一下把风格描述追加到当前提示词末尾。
+     * 刻意写成「可叠加的风格后缀」，而不是整段替换——用户已经写好的主体不会被冲掉。
+     */
+    const PROMPT_PRESETS = [
+      { label: "写实摄影", text: "写实摄影风格，自然光，浅景深，35mm 镜头，细节丰富" },
+      { label: "水彩", text: "水彩画风格，纸纹质感，柔和晕染，留白构图" },
+      { label: "3D 渲染", text: "3D 渲染风格，柔光棚拍，材质清晰，背景简洁" },
+      { label: "海报", text: "平面海报构图，大面积留白，主体突出，配色克制" },
+      { label: "夜景霓虹", text: "夜景霓虹灯光，湿润地面反光，氛围浓烈" },
+      { label: "极简", text: "极简构图，单一主体，纯净背景，柔和渐变光" },
+    ];
+
     const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 
     /* ---------- 样式 ---------- */
@@ -73,7 +86,8 @@ window.__ModuleLoader__.load({
                       transition: width .3s ease; }
 
       /* 媒体展示区 */
-      .agn-shot { border-radius: 10px; border: 1px solid var(--dsw-alias-border-l2, #e3e3e3);
+      .agn-shot { position: relative; border-radius: 10px;
+                  border: 1px solid var(--dsw-alias-border-l2, #e3e3e3);
                   background: var(--dsw-alias-bg-layer-2, #fafafa); overflow: hidden;
                   display: flex; align-items: center; justify-content: center; min-height: 120px; }
       .agn-shot img, .agn-shot video { display: block; max-width: 100%; height: auto; }
@@ -82,6 +96,39 @@ window.__ModuleLoader__.load({
       .agn-shot-msg { padding: 18px; font-size: 12px; text-align: center; line-height: 1.7;
                       color: var(--dsw-alias-label-secondary, #888); }
 
+      /* 悬停浮现的提示词：贴在媒体底部，默认透明，鼠标进来才出现 */
+      .agn-prompt { position: absolute; left: 0; right: 0; bottom: 0;
+                    display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px;
+                    background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
+                    opacity: 0; transition: opacity .16s ease; pointer-events: none; }
+      .agn-shot:hover .agn-prompt { opacity: 1; pointer-events: auto; }
+      .agn-prompt-text { flex: 1 1 auto; min-width: 0; font-size: 11px; line-height: 1.5;
+                         color: #fff; display: -webkit-box; -webkit-line-clamp: 3;
+                         -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
+      .agn-prompt-copy { flex: none; font: inherit; font-size: 11px; line-height: 1.3;
+                         padding: 2px 8px; border-radius: 5px; cursor: pointer;
+                         color: #fff; background: rgba(255,255,255,.18);
+                         border: 1px solid rgba(255,255,255,.45); }
+      .agn-prompt-copy:hover { background: rgba(255,255,255,.3); }
+
+      /* 输出目录清单 */
+      .agn-lib { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
+      .agn-lib-tabs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+      .agn-lib-grid { display: flex; gap: 8px; flex-wrap: wrap;
+                      max-height: 300px; overflow-y: auto; padding: 2px; }
+      .agn-lib-item { position: relative; width: 84px; height: 84px; border-radius: 8px;
+                      padding: 0; overflow: hidden; cursor: pointer; flex: none;
+                      border: 2px solid var(--dsw-alias-border-l2, #e3e3e3);
+                      background: var(--dsw-alias-bg-layer-2, #fafafa); }
+      .agn-lib-item:hover { border-color: var(--dsw-alias-state-business-primary, #4b7bec); }
+      .agn-lib-item img, .agn-lib-item video { width: 100%; height: 100%;
+                       object-fit: cover; display: block; pointer-events: none; }
+      .agn-lib-badge { position: absolute; left: 4px; bottom: 4px; font-size: 10px;
+                       line-height: 1.4; padding: 0 5px; border-radius: 4px;
+                       color: #fff; background: rgba(0,0,0,.55); }
+      .agn-lib-empty { font-size: 12px; line-height: 1.6;
+                       color: var(--dsw-alias-label-secondary, #888); }
+
       /* 历史缩略图 */
       .agn-hist { display: flex; flex-direction: column; gap: 6px; }
       .agn-hist-strip { display: flex; gap: 8px; flex-wrap: wrap; }
@@ -90,10 +137,15 @@ window.__ModuleLoader__.load({
                    border: 2px solid var(--dsw-alias-border-l2, #e3e3e3);
                    background: var(--dsw-alias-bg-layer-2, #fafafa); }
       .agn-thumb-on { border-color: var(--dsw-alias-state-business-primary, #4b7bec); }
-      .agn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+      /* 缩略图里放 <video> 取首帧；pointer-events: none 让点击继续落到外层按钮上
+         （video 属于可交互内容，套在 button 里会吃掉点击） */
+      .agn-thumb img, .agn-thumb video { width: 100%; height: 100%;
+                     object-fit: cover; display: block; pointer-events: none; }
+      /* ▶ 只是角标，压在首帧上；别挡点击，也别把首帧盖住 */
       .agn-thumb-play { position: absolute; inset: 0; display: flex; align-items: center;
-                        justify-content: center; font-size: 22px; line-height: 1;
-                        color: #fff; background: rgba(0, 0, 0, .3); }
+                        justify-content: center; font-size: 20px; line-height: 1;
+                        color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .75);
+                        pointer-events: none; background: rgba(0, 0, 0, .12); }
       .agn-thumb-cap { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px;
                        text-align: center; padding: 1px 0;
                        color: var(--dsw-alias-label-primary-foreground, #fff);
@@ -144,6 +196,55 @@ window.__ModuleLoader__.load({
       .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); }
+
+      /* 提示词预设 */
+      .agn-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
+      .agn-preset { font: inherit; font-size: 11px; line-height: 1.4; padding: 2px 9px;
+                    border-radius: 999px; cursor: pointer;
+                    color: var(--dsw-alias-label-secondary, #555); background: transparent;
+                    border: 1px solid var(--dsw-alias-border-l2, #ddd); }
+      .agn-preset:hover:not(:disabled) { border-color: var(--dsw-alias-state-business-primary, #4b7bec);
+                                         color: var(--dsw-alias-state-business-primary, #4b7bec); }
+      .agn-preset:disabled { opacity: .45; cursor: not-allowed; }
+
+      /* 视频关键帧（图生视频） */
+      .agn-frames { display: flex; flex-direction: column; gap: 8px; }
+      .agn-frames-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
+      .agn-frame { display: flex; flex-direction: column; gap: 4px; flex: none; }
+      .agn-frame-cap { font-size: 11px; color: var(--dsw-alias-label-secondary, #888); }
+      .agn-frame-box { position: relative; width: 72px; height: 72px; border-radius: 8px;
+                       overflow: hidden; border: 1px solid var(--dsw-alias-border-l2, #e3e3e3);
+                       background: var(--dsw-alias-bg-layer-2, #fafafa); }
+      .agn-frame-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
+      .agn-frame-add { width: 72px; height: 72px; border-radius: 8px; cursor: pointer;
+                       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-frame-add:disabled { opacity: .45; cursor: not-allowed; }
+      /* 「＋ 结果」：从已生成的图片里挑一张当关键帧 */
+      .agn-frame-from { width: 72px; font: inherit; font-size: 11px; line-height: 1.4;
+                        padding: 2px 0; border-radius: 6px; cursor: pointer;
+                        color: var(--dsw-alias-label-secondary, #555); background: transparent;
+                        border: 1px solid var(--dsw-alias-border-l2, #ddd); }
+      .agn-frame-from:hover:not(:disabled) {
+                        border-color: var(--dsw-alias-state-business-primary, #4b7bec);
+                        color: var(--dsw-alias-state-business-primary, #4b7bec); }
+      .agn-frame-from:disabled { opacity: .45; cursor: not-allowed; }
+      .agn-frame .agn-ref-pick { margin-top: 2px; }
+      .agn-seed { width: 72px; }
+
+      /* 结果收尾动作 */
+      .agn-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
+      .agn-act { font: inherit; font-size: 11px; line-height: 1.4; padding: 3px 10px;
+                 border-radius: 6px; cursor: pointer;
+                 color: var(--dsw-alias-label-secondary, #555); background: transparent;
+                 border: 1px solid var(--dsw-alias-border-l2, #ddd); }
+      .agn-act:hover { border-color: var(--dsw-alias-state-business-primary, #4b7bec);
+                       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-notice { font-size: 12px; color: var(--dsw-alias-state-success-primary, #2a2);
+                    line-height: 1.6; }
     `;
 
     function ensureCss() {
@@ -279,6 +380,27 @@ window.__ModuleLoader__.load({
         refsBusy: false,
         refsError: "",
         refPickOpen: false,
+
+        /* ---- 视频关键帧（可选）：本地图直接当首帧 / 尾帧 ---- */
+        vFirst: null,           // { src(dataURI), name, bytes }
+        vLast: null,
+        vSeed: "",              // 空串 = 不传 seed
+        frameBusy: false,       // 正在压缩关键帧图片
+        framePick: "",          // '' | 'first' | 'last'：本地文件选择器的目标
+        framePickFrom: "",      // '' | 'first' | 'last'：生成结果选择面板的目标
+
+        /* ---- 历史：宿主落盘，刷新/重启后还在 ---- */
+        historyMax: HISTORY_MAX,
+        historyLoaded: false,
+        notice: "",             // 一次性操作反馈（复制路径、打开访达…）
+
+        /* ---- 输出目录清单：把磁盘上已有的图/视频捞回来看 ---- */
+        library: null,          // null = 还没加载过；[] = 加载过但是空
+        libraryOpen: false,
+        libraryTab: "image",    // 'image' | 'video'
+        libraryBusy: false,
+        libraryError: "",
+        copiedKey: "",          // 刚刚复制了哪一条的提示词（用于显示「已复制」）
       };
 
       const snapshot = () => ({ ...state, history: state.history.slice() });
@@ -312,9 +434,58 @@ window.__ModuleLoader__.load({
       };
 
       const pushResult = (entry) => {
-        set({ result: entry, history: [entry, ...state.history].slice(0, HISTORY_MAX) });
+        set({ result: entry, history: [entry, ...state.history].slice(0, state.historyMax) });
+        // 顺手落盘：/agnes/history 是唯一真相，写失败也不影响本次展示
+        void appendHistory(entry);
       };
 
+      /* ---------- 历史（宿主持久化） ---------- */
+      async function loadHistory() {
+        try {
+          const res = await fetch("/agnes/history");
+          if (!res.ok) {
+            // 旧版宿主没有这条路由：保持空历史即可，不要报错吓人
+            set({ historyLoaded: true });
+            return;
+          }
+          const data = await res.json();
+          if (!data || data.ok !== true) {
+            set({ historyLoaded: true });
+            return;
+          }
+          const entries = Array.isArray(data.entries) ? data.entries : [];
+          const max = typeof data.max === "number" && data.max > 0 ? data.max : HISTORY_MAX;
+          update((prev) => ({
+            history: entries,
+            historyMax: max,
+            historyLoaded: true,
+            // 主预览默认显示最新一条；已经有结果时不动它
+            result: prev.result === null ? (entries[0] || null) : prev.result,
+          }));
+        } catch {
+          set({ historyLoaded: true });
+        }
+      }
+
+      async function appendHistory(entry) {
+        try {
+          const res = await fetch("/agnes/history", {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify(entry),
+          });
+          if (!res.ok) return;
+          const data = await res.json();
+          if (!data || data.ok !== true) return;
+          // 只有宿主确实回了列表才覆盖本地：宁可用旧列表，也不要把界面清空
+          if (!Array.isArray(data.entries)) return;
+          update((prev) => ({
+            history: data.entries,
+            historyMax: typeof data.max === "number" && data.max > 0 ? data.max : prev.historyMax,
+          }));
+        } catch { /* 落盘失败不影响当前结果展示 */ }
+      }
+
       async function loadHealth() {
         if (state.healthRequested) return;
         state.healthRequested = true;
@@ -400,7 +571,7 @@ window.__ModuleLoader__.load({
         const data = await res.json();
         if (!data.ok) throw new Error(data.error || "生成失败");
         if (token !== runToken) return;
-        pushResult({ ...data, kind: "image", wallSec: ((Date.now() - state.startedAt) / 1000).toFixed(1) });
+        pushResult({ ...data, kind: "image", prompt, wallSec: ((Date.now() - state.startedAt) / 1000).toFixed(1) });
       }
 
       /* ---------- 参考图（图生图） ---------- */
@@ -519,19 +690,226 @@ window.__ModuleLoader__.load({
         set({ refPickOpen: !state.refPickOpen, refsError: "" });
       }
 
+      /* ---------- 视频关键帧（首帧 / 尾帧，本地图直接当帧） ---------- */
+      const frameField = (which) => (which === "last" ? "vLast" : "vFirst");
+
+      function pickFrame(which) {
+        if (state.busy || state.frameBusy) return;
+        set({ framePick: which, error: "" });
+      }
+
+      async function setFrameFromFile(which, file) {
+        set({ frameBusy: true, error: "" });
+        try {
+          // 和参考图走同一套下采样：长边 1280、PNG 优先，既省上行又不会糊
+          const r = await shrinkImage(file);
+          set({
+            [frameField(which)]: { src: r.src, name: file.name || "关键帧", bytes: r.bytes },
+            framePick: "",
+          });
+        } catch (e) {
+          set({ framePick: "", error: e && e.message ? e.message : String(e) });
+        } finally {
+          set({ frameBusy: false });
+        }
+      }
+
+      function clearFrame(which) {
+        if (state.busy) return;
+        set({ [frameField(which)]: null, framePickFrom: "" });
+      }
+
+      /* 把「生成结果」里的图直接当关键帧：和本地图完全同一条链路（blob → 下采样 → data URI） */
+      function toggleFramePick(which) {
+        if (state.busy || state.frameBusy) return;
+        set({ framePickFrom: state.framePickFrom === which ? "" : which, error: "" });
+      }
+
+      async function setFrameFromResult(which, entry) {
+        if (!entry || entry.kind !== "image" || !entry.filename) return;
+        if (state.busy || state.frameBusy) return;
+        set({ frameBusy: true, error: "" });
+        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);
+          set({
+            [frameField(which)]: { src: r.src, name: entry.filename, bytes: r.bytes },
+            framePickFrom: "",
+          });
+        } catch (e) {
+          set({ framePickFrom: "", error: e && e.message ? e.message : String(e) });
+        } finally {
+          set({ frameBusy: false });
+        }
+      }
+
+      /* 结果区的一键设置：只在「结果本身是图片」时有意义 */
+      function useResultAsFrame(which) {
+        const cur = state.result;
+        if (cur === null || cur.kind !== "image") return;
+        return setFrameFromResult(which, cur);
+      }
+
+      /* ---------- 结果收尾动作：复制路径 / 访达显示 / 下载 ---------- */
+      async function copyPath() {
+        const cur = state.result;
+        if (cur === null) return;
+        const text = cur.path || "";
+        try {
+          await navigator.clipboard.writeText(text);
+          set({ notice: "路径已复制" });
+        } catch {
+          set({ notice: "复制失败，可手动复制：" + text });
+        }
+      }
+
+      async function reveal() {
+        const cur = state.result;
+        if (cur === null) return;
+        try {
+          const res = await fetch("/agnes/reveal", {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ name: cur.filename }),
+          });
+          const data = await res.json().catch(() => ({}));
+          set({
+            notice: data && data.ok === true
+              ? "已在访达中显示"
+              : "打开失败：" + ((data && data.error) || "HTTP " + res.status),
+          });
+        } catch (e) {
+          set({ notice: "打开失败：" + (e && e.message ? e.message : String(e)) });
+        }
+      }
+
+      function downloadResult() {
+        const cur = state.result;
+        if (cur === null) return;
+        const a = document.createElement("a");
+        a.href = srcOf(cur.filename);
+        a.download = cur.filename;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        set({ notice: "已开始下载" });
+      }
+
+      /** 停掉等待：让在途的轮询/请求结果失效（服务端任务本身无法撤回） */
+      function cancel() {
+        if (!state.busy) return;
+        runToken += 1;
+        stopTimer();
+        set({
+          busy: false, vStatus: "", vProgress: 0,
+          notice: "已停止等待；服务端任务可能仍在跑",
+        });
+      }
+
+      /* ---------- 输出目录：把磁盘上已经有的图/视频捞回来 ---------- */
+      async function copyPrompt(text) {
+        const t = typeof text === "string" ? text.trim() : "";
+        if (t === "") return;
+        try {
+          await navigator.clipboard.writeText(t);
+          set({ notice: "提示词已复制", copiedKey: t });
+        } catch {
+          set({ notice: "复制失败，可手动选中复制" });
+        }
+      }
+
+      async function loadLibrary() {
+        if (state.libraryBusy) return;
+        set({ libraryBusy: true, libraryError: "" });
+        try {
+          const res = await fetch("/agnes/library");
+          const data = await res.json().catch(() => ({}));
+          if (!res.ok || !data || data.ok !== true) {
+            throw new Error((data && data.error) || "HTTP " + res.status);
+          }
+          const files = Array.isArray(data.files) ? data.files : [];
+          set({
+            library: files,
+            libraryOpen: true,
+            libraryBusy: false,
+            libraryError: "",
+          });
+          const images = files.filter((f) => f.kind === "image").length;
+          if (images === 0) {
+            const videos = files.filter((f) => f.kind === "video").length;
+            if (videos > 0) set({ libraryTab: "video" });
+          }
+        } catch (e) {
+          set({
+            libraryBusy: false,
+            libraryOpen: true,
+            libraryError: e && e.message ? e.message : String(e),
+          });
+        }
+      }
+
+      function toggleLibrary() {
+        if (state.libraryOpen) {
+          set({ libraryOpen: false });
+          return;
+        }
+        // 没加载过就先拉一次；已经有清单则直接展开
+        if (state.library === null) return loadLibrary();
+        set({ libraryOpen: true });
+      }
+
+      function setLibraryTab(tab) {
+        set({ libraryTab: tab === "video" ? "video" : "image" });
+      }
+
+      /** 点磁盘上的文件：直接放进结果区看，不经过生成流程 */
+      function showLibraryFile(file) {
+        if (!file || !file.name) return;
+        if (state.busy) return;
+        set({
+          result: {
+            kind: file.kind === "video" ? "video" : "image",
+            filename: file.name,
+            path: file.path || "",
+            bytes: file.bytes || 0,
+            prompt: typeof file.prompt === "string" ? file.prompt : "",
+            fromDisk: true,
+          },
+          error: "",
+          notice: "",
+        });
+      }
+
       /* ---------- 视频：提交 → 轮询 → 下载完成 ---------- */
       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 }),
+          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: "排队中…" });
         const deadline = Date.now() + VIDEO_DEADLINE_MS;
 
@@ -580,6 +958,9 @@ window.__ModuleLoader__.load({
               ratio: state.vRatio,
               seconds: st.seconds || state.vSeconds,
               transport: "异步任务",
+              mode: usedMode,
+              seed: seedValue === null ? undefined : seedValue,
+              prompt,
               wallSec: ((Date.now() - state.startedAt) / 1000).toFixed(1),
             });
             return;
@@ -628,6 +1009,7 @@ window.__ModuleLoader__.load({
         set,
         loadHealth,
         loadConfig,
+        loadHistory,
         saveConfig,
         setCfgDraft(field, value) {
           set({ cfgDraft: { ...state.cfgDraft, [field]: value }, cfgNotice: "" });
@@ -640,16 +1022,36 @@ window.__ModuleLoader__.load({
         removeRef,
         clearRefs,
         toggleRefPick,
+        /* ---- 视频关键帧 ---- */
+        pickFrame,
+        setFrameFromFile,
+        clearFrame,
+        toggleFramePick,
+        setFrameFromResult,
+        useResultAsFrame,
+        /* ---- 结果收尾 ---- */
+        copyPath,
+        reveal,
+        downloadResult,
+        cancel,
+        copyPrompt,
+        /* ---- 输出目录清单 ---- */
+        loadLibrary,
+        toggleLibrary,
+        setLibraryTab,
+        showLibraryFile,
         maxRefs: MAX_REFS,
         /** 切换主预览到历史里的某一张 */
         show(entry) { set({ result: entry }); },
         /**
-         * 清空界面上的生成结果。只清显示状态：不删磁盘文件、不动提示词和参数。
-         * 进行中的请求不清（否则结果回来又会写一遍，反而更乱）。
+         * 清空界面上的生成结果。删的是界面状态和宿主持久化的历史记录，
+         * 不删磁盘文件、不动提示词和参数。进行中的请求不清。
          */
         clear() {
           if (state.busy) return;
-          set({ result: null, history: [], error: "" });
+          set({ result: null, history: [], error: "", notice: "" });
+          // 宿主是历史的真源；这里的 DELETE 失败也不该打断界面
+          void fetch("/agnes/history", { method: "DELETE" }).catch(() => {});
         },
         dispose() {
           stopTimer();
@@ -666,7 +1068,7 @@ window.__ModuleLoader__.load({
     }
 
     /* ---------- 媒体显示：视频直接用 <video>，图片带加载兜底 ---------- */
-    function MediaBox({ entry, big }) {
+    function MediaBox({ entry, big, onCopyPrompt }) {
       const isVideo = entry !== null && entry.kind === "video";
       const name = entry === null ? null : entry.filename;
 
@@ -715,6 +1117,8 @@ window.__ModuleLoader__.load({
             React.createElement("span", { className: "agn-code" }, entry.path || name)));
       }
 
+      const promptText = typeof entry.prompt === "string" ? entry.prompt.trim() : "";
+
       return React.createElement("div", { className: "agn-shot" + (big ? " agn-shot-big" : "") },
         isVideo
           ? React.createElement("video", {
@@ -724,7 +1128,20 @@ window.__ModuleLoader__.load({
               preload: "metadata",
               onError: () => setFailed(true),
             })
-          : React.createElement("img", { src, alt: "生成结果", onError })
+          : React.createElement("img", { src, alt: "生成结果", onError }),
+        /* 鼠标移上去才浮出来的一层：显示当初的提示词，带一键复制 */
+        promptText === ""
+          ? null
+          : React.createElement("div", { className: "agn-prompt" },
+              React.createElement("div", { className: "agn-prompt-text", title: promptText }, promptText),
+              React.createElement("button", {
+                type: "button", className: "agn-prompt-copy",
+                title: "复制这段提示词",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  if (typeof onCopyPrompt === "function") onCopyPrompt(promptText);
+                },
+              }, "复制"))
       );
     }
 
@@ -755,7 +1172,7 @@ window.__ModuleLoader__.load({
         return () => { off(); };
       }, []);
 
-      React.useEffect(() => { store.loadHealth(); store.loadConfig(); }, []);
+      React.useEffect(() => { store.loadHealth(); store.loadConfig(); store.loadHistory(); }, []);
 
       const busy = s.busy;
       const isVideo = s.mode === "video";
@@ -765,7 +1182,12 @@ window.__ModuleLoader__.load({
       const hasRefs = s.refs.length > 0;
       const refsFull = s.refs.length >= MAX_REFS;
       const imageHistory = s.history.filter((h) => h.kind === "image");
+      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 onKeyDown = (e) => {
         if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { e.preventDefault(); store.run(); }
@@ -797,6 +1219,13 @@ window.__ModuleLoader__.load({
               onChange: (e) => store.set({ vRatio: e.target.value }),
             }, VIDEO_RATIOS.map((x) => React.createElement("option", { key: x, value: x }, x))),
             React.createElement("span", { key: "m", className: "agn-meta" }, "720P"),
+            React.createElement("span", { key: "l3", className: "agn-label" }, "种子"),
+            React.createElement("input", {
+              key: "s3", type: "text", inputMode: "numeric", className: "agn-seed",
+              value: s.vSeed, disabled: busy, placeholder: "随机",
+              title: "固定 seed 可让同一提示词出片更稳定；留空由服务端随机",
+              onChange: (e) => store.set({ vSeed: e.target.value }),
+            }),
           ]
         : [
             React.createElement("span", { key: "l1", className: "agn-label" }, "尺寸"),
@@ -815,6 +1244,57 @@ window.__ModuleLoader__.load({
         ? "生成结果（还没有）"
         : (shown.kind === "video" ? "生成结果 · 视频" : "生成结果 · 图片");
 
+      /* 视频缩略图：放一个真的 <video>，浏览器会解码出首帧当封面。
+         #t=0.1 是媒体片段定位，避免第一帧偶尔是黑场；muted + playsInline
+         保证不会被自动播放策略拦掉，也不会突然出声。 */
+      const videoThumb = (name) => React.createElement("video", {
+        src: srcOf(name) + "#t=0.1",
+        preload: "metadata",
+        muted: true,
+        playsInline: true,
+        tabIndex: -1,
+      });
+
+      /* 关键帧小格：有图显示缩略图 + ×，无图显示「＋ 本地」；
+         下方固定一行「＋ 结果」，从已经生成过的图片里挑一张 */
+      const frameSlot = (which, label, cur) => React.createElement("div", { className: "agn-frame" },
+        React.createElement("div", { className: "agn-frame-cap" }, label),
+        cur !== null
+          ? React.createElement("div", { className: "agn-frame-box" },
+              React.createElement("img", { src: cur.src, alt: label }),
+              React.createElement("button", {
+                type: "button", className: "agn-ref-del", title: "移除" + label,
+                disabled: busy,
+                onClick: () => store.clearFrame(which),
+              }, "×"))
+          : React.createElement("button", {
+              type: "button", className: "agn-frame-add",
+              disabled: busy || s.frameBusy,
+              title: "从本地磁盘选择" + label + "图片（PNG / JPEG / WebP / GIF）",
+              onClick: () => {
+                store.pickFrame(which);
+                const el = frameInput.current;
+                if (el !== null) el.click();
+              },
+            }, "＋ 本地"),
+        React.createElement("button", {
+          type: "button", className: "agn-frame-from",
+          disabled: busy || s.frameBusy || imageHistory.length === 0,
+          title: imageHistory.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", {
+                key: h.filename, type: "button", title: h.filename,
+                disabled: busy || s.frameBusy,
+                onClick: () => store.setFrameFromResult(which, h),
+              }, React.createElement("img", { src: srcOf(h.filename), alt: h.filename }))))
+          : null
+      );
+
       return React.createElement("div", { className: "agn-root" },
         /* 隐藏的文件选择器：由「＋ 本地图片」按钮触发，支持多选 */
         React.createElement("input", {
@@ -835,6 +1315,22 @@ window.__ModuleLoader__.load({
           },
         }),
 
+        /* 隐藏的关键帧选择器：首帧 / 尾帧共用，靠 store.framePick 区分目标 */
+        React.createElement("input", {
+          ref: frameInput,
+          type: "file",
+          accept: "image/png,image/jpeg,image/webp,image/gif",
+          style: { display: "none" },
+          onChange: (e) => {
+            const el = e.target;
+            const file = el.files && el.files[0];
+            const which = s.framePick === "last" ? "last" : "first";
+            Promise.resolve(store.setFrameFromFile(which, file))
+              .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" },
@@ -849,6 +1345,22 @@ window.__ModuleLoader__.load({
             modeBtn("video", "视频")
           ),
 
+          /* ---- 视频关键帧（图生视频）：本地图片直接当首帧/尾帧，留空即纯文生视频 ---- */
+          isVideo
+            ? React.createElement("div", { className: "agn-frames" },
+                React.createElement("div", { className: "agn-ref-head" },
+                  React.createElement("span", { className: "agn-label" }, "关键帧"),
+                  React.createElement("span", { className: "agn-hint" },
+                    s.vFirst !== null || s.vLast !== null ? "图生视频" : "留空 = 纯文生视频"),
+                  s.frameBusy ? React.createElement("span", { className: "agn-hint" }, "处理中…") : null
+                ),
+                React.createElement("div", { className: "agn-frames-row" },
+                  frameSlot("first", "首帧", s.vFirst),
+                  frameSlot("last", "尾帧", s.vLast)
+                )
+              )
+            : null,
+
           /* ---- 参考图（图生图 / 多图合成）：本地文件 + 生成结果两种来源 ---- */
           !isVideo
             ? React.createElement("div", { className: "agn-refs" },
@@ -922,6 +1434,20 @@ window.__ModuleLoader__.load({
             : null,
 
           React.createElement("div", { className: "agn-label" }, "提示词"),
+          React.createElement("div", { className: "agn-presets" },
+            PROMPT_PRESETS.map((preset) => React.createElement("button", {
+              key: preset.label,
+              type: "button",
+              className: "agn-preset",
+              disabled: busy,
+              title: "追加到提示词末尾：" + preset.text,
+              onClick: () => store.set({
+                prompt: s.prompt.trim() === ""
+                  ? preset.text
+                  : s.prompt.replace(/[\s，,；;。.]+$/, "") + "，" + preset.text,
+              }),
+            }, preset.label))
+          ),
           React.createElement("textarea", {
             className: "agn-textarea",
             value: s.prompt,
@@ -938,7 +1464,17 @@ window.__ModuleLoader__.load({
               className: "agn-btn", type: "button",
               disabled: busy || s.refsBusy || s.prompt.trim() === "" || keyBad,
               onClick: () => store.run(),
-            }, buttonLabel)
+            }, buttonLabel),
+            /* 视频是异步任务，等待可能很长：给出真正的「停止等待」而不是让用户干等 */
+            busy
+              ? React.createElement("button", {
+                  className: "agn-btn-ghost", type: "button",
+                  title: isVideo
+                    ? "停止等待（服务端任务可能仍在跑，已生成的文件不会丢）"
+                    : "放弃这次等待（请求已发出，结果可能仍会落盘）",
+                  onClick: () => store.cancel(),
+                }, "取消")
+              : null
           ),
 
           /* 视频是异步任务：给出阶段与百分比，避免只看到一个跳动的秒数 */
@@ -960,6 +1496,7 @@ window.__ModuleLoader__.load({
                 "未找到 Key：" + (key.file || "") + " —— 把 Key 写进该文件后可立即使用")
             : null,
           s.error !== "" ? React.createElement("div", { className: "agn-err" }, s.error) : null,
+          s.notice !== "" ? React.createElement("div", { className: "agn-notice" }, s.notice) : null,
           busy && !isVideo
             ? React.createElement("div", { className: "agn-hint" },
                 "正在生成：可切到别的面板，回来仍会接着显示结果（请求不会中断）")
@@ -970,6 +1507,12 @@ window.__ModuleLoader__.load({
         React.createElement("div", { className: "agn-card" },
           React.createElement("div", { className: "agn-card-head" },
             React.createElement("div", { className: "agn-label" }, resultLabel),
+            React.createElement("button", {
+              type: "button",
+              className: "agn-btn-ghost",
+              title: "把输出目录里已有的图片 / 视频列出来，点一下就能显示在上方",
+              onClick: () => store.toggleLibrary(),
+            }, s.libraryOpen ? "收起目录" : "输出目录"),
             React.createElement("button", {
               type: "button",
               className: "agn-btn-ghost",
@@ -980,7 +1523,7 @@ window.__ModuleLoader__.load({
           ),
 
           shown !== null
-            ? React.createElement(MediaBox, { entry: shown, big: true })
+            ? React.createElement(MediaBox, { entry: shown, big: true, onCopyPrompt: (t) => store.copyPrompt(t) })
             : React.createElement("div", { className: "agn-shot" },
                 React.createElement("div", { className: "agn-shot-msg" },
                   busy ? (isVideo ? "正在生成视频…" : "正在生成图片…")
@@ -989,19 +1532,116 @@ window.__ModuleLoader__.load({
           shown !== null
             ? React.createElement("div", { className: "agn-hint" },
                 React.createElement("span", null,
-                  shown.filename + "  ·  " + (shown.bytes / 1024 / 1024 >= 1
+                  (shown.fromDisk ? "来自输出目录  ·  " : "")
+                  + shown.filename + "  ·  " + (shown.bytes / 1024 / 1024 >= 1
                     ? (shown.bytes / 1024 / 1024).toFixed(2) + " MB"
                     : (shown.bytes / 1024).toFixed(0) + " KB")
                   + "  ·  " + shown.size + "/" + shown.ratio
                   + (shown.seconds ? "  ·  " + shown.seconds + " 秒" : "")
+                  + (shown.mode === "keyframe" ? "  ·  图生视频" : "")
                   + (shown.mode === "img2img" ? "  ·  图生图 " + (shown.refCount || 0) + " 张参考" : "")
-                  + "  ·  用时 " + shown.elapsedSec + "s"),
+                  + (shown.seed !== undefined && shown.seed !== null ? "  ·  seed " + shown.seed : "")
+                  + "  ·  用时 " + (shown.elapsedSec || shown.wallSec) + "s"),
                 React.createElement("br"),
                 React.createElement("span", null, "已保存到 "),
                 React.createElement("span", { className: "agn-code" }, shown.path || ""))
+            : null,
+
+          shown !== null
+            ? React.createElement("div", { className: "agn-acts" },
+                React.createElement("button", {
+                  type: "button", className: "agn-act",
+                  title: "把文件路径复制到剪贴板",
+                  onClick: () => store.copyPath(),
+                }, "复制路径"),
+                React.createElement("button", {
+                  type: "button", className: "agn-act",
+                  title: "在访达中显示这个文件",
+                  onClick: () => store.reveal(),
+                }, "在访达中显示"),
+                React.createElement("button", {
+                  type: "button", className: "agn-act",
+                  title: "另存一份到「下载」目录",
+                  onClick: () => store.downloadResult(),
+                }, "下载"),
+                shown.kind === "image"
+                  ? React.createElement("button", {
+                      type: "button", className: "agn-act",
+                      disabled: busy || s.frameBusy,
+                      title: "把这张图设为视频首帧（切到视频模式即可看到）",
+                      onClick: () => store.useResultAsFrame("first"),
+                    }, "设为首帧")
+                  : null,
+                shown.kind === "image"
+                  ? React.createElement("button", {
+                      type: "button", className: "agn-act",
+                      disabled: busy || s.frameBusy,
+                      title: "把这张图设为视频尾帧（切到视频模式即可看到）",
+                      onClick: () => store.useResultAsFrame("last"),
+                    }, "设为尾帧")
+                  : null)
             : null
         ),
 
+        /* ---- 输出目录：把磁盘上已有的图 / 视频捞回来看 ---- */
+        s.libraryOpen
+          ? React.createElement("div", { className: "agn-card" },
+              React.createElement("div", { className: "agn-card-head" },
+                React.createElement("div", { className: "agn-label" }, "输出目录"),
+                React.createElement("button", {
+                  type: "button", className: "agn-btn-ghost",
+                  disabled: s.libraryBusy,
+                  title: "重新读一遍输出目录（新生成的文件会自动出现在这里）",
+                  onClick: () => store.loadLibrary(),
+                }, s.libraryBusy ? "读取中…" : "刷新")
+              ),
+              React.createElement("div", { className: "agn-hint" },
+                "点缩略图会把它显示到上方结果区，并带上当初写进图片里的提示词"),
+              React.createElement("div", { className: "agn-lib" },
+                React.createElement("div", { className: "agn-lib-tabs" },
+                  React.createElement("button", {
+                    type: "button",
+                    className: "agn-act" + (s.libraryTab === "image" ? " agn-act-on" : ""),
+                    onClick: () => store.setLibraryTab("image"),
+                  }, "图片 " + libraryImages.length),
+                  React.createElement("button", {
+                    type: "button",
+                    className: "agn-act" + (s.libraryTab === "video" ? " agn-act-on" : ""),
+                    onClick: () => store.setLibraryTab("video"),
+                  }, "视频 " + libraryVideos.length)
+                ),
+                s.libraryError !== ""
+                  ? React.createElement("div", { className: "agn-err" }, s.libraryError)
+                  : null,
+                libraryShown.length === 0
+                  ? React.createElement("div", { className: "agn-lib-empty" },
+                      s.libraryBusy
+                        ? "正在读取输出目录…"
+                        : "这个目录里还没有" + (s.libraryTab === "video" ? "视频" : "图片"))
+                  : React.createElement("div", { className: "agn-lib-grid" },
+                      libraryShown.map((f) => React.createElement("button", {
+                        key: f.name,
+                        type: "button",
+                        className: "agn-lib-item" + (shown && shown.filename === f.name ? " agn-thumb-on" : ""),
+                        title: (f.prompt ? f.prompt + "\n" : "") + f.name,
+                        disabled: busy,
+                        onClick: () => store.showLibraryFile(f),
+                      },
+                        f.kind === "video"
+                          ? videoThumb(f.name)
+                          : React.createElement("img", { src: srcOf(f.name), alt: f.name, loading: "lazy" }),
+                        f.kind === "video"
+                          ? React.createElement("div", { className: "agn-thumb-play" }, "▶")
+                          : null,
+                        f.kind === "video"
+                          ? React.createElement("span", { className: "agn-lib-badge" }, "视频")
+                          : null
+                      ))
+                    )
+              )
+            )
+          : null,
+
         /* ---- 历史 ---- */
         s.history.length > 1
           ? React.createElement("div", { className: "agn-card agn-hist" },
@@ -1015,8 +1655,11 @@ window.__ModuleLoader__.load({
                   onClick: () => store.show(h),
                 },
                   h.kind === "video"
-                    ? React.createElement("div", { className: "agn-thumb-play" }, "▶")
+                    ? videoThumb(h.filename)
                     : React.createElement("img", { src: srcOf(h.filename), alt: h.filename, loading: "lazy" }),
+                  h.kind === "video"
+                    ? React.createElement("div", { className: "agn-thumb-play" }, "▶")
+                    : null,
                   React.createElement("span", { className: "agn-thumb-cap" },
                     h.kind === "video"
                       ? (h.seconds ? h.seconds + "s" : "视频")
@@ -1091,7 +1734,7 @@ window.__ModuleLoader__.load({
           s.cfgOpen
             ? React.createElement("div", { className: "agn-note" },
                 "保存到 ",
-                (s.health && s.health.configFile) || "~/.dsh/agnes-image/config.json")
+                (s.health && s.health.configFile) || "~/.dsh/agnes-create/config.json")
             : null
         ),