{% extends "base.html" %}

{% block title %}{{ brand.home_title }}
<script>
      // ── 设备迁移 ──
      (function () {
        var b = document.getElementById("rebindBtn");
        if (!b) return;
        b.addEventListener("click", function () {
          var gift = {{ (device_state.free_rebind if device_state else 0)|tojson }};
          var cost = {{ (device_state.rebind_cost if device_state else 10)|tojson }};
          var tip = gift > 0 ? ("本次将消耗 1 次免费迁移（剩余 " + gift + " 次），不扣积分。确认迁移到本机？")
                             : ("本次将扣除 " + cost + " 积分并绑定本机。确认继续？");
          if (!window.confirm(tip)) return;
          b.disabled = true; b.textContent = "迁移中…";
          fetch("/api/device-rebind", { method: "POST", headers: { "Content-Type": "application/json" }, body: "{}" })
            .then(function (r) { return r.json(); })
            .then(function (d) {
              if (!d || !d.ok) throw new Error((d && d.error) || "迁移失败");
              alert(d.gifted ? "迁移完成（已使用免费迁移权益）" : ("迁移完成，已扣除 " + d.charged + " 积分"));
              location.reload();
            })
            .catch(function (e) { alert("迁移失败：" + e.message); b.disabled = false; b.textContent = "迁移到本机"; });
        });
      })();

      // ── 我的账单 ──
      (function () {
        var btn = document.getElementById("yudLedgerBtn");
        var modal = document.getElementById("ledgerModal");
        if (!btn || !modal) return;
        function close() { modal.style.display = "none"; }
        btn.addEventListener("click", function () {
          modal.style.display = "flex";
          document.getElementById("ledgerSummary").textContent = "加载中…";
          fetch("/api/ledger?limit=30", { cache: "no-store" })
            .then(function (r) { return r.json(); })
            .then(function (d) {
              if (!d || !d.ok) throw new Error((d && d.error) || "读取失败");
              document.getElementById("ledgerSummary").innerHTML =
                "当前余额 <b>" + (d.points != null ? Number(d.points).toFixed(2) : "-") + "</b> 积分 · 本月消耗 <b>" +
                Number(d.month_cost || 0).toFixed(2) + "</b> · 本月任务 <b>" + (d.month_tasks || 0) + "</b> 条";
              var rows = d.rows || [];
              var html = "<tr style='color:#66748c'><th style='text-align:left;padding:6px'>时间</th><th style='text-align:left'>类型</th><th style='text-align:right'>变动</th><th style='text-align:right'>余额</th><th style='text-align:left;padding-left:10px'>说明</th></tr>";
              rows.forEach(function (x) {
                var delta = Number(x.delta || 0);
                html += "<tr style='border-top:1px solid #eef2f8'>" +
                  "<td style='padding:6px'>" + String(x.created_at || "").slice(5, 16) + "</td>" +
                  "<td>" + (x.kind || "") + "</td>" +
                  "<td style='text-align:right;color:" + (delta < 0 ? "#b45309" : "#0f7b3d") + "'>" + delta.toFixed(2) + "</td>" +
                  "<td style='text-align:right'>" + Number(x.balance_after || 0).toFixed(2) + "</td>" +
                  "<td style='padding-left:10px;color:#66748c'>" + (x.memo || "") + "</td></tr>";
              });
              document.getElementById("ledgerTable").innerHTML = html || "<tr><td style='padding:10px;color:#66748c'>暂无流水</td></tr>";
            })
            .catch(function (e) { document.getElementById("ledgerSummary").textContent = "读取失败：" + e.message; });
        });
        var closers = modal.querySelectorAll("[data-ledger-close]");
        for (var i = 0; i < closers.length; i++) closers[i].addEventListener("click", close);
      })();

      // ── 图片授权告知（一次性） ──
      (function () {
        var modal = document.getElementById("assetConsentModal");
        if (!modal) return;
        var cb = document.getElementById("assetAgree");
        var ok = document.getElementById("assetOk");
        var err = document.getElementById("assetErr");
        cb.addEventListener("change", function () { ok.disabled = !cb.checked; });
        ok.addEventListener("click", function () {
          ok.disabled = true; err.textContent = "";
          fetch("/api/asset-consent", { method: "POST", headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ version: {{ (asset_consent_version or '1.0')|tojson }} }) })
            .then(function (r) { return r.json(); })
            .then(function (d) {
              if (!d || !d.ok) throw new Error((d && d.error) || "记录失败");
              modal.style.display = "none";
              window.__tkaiAssetConsentOk = true;
              if (window.__tkaiSubmitTask) window.__tkaiSubmitTask(window.__tkaiPendingForce || "0");
            })
            .catch(function (e) { err.textContent = "保存失败：" + e.message; ok.disabled = false; });
        });
        var closers = modal.querySelectorAll("[data-asset-close]");
        for (var i = 0; i < closers.length; i++) closers[i].addEventListener("click", function () { modal.style.display = "none"; });
        window.__tkaiShowAssetConsent = function () { modal.style.display = "flex"; };
      })();

      // ── 提交拦截：护栏确认 / 图片授权 / 设备迁移（单次提交，按需二次确认） ──
      (function () {
        var form = document.querySelector("[data-creator-form]");
        if (!form) return;
        var pendingForce = "0";
        function submitTask(force) {
          pendingForce = force || "0";
          var fd = new FormData(form);
          fd.set("force", pendingForce);
          fetch("/projects/create", { method: "POST", body: fd, headers: { "Accept": "application/json" } })
            .then(function (r) {
              return r.text().then(function (t) {
                var j = null;
                try { j = JSON.parse(t); } catch (e) { j = { ok: true, nonjson: true }; }
                return { status: r.status, ok: r.ok, json: j };
              });
            })
            .then(function (res) {
              var d = res.json || {};
              if (res.status < 400 && (d.ok || d.nonjson)) { location.href = "/"; return; }
              if (d.need_asset_consent) { window.__tkaiShowAssetConsent && window.__tkaiShowAssetConsent(); return; }
              if (d.need_rebind) { alert(d.error || "需要先做设备迁移"); location.reload(); return; }
              if (d.needs_confirm) {
                var msg = "开始前确认以下情况：

· " + (d.warnings || []).join("
· ") + "

仍要开始吗？";
                if (window.confirm(msg)) { submitTask("1"); }
                return;
              }
              alert(d.error || ("提交失败（HTTP " + res.status + "）"));
            })
            .catch(function (e) { alert("提交失败：" + e.message); });
        }
        window.__tkaiSubmitTask = submitTask;
        form.addEventListener("submit", function (ev) {
          ev.preventDefault();
          submitTask("0");
        });
      })();

      // ── 进度分享链接（运行中的任务卡片） ──
      (function () {
        function addShare() {
          var cards = document.querySelectorAll("[data-project-id]");
          for (var i = 0; i < cards.length; i++) {
            var card = cards[i];
            if (card.querySelector(".tkai-progress-share")) continue;
            var link = card.getAttribute("data-progress-link");
            if (!link) continue;
            var a = document.createElement("a");
            a.className = "tkai-progress-share";
            a.href = link; a.target = "_blank"; a.rel = "noopener";
            a.textContent = "📱 手机看进度";
            a.style.cssText = "display:inline-block;margin-left:8px;font-size:12.5px;color:#2f5fd0;text-decoration:underline";
            var host = card.querySelector(".project-elapsed") || card;
            host.parentNode.insertBefore(a, host.nextSibling);
          }
        }
        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", addShare);
        else addShare();
        setInterval(addShare, 8000);
      })();

      // ── 导出/下载成片前：发布前自检确认（§17.2 C4） ──
      (function () {
        document.addEventListener("click", function (ev) {
          var t = ev.target;
          if (!t || !t.closest) return;
          var a = t.closest("a[href*='/export'], a[download], a[data-final-export]");
          if (!a || a.__tkaiConfirmed) return;
          if (!/成片|导出|下载/.test(a.textContent || "")) return;
          ev.preventDefault();
          if (window.confirm("导出前请确认：\n\n· 内容真实合法、不含虚假宣传与违禁表述\n· 我会保留“AI 生成内容”标识后再发布\n\n确认导出/下载？")) {
            a.__tkaiConfirmed = true;
            if (a.href.indexOf("javascript:") === 0) return;
            window.location.href = a.href;
          }
        }, true);
      })();

      // ── 运营弹窗：EULA 勾选 / 工单提交 ──
      (function () {
        var eulaModal = document.getElementById("eulaModal");
        if (eulaModal) {
          var cb = document.getElementById("eulaAgree");
          var ok = document.getElementById("eulaOk");
          var err = document.getElementById("eulaErr");
          cb.addEventListener("change", function () { ok.disabled = !cb.checked; });
          ok.addEventListener("click", function () {
            ok.disabled = true; err.textContent = "";
            fetch("/api/accept-eula", {
              method: "POST", headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ version: {{ (_prof.eula_version or '1.0')|tojson }} })
            }).then(function (r) { return r.json(); }).then(function (d) {
              if (!d || !d.ok) throw new Error((d && d.error) || "记录失败");
              eulaModal.remove();
              location.reload();
            }).catch(function (e) {
              err.textContent = "保存失败：" + e.message + "（请确认已登录且网络可用）";
              ok.disabled = false;
            });
          });
        }
        var supModal = document.getElementById("supportModal");
        if (supModal) {
          var openers = document.querySelectorAll("[data-support-open]");
          for (var i = 0; i < openers.length; i++) {
            openers[i].addEventListener("click", function () { supModal.style.display = "flex"; });
          }
          var closers = supModal.querySelectorAll("[data-support-close]");
          for (var j = 0; j < closers.length; j++) {
            closers[j].addEventListener("click", function () { supModal.style.display = "none"; });
          }
          document.getElementById("stSend").addEventListener("click", function () {
            var err2 = document.getElementById("stErr");
            err2.textContent = "";
            fetch("/api/support-ticket", {
              method: "POST", headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                subject: document.getElementById("stSubject").value,
                content: document.getElementById("stContent").value
              })
            }).then(function (r) { return r.json(); }).then(function (d) {
              if (!d || !d.ok) throw new Error((d && d.error) || "提交失败");
              supModal.style.display = "none";
              alert("工单已提交，管理员会尽快处理。");
            }).catch(function (e) { err2.textContent = "提交失败：" + e.message; });
          });
        }
      })();
</script>
{% endblock %}
{% block topbar %}{% endblock %}

{% block content %}
<main class="home-shell">
  {% set _prof = client_profile or {} %}
  {% if _prof.notice %}
  <div class="ops-notice" role="status">
    <span class="ops-notice__tag">公告</span>
    <span>{{ _prof.notice }}</span>
  </div>
  {% endif %}
  {% if _prof.kill_switch %}
  <div class="ops-notice ops-notice--danger" role="alert">
    <span class="ops-notice__tag">服务暂停</span>
    <span>云端服务当前已暂停（管理员停机维护中），暂时无法创建新任务；已排队的任务不受影响。</span>
  </div>
  {% endif %}
  {% if device_state and device_state.known and not device_state.ok %}
  <div class="ops-notice ops-notice--danger" id="rebindNotice" role="alert">
    <span class="ops-notice__tag">设备迁移</span>
    <span>该账号已绑定其他电脑（{{ device_state.bound_hint }}{% if device_state.old_last_active %}，最后活跃 {{ device_state.old_last_active }}{% endif %}）。
      {% if device_state.free_rebind > 0 %}你有 <b>{{ device_state.free_rebind }} 次免费迁移</b>，本次不扣积分。{% else %}迁移到本机将消耗 <b>{{ device_state.rebind_cost }} 积分</b>。{% endif %}
      <button type="button" class="btn primary" id="rebindBtn" style="margin-left:8px;padding:6px 14px">迁移到本机</button>
    </span>
  </div>
  {% endif %}
  {% if fresh_hint %}
  <div class="ops-notice"><span class="ops-notice__tag">新设备</span><span>{{ fresh_hint }}</span></div>
  {% endif %}
  {% if plan_expiring %}
  <div class="ops-notice"><span class="ops-notice__tag">套餐</span><span>{{ plan_expiring }}</span></div>
  {% endif %}
  <style>
    /* ── 首页头部横幅（品牌 + 标题 + 创作配置 + 用户框）── */
    .creator-form-head {
      padding: 20px 26px !important;
      background: linear-gradient(120deg, #101d40 0%, #1c3a86 55%, #2f5fd0 100%) !important;
      border-bottom: none !important;
      /* 放开裁切，避免用户下拉菜单被 hidden 裁掉；顶部圆角自补 */
      overflow: visible !important;
      border-radius: var(--radius, 16px) var(--radius, 16px) 0 0 !important;
    }
    .creator-form-head h2 { margin: 4px 0 0 !important; font-size: 13px; font-weight: 600;
      color: rgba(255, 255, 255, .78); letter-spacing: .3px; }
    /* ── 运营公告 / EULA / 工单 ── */
    .ops-notice{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;padding:10px 14px;border-radius:12px;
      background:#fff8e6;border:1px solid #f0dcae;color:#7a5b12;font-size:13.5px;line-height:1.55}
    .ops-notice--danger{background:#fdecec;border-color:#f3c2c2;color:#8f2222}
    .ops-notice__tag{flex:0 0 auto;font-weight:700;background:rgba(0,0,0,.06);border-radius:999px;padding:1px 9px;font-size:12px}
    .tkai-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
    .tkai-modal__mask{position:absolute;inset:0;background:rgba(12,18,32,.55)}
    .tkai-modal__box{position:relative;background:#fff;border-radius:16px;max-width:640px;width:100%;max-height:86vh;
      overflow:auto;padding:24px 26px;box-shadow:0 20px 60px rgba(10,20,40,.28)}
    .tkai-modal__box h3{margin:0 0 8px;font-size:18px}
    .tkai-modal__box p,.tkai-modal__box li{color:#42506b;font-size:13.5px;line-height:1.7}
    .tkai-modal__box ul{margin:8px 0 12px;padding-left:20px}
    .tkai-modal__box .tkai-agree{display:flex;gap:8px;align-items:flex-start;margin:14px 0 6px;font-size:13.5px;color:#22304d}
    .tkai-modal__act{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
    .tkai-modal__err{color:#b42318;font-size:12.5px;min-height:16px;margin-top:6px}
    .ops-support-link{background:none;border:none;color:#5b6982;font-size:12.5px;cursor:pointer;text-decoration:underline}
    .brand-kicker { color: #ffffff; font-size: clamp(24px, 3vw, 32px); font-weight: 820;
      letter-spacing: .5px; line-height: 1.2; margin-bottom: 0; }
    .creator-head-actions { display: flex; align-items: center; gap: 12px; }
    /* ── 用户信息胶囊 ── */
    .yds-user-box { position: relative; flex: 0 0 auto; z-index: 40; }
    .yds-user-btn { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 7px;
      border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .12);
      backdrop-filter: blur(10px); cursor: pointer; transition: background .16s ease, border-color .16s ease; }
    .yds-user-btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45); }
    .yds-avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
      background: linear-gradient(135deg, #ff9a3d, #ff5f2e); color: #fff; font-size: 13px; font-weight: 800;
      display: inline-flex; align-items: center; justify-content: center; }
    .yds-uname { font-size: 14px; font-weight: 700; color: #ffffff; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .yds-rank { font-size: 11px; font-weight: 700; color: #cdeed9; background: rgba(46, 184, 114, .25);
      border: 1px solid rgba(102, 212, 150, .5); border-radius: 999px; padding: 1px 8px; }
    .yds-rank:empty { display: none; }
    .yds-points-badge { font-size: 16px; font-weight: 800; color: #fff;
      background: linear-gradient(135deg, #ff9a3d, #ff5f2e);
      border-radius: 999px; padding: 5px 16px; font-variant-numeric: tabular-nums;
      box-shadow: 0 3px 10px rgba(255, 95, 46, .32); white-space: nowrap; letter-spacing: .2px; }
    .yds-caret { font-size: 10px; color: rgba(255, 255, 255, .8); }
    .yds-user-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 264px;
      background: #fff; border: 1px solid var(--line, #e3e8f0); border-radius: 14px; padding: 16px 18px 14px;
      box-shadow: 0 18px 44px rgba(15, 28, 63, .22); }
    .yud-head { padding-bottom: 10px; border-bottom: 1px dashed var(--line, #e3e8f0); }
    .yud-name { font-size: 15px; font-weight: 800; color: #1f2a3d; }
    .yud-sub { font-size: 12px; color: #8a94a8; margin-top: 3px; }
    .yud-points { margin: 12px 0 4px; padding: 10px 14px; border-radius: 10px;
      background: linear-gradient(135deg, #fff3ea, #fff7ef); border: 1px solid #ffd9c2;
      display: flex; align-items: baseline; justify-content: space-between; }
    .yud-points-label { font-size: 12px; color: #9a5b2d; font-weight: 600; }
    .yud-points-num { font-size: 20px; font-weight: 800; color: #f2601f; font-variant-numeric: tabular-nums; }
    .yud-row { display: flex; justify-content: space-between; align-items: center;
      font-size: 13px; color: #5b6982; padding: 7px 2px 0; }
    .yud-row b { color: #1f2a3d; font-weight: 700; font-size: 12.5px; }
    .yud-support { width: 100%; margin-top: 14px; height: 38px; border: 1px solid #cfe0f5; border-radius: 9px;
      background: #f5faff; color: #2f5fd0; font-size: 13px; cursor: pointer; }
    .yud-support:hover { background: #eaf3ff; }
    .yud-logout { width: 100%; margin-top: 8px; height: 38px; border: 1px solid #e7b6b3; border-radius: 9px;
      background: #fff; color: #b3261e; font-size: 13px; font-weight: 700; cursor: pointer; }
    .yud-logout:hover { background: #fdf1f0; }
    .yud-stale { font-size: 11px; color: #b58900; margin-top: 6px; }
    @media (max-width: 720px) {
      .creator-form-head { flex-direction: column; align-items: flex-start; gap: 14px; }
      .creator-head-actions { width: 100%; justify-content: space-between; }
    }
    /* ── 项目列表分页（服务端切片：?page=&size=）── */
    .project-list-main { display: grid; gap: 12px; min-width: 0; }
    .pagination-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
      gap: 10px 14px; padding: 9px 12px; border: 1px solid var(--line, #e3e8f0); border-radius: 10px;
      background: #f8fafd; }
    .pagination-left, .pagination-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
    .pagination-pages { display: inline-flex; align-items: center; gap: 4px; }
    .pagination-bar .page-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
      border: 1px solid var(--line, #e3e8f0); border-radius: 8px; background: #fff; color: #33415c;
      font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
    .pagination-bar .page-btn:hover { border-color: var(--accent, #3b82f6); color: var(--accent, #3b82f6); }
    .pagination-bar .page-btn.is-disabled { color: #a9b3c4; background: #f1f4f9; cursor: not-allowed; }
    .pagination-info { font-size: 12.5px; color: #5b6982; white-space: nowrap; }
    .pagination-info strong { color: #1f2a3d; font-variant-numeric: tabular-nums; }
    /* 上传图片卡片：文件名完整换行、角色下拉与删除按钮不再相互挤压（主样式在 base.html，这里只兜底） */
    .product-image-card-name { white-space: normal !important; overflow: visible !important;
                               max-height: none !important; overflow-wrap: anywhere; }

    /* ============================================================
       项目卡竖向排版（用户要求：还原原版竖排；网格版遮挡/错位已废弃）
       .project-item-info 是模板包裹容器，用 display:contents 使其完全透明，
       子元素直接按 base.html 的纵向 flex 排布，观感与旧版完全一致。
       ============================================================ */
    .project-item { position: relative; }
    .project-item .project-item-info { display: contents; }
    /* 云端/本机生成标识：卡片右上角（用户要求），与勾选框同一水平带 */
    .project-item > .backend-badge { position: absolute; top: 8px; right: 10px; z-index: 3; margin: 0 !important;
      display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
    .project-item > .backend-badge[data-backend-label="cloud"] { background: #e8f2ff; color: #1d63d2;
      border: 1px solid #c9defc; }
    .project-item > .backend-badge[data-backend-label="local"] { background: #eef7ee; color: #22713c;
      border: 1px solid #cfe8d4; }
    /* 勾选框与后端标识同一行、同大小、垂直居中（用户要求） */
    .project-item > .project-select-control { height: 26px; padding: 0 10px; box-sizing: border-box; }
    .project-item .project-select-control span { font-size: 12px; }
    .project-item > .backend-badge { top: 12px; right: 12px; height: 26px; padding: 0 10px;
      display: inline-flex; align-items: center; box-sizing: border-box; font-size: 12px; }
    /* 每页标签：不竖向折叠 */
    .pagination-size { flex: 0 0 auto; }
    .pagination-size-label { white-space: nowrap; flex: 0 0 auto; }
    /* 总耗时与"所属分组"同排、同字号（用户要求字体大小等一致） */
    .project-item .project-elapsed { font-size: 12.5px; color: #4a5a75; margin: 4px 0; }
    .project-item .project-elapsed-after-group { display: flex; justify-content: flex-start; }
    .project-item .project-elapsed .project-elapsed-total,
    .project-item .project-elapsed .project-elapsed-stage { font-size: 12.5px; font-weight: 400; }
    /* API 消耗行与耗时行同字号，紧跟在耗时后面；长文本可换行不溢出卡片 */
    .project-item .project-token-wan { font-size: 12.5px; display: block; max-width: 100%;
                                       box-sizing: border-box; overflow-wrap: anywhere; word-break: break-all; }

    /* ============================================================
       槽位恒定化（用户要求：所有卡片控件位置完全一致，不随内容伸缩）
       - 标题槽：固定 64px（2 行封顶，长名截断，内联自适应高度被 min/max 压平）
       - 耗时槽：恒占位 20px（空数据 visibility:hidden 占位，不再 display:none）
       - token 槽：固定单行省略号
       - 终态槽：恒渲染 58px（正常/进行中给绿色轻提示，失败/中断给红/橙详情）
       ============================================================ */
    .project-item .project-card-title-input { min-height: 64px !important; max-height: 64px !important; }
    .project-item .project-running-title { min-height: 64px; max-height: 64px; overflow: hidden;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .project-item .project-elapsed { min-height: 20px; }
    .project-item .project-elapsed.is-empty { visibility: hidden; }
    .project-item .project-token-wan { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      min-height: 18px; overflow-wrap: normal; word-break: normal; }
    .project-item .project-terminal-state { min-height: 58px; max-height: 58px; overflow: hidden;
      box-sizing: border-box; align-content: start; }
    .project-item .project-terminal-state small { max-height: none; display: -webkit-box;
      -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .project-terminal-state.is-ok { border-color: #cdebd8; background: #f4fbf6; color: #1f7a44; }
    .project-terminal-state.is-running-ok { border-color: #cde4fb; background: #f3f8ff; color: #1d63d2; }
    /* 分组表单一行排布：所属分组 + 开始生成时刻 + 选择器 + 移动（用户要求开始生成紧跟分组标签后） */
    .project-item .project-group-move-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
    .project-item .project-group-move-form > div { margin-left: auto; display: flex; gap: 6px;
      flex: 1 1 auto; min-width: 0; }
    .project-item .project-group-move-form select { flex: 1 1 auto; min-width: 0; width: auto; }
    .project-item .project-gen-started { font-size: 12px; color: #7c5cd6; font-weight: 700;
      white-space: nowrap; }

    /* ============================================================
       视频封面修复（用户要求：把视频封面图片显示出来）
       根因：.project-video-cover 遮罩带完全不透明深蓝渐变背景，把底下
       <img class="project-video-cover-img"> 真实封面盖死了——图片其实加载成功。
       规则：缩略图里存在真实封面 img 时遮罩透明化（只留播放按钮）；
       img 加载失败被 onerror 移除后，:has 不再命中，渐变兜底自动恢复。
       ============================================================ */
    .project-video-thumb:has(.project-video-cover-img) .project-video-cover { background: transparent; }
    /* 有真实封面时不再显示蓝色圆钮（用户要求删掉蓝色播放按钮），只留白色三角箭头 */
    .project-video-thumb:has(.project-video-cover-img) .project-video-cover::after { display: none; }

    /* ============================================================
       批量操作工具栏（用户要求：全部一行显示，固定不换行）
       ============================================================ */
    .project-list-panel .panel-head { flex-wrap: wrap; }
    .project-list-panel .project-list-actions { width: 100%; flex-wrap: nowrap; justify-content: flex-start;
      gap: 6px; overflow-x: auto; }
    .project-list-actions .project-select-all { flex: 0 0 auto; white-space: nowrap; }
    .project-list-actions form { flex: 0 0 auto; margin: 0; }
    .project-list-actions .mini-btn { white-space: nowrap; }
    .project-list-actions .project-filter-bar { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
      justify-content: flex-end; }
    .project-list-actions .project-filter-bar input[type="search"] { width: 150px; min-width: 90px;
      max-width: none; flex: 1 1 auto; }
    .project-list-actions .project-filter-bar select { max-width: 96px; }
    .project-list-actions .badge { flex: 0 0 auto; white-space: nowrap; }
    .mini-btn.warn { border-color: #fbd38d; background: #fffaf1; color: #b45309; }
    .mini-btn.warn:hover { border-color: #f59e0b; color: #92400e; }
    .batch-action-note { font-size: 11.5px; color: #8494ad; white-space: nowrap; flex: 0 0 auto; }
    @media (max-width: 900px) {
      .project-list-panel .project-list-actions { flex-wrap: wrap; overflow-x: visible; }
      .project-list-actions .project-filter-bar { flex: 1 1 100%; justify-content: flex-start; }
      .project-filter-bar input[type="search"] { width: 100%; max-width: none; }
    }

    .pagination-size { display: inline-flex; align-items: center; gap: 4px; }
    .pagination-size-label { font-size: 12.5px; color: #5b6982; margin-right: 2px; }
    .pagination-bar .size-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 9px;
      border: 1px solid var(--line, #e3e8f0); border-radius: 999px; background: #fff; color: #46536b;
      font-size: 12.5px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
    .pagination-bar .size-btn:hover { border-color: var(--accent, #3b82f6); color: var(--accent, #3b82f6); }
    .pagination-bar .size-btn.is-active { background: var(--accent, #3b82f6); border-color: var(--accent, #3b82f6);
      color: #fff; }
    .pagination-jump { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #5b6982; }
    .pagination-jump input[type="number"] { width: 62px; height: 28px; padding: 0 6px; text-align: center;
      border: 1px solid var(--line, #e3e8f0); border-radius: 8px; background: #fff; font-size: 12.5px;
      font-variant-numeric: tabular-nums; }
    /* 搜索 + 筛选条：排在批量操作区内（一行工具栏的组成部分，见上方 .project-list-actions 规则） */
    .project-filter-bar { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
    .project-filter-bar input[type="search"] { height: 30px; width: 150px; min-width: 90px; max-width: 40vw;
      padding: 0 10px; border: 1px solid var(--line, #e3e8f0); border-radius: 8px; font-size: 12.5px;
      background: #fff; }
    .project-filter-bar select { height: 30px; padding: 0 6px; border: 1px solid var(--line, #e3e8f0);
      border-radius: 8px; font-size: 12.5px; background: #fff; max-width: 120px; }
    @media (max-width: 900px) {
      .project-filter-bar { flex-wrap: wrap; }
      .project-filter-bar input[type="search"] { width: 100%; max-width: none; }
    }
    /* 每页数量下拉框（用户要求：下拉选择框替代一排链接按钮） */
    .pagination-bar .page-size-select { height: 28px; padding: 0 6px; border: 1px solid var(--line, #e3e8f0);
      border-radius: 8px; background: #fff; color: #33415c; font-size: 12.5px; font-weight: 600;
      font-variant-numeric: tabular-nums; cursor: pointer; }
    .pagination-bar .page-size-select:hover { border-color: var(--accent, #3b82f6); }
    .list-sync-hint { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
      border: 1px solid #ffd9c2; background: #fff7ef; color: #9a5b2d; font-size: 12.5px; font-weight: 600; }
    .list-sync-hint[hidden] { display: none !important; }
    .list-sync-hint a { color: #f2601f; font-weight: 700; text-decoration: underline; }
    /* 耗时区在无内容时真的隐藏：.project-elapsed 的 display:flex 会盖掉 [hidden] 的 display:none，
       曾导致容器外的残留片段可见（已修） */
    .project-elapsed[hidden] { display: none !important; }
    .project-elapsed .project-elapsed-total:empty,
    .project-elapsed .project-elapsed-stage:empty { display: none; }
    @media (max-width: 720px) {
      .pagination-bar { padding: 8px 10px; }
      .pagination-left, .pagination-right { width: 100%; justify-content: space-between; }
    }
  </style>
  <script>
    /* 带货文案生成配置：从本机启动器读取（规则文本 + 多角色卡），提交任务前必然就绪 */
    window.AUTO_BRIEF_RULES = "";
    window.AUTO_BRIEF_CARD = null;
    window.AUTO_BRIEF_CARDS = null;
    (function () {
      var attempts = 0;
      function loadConfig() {
        fetch("http://127.0.0.1:8900/get-config", { cache: "no-store" })
          .then(function (r) { return r.json(); })
          .then(function (j) {
            if (j && j.ok) {
              window.AUTO_BRIEF_RULES = String(j.auto_brief_rules || "");
              try { window.AUTO_BRIEF_CARD = j.auto_brief_card ? JSON.parse(j.auto_brief_card) : null; } catch (e) {}
              try { window.AUTO_BRIEF_CARDS = j.auto_brief_cards ? JSON.parse(j.auto_brief_cards) : null; } catch (e) {}
              fillBriefModeSelect();
              return;
            }
            retry();
          })
          .catch(function () { retry(); });
      }
      function retry() {
        attempts++;
        if (attempts >= 5) return; /* 辅助服务长期不可用时不反复打扰，页面其余功能不受影响 */
        setTimeout(loadConfig, 2000);
      }
      loadConfig();
    })();
    function fillBriefModeSelect() {
      var sel = document.getElementById("autoBriefModeSelect");
      if (!sel) return;
      var cfg = window.AUTO_BRIEF_CARDS;
      var opts = [];
      if (cfg && cfg.enabled && cfg.cards && cfg.cards.length) {
        opts.push('<option value="none">🚫 不使用角色卡（系统默认提示词）</option>');
        opts.push('<option value="random">🎭 智能随机（在可用角色间随机）</option>');
        cfg.cards.forEach(function (c) {
          if (c.enabled === false) return;
          opts.push('<option value="' + c.id + '">' + (c.platform && c.platform !== "通用" ? "[" + c.platform + "] " : "") + (c.name || "未命名卡") + '</option>');
        });
      }
      if (opts.length) {
        sel.innerHTML = opts.join("");
        sel.hidden = false;
        try {
          var saved = localStorage.getItem("tkaiAutoBriefMode");
          if (saved && sel.querySelector('option[value="' + saved + '"]')) sel.value = saved;
        } catch (e) {}
        sel.addEventListener("change", function () {
          try { localStorage.setItem("tkaiAutoBriefMode", sel.value); } catch (e) {}
        });
      } else {
        sel.hidden = true;
      }
    }
    function initYdsUserBox() {
      var AUX = "http://127.0.0.1:8900";
      var box = document.getElementById("ydsUserBox");
      if (!box) return;
      var btn = document.getElementById("ydsUserBtn");
      var menu = document.getElementById("ydsUserMenu");
      function esc(s) {
        return String(s == null ? "" : s).replace(/[&<>"']/g, function (c) {
          return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
        });
      }
      function fmtExpire(v) {
        v = String(v || "").trim();
        if (!v || v.indexOf("0000") === 0) return "永久有效";
        return v.replace("T", " ").slice(0, 16);
      }
      function fmtStatus(v) {
        v = String(v || "").trim();
        if (!v || v === "0" || v === "1" || v === "正常" || v === "正常使用") return "正常";
        return v;
      }
      function fill(u) {
        if (!u) return;
        var name = String(u.name || u.username || "-");
        var rank = String(u.rank || "");
        var points = (function (v) {
          v = String(v == null ? "" : v).trim();
          if (v === "") return "-";
          var n = parseFloat(v);
          return isNaN(n) ? v : n.toFixed(2);
        })(u.points);
        document.getElementById("ydsUname").textContent = name;
        document.getElementById("ydsAvatar").textContent = name.charAt(0).toUpperCase();
        document.getElementById("ydsRank").textContent = rank;
        document.getElementById("ydsPointsBadge").textContent = "💰 " + points;
        document.getElementById("yudName").textContent = name + (rank ? " · " + rank : "");
        document.getElementById("yudAccount").textContent = "账号：" + String(u.username || "-");
        document.getElementById("yudPoints").textContent = points;
        document.getElementById("yudExpire").textContent = fmtExpire(u.expire_time);
        document.getElementById("yudStatus").textContent = fmtStatus(u.status);
      }
      btn.addEventListener("click", function (ev) {
        ev.stopPropagation();
        menu.hidden = !menu.hidden;
      });
      document.addEventListener("click", function (ev) {
        if (!box.contains(ev.target)) menu.hidden = true;
      });
      document.getElementById("yudLogoutBtn").addEventListener("click", function () {
        if (!window.confirm("确定退出登录吗？退出后系统将关闭并返回登录页。")) return;
        var b = this;
        b.disabled = true; b.textContent = "正在退出…";
        fetch(AUX + "/yds-logout", { method: "POST" })
          .catch(function () {})
          .finally(function () { location.href = AUX + "/yds-login"; });
      });
      function refresh() {
        fetch(AUX + "/yds-userinfo", { cache: "no-store" })
          .then(function (r) { return r.json(); })
          .then(function (j) {
            if (j && j.ok && j.user) {
              fill(j.user);
              var old = menu.querySelector(".yud-stale");
              if (old) old.remove();
              if (j.stale) {
                var tip = document.createElement("div");
                tip.className = "yud-stale";
                tip.textContent = "（当前为登录时缓存，服务器暂不可达）";
                menu.insertBefore(tip, menu.querySelector(".yud-logout"));
              }
            }
          }).catch(function () {});
      }
      fetch(AUX + "/yds-status", { cache: "no-store" })
        .then(function (r) { return r.json(); })
        .then(function (j) {
          if (j && j.ok && j.logged_in) {
            fill(j);
            refresh();
            window.setInterval(refresh, 300000);
          } else {
            document.getElementById("ydsUname").textContent = "未登录";
          }
        }).catch(function () {
          document.getElementById("ydsUname").textContent = "未登录";
        });
    }
    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", initYdsUserBox);
    } else {
      initYdsUserBox();
    }
  </script>

  {% set selected_creation_mode = request.form.get('creation_mode') or selected_creation_mode or 'clone' %}
  {% set selected_aspect_ratio = request.form.get('aspect_ratio') or selected_aspect_ratio or '9:16' %}
  {% set selected_h3_resolution = request.form.get('h3_resolution') or selected_h3_resolution or '480p' %}
  <section class="ingest-panel creator-ingest-panel">
    <form
      class="creator-form"
      method="post"
      action="{{ url_for('create_project') }}"
      enctype="multipart/form-data"
      data-loading="正在创建项目并保存创作要求..."
      data-creator-form
    >
      <input type="hidden" name="creation_request_id" value="{{ creation_request_id }}">
      <input type="hidden" name="source_type" value="upload">
      <div class="creator-form-head">
        <div class="creator-form-head-copy">
          <div class="brand-kicker">{{ brand.home_title }}</div>
          <h2>创建你的AI视频项目</h2>
        </div>
        <div class="creator-head-actions">
          <a class="creator-head-status" href="{{ url_for('config_page') }}" title="快速打开配置中心">⚙️ 创作配置</a>
          <div class="yds-user-box" id="ydsUserBox">
            <button type="button" class="yds-user-btn" id="ydsUserBtn">
              <span class="yds-avatar" id="ydsAvatar">?</span>
              <span class="yds-uname" id="ydsUname">加载中…</span>
              <span class="yds-rank" id="ydsRank"></span>
              <span class="yds-points-badge" id="ydsPointsBadge" title="积分余额">💰 -</span>
              <span class="yds-caret">▾</span>
            </button>
            <div class="yds-user-menu" id="ydsUserMenu" hidden>
              <div class="yud-head">
                <div class="yud-name" id="yudName">-</div>
                <div class="yud-sub"><span id="yudAccount">-</span></div>
              </div>
              <div class="yud-points">
                <span class="yud-points-label">积分余额</span>
                <b class="yud-points-num" id="yudPoints">-</b>
              </div>
              <div class="yud-row"><span>到期时间</span><b id="yudExpire">-</b></div>
              <div class="yud-row"><span>账号状态</span><b id="yudStatus">-</b></div>
              <button type="button" class="yud-support" id="yudLedgerBtn">我的账单 / 用量</button>
              <button type="button" class="yud-support" id="yudSupportBtn" data-support-open>遇到问题？提交工单</button>
              <button type="button" class="yud-logout" id="yudLogoutBtn">退出登录</button>
            </div>
          </div>
        </div>
      </div>

      <div class="creator-field creator-field-emphasis">
        <div class="creator-step-label"><span>1</span><strong>选择创作方式</strong></div>
        <div class="source-type-options creation-mode-options">
          <label class="source-type-option">
            <input type="radio" name="creation_mode" value="clone" {% if selected_creation_mode not in ['adapt', 'original'] %}checked{% endif %} data-creation-mode>
            <span><b class="creator-option-icon">01</b><strong>一键复刻</strong><small>还原原片镜头、节奏与视听表达</small></span>
          </label>
          <label class="source-type-option">
            <input type="radio" name="creation_mode" value="adapt" {% if selected_creation_mode == 'adapt' %}checked{% endif %} data-creation-mode>
            <span><b class="creator-option-icon">02</b><strong>一键改编</strong><small>保留剧情结构，自然植入产品卖点</small></span>
          </label>
          <label class="source-type-option">
            <input type="radio" name="creation_mode" value="original" {% if selected_creation_mode == 'original' %}checked{% endif %} data-creation-mode>
            <span><b class="creator-option-icon">03</b><strong>一键创作</strong><small>从创意脚本开始生成完整商业短片</small></span>
          </label>
        </div>
      </div>

      <div data-source-workflow {% if selected_creation_mode == 'original' %}hidden{% endif %}>
      <div class="creator-field">
        <div class="creator-step-label"><span>2</span><strong>上传原视频</strong></div>
        <div data-source-panel="upload">
          <div class="source-upload-stage">
            <label class="media-upload-placeholder source-upload-placeholder" for="homeVideoUpload" data-source-video-placeholder>
              <span class="media-upload-icon">＋</span>
              <strong>点击上传原视频</strong>
              <small>支持常见视频格式，仅上传一个原视频</small>
              <span class="selected-file-summary" data-file-summary="source">尚未选择文件</span>
            </label>
            <div class="source-video-selection" data-source-video-selection hidden>
              <video controls preload="metadata" data-source-video-player></video>
              <div class="source-video-selection-bar">
                <div>
                  <strong data-source-video-name></strong>
                  <small data-source-video-size></small>
                </div>
                <button class="upload-remove-btn" type="button" data-remove-source-video aria-label="删除已选原视频">删除视频</button>
              </div>
            </div>
          </div>
          <input
            id="homeVideoUpload"
            class="hidden-file-input"
            type="file"
            name="video_file"
            accept="video/*"
            data-source-input="upload"
            data-source-video-input
          >
        </div>
      </div>
      </div>

      <div class="creator-field" data-creation-panel="original" {% if selected_creation_mode != 'original' %}hidden{% endif %}>
        <div class="creator-step-label" style="display:flex;align-items:center;gap:8px;"><span>2</span><strong>创作剧情脚本</strong><button type="button" class="mini-btn" data-clear-story-brief title="清空创作剧情脚本">清空</button></div>
        <textarea
          class="brief-textarea"
          name="original_story_brief"
          data-original-input
          {% if selected_creation_mode == 'original' %}required{% else %}disabled{% endif %}
          placeholder="请输入原创剧情设想或已有剧情脚本。建议包含：主要人物与关系、开场钩子、核心冲突、剧情升级、产品怎样自然参与、反转和结局；台词可详细也可只写关键句。"
        >{{ request.form.get('original_story_brief', '') }}</textarea>
        <div style="margin-top:12px;">
          <label style="display:flex; align-items:center; gap:8px; margin-bottom:6px;">
            <strong>商品描述 / 卖点（选填）</strong>
            <button type="button" class="mini-btn" data-clear-product-description title="清空商品描述">清空</button>
          </label>
          <textarea
            class="short brief-textarea"
            name="product_description"
            data-original-input
            data-product-description
            {% if selected_creation_mode != 'original' %}disabled{% endif %}
            placeholder="填写商品名称、卖点、目标人群等，帮助智能体更准确地围绕你的产品创作专属带货剧情。"
          >{{ request.form.get('product_description', '') }}</textarea>
        </div>
        <div class="creator-auto-brief-card" style="margin-top:12px; border:1.5px solid #ffd9b0; background:linear-gradient(135deg,#fff8f0 0%,#fffdf9 100%); border-radius:12px; padding:10px 14px 9px;">
          <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
            <input type="checkbox" id="autoGenerateBriefCheckbox" data-auto-brief-checkbox="" style="width:18px; height:18px; flex:0 0 auto; accent-color:#ff6a2e; cursor:pointer; margin:0;">
            <label for="autoGenerateBriefCheckbox" style="cursor:pointer; margin:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:0;">
              <strong style="font-size:14px; color:#1f2a3d; white-space:nowrap;">智能自动写剧情（推荐）</strong>
              <small class="muted" style="font-size:12px; line-height:1.5; min-width:0;">勾选后提交任务时，智能体自动按<b style="color:#e2571f;">产品图 + 商品描述</b>写好剧情（爆款套路，每次不同），全程零手写；不勾选可点右侧按钮手动生成，生成后可自行编辑</small>
            </label>
          </div>
          <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:7px;">
            <select id="autoBriefModeSelect" hidden title="选择文案生成的角色模式" style="height:30px;padding:0 8px;border:1px solid #d5dce8;border-radius:8px;font-size:12.5px;font-weight:600;color:#1f2a3d;background:#fff;max-width:300px;"></select>
            <button type="button" class="btn secondary" id="autoBriefButton" data-auto-brief style="flex:0 0 auto; height:30px; font-size:12.5px;">✨ 按产品图片+描述生成带货剧情（可编辑）</button>
            <button type="button" class="mini-btn" data-brief-cancel hidden title="取消本次生成">取消</button>
            <span class="muted" data-auto-brief-note style="min-width:0; font-size:12px; line-height:1.5;">点击按钮后自动生成剧情要求，生成后可编辑再提交</span>
          </div>
        </div>
      </div>

      <div class="creator-field" data-creation-panel="adapt" {% if selected_creation_mode != 'adapt' %}hidden{% endif %}>
        <div class="creator-step-label" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;"><span>3</span><strong>广告植入要求</strong><i class="muted" style="font-style:normal;font-weight:400;font-size:12px;">可上传多张图（产品/人物/场景），数量不限；视觉理解最多取前 9 张。每张图下方选「产品 / 人物 / 场景」：标了几张人物图，成片里就正好有几个人物，外形照对应那张人物图来。</i></div>
        <textarea
          class="short brief-textarea"
          name="ad_content"
          {% if selected_creation_mode == 'adapt' %}required{% else %}disabled{% endif %}
          data-adapt-input
          placeholder="这里填写你想要推广的产品/品牌/服务名称，比如：我是广东东莞一家做彩钢板的源头工厂，品牌名称是龙辉；我想要生成一个黄焖鸡美食达人探店视频。"
        >{{ request.form.get('ad_content', '') }}</textarea>

        <div class="product-image-grid" data-product-image-gallery>
          <label class="product-image-add-card" for="creativeReferenceMedia" data-product-image-add>
            <span class="media-upload-icon">＋</span>
            <strong>添加产品图片</strong>
            <small>可继续上传</small>
            <span class="selected-file-summary" data-product-image-count>尚未选择</span>
          </label>
        </div>
        <input
          id="creativeReferenceMedia"
          class="hidden-file-input"
          type="file"
          name="reference_media"
          accept="image/*"
          multiple
          data-product-image-input
          data-adapt-input
          {% if selected_creation_mode != 'adapt' %}disabled{% endif %}
        >
      </div>

      <div class="creator-field" data-creation-panel="original" {% if selected_creation_mode != 'original' %}hidden{% endif %}>
        <div class="creator-step-label" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;"><span>3</span><strong>上传图片（产品 / 人物 / 场景，选填）</strong>
          <label style="display:flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px;margin:0;white-space:nowrap;">
            <span>统一设置图片为：</span>
            <select data-image-role-bulk title="一键把当前所有图片的角色统一设为所选类型" style="height:28px;padding:0 8px;border:1px solid #d5dce8;border-radius:8px;font-size:12.5px;font-weight:600;color:#1f2a3d;background:#fff;">
              <option value="">请选择</option>
              <option value="product">产品</option>
              <option value="character">人物</option>
              <option value="scene">场景</option>
            </select>
          </label>
          <i class="muted" style="font-style:normal;font-weight:400;font-size:12px;">可上传多张，数量不限；视觉理解最多取前 9 张。每张图下方可单独改角色：加几张人物图，成片里就正好有几个人物，外形照对应那张人物图来。</i></div>
        <div class="product-image-grid" data-product-image-gallery>
          <label class="product-image-add-card" for="originalReferenceMedia" data-product-image-add>
            <span class="media-upload-icon">＋</span>
            <strong>添加产品图片</strong>
            <small>可继续上传</small>
            <span class="selected-file-summary" data-product-image-count>尚未选择</span>
          </label>
        </div>
        <input
          id="originalReferenceMedia"
          class="hidden-file-input"
          type="file"
          name="reference_media"
          accept="image/*"
          multiple
          data-product-image-input
          data-original-input
          {% if selected_creation_mode != 'original' %}disabled{% endif %}
        >
        <div style="margin-top:10px;background:#f7f9fc;border:1px solid #e3e8f0;border-radius:10px;padding:8px 12px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;">
          <label class="checkbox-row" style="display:flex;align-items:center;gap:5px;font-weight:600;margin:0;">
            <input type="checkbox" id="batchModeAll" data-batch-mode="all" checked>
            <span>全部合并为 1 个任务</span>
          </label>
          <label class="checkbox-row" style="display:flex;align-items:center;gap:5px;font-weight:600;margin:0;">
            <input type="checkbox" id="batchModePerImage" data-batch-mode="per-image">
            <span>每张图 1 个任务</span>
          </label>
          <label style="display:flex;align-items:center;gap:5px;font-weight:600;margin:0;">
            <span>次数</span>
              <input id="batchRunCount" type="number" min="1" max="200" step="1" value="{{ selected_batch_run_count }}" style="width:47px;height:28px;font-size:12px;text-align:center;" data-original-input>
          </label>
          <span class="muted" style="font-weight:400;">(每任务重复入队，生成不同成片)</span>
          <label style="display:flex;align-items:center;gap:5px;font-weight:600;margin:0;">
            <span>导出文件名</span>
              <input id="exportNameInput" type="text" maxlength="80" placeholder="留空用默认名" style="width:200px;height:28px;font-size:12px;" data-original-input>
          </label>
          <label style="display:flex;align-items:center;gap:5px;font-weight:600;margin:0;" title="本批成片输出到哪个文件夹；留空用设置里配置的默认输出目录（EXPORT_OUT_DIR），再默认 out 目录">
            <span>输出目录</span>
              <input id="exportDirInput" type="text" maxlength="260" placeholder="留空用设置里的默认输出目录" style="width:230px;height:28px;font-size:12px;" data-original-input>
          </label>
          <label class="checkbox-row" style="display:flex;align-items:center;gap:5px;font-weight:600;margin:0;">
            <input type="checkbox" id="exportUseImageName">
            <span>用图片文件名</span>
          </label>
          <span class="muted" style="font-weight:400;">成片完成自动加 _时间戳 复制；目录优先级：本框 &gt; 设置默认输出目录 &gt; out 目录</span>
        </div>
      </div>

      <div class="creator-spec-submit-row" style="display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;">
      <div class="creator-field creator-spec-section" style="flex:1 1 460px;margin:0;min-width:0;">
        <div class="creator-step-label" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
          <span data-h3-step-number>{% if selected_creation_mode == 'clone' %}3{% else %}4{% endif %}</span><strong>成片规格和视频生成参数</strong>
          <div class="creator-video-plan" data-video-plan-hint
               style="font-size:12.5px;line-height:1.7;color:#4a5a75;background:#f6f9ff;border:1px solid #e2eaf7;border-radius:8px;padding:6px 10px;display:none;white-space:normal;overflow-wrap:anywhere;flex:0 1 auto;min-width:0;"></div>
        </div>
        <div class="creator-spec-grid creator-spec-grid-four">
          <div class="creator-spec-mode-fields" data-creation-panel="clone" {% if selected_creation_mode in ['adapt', 'original'] %}hidden{% endif %}>
            <div>
              <label>目标视频时长</label>
              <div class="creator-spec-readonly">跟随原视频</div>
            </div>
            <div>
              <label>目标画幅</label>
              <div class="aspect-options">
                <label class="duration-option">
                  <input type="radio" name="aspect_ratio" value="9:16" {% if selected_aspect_ratio != '16:9' %}checked{% endif %} data-clone-input {% if selected_creation_mode in ['adapt', 'original'] %}disabled{% endif %}>
                  <span>竖屏 9:16</span>
                </label>
                <label class="duration-option">
                  <input type="radio" name="aspect_ratio" value="16:9" {% if selected_aspect_ratio == '16:9' %}checked{% endif %} data-clone-input {% if selected_creation_mode in ['adapt', 'original'] %}disabled{% endif %}>
                  <span>横屏 16:9</span>
                </label>
              </div>
            </div>
          </div>
          <div class="creator-spec-mode-fields" data-creation-panel="adapt" {% if selected_creation_mode != 'adapt' %}hidden{% endif %}>
            <div>
            <label for="homeVideoDuration">目标视频时长（秒）</label>
            <input
              id="homeVideoDuration"
              type="number"
              name="video_duration"
              min="1"
              step="1"
              value="{{ request.form.get('video_duration', '') }}"
              placeholder="不填写则与原视频一致"
              data-adapt-input
              {% if selected_creation_mode != 'adapt' %}disabled{% endif %}
            >
            </div>
            <div>
              <label>目标画幅</label>
              <div class="aspect-options">
                <label class="duration-option">
                  <input type="radio" name="aspect_ratio" value="9:16" {% if selected_aspect_ratio != '16:9' %}checked{% endif %} data-adapt-input {% if selected_creation_mode != 'adapt' %}disabled{% endif %}>
                  <span>竖屏 9:16</span>
                </label>
                <label class="duration-option">
                  <input type="radio" name="aspect_ratio" value="16:9" {% if selected_aspect_ratio == '16:9' %}checked{% endif %} data-adapt-input {% if selected_creation_mode != 'adapt' %}disabled{% endif %}>
                  <span>横屏 16:9</span>
                </label>
              </div>
            </div>
          </div>
          <div class="creator-spec-mode-fields" data-creation-panel="original" {% if selected_creation_mode != 'original' %}hidden{% endif %}>
            <div>
              <label for="originalVideoDuration">目标视频时长（秒）</label>
              <input id="originalVideoDuration" type="number" name="video_duration" min="5" step="1" value="{{ selected_video_duration }}" style="text-align:center;max-width:154px;" data-original-input {% if selected_creation_mode != 'original' %}disabled{% endif %} required>
            </div>
            <div>
              <label>目标画幅</label>
              <div class="aspect-options">
                <label class="duration-option"><input type="radio" name="aspect_ratio" value="9:16" {% if selected_aspect_ratio != '16:9' %}checked{% endif %} data-original-input {% if selected_creation_mode != 'original' %}disabled{% endif %}><span>竖屏 9:16</span></label>
                <label class="duration-option"><input type="radio" name="aspect_ratio" value="16:9" {% if selected_aspect_ratio == '16:9' %}checked{% endif %} data-original-input {% if selected_creation_mode != 'original' %}disabled{% endif %}><span>横屏 16:9</span></label>
              </div>
            </div>
          </div>
          <div class="creator-output-resolution">
            <label for="projectH3Resolution" title="竖屏对应 480×864 / 768×1344">输出分辨率</label>
            <select id="projectH3Resolution" name="h3_resolution" required title="竖屏对应 480×864 / 768×1344">
              <option value="480p" {% if selected_h3_resolution != '768p' %}selected{% endif %}>480p（864×480）</option>
              <option value="768p" {% if selected_h3_resolution == '768p' %}selected{% endif %}>768p（1344×768）</option>
            </select>
          </div>
          <div class="creator-enhance" style="display:flex;align-items:center;gap:8px;">
            <label for="projectEnhanceResolution" title="成片拼接后自动做一道超分，画面内容不变、音轨保留">画质增强</label>
            <select id="projectEnhanceResolution" name="enhance_resolution" title="成片拼接后自动超分到 720p/1080p（480p 生成更省显存）">
              <option value="" {% if selected_enhance_resolution not in ['720p','1080p','2K','4K'] %}selected{% endif %}>不增强（480p）</option>
              <option value="720p" {% if selected_enhance_resolution == '720p' %}selected{% endif %}>增强到 720p</option>
              <option value="1080p" {% if selected_enhance_resolution == '1080p' %}selected{% endif %}>增强到 1080p</option>
              {% if feat_allow_2k %}<option value="2K" {% if selected_enhance_resolution == '2K' %}selected{% endif %}>增强到 2K（1440p）</option>{% endif %}
              {% if feat_allow_4k %}<option value="4K" {% if selected_enhance_resolution == '4K' %}selected{% endif %}>增强到 4K（2160p）</option>{% endif %}
            </select>
          </div>
          <div class="creator-execmode" style="display:flex;align-items:center;gap:8px;">
            <label for="comfyuiExecModeSelect" title="生成镜头视频用哪台 ComfyUI：智能=远程可达就用远程，否则本机；地址在配置页「字幕与水印→运行与远程」设置">ComfyUI</label>
            <select id="comfyuiExecModeSelect" name="comfyui_exec_mode" title="生成镜头视频用哪台 ComfyUI：智能=远程可达就用远程，否则本机；地址在配置页设置">
              <option value="auto" {% if selected_comfyui_exec_mode != 'remote' and selected_comfyui_exec_mode != 'local' %}selected{% endif %}>智能分配</option>
              <option value="local" {% if selected_comfyui_exec_mode == 'local' %}selected{% endif %}>本机</option>
              {% if feat_allow_remote %}<option value="remote" {% if selected_comfyui_exec_mode == 'remote' %}selected{% endif %}>远程</option>{% endif %}
            </select>
          </div>
          <div style="margin-top:8px;font-size:12px;color:#0f7b3d;background:#f0faf4;border:1px solid #cdebd8;border-radius:8px;padding:6px 10px;">
            ✓ 计费承诺：编排失败全额退积分，生成失败免费重跑，不出片不扣分。
          </div>
          <div class="creator-postprocess" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
            <label class="duration-option" style="padding:0;border:none;" title="成片后自动识别音轨烧录字幕（样式用配置页「字幕与水印」里的设置）">
              <input type="checkbox" id="withSubtitlesCheckbox" name="with_subtitles" value="1" checked>
              <span style="white-space:nowrap;">增加字幕</span>
            </label>
            <label class="duration-option" style="padding:0;border:none;" title="成片后自动烧录水印（样式用配置页「字幕与水印」里的设置）">
              <input type="checkbox" id="withWatermarkCheckbox" name="with_watermark" value="1" checked>
              <span style="white-space:nowrap;">增加水印</span>
            </label>
            <select id="watermarkModeSelect" name="watermark_mode" title="水印模式（文字/位置/透明度等样式在配置页「字幕与水印」里设置）" style="width:auto;min-width:120px;height:36px;display:none;">
              <option value="single">单点水印</option>
              <option value="marquee">漂移水印</option>
              <option value="both" selected>单点 + 漂移</option>
            </select>
          </div>
          <div class="creator-submit-actions" style="display:flex;gap:8px;">
            <button class="btn secondary" type="submit" name="workflow_mode" value="one_click" data-loading="正在保存项目并加入一键成片队列，完成后将自动返回项目列表..." {% if one_click_task_limit_reached %}disabled title="当前登录码的一键成片后台任务已达到上限 {{ one_click_task_limit }} 个" style="cursor: not-allowed;"{% endif %}>{{ '一键成片（名额已满）' if one_click_task_limit_reached else '一键成片' }}</button>
            <button class="btn" type="submit" name="workflow_mode" value="create" data-create-project-label>创建项目并生成剧情镜头脚本</button>
          </div>
        </div>
      </div>
      </div>
    </form>

  </section>

  {% if error %}
    <pre class="notice error">{{ error }}</pre>
  {% endif %}
  {% if message %}
    <div class="notice success">{{ message }}</div>
  {% endif %}
  <div class="notice success" data-home-notice hidden></div>

  {% set project_groups = project_groups|default([], true) %}
  {% set selected_group = selected_group|default('all', true) %}
  {% set selected_group_name = selected_group_name|default('全部项目', true) %}
  {% set all_projects = all_projects|default(projects, true) %}
  {% set all_project_count = all_project_count|default(projects|length) %}
  {% set ungrouped_project_count = ungrouped_project_count|default(projects|length) %}
  {# ── 服务端分页上下文（?page=&size=）：变量缺失时按"单页全量"兜底，保证老调用不炸 ── #}
  {% set page_projects = page_projects|default(projects, true) %}
  {% set page = page|default(1) %}
  {% set page_count = page_count|default(1) %}
  {% set page_size = page_size|default(page_projects|length) %}
  {% set size_param = size_param|default('20') %}
  {% set page_size_options = page_size_options|default(['20', '50', '100', '500', '1000', 'all']) %}
  {% set page_size_labels = page_size_labels|default({}) %}
  {% set pagination_enabled = pagination_enabled|default(true) %}
  {% set total_count = total_count|default(page_projects|length) %}
  {# 轮询用的 URL：优先服务端给的（含当前页），老调用缺变量时按当前分组/每页数量现算，确保可序列化。
     轮询抓卡片必须带上当前搜索/筛选条件（q/mode/status），否则筛选页里补插的卡片会是不匹配的项目。 #}
  {% set _poll_qs = (('q=' ~ (filter_q|urlencode)) if filter_q else '') ~
                     (('&mode=' ~ filter_mode) if filter_mode else '') ~
                     (('&status=' ~ filter_status) if filter_status else '') %}
  {% set home_page_url = home_page_url|default(url_for('home', group=selected_group, size=size_param, page=page) ~ (('&' ~ _poll_qs) if _poll_qs else '')) %}
  {% set home_first_page_url = home_first_page_url|default(url_for('home', group=selected_group, size=size_param, page=1) ~ (('&' ~ _poll_qs) if _poll_qs else '')) %}

  {# 分页控件（列表上下各一处）：首页 / 上一页 / 下一页 / 末页 + 每页数量 + 跳到指定页。
     每页数量用下拉选择框（用户要求）；搜索/筛选参数在切换时透传，不让结果跳变。 #}
  {% macro render_pagination_bar(where) %}
  {% set _f_qs = (('q=' ~ (filter_q|urlencode)) if filter_q else '') ~
                 (('&mode=' ~ filter_mode) if filter_mode else '') ~
                 (('&status=' ~ filter_status) if filter_status else '') %}
  <div class="pagination-bar" data-pagination-bar="{{ where }}">
    <div class="pagination-left">
      {% if pagination_enabled and page_count > 1 %}
      <nav class="pagination-pages" aria-label="项目列表分页">
        {% if page > 1 %}
          <a class="page-btn" href="{{ url_for('home', group=selected_group, size=size_param, page=1) }}{{ ('&' ~ _f_qs) if _f_qs }}" data-page-first>« 首页</a>
          <a class="page-btn" href="{{ url_for('home', group=selected_group, size=size_param, page=page - 1) }}{{ ('&' ~ _f_qs) if _f_qs }}" data-page-prev rel="prev">‹ 上一页</a>
        {% else %}
          <span class="page-btn is-disabled" aria-disabled="true">« 首页</span>
          <span class="page-btn is-disabled" aria-disabled="true">‹ 上一页</span>
        {% endif %}
        {% if page < page_count %}
          <a class="page-btn" href="{{ url_for('home', group=selected_group, size=size_param, page=page + 1) }}{{ ('&' ~ _f_qs) if _f_qs }}" data-page-next rel="next">下一页 ›</a>
          <a class="page-btn" href="{{ url_for('home', group=selected_group, size=size_param, page=page_count) }}{{ ('&' ~ _f_qs) if _f_qs }}" data-page-last>末页 »</a>
        {% else %}
          <span class="page-btn is-disabled" aria-disabled="true">下一页 ›</span>
          <span class="page-btn is-disabled" aria-disabled="true">末页 »</span>
        {% endif %}
      </nav>
      {% endif %}
      <span class="pagination-info" data-page-info>{% if pagination_enabled and page_count > 1 %}第 <strong data-page-current>{{ page }}</strong>/<strong data-page-count>{{ page_count }}</strong> 页 · {% endif %}共 <strong data-page-total>{{ total_count }}</strong> 个项目{% if pagination_enabled and total_count %}（本页 {{ page_projects|length }} 个）{% endif %}</span>
    </div>
    <div class="pagination-right">
      <div class="pagination-size"><label class="pagination-size-label" for="pageSizeSelect-{{ where }}">每页</label><select class="page-size-select" id="pageSizeSelect-{{ where }}" data-page-size-select aria-label="每页显示数量">{% for opt in page_size_options %}<option value="{{ opt }}"{% if opt == size_param %} selected{% endif %}>{{ page_size_labels.get(opt, '全部' if opt == 'all' else opt) }}</option>{% endfor %}</select></div>
    </div>
  </div>
  {% endmacro %}

  <section class="panel project-list-panel">
    <div class="panel-head">
      <div class="panel-title">
        <h2>项目列表 · <span data-selected-group-name>{{ selected_group_name }}</span></h2>
        <div class="muted">按分组查看和整理项目；列表按服务端分页展示（每页数量与页码见列表上下方），也可勾选本页项目批量删除。</div>
      </div>
      <div class="project-list-actions" data-project-batch-actions>
        <label class="project-select-all" for="projectSelectAll">
          <input id="projectSelectAll" type="checkbox" data-project-select-all>
          <span>全选</span>
        </label>
        {# 批量中断（用户要求）：勾选里含运行中/排队中任务时可用，AJAX 提交只刷新列表 #}
        <button class="mini-btn warn" type="button" disabled data-batch-cancel-button
                title="中断所选的运行中/排队中任务（已完成的阶段结果会保留）">
          中断所选<span data-selected-cancel-count></span>
        </button>
        {# 中断所有任务（用户要求）：不限勾选，中断当前列表全部运行中/排队中任务 #}
        <button class="mini-btn warn" type="button" data-cancel-all-button
                title="中断当前列表中全部运行中/排队中任务（不限勾选，已完成的阶段结果会保留）">
          中断所有任务
        </button>
      <form id="batchDownloadProjectsForm" method="post" action="{{ url_for('download_projects_batch') }}" data-batch-download-form>
        <button class="mini-btn" type="submit" disabled data-batch-download-button
                title="把所选项目的成片视频打包成 zip 下载（优先字幕水印版 → 超分版 → 拼接版）">
          下载所选视频<span data-selected-download-count></span>
        </button>
      </form>
      <form
        id="batchDeleteProjectsForm"
        method="post"
        action="{{ url_for('delete_projects_batch') }}"
        data-confirm="确定删除选中的项目及其本地数据文件夹吗？此操作不可恢复。"
        data-no-loading="true"
        data-batch-delete-form
      >
        <button class="mini-btn danger" type="submit" disabled data-batch-delete-button>
          删除所选<span data-selected-project-count></span>
        </button>
      </form>
        <button class="mini-btn primary" type="button" disabled data-batch-regenerate-button title="对勾选项目中已完成剧情脚本、但资产图片未完成的（失败/中断）任务，重新触发资产图片生成">
          重新生成所选<span data-selected-regen-count></span>
        </button>
      {# 搜索 + 创作方式/状态筛选（用户要求：标题+图片素材名+项目号模糊搜索；创作方式/生成状态快速筛选）#}
      <form class="project-filter-bar" method="get" action="{{ url_for('home') }}" data-project-filter-form>
        <input type="hidden" name="group" value="{{ selected_group }}">
        <input type="hidden" name="size" value="{{ size_param }}">
        <input type="search" name="q" value="{{ filter_q }}" placeholder="搜索：标题 / 素材名 / 项目号" aria-label="搜索项目"
               title="支持模糊搜索：项目标题、图片素材文件名、项目号（如 20260924-010250）">
        <select name="mode" aria-label="按创作方式筛选" title="按创作方式筛选">
          <option value="">全部方式</option>
          {% for mv, ml in creation_mode_labels.items() %}
          <option value="{{ mv }}"{% if filter_mode == mv %} selected{% endif %}>{{ ml }}</option>
          {% endfor %}
        </select>
        <select name="status" aria-label="按生成状态筛选" title="按生成状态筛选">
          <option value="">全部状态</option>
          {% for sv, sl in filter_status_labels.items() %}
          <option value="{{ sv }}"{% if filter_status == sv %} selected{% endif %}>{{ sl }}</option>
          {% endfor %}
        </select>
        <button class="mini-btn" type="submit">筛选</button>
        {% if filter_q or filter_mode or filter_status %}
        <a class="mini-btn" href="{{ url_for('home', group=selected_group, size=size_param) }}">清除</a>
        {% endif %}
      </form>
        <span class="badge neutral">当前 <span data-visible-project-count>{{ projects|length }}</span> / 共 {% if filter_q or filter_mode or filter_status %}{{ total_count }} 个（已筛选，全部 {{ all_project_count }}）{% else %}{{ all_project_count }} 个项目{% endif %}</span>
      </div>
    </div>
    <div class="panel-body">
      <div class="project-group-workspace">
        <aside class="project-group-sidebar">
          <nav class="project-group-menu" aria-label="项目分组">
            <a class="project-group-menu-item{% if selected_group == 'all' %} is-active{% endif %}" href="{{ url_for('home', group='all', size=size_param, page=1) }}" data-project-group-filter="all" data-group-name="全部项目">
              <span>全部项目</span><strong>{{ all_project_count }}</strong>
            </a>
            <a class="project-group-menu-item{% if selected_group == 'ungrouped' %} is-active{% endif %}" href="{{ url_for('home', group='ungrouped', size=size_param, page=1) }}" data-project-group-filter="ungrouped" data-group-name="未分组">
              <span>未分组</span><strong>{{ ungrouped_project_count }}</strong>
            </a>
            {% for group in project_groups %}
              <a class="project-group-menu-item{% if selected_group == group.id %} is-active{% endif %}" href="{{ url_for('home', group=group.id, size=size_param, page=1) }}" title="{{ group.name }}" data-project-group-filter="{{ group.id }}" data-group-name="{{ group.name }}">
                <span>{{ group.name }}</span><strong>{{ group.project_count }}</strong>
              </a>
            {% endfor %}
          </nav>
          <form class="project-group-create-form" method="post" action="{{ url_for('create_project_group') }}" data-no-loading="true">
            <label for="newProjectGroupName">创建新分组</label>
            <input id="newProjectGroupName" type="text" name="group_name" maxlength="40" placeholder="输入分组名称" required>
            <button class="mini-btn primary" type="submit">添加分组</button>
          </form>
        </aside>
        <div class="project-list-main">
        {# 轮询自动插入失败/新任务不在本页时的提示条（JS 控制显隐，带可点的刷新/回第一页链接） #}
        <div class="list-sync-hint" data-list-sync-hint hidden></div>
        {{ render_pagination_bar('top') }}
        <div class="project-list">
        {% for item in page_projects %}
        <div
          class="project-item{% if item.workflow_active %} is-running{% endif %}{% if item.workflow.status == 'queued' %} is-queued{% endif %}"
          data-project-id="{{ item.id }}"
          {% if item.progress_link %}data-progress-link="{{ item.progress_link }}"{% endif %}
          data-project-group-id="{{ item.group_id or '' }}"
          {% if selected_group == 'ungrouped' and item.group_id %}hidden{% elif selected_group not in ['all', 'ungrouped'] and item.group_id != selected_group %}hidden{% endif %}
          {% if item.workflow_active %}
          data-workflow-card="{{ item.id }}"
          data-workflow-status="{{ item.workflow.status }}"
          {% endif %}
        >
          <label
            class="project-select-control"
            title="勾选后可批量中断 / 批量删除 / 批量下载 / 重新生成"
          >
            <input
              type="checkbox"
              name="project_ids"
              value="{{ item.id }}"
              form="batchDeleteProjectsForm"
              data-project-select
            >
            <span>选择项目</span>
          </label>
          <div class="project-video-preview">
            {% if item.workflow_active %}
              <div class="project-running-preview{% if item.workflow.status == 'queued' %} is-queued{% endif %}">
                <div class="project-running-head">
                  <span class="project-running-label">
                    <i aria-hidden="true"></i>
                    <span data-workflow-label>
                      {% if item.workflow.status == 'queued' %}排队中{% elif item.workflow.status == 'cancelling' %}正在中断{% else %}运行中{% endif %}
                    </span>
                  </span>
                  {% if item.backend_label %}
                  {# 运行中也在状态区标注后端（取自项目记录）；具体阶段文案由服务端动态产出（如"云端视频生成 1/4"） #}
                  <span class="project-running-backend" data-running-backend="{{ item.backend_label }}"
                        title="生成后端：{{ '☁ 云端 ComfyUI' if item.backend_label == 'cloud' else '🖥 本机 ComfyUI' }}（{{ item.backend_url or '地址未记录' }}）"
                        style="margin-left:6px;font-size:11px;padding:1px 7px;border-radius:999px;{% if item.backend_label == 'cloud' %}background:#e8f2ff;color:#1d63d2;border:1px solid #c9defc;{% else %}background:#eef7ee;color:#22713c;border:1px solid #cfe8d4;{% endif %}">{{ '☁ 云端' if item.backend_label == 'cloud' else '🖥 本机' }}</span>
                  {% endif %}
                </div>
                <div class="project-running-visual" aria-hidden="true">
                  <span></span><span></span><span></span>
                </div>
                <div class="project-running-copy">
                  <strong data-workflow-title>{% if item.workflow.status == 'queued' %}等待前序项目完成{% else %}一键成片后台任务{% endif %}</strong>
                  <small data-workflow-detail>{{ item.workflow.detail or '正在准备任务...' }}</small>
                </div>
                <div
                  class="project-progress-track"
                  role="progressbar"
                  aria-label="一键成片进度"
                  aria-valuetext="正在处理"
                  data-workflow-track
                >
                  <span data-workflow-bar></span>
                </div>
                {# 生成过程最后一行（API 阶段的模型思考/正文/状态/重试/错误）：实时显示 + 可点进项目页看完整过程。
                   数据来自 GET /projects/<id>/stream（?tail=1&follow=0），没有日志时不占位。 #}
                <a class="project-stream-last" data-stream-last hidden
                   data-stream-url="/projects/{{ item.id }}/stream"
                   href="{{ url_for('project_detail', project_id=item.id) }}"
                   title="进入项目页查看完整生成过程（实时）">
                  <span class="project-stream-last-kind" data-stream-last-kind>过程</span>
                  <span class="project-stream-last-text" data-stream-last-text>—</span>
                </a>
              </div>
            {% elif item.final_video_url %}
              {# 列表页不自动拉视频流（4K 成片预加载曾占满浏览器 6 连接导致整站卡死）。
                 封面 = 服务端从成片抽帧的真实预览图（~20KB jpg，一次性生成永久复用），
                 点击在弹层里才真正加载视频。抽帧失败时 CSS 渐变底兜底（onerror 移除 img）。 #}
              <button
                class="project-video-thumb"
                type="button"
                data-project-video-src="{{ item.final_video_url }}"
                data-project-video-title="{{ item.name|e }}"
                data-lazy-video="1"
                aria-label="播放最终视频：{{ item.name|e }}"
              >
                {# 封面加载失败自动重试一次（带 cache-bust）：首次请求可能正在服务端抽帧，
                    之前一 404 就 onerror 移除，封面永远显示不出来；重试仍失败才回落渐变底 #}
                <img class="project-video-cover-img" loading="lazy" alt=""
                     src="{{ item.final_video_url.replace('/videos/', '/poster/') }}.poster.jpg"
                     onerror="if(!this.dataset.retry){this.dataset.retry='1';this.src=this.src+(this.src.indexOf('?')>-1?'&':'?')+'r=1';}else{this.remove();}">
                <span class="project-video-cover" aria-hidden="true">
                  <svg viewBox="0 0 24 24" width="34" height="34" fill="currentColor" style="color:#fff;opacity:.95;filter:drop-shadow(0 1px 3px rgba(15,23,42,.5));"><path d="M8 5v14l11-7z"/></svg>
                </span>
              </button>
            {% else %}
              <div class="project-video-placeholder">
                <span class="project-video-placeholder-icon">🎬</span>
                <strong>暂无最终视频</strong>
                <small>完成最后一步视频生成后会自动显示</small>
              </div>
            {% endif %}
          </div>
          {% if item.backend_label %}
          {# 云端/本机生成标识：固定网格头行右侧（与勾选框同一水平带）；
             title 里给出完整后端地址 · 取自本项目生成时的记录 #}
          <span class="backend-badge" data-backend-label="{{ item.backend_label }}"
                title="生成后端：{{ '☁ 云端 ComfyUI' if item.backend_label == 'cloud' else '🖥 本机 ComfyUI' }}（{{ item.backend_url or '地址未记录' }}） · 取自本项目生成时的记录">
            {{ '☁ 云端生成' if item.backend_label == 'cloud' else '🖥 本机生成' }}
          </span>
          {% endif %}
          <div class="project-item-info">
          {% if item.workflow_active %}
            <div class="project-running-title">{{ item.name }}</div>
          {% else %}
            <form class="project-title-form project-card-title-form" method="post" action="{{ url_for('rename_project', project_id=item.id) }}">
              <textarea
                class="project-title-input project-card-title-input"
                name="project_name"
                data-project-title-input
                title="点击编辑项目名称，回车或失焦保存"
              >{{ item.name }}</textarea>
            </form>
          {% endif %}
          <div class="project-card-id">{{ item.id }}</div>
          <form class="project-group-move-form" method="post" action="{{ url_for('move_project_to_group', project_id=item.id) }}" data-no-loading="true">
            <input type="hidden" name="return_group" value="{{ selected_group }}">
            <label for="projectGroup-{{ item.id }}">所属分组</label>
            {# 开始生成时刻（= 执行开始）：用户要求放在"所属分组"后面（原先挂在 token 行尾） #}
            <span class="project-gen-started" title="开始生成时刻（第一次真正开跑，不含排队等待）">{% if item.token_started_at %}开始生成 {{ item.token_started_at[:16] }}{% endif %}</span>
            <div>
              <select id="projectGroup-{{ item.id }}" name="group_id" aria-label="选择 {{ item.name }} 所属分组">
                <option value="" {% if not item.group_id %}selected{% endif %}>未分组</option>
                {% for group in project_groups %}
                  <option value="{{ group.id }}" {% if item.group_id == group.id %}selected{% endif %}>{{ group.name }}</option>
                {% endfor %}
              </select>
              <button class="mini-btn" type="submit">移动</button>
            </div>
          </form>
          <div class="project-elapsed" data-project-elapsed>
            {% if item.show_one_click_total_elapsed %}
            {# 耗时区放「所属分组」之后（用户要求）；总耗时只算执行（API + 预运行 + 视频生成 + 后处理），
               不含排队等待——起点 data-exec-started=第一次真正开跑（API 阶段开始），
               不是入队/创建时刻。运行中由前端按 data-* 实时累加。 #}
            <span class="project-elapsed-total" data-elapsed-total
              data-started="{{ item.one_click_elapsed_started_at }}"
              data-ended="{{ item.one_click_elapsed_ended_at }}"
              data-static="{{ item.one_click_elapsed_label }}"
              data-created="{{ item.created_at or '' }}"
              data-queue-started="{{ item.created_at or '' }}"
              data-exec-started="{{ item.exec_started_at or '' }}"
              data-video-started="{{ item.one_click_video_generation_started_at or item.exec_started_at or '' }}"
              data-status="{{ item.workflow.status or item.workflow.runtime_state or '' }}"></span>
            {% endif %}
            {% if item.show_video_generation_elapsed %}
            <span class="project-elapsed-stage" data-elapsed-stage
              data-started="{{ item.elapsed_started_at }}"
              data-ended="{{ item.elapsed_ended_at }}"
              data-static="{{ item.elapsed_label }}"
              data-status="{{ item.workflow.status or item.workflow.runtime_state or '' }}"></span>
            {% endif %}
          </div>
          {# API 消耗行（用户要求）：数值默认 ×100 展示；「开始生成」时刻已移至"所属分组"后；
             恒渲染占位，避免"有/无数据"导致卡片内部错位（用户要求布局固定） #}
          <span class="project-token-wan" data-token-started="{{ item.token_started_at or '' }}"
                title="本项目所有 AI 调用（图片理解 / 剧情脚本 / 镜头提示词等）累计 token 消耗{% if item.token_started_at %}；开始生成于 {{ item.token_started_at }}{% endif %}">API 消耗 {% if item.token_wan %}{{ '%g'|format(item.token_wan) }} 万 tokens{% else %}—{% endif %}</span>
          {% if item.workflow_active %}
            <div class="project-terminal-state is-running-ok">生成进行中<small>任务正在运行，完成后这里显示最终状态</small></div>
          {% elif item.workflow.status in ['failed', 'cancelled', 'interrupted'] %}
            <div class="project-terminal-state is-{{ item.workflow.status }}">
              {% if item.workflow.status == 'failed' %}任务失败{% elif item.workflow.status == 'cancelled' %}任务已中断{% else %}任务异常停止{% endif %}
              {% if item.workflow.detail %}<small>{{ item.workflow.detail }}</small>{% endif %}
            </div>
          {% else %}
            <div class="project-terminal-state is-ok">状态正常<small>任务已完成，点击下方"进入"查看成片与详情</small></div>
          {% endif %}
          </div>
          <div class="project-card-footer">
            <a class="mini-btn" href="{{ url_for('project_detail', project_id=item.id) }}">进入</a>
            {% if item.workflow_active %}
              {% if item.workflow.can_cancel %}
                <form
                  method="post"
                  action="{{ url_for('cancel_project_workflow', project_id=item.id) }}"
                  data-confirm="确定中断项目 {{ item.name }} 的一键成片任务吗？已完成的阶段结果会保留。"
                  data-no-loading="true"
                >
                  <button class="mini-btn danger" type="submit">中断任务</button>
                </form>
              {% else %}
                <button class="mini-btn danger" type="button" disabled>正在中断</button>
              {% endif %}
            {% else %}
              <form method="post" action="{{ url_for('delete_project', project_id=item.id) }}" data-confirm="确定删除项目 {{ item.name }} 及其本地数据文件夹吗？此操作不可恢复。">
                <button class="mini-btn danger" type="submit">删除</button>
              </form>
            {% endif %}
          </div>
        </div>
        {% endfor %}
        <div class="empty-state" data-project-group-empty {% if page_projects %}hidden{% endif %}>“<span data-empty-group-name>{{ selected_group_name }}</span>”中暂无项目，可切换其他分组，或创建新项目后移动到这里。</div>
        </div>
        {{ render_pagination_bar('bottom') }}
        </div>
      </div>
    </div>
  </section>

  <div class="modal-backdrop" id="projectVideoModal" aria-hidden="true">
    <div class="modal-panel project-video-modal-panel">
      <div class="modal-head">
        <div style="min-width:0;">
          <h2 id="projectVideoModalTitle">最终视频</h2>
          <div class="muted">点击空白处或关闭按钮退出播放。</div>
        </div>
        <button class="icon-close" type="button" data-modal-close="projectVideoModal">×</button>
      </div>
      <div class="project-video-modal-body">
        <video id="projectVideoPlayer" controls playsinline preload="metadata"></video>
      </div>
    </div>
  </div>

  <script>
    (function () {
      // 服务端分页模式（分页 URL ?page=&size= 常在）：分组切换与翻页都由服务端切片，
      // 前端的"只过滤当前一页"逻辑必须让位，否则会显示成似是而非的子集
      window.__tkaiServerPaging = {{ 'true' if pagination_enabled else 'false' }};
      var menuItems = Array.prototype.slice.call(document.querySelectorAll("[data-project-group-filter]"));
      function getGroupCards() {
        return Array.prototype.slice.call(document.querySelectorAll("[data-project-group-id]"));
      }
      var groupName = document.querySelector("[data-selected-group-name]");
      var visibleCount = document.querySelector("[data-visible-project-count]");
      var emptyState = document.querySelector("[data-project-group-empty]");
      var emptyGroupName = document.querySelector("[data-empty-group-name]");
      var homeNotice = document.querySelector("[data-home-notice]");
      if (!menuItems.length) {
        return;
      }

      function isVisible(card, selectedGroup) {
        var cardGroup = card.getAttribute("data-project-group-id") || "";
        if (selectedGroup === "all") {
          return true;
        }
        if (selectedGroup === "ungrouped") {
          return !cardGroup;
        }
        return cardGroup === selectedGroup;
      }

      function applyGroup(selectedGroup, selectedName, updateHistory) {
        var count = 0;
        getGroupCards().forEach(function (card) {
          var show = isVisible(card, selectedGroup);
          card.hidden = !show;
          if (show) {
            count += 1;
          } else {
            var checkbox = card.querySelector("[data-project-select]");
            if (checkbox) {
              checkbox.checked = false;
            }
          }
        });
        menuItems.forEach(function (item) {
          var active = item.getAttribute("data-project-group-filter") === selectedGroup;
          item.classList.toggle("is-active", active);
          if (active) {
            item.setAttribute("aria-current", "page");
          } else {
            item.removeAttribute("aria-current");
          }
        });
        if (groupName) {
          groupName.textContent = selectedName;
        }
        if (visibleCount) {
          visibleCount.textContent = String(count);
        }
        if (emptyState) {
          emptyState.hidden = count !== 0;
        }
        if (emptyGroupName) {
          emptyGroupName.textContent = selectedName;
        }
        document.querySelectorAll('.project-group-move-form input[name="return_group"]').forEach(function (input) {
          input.value = selectedGroup;
        });
        document.dispatchEvent(new CustomEvent("project-group-filtered"));

        if (updateHistory) {
          var url = new URL(window.location.href);
          url.searchParams.set("group", selectedGroup);
          url.searchParams.delete("message");
          window.history.pushState({projectGroup: selectedGroup}, "", url.pathname + url.search + url.hash);
        }
      }

      function activeGroupItem() {
        return menuItems.find(function (item) {
          return item.classList.contains("is-active");
        }) || menuItems[0];
      }

      function showMoveNotice(message, isError) {
        if (!homeNotice) {
          return;
        }
        homeNotice.textContent = message;
        homeNotice.classList.toggle("error", Boolean(isError));
        homeNotice.classList.toggle("success", !isError);
        homeNotice.hidden = false;
      }

      function updateGroupCounts(counts) {
        menuItems.forEach(function (item) {
          var count = counts[item.getAttribute("data-project-group-filter")];
          var label = item.querySelector("strong");
          if (label && count !== undefined) {
            label.textContent = String(count);
          }
        });
      }

      menuItems.forEach(function (item) {
        item.addEventListener("click", function (event) {
          if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
            return;
          }
          // 服务端分页模式：切换分组必须服务端重新切片（否则只会过滤当前页里的一小撮），
          // 直接交给浏览器按 href 导航（href 已带 group + size + page=1）
          if (window.__tkaiServerPaging === true) {
            return;
          }
          event.preventDefault();
          applyGroup(
            item.getAttribute("data-project-group-filter") || "all",
            item.getAttribute("data-group-name") || "全部项目",
            true
          );
        });
      });

      document.querySelectorAll(".project-group-move-form").forEach(function (form) {
        form.addEventListener("submit", async function (event) {
          event.preventDefault();
          var card = form.closest("[data-project-group-id]");
          var select = form.querySelector('select[name="group_id"]');
          var button = form.querySelector('button[type="submit"]');
          if (!card || !select || !button || button.disabled) {
            return;
          }

          var previousGroup = card.getAttribute("data-project-group-id") || "";
          var targetGroup = select.value || "";
          if (targetGroup === previousGroup) {
            showMoveNotice("项目已经在当前分组中。", false);
            return;
          }

          button.disabled = true;
          var originalText = button.textContent;
          button.textContent = "移动中...";
          try {
            var response = await fetch(form.action, {
              method: "POST",
              body: new FormData(form),
              headers: {
                "Accept": "application/json",
                "X-Requested-With": "XMLHttpRequest"
              }
            });
            var payload = await response.json();
            if (!response.ok || !payload.ok) {
              throw new Error(payload.error || "移动项目失败。");
            }
            card.setAttribute("data-project-group-id", payload.group_id || "");
            updateGroupCounts(payload.counts || {});
            var activeItem = activeGroupItem();
            applyGroup(
              activeItem.getAttribute("data-project-group-filter") || "all",
              activeItem.getAttribute("data-group-name") || "全部项目",
              false
            );
            showMoveNotice(payload.message || "项目分组已更新。", false);
          } catch (error) {
            select.value = previousGroup;
            showMoveNotice(error.message || "移动项目失败。", true);
          } finally {
            button.disabled = false;
            button.textContent = originalText;
          }
        });
      });

      window.addEventListener("popstate", function () {
        // 服务端分页模式：分组/页码都由服务端切片，回退时交给浏览器恢复页面（含缓存页），
        // 不再用前端"只过滤当前一页"的旧逻辑，避免显示成似是而非的子集
        if (window.__tkaiServerPaging === true) {
          return;
        }
        var selectedGroup = new URL(window.location.href).searchParams.get("group") || "all";
        var item = menuItems.find(function (candidate) {
          return candidate.getAttribute("data-project-group-filter") === selectedGroup;
        }) || menuItems[0];
        applyGroup(
          item.getAttribute("data-project-group-filter") || "all",
          item.getAttribute("data-group-name") || "全部项目",
          false
        );
      });
    })();

    (function () {
      var selectAll = document.querySelector("[data-project-select-all]");
      var deleteButton = document.querySelector("[data-batch-delete-button]");
      var deleteForm = document.querySelector("[data-batch-delete-form]");
      var countLabel = document.querySelector("[data-selected-project-count]");
      var regenButton = document.querySelector("[data-batch-regenerate-button]");
      var regenCountLabel = document.querySelector("[data-selected-regen-count]");
      var downloadButton = document.querySelector("[data-batch-download-button]");
      var downloadCountLabel = document.querySelector("[data-selected-download-count]");
      var cancelButton = document.querySelector("[data-batch-cancel-button]");
      var cancelAllButton = document.querySelector("[data-cancel-all-button]");
      var cancelCountLabel = document.querySelector("[data-selected-cancel-count]");
      if (!selectAll || !deleteButton || !deleteForm) {
        return;
      }

      function visibleSelectable() {
        return Array.prototype.slice.call(document.querySelectorAll("[data-project-select]")).filter(function (checkbox) {
          if (checkbox.disabled) { return false; }
          var card = checkbox.closest(".project-item");
          return !card || !card.hidden;
        });
      }

      function updateSelection() {
        var currentSelectable = visibleSelectable();
        var selected = currentSelectable.filter(function (checkbox) { return checkbox.checked; });
        // 勾选中处于运行/排队状态的任务（可批量中断；删除时会先中断再删）
        var runningSelected = selected.filter(function (checkbox) {
          var card = checkbox.closest(".project-item");
          return card && card.hasAttribute("data-workflow-card");
        });
        selectAll.disabled = currentSelectable.length === 0;
        selectAll.checked = currentSelectable.length > 0 && selected.length === currentSelectable.length;
        selectAll.indeterminate = selected.length > 0 && selected.length < currentSelectable.length;
        deleteButton.disabled = selected.length === 0;
        if (regenButton) { regenButton.disabled = selected.length === 0; }
        if (cancelButton) { cancelButton.disabled = runningSelected.length === 0; }
        if (countLabel) {
          countLabel.textContent = selected.length ? "（" + selected.length + "）" : "";
        }
        if (regenCountLabel) {
          regenCountLabel.textContent = selected.length ? "（" + selected.length + "）" : "";
        }
        if (cancelCountLabel) {
          cancelCountLabel.textContent = runningSelected.length ? "（" + runningSelected.length + "）" : "";
        }
        if (downloadButton) { downloadButton.disabled = selected.length === 0; }
        if (downloadCountLabel) {
          downloadCountLabel.textContent = selected.length ? "（" + selected.length + "）" : "";
        }
        deleteForm.setAttribute(
          "data-confirm",
          "确定删除选中的 " + selected.length + " 个项目及其本地数据文件夹吗？此操作不可恢复。"
          + (runningSelected.length ? "（含 " + runningSelected.length + " 个运行中/排队中任务，将先中断再删除）" : "")
        );
        Array.prototype.slice.call(document.querySelectorAll("[data-project-select]")).forEach(function (checkbox) {
          var card = checkbox.closest(".project-item");
          if (card) {
            card.classList.toggle("is-selected", checkbox.checked);
          }
        });
      }
      window.tkaiUpdateSelection = updateSelection;

      /* 修复"下载所选视频"报 400 未选择项目：勾选框的 form 属性归属删除表单，
         下载表单提交时拿不到 project_ids —— 提交前把勾选的 id 注入为隐藏域 */
      var downloadForm = document.getElementById("batchDownloadProjectsForm");
      if (downloadForm && downloadButton) {
        downloadForm.addEventListener("submit", function () {
          Array.prototype.slice.call(downloadForm.querySelectorAll('input[name="project_ids"]')).forEach(function (input) {
            input.remove();
          });
          visibleSelectable().filter(function (checkbox) { return checkbox.checked; }).forEach(function (checkbox) {
            var input = document.createElement("input");
            input.type = "hidden";
            input.name = "project_ids";
            input.value = checkbox.value;
            downloadForm.appendChild(input);
          });
        });
      }

      /* 批量中断所选（用户要求）：AJAX 提交，只更新列表里的对应卡片，不整页刷新 */
      if (cancelButton) {
        cancelButton.addEventListener("click", function () {
          var ids = visibleSelectable()
            .filter(function (c) { return c.checked; })
            .filter(function (c) {
              var card = c.closest(".project-item");
              return card && card.hasAttribute("data-workflow-card");
            })
            .map(function (c) { return c.value; });
          if (!ids.length) { return; }
          if (!window.confirm("确定中断选中的 " + ids.length + " 个运行中/排队中任务吗？已完成的阶段结果会保留。")) { return; }
          var originalText = cancelButton.textContent;
          cancelButton.disabled = true;
          cancelButton.textContent = "正在中断…";
          var fd = new FormData();
          ids.forEach(function (pid) { fd.append("project_ids", pid); });
          fetch("{{ url_for('cancel_projects_batch') }}", {
            method: "POST",
            headers: { "Accept": "application/json", "X-Requested-With": "XMLHttpRequest" },
            body: fd
          })
            .then(function (r) { return r.json(); })
            .then(function (j) {
              var done = (j && j.ids && j.ids.length) ? j.ids : ids;
              done.forEach(function (pid) {
                var card = document.querySelector('[data-workflow-card="' + pid + '"]');
                if (card) {
                  card.setAttribute("data-workflow-status", "cancelled");
                  var lbl = card.querySelector("[data-workflow-label]");
                  if (lbl) { lbl.textContent = "正在中断"; }
                }
              });
              if (typeof window.tkaiFetchNewProjectCards === "function") {
                window.tkaiFetchNewProjectCards();     // 拉服务端卡片就地替换为终态
              }
            })
            .catch(function () {})
            .then(function () {
              cancelButton.textContent = originalText;
              updateSelection();
            });
        });
      }

      /* 中断所有任务（问题9）：不限勾选，中断当前列表全部运行中/排队中任务 */
      function tkaiCancelAllRunning(ask, done) {
        var ids = Array.prototype.slice.call(document.querySelectorAll(".project-item[data-workflow-card]"))
          .map(function (card) { return card.getAttribute("data-workflow-card"); })
          .filter(function (id) { return !!id; });
        if (!ids.length) { window.alert("当前列表没有正在运行或排队中的任务。"); return; }
        if (ask && !window.confirm("确定中断当前列表全部 " + ids.length + " 个运行中/排队中任务吗？已完成的阶段结果会保留。")) { return; }
        var fd = new FormData();
        ids.forEach(function (pid) { fd.append("project_ids", pid); });
        if (cancelAllButton) { cancelAllButton.disabled = true; cancelAllButton.textContent = "正在中断…"; }
        fetch("{{ url_for('cancel_projects_batch') }}", {
          method: "POST",
          headers: { "Accept": "application/json", "X-Requested-With": "XMLHttpRequest" },
          body: fd
        })
          .then(function (r) { return r.json(); })
          .then(function (j) {
            var doneIds = (j && j.ids && j.ids.length) ? j.ids : ids;
            doneIds.forEach(function (pid) {
              var card = document.querySelector('[data-workflow-card="' + pid + '"]');
              if (card) {
                card.setAttribute("data-workflow-status", "cancelled");
                var lbl = card.querySelector("[data-workflow-label]");
                if (lbl) { lbl.textContent = "正在中断"; }
              }
            });
            if (typeof window.tkaiFetchNewProjectCards === "function") {
              window.tkaiFetchNewProjectCards();
            }
          })
          .catch(function () {})
          .then(function () {
            if (cancelAllButton) { cancelAllButton.disabled = false; cancelAllButton.textContent = "中断所有任务"; }
            updateSelection();
            if (done) { done(); }
          });
      }
      if (cancelAllButton) {
        cancelAllButton.addEventListener("click", function () { tkaiCancelAllRunning(true); });
      }

      /* 项目卡片右键菜单（问题9）：在卡片（含封面图）上右键 → 中断任务 / 中断所有任务 */
      (function () {
        var menu = null;
        function closeMenu() {
          if (menu && menu.parentNode) { menu.parentNode.removeChild(menu); }
          menu = null;
        }
        document.addEventListener("contextmenu", function (e) {
          var card = e.target && e.target.closest ? e.target.closest(".project-item") : null;
          if (!card) { closeMenu(); return; }
          e.preventDefault();
          closeMenu();
          menu = document.createElement("div");
          menu.setAttribute("data-project-context-menu", "1");
          menu.style.cssText = "position:fixed;z-index:99999;min-width:168px;background:#fff;border:1px solid #dbe3ef;"
            + "border-radius:10px;box-shadow:0 10px 28px rgba(31,42,61,.18);padding:6px;font-size:13px;color:#1f2a3d;user-select:none;";
          var mid = card.getAttribute("data-workflow-card");
          var isRunning = !!mid;
          function addItem(label, fn, danger) {
            var it = document.createElement("div");
            it.textContent = label;
            it.style.cssText = "padding:8px 12px;border-radius:7px;cursor:pointer;"
              + (danger ? "color:#c2402b;" : "");
            it.addEventListener("mouseenter", function () { it.style.background = "#f2f5fa"; });
            it.addEventListener("mouseleave", function () { it.style.background = ""; });
            it.addEventListener("click", function () { closeMenu(); fn(); });
            menu.appendChild(it);
          }
          if (isRunning) {
            addItem("中断任务", function () {
              var fd = new FormData();
              fd.append("project_ids", mid);
              fetch("{{ url_for('cancel_projects_batch') }}", {
                method: "POST",
                headers: { "Accept": "application/json", "X-Requested-With": "XMLHttpRequest" },
                body: fd
              }).catch(function () {}).then(function () {
                card.setAttribute("data-workflow-status", "cancelled");
                var lbl = card.querySelector("[data-workflow-label]");
                if (lbl) { lbl.textContent = "正在中断"; }
                if (typeof window.tkaiFetchNewProjectCards === "function") { window.tkaiFetchNewProjectCards(); }
              });
            }, true);
          } else {
            var idle = document.createElement("div");
            idle.textContent = "（该任务未在运行）";
            idle.style.cssText = "padding:8px 12px;color:#9aa7ba;font-size:12px;";
            menu.appendChild(idle);
          }
          addItem("中断所有任务", function () { tkaiCancelAllRunning(true); }, true);
          document.body.appendChild(menu);
          var mw = menu.offsetWidth || 168, mh = menu.offsetHeight || 84;
          var x = Math.min(e.clientX, window.innerWidth - mw - 8);
          var y = Math.min(e.clientY, window.innerHeight - mh - 8);
          menu.style.left = x + "px";
          menu.style.top = y + "px";
        });
        document.addEventListener("click", function (e) {
          if (menu && !(e.target && e.target.closest && e.target.closest("[data-project-context-menu]"))) { closeMenu(); }
        });
        document.addEventListener("scroll", closeMenu, true);
      })();

      /* 重新生成所选：逐个探测项目详情页的"重新生成全部资产图"后台任务接口并触发 */
      if (regenButton) {
        regenButton.addEventListener("click", function () {
          var ids = visibleSelectable()
            .filter(function (c) { return c.checked; })
            .map(function (c) { return c.value; });
          if (!ids.length) { return; }
          var originalText = regenButton.textContent;
          regenButton.disabled = true;
          regenButton.textContent = "正在触发…";
          var done = 0, skipped = 0;
          var report = function () {
            if (done + skipped < ids.length) { return; }
            var msg = "已完成：" + done + " 个已触发重新生成，"
              + (skipped ? skipped + " 个无可重新生成步骤（未进入资产阶段或不是失败任务）。" : "全部已触发。")
              + "刷新页面可查看进度。";
            window.alert(msg);
            regenButton.textContent = originalText;
            regenButton.disabled = false;
            updateSelection();
          };
          ids.forEach(function (pid) {
            fetch("/projects/" + encodeURIComponent(pid) + "?step=assets", { headers: { "Accept": "text/html" } })
              .then(function (r) { return r.text(); })
              .then(function (html) {
                var doc = new DOMParser().parseFromString(html, "text/html");
                var form = doc.querySelector("form[action*='asset_regeneration']");
                if (!form) { skipped++; report(); return; }
                var action = form.getAttribute("action");
                return fetch(action, {
                  method: "POST",
                  headers: { "Accept": "application/json", "X-Requested-With": "XMLHttpRequest" }
                });
              })
              .then(function (r) {
                if (r && r.ok) { done++; } else { skipped++; }
                report();
              })
              .catch(function () { skipped++; report(); });
          });
        });
      }

      selectAll.addEventListener("change", function () {
        visibleSelectable().forEach(function (checkbox) {
          checkbox.checked = selectAll.checked;
        });
        updateSelection();
      });
      document.addEventListener("change", function (event) {
        if (event.target && event.target.hasAttribute && event.target.hasAttribute("data-project-select")) {
          updateSelection();
        }
      });
      document.addEventListener("project-group-filtered", updateSelection);
      updateSelection();

    })();

    /* ============================================================
       AJAX 化的卡片操作（用户要求：中断/删除只更新项目列表，绝不整页跳转）
       ============================================================ */
    (function () {
      function cardById(pid) {
        var byAttr = document.querySelector('[data-workflow-card="' + pid + '"]');
        if (byAttr) { return byAttr; }
        var idEls = document.querySelectorAll(".project-item .project-card-id");
        for (var i = 0; i < idEls.length; i++) {
          if (idEls[i].textContent.trim() === pid) { return idEls[i].closest(".project-item"); }
        }
        return null;
      }
      function syncSoon(delay) {
        window.setTimeout(function () {
          if (typeof window.tkaiFetchNewProjectCards === "function") { window.tkaiFetchNewProjectCards(); }
        }, delay || 300);
      }

      // 1) 卡片"中断任务"：fetch 提交 → 服务端记终态 → 抓服务端卡片就地替换本卡
      document.addEventListener("submit", function (event) {
        var form = event.target;
        if (!form || !form.matches || !form.matches('.project-card-footer form[action*="/cancel"]')) { return; }
        if (event.defaultPrevented) { return; }        // base.html 绑定的确认弹窗被用户取消
        if (form.dataset.tkaiBound !== "1") {          // 轮询换入的新卡片没有 base 绑定：这里补确认
          var msg = form.getAttribute("data-confirm");
          if (msg && !window.confirm(msg)) { event.preventDefault(); return; }
        }
        event.preventDefault();
        var card = form.closest(".project-item");
        var btn = form.querySelector('button[type="submit"]');
        if (btn) { btn.disabled = true; btn.textContent = "正在中断…"; }
        fetch(form.getAttribute("action"), {
          method: "POST",
          headers: { "Accept": "application/json", "X-Requested-With": "XMLHttpRequest" },
          body: new FormData(form)
        })
          .then(function (r) { return r.json(); })
          .then(function (j) {
            if (card && card.getAttribute("data-workflow-card")) {
              card.setAttribute("data-workflow-status", "cancelled");
              var lbl = card.querySelector("[data-workflow-label]");
              if (lbl) { lbl.textContent = "正在中断"; }
            }
            syncSoon(400);
          })
          .catch(function () {
            if (btn) { btn.disabled = false; btn.textContent = "中断任务"; }
          });
      });

      // 2) 批量删除：fetch 提交 → JSON → 就地移除已删卡片并同步列表/计数
      //    （修复：普通表单提交曾直接跳到 /projects/delete-batch 的 JSON 页面）
      document.addEventListener("submit", function (event) {
        var form = event.target;
        if (!form || form.id !== "batchDeleteProjectsForm") { return; }
        if (event.defaultPrevented) { return; }
        event.preventDefault();
        var checked = Array.prototype.slice.call(document.querySelectorAll("[data-project-select]"))
          .filter(function (c) { return c.checked; });
        var ids = checked.map(function (c) { return c.value; });
        if (!ids.length) { return; }
        var btn = form.querySelector('button[type="submit"]');
        var originalText = btn ? btn.textContent : "";
        if (btn) { btn.disabled = true; btn.textContent = "正在删除…"; }
        var fd = new FormData();
        ids.forEach(function (pid) { fd.append("project_ids", pid); });
        fetch(form.getAttribute("action"), {
          method: "POST",
          headers: { "Accept": "application/json", "X-Requested-With": "XMLHttpRequest" },
          body: fd
        })
          .then(function (r) { return r.json(); })
          .then(function (j) {
            if (!j || !j.ok) { window.alert("删除失败，请重试"); return; }
            ids.forEach(function (pid) {
              var c = cardById(pid);
              if (c) { c.remove(); }
            });
            if (typeof window.tkaiUpdateSelection === "function") { window.tkaiUpdateSelection(); }
            syncSoon(300);
          })
          .catch(function () { window.alert("删除失败（网络异常），请重试"); })
          .then(function () {
            if (btn) { btn.disabled = false; btn.textContent = originalText; }
          });
      });
    })();

    (function () {
      function getCards() {
        return Array.prototype.slice.call(document.querySelectorAll("[data-workflow-card]"));
      }
      function domCard(id) {
        // 卡片可能已被服务端终态版本替换（那时没有 data-workflow-card），统一按项目号找
        var byAttr = document.querySelector('[data-workflow-card="' + id + '"]');
        if (byAttr) {
          return byAttr;
        }
        var idEls = document.querySelectorAll(".project-item .project-card-id");
        for (var i = 0; i < idEls.length; i++) {
          if (idEls[i].textContent.trim() === id) {
            return idEls[i].closest(".project-item");
          }
        }
        return null;
      }
      var statusUrl = {{ url_for('project_workflow_status')|tojson }};
      // 轮询按"当前页"抓取（服务端渲染同一页）：新任务卡片只在第 1 页插入
      var homeUrl = {{ home_page_url|tojson }};
      var firstPageUrl = {{ home_first_page_url|tojson }};
      var paging = {
        // 只有"服务端真的分了多页"才启用裁剪/补页逻辑（单页时全部卡片都在 DOM 里，不需要裁）
        enabled: {{ 'true' if (pagination_enabled and page_count > 1) else 'false' }},
        page: {{ page }},
        size: {{ page_size }}
      };
      var pollInFlight = false;
      var navigatingHome = false;
      var fetchingNewCards = false;
      var cardFetchFails = 0;          // 抓卡片失败次数（静默重试 + 退避）
      var lastCardFetchTs = 0;
      var lastUnknownResetTs = 0;
      var terminalStatuses = ["completed", "failed", "cancelled", "interrupted"];
      // 待插入的新项目：id -> 已尝试次数（抓到服务端页面但卡片仍不在 DOM 时才 +1）
      var pendingNewCards = {};
      // 已放弃的项目号（例如不在当前页/当前分组视图，反复抓也没用；每分钟清空一次自愈）
      var unknownTried = {};
      // 卡片连续缺席轮询次数：服务端只返回运行/排队项目，缺席即代表已进入终态
      var missingStreak = {};
      var MAX_CARD_FETCH_TRIES = 3;    // 同一个新卡片最多抓 3 次
      var STATUS_FETCH_TIMEOUT = 8000;
      var CARD_FETCH_TIMEOUT = 15000;

      // 请求挂死时不再永久占住 pollInFlight（曾导致轮询静默停摆、列表再也不刷新）
      function fetchWithTimeout(url, options, timeoutMs) {
        var ctl = (typeof AbortController === "function") ? new AbortController() : null;
        var opts = Object.assign({}, options || {});
        if (ctl) { opts.signal = ctl.signal; }
        var timer = window.setTimeout(function () {
          if (ctl) { try { ctl.abort(); } catch (e) {} }
        }, timeoutMs);
        var done = function () { window.clearTimeout(timer); };
        return fetch(url, opts).then(function (r) { done(); return r; },
                                     function (e) { done(); throw e; });
      }

      // 失败静默重试：前两次立即（下一轮 2 秒轮询），之后退避到最多 10 秒，避免打爆本机站点
      function cardFetchBackoffMs() {
        if (cardFetchFails <= 2) {
          return 0;
        }
        return Math.min(2000 * cardFetchFails, 10000);
      }

      function showSyncHint(text, href, linkText) {
        var box = document.querySelector("[data-list-sync-hint]");
        if (!box) {
          return;
        }
        box.hidden = false;
        box.textContent = text || "";
        if (href) {
          var a = document.createElement("a");
          a.href = href;
          a.textContent = linkText || "刷新列表";
          box.appendChild(a);
        }
      }

      function hideSyncHint() {
        var box = document.querySelector("[data-list-sync-hint]");
        if (box) {
          box.hidden = true;
        }
      }

      // 自动插入失败/新任务不在本页时给出可点的兜底入口（宁可让用户一眼看到，也不静默失效）
      function updateSyncHint() {
        var missing = Object.keys(pendingNewCards);
        var givenUp = Object.keys(unknownTried);
        if (paging.enabled && paging.page > 1 && (missing.length || givenUp.length)) {
          showSyncHint("当前是第 " + paging.page + " 页：新加入的任务显示在第 1 页。", firstPageUrl, "回到第 1 页查看");
          return;
        }
        // 第一次抓取通常就成功（正常情况不打扰）；多次抓取仍没插进来才提示"正在同步"
        var retrying = missing.filter(function (id) { return pendingNewCards[id] > 0; });
        if (retrying.length) {
          showSyncHint("列表正在同步新任务…", "", "");
          return;
        }
        if (givenUp.length) {
          showSyncHint("列表未自动刷新出新任务卡片。", homeUrl, "点此刷新列表");
          return;
        }
        hideSyncHint();
      }

      // 与服务端"当前页"对齐：
      //  1) 已结束（完成/失败/中断/连续缺席 2 轮）的卡片换成服务端终态卡片；
      //  2) 已不在本页的卡片就地移除（避免残留假"运行中"）；
      //  3) 新任务卡片插入列表顶部（仅第 1 页；更后面的页靠翻页看）；
      //  4) 本页缺的卡片按顺序补齐，超出每页数量时裁掉尾部非运行卡片。
      function syncProjectList(doc) {
        var list = document.querySelector(".project-list");
        if (!list) {
          return false;
        }
        var changed = false;
        var freshMap = {};
        Array.prototype.forEach.call(doc.querySelectorAll(".project-item"), function (item) {
          var idEl = item.querySelector(".project-card-id");
          var pid = idEl ? idEl.textContent.trim() : "";
          if (pid) {
            freshMap[pid] = item;
          }
        });
        getCards().forEach(function (card) {
          var id = card.getAttribute("data-workflow-card");
          if (!id) {
            return;
          }
          var st = card.getAttribute("data-workflow-status");
          var finished = terminalStatuses.indexOf(st) !== -1 || (missingStreak[id] || 0) >= 2;
          if (!finished) {
            return;
          }
          if (freshMap[id]) {
            card.replaceWith(freshMap[id]);       // 就地换成服务端终态卡片（成片缩略图/最终信息）
            delete missingStreak[id];
            delete pendingNewCards[id];
            changed = true;
          } else {
            card.remove();                        // 已不在本页（例如被新任务挤到第 2 页）
            delete missingStreak[id];
            changed = true;
          }
        });
        var firstPage = !paging.enabled || paging.page <= 1;
        if (firstPage) {
          // 逆序插入保证最新在最上
          var freshActive = Array.prototype.slice.call(doc.querySelectorAll("[data-workflow-card]")).reverse();
          freshActive.forEach(function (card) {
            var id = card.getAttribute("data-workflow-card");
            if (id && !domCard(id)) {
              list.insertBefore(card, list.firstChild);
              delete missingStreak[id];
              delete pendingNewCards[id];
              delete unknownTried[id];
              changed = true;
            }
          });
        }
        var order = [];
        Array.prototype.forEach.call(doc.querySelectorAll(".project-item"), function (item) {
          var idEl = item.querySelector(".project-card-id");
          if (idEl && idEl.textContent.trim()) {
            order.push(idEl.textContent.trim());
          }
        });
        order.forEach(function (id) {
          if (domCard(id) || !freshMap[id]) {
            return;
          }
          list.appendChild(freshMap[id]);          // 本页缺的卡片补到末尾，保持每页数量
          changed = true;
        });
        if (paging.enabled) {
          var cardsNow = Array.prototype.slice.call(list.querySelectorAll(".project-item"));
          for (var i = cardsNow.length - 1; i >= 0 && cardsNow.length > paging.size; i--) {
            if (cardsNow[i].hasAttribute("data-workflow-card")) {
              continue;                            // 运行中/排队中的卡片不裁
            }
            cardsNow[i].remove();
            cardsNow.splice(i, 1);
          }
        }
        // 计数/页码信息跟随服务端当前页（新任务入列后总数会变）
        var badge = document.querySelector("[data-visible-project-count]");
        var freshBadge = doc.querySelector("[data-visible-project-count]");
        if (badge && freshBadge) {
          badge.textContent = freshBadge.textContent;
        }
        var freshInfo = doc.querySelector("[data-page-info]");
        var infoText = freshInfo ? freshInfo.textContent : "";
        document.querySelectorAll("[data-page-info]").forEach(function (el) {
          el.textContent = infoText;
        });
        document.querySelectorAll("[data-page-current]").forEach(function (el) {
          var t = doc.querySelector("[data-page-current]");
          if (t) { el.textContent = t.textContent; }
        });
        document.querySelectorAll("[data-page-count]").forEach(function (el) {
          var t = doc.querySelector("[data-page-count]");
          if (t) { el.textContent = t.textContent; }
        });
        document.querySelectorAll("[data-page-total]").forEach(function (el) {
          var t = doc.querySelector("[data-page-total]");
          if (t) { el.textContent = t.textContent; }
        });
        var curMenus = document.querySelectorAll("[data-project-group-filter] strong");
        var newMenus = doc.querySelectorAll("[data-project-group-filter] strong");
        Array.prototype.forEach.call(curMenus, function (el, i) {
          if (newMenus[i]) { el.textContent = newMenus[i].textContent; }
        });
        var empty = document.querySelector("[data-project-group-empty]");
        var freshEmpty = doc.querySelector("[data-project-group-empty]");
        if (empty && freshEmpty) {
          empty.hidden = freshEmpty.hidden;
        }
        return changed;
      }

      // 服务端有新项目/卡片状态变化时：抓取当前页的服务端渲染版本，就地同步列表
      // （只更新项目列表区域，页面顶部提示条与创作表单不受影响）
      async function fetchNewProjectCards() {
        var now = Date.now();
        if (fetchingNewCards || navigatingHome) {
          return false;                                   // 上一次请求没返回：绝不叠发
        }
        if (now - lastCardFetchTs < cardFetchBackoffMs()) {
          return false;                                   // 失败退避中
        }
        fetchingNewCards = true;
        lastCardFetchTs = now;
        try {
          var resp = await fetchWithTimeout(homeUrl,
            { cache: "no-store", headers: { "Accept": "text/html" } }, CARD_FETCH_TIMEOUT);
          if (!resp.ok) {
            cardFetchFails++;
            return false;
          }
          var html = await resp.text();
          cardFetchFails = 0;
          syncProjectList(new DOMParser().parseFromString(html, "text/html"));
          // 待插入清单对账：DOM 里已经有了 → 出列；仍然没有 → 记一次尝试
          Object.keys(pendingNewCards).forEach(function (id) {
            if (domCard(id)) {
              delete pendingNewCards[id];
              delete unknownTried[id];
              return;
            }
            pendingNewCards[id] = (pendingNewCards[id] || 0) + 1;
            var maxTries = (paging.enabled && paging.page > 1) ? 1 : MAX_CARD_FETCH_TRIES;
            if (pendingNewCards[id] >= maxTries) {
              delete pendingNewCards[id];
              unknownTried[id] = true;
            }
          });
          return true;
        } catch (error) {
          cardFetchFails++;                               // 静默重试（带退避），不做用户可见报错
          return false;
        } finally {
          fetchingNewCards = false;
        }
      }
      // 供其它脚本块调用（批量中断/删除后就地同步列表，用户要求不整页刷新）
      window.tkaiFetchNewProjectCards = fetchNewProjectCards;

      function updateCard(card, workflow) {
        var track = card.querySelector("[data-workflow-track]");
        var detail = card.querySelector("[data-workflow-detail]");
        var label = card.querySelector("[data-workflow-label]");
        if (track) {
          track.setAttribute(
            "aria-valuetext",
            workflow.status === "queued"
              ? "排队中"
              : (workflow.status === "cancelling" ? "正在中断" : "正在处理")
          );
        }
        if (detail && workflow.detail) {
          detail.textContent = workflow.detail;
        }
        if (label) {
          label.textContent = workflow.status === "queued"
            ? "排队中"
            : (workflow.status === "cancelling" ? "正在中断" : "运行中");
        }
        var title = card.querySelector("[data-workflow-title]");
        if (title) {
          title.textContent = workflow.status === "queued" ? "等待前序项目完成" : "一键成片后台任务";
        }
        card.classList.toggle("is-queued", workflow.status === "queued");
        // token 实时刷新（轮询接口已返回 ×100 展示口径的 tokens 字段）；
        // 「开始生成 …」已移至"所属分组"后面，这里不再追加后缀
        var tokEl = card.querySelector(".project-token-wan");
        if (tokEl && workflow.tokens !== undefined && workflow.tokens !== null && workflow.tokens !== "") {
          var m = tokEl.textContent.match(/API 消耗/);
          var tv = Math.round((Number(workflow.tokens) || 0) * 100) / 100;
          tokEl.textContent = (m ? "API 消耗 " : "") + tv + " 万 tokens";
        }
        var preview = card.querySelector(".project-running-preview");
        if (preview) {
          preview.classList.toggle("is-queued", workflow.status === "queued");
        }
        // 排队转运行：记录出队时刻，耗时才从实际执行开始计（服务端已给 queued_at/stage_started_at
        // 时以服务端为准：syncElapsedFromWorkflow 会覆盖成同源口径）
        var prevStatus = card.getAttribute("data-workflow-status");
        var total = card.querySelector("[data-elapsed-total]");
        if (total && prevStatus === "queued" && workflow.status !== "queued" && workflow.status !== "cancelling") {
          var d = new Date();
          var pad = function (n) { return (n < 10 ? "0" : "") + n; };
          var stamp = d.getFullYear() + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate()) + " " +
            pad(d.getHours()) + ":" + pad(d.getMinutes()) + ":" + pad(d.getSeconds());
          total.setAttribute("data-video-started", stamp);
          total.setAttribute("data-exec-started", stamp);
        }
        card.setAttribute("data-workflow-status", workflow.status || "");
      // 卡片行序已改为模板直出（所属分组 → 总耗时 → API 消耗）；这里只兜底：
      // 轮询补插的旧结构卡片若耗时区不在分组之后，挪一次；不再追加"开始生成"后缀（模板已带）。
      function tkaiRelayoutCard(card) {
        if (!card || card.getAttribute("data-tkai-relayout") === "1") { return; }
        var elapsed = card.querySelector("[data-project-elapsed]");
        var groupForm = card.querySelector(".project-group-move-form");
        if (elapsed && groupForm && groupForm.nextSibling !== elapsed
            && groupForm.parentNode === elapsed.parentNode) {
          groupForm.parentNode.insertBefore(elapsed, groupForm.nextSibling);
          elapsed.classList.add("project-elapsed-after-group");
        }
        card.setAttribute("data-tkai-relayout", "1");
      }
      function tkaiRelayoutAll() {
        document.querySelectorAll(".project-item").forEach(tkaiRelayoutCard);
      }
      if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", tkaiRelayoutAll);
      } else {
        tkaiRelayoutAll();
      }
      window.tkaiRelayoutAll = tkaiRelayoutAll;

        if (window.__tkaiSyncElapsed) {
          window.__tkaiSyncElapsed(card, workflow);
        }
      }

      async function pollWorkflowStatus() {
        if (pollInFlight || navigatingHome) {
          return;                       // 上一次轮询没返回：不叠发
        }
        pollInFlight = true;
        try {
          var response = await fetchWithTimeout(statusUrl, {
            headers: {"Accept": "application/json"},
            cache: "no-store"
          }, STATUS_FETCH_TIMEOUT);
          if (!response.ok) {
            return;                     // 静默：下一轮继续
          }
          var payload = await response.json();
          var workflows = {};
          var raw = payload.projects || [];
          // 兼容对象与数组两种返回形态
          if (Array.isArray(raw)) {
            raw.forEach(function (item) { if (item && item.id) { workflows[item.id] = item; } });
          } else {
            Object.keys(raw).forEach(function (id) {
              workflows[id] = Object.assign({id: id}, raw[id]);
            });
          }
          // "已放弃"名单每分钟清空一次：异常状态（例如刚好在翻页/换分组）能自愈，不必手刷
          var nowTs = Date.now();
          if (nowTs - lastUnknownResetTs > 60000) {
            lastUnknownResetTs = nowTs;
            unknownTried = {};
          }
          var needFetch = false;
          getCards().forEach(function (card) {
            var id = card.getAttribute("data-workflow-card");
            var workflow = id ? workflows[id] : null;
            if (workflow) {
              missingStreak[id] = 0;
              updateCard(card, workflow);
              if (terminalStatuses.indexOf(workflow.status) !== -1 || !workflow.active) {
                needFetch = true;
              }
              return;
            }
            // 服务端列表只含运行/排队项目：连续两轮缺席即判定已结束，换回服务端渲染的终态卡片
            if (id) {
              missingStreak[id] = (missingStreak[id] || 0) + 1;
              if (missingStreak[id] === 2) { needFetch = true; }
            }
          });
          // 服务端说在跑、页面却没有卡片的项目（新加入的任务）：排队抓当前页把它插进来
          // —— 抓取成功但卡片仍不出现时最多重试 MAX_CARD_FETCH_TRIES 次，绝不"试过一次就永不再试"
          Object.keys(workflows).forEach(function (id) {
            if (domCard(id)) {
              delete pendingNewCards[id];
              delete unknownTried[id];
              return;
            }
            if (unknownTried[id] || pendingNewCards[id] !== undefined) {
              return;
            }
            pendingNewCards[id] = 0;
          });
          if (navigatingHome) {
            return;
          }
          if (Object.keys(pendingNewCards).length) {
            needFetch = true;
          }
          if (needFetch) {
            fetchNewProjectCards();
          }
          updateSyncHint();
        } catch (error) {
          // 短暂网络中断时保留当前卡片，下一轮继续查询（静默重试，不打扰用户）
        } finally {
          pollInFlight = false;
        }
      }

      var workflowPollTimer = window.setInterval(pollWorkflowStatus, 2000);
      window.setTimeout(pollWorkflowStatus, 500);
    })();

    (function () {
      // 单任务耗时统计：运行中每秒实时刷新，终态显示后端统计的总耗时/阶段耗时。
      function parseTs(s) {
        if (!s) {
          return null;
        }
        var m = String(s).match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2}):(\d{2})/);
        if (!m) {
          return null;
        }
        return new Date(+m[1], +m[2] - 1, +m[3], +m[4], +m[5], +m[6]).getTime();
      }

      function fmtDuration(sec) {
        sec = Math.max(0, Math.floor(sec));
        var h = Math.floor(sec / 3600);
        var m = Math.floor((sec % 3600) / 60);
        var s = sec % 60;
        if (h > 0) {
          return h + "小时 " + m + "分 " + s + "秒";
        }
        if (m > 0) {
          return m + "分 " + s + "秒";
        }
        return s + "秒";
      }

      // 时间基线：入队时刻（data-queue-started/data-created）与真实开始执行时刻
      // （data-exec-started/data-video-started）。排队时长只作为内部基线，不再显示。
      function queueStartOf(el) {
        return parseTs(el.getAttribute("data-queue-started")) || parseTs(el.getAttribute("data-created"));
      }

      function execStartOf(el) {
        return parseTs(el.getAttribute("data-exec-started")) || parseTs(el.getAttribute("data-video-started"));
      }

      // 括号里只给"执行"分解（不含排队时长；用户要求不显示排队时长）
      function execBreak(execSecs) {
        if (!(execSecs > 0)) {
          return "";
        }
        return "（执行 " + fmtDuration(execSecs) + "）";
      }

      function refreshElapsed() {
        var now = Date.now();
        var TERMINAL = ["completed", "failed", "cancelled", "interrupted"];
        // 只显示"运行中已用/完成总耗时"；排队时长不显示（排队状态由卡片上方的"排队中"标签表达）
        document.querySelectorAll("[data-elapsed-total]").forEach(function (el) {
          var started = parseTs(el.getAttribute("data-started"));
          var ended = parseTs(el.getAttribute("data-ended"));
          var status = el.getAttribute("data-status") || "";
          var staticLabel = el.getAttribute("data-static") || "";
          var ownCard = el.closest("[data-workflow-card]");
          var isQueued = ownCard
            ? ownCard.getAttribute("data-workflow-status") === "queued"
            : (status === "queued");
          var queueStart = queueStartOf(el);
          var execStart = execStartOf(el);
          var hasQueue = !!(queueStart && execStart && execStart > queueStart);
          var startAll = hasQueue ? queueStart : (execStart || started);
          if (isQueued && !ended) {
            el.textContent = "";            // 排队中：不显示排队时长
            return;
          }
          // 终态（完成/失败/取消/中断）一律按起止快照显示，绝不实时计时——
          // 中断任务 ended 已由后端兜底回写；轮询快照也可能先到，双保险
          if (TERMINAL.indexOf(status) !== -1 && ended) {
            if (!startAll) {
              el.textContent = "总耗时 " + staticLabel;
              return;
            }
            // 口径（用户要求）：总耗时只算执行时间（API + 预运行 + 视频生成），不含排队等待
            var totalSecs = (execStart && ended > execStart)
              ? Math.max(0, (ended - execStart) / 1000)
              : Math.max(0, (ended - startAll) / 1000);
            el.textContent = "总耗时 " + fmtDuration(totalSecs);
            return;
          }
          if (startAll && !ended) {
            // 运行中：显示已用时长（括号里只给执行分解，不含排队）
            // 运行中同样只显示执行时间：执行开始时间还没落盘时才退回创建时间
            var runningFrom = execStart || startAll;
            var usedSecs = Math.max(0, (now - runningFrom) / 1000);
            el.innerHTML = '<span class="elapsed-dot"></span>已用 ' + fmtDuration(usedSecs);
            return;
          }
          if (status === "queued") {
            el.textContent = "";            // 排队中：不显示排队时长
            return;
          }
          var created = parseTs(el.getAttribute("data-created"));
          var terminalFailed = ["failed", "cancelled", "interrupted"].indexOf(status) !== -1;
          var executed = !!(execStart && (!created || execStart > created));
          if (terminalFailed && !executed) {
            // 失败/中断且从未执行（还在排队时就结束了）：不显示时长，避免误导成运行时间
            el.textContent = "未执行（结束时尚未开始生成）";
          } else if (startAll && ended) {
            var secsAll = Math.max(0, (ended - startAll) / 1000);
            el.textContent = "总耗时 " + fmtDuration(secsAll)
              + execBreak(hasQueue ? Math.max(0, (ended - execStart) / 1000) : 0);
          } else {
            el.textContent = "总耗时 " + staticLabel;
          }
        });
        document.querySelectorAll("[data-elapsed-stage]").forEach(function (el) {
          var started = parseTs(el.getAttribute("data-started"));
          var ended = parseTs(el.getAttribute("data-ended"));
          var status = el.getAttribute("data-status") || "";
          var staticLabel = el.getAttribute("data-static") || "";
          if (TERMINAL.indexOf(status) !== -1 && ended) {
            // 终态按起止快照显示，不实时计时
            var head2 = staticLabel.split("，耗时")[0];
            var headIsDuration = /^\d|^--/.test(head2.trim()); // staticLabel 本身就是纯时长时不再前缀重复
            el.textContent = (head2 && !headIsDuration ? head2 + "，" : "") + "耗时 " + fmtDuration((ended - started) / 1000);
            return;
          }
          if (started && !ended) {
            var head = staticLabel.split("，耗时")[0];
            el.textContent = (head ? head + "，" : "") + "阶段已用 " + fmtDuration((now - started) / 1000);
            return;
          }
          if (!started && !ended && staticLabel.indexOf("耗时 --") !== -1) {
            // 未进入视频生成阶段（失败/中断在生成前）
            el.textContent = "未进入视频生成阶段";
            return;
          }
          el.textContent = staticLabel;
        });
        document.querySelectorAll("[data-project-elapsed]").forEach(function (box) {
          var card = box.closest("[data-workflow-card]");
          var queued = card && card.getAttribute("data-workflow-status") === "queued";
          var hasTotal = box.querySelector("[data-elapsed-total]");
          var hasStage = box.querySelector("[data-elapsed-stage]");
          var totalText = hasTotal ? hasTotal.textContent : "";
          var stageText = hasStage ? hasStage.textContent : "";
          if (queued && hasStage) {
            stageText = "";
          }
          // 没有任何时长可显示时：耗时区不可见但保留占位（is-empty 用 visibility:hidden），
          // 保证所有卡片的下方控件（token/终态/按钮）位置完全一致（用户要求）
          box.hidden = false;
          box.classList.toggle("is-empty", !((hasTotal && totalText) || (hasStage && stageText)));
        });
      }

      // 轮询到的新快照若带耗时字段，同步更新静态基线。
      var syncElapsedFromWorkflow = function (card, workflow) {
        var total = card.querySelector("[data-elapsed-total]");
        var stage = card.querySelector("[data-elapsed-stage]");
        if (total) {
          if (workflow.one_click_elapsed_label != null) {
            total.setAttribute("data-static", workflow.one_click_elapsed_label || "");
          }
          if (workflow.one_click_elapsed_started_at != null) {
            total.setAttribute("data-started", workflow.one_click_elapsed_started_at || "");
          }
          if (workflow.one_click_elapsed_ended_at != null) {
            total.setAttribute("data-ended", workflow.one_click_elapsed_ended_at || "");
          }
          if (workflow.one_click_video_generation_started_at != null) {
            total.setAttribute("data-video-started", workflow.one_click_video_generation_started_at || "");
          }
          if (workflow.status) {
            total.setAttribute("data-status", workflow.status);
          }
        }
        // 执行开始时刻（与项目页同源）：入队时刻 queued_at、第一次真正开跑 exec_started_at/stage_started_at。
        // 总耗时只算执行（用户要求），所以 exec 基线优先取 exec_started_at。
        if (total) {
          if (workflow.queued_at) {
            total.setAttribute("data-queue-started", workflow.queued_at);
          }
          if (workflow.exec_started_at) {
            total.setAttribute("data-exec-started", workflow.exec_started_at);
          }
          if (workflow.stage_started_at) {
            total.setAttribute("data-video-started", workflow.stage_started_at);
          }
          if (workflow.status) {
            total.setAttribute("data-status", workflow.status);
          }
        }
        if (stage) {
          if (workflow.elapsed_label != null) {
            stage.setAttribute("data-static", workflow.elapsed_label || "");
          }
          if (workflow.elapsed_started_at != null) {
            stage.setAttribute("data-started", workflow.elapsed_started_at || "");
          }
          if (workflow.elapsed_ended_at != null) {
            stage.setAttribute("data-ended", workflow.elapsed_ended_at || "");
          }
          if (workflow.status) {
            stage.setAttribute("data-status", workflow.status);
          }
        }
      };
      window.__tkaiSyncElapsed = syncElapsedFromWorkflow;

      // 每页数量下拉：切换即带 group 与 size 重新加载（回到第 1 页）——只注册一次
      document.addEventListener("change", function (e) {
        var sel = e.target;
        if (!sel || !sel.matches || !sel.matches("[data-page-size-select]")) { return; }
        var url = new URL(window.location.href);
        url.searchParams.set("size", sel.value);
        url.searchParams.set("page", "1");
        window.location.href = url.pathname + "?" + url.searchParams.toString();
      });
      refreshElapsed();
      window.setInterval(refreshElapsed, 1000);
    })();

    (function () {
      // 拖拽多文件上传：原视频区 + 两个产品图区 + 全窗口兜底接收
      function addFilesToImageInput(input, imgs) {
        if (!input || !imgs.length) { return 0; }
        var dt = new DataTransfer();
        Array.prototype.slice.call(input.files || []).forEach(function (f) { dt.items.add(f); });
        imgs.forEach(function (f) { dt.items.add(f); });
        input.files = dt.files;
        input.dispatchEvent(new Event("change", { bubbles: true }));
        return imgs.length;
      }
      function bindDrop(target, handler) {
        if (!target) { return; }
        ["dragenter", "dragover"].forEach(function (ev) {
          target.addEventListener(ev, function (e) {
            e.preventDefault(); e.stopPropagation();
            target.style.outline = "3px dashed #4a7dff";
          });
        });
        ["dragleave", "drop"].forEach(function (ev) {
          target.addEventListener(ev, function (e) {
            e.preventDefault(); e.stopPropagation();
            target.style.outline = "";
          });
        });
        target.addEventListener("drop", function (e) {
          var files = Array.prototype.slice.call((e.dataTransfer && e.dataTransfer.files) || []);
          if (files.length) { handler(files); }
        });
      }
      // 原视频区（用 id 精确定位，避免多面板误绑）
      var videoPanel = document.getElementById("homeVideoUpload");
      bindDrop(videoPanel ? videoPanel.closest(".creator-field") : null, function (files) {
        var video = files.find(function (f) { return f.type.indexOf("video/") === 0; });
        var input = document.getElementById("homeVideoUpload");
        if (video && input) {
          var dt = new DataTransfer();
          dt.items.add(video);
          input.files = dt.files;
          input.dispatchEvent(new Event("change", { bubbles: true }));
        }
      });
      // 产品图区：gallery 与 input 同属一个 creator-field，从 input 反查（页面上有多个同名面板）
      [["originalReferenceMedia"], ["creativeReferenceMedia"]].forEach(function (pair) {
        var input = document.getElementById(pair[0]);
        if (!input) { return; }
        var field = input.closest(".creator-field");
        var gallery = field ? field.querySelector("[data-product-image-gallery]") : null;
        bindDrop(gallery, function (files) {
          var imgs = files.filter(function (f) { return f.type.indexOf("image/") === 0; });
          addFilesToImageInput(input, imgs);
        });
      });
      // 全窗口兜底：拖到页面任意位置都能接收（视频进原视频区，图片进当前模式的产品图区）
      window.addEventListener("dragover", function (e) { e.preventDefault(); });
      window.addEventListener("drop", function (e) {
        e.preventDefault();
        var files = Array.prototype.slice.call((e.dataTransfer && e.dataTransfer.files) || []);
        if (!files.length) { return; }
        var videos = files.filter(function (f) { return f.type.indexOf("video/") === 0; });
        var imgs = files.filter(function (f) { return f.type.indexOf("image/") === 0; });
        if (videos.length) {
          var vInput = document.getElementById("homeVideoUpload");
          var dtv = new DataTransfer();
          videos.slice(0, 1).forEach(function (f) { dtv.items.add(f); });
          if (vInput) {
            vInput.files = dtv.files;
            vInput.dispatchEvent(new Event("change", { bubbles: true }));
          }
        }
        if (imgs.length) {
          var mode = (document.querySelector('input[name="creation_mode"]:checked') || {}).value || "clone";
          var imgInput = document.getElementById(mode === "adapt" ? "creativeReferenceMedia" : "originalReferenceMedia");
          if (imgInput && !imgInput.disabled) {
            addFilesToImageInput(imgInput, imgs);
          }
        }
      });
    })();

    (function () {
      // 提交相关配置记忆（画幅/分辨率/时长/次数/导出名）
      var CFG_KEY = "tkaiFormConfig";
      function saveCfg() {
        try {
          var cfg = {};
          var ar = document.querySelector('input[name="aspect_ratio"]:checked');
          if (ar) { cfg.aspect_ratio = ar.value; }
          var res = document.getElementById("projectH3Resolution");
          if (res) { cfg.h3_resolution = res.value; }
          var od = document.getElementById("originalVideoDuration");
          if (od) { cfg.originalVideoDuration = od.value; }
          var hd = document.getElementById("homeVideoDuration");
          if (hd && hd.value) { cfg.homeVideoDuration = hd.value; }
          var bn = document.getElementById("batchRunCount");
          if (bn) { cfg.batchRunCount = bn.value; }
          var en = document.getElementById("exportNameInput");
          if (en && en.value) { cfg.exportName = en.value; }
          var ed = document.getElementById("exportDirInput");
          if (ed) { cfg.exportDir = ed.value; }
          var ui = document.getElementById("exportUseImageName");
          if (ui) { cfg.exportUseImageName = ui.checked; }
          var wsb = document.getElementById("withSubtitlesCheckbox");
          if (wsb) { cfg.with_subtitles = wsb.checked; }
          var wmc = document.getElementById("withWatermarkCheckbox");
          if (wmc) { cfg.with_watermark = wmc.checked; }
          var wms = document.getElementById("watermarkModeSelect");
          if (wms) { cfg.watermark_mode = wms.value; }
          var ems = document.getElementById("comfyuiExecModeSelect");
          if (ems) { cfg.comfyui_exec_mode = ems.value; }
          localStorage.setItem(CFG_KEY, JSON.stringify(cfg));
        } catch (e) {}
      }
      function restoreCfg() {
        try {
          var cfg = JSON.parse(localStorage.getItem(CFG_KEY) || "{}");
          if (cfg.aspect_ratio) {
            var ar = document.querySelector('input[name="aspect_ratio"][value="' + cfg.aspect_ratio + '"]');
            if (ar && !ar.disabled) {
              ar.checked = true;
              ar.dispatchEvent(new Event("change", { bubbles: true }));
            }
          }
          if (cfg.h3_resolution) {
            var res = document.getElementById("projectH3Resolution");
            if (res) { res.value = cfg.h3_resolution; }
          }
          if (cfg.originalVideoDuration) {
            var od = document.getElementById("originalVideoDuration");
            if (od) { od.value = cfg.originalVideoDuration; od.dispatchEvent(new Event("input", { bubbles: true })); }
          }
          if (cfg.homeVideoDuration) {
            var hd = document.getElementById("homeVideoDuration");
            if (hd) { hd.value = cfg.homeVideoDuration; }
          }
          if (cfg.batchRunCount) {
            var bn = document.getElementById("batchRunCount");
            if (bn) { bn.value = cfg.batchRunCount; }
          }
          if (cfg.exportName) {
            var en = document.getElementById("exportNameInput");
            if (en) { en.value = cfg.exportName; }
          }
          if (cfg.exportDir !== undefined && cfg.exportDir !== null) {
            var ed = document.getElementById("exportDirInput");
            if (ed && !ed.value) { ed.value = cfg.exportDir; }
          }
          if (cfg.exportUseImageName !== undefined) {
            var ui = document.getElementById("exportUseImageName");
            if (ui) { ui.checked = !!cfg.exportUseImageName; }
          }
          var wsb2 = document.getElementById("withSubtitlesCheckbox");
          if (wsb2 && cfg.with_subtitles !== undefined) { wsb2.checked = !!cfg.with_subtitles; }
          var wmc2 = document.getElementById("withWatermarkCheckbox");
          if (wmc2 && cfg.with_watermark !== undefined) { wmc2.checked = !!cfg.with_watermark; }
          var wms2 = document.getElementById("watermarkModeSelect");
          if (wms2 && cfg.watermark_mode) { wms2.value = cfg.watermark_mode; }
          var ems2 = document.getElementById("comfyuiExecModeSelect");
          if (ems2) {
            var sv = (window.__tkaiUiPrefs || {}).comfyui_exec_mode || cfg.comfyui_exec_mode;
            if (sv) { ems2.value = sv; }
          }
          if (wmc2 && wms2) { wms2.style.display = wmc2.checked ? "" : "none"; }
        } catch (e) {}
      }
      restoreCfg();
      document.addEventListener("change", function (e) {
        var t = e.target;
        if (!t) { return; }
        if (t.name === "creation_mode" || t.name === "aspect_ratio" || t.id === "projectH3Resolution" ||
            t.id === "originalVideoDuration" || t.id === "batchRunCount" || t.id === "projectEnhanceResolution" ||
            t.id === "withSubtitlesCheckbox" || t.id === "withWatermarkCheckbox" || t.id === "watermarkModeSelect" ||
            t.id === "comfyuiExecModeSelect") {
          window.__tkaiSaveServerPrefs && window.__tkaiSaveServerPrefs();
          saveCfg();
        }
        if (t.id === "withWatermarkCheckbox") {
          var wmsSel = document.getElementById("watermarkModeSelect");
          if (wmsSel) { wmsSel.style.display = t.checked ? "" : "none"; }
        }
      });
      document.addEventListener("input", function (e) {
        if (e.target && (e.target.id === "exportNameInput" || e.target.id === "exportDirInput" || e.target.id === "homeVideoDuration")) { saveCfg(); }
      });
    })();

    (function () {
      // 创作方式刷新后记忆
      try {
        var savedMode = localStorage.getItem("tkaiCreationMode");
        if (savedMode) {
          var savedRadio = document.querySelector('input[name="creation_mode"][value="' + savedMode + '"]');
          if (savedRadio && !savedRadio.checked && !savedRadio.disabled) {
            savedRadio.checked = true;
            savedRadio.dispatchEvent(new Event("change", { bubbles: true }));
          }
        }
      } catch (e) {}
      Array.prototype.forEach.call(document.querySelectorAll('input[name="creation_mode"]'), function (r) {
        r.addEventListener("change", function () {
          var c = document.querySelector('input[name="creation_mode"]:checked');
          try { localStorage.setItem("tkaiCreationMode", c ? c.value : "clone"); } catch (e) {}
        });
      });
    })();

    (function () {
      var bmAll = document.getElementById("batchModeAll");
      var bmPer = document.getElementById("batchModePerImage");
      if (bmAll && bmPer) {
        bmAll.addEventListener("change", function () {
          if (bmAll.checked) { bmPer.checked = false; }
        });
        bmPer.addEventListener("change", function () {
          if (bmPer.checked) { bmAll.checked = false; }
          if (!bmPer.checked && !bmAll.checked) { bmAll.checked = true; }
        });
      }
    })();

    (function () {
      // 创建项目表单：AJAX 提交，不跳转不刷新，保留页面内容与滚动位置。
      // 提交结果通过页面顶部提示条展示（自适应容器宽度），提交后表单内容保留。
      var creatorForm = document.querySelector("[data-creator-form]");
      if (!creatorForm) {
        return;
      }
      var homeNotice = document.querySelector("[data-home-notice]");
      var overlay = document.getElementById("loadingOverlay");

      function showNotice(message, isError) {
        if (!homeNotice) {
          return;
        }
        homeNotice.textContent = message;
        homeNotice.classList.toggle("error", Boolean(isError));
        homeNotice.classList.toggle("success", !isError);
        homeNotice.hidden = false;
        try {
          homeNotice.scrollIntoView({behavior: "smooth", block: "center"});
        } catch (e) {}
      }

      function restoreUI() {
        if (overlay) {
          overlay.style.display = "none";
        }
        document.querySelectorAll('button[type="submit"]').forEach(function (button) {
          button.disabled = false;
          button.style.opacity = "";
        });
        delete creatorForm.dataset.creationSubmitting;
      }

      creatorForm.addEventListener("submit", async function (event) {
        event.preventDefault();
        if (creatorForm.dataset.creationSubmitting === "true") {
          return; // 提交中，防重复
        }
        creatorForm.dataset.creationSubmitting = "true";

        // 把点击的按钮值（workflow_mode）写入表单，随 FormData 一起提交
        var submitter = event.submitter;
        if (submitter && submitter.name) {
          var shadow = creatorForm.querySelector(
            'input[type="hidden"][data-submitter-shadow="true"][name="' + submitter.name + '"]'
          );
          if (!shadow) {
            shadow = document.createElement("input");
            shadow.type = "hidden";
            shadow.name = submitter.name;
            shadow.setAttribute("data-submitter-shadow", "true");
            creatorForm.appendChild(shadow);
          }
          shadow.value = submitter.value || "";
        }

        // 先确保剧情 brief 已填充（兼容"自动生成"勾选，不依赖其他监听器的执行顺序），
        // 再构造 FormData，杜绝勾选状态下提交空剧情导致"请填写创作剧情脚本"失败
        var briefTa = creatorForm.querySelector('textarea[name="original_story_brief"]');
        var autoCb = document.getElementById("autoGenerateBriefCheckbox");
        var briefWasAuto = false;
        if (autoCb && autoCb.checked && briefTa && !briefTa.value.trim()) {
          briefTa.value = (window.__tkaiAutoBriefPlaceholder && window.__tkaiAutoBriefPlaceholder())
            || "请根据我上传的产品图片，自动生成一段带货剧情短剧脚本。";
          briefTa.dispatchEvent(new Event("input", { bubbles: true }));
          briefWasAuto = true;
        }
        if (autoCb && autoCb.checked && briefTa && /^请根据我上传的产品图片/.test(briefTa.value.trim())) {
          briefWasAuto = true;
        }
        var formData = new FormData(creatorForm);
        // 勾选框：未勾选时浏览器不发送该字段，显式写 0 让后端明确"不加"，避免误读成默认开
        var wsbEl = document.getElementById("withSubtitlesCheckbox");
        var wmcEl = document.getElementById("withWatermarkCheckbox");
        formData.set("with_subtitles", (wsbEl && wsbEl.checked) ? "1" : "0");
        formData.set("with_watermark", (wmcEl && wmcEl.checked) ? "1" : "0");
        if (wmcEl && wmcEl.checked) {
          formData.set("watermark_mode", (document.getElementById("watermarkModeSelect") || {}).value || "both");
        } else {
          formData.delete("watermark_mode");
        }
        var isOriginal = String(formData.get("creation_mode") || "") === "original";
        if (isOriginal) {
          // 双保险：无论 FormData 对隐藏 file input 的收集结果如何，
          // 一律以输入框当前 files 为准重新附加产品图片
          try {
            formData.delete("reference_media");
            var pfInput = document.getElementById("originalReferenceMedia");
            Array.prototype.slice.call((pfInput && pfInput.files) || []).forEach(function (f) {
              formData.append("reference_media", f, f.name);
            });
          } catch (e) {}
        }
        var bmAllEl = document.getElementById("batchModeAll");
        var bmPerEl = document.getElementById("batchModePerImage");
        var countEl = document.getElementById("batchRunCount");
        var batchMode = (bmPerEl && bmPerEl.checked) ? "per-image" : "all";
        var runCount = 1;
        try { runCount = parseInt((countEl && countEl.value) || "1", 10) || 1; } catch (e) { runCount = 1; }
        runCount = Math.max(1, Math.min(200, runCount));

        function randomHex32() {
          var s = "";
          for (var i = 0; i < 32; i++) { s += "0123456789abcdef"[Math.floor(Math.random() * 16)]; }
          return s;
        }

        // 构建“提交单元”列表：每个单元 = 一次入队（null 表示不带图）
        var unitList = [];
        var imgFiles = formData.getAll("reference_media").filter(function (v) { return v && v.name; });
        if (!isOriginal) {
          unitList = [formData]; // 非 original 模式维持单次提交（formData 原样）
        } else if (!imgFiles.length) {
          for (var ci = 0; ci < runCount; ci++) { unitList.push(null); }
        } else if (batchMode === "per-image") {
          imgFiles.forEach(function (f) {
            for (var ci = 0; ci < runCount; ci++) { unitList.push([f]); }
          });
        } else {
          for (var ci2 = 0; ci2 < runCount; ci2++) { unitList.push(imgFiles); }
        }

        var collectedSuffixes = [];
        var exportNameEl = document.getElementById("exportNameInput");
        var exportNameBase = exportNameEl ? exportNameEl.value.trim() : "";
        var exportUseImg = !!(document.getElementById("exportUseImageName") || {}).checked;
        var exportDirEl = document.getElementById("exportDirInput");
        var exportDirVal = exportDirEl ? exportDirEl.value.trim() : "";
        try {
          var okCount = 0, failCount = 0, lastMsg = "";
          for (var u = 0; u < unitList.length; u++) {
            if (unitList.length > 1) {
              showNotice("正在提交任务 " + (u + 1) + " / " + unitList.length + " …", false);
            }
            var submitBody;
            if (!isOriginal) {
              submitBody = formData;
            } else {
              submitBody = new FormData();
              formData.forEach(function (v, k) {
                if (k === "reference_media" || k === "reference_roles" || k === "creation_request_id") { return; }
                if (typeof v === "object" && v !== null && v.name !== undefined) { return; }
                submitBody.append(k, v);
              });
              var unit = unitList[u];
              if (Array.isArray(unit)) {
                // 角色标注必须与本次真正提交的图片同序：每图 1 个任务时只能带这一张图自己的角色
                var roleByKey = {};
                try {
                  var roleList = (typeof window.__tkaiProductImageRoleList === "function")
                    ? window.__tkaiProductImageRoleList() : [];
                  roleList.forEach(function (it) {
                    var f = it.file || {};
                    roleByKey[[f.name, f.size, f.lastModified, f.type].join("::")] = it.role || "character";
                  });
                } catch (e) { roleByKey = {}; }
                unit.forEach(function (f) {
                  submitBody.append("reference_media", f, f.name);
                  var key = [f.name, f.size, f.lastModified, f.type].join("::");
                  submitBody.append("reference_roles", roleByKey[key] || "character");
                });
              }
              // 同批每个任务独立随机剧情：自动模式下每个任务重新抽一套随机设定，杜绝同批雷同
              if (autoCb && autoCb.checked && briefTa && briefWasAuto) {
                submitBody.set("original_story_brief", (window.__tkaiAutoBriefPlaceholder && window.__tkaiAutoBriefPlaceholder()) || briefTa.value);
              }
              submitBody.set("creation_request_id", randomHex32());
            }
            var response = await fetch(creatorForm.action, {
              method: "POST",
              body: submitBody,
              headers: {
                "Accept": "application/json",
                "X-Requested-With": "XMLHttpRequest"
              }
            });
            // 后端成功/失败均 302 到 /?message=...，跟随重定向后从最终 URL 取提示
            var finalUrl = new URL(response.url);
            var msg = finalUrl.searchParams.get("message");
            if (msg) {
              okCount++;
              lastMsg = decodeURIComponent(msg);
              var sm = lastMsg.match(/-([0-9a-f]{8})/);
              if (sm) {
                collectedSuffixes.push(sm[1]);
                // 项目名 = 指定导出名/图片文件名 + 时间戳（替代乱码后缀名）
                try {
                  var renameBase = "";
                  var unitFiles = unitList[u];
                  if (exportUseImg) {
                    var f0 = Array.isArray(unitFiles) ? unitFiles[0] : (unitFiles || null);
                    if (f0 && f0.name) { renameBase = f0.name.replace(/\.[^.]+$/, ""); }
                  } else if (exportNameBase) {
                    renameBase = exportNameBase;
                  }
                  if (renameBase) {
                    var wsResp = await fetch("/projects/workflow-status", { headers: { "Accept": "application/json" }, cache: "no-store" });
                    var wsData = await wsResp.json();
                    var fullId = null;
                    (wsData.projects || []).forEach(function (p) {
                      if (p.id.slice(-8) === sm[1]) { fullId = p.id; }
                    });
                    if (fullId) {
                      var dd = new Date();
                      var pad2 = function (n) { return (n < 10 ? "0" : "") + n; };
                      var tsName = pad2(dd.getHours()) + "" + pad2(dd.getMinutes()) + "" + pad2(dd.getSeconds());
                      await fetch("/projects/" + fullId + "/rename", {
                        method: "POST",
                        headers: { "Content-Type": "application/x-www-form-urlencoded" },
                        body: "project_name=" + encodeURIComponent(renameBase + "_" + tsName)
                      });
                    }
                  }
                } catch (e) {}
              }
            } else {
              failCount++;
              try {
                var payload = await response.json();
                lastMsg = (payload && (payload.error || payload.message)) || lastMsg;
              } catch (e) {
                lastMsg = "提交失败（HTTP " + response.status + "）";
              }
            }
          }
          if (okCount > 0) {
            var suffix = unitList.length > 1
              ? "（已提交 " + okCount + " / " + unitList.length + " 个任务" + (failCount ? "，失败 " + failCount + " 个" : "") + "）"
              : "";
            showNotice(lastMsg + suffix, failCount > 0);
            if (collectedSuffixes.length) {
              var exportItems = collectedSuffixes.map(function (sfx) {
                return { suffix: sfx, name_base: exportNameBase, use_image_name: exportUseImg, export_dir: exportDirVal };
              });
              fetch("http://127.0.0.1:8899/register-export", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ items: exportItems })
              }).catch(function () {});
            }
            startStoryWatch();
          } else {
            showNotice(lastMsg || "提交失败，请重试。", true);
          }
        } catch (error) {
          showNotice("提交失败：" + (error && error.message ? error.message : "请检查网络后重试。"), true);
        } finally {
          restoreUI();
        }
      });

      // ---- 剧情脚本自动展示 ----
      // 提交后不跳转页面；轮询新项目出现，抓到剧情脚本后自动显示在表单下方。
      var knownProjectIds = new Set();
      document.querySelectorAll(".project-item .project-card-id").forEach(function (el) {
        knownProjectIds.add(el.textContent.trim());
      });
      var storyPanel = null;
      var storyTimer = null;
      var storyFileTries = 0;

      function ensureStoryPanel() {
        if (storyPanel) {
          return storyPanel;
        }
        storyPanel = document.createElement("div");
        storyPanel.className = "notice";
        storyPanel.style.cssText =
          "margin-top:16px; white-space:pre-wrap; word-break:break-word; " +
          "max-height:420px; overflow:auto; text-align:left; line-height:1.6;";
        storyPanel.setAttribute("data-story-panel", "");
        var anchor = creatorForm ? creatorForm.parentElement : document.body;
        anchor.appendChild(storyPanel);
        return storyPanel;
      }

      function showStoryStatus(text) {
        var panel = ensureStoryPanel();
        panel.innerHTML = "";
        var closeBtn = document.createElement("button");
        closeBtn.type = "button";
        closeBtn.setAttribute("aria-label", "关闭剧情面板");
        closeBtn.textContent = "×";
        closeBtn.style.cssText = "float:right; border:none; background:transparent; font-size:18px; line-height:1; cursor:pointer; color:#98a4bb; margin-left:10px;";
        closeBtn.addEventListener("click", function () {
          if (storyTimer) { window.clearInterval(storyTimer); storyTimer = null; }
          panel.hidden = true;
        });
        var body = document.createElement("span");
        body.textContent = text;
        panel.appendChild(closeBtn);
        panel.appendChild(body);
        panel.hidden = false;
      }

      function formatStory(file) {
        var text = file.text;
        if (file.name === "original_story_brief.txt") {
          return text;
        }
        function pick(obj, keys) {
          for (var i = 0; i < keys.length; i++) {
            if (obj[keys[i]] !== undefined && obj[keys[i]] !== null && obj[keys[i]] !== "") {
              return obj[keys[i]];
            }
          }
          return "";
        }
        function describeItem(item, idx) {
          if (typeof item === "string") {
            return item;
          }
          if (!item || typeof item !== "object") {
            return "";
          }
          var head = pick(item, ["shot_id", "name", "title", "shot_name", "scene_name"]);
          var body = pick(item, ["script", "content", "dialogue", "caption", "prompt", "description", "text"]);
          if (!head && !body) {
            return "";
          }
          if (typeof body === "object") {
            body = JSON.stringify(body);
          }
          var lines = [];
          if (head) lines.push("【" + head + "】");
          if (body) lines.push(String(body));
          return lines.join("\n");
        }
        try {
          var data = JSON.parse(text);
          var parts = [];
          if (Array.isArray(data)) {
            data.forEach(function (item, idx) {
              var s = describeItem(item, idx);
              if (s) parts.push(s);
            });
            if (parts.length) return parts.join("\n\n");
          } else if (data && typeof data === "object") {
            var shots = pick(data, ["shots", "scenes", "acts", "segments", "story", "script"]);
            if (Array.isArray(shots)) {
              shots.forEach(function (item, idx) {
                var s = describeItem(item, idx);
                if (s) parts.push(s);
              });
              if (parts.length) return parts.join("\n\n");
            }
            var brief = pick(data, ["title", "story_title", "brief", "summary", "synopsis"]);
            if (typeof brief === "string" && brief) return brief;
            var overview = pick(data, ["overview", "logline", "setup"]);
            if (typeof overview === "string" && overview) return overview;
          }
          return JSON.stringify(data, null, 2);
        } catch (e) {
          return text;
        }
      }

      async function fetchStoryFile(projectId) {
        // 仅抓 AI 生成的剧情脚本；original_story_brief.txt 是用户填写内容，不作为生成结果
        // 该端点(/files/<name>)不提供项目根目录文件，历史上这里每次都 404（控制台刷屏）。
        // 剧情脚本已由服务端渲染进页面，这里不再发任何请求。
        var candidates = [];
        for (var i = 0; i < candidates.length; i++) {
          try {
            var r = await fetch("/projects/" + projectId + "/files/" + candidates[i], {
              headers: {"Accept": "application/json, text/plain, */*"},
              cache: "no-store"
            });
            if (!r.ok) {
              continue;
            }
            var text = await r.text();
            if (!text || text.length < 10) {
              continue;
            }
            return {name: candidates[i], text: text};
          } catch (e) {}
        }
        return null;
      }

      function startStoryWatch() {
        if (storyTimer) {
          return;
        }
        showStoryStatus("⏳ 任务已提交，智能体正在结合产品图片生成剧情脚本，生成后自动显示在此…");
        var targetId = null;
        var tick = 0;
        storyTimer = window.setInterval(async function () {
          tick++;
          try {
            var resp = await fetch("/", {headers: {"Accept": "text/html"}, cache: "no-store"});
            var html = await resp.text();
            var doc = new DOMParser().parseFromString(html, "text/html");
            var items = Array.prototype.slice.call(doc.querySelectorAll(".project-item"));
            // 目标项目：优先本次新创建的项目；刷新场景则跟踪第一个运行中项目
            if (!targetId) {
              for (var i = 0; i < items.length; i++) {
                var idEl = items[i].querySelector(".project-card-id");
                var id = idEl ? idEl.textContent.trim() : "";
                if (!id) continue;
                if (!knownProjectIds.has(id)) {
                  targetId = id;
                  break;
                }
              }
              if (!targetId) {
                for (var k = 0; k < items.length; k++) {
                  var kEl = items[k].querySelector(".project-card-id");
                  if (kEl && items[k].getAttribute("data-workflow-card")) {
                    targetId = kEl.textContent.trim();
                    break;
                  }
                }
              }
            }
            if (!targetId) {
              if (tick > 90) {
                window.clearInterval(storyTimer);
                storyTimer = null;
                showStoryStatus("暂未发现运行中的任务，稍后可在项目列表中查看。");
              }
              return;
            }
            storyFileTries++;
            // fetchStoryFile() 不再发任何请求（剧情脚本已由服务端渲染/轮询快照更新，
            // 旧实现逐个探测 /files/<name> 每轮 5 次 404 刷控制台）；这里只等终态提示
            var file = await fetchStoryFile(targetId);
            if (file) {
              window.clearInterval(storyTimer);
              storyTimer = null;
              showStoryStatus("🎬 智能体已生成剧情脚本：\n\n" + formatStory(file));
              return;
            }
            if (storyFileTries >= 2 && !items.some(function (it) {
                  var el = it.querySelector(".project-card-id");
                  return el && el.textContent.trim() === targetId && it.getAttribute("data-workflow-card");
                })) {
              // 目标项目卡已不在运行清单：剧情脚本交给轮询的列表刷新展示，停止本监视器
              window.clearInterval(storyTimer);
              storyTimer = null;
              showStoryStatus("剧情脚本已就绪后会在项目卡与项目页显示。");
              return;
            }
            // 任务已结束但未生成脚本 → 停止并提示
            var terminal = null;
            for (var j = 0; j < items.length; j++) {
              var jEl = items[j].querySelector(".project-card-id");
              if (jEl && jEl.textContent.trim() === targetId) {
                var term = items[j].querySelector(".project-terminal-state");
                if (term) terminal = term.textContent.trim();
                break;
              }
            }
            if (terminal) {
              window.clearInterval(storyTimer);
              storyTimer = null;
              showStoryStatus("⚠️ 任务已结束，未生成剧情脚本（" + terminal.slice(0, 80) + "）。\n可进入项目详情页查看。");
              return;
            }
            if (storyFileTries > 180) {
              window.clearInterval(storyTimer);
              storyTimer = null;
              showStoryStatus("剧情脚本仍在生成中，可稍后在项目详情页中查看与编辑。");
            }
          } catch (e) {}
        }, 8000);
      }

    })();

    (function () {
      // Auto-generate different product-promo story briefs (SQ-style rules).
      // 带货文案生成规则：来自配置中心（经本机启动器 /get-config 读取），留空则用内置随机话术
      var AUTO_BRIEF_RULES = window.AUTO_BRIEF_RULES || "";
      var THEMES = [
        "重生复仇：主角被亲友背叛后重生，靠产品逆袭打脸所有人",
        "逆袭爽剧：底层小人物被当众羞辱，用产品当场翻盘惊艳全场",
        "豪门恩怨：家族内斗中被轻视的主角，用产品拿下关键订单赢回家产",
        "神豪商战：普通打工人撞破上司阴谋，用产品截胡大单逆转局势",
        "悬疑反转：众人认定主角偷窃/造假，结尾用产品证据反转自证",
        "都市逆袭：外卖员/保洁被客户刁难，用产品解决难题收获尊重",
        "职场打脸：新人被老员工排挤，用产品方案当众获得老板认可",
        "乡村创业：返乡青年被村民质疑，用产品带动全村赚钱扬眉吐气",
        "闺蜜局：姐妹聚会中被比下去，用产品惊艳全场成为焦点",
        "家庭矛盾：婆媳/父子争执因产品化解，温情反转收尾"
      ];
      var OPENERS = [
        "第1秒炸点开场：反派嚣张逼人到绝境（冲突台词直接甩出）",
        "第1秒炸点开场：先甩最爽的结果画面，再倒放回放",
        "第1秒炸点开场：主角被当众羞辱/冤枉的高压场面先行",
        "第1秒炸点开场：悬念前置——一句质疑台词+所有人注视镜头"
      ];
      var CONFLICTS = [
        "反派/阻力嚣张到极点，把主角压到情绪谷底；主角憋屈、怀疑、失败感拉满",
        "主角陷入两难绝境（时间/资金/名誉压力），围观者冷嘲热讽",
        "关键时刻设备/方案掉链子，主角被逼到死角，全场等着看笑话"
      ];
      var PRODUCT_MOMENTS = [
        "产品此刻作为金手指登场：一个动作直接改变局面（醒神/破局/定局/翻盘），必须承载救场动作，禁止只展示不救场",
        "产品作为救场道具登场：主角用它当场解决别人解决不了的问题，让局势逆转",
        "产品作为破局关键：别人束手无策时主角亮出产品，结果立竿见影"
      ];
      var FORESHADOW = [
        "中途埋1个细节伏笔（信息差：产品上的一个细节/主角的一个小动作），结尾用它打脸",
        "埋一个不起眼的线索（包装/气味/标签），结尾反转时引爆",
        "埋一句看似随意的台词，结尾成为打脸关键证据"
      ];
      var TWISTS = [
        "强反转·强打脸：兑现伏笔，反派/质疑者猝不及防被当众打脸",
        "反转打脸：真相揭晓，之前嘲笑主角的人全部闭嘴",
        "反转收网：所有人以为主角输了，最后3秒剧情急转，主角大获全胜"
      ];
      var CLOSERS = [
        "爽点兑现+双收口：展示用产品后的完美结果形成前后对比，品牌口播+逼单钩子（今晚就试）",
        "爽点兑现+悬念收口：结果对比拉满后口播产品名+想看下集/今晚就试",
        "双收口：产品带来完美结局的特写+一句品牌口播+行动号召"
      ];
      var STYLES = [
        "整体节奏：30秒竖屏9:16，6段每段约5秒，每段至少1个情绪/剧情变化，全程0废话台词",
        "整体节奏：快剪卡点，情绪密度拉满，每3秒必须有变化，台词精简有力",
        "整体节奏：强情绪递进，配乐随剧情升级，结尾定格产品高光画面"
      ];
      function pick(arr) { return arr[Math.floor(Math.random() * arr.length)]; }
      function currentDuration() {
        var durInput = document.getElementById("originalVideoDuration");
        var v = durInput ? parseInt(durInput.value, 10) : 30;
        if (!v || v < 5) { v = 30; }
        return v;
      }
      function applyBriefRules(rules, dur, segments, descText) {
        var base = "请根据我上传的产品图片";
        if (descText) { base = base + "和商品描述（" + descText + "）"; }
        var filled = String(rules)
          .replace(/\{时长\}/g, dur + "秒")
          .replace(/\{分段\}/g, String(segments))
          .trim();
        return base + "，按以下规则自由创作 " + dur + "秒带货短视频剧本：\n" + filled
          + "\n\n输出要求：总时长贴合" + dur + "秒，建议按每段约5秒拆成" + segments + "段；结合上传的产品图片信息，输出完整剧本（含人物设定、机位切换提示、人物台词、简短动作、产品如何自然参与、结尾购买引导）；产品是剧情唯一主角，根据产品真实特性选择最自然的用法；不编造功效、价格与销量。";
      }
      function briefModeNoCard() {
        var sel = document.getElementById("autoBriefModeSelect");
        return !!(sel && !sel.hidden && sel.value === "none");
      }
      function pickCardForMode() {
        if (briefModeNoCard()) { return null; }
        var cfg = window.AUTO_BRIEF_CARDS;
        if (!cfg || !cfg.enabled || !cfg.cards || !cfg.cards.length) { return null; }
        var enabled = cfg.cards.filter(function (c) { return c.enabled !== false; });
        if (!enabled.length) { return null; }
        var sel = document.getElementById("autoBriefModeSelect");
        var mode = sel && !sel.hidden ? sel.value : "random";
        if (mode && mode !== "random") {
          for (var i = 0; i < enabled.length; i++) {
            if (enabled[i].id === mode) { return enabled[i]; }
          }
        }
        return enabled[Math.floor(Math.random() * enabled.length)];
      }
      function buildCardBrief(card, dur, segments, descText) {
        var base = "请根据我上传的产品图片";
        if (descText) { base = base + "和商品描述（" + descText + "）"; }
        var L = [];
        L.push("【角色设定 · System】你现在完全代入以下角色进行创作，输出中不要跳出角色、不要解释写法。");
        L.push("【角色名】" + (card.name || "带货短剧编剧"));
        if (card.description) { L.push("【身份描述】" + card.description); }
        if (card.rules) { L.push("【模仿规则（必须严格遵守）】" + card.rules); }
        if (card.format) { L.push("【输出格式】" + card.format); }
        if (card.example) { L.push("【示例剧本（模仿其风格与结构，不要照抄内容）】\n" + card.example); }
        L.push("【本次任务】" + base + "，创作一支" + dur + "秒带货短视频剧本。总时长贴合" + dur + "秒，建议按每段约5秒拆成" + segments + "段；产品是剧情唯一主角，根据产品真实特性选择最自然的用法；结尾自然带出产品名与购买引导；不编造功效、价格与销量。现在开始输出完整剧本。");
        return L.join("\n");
      }
      function briefSpec() {
        var dur = currentDuration();
        var plan = window.__tkaiVideoPlan || null;
        var segments = (plan && plan.shot_count) ? plan.shot_count : Math.max(1, Math.round(dur / 5));
        var ar = document.querySelector('input[name="aspect_ratio"]:checked');
        var arVal = ar ? ar.value : "9:16";
        var sel = document.getElementById("projectH3Resolution");
        return {
          dur: dur, segments: segments, arVal: arVal,
          arText: arVal === "16:9" ? "横屏 16:9" : "竖屏 9:16",
          px: arVal === "16:9" ? "横版 864×480 / 1344×768" : "竖版 480×864 / 768×1344",
          res: sel ? (sel.value || "480p") : "480p",
          clip: (plan && plan.clip_seconds) ? plan.clip_seconds : 5,
          cap: (plan && plan.max_clip_seconds) ? plan.max_clip_seconds : 8
        };
      }
      function specBriefLine(sp) {
        return "【成片规格（用户已选定，须严格按此生成）】目标视频时长 " + sp.dur + " 秒（自动分段：拆成 " + sp.segments + " 个镜头，单段 " + sp.clip + " 秒，单段最长 " + sp.cap + " 秒）；目标画幅 " + sp.arText + "（" + sp.px + "）；输出分辨率 " + sp.res + "。剧本的分镜构图、场景调度与台词节奏都要贴合该画幅与时长。";
      }
      function generateBrief() {
        var sp = briefSpec();
        var dur = sp.dur;
        var segments = sp.segments;
        var desc = document.querySelector("[data-product-description]");
        var descText = desc ? desc.value.trim() : "";
        var modeCard = briefModeNoCard() ? null : pickCardForMode();
        var card = (!briefModeNoCard() && window.AUTO_BRIEF_CARD && window.AUTO_BRIEF_CARD.enabled) ? window.AUTO_BRIEF_CARD : null;
        var rules = String(window.AUTO_BRIEF_RULES || "").trim();
        var text;
        if (modeCard) { text = buildCardBrief(modeCard, dur, segments, descText); }
        else if (card) { text = buildCardBrief(card, dur, segments, descText); }
        else if (rules) { text = applyBriefRules(rules, dur, segments, descText); }
        else {
          text = [
            "【" + dur + "秒" + (sp.arVal === "16:9" ? "横屏" : "竖屏") + "剧情化带货短剧 · 自动生成】",
            "目标时长：" + dur + "秒，建议按每段约5秒拆成" + segments + "段左右，总时长贴合" + dur + "秒。",
            "题材：" + pick(THEMES),
            "结构：" + pick(OPENERS) + "；" + pick(CONFLICTS) + "；" + pick(PRODUCT_MOMENTS) + "；" + pick(FORESHADOW) + "；" + pick(TWISTS) + "；" + pick(CLOSERS),
            "要求：" + pick(STYLES) + "；产品作为金手指改变故事结果，不编造功效/价格/销量；台词口语化，适合口播；结尾必须有品牌名口播。",
            "请基于以上设定，结合上传的产品图片信息，输出完整约" + dur + "秒的带货剧情脚本（含人物关系、分幕剧情、关键台词、产品如何参与、反转与结局）。"
          ].join("\n");
        }
        return text + "\n\n" + specBriefLine(sp);
      }
      var btn = document.getElementById("autoBriefButton");
      var ta = document.querySelector('textarea[name="original_story_brief"]');
      var note = document.querySelector("[data-auto-brief-note]");
      var autoCb = document.getElementById("autoGenerateBriefCheckbox");
      var RANDOM_PERSONAS = ["邻居", "店员", "同学", "骑行路人", "快递员", "外卖员", "保安大叔", "前台", "网约车司机", "摊主", "游客", "实习生", "店主", "健身教练", "护士", "房东", "咖啡师", "保洁阿姨", "网约乘客", "试吃顾客"];
      var RANDOM_TONES = ["冷幽默", "温和走心", "轻松闲聊", "简约写实"];
      var RANDOM_PLACES = ["家中客厅", "办公室工位", "街边小店", "露营营地", "厨房", "茶室", "大学宿舍", "私家车里", "酒店房间", "小区楼下", "店铺柜台", "民宿院子", "高铁上", "健身房", "菜市场", "山顶露营", "海边大排档", "公司会议室", "公园长椅", "机场贵宾厅"];
      var RANDOM_USES = ["自己日常用", "给长辈送礼", "办公室下午茶分享", "旅行随身携带", "节日伴手礼", "招待客户", "探望亲友", "搬家暖房", "生日惊喜", "周末宅家", "出差路上", "宴请宾客"];
      var RANDOM_FORMS = ["双机位对话剧本"];
      function autoBriefPlaceholder() {
        var sp = briefSpec();
        var dur = sp.dur;
        var segments = sp.segments;
        var desc = document.querySelector("[data-product-description]");
        var descText = desc ? desc.value.trim() : "";
        var rules = String(window.AUTO_BRIEF_RULES || "").trim();
        var modeCard = briefModeNoCard() ? null : pickCardForMode();
        var card = (!briefModeNoCard() && window.AUTO_BRIEF_CARD && window.AUTO_BRIEF_CARD.enabled) ? window.AUTO_BRIEF_CARD : null;
        var text;
        if (modeCard) { text = buildCardBrief(modeCard, dur, segments, descText); }
        else if (card) { text = buildCardBrief(card, dur, segments, descText); }
        else if (rules) { text = applyBriefRules(rules, dur, segments, descText); }
        var pc = Math.floor(Math.random() * 3) + 1;
        var base = "请根据我上传的产品图片";
        if (descText) { base = base + "和商品描述（" + descText + "）"; }
        if (!text) { text = base + "，自由创作一段" + dur + "秒带货短视频剧本（双机位拍摄）。本次随机设定（仅供参考，若与产品实际特性冲突必须以产品为准自动调整）：人物" + pc + "人（其中1人身份为「" + pick(RANDOM_PERSONAS) + "」，性别/年龄/面容神态/穿搭随机）；剧情基调=" + pick(RANDOM_TONES) + "；发生地点=" + pick(RANDOM_PLACES) + "（室内/户外随机）。产品用途必须根据产品图片/商品描述中产品的真实特性选择最合理自然的用法，产品是剧情唯一主角，严禁把产品塞进不相关的场景。形式：双机位对话剧本，写清机位切换提示（【A机位】/【B机位】）、人物台词、简短动作。全部要素每次随机不重复套路，剧情100%原创；总时长贴合" + dur + "秒，建议按每段约5秒拆成" + segments + "段；自然带出带货产品（不是硬广），不编造功效、价格与销量，结尾自然带出产品名与购买引导。请输出完整剧本。";
        }
        return text + "\n\n" + specBriefLine(sp);
      }
      window.__tkaiAutoBriefPlaceholder = autoBriefPlaceholder;
      function syncBriefRequirement() {
        if (autoCb && autoCb.checked) {
          ta.removeAttribute("required");
          ta.setAttribute("placeholder", "已启用自动生成：可留空，提交后智能体将结合产品图片与商品描述自动生成专属带货剧情（也可手动填写覆盖）");
        } else {
          ta.setAttribute("required", "");
          ta.setAttribute("placeholder", "请输入原创剧情设想或已有剧情脚本。建议包含：主要人物与关系、开场钩子、核心冲突、剧情升级、产品怎样自然参与、反转和结局；台词可详细也可只写关键句。");
        }
      }
      if (autoCb && ta) {
        try {
          if (localStorage.getItem("tkaiAutoBriefChecked") === "1") {
            autoCb.checked = true;
          }
        } catch (e) {}
        autoCb.addEventListener("change", function () {
          try { localStorage.setItem("tkaiAutoBriefChecked", autoCb.checked ? "1" : "0"); } catch (e) {}
        });
        autoCb.addEventListener("change", syncBriefRequirement);
        syncBriefRequirement();
        var creatorForm = ta.closest("form");
        if (creatorForm) {
          creatorForm.addEventListener("submit", function () {
            if (autoCb.checked && !ta.value.trim()) {
              ta.value = autoBriefPlaceholder();
            }
          });
        }
      }
      function selectedImageNames() {
        var fileInput = document.getElementById("originalReferenceMedia");
        if (!fileInput || !fileInput.files || !fileInput.files.length) { return []; }
        return Array.prototype.map.call(fileInput.files, function (f) { return f.name; });
      }
      function buildImageBrief() {
        var dur = currentDuration();
        var segments = Math.max(1, Math.round(dur / 5));
        var desc = document.querySelector("[data-product-description]");
        var descText = desc ? desc.value.trim() : "";
        var imgs = selectedImageNames();
        var parts = [];
        parts.push("【" + dur + "秒竖屏剧情化带货短剧 · 按产品图片与商品描述生成】");
        parts.push("目标时长：" + dur + "秒，建议按每段约5秒拆成" + segments + "段左右，总时长贴合" + dur + "秒。");
        if (imgs.length) {
          parts.push("产品图片（请逐一理解图片中的产品实物、包装、卖点信息）：" + imgs.join("、") + "。");
        }
        if (descText) {
          parts.push("商品描述/卖点：" + descText + "。");
        }
        parts.push("要求：按爆款短剧 SQ 规则创作（R1 黄金开场 0-5秒：冲突台词/炸点开场；R2 冲突升级+产品登场 5-10秒：阻力嚣张、产品作为金手指救场；R3 蓄力谷底 10-15秒：憋屈+埋信息差伏笔；R4 产品破局 15-20秒；R5 强反转打脸 20-25秒：兑现伏笔；R6 爽点+双收口 25-30秒：品牌口播逼单或悬念钩子；R7 信息密度：每段至少1个情绪变化、0废话台词）。台词口语化，适合口播；产品必须改变故事结果，不编造功效/价格/销量。");
        parts.push("请只围绕上传的产品图片和商品描述中的真实产品信息创作剧情，输出完整剧本（含人物关系、分幕剧情、关键台词、产品如何参与、反转与结局）。");
        return parts.join("\n");
      }
      function collectImageDataUrls() {
        var fileInput = document.getElementById("originalReferenceMedia");
        var files = Array.prototype.slice.call((fileInput && fileInput.files) || []).slice(0, 5);
        return Promise.all(files.map(function (f) {
          return new Promise(function (resolve) {
            var reader = new FileReader();
            reader.onload = function () { resolve(String(reader.result || "")); };
            reader.onerror = function () { resolve(""); };
            reader.readAsDataURL(f);
          });
        }));
      }
      var _prefTimer = null;
      window.__tkaiSaveServerPrefs = function () {
        if (_prefTimer) { clearTimeout(_prefTimer); }
        _prefTimer = setTimeout(function () {
          var ar = document.querySelector('input[name="aspect_ratio"]:checked');
          var cm = document.querySelector('input[name="creation_mode"]:checked');
          var res = document.getElementById("projectH3Resolution");
          var enh = document.getElementById("projectEnhanceResolution");
          var dur = document.getElementById("originalVideoDuration");
          var bat = document.getElementById("batchRunCount");
          fetch("/api/style-prefs", {method: "POST", headers: {"Content-Type": "application/json"},
            body: JSON.stringify({ui_prefs: {
              creation_mode: cm ? cm.value : "clone",
              aspect_ratio: ar ? ar.value : "9:16",
              h3_resolution: res ? res.value : "480p",
              enhance_resolution: enh ? enh.value : "",
              video_duration: dur ? dur.value : "30",
              batch_run_count: bat ? bat.value : "1",
              comfyui_exec_mode: (document.getElementById("comfyuiExecModeSelect") || {}).value || "auto"}})}).catch(function () {});
        }, 800);
      };
      var briefTicker = null;
      var briefStartedAt = 0;
      var briefStatus = "";
      function briefElapsed() {
        return Math.max(0, Math.round((Date.now() - briefStartedAt) / 1000));
      }
      function renderBriefBusy() {
        var secs = briefElapsed();
        btn.textContent = "⏳ " + (briefStatus || "正在生成剧情") + " · 已等待 " + secs + " 秒";
        if (secs >= 45) { btn.textContent += "（模型较慢，可继续等待或点右侧「取消」）"; }
      }
      function setBriefBusy(busy, status) {
        btn.disabled = busy;
        briefStatus = status || "";
        if (briefTicker) { clearInterval(briefTicker); briefTicker = null; }
        if (busy) {
          briefStartedAt = Date.now();
          renderBriefBusy();
          briefTicker = setInterval(renderBriefBusy, 1000);
        } else {
          btn.textContent = "✨ 按产品图片+描述生成带货剧情（可编辑）";
        }
      }
      function briefNote(text) {
        if (note) { note.textContent = text; }
      }
      function cleanThinking(text) {
        return String(text || "").replace(/\s+/g, " ").slice(-120);
      }
      // 流式生成：把"模型思考中/正在写剧情"实时显示出来，避免看起来像卡死
      async function generateBriefStream(dataUrls, descText, dur) {
        var ctrl = new AbortController();
        var cancelBtn = document.querySelector("[data-brief-cancel]");
        if (cancelBtn) {
          cancelBtn.hidden = false;
          cancelBtn.onclick = function () { ctrl.abort(); };
        }
        var resp = await fetch("http://127.0.0.1:8899/ark-brief-stream", {
          method: "POST",
          headers: { "Content-Type": "application/json", "Accept": "text/event-stream" },
          body: JSON.stringify({ images: dataUrls.filter(Boolean), description: descText, duration: dur, theme: "" }),
          signal: ctrl.signal
        });
        if (!resp.ok || !resp.body) { throw new Error("stream unavailable"); }
        var reader = resp.body.getReader();
        var decoder = new TextDecoder("utf-8");
        var buf = "";
        var story = "";
        while (true) {
          var chunk = await reader.read();
          if (chunk.done) { break; }
          buf += decoder.decode(chunk.value, { stream: true });
          var parts = buf.split("\n\n");
          buf = parts.pop();
          for (var i = 0; i < parts.length; i++) {
            var line = parts[i].trim();
            if (!line.startsWith("data:")) { continue; }
            var evt;
            try { evt = JSON.parse(line.slice(5).trim()); } catch (e) { continue; }
            if (evt.type === "status") {
              briefStatus = "已提交给模型，等待输出";
              renderBriefBusy();
              briefNote("已提交给模型 " + (evt.model || "") + "，等待它开始输出…（模型在思考时不会有文字，属正常现象）");
            } else if (evt.type === "thinking") {
              briefStatus = "模型思考中";
              renderBriefBusy();
              briefNote("🧠 模型思考中（已 " + briefElapsed() + " 秒，思考 " + (evt.chars || 0) + " 字）：" + cleanThinking(evt.text));
            } else if (evt.type === "text") {
              briefStatus = "正在写剧情";
              renderBriefBusy();
              briefNote("✍️ 正在写剧情…（已生成 " + (evt.length || 0) + " 字，用时 " + briefElapsed() + " 秒）");
            } else if (evt.type === "done") {
              story = evt.story || "";
              briefNote("✅ 生成完成：思考 " + (evt.thinking_chars || 0) + " 字，用时 " + (evt.elapsed || briefElapsed()) + " 秒。");
            } else if (evt.type === "error") {
              throw new Error(evt.error || "模型返回错误");
            }
          }
        }
        if (cancelBtn) { cancelBtn.hidden = true; }
        return story;
      }
      if (btn && ta) {
        btn.addEventListener("click", function () {
          var desc = document.querySelector("[data-product-description]");
          var descText = desc ? desc.value.trim() : "";
          var imgs = selectedImageNames();
          if (!imgs.length && !descText) {
            if (note) { note.textContent = "请先在上方添加产品图片（或填写商品描述），智能体将按图片实物与描述生成专属带货剧情，而不是通用模板。"; }
            ta.focus();
            return;
          }
          if (btn.disabled) { return; }
          setBriefBusy(true, "正在准备产品图片");
          if (note) { note.textContent = "正在调用智能体，结合" + (imgs.length ? imgs.length + "张产品图片" : "") + (imgs.length && descText ? "与" : "") + (descText ? "商品描述" : "") + "为你创作专属剧情，每次点击都会不同…"; }
          var dur = currentDuration();
          collectImageDataUrls().then(function (dataUrls) {
            // 优先用流式接口：能把"模型思考中/正在写剧情"实时显示出来
            return generateBriefStream(dataUrls, descText, dur).catch(function (streamErr) {
              briefNote("流式接口不可用（" + (streamErr && streamErr.message ? streamErr.message : "未知原因") + "），改用普通接口继续生成…");
              return fetch("http://127.0.0.1:8899/ark-brief", {
                method: "POST",
                headers: { "Content-Type": "application/json", "Accept": "application/json" },
                body: JSON.stringify({
                  images: dataUrls.filter(Boolean),
                  description: descText,
                  duration: dur,
                  theme: ""
                })
              }).then(function (r) { return r.json(); }).then(function (payload) {
                if (payload && payload.ok && payload.story && payload.story.trim()) {
                  return payload.story.trim();
                }
                throw new Error((payload && payload.error) || "empty story");
              });
            });
          }).then(function (story) {
            if (story && story.trim()) {
              ta.value = story.trim();
              ta.dispatchEvent(new Event("input", { bubbles: true }));
              if (note) { note.textContent = "已生成专属剧情并填入上方文本框（每次点击内容都不同）。可直接编辑后点「一键成片」提交；重新点击本按钮可换一段新剧情。"; }
            } else {
              throw new Error("empty story");
            }
          }).catch(function () {
            ta.value = buildImageBrief();
            ta.dispatchEvent(new Event("input", { bubbles: true }));
            var autoCb2 = document.getElementById("autoGenerateBriefCheckbox");
            if (autoCb2 && !autoCb2.checked) {
              autoCb2.checked = true;
              syncBriefRequirement();
            }
            if (note) { note.textContent = "AI 即时生成暂不可用（本机辅助服务未运行或网络异常），已填入剧情要求，提交后智能体将结合图片生成完整剧本。"; }
          }).then(function () {
            setBriefBusy(false);
          });
        });
      }
    })();
    // 分段计划提示 + 商品描述清空（独立 IIFE，互不影响）
    (function () {
      var hint = document.querySelector("[data-video-plan-hint]");
      var durEl = document.getElementById("originalVideoDuration");
      var resEl = document.getElementById("projectH3Resolution");
      var timer = null;
      function currentPlan() { return window.__tkaiVideoPlan || null; }
      function refresh() {
        if (!hint) { return; }
        var mode = (document.querySelector('input[name="creation_mode"]:checked') || {}).value || "original";
        var d = 0;
        if (mode === "original") {
          d = durEl && durEl.value ? Number(durEl.value) : 0;
        } else if (mode === "adapt") {
          var hdEl = document.getElementById("homeVideoDuration");
          d = hdEl && hdEl.value ? Number(hdEl.value) : 0;
        }
        var r = resEl ? (resEl.value || "480p") : "480p";
        var arEl = document.querySelector('input[name="aspect_ratio"]:checked');
        var ar = arEl ? arEl.value : "9:16";
        if (!d || d < 5) { hint.style.display = "none"; return; }
        var enhEl = document.getElementById("projectEnhanceResolution");
        var subCb = document.getElementById("withSubtitlesCheckbox");
        var wmCb = document.getElementById("withWatermarkCheckbox");
        fetch("/api/video-plan?duration=" + encodeURIComponent(d) +
              "&resolution=" + encodeURIComponent(r) +
              "&aspect_ratio=" + encodeURIComponent(ar) +
              "&enhance_resolution=" + encodeURIComponent((enhEl && enhEl.value) || "") +
              "&with_subtitles=" + (subCb && subCb.checked ? "1" : "0") +
              "&with_watermark=" + (wmCb && wmCb.checked ? "1" : "0"),
              { headers: { "Accept": "application/json" }, cache: "no-store" })
          .then(function (x) { return x.json(); })
          .then(function (p) {
            if (!p || !p.shot_count) { hint.style.display = "none"; return; }
            window.__tkaiVideoPlan = p;
            hint.textContent = "自动分段：" + p.shot_count + " 个镜头 × " + p.clip_seconds +
              " 秒（目标 " + p.duration + " 秒 → 成片约 " + p.output_seconds + " 秒）｜" +
              p.hardware_note + "｜预计 " + p.estimated_minutes + " 分钟（含后处理，受模型速度影响）";
            hint.style.display = "";
          })
          .catch(function () { hint.style.display = "none"; });
      }
      function schedule() { if (timer) { clearTimeout(timer); } timer = setTimeout(refresh, 250); }
      [durEl, resEl].forEach(function (el) {
        if (!el) { return; }
        el.addEventListener("input", schedule);
        el.addEventListener("change", schedule);
      });
      var hdEl2 = document.getElementById("homeVideoDuration");
      if (hdEl2) {
        hdEl2.addEventListener("input", schedule);
        hdEl2.addEventListener("change", schedule);
      }
      ["projectEnhanceResolution", "withSubtitlesCheckbox", "withWatermarkCheckbox", "watermarkModeSelect"].forEach(function (id) {
        var el = document.getElementById(id);
        if (el) {
          el.addEventListener("change", schedule);
        }
      });
      document.querySelectorAll('input[name="aspect_ratio"]').forEach(function (el) {
        el.addEventListener("change", schedule);
      });
      refresh();

      var briefClear = document.querySelector("[data-clear-story-brief]");
      var briefTa = document.querySelector('textarea[name="original_story_brief"]');
      if (briefClear && briefTa) {
        briefClear.addEventListener("click", function () {
          if (!briefTa.value.trim() || window.confirm("确定清空创作剧情脚本吗？清空后可按产品图片重新生成。")) {
            briefTa.value = "";
            briefTa.dispatchEvent(new Event("input", { bubbles: true }));
            briefTa.focus();
          }
        });
      }
      var clearBtn = document.querySelector("[data-clear-product-description]");
      var descEl = document.querySelector("[data-product-description]");
      if (clearBtn && descEl) {
        clearBtn.addEventListener("click", function () {
          if (!descEl.value.trim() || window.confirm("确定清空商品描述吗？")) {
            descEl.value = "";
            descEl.dispatchEvent(new Event("input", { bubbles: true }));
            descEl.focus();
          }
        });
      }
    })();
  </script>
  <script>
  // 运行卡片上的「生成过程最后一行」：轮询 GET /projects/<id>/stream?tail=1&follow=0（短请求，
  // 不占长连接），把最后一行按类型着色显示（thinking 灰 / text 正文 / error 红 / retry 橙 /
  // done 绿），卡片整块可点进项目页看完整实时过程；没有过程日志的项目卡片不显示这一行。
  (function () {
    if (!window.fetch || !window.TextDecoder) { return; }
    var KIND_CLASS = { thinking: "is-thinking", text: "is-text", status: "is-status",
                       retry: "is-retry", error: "is-error", done: "is-done", stall: "is-stall" };
    var KIND_LABEL = { thinking: "思考", text: "正文", status: "状态", retry: "重试",
                       error: "错误", done: "完成", stall: "等待" };
    var inFlight = {};
    var MAX_CHARS = 90;

    function parseLastEvent(text) {
      // 只取最后一个事件块；一屏卡片几条数据，够用且不必做流式解析
      var blocks = text.split("\n\n");
      for (var i = blocks.length - 1; i >= 0; i--) {
        var lines = blocks[i].split("\n");
        var dataLines = [];
        for (var j = 0; j < lines.length; j++) {
          var ln = lines[j];
          if (ln.indexOf("data:") === 0) { dataLines.push(ln.slice(5).trim()); }
        }
        if (!dataLines.length) { continue; }
        try {
          return JSON.parse(dataLines.join("\n"));
        } catch (error) { continue; }
      }
      return null;
    }

    async function refreshLast(el) {
      var url = el.getAttribute("data-stream-url") || "";
      if (!url || inFlight[url]) { return; }
      inFlight[url] = true;
      try {
        var response = await fetch(url + "?tail=1&follow=0", {
          headers: { "Accept": "text/event-stream" }, cache: "no-store"
        });
        if (!response.ok) { return; }
        var evt = parseLastEvent(await response.text());
        if (!evt || evt.synthetic) { return; }
        var kind = String(evt.kind || evt.type || "status");
        var text = String(evt.text || "").replace(/\s+/g, " ").trim();
        if (!text) { return; }
        var kindEl = el.querySelector("[data-stream-last-kind]");
        var textEl = el.querySelector("[data-stream-last-text]");
        if (kindEl) { kindEl.textContent = KIND_LABEL[kind] || "过程"; }
        if (textEl) {
          textEl.textContent = text.length > MAX_CHARS ? text.slice(0, MAX_CHARS) + "…" : text;
        }
        el.className = "project-stream-last " + (KIND_CLASS[kind] || "is-status");
        el.hidden = false;
        el.setAttribute("title", "生成过程最后一行（" + (KIND_LABEL[kind] || "过程") + "）：" + text
          + "　— 点这里进项目页看完整实时过程");
      } catch (error) {
        // 静默：下一轮再试（项目可能刚创建、目录还没建立）
      } finally {
        inFlight[url] = false;
      }
    }

    function tick() {
      // 页面不可见时跳过（后台标签不必刷新"最后一行"）；16+ 卡并发快照曾挤压浏览器
      // 对 127.0.0.1 的 6 连接池，让翻页/取消都排队——现在只在可见时刷、且串行错峰
      if (document.hidden) { return; }
      var els = Array.prototype.slice.call(document.querySelectorAll("[data-stream-last]"));
      els.forEach(function (el, i) {
        window.setTimeout(function () { refreshLast(el); }, i * 120);   // 每卡错峰 120ms
      });
    }
    window.setInterval(tick, 4000);
    window.setTimeout(tick, 400);
    document.addEventListener("visibilitychange", function () {
      if (!document.hidden) { tick(); }
    });
  })();
  </script>
  <style>
    /* 运行卡片上的生成过程最后一行（在深色 9:16 运行预览里）：等宽、单行截断、按类型着色，整块可点 */
    .project-stream-last { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 8px;
      border: 1px solid rgba(180, 200, 255, .28); border-radius: 7px; background: rgba(255, 255, 255, .08);
      text-decoration: none; min-width: 0;
      font-family: Consolas, "Courier New", monospace; font-size: 12px; line-height: 1.5; }
    .project-stream-last-kind { flex: 0 0 auto; padding: 0 6px; border-radius: 999px; font-size: 11px;
      background: rgba(255, 255, 255, .16); color: #cbd5e1; font-family: inherit; }
    .project-stream-last-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden;
      text-overflow: ellipsis; color: #dbe4ff; }
    .project-stream-last.is-thinking .project-stream-last-text { color: #9aa8c7; }
    .project-stream-last.is-text .project-stream-last-text { color: #e6ecff; }
    .project-stream-last.is-status .project-stream-last-text { color: #9cc4ff; }
    .project-stream-last.is-retry .project-stream-last-text { color: #ffc078; font-weight: 700; }
    .project-stream-last.is-error .project-stream-last-text { color: #ff8f8f; font-weight: 700; }
    .project-stream-last.is-done .project-stream-last-text { color: #7ee2a8; font-weight: 700; }
    .project-stream-last.is-stall .project-stream-last-text { color: #ffd479; }
    .project-stream-last.is-retry .project-stream-last-kind { background: rgba(255, 192, 120, .22); color: #ffc078; }
    .project-stream-last.is-error .project-stream-last-kind { background: rgba(255, 143, 143, .22); color: #ff8f8f; }
    .project-stream-last.is-done .project-stream-last-kind { background: rgba(126, 226, 168, .2); color: #7ee2a8; }
    .project-stream-last:hover { border-color: rgba(180, 200, 255, .55); background: rgba(255, 255, 255, .14); }
    textarea[name="original_story_brief"] { height: 132px !important; max-height: 132px !important; min-height: 132px !important; overflow-y: auto !important; }
    textarea[name="product_description"] { height: 60px !important; max-height: 60px !important; min-height: 60px !important; overflow-y: auto !important; }
    .creator-submit-actions button[value="one_click"] {
      font-size: 13px !important; font-weight: 780 !important;
      min-height: 44px !important; padding: 10px 22px !important; border-radius: 10px !important;
      background: linear-gradient(135deg, #ff8a3d, #ff5f2e) !important;
      color: #fff !important; border: none !important;
      box-shadow: 0 7px 16px rgba(255, 95, 46, .28) !important;
      cursor: pointer;
    }
    .creator-submit-actions button[value="one_click"]:hover { filter: brightness(1.06); }
    .creator-submit-actions button[value="one_click"]:disabled { opacity: .6; cursor: wait; }
  </style>
  {% if _prof.eula_version and not _prof.eula_accepted %}
  <div class="tkai-modal" id="eulaModal" role="dialog" aria-modal="true" aria-label="用户协议确认">
    <div class="tkai-modal__mask"></div>
    <div class="tkai-modal__box">
      <h3>开始使用前，请确认以下内容</h3>
      <ul>
        <li><b>服务协议</b>：本软件按订阅/积分使用，积分消耗按云端实际编排调用计费；编排失败全额退回，本地生成失败可免费重跑，不出片不扣分。</li>
        <li><b>内容责任</b>：AI 生成内容需自行确认真实、合法后再发布；软件会自动添加“AI 生成内容”标识，请勿移除。</li>
        <li><b>账号与设备</b>：一个账号绑定一台电脑；换机需在客户端内发起设备迁移（可能消耗积分）。</li>
        <li><b>隐私与数据</b>：上传的图片仅用于生成你的视频；运行状态（显卡/显存/ComfyUI 状态等）会脱敏上报用于排障，项目内容与成片不会上传云端。</li>
        <li><b>禁止行为</b>：禁止逆向、共享账号、绕过积分与二次分发作商业用途。</li>
      </ul>
      {% if _prof.eula_url %}<p><a href="{{ _prof.eula_url }}" target="_blank" rel="noopener">查看完整法律文本 ↗</a></p>{% endif %}
      <label class="tkai-agree"><input type="checkbox" id="eulaAgree"> <span>我已阅读并同意《用户服务协议》《隐私政策》与《素材授权与内容合规承诺》（版本 v{{ _prof.eula_version }}）</span></label>
      <div class="tkai-modal__err" id="eulaErr"></div>
      <div class="tkai-modal__act">
        <button type="button" class="btn primary" id="eulaOk" disabled>同意并继续</button>
      </div>
    </div>
  </div>
  {% endif %}

  <div class="tkai-modal" id="ledgerModal" style="display:none" role="dialog" aria-modal="true" aria-label="我的账单">
    <div class="tkai-modal__mask" data-ledger-close></div>
    <div class="tkai-modal__box" style="max-width:720px">
      <h3>我的账单</h3>
      <div id="ledgerSummary" style="color:#42506b;font-size:13.5px;margin:6px 0 10px"></div>
      <div style="max-height:46vh;overflow:auto"><table style="width:100%;border-collapse:collapse;font-size:13px" id="ledgerTable"></table></div>
      <div class="tkai-modal__act"><button type="button" class="btn secondary" data-ledger-close>关闭</button></div>
    </div>
  </div>

  <div class="tkai-modal" id="assetConsentModal" style="display:none" role="dialog" aria-modal="true" aria-label="图片处理告知">
    <div class="tkai-modal__mask"></div>
    <div class="tkai-modal__box" style="max-width:600px">
      <h3>上传图片前的告知与同意</h3>
      <ul>
        <li><b>接收方</b>：火山引擎（豆包大模型服务）。</li>
        <li><b>目的与方式</b>：仅把你上传的图片发送给该服务用于「识别产品/人物/场景特征」，用于生成本次视频。</li>
        <li><b>种类</b>：你主动上传的商品图、人物图、场景图（最多前 9 张参与识别）。</li>
        <li><b>处理与删除</b>：图片仅用于生成你的视频，不用于其它用途；生成完成后不做长期留存。</li>
        <li><b>你可以</b>：不上传含隐私的图片；随时停止使用本功能。</li>
      </ul>
      <label class="tkai-agree"><input type="checkbox" id="assetAgree"> <span>我已阅读并同意上述《素材第三方处理告知》（仅需确认一次）</span></label>
      <div class="tkai-modal__err" id="assetErr"></div>
      <div class="tkai-modal__act">
        <button type="button" class="btn secondary" data-asset-close>暂不上传</button>
        <button type="button" class="btn primary" id="assetOk" disabled>同意并继续</button>
      </div>
    </div>
  </div>

  <div class="tkai-modal" id="supportModal" style="display:none" role="dialog" aria-modal="true" aria-label="提交工单">
    <div class="tkai-modal__mask" data-support-close></div>
    <div class="tkai-modal__box" style="max-width:560px">
      <h3>提交工单</h3>
      <p style="margin:4px 0 10px;color:#66748c;font-size:13px">描述遇到的问题（可附截图说明文字）。提交后管理员会在「工单」中处理；账号与设备信息会自动附带。</p>
      <input class="config-input" id="stSubject" placeholder="标题（如：生成卡在第 2 个镜头）" style="width:100%;margin-bottom:8px">
      <textarea id="stContent" rows="5" placeholder="详细描述：操作步骤、报错文字、发生时间…" style="width:100%;font-family:inherit"></textarea>
      <div class="tkai-modal__err" id="stErr"></div>
      <div class="tkai-modal__act">
        <button type="button" class="btn secondary" data-support-close>取消</button>
        <button type="button" class="btn primary" id="stSend">提交</button>
      </div>
    </div>
  </div>
</main>
{% endblock %}