perf(video): perf

app/api/transfer/[path]/route.ts

@@ -62,7 +62,7 @@ export async function POST(req: any) {
     if (method === "POST" || method === "PUT") {
       let refreshBody = JSON.stringify({
         ...JSON.parse(data),
-        token: userData?.refresh_token,
+        token: userData?.refresh_token || "",
       })
       fetchOptions.body = isRefresh ? refreshBody : data
     } else {

app/component/label/ffmpeg/VideoFrameExtractor.tsx

@@ -239,7 +239,7 @@ export default function VideoFrameExtractor() {
       file,
       args: [
         "-vf",
-        "fps=1,scale='min(720,iw)':-1",
+        "fps=1,scale='min(720,iw)':-2:flags=lanczos+accurate_rnd+full_chroma_int,unsharp=5:5:0.5:3:3:0",
         "-q:v",
         "2",
         "frame_%03d.jpg",

app/component/label/ffmpeg/ffmpeg.worker.ts

@@ -1,7 +1,14 @@
 // Define types for worker messages
 export type WorkerMessage =
   | { type: "LOAD"; baseURL: string }
-  | { type: "EXEC"; file: File; args: string[]; outputPattern: string }
+  | {
+      type: "EXEC"
+      file: File
+      args: string[]
+      outputPattern: string
+      quickFirstFrame?: boolean
+      continueAfterQuickFirstFrame?: boolean
+    }
 
 export type WorkerResponse =
   | { type: "READY" }
@@ -35,6 +42,7 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
   try {
     switch (type) {
       case "LOAD":
+        // Worker 生命周期内只加载一次 wasm，后续任务复用。
         if (loaded) {
           ctx.postMessage({ type: "READY" })
           return
@@ -53,7 +61,13 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
 
       case "EXEC":
         if (!loaded) throw new Error("FFmpeg not loaded")
-        const { file, args, outputPattern } = event.data
+        const {
+          file,
+          args,
+          outputPattern,
+          quickFirstFrame,
+          continueAfterQuickFirstFrame,
+        } = event.data
 
         ctx.postMessage({
           type: "LOG",
@@ -64,6 +78,7 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
         let inputPath = `${mountDir}/${file.name}`
 
         const mountInput = async () => {
+          // 用 WORKERFS 直接挂载 File，避免先复制到 wasm FS 的额外内存占用。
           await ffmpeg.createDir(mountDir)
           await ffmpeg.mount("WORKERFS" as any, { files: [file] }, mountDir)
         }
@@ -135,6 +150,27 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
             return String(e)
           }
 
+          const deleteFileQuietly = async (filePath: string) => {
+            try {
+              await ffmpeg.deleteFile(filePath)
+            } catch (e) {
+              const msg = normalizeError(e)
+              const lower = msg.toLowerCase()
+              // Cleanup path may not exist (e.g. ffprobe output not created).
+              if (
+                lower.includes("no such file") ||
+                lower.includes("enoent") ||
+                (lower.includes("errnoerror") && lower.includes("fs error"))
+              ) {
+                return
+              }
+              ctx.postMessage({
+                type: "LOG",
+                message: `[cleanup] deleteFile failed path=${filePath}: ${msg}`,
+              })
+            }
+          }
+
           const isOom = (msg: string) =>
             msg.includes("memory access out of bounds") ||
             msg.includes("Cannot enlarge memory") ||
@@ -154,11 +190,66 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
           }
 
           const logThrottled = makeThrottledLogger(1000)
+          const metrics = {
+            startedAtMs: nowMs(),
+            mode: "unknown",
+            segmentAttempts: 0,
+            segmentDurationSec: 0,
+            fallbackToSingle: false,
+            reloadCount: 0,
+            frameCount: 0,
+            execMs: 0,
+            readMs: 0,
+          }
+
+          const fileMB = file.size / 1024 / 1024
+          const filterGuardLevel = (() => {
+            if (isRawH264) return fileMB >= 40 ? 2 : 1
+            if (fileMB >= 60) return 2
+            if (fileMB >= 30) return 1
+            return 0
+          })()
+
+          const runtimeArgs = (() => {
+            const nextArgs = [...args]
+            if (filterGuardLevel <= 0) return nextArgs
+
+            const vfIdx = nextArgs.indexOf("-vf")
+            if (vfIdx >= 0 && typeof nextArgs[vfIdx + 1] === "string") {
+              // 内存守护：高风险场景先去掉 unsharp 并降级 scale flags，减少 wasm 压力。
+              let optimizedVf = nextArgs[vfIdx + 1].replace(
+                /(?:^|,)unsharp=[^,]*/g,
+                ""
+              )
+
+              if (filterGuardLevel >= 2) {
+                const lightScaleFlag =
+                  file.size >= 40 * 1024 * 1024 ? "bilinear" : "bicubic"
+                optimizedVf = optimizedVf.replace(
+                  /:flags=[^,']+/g,
+                  `:flags=${lightScaleFlag}`
+                )
+              }
+
+              optimizedVf = optimizedVf
+                .replace(/,,+/g, ",")
+                .replace(/^,|,$/g, "")
+              nextArgs[vfIdx + 1] = optimizedVf
+            }
+
+            ctx.postMessage({
+              type: "LOG",
+              message: `[oom-guard] apply level=${filterGuardLevel} reason=${
+                isRawH264 ? "raw-h264" : "large-file"
+              }`,
+            })
+            return nextArgs
+          })()
 
           const findArgValue = (flag: string) => {
-            const idx = args.indexOf(flag)
+            const idx = runtimeArgs.indexOf(flag)
             if (idx < 0) return null
-            const value = args[idx + 1]
+            const value = runtimeArgs[idx + 1]
             return typeof value === "string" ? value : null
           }
 
@@ -171,57 +262,228 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
             return Number.isFinite(fps) && fps > 0 ? fps : null
           }
 
-          let durationSec = 0
-          const durationProbePath = "__duration.txt"
-          try {
-            await ffmpeg.ffprobe([
-              "-v",
-              "error",
-              "-show_entries",
-              "format=duration",
-              "-of",
-              "default=noprint_wrappers=1:nokey=1",
-              inputPath,
-              "-o",
-              durationProbePath,
-            ])
-            const txt = (await ffmpeg.readFile(
-              durationProbePath,
-              "utf8"
-            )) as string
-            const parsed = Number.parseFloat(String(txt).trim())
-            if (Number.isFinite(parsed) && parsed > 0) durationSec = parsed
-          } catch (e) {
-            ctx.postMessage({
-              type: "LOG",
-              message: `[probe] ffprobe failed: ${normalizeError(e)}`,
-            })
-          } finally {
-            await ffmpeg.deleteFile(durationProbePath).catch((err) => {
-              console.log("deleteFile error", err)
-            })
+          const parseScaleWidthFromFilter = () => {
+            const vf = findArgValue("-vf")
+            if (!vf) return null
+            const minMatch = vf.match(/min\(\s*(\d+)\s*,\s*iw\s*\)/i)
+            if (minMatch) {
+              const parsed = Number(minMatch[1])
+              return Number.isFinite(parsed) && parsed > 0 ? parsed : null
+            }
+            const fixedMatch = vf.match(
+              /scale\s*=\s*'?\s*(\d+)\s*:\s*-?\d+(?::[^,'\s]+=[^,'\s]+)*\s*'?/i
+            )
+            if (!fixedMatch) return null
+            const parsed = Number(fixedMatch[1])
+            return Number.isFinite(parsed) && parsed > 0 ? parsed : null
           }
 
-          if (!durationSec) {
-            const logHandler = ({ message }: { message: string }) => {
-              const match = message.match(
-                /Duration: (\d+):(\d+):(\d+(?:\.\d+)?)/
+          const outputExt = (() => {
+            for (let i = runtimeArgs.length - 1; i >= 0; i -= 1) {
+              const v = runtimeArgs[i]
+              if (typeof v !== "string") continue
+              const m = v.match(/\.([a-zA-Z0-9]+)$/)
+              if (m) return m[1].toLowerCase()
+            }
+            return "jpg"
+          })()
+
+          let quickFirstFrameSucceeded = false
+          if (quickFirstFrame) {
+            metrics.mode = "first-frame-fast"
+            try {
+              const requestedScaleWidth = parseScaleWidthFromFilter() ?? 640
+              const fastWidth = Math.max(
+                320,
+                Math.min(requestedScaleWidth, 640)
               )
-              if (match) {
-                const [, h, m, s] = match
-                durationSec =
-                  parseFloat(h) * 3600 + parseFloat(m) * 60 + parseFloat(s)
+              const vf = findArgValue("-vf")
+              const qv = findArgValue("-q:v")
+              const fastQ = Number.isFinite(Number(qv))
+                ? String(Math.max(Number(qv), 4))
+                : "4"
+
+              const fastFilter = (() => {
+                const baseFilter =
+                  vf
+                    ?.replace(/(?:^|,)fps=\d+(?:\.\d+)?(?=,|$)/g, "")
+                    .replace(/^,|,$/g, "")
+                    .replace(/,,+/g, ",") ?? ""
+                let filter = baseFilter || `scale='min(${fastWidth},iw)':-2`
+                filter = filter.replace(
+                  /min\(\s*\d+\s*,\s*iw\s*\)/g,
+                  `min(${fastWidth},iw)`
+                )
+                filter = filter.replace(/:flags=[^,']+/g, ":flags=bilinear")
+                if (!/:flags=/.test(filter)) filter = `${filter}:flags=bilinear`
+                if (!/(?:^|,)format=/.test(filter))
+                  filter = `${filter},format=yuv420p`
+                return filter
+              })()
+
+              const fastOutputName = `frame_fast_000001.${outputExt}`
+              const fastArgs = [
+                "-ss",
+                "0",
+                "-i",
+                inputPath,
+                "-threads",
+                "1",
+                "-an",
+                "-sn",
+                "-dn",
+                "-vf",
+                fastFilter,
+                "-q:v",
+                fastQ,
+                "-pix_fmt",
+                "yuv420p",
+                "-frames:v",
+                "1",
+                fastOutputName,
+              ]
+
+              ctx.postMessage({
+                type: "LOG",
+                message: `[mode] quick-first-frame width=${fastWidth} q=${fastQ}`,
+              })
+
+              const execStartedAt = nowMs()
+              const ret = await ffmpeg.exec(fastArgs)
+              metrics.execMs += nowMs() - execStartedAt
+              if (ret !== 0) {
+                throw new Error(`FAST_FIRST_FRAME_RET_${ret}`)
               }
+
+              const files = await ffmpeg.listDir(".")
+              const imageFiles = files.filter(
+                (f) =>
+                  !f.isDir &&
+                  f.name.startsWith("frame_") &&
+                  f.name.endsWith(`.${outputExt}`)
+              )
+              const targetName = imageFiles.find(
+                (f) => f.name === fastOutputName
+              )?.name
+                ? fastOutputName
+                : imageFiles[0]?.name
+              if (!targetName) {
+                throw new Error("NO_FAST_FIRST_FRAME")
+              }
+
+              const readStartedAt = nowMs()
+              const raw = (await ffmpeg.readFile(targetName)) as Uint8Array
+              const copy = raw.slice()
+              metrics.readMs += nowMs() - readStartedAt
+              metrics.frameCount = 1
+              quickFirstFrameSucceeded = true
+              await deleteFileQuietly(targetName)
+              for (const imageFile of imageFiles) {
+                if (imageFile.name === targetName) continue
+                await deleteFileQuietly(imageFile.name)
+              }
+
+              ctx.postMessage(
+                {
+                  type: "SEGMENT_DATA",
+                  files: [{ name: targetName, data: copy }],
+                },
+                [copy.buffer]
+              )
+            } catch (e) {
+              const quickError = normalizeError(e)
+              if (!continueAfterQuickFirstFrame) throw e
+              ctx.postMessage({
+                type: "LOG",
+                message: `[mode] quick-first-frame failed, fallback to full extraction: ${quickError}`,
+              })
             }
 
-            ffmpeg.on("log", logHandler)
-            try {
-              await ffmpeg.exec(["-i", inputPath])
-            } catch (e) {
-              void e
-            } finally {
-              ffmpeg.off("log", logHandler)
+            if (!continueAfterQuickFirstFrame) {
+              ctx.postMessage({ type: "PROGRESS", progress: 1 })
+              const elapsedMs = nowMs() - metrics.startedAtMs
+              ctx.postMessage({
+                type: "LOG",
+                message: `[metrics] phase=done mode=${metrics.mode} frames=1 totalMs=${Math.round(
+                  elapsedMs
+                )} execMs=${Math.round(metrics.execMs)} readMs=${Math.round(
+                  metrics.readMs
+                )}`,
+              })
+              ctx.postMessage({ type: "DONE" })
+              return
             }
+
+            if (quickFirstFrameSucceeded) {
+              ctx.postMessage({ type: "PROGRESS", progress: 0.01 })
+              ctx.postMessage({
+                type: "LOG",
+                message:
+                  "[mode] quick-first-frame done; continue full extraction in same worker",
+              })
+            }
+          }
+
+          let durationSec = 0
+          const skipDurationProbe = Boolean(
+            quickFirstFrame && continueAfterQuickFirstFrame
+          )
+          const durationProbePath = "__duration.txt"
+          if (!skipDurationProbe) {
+            try {
+              await ffmpeg.ffprobe([
+                "-v",
+                "error",
+                "-show_entries",
+                "format=duration",
+                "-of",
+                "default=noprint_wrappers=1:nokey=1",
+                inputPath,
+                "-o",
+                durationProbePath,
+              ])
+              const txt = (await ffmpeg.readFile(
+                durationProbePath,
+                "utf8"
+              )) as string
+              const parsed = Number.parseFloat(String(txt).trim())
+              if (Number.isFinite(parsed) && parsed > 0) durationSec = parsed
+            } catch (e) {
+              ctx.postMessage({
+                type: "LOG",
+                message: `[probe] ffprobe failed: ${normalizeError(e)}`,
+              })
+            } finally {
+              await deleteFileQuietly(durationProbePath)
+            }
+
+            if (!durationSec) {
+              const logHandler = ({ message }: { message: string }) => {
+                const match = message.match(
+                  /Duration: (\d+):(\d+):(\d+(?:\.\d+)?)/
+                )
+                if (match) {
+                  const [, h, m, s] = match
+                  durationSec =
+                    parseFloat(h) * 3600 + parseFloat(m) * 60 + parseFloat(s)
+                }
+              }
+
+              ffmpeg.on("log", logHandler)
+              try {
+                await ffmpeg.exec(["-i", inputPath])
+              } catch (e) {
+                void e
+              } finally {
+                ffmpeg.off("log", logHandler)
+              }
+            }
+          } else {
+            ctx.postMessage({
+              type: "LOG",
+              message:
+                "[probe] skip duration probe after quick-first-frame to reduce second-frame latency",
+            })
           }
 
           ctx.postMessage({
@@ -232,58 +494,72 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
 
           const fps = parseFps() ?? 1
           const stepSec = 1 / fps
+          const streamStartSec = quickFirstFrameSucceeded ? stepSec : 0
           const preferSingleFrame = file.size >= 20 * 1024 * 1024
           const maxFrames = preferSingleFrame ? 30 : 0
           const reloadEvery = preferSingleFrame ? 10 : 0
           let sentBytes = 0
 
-          const maxWidth =
-            file.size >= 40 * 1024 * 1024 ? 360 : preferSingleFrame ? 480 : 720
+          const requestedScaleWidth = parseScaleWidthFromFilter() ?? 720
+          const shouldDownscaleForSafety =
+            filterGuardLevel >= 2 && requestedScaleWidth > 640
+          const maxWidth = shouldDownscaleForSafety
+            ? Math.max(360, Math.round(requestedScaleWidth * 0.78))
+            : requestedScaleWidth
 
           ctx.postMessage({
             type: "LOG",
-            message: `[config] fileMB=${Math.round(file.size / 1024 / 1024)} fps=${fps} maxWidth=${maxWidth} preferSingleFrame=${preferSingleFrame}`,
+            message: `[config] fileMB=${Math.round(fileMB)} fps=${fps} requestedWidth=${requestedScaleWidth} maxWidth=${maxWidth} preferSingleFrame=${preferSingleFrame} filterGuardLevel=${filterGuardLevel} streamStartSec=${streamStartSec}`,
+          })
+          ctx.postMessage({
+            type: "LOG",
+            message: `[metrics] phase=start fileMB=${Math.round(fileMB)} durationSec=${durationSec} fps=${fps} requestedWidth=${requestedScaleWidth} maxWidth=${maxWidth} preferSingleFrame=${preferSingleFrame} streamStartSec=${streamStartSec}`,
           })
-
-          const outputExt = (() => {
-            for (let i = args.length - 1; i >= 0; i -= 1) {
-              const v = args[i]
-              if (typeof v !== "string") continue
-              const m = v.match(/\.([a-zA-Z0-9]+)$/)
-              if (m) return m[1].toLowerCase()
-            }
-            return "jpg"
-          })()
 
           const buildSingleFrameArgs = (
             outputPattern: string,
-            startNumber: number
+            startNumber: number,
+            useBasicFilter = false
           ) => {
             const vf = findArgValue("-vf")
             const qv = findArgValue("-q:v")
-            const baseFilter =
-              vf
-                ?.replace(/(?:^|,)fps=\d+(?:\.\d+)?(?=,|$)/g, "")
-                .replace(/^,|,$/g, "")
-                .replace(/,,+/g, ",") ?? null
-
-            const patchedFilter = (() => {
-              if (!baseFilter || !baseFilter.trim()) return null
-              let f = baseFilter
-              f = f.replace(/min\(\s*720\s*,\s*iw\s*\)/g, `min(${maxWidth},iw)`)
-              f = f.replace(/min\(\s*480\s*,\s*iw\s*\)/g, `min(${maxWidth},iw)`)
-              f = f.replace(/min\(\s*360\s*,\s*iw\s*\)/g, `min(${maxWidth},iw)`)
-              if (!/(?:^|,)format=/.test(f)) f = `${f},format=yuv420p`
-              return f
-            })()
-
             const out: string[] = []
-            if (patchedFilter && patchedFilter.trim())
-              out.push("-vf", patchedFilter)
+            if (useBasicFilter) {
+              const fallbackWidth = Math.max(240, Math.min(maxWidth, 640))
+              out.push(
+                "-vf",
+                `scale='min(${fallbackWidth},iw)':-2:flags=bicubic,format=yuv420p`
+              )
+            } else {
+              const baseFilter =
+                vf
+                  ?.replace(/(?:^|,)fps=\d+(?:\.\d+)?(?=,|$)/g, "")
+                  .replace(/^,|,$/g, "")
+                  .replace(/,,+/g, ",") ?? null
+
+              const patchedFilter = (() => {
+                if (!baseFilter || !baseFilter.trim()) return null
+                let f = baseFilter
+                f = f.replace(
+                  /min\(\s*\d+\s*,\s*iw\s*\)/g,
+                  `min(${maxWidth},iw)`
+                )
+                f = f.replace(
+                  /scale\s*=\s*'?\s*\d+\s*:\s*(-?\d+)((?::[^,'\s]+=[^,'\s]+)*)\s*'?/g,
+                  (_match, h: string, opts?: string) =>
+                    `scale='min(${maxWidth},iw)':${h}${opts || ""}`
+                )
+                if (!/(?:^|,)format=/.test(f)) f = `${f},format=yuv420p`
+                return f
+              })()
+
+              if (patchedFilter && patchedFilter.trim())
+                out.push("-vf", patchedFilter)
+            }
             if (qv) {
               const qNum = Number(qv)
               if (Number.isFinite(qNum) && preferSingleFrame) {
-                out.push("-q:v", String(Math.max(qNum, 6)))
+                out.push("-q:v", String(Math.max(qNum, useBasicFilter ? 4 : 3)))
               } else {
                 out.push("-q:v", qv)
               }
@@ -295,13 +571,20 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
           }
 
           const segmentCandidates = preferSingleFrame
-            ? []
+            ? [2, 3, 5].filter((v) => v >= stepSec && v > 0)
             : [2, 1.2, 1].filter((v) => v >= stepSec && v > 0)
 
-          const trySegmentDuration = async (segmentDurationSec: number) => {
-            let t = 0
+          const trySegmentDuration = async (
+            segmentDurationSec: number,
+            frameLimit = 0
+          ) => {
+            // 主路径：按时间片执行 ffmpeg，分批读取并回传帧，控制内存峰值。
+            metrics.mode = "segment"
+            metrics.segmentDurationSec = segmentDurationSec
+            let t = streamStartSec
             let emptyStreak = 0
             let producedAny = false
+            let producedFrames = 0
 
             while (t < durationSec) {
               logThrottled(
@@ -320,10 +603,12 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
                 "-an",
                 "-sn",
                 "-dn",
-                ...args,
+                ...runtimeArgs,
               ]
 
+              const execStartedAt = nowMs()
               const ret = await ffmpeg.exec(segmentArgs)
+              metrics.execMs += nowMs() - execStartedAt
               if (ret !== 0) {
                 logThrottled(
                   `[exec] mode=segment ret=${ret} t=${t.toFixed(3)} dur=${segmentDurationSec}`
@@ -348,19 +633,32 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
 
               const segmentFiles: { name: string; data: Uint8Array }[] = []
               const transfer: ArrayBuffer[] = []
+              const readStartedAt = nowMs()
 
-              for (const f of imageFiles) {
+              const remaining =
+                frameLimit > 0 ? Math.max(frameLimit - producedFrames, 0) : 0
+              for (let i = 0; i < imageFiles.length; i += 1) {
+                const f = imageFiles[i]
+                if (frameLimit > 0 && i >= remaining) {
+                  await deleteFileQuietly(f.name)
+                  continue
+                }
                 const raw = (await ffmpeg.readFile(f.name)) as Uint8Array
                 const copy = raw.slice()
                 segmentFiles.push({
                   name: `t_${t.toFixed(3)}_${f.name}`,
                   data: copy,
                 })
+                sentBytes += copy.byteLength
                 transfer.push(copy.buffer)
-                await ffmpeg.deleteFile(f.name)
+                await deleteFileQuietly(f.name)
               }
+              metrics.readMs += nowMs() - readStartedAt
 
               if (segmentFiles.length > 0) {
+                metrics.frameCount += segmentFiles.length
+                producedFrames += segmentFiles.length
+                // 通过 transferable 传输二进制，避免主线程和 worker 双份拷贝。
                 ctx.postMessage(
                   { type: "SEGMENT_DATA", files: segmentFiles },
                   transfer
@@ -372,6 +670,7 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
                 progress: Math.min((t + segmentDurationSec) / durationSec, 1),
               })
 
+              if (frameLimit > 0 && producedFrames >= frameLimit) break
               t += segmentDurationSec
             }
 
@@ -380,14 +679,19 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
             }
           }
 
-          const runSingleFrameMode = async () => {
-            let index = 0
+          const runSingleFrameMode = async (useBasicFilter = false) => {
+            // 回退路径：逐秒/逐帧抽样，牺牲吞吐换稳定性。
+            metrics.mode = useBasicFilter ? "single-fallback" : "single"
+            let index = streamStartSec > 0 ? 1 : 0
             let emptyStreak = 0
+            let producedCount = 0
             const pattern = `frame_%06d.${outputExt}`
 
             const reloadCore = async (reason: string) => {
               if (!lastBaseURL) return
+              metrics.reloadCount += 1
               ctx.postMessage({ type: "LOG", message: `[reload] ${reason}` })
+              // 长任务周期性重载 core，缓解 wasm 内存碎片化。
               await unmountInput()
               ffmpeg.terminate()
               loaded = false
@@ -399,7 +703,7 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
               await mountInput()
             }
 
-            for (let t = 0; t < durationSec; t += stepSec) {
+            for (let t = streamStartSec; t < durationSec; t += stepSec) {
               if (maxFrames > 0 && index >= maxFrames) break
               if (reloadEvery > 0 && index > 0 && index % reloadEvery === 0) {
                 await reloadCore(`periodic frame=${index}`)
@@ -416,11 +720,13 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
                 "-an",
                 "-sn",
                 "-dn",
-                ...(buildSingleFrameArgs(pattern, index) || []),
+                ...(buildSingleFrameArgs(pattern, index, useBasicFilter) || []),
               ]
 
               try {
+                const execStartedAt = nowMs()
                 const ret = await ffmpeg.exec(singleFrameArgs)
+                metrics.execMs += nowMs() - execStartedAt
                 ctx.postMessage({
                   type: "LOG",
                   message: `[exec] mode=single ret=${ret} t=${t.toFixed(3)} out=${outputName}`,
@@ -442,20 +748,20 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
                     )}`,
                   })
                 }
-                await ffmpeg.deleteFile(outputName).catch((err) => {
-                  console.log("deleteFile error", err)
-                })
+                await deleteFileQuietly(outputName)
                 index += 1
                 continue
               }
 
               try {
+                const readStartedAt = nowMs()
                 const raw = (await ffmpeg.readFile(outputName)) as Uint8Array
                 const copy = raw.slice()
+                metrics.readMs += nowMs() - readStartedAt
                 sentBytes += copy.byteLength
-                await ffmpeg.deleteFile(outputName).catch((err) => {
-                  console.log("deleteFile error", err)
-                })
+                metrics.frameCount += 1
+                producedCount += 1
+                await deleteFileQuietly(outputName)
 
                 ctx.postMessage(
                   {
@@ -484,16 +790,25 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
 
               index += 1
             }
+
+            if (producedCount === 0) {
+              throw new Error(
+                useBasicFilter
+                  ? "NO_FRAMES_SINGLE_FALLBACK"
+                  : "NO_FRAMES_SINGLE"
+              )
+            }
           }
 
           let segmentOk = false
           for (const seg of segmentCandidates) {
+            metrics.segmentAttempts += 1
             try {
               ctx.postMessage({
                 type: "LOG",
                 message: `[mode] trying segmentDuration=${seg}s stepSec=${stepSec}s`,
               })
-              await trySegmentDuration(seg)
+              await trySegmentDuration(seg, maxFrames)
               segmentOk = true
               break
             } catch (e) {
@@ -509,14 +824,49 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
             }
           }
           if (!segmentOk) {
+            metrics.fallbackToSingle = segmentCandidates.length > 0
             ctx.postMessage({
               type: "LOG",
               message: `[mode] segment mode unavailable; fallback to single-frame sampling`,
             })
-            await runSingleFrameMode()
+            try {
+              await runSingleFrameMode()
+            } catch (e) {
+              const msg = normalizeError(e)
+              if (!msg.includes("NO_FRAMES_SINGLE")) throw e
+              ctx.postMessage({
+                type: "LOG",
+                message:
+                  "[mode] single mode produced no frames; retry with basic filter",
+              })
+              await runSingleFrameMode(true)
+            }
           }
 
-          // Send DONE without data
+          const elapsedMs = nowMs() - metrics.startedAtMs
+          const sentMB = Math.round((sentBytes / 1024 / 1024) * 100) / 100
+          const avgFrameKB = metrics.frameCount
+            ? Math.round((sentBytes / metrics.frameCount / 1024) * 10) / 10
+            : 0
+          const throughputFps =
+            elapsedMs > 0
+              ? Math.round((metrics.frameCount / (elapsedMs / 1000)) * 100) /
+                100
+              : 0
+          ctx.postMessage({
+            type: "LOG",
+            message: `[metrics] phase=done mode=${metrics.mode} frames=${metrics.frameCount} sentMB=${sentMB} avgFrameKB=${avgFrameKB} totalMs=${Math.round(
+              elapsedMs
+            )} execMs=${Math.round(metrics.execMs)} readMs=${Math.round(
+              metrics.readMs
+            )} throughputFps=${throughputFps} segmentAttempts=${
+              metrics.segmentAttempts
+            } segmentDurationSec=${metrics.segmentDurationSec} fallbackToSingle=${
+              metrics.fallbackToSingle
+            } reloadCount=${metrics.reloadCount}`,
+          })
+
+          // 所有帧都已通过 SEGMENT_DATA 流式回传，这里只发完成信号。
           ctx.postMessage({ type: "DONE" })
         } catch (e: any) {
           const errorMessage =
@@ -555,7 +905,7 @@ ctx.onmessage = async (event: MessageEvent<WorkerMessage>) => {
 
           throw e
         } finally {
-          // Cleanup input
+          // 始终清理挂载目录，避免残留状态影响下一次任务。
           try {
             await unmountInput()
           } catch (e) {

app/component/label/video2image/processVideo.ts

@@ -13,16 +13,41 @@ interface ProcessVideoParams {
   namePrefix?: string
   baseURL?: string
   args?: string[]
+  timeoutMs?: number
+  firstFrameTimeoutMs?: number
+  quickFirstFrame?: boolean
+  continueAfterQuickFirstFrame?: boolean
+  onFrames?: (frames: VideoFrameFile[]) => void
+  onProgress?: (progress: number) => void
 }
 
 const defaultArgs = [
   "-vf",
-  "fps=1,scale='min(720,iw)':-1",
+  // 基线策略：1fps + Lanczos 缩放 + 轻微锐化，兼顾清晰度与处理速度。
+  "fps=1,scale='min(720,iw)':-2:flags=lanczos+accurate_rnd+full_chroma_int,unsharp=5:5:0.5:3:3:0",
   "-q:v",
   "2",
   "frame_%03d.jpg",
 ]
 
+const lowMemoryArgs = [
+  "-vf",
+  // OOM 回退：降低分辨率并使用更轻滤镜，优先保稳定输出。
+  "fps=1,scale='min(480,iw)':-2:flags=bilinear,format=yuv420p",
+  "-q:v",
+  "4",
+  "frame_%03d.jpg",
+]
+
+const timeoutFallbackArgs = [
+  "-vf",
+  // 超时回退：进一步降采样，减少单次解码计算量。
+  "fps=1,scale='min(360,iw)':-2:flags=bilinear,format=yuv420p",
+  "-q:v",
+  "5",
+  "frame_%03d.jpg",
+]
+
 const mimeByExt: Record<string, string> = {
   jpg: "image/jpeg",
   jpeg: "image/jpeg",
@@ -101,7 +126,7 @@ export const processVideo = async (
   if (typeof window === "undefined") return []
 
   const args = params.args && params.args.length ? params.args : defaultArgs
-  const outputExt = getOutputExtFromArgs(args)
+  const fileExt = getFileExt(params.fileName)
   const prefix = sanitizePrefix(
     params.namePrefix || stripFileExt(params.fileName)
   )
@@ -109,90 +134,208 @@ export const processVideo = async (
     params.baseURL ||
     `${window.location.origin}${process.env.NEXT_PUBLIC_BASE_PATH}/wasm`
   const inputFile = base64ToFile(params.base64Data, params.fileName)
+  const fileMB = inputFile.size / 1024 / 1024
+  const inferredTimeoutMs = (() => {
+    // 大文件和裸流（.h264/.264）给予更长时间，避免误判超时。
+    let ms = 240_000
+    if (fileMB > 30) ms += Math.round((fileMB - 30) * 2_500)
+    if (fileExt === "h264" || fileExt === "264") ms = Math.max(ms, 600_000)
+    return Math.min(ms, 1_200_000)
+  })()
+  const timeoutMs = Number.isFinite(params.timeoutMs)
+    ? Math.max(10_000, Number(params.timeoutMs))
+    : inferredTimeoutMs
 
-  const worker = new Worker(
-    new URL("../ffmpeg/ffmpeg.worker.ts", import.meta.url)
-  )
-  let frameIndex = 0
-  const frames: VideoFrameFile[] = []
+  const inferredFirstFrameTimeoutMs = (() => {
+    let ms = 20_000
+    if (fileMB > 30) ms += Math.round((fileMB - 30) * 1_000)
+    if (fileExt === "h264" || fileExt === "264") ms = Math.max(ms, 45_000)
+    return Math.min(ms, 120_000)
+  })()
+  const firstFrameTimeoutMs = Number.isFinite(params.firstFrameTimeoutMs)
+    ? Math.max(8_000, Number(params.firstFrameTimeoutMs))
+    : inferredFirstFrameTimeoutMs
+
+  const runOnce = async (
+    runArgs: string[],
+    runTimeoutMs: number,
+    runFirstFrameTimeoutMs: number
+  ) => {
+    const worker = new Worker(
+      new URL("../ffmpeg/ffmpeg.worker.ts", import.meta.url)
+    )
+    const outputExt = getOutputExtFromArgs(runArgs)
+    let frameIndex = 0
+    const frames: VideoFrameFile[] = []
+
+    try {
+      return await new Promise<VideoFrameFile[]>((resolve, reject) => {
+        let settled = false
+        let timeoutId: ReturnType<typeof setTimeout> | null = null
+        let firstFrameTimeoutId: ReturnType<typeof setTimeout> | null = null
+
+        const finish = (next: () => void) => {
+          if (settled) return
+          settled = true
+          if (timeoutId) {
+            clearTimeout(timeoutId)
+            timeoutId = null
+          }
+          if (firstFrameTimeoutId) {
+            clearTimeout(firstFrameTimeoutId)
+            firstFrameTimeoutId = null
+          }
+          next()
+        }
+
+        timeoutId = setTimeout(() => {
+          finish(() =>
+            reject(
+              new Error(
+                `video process timeout after ${Math.round(runTimeoutMs / 1000)}s`
+              )
+            )
+          )
+        }, runTimeoutMs)
+        firstFrameTimeoutId = setTimeout(() => {
+          if (frames.length > 0) return
+          finish(() =>
+            reject(
+              new Error(
+                `video process timeout before first frame after ${Math.round(runFirstFrameTimeoutMs / 1000)}s`
+              )
+            )
+          )
+        }, runFirstFrameTimeoutMs)
+
+        worker.onmessage = (event: MessageEvent<WorkerResponse>) => {
+          const message = event.data
+          switch (message.type) {
+            case "READY": {
+              // Worker 加载完 wasm 后才允许真正执行抽帧命令。
+              const runMessage: WorkerMessage = {
+                type: "EXEC",
+                file: inputFile,
+                args: runArgs,
+                outputPattern: "frame_",
+                quickFirstFrame: Boolean(params.quickFirstFrame),
+                continueAfterQuickFirstFrame: Boolean(
+                  params.continueAfterQuickFirstFrame
+                ),
+              }
+              worker.postMessage(runMessage)
+              return
+            }
+            case "SEGMENT_DATA": {
+              // 分片回传：边抽边传，降低一次性内存峰值并加快首屏可见时间。
+              const files = message.files || []
+              const batchFrames: VideoFrameFile[] = []
+              files.forEach((file) => {
+                const ext = getFileExt(file.name) || outputExt || "jpg"
+                const frameNo = String(frameIndex).padStart(6, "0")
+                const frameName = `${prefix}_frame_${frameNo}.${ext}`
+                frameIndex += 1
+                const frame = {
+                  name: frameName,
+                  dataUrl: `data:${mimeByExt[ext] || "image/jpeg"};base64,${uint8ArrayToBase64(file.data)}`,
+                }
+                frames.push(frame)
+                batchFrames.push(frame)
+              })
+              if (batchFrames.length) {
+                if (firstFrameTimeoutId) {
+                  clearTimeout(firstFrameTimeoutId)
+                  firstFrameTimeoutId = null
+                }
+                try {
+                  params.onFrames?.(batchFrames)
+                } catch (callbackError) {
+                  console.warn(
+                    "[processVideo] onFrames callback failed",
+                    callbackError
+                  )
+                }
+              }
+              return
+            }
+            case "PROGRESS": {
+              try {
+                params.onProgress?.(message.progress || 0)
+              } catch (callbackError) {
+                console.warn(
+                  "[processVideo] onProgress callback failed",
+                  callbackError
+                )
+              }
+              return
+            }
+            case "DONE": {
+              finish(() => {
+                if (!frames.length) {
+                  reject(new Error("video has no extracted frames"))
+                } else {
+                  resolve(frames)
+                }
+              })
+              return
+            }
+            case "FATAL": {
+              finish(() =>
+                reject(new Error(message.error || "video process fatal"))
+              )
+              return
+            }
+            case "ERROR": {
+              finish(() =>
+                reject(new Error(message.error || "video process error"))
+              )
+              return
+            }
+            default:
+              return
+          }
+        }
+
+        worker.onerror = (event) => {
+          finish(() => reject(new Error(event.message || "video worker error")))
+        }
+
+        const loadMessage: WorkerMessage = {
+          type: "LOAD",
+          baseURL,
+        }
+        worker.postMessage(loadMessage)
+      })
+    } finally {
+      worker.terminate()
+    }
+  }
 
   try {
-    return await new Promise<VideoFrameFile[]>((resolve, reject) => {
-      let settled = false
+    return await runOnce(args, timeoutMs, firstFrameTimeoutMs)
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    const isOom =
+      message.includes("memory access out of bounds") ||
+      message.includes("Cannot enlarge memory") ||
+      message.includes("Aborted")
+    const isTimeout = message.includes("video process timeout")
+    if (!isOom && !isTimeout) throw error
 
-      const finish = (next: () => void) => {
-        if (settled) return
-        settled = true
-        next()
-      }
-
-      worker.onmessage = (event: MessageEvent<WorkerResponse>) => {
-        const message = event.data
-        switch (message.type) {
-          case "READY": {
-            const runMessage: WorkerMessage = {
-              type: "EXEC",
-              file: inputFile,
-              args,
-              outputPattern: "frame_",
-            }
-            worker.postMessage(runMessage)
-            return
-          }
-          case "SEGMENT_DATA": {
-            const files = message.files || []
-            files.forEach((file) => {
-              const ext = getFileExt(file.name) || outputExt || "jpg"
-              const frameName = `${prefix}_frame_${String(frameIndex).padStart(
-                6,
-                "0"
-              )}.${ext}`
-              frameIndex += 1
-              frames.push({
-                name: frameName,
-                dataUrl: `data:${mimeByExt[ext] || "image/jpeg"};base64,${uint8ArrayToBase64(file.data)}`,
-              })
-            })
-            return
-          }
-          case "DONE": {
-            finish(() => {
-              if (!frames.length) {
-                reject(new Error("video has no extracted frames"))
-              } else {
-                resolve(frames)
-              }
-            })
-            return
-          }
-          case "FATAL": {
-            finish(() =>
-              reject(new Error(message.error || "video process fatal"))
-            )
-            return
-          }
-          case "ERROR": {
-            finish(() =>
-              reject(new Error(message.error || "video process error"))
-            )
-            return
-          }
-          default:
-            return
-        }
-      }
-
-      worker.onerror = (event) => {
-        finish(() => reject(new Error(event.message || "video worker error")))
-      }
-
-      const loadMessage: WorkerMessage = {
-        type: "LOAD",
-        baseURL,
-      }
-      worker.postMessage(loadMessage)
-    })
-  } finally {
-    worker.terminate()
+    // 仅对可恢复错误做一次降级重试，避免无限重试拖垮页面。
+    const retryArgs = isTimeout ? timeoutFallbackArgs : lowMemoryArgs
+    const retryTimeoutMs = isTimeout
+      ? Math.max(timeoutMs, 600_000)
+      : Math.max(timeoutMs, 300_000)
+    const retryFirstFrameTimeoutMs = Math.max(firstFrameTimeoutMs, 35_000)
+    try {
+      return await runOnce(retryArgs, retryTimeoutMs, retryFirstFrameTimeoutMs)
+    } catch (retryError) {
+      const retryMessage =
+        retryError instanceof Error ? retryError.message : String(retryError)
+      throw new Error(
+        `video process failed after ${isTimeout ? "timeout" : "low-memory"} retry: ${retryMessage}`
+      )
+    }
   }
 }

app/layout.tsx

@@ -20,6 +20,8 @@ import "./globals.css"
 import { theme } from "./theme"
 import { OptStore } from "@/components/label/OptStore"
 
+const GLOBAL_NOTICE_Z_INDEX = 4000
+
 export default function RootLayout({
   children,
 }: {
@@ -55,7 +57,7 @@ export default function RootLayout({
       </head>
       <body>
         <MantineProvider defaultColorScheme="auto" theme={theme}>
-          <Notifications />
+          <Notifications zIndex={GLOBAL_NOTICE_Z_INDEX} withinPortal />
           <InfoCheck />
           <OptStore />
           <ModalsProvider>

app/management/team/employee/page.tsx

@@ -87,12 +87,12 @@ export default function TeamEmployeePage() {
       //         </Badge>
       //       ),
       //   },
-      //   {
-      //     accessor: "group_name",
-      //     title: "组织",
-      //     width: 180,
-      //     textAlign: "center",
-      //   },
+      {
+        accessor: "group_name",
+        title: "组织",
+        width: 180,
+        textAlign: "center",
+      },
       {
         accessor: "base_city",
         title: "所在地",