evomeme-dev 0.1.7

package/dist/canvas-public/cycle-detect.js

@@ -0,0 +1,166 @@
+/**
+ * 浏览器端：缩略灰度 + z-score + 点积，从前向后找最早高相似帧。
+ */
+
+function zscoreInPlace(vec) {
+  let sum = 0
+  for (let i = 0; i < vec.length; i++) sum += vec[i]
+  const mean = sum / vec.length
+  let varSum = 0
+  for (let i = 0; i < vec.length; i++) {
+    const d = vec[i] - mean
+    varSum += d * d
+  }
+  const std = Math.sqrt(varSum / vec.length) + 1e-8
+  for (let i = 0; i < vec.length; i++) vec[i] = (vec[i] - mean) / std
+  return vec
+}
+
+function featureFromImageData(imageData) {
+  const { data, width, height } = imageData
+  const n = width * height
+  const vec = new Float32Array(n)
+  for (let i = 0, p = 0; i < n; i++, p += 4) {
+    // ITU-R BT.601 亮度
+    vec[i] = data[p] * 0.299 + data[p + 1] * 0.587 + data[p + 2] * 0.114
+  }
+  return zscoreInPlace(vec)
+}
+
+function nccScore(a, b) {
+  const n = Math.min(a.length, b.length)
+  if (!n) return 0
+  let sum = 0
+  for (let i = 0; i < n; i++) sum += a[i] * b[i]
+  return sum / n
+}
+
+function waitEvent(target, event, { signal } = {}) {
+  return new Promise((resolve, reject) => {
+    if (signal?.aborted) {
+      reject(new DOMException('Aborted', 'AbortError'))
+      return
+    }
+    const onAbort = () => {
+      cleanup()
+      reject(new DOMException('Aborted', 'AbortError'))
+    }
+    const onOk = () => {
+      cleanup()
+      resolve()
+    }
+    const cleanup = () => {
+      target.removeEventListener(event, onOk)
+      signal?.removeEventListener('abort', onAbort)
+    }
+    target.addEventListener(event, onOk, { once: true })
+    signal?.addEventListener('abort', onAbort, { once: true })
+  })
+}
+
+async function seekVideo(video, time, signal) {
+  const duration = Number(video.duration)
+  const maxT = Number.isFinite(duration) && duration > 0 ? Math.max(0, duration - 1e-4) : time
+  const t = Math.min(Math.max(0, time), maxT)
+  if (Math.abs((video.currentTime || 0) - t) < 1e-4) return
+  const p = waitEvent(video, 'seeked', { signal })
+  video.currentTime = t
+  await p
+}
+
+function drawFeature(video, canvas, ctx, thumbWidth) {
+  const vw = video.videoWidth || 1
+  const vh = video.videoHeight || 1
+  const w = Math.max(8, Math.round(thumbWidth))
+  const h = Math.max(8, Math.round((vh / vw) * w))
+  if (canvas.width !== w) canvas.width = w
+  if (canvas.height !== h) canvas.height = h
+  ctx.drawImage(video, 0, 0, w, h)
+  return featureFromImageData(ctx.getImageData(0, 0, w, h))
+}
+
+/**
+ * @param {string} videoUrl
+ * @param {{
+ *   threshold?: number,
+ *   minGapSec?: number,
+ *   thumbWidth?: number,
+ *   onProgress?: (info: object) => void,
+ *   signal?: AbortSignal,
+ * }} [options]
+ * @returns {Promise<{ start: number, end: number, score: number, fps: number, scanned: number }>}
+ */
+export async function detectFirstCycle(videoUrl, options = {}) {
+  const threshold = Math.min(0.999, Math.max(0.5, Number(options.threshold) || 0.98))
+  const minGapSec = Math.max(0.05, Number(options.minGapSec) || 0.4)
+  const thumbWidth = Math.max(16, Math.round(Number(options.thumbWidth) || 96))
+  const onProgress = typeof options.onProgress === 'function' ? options.onProgress : null
+  const signal = options.signal
+
+  const video = document.createElement('video')
+  video.muted = true
+  video.playsInline = true
+  video.preload = 'auto'
+  video.crossOrigin = 'anonymous'
+
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d', { willReadFrequently: true })
+  if (!ctx) throw new Error('无法创建 canvas')
+
+  try {
+    const loaded = waitEvent(video, 'loadedmetadata', { signal })
+    video.src = videoUrl
+    video.load()
+    await loaded
+    if (!video.videoWidth || !Number.isFinite(video.duration) || video.duration <= 0) {
+      throw new Error('无法读取视频元数据')
+    }
+
+    const duration = video.duration
+    const step = 1 / 24
+    const minT = Math.min(duration - step, minGapSec)
+    if (!(minT > step)) {
+      throw new Error('视频太短，无法提取周期')
+    }
+
+    await seekVideo(video, 0, signal)
+    // 部分浏览器 seek(0) 后需一帧稳定
+    await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)))
+    const ref = drawFeature(video, canvas, ctx, thumbWidth)
+
+    let scanned = 0
+    for (let t = minT; t < duration - 1e-4; t += step) {
+      if (signal?.aborted) throw new DOMException('Aborted', 'AbortError')
+      await seekVideo(video, t, signal)
+      const feat = drawFeature(video, canvas, ctx, thumbWidth)
+      const score = nccScore(ref, feat)
+      scanned += 1
+      onProgress?.({
+        time: t,
+        score,
+        scanned,
+        duration,
+        threshold,
+      })
+      if (score >= threshold) {
+        return {
+          start: 0,
+          end: Math.min(t, duration),
+          score,
+          fps: 24,
+          scanned,
+          threshold,
+          minGapSec,
+        }
+      }
+    }
+
+    throw new Error(
+      `未找到相似度 ≥ ${(threshold * 100).toFixed(0)}% 的周期终点（已扫 ${scanned} 帧，最短间隔 ${minGapSec}s）`,
+    )
+  } finally {
+    video.pause()
+    video.removeAttribute('src')
+    video.load()
+  }
+}

package/dist/canvas-public/index.html

@@ -0,0 +1,395 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Image Canvas</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <body>
+    <div class="welcome" id="welcome">
+      <div class="welcome-card">
+        <p class="welcome-brand">Image Canvas</p>
+        <h1>打开工程目录</h1>
+        <p class="welcome-desc">
+          选择一个本地文件夹作为工程。画布、上传与生成结果会保存在该目录下的
+          <code>.image-canvas/</code> 中。
+        </p>
+        <button type="button" class="primary-btn" id="welcome-open-btn">打开工程…</button>
+        <div class="welcome-recent" id="welcome-recent" hidden>
+          <h2>最近打开</h2>
+          <ul id="welcome-recent-list"></ul>
+        </div>
+        <p class="welcome-error" id="welcome-error" hidden></p>
+      </div>
+    </div>
+
+    <div class="app" id="app" hidden>
+      <div class="canvas-pane">
+        <aside class="inspector" id="inspector" hidden>
+          <header class="inspector-header">
+            <h2 id="inspector-title">属性</h2>
+            <button type="button" class="ghost-btn" id="inspector-close" title="取消选中">×</button>
+          </header>
+          <div class="inspector-body" id="inspector-body"></div>
+        </aside>
+        <div class="canvas-main">
+          <div class="canvas-shell">
+            <div class="canvas-toolbar">
+              <div class="project-bar">
+                <span class="project-name" id="project-name" title="">未打开工程</span>
+                <button type="button" class="ghost-btn" id="switch-project-btn">切换工程</button>
+              </div>
+              <div class="toolbar-actions" id="toolbar-actions">
+                <button type="button" class="tool-btn" id="tool-add-assets">添加素材</button>
+                <button type="button" class="tool-btn" id="tool-image-gen" title="拖到画布指定位置创建图片生成元素">图片生成</button>
+                <button type="button" class="tool-btn" id="tool-video-gen" title="拖到画布指定位置创建视频生成元素">视频生成</button>
+                <button type="button" class="ghost-btn" id="reset-view">重置视图</button>
+              </div>
+            </div>
+            <div class="canvas-viewport" id="viewport">
+              <div class="canvas-world" id="world"></div>
+              <div class="marquee" id="marquee" hidden></div>
+            </div>
+          </div>
+          <div class="banner-error" id="banner-error" hidden></div>
+        </div>
+      </div>
+
+      <div class="ctx-menu" id="ctx-menu" hidden>
+        <button type="button" data-action="copy">复制</button>
+        <button type="button" data-action="paste" hidden>粘贴</button>
+        <button type="button" data-action="cutout" hidden>智能抠图</button>
+        <button type="button" data-action="interactive-edit" hidden>交互编辑</button>
+        <button type="button" data-action="layer-decomposition" hidden>大模型图层分离</button>
+        <button type="button" data-action="video-trim" hidden>裁剪视频</button>
+        <button type="button" data-action="video-cycle" hidden>智能周期提取</button>
+        <button type="button" data-action="video-to-sequence" hidden>序列帧化</button>
+        <button type="button" data-action="smart-split">智能切分</button>
+        <button type="button" data-action="manual-split">手动切分</button>
+        <button type="button" data-action="edit-sequence" hidden>在左侧编辑序列</button>
+        <button type="button" data-action="sequence-to-sheet" hidden>拼成单图</button>
+        <button type="button" data-action="ungroup-sequence" hidden>拆散为单图</button>
+        <button type="button" data-action="combine-sequence" hidden>组合为序列帧</button>
+        <button type="button" data-action="delete" class="ctx-danger">删除</button>
+      </div>
+
+      <div class="modal-backdrop modal-backdrop-dark" id="interactive-edit-modal" hidden>
+        <div class="modal-dialog modal-dialog-interactive-edit" role="dialog" aria-modal="true" aria-labelledby="interactive-edit-title">
+          <div class="seq-panel-head">
+            <strong id="interactive-edit-title">交互编辑</strong>
+            <button type="button" class="ghost-btn" id="interactive-edit-close">关闭</button>
+          </div>
+          <div class="interactive-editor-host" id="interactive-editor-host"></div>
+          <div class="interactive-edit-compose">
+            <label class="layer-decomposition-prompt" for="interactive-edit-prompt">
+              编辑要求
+              <textarea
+                id="interactive-edit-prompt"
+                rows="3"
+                placeholder="例如：将框选区域替换为木质宝箱，并保持其他内容不变"
+              ></textarea>
+            </label>
+            <p class="modal-hint">画面标记和文字会合并到参考图中，并使用 Pro 模型生成。</p>
+            <p class="modal-hint" id="interactive-edit-status" hidden></p>
+            <div class="modal-actions">
+              <button type="button" class="ghost-btn" id="interactive-edit-cancel">取消</button>
+              <button type="button" class="ghost-btn" id="interactive-edit-save">保存到画布</button>
+              <button type="button" class="tool-btn" id="interactive-edit-confirm">生成</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-backdrop modal-backdrop-dark" id="layer-decomposition-modal" hidden>
+        <div class="modal-dialog modal-dialog-layer-decomposition" role="dialog" aria-modal="true" aria-labelledby="layer-decomposition-title">
+          <div class="seq-panel-head">
+            <strong id="layer-decomposition-title">大模型图层分离</strong>
+            <button type="button" class="ghost-btn" id="layer-decomposition-close">关闭</button>
+          </div>
+          <div class="layer-decomposition-preview">
+            <img id="layer-decomposition-image" alt="待分离图片预览" />
+          </div>
+          <label class="layer-decomposition-prompt" for="layer-decomposition-prompt">
+            拆分要求
+            <textarea
+              id="layer-decomposition-prompt"
+              rows="4"
+              placeholder="例如：将人物、背景、文字分别拆分为可独立编辑的图层"
+            ></textarea>
+          </label>
+          <p class="modal-hint">模型会输出一张底图和最多 16 个透明 PNG 图层。</p>
+          <p class="modal-hint" id="layer-decomposition-status" hidden></p>
+          <div class="modal-actions">
+            <button type="button" class="ghost-btn" id="layer-decomposition-cancel">取消</button>
+            <button type="button" class="tool-btn" id="layer-decomposition-confirm">开始分离</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-backdrop modal-backdrop-dark" id="video-cycle-modal" hidden>
+        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="video-cycle-title">
+          <div class="seq-panel-head">
+            <strong id="video-cycle-title">智能周期提取</strong>
+            <button type="button" class="ghost-btn" id="video-cycle-close">关闭</button>
+          </div>
+          <p class="modal-hint">
+            以首帧为参考，从前向后寻找最早相似度达标的一帧并立即停止，再裁切为首个周期视频。
+          </p>
+          <label class="seq-field frame-extract-field">
+            相似度阈值
+            <input
+              type="number"
+              id="video-cycle-threshold"
+              min="50"
+              max="99.9"
+              step="0.1"
+              value="98"
+            />
+            <span class="frame-extract-range">%</span>
+          </label>
+          <label class="seq-field frame-extract-field">
+            最短周期
+            <input
+              type="number"
+              id="video-cycle-min-gap"
+              min="0.1"
+              max="10"
+              step="0.1"
+              value="0.4"
+            />
+            <span class="frame-extract-range">秒（避免开头相邻帧误命中）</span>
+          </label>
+          <p class="modal-hint" id="video-cycle-status" hidden></p>
+          <div class="modal-actions">
+            <button type="button" class="ghost-btn" id="video-cycle-cancel">取消</button>
+            <button type="button" class="tool-btn" id="video-cycle-confirm">开始提取</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-backdrop modal-backdrop-dark" id="smart-split-modal" hidden>
+        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="smart-split-title">
+          <div class="seq-panel-head">
+            <strong id="smart-split-title">智能切分</strong>
+            <button type="button" class="ghost-btn" id="smart-split-close">关闭</button>
+          </div>
+          <p class="modal-hint">
+            切分结果统一为最大主体的宽度和高度。选择主体在扩展区域中的固定基准点；主体不会缩放。
+          </p>
+          <div class="split-anchor-grid" id="smart-split-anchor-grid" role="radiogroup" aria-label="扩展基准点">
+            <button type="button" class="split-anchor-btn" data-anchor="top-left" role="radio" aria-checked="false"><span></span>左上</button>
+            <button type="button" class="split-anchor-btn" data-anchor="top" role="radio" aria-checked="false"><span></span>上</button>
+            <button type="button" class="split-anchor-btn" data-anchor="top-right" role="radio" aria-checked="false"><span></span>右上</button>
+            <button type="button" class="split-anchor-btn" data-anchor="left" role="radio" aria-checked="false"><span></span>左</button>
+            <button type="button" class="split-anchor-btn is-selected" data-anchor="center" role="radio" aria-checked="true"><span></span>中心</button>
+            <button type="button" class="split-anchor-btn" data-anchor="right" role="radio" aria-checked="false"><span></span>右</button>
+            <button type="button" class="split-anchor-btn" data-anchor="bottom-left" role="radio" aria-checked="false"><span></span>左下</button>
+            <button type="button" class="split-anchor-btn" data-anchor="bottom" role="radio" aria-checked="false"><span></span>下</button>
+            <button type="button" class="split-anchor-btn" data-anchor="bottom-right" role="radio" aria-checked="false"><span></span>右下</button>
+          </div>
+          <p class="modal-hint" id="smart-split-status" hidden></p>
+          <div class="modal-actions">
+            <button type="button" class="ghost-btn" id="smart-split-cancel">取消</button>
+            <button type="button" class="tool-btn" id="smart-split-confirm">开始切分</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-backdrop modal-backdrop-dark" id="manual-split-modal" hidden>
+        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="manual-split-title">
+          <div class="seq-panel-head">
+            <strong id="manual-split-title">手动切分</strong>
+            <button type="button" class="ghost-btn" id="manual-split-close">关闭</button>
+          </div>
+          <p class="modal-hint">
+            按行列将原图完整均分，从左到右、从上到下生成图片，不缩放原图。
+          </p>
+          <p class="modal-hint" id="manual-split-info"></p>
+          <div class="seq-sheet-fields">
+            <label class="seq-field frame-extract-field">
+              行数
+              <input type="number" id="manual-split-rows" min="1" max="64" step="1" value="2" />
+            </label>
+            <label class="seq-field frame-extract-field">
+              列数
+              <input type="number" id="manual-split-cols" min="1" max="64" step="1" value="2" />
+            </label>
+          </div>
+          <div class="seq-sheet-preview" id="manual-split-preview" aria-hidden="true"></div>
+          <p class="modal-hint" id="manual-split-status" hidden></p>
+          <div class="modal-actions">
+            <button type="button" class="ghost-btn" id="manual-split-cancel">取消</button>
+            <button type="button" class="tool-btn" id="manual-split-confirm">开始切分</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-backdrop modal-backdrop-dark" id="frame-extract-modal" hidden>
+        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="frame-extract-title">
+          <div class="seq-panel-head">
+            <strong id="frame-extract-title">序列帧化</strong>
+            <button type="button" class="ghost-btn" id="frame-extract-close">关闭</button>
+          </div>
+          <p class="modal-hint">
+            按总帧数计算步长均匀取帧：首帧与尾帧必含，中间为 1 + n×⌊T/(C-1)⌋。
+          </p>
+          <label class="seq-field frame-extract-field">
+            序列帧长度
+            <input type="number" id="frame-extract-count" min="2" max="30" step="1" value="10" />
+            <span class="frame-extract-range">2 – 30</span>
+          </label>
+          <p class="modal-hint" id="frame-extract-status" hidden></p>
+          <div class="modal-actions">
+            <button type="button" class="ghost-btn" id="frame-extract-cancel">取消</button>
+            <button type="button" class="tool-btn" id="frame-extract-confirm">开始抽帧</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-backdrop modal-backdrop-dark" id="video-trim-modal" hidden>
+        <div class="modal-dialog modal-dialog-wide" role="dialog" aria-modal="true" aria-labelledby="video-trim-title">
+          <div class="seq-panel-head">
+            <strong id="video-trim-title">裁剪视频</strong>
+            <button type="button" class="ghost-btn" id="video-trim-close">关闭</button>
+          </div>
+          <p class="modal-hint">一条时间轴：拖白点定位画面，拖青绿柄设入/出点；滚轮可微调（Shift=1ms）。</p>
+          <div class="trim-player">
+            <div class="trim-stage">
+              <video id="video-trim-preview" muted playsinline preload="auto"></video>
+            </div>
+            <div class="trim-bar">
+              <button type="button" class="trim-play-btn" id="video-trim-play" title="播放/暂停">▶</button>
+              <span class="trim-clock">
+                <strong id="video-trim-now-label">0:00.000</strong>
+                <span>/</span>
+                <span id="video-trim-total-label">0:00.000</span>
+              </span>
+            </div>
+            <div class="trim-timeline" id="video-trim-timeline">
+              <div class="trim-track" id="video-trim-track">
+                <div class="trim-range" id="video-trim-range"></div>
+                <input
+                  type="range"
+                  class="trim-scrub-input"
+                  id="video-trim-scrub"
+                  min="0"
+                  max="0"
+                  step="0.001"
+                  value="0"
+                  aria-label="播放进度"
+                />
+                <div
+                  class="trim-handle trim-handle-start"
+                  id="video-trim-handle-start"
+                  title="入点"
+                  role="slider"
+                  tabindex="0"
+                ></div>
+                <div
+                  class="trim-handle trim-handle-end"
+                  id="video-trim-handle-end"
+                  title="出点"
+                  role="slider"
+                  tabindex="0"
+                ></div>
+              </div>
+            </div>
+            <div class="trim-times">
+              <span>入点 <strong id="video-trim-start-label">0:00.000</strong></span>
+              <span>选区 <strong id="video-trim-dur-label">0:00.000</strong></span>
+              <span>出点 <strong id="video-trim-end-label">0:00.000</strong></span>
+            </div>
+          </div>
+          <p class="modal-hint" id="video-trim-status" hidden></p>
+          <div class="modal-actions">
+            <button type="button" class="ghost-btn" id="video-trim-cancel">取消</button>
+            <button type="button" class="tool-btn" id="video-trim-confirm">裁剪并生成</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-backdrop modal-backdrop-dark" id="seq-sheet-modal" hidden>
+        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="seq-sheet-title">
+          <div class="seq-panel-head">
+            <strong id="seq-sheet-title">拼成单图</strong>
+            <button type="button" class="ghost-btn" id="seq-sheet-close">关闭</button>
+          </div>
+          <p class="modal-hint">
+            按行列排布序列帧：先从左到右填满一行，再换到下一行；多出的格子保持透明。
+          </p>
+          <p class="modal-hint" id="seq-sheet-frame-info">共 0 帧</p>
+          <div class="seq-sheet-fields">
+            <label class="seq-field frame-extract-field">
+              行数
+              <input type="number" id="seq-sheet-rows" min="1" max="64" step="1" value="1" />
+            </label>
+            <label class="seq-field frame-extract-field">
+              列数
+              <input type="number" id="seq-sheet-cols" min="1" max="64" step="1" value="1" />
+            </label>
+          </div>
+          <div class="seq-sheet-preview" id="seq-sheet-preview" aria-hidden="true"></div>
+          <p class="modal-hint" id="seq-sheet-status" hidden></p>
+          <div class="modal-actions">
+            <button type="button" class="ghost-btn" id="seq-sheet-cancel">取消</button>
+            <button type="button" class="tool-btn" id="seq-sheet-confirm">生成单图</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-backdrop" id="seq-modal" hidden>
+        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="seq-panel-title">
+          <div class="seq-panel-head">
+            <strong id="seq-panel-title">编辑序列</strong>
+            <button type="button" class="ghost-btn" id="seq-panel-close">关闭</button>
+          </div>
+          <p class="modal-hint">调整播放速度、循环，以及帧顺序。</p>
+          <label class="seq-field">
+            播放速度 (FPS)
+            <input type="range" id="seq-fps" min="1" max="24" value="8" />
+            <span id="seq-fps-val">8</span>
+          </label>
+          <label class="seq-field seq-check">
+            <input type="checkbox" id="seq-loop" checked />
+            循环播放
+          </label>
+          <div class="seq-frames" id="seq-frames"></div>
+          <div class="modal-actions">
+            <button type="button" class="ghost-btn" id="seq-panel-done">完成</button>
+          </div>
+        </div>
+      </div>
+
+      <input
+        type="file"
+        id="asset-file-input"
+        accept="image/*,video/*,.png,.jpg,.jpeg,.webp,.gif,.bmp,.avif,.svg,.mp4,.webm,.mov,.m4v"
+        multiple
+        hidden
+      />
+      <input
+        type="file"
+        id="file-input"
+        accept="image/png,image/jpeg,image/jpg,image/webp,image/gif,image/bmp,image/avif,image/svg+xml,.png,.jpg,.jpeg,.webp,.gif,.bmp,.avif,.svg"
+        multiple
+        hidden
+      />
+      <input
+        type="file"
+        id="media-file-input"
+        accept="image/*,video/*,audio/*,.png,.jpg,.jpeg,.webp,.gif,.bmp,.avif,.svg,.mp4,.webm,.mov,.m4v,.mp3,.wav,.m4a"
+        multiple
+        hidden
+      />
+    </div>
+    <script src="/vendor/painterro.min.js"></script>
+    <script type="module" src="/app.js"></script>
+  </body>
+</html>

package/dist/canvas-public/sequence-sheet.js

@@ -0,0 +1,59 @@
+/**
+ * 将序列帧拼成单张透明底图：按「先左到右、再换行向下」填格。
+ */
+
+function loadImage(url) {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.onload = () => resolve(img)
+    img.onerror = () => reject(new Error(`无法加载帧图：${url}`))
+    img.src = url
+  })
+}
+
+/**
+ * @param {string[]} frameUrls
+ * @param {{ rows: number, cols: number }} grid
+ * @returns {Promise<string>} PNG data URL
+ */
+export async function packSequenceSheet(frameUrls, { rows, cols }) {
+  const r = Math.round(Number(rows))
+  const c = Math.round(Number(cols))
+  if (!Number.isFinite(r) || !Number.isFinite(c) || r < 1 || c < 1) {
+    throw new Error('行数与列数需为正整数')
+  }
+  const frames = Array.isArray(frameUrls) ? frameUrls.filter(Boolean) : []
+  if (!frames.length) throw new Error('序列没有可拼接的帧')
+  if (r * c < frames.length) {
+    throw new Error(`格子不足：${r}×${c}=${r * c}，但有 ${frames.length} 帧`)
+  }
+
+  const images = await Promise.all(frames.map((url) => loadImage(url)))
+  const cellW = Math.max(...images.map((img) => img.naturalWidth || img.width || 0))
+  const cellH = Math.max(...images.map((img) => img.naturalHeight || img.height || 0))
+  if (!(cellW > 0 && cellH > 0)) throw new Error('无法读取帧尺寸')
+
+  const canvas = document.createElement('canvas')
+  canvas.width = cellW * c
+  canvas.height = cellH * r
+  const ctx = canvas.getContext('2d')
+  if (!ctx) throw new Error('无法创建画布')
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+  for (let i = 0; i < images.length; i++) {
+    // 先从左到右填满一行，再换到下一行
+    const row = Math.floor(i / c)
+    const col = i % c
+    ctx.drawImage(images[i], col * cellW, row * cellH)
+  }
+
+  return canvas.toDataURL('image/png')
+}
+
+/** 根据帧数给出接近方形的默认行列（行优先填充）。 */
+export function suggestSheetGrid(frameCount) {
+  const n = Math.max(1, Math.round(Number(frameCount) || 1))
+  const cols = Math.max(1, Math.ceil(Math.sqrt(n)))
+  const rows = Math.max(1, Math.ceil(n / cols))
+  return { rows, cols }
+}