paperclip-bot/labelmain-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(component): perf

Browse Source
This commit is contained in:
shay7sev
2026-03-10 14:15:53 +08:00
parent 03ab0af15e
commit 3a1d1a43ee
19 changed files with 3 additions and 703 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/component/base/department/page.tsx
View File

@@ -1,5 +0,0 @@
"use client"
export default function ComponentBaseDepartmentPage() {
return <>ComponentBaseDepartmentPage</>
}

33
app/component/base/placement/page.tsx
View File

@@ -1,33 +0,0 @@
"use client"
import {
Breadcrumbs,
Divider,
Paper,
Stack,
UnstyledButton,
Text,
} from "@mantine/core"
export default function ComponentBasePlacementPage() {
const items = [{ title: "布局组件" }].map((item) => (
<UnstyledButton key={item.title}>{item.title}</UnstyledButton>
))
return (
<>
<Stack w="100%" h="calc(100vh - 56px)" p="md">
<Breadcrumbs>{items}</Breadcrumbs>
<Paper shadow="xs" p="0" flex={1} display="flex">
<Stack flex={1}>
<Stack flex={1} justify="center" align="center">
<Text c="dimmed">空</Text>
</Stack>
</Stack>
<Divider orientation="vertical"></Divider>
<Stack flex={2}></Stack>
</Paper>
</Stack>
</>
)
}

69
app/component/base/select/page.tsx
View File

@@ -1,69 +0,0 @@
"use client"
import TreeSelect from "@/components/tree-select"
import { getCityTree } from "@/components/tree-select/api"
import { TreeNode } from "@/components/tree-select/api/type"
import { VirtualTreeSelect } from "@/components/tree-select/tree"
import {
Breadcrumbs,
Flex,
Paper,
Stack,
TreeNodeData,
UnstyledButton,
} from "@mantine/core"
import { useCallback, useEffect, useState } from "react"
const convertTreeNodeToTreeNodeData = (
list: TreeNode[],
level: number = 1
): TreeNodeData[] =>
list.map((g) => ({
label: g.label,
value: g.value,
nodeProps: { level: level },
children:
g.children && g.children.length
? convertTreeNodeToTreeNodeData(g.children, level + 1)
: [],
}))
export default function ComponentBaseSelectPage() {
const items = [{ title: "选择组件" }].map((item) => (
<UnstyledButton key={item.title}>{item.title}</UnstyledButton>
))
const [value, setValue] = useState<string>("")
const [treeData, setTreeData] = useState<TreeNodeData[]>([])
const asyncGetCityTree = useCallback(async () => {
const res = await getCityTree()
setTreeData(convertTreeNodeToTreeNodeData(res))
}, [])
useEffect(() => {
queueMicrotask(() => asyncGetCityTree())
}, [asyncGetCityTree])
return (
<>
<Stack w="100%" h="calc(100vh - 56px)" p="md">
<Breadcrumbs>{items}</Breadcrumbs>
<Paper shadow="xs" p={"md"} flex={1} display="flex">
<Flex h={"fit-content"} gap={"lg"}>
<TreeSelect treeData={treeData} />
<VirtualTreeSelect
data={treeData}
value={value}
onChange={setValue}
setCurrCityCode={() => {}}
w={"200px"}
/>
</Flex>
<Flex>{value}</Flex>
</Paper>
</Stack>
</>
)
}

14
app/component/label/ffmpeg/README.md
View File

@@ -1,14 +0,0 @@
# Video Frame Extractor (FFmpeg.wasm)
## 运行位置
- 纯前端：所有转码/抽帧在浏览器 Web Worker + WASM 内完成，不依赖后端服务。
## 大文件最佳实践
- 优先使用 WORKERFS 挂载输入文件，避免 `writeFile(arrayBuffer)` 将整段视频复制进 WASM 内存。
- 抽帧建议走“单帧模式”：每次 `-ss <time> -frames:v 1` 只产出一张，读取后立即删除，避免在 WASM 内累积。
- 输出建议使用 image2 序列 pattern（例如 `frame_%06d.jpg`）并配合 `-start_number`，避免 image2 的“必须是序列 pattern”报错路径。
- UI 端必须对日志与图片列表做上限与释放（`URL.revokeObjectURL`），否则长视频会导致 JS 堆持续增长。
## 故障恢复
- 一旦出现 `Aborted()` / `memory access out of bounds`，当前 FFmpeg.wasm 实例可能进入不可恢复状态，需要 terminate 并重建实例/worker。

401
app/component/label/ffmpeg/VideoFrameExtractor.tsx
View File

@@ -1,401 +0,0 @@
import {
ActionIcon,
Alert,
Box,
Button,
Card,
Container,
FileInput,
Flex,
Group,
Image,
Loader,
Progress,
ScrollArea,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core"
import {
IconAlertCircle,
IconDownload,
IconMovie,
IconPhoto,
} from "@tabler/icons-react"
import { useEffect, useRef, useState } from "react"
import { appendCapped } from "./cap"
import type { WorkerResponse } from "./ffmpeg.worker"
import { getServerImage } from "@/components/label/api/label"
export default function VideoFrameExtractor() {
const [loaded, setLoaded] = useState(false)
const [isLoading, setIsLoading] = useState(false)
const [file, setFile] = useState<File | null>(null)
const [processing, setProcessing] = useState(false)
const [progress, setProgress] = useState(0)
const [message, setMessage] = useState("Wait for loading...")
const [error, setError] = useState<string | null>(null)
const [images, setImages] = useState<{ url: string; name: string }[]>([])
const [logs, setLogs] = useState<string[]>([])
const workerRef = useRef<Worker | null>(null)
const messageRef = useRef<HTMLDivElement>(null)
const extractedCountRef = useRef(0)
const MAX_LOG_LINES = 300
const MAX_IMAGES = 1500
// Initialize Worker once
useEffect(() => {
queueMicrotask(() => {
if (!workerRef.current) {
setIsLoading(true)
const baseURL = window.location.origin + "/wasm"
const createWorker = () => {
const worker = new Worker(
new URL("./ffmpeg.worker.ts", import.meta.url)
)
workerRef.current = worker
return worker
}
const handleMessage = (event: MessageEvent<WorkerResponse>) => {
const { type } = event.data
switch (type) {
case "READY":
setLoaded(true)
setIsLoading(false)
setMessage("FFmpeg loaded successfully")
break
case "LOG":
if ("message" in event.data) {
const msg = event.data.message
setLogs((prev) => appendCapped(prev, [msg], MAX_LOG_LINES))
if (messageRef.current) {
messageRef.current.scrollTop = messageRef.current.scrollHeight
}
}
break
case "PROGRESS":
if ("progress" in event.data) {
const p = Math.round(event.data.progress * 100)
setProgress(p)
setMessage(`Processing... ${p}%`)
}
break
case "SEGMENT_DATA":
if ("files" in event.data) {
const newImages = event.data.files.map((f: any) => {
const blob = new Blob([f.data], { type: "image/jpeg" })
return { url: URL.createObjectURL(blob), name: f.name }
})
extractedCountRef.current += newImages.length
setImages((prev) =>
appendCapped(prev, newImages, MAX_IMAGES, (img) =>
URL.revokeObjectURL((img as any).url)
)
)
setMessage(
`Processing... Extracted ${extractedCountRef.current} frames.`
)
}
break
case "DONE":
setMessage(
`Completed! Extracted ${extractedCountRef.current} frames.`
)
setProcessing(false)
break
case "FATAL":
if ("error" in event.data) {
setError(event.data.error)
setProcessing(false)
setLoaded(false)
setIsLoading(true)
}
if (workerRef.current) {
workerRef.current.terminate()
workerRef.current = null
}
{
const worker = createWorker()
worker.onmessage = handleMessage
worker.postMessage({ type: "LOAD", baseURL })
}
break
case "ERROR":
if ("error" in event.data) {
setError(event.data.error)
setProcessing(false)
setIsLoading(false)
}
break
}
}
const worker = createWorker()
worker.onmessage = handleMessage
worker.postMessage({ type: "LOAD", baseURL })
}
})
// Only create worker if not exists
// Cleanup worker on unmount?
// Usually good practice, but if we want to keep it alive for navigation back/forth,
// we might want to move it to Context.
// For this task, local cleanup is fine.
return () => {
if (workerRef.current) {
workerRef.current.terminate()
workerRef.current = null
}
}
}, [])
/**
* 将视频 Base64 转换为 File 对象
* @param {string} base64String - 视频 Base64 字符串
* @param {string} fileName - 文件名 (例如 'video.mp4')
* @returns {File}
*/
function videoBase64ToFile(base64String: string, fileName: string) {
// 1. 提取 MIME 类型和数据
const parts = base64String.split(",")
const mime = parts[0].match(/:(.*?);/)?.[1] // 可能是 video/mp4, video/webm 等
// 2. 解码
const bstr = atob(parts[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
// 3. 填充字节数组
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
// 4. 返回 File 对象
return new File([u8arr], fileName, { type: mime })
}
const getServerVideo = async () => {
const params = {
data_names: ["6874b86e341d1d0e4c75d0d5.h264"],
data_type: 0,
project_id: 9,
}
let text
const response = await getServerImage(params)
text = `data:video/h264;base64,${response}`
const fileRes = videoBase64ToFile(text, "6874b86e341d1d0e4c75d0d5.h264")
// const videoFile = new File([response], "6874b86e341d1d0e4c75d0d5.264", {
// type: "video/264",
// })
setFile(fileRes)
}
function downloadFile(file: File | null) {
if (!file) return
// 创建一个临时的 DOM URL 指向内存中的文件
const url = URL.createObjectURL(file)
// 创建一个隐藏的 a 标签
const a = document.createElement("a")
a.style.display = "none"
a.href = url
a.download = file.name // 设置下载后的文件名
// 将标签添加到文档中并触发点击
document.body.appendChild(a)
a.click()
// 清理工作：移除标签并释放内存 URL
document.body.removeChild(a)
window.URL.revokeObjectURL(url)
}
const processVideo = () => {
if (!file || !loaded || !workerRef.current) return
setProcessing(true)
setProgress(0)
extractedCountRef.current = 0
for (const img of images) URL.revokeObjectURL(img.url)
setImages([])
setLogs([])
setError(null)
setMessage("Starting processing...")
// Extract 1 frame per second: -vf fps=1
// Optimize: Scale down to 720p max width to save memory
workerRef.current.postMessage({
type: "EXEC",
file,
args: [
"-vf",
"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",
],
outputPattern: "frame_",
})
}
const downloadAll = () => {
images.forEach((img, index) => {
setTimeout(() => {
const a = document.createElement("a")
a.href = img.url
a.download = img.name
a.click()
}, index * 200)
})
}
return (
<Container size="lg" py="xl">
<Stack gap="lg">
<Title order={2}>Video Frame Extractor (Worker + Local WASM)</Title>
<Text c="dimmed">
Extract frames from your video files purely in the browser using
FFmpeg.wasm (Async Worker).
</Text>
{error && (
<Alert
icon={<IconAlertCircle size={16} />}
title="Error"
color="red"
withCloseButton
onClose={() => setError(null)}>
{error}
</Alert>
)}
<Card withBorder shadow="sm" p="lg" radius="md">
<Flex gap={"md"}>
<Button onClick={getServerVideo}>getServerVideo</Button>
<Button
onClick={() => {
downloadFile(file)
}}>
downloadFile
</Button>
</Flex>
<Stack gap="md">
<FileInput
label="Select Video File"
placeholder="Click to select MP4, WebM..."
// accept="video/*"
leftSection={<IconMovie size={16} />}
value={file}
onChange={setFile}
disabled={!loaded || processing}
/>
{!loaded && isLoading && (
<Group>
<Loader size="sm" />
<Text size="sm">Loading FFmpeg core...</Text>
</Group>
)}
{loaded && (
<Group justify="flex-end">
<Button
onClick={processVideo}
disabled={!file || processing}
loading={processing}
leftSection={<IconPhoto size={16} />}>
{processing ? "Processing..." : "Start Extraction"}
</Button>
</Group>
)}
{processing && (
<Stack gap="xs">
<Text size="sm">{message}</Text>
<Progress value={progress} animated />
</Stack>
)}
</Stack>
</Card>
{logs.length > 0 && (
<Card withBorder shadow="sm" p="xs" radius="md" bg="gray.0">
<Text size="xs" fw={500} mb="xs">
Logs
</Text>
<ScrollArea h={100} type="always" viewportRef={messageRef}>
<Box
style={{
whiteSpace: "pre-wrap",
fontFamily: "monospace",
fontSize: "11px",
}}>
{logs.map((log, i) => (
<div key={i}>{log}</div>
))}
</Box>
</ScrollArea>
</Card>
)}
{images.length > 0 && (
<Stack gap="md">
<Group justify="space-between" align="center">
<Title order={3}>Extracted Frames ({images.length})</Title>
<Button
variant="outline"
leftSection={<IconDownload size={16} />}
onClick={downloadAll}>
Download All
</Button>
</Group>
<SimpleGrid cols={{ base: 2, sm: 3, md: 4 }} spacing="md">
{images.map((img) => (
<Card
key={img.name}
shadow="sm"
padding="xs"
radius="md"
withBorder>
<Card.Section>
<Image
src={img.url}
height={160}
alt={img.name}
fit="cover"
/>
</Card.Section>
<Group justify="space-between" mt="xs" mb="xs">
<Text fw={500} size="xs" truncate>
{img.name}
</Text>
<ActionIcon
variant="light"
color="blue"
component="a"
href={img.url}
download={img.name}>
<IconDownload size={14} />
</ActionIcon>
</Group>
</Card>
))}
</SimpleGrid>
</Stack>
)}
</Stack>
</Container>
)
}

18
app/component/label/ffmpeg/cap.test.ts
View File

@@ -1,18 +0,0 @@
import { appendCapped } from "./cap"
describe("appendCapped", () => {
test("keeps all items when under max", () => {
expect(appendCapped([1, 2], [3], 10)).toEqual([1, 2, 3])
})
test("drops from head when exceeding max", () => {
expect(appendCapped([1, 2], [3, 4, 5], 3)).toEqual([3, 4, 5])
})
test("calls onDrop for dropped items", () => {
const dropped: number[] = []
const result = appendCapped([1, 2], [3, 4, 5], 3, (x) => dropped.push(x))
expect(result).toEqual([3, 4, 5])
expect(dropped).toEqual([1, 2])
})
})

14
app/component/label/ffmpeg/cap.ts
View File

@@ -1,14 +0,0 @@
export const appendCapped = <T>(
prev: T[],
next: T[],
max: number,
onDrop?: (item: T) => void
) => {
const merged = [...prev, ...next]
if (merged.length <= max) return merged
const dropCount = merged.length - max
if (onDrop) {
for (let i = 0; i < dropCount; i += 1) onDrop(merged[i])
}
return merged.slice(dropCount)
}

7
app/component/label/ffmpeg/page.tsx
View File

@@ -1,7 +0,0 @@
"use client"
import VideoFrameExtractor from "./VideoFrameExtractor"
export default function ComponentLabelFfmpegPage() {
return <VideoFrameExtractor />
}

37
app/component/label/login/page.tsx
View File

@@ -1,37 +0,0 @@
"use client"
import { userLogin } from "@/components/label/api/label"
import { usePermissionStore } from "@/components/label/store/auth"
import { Button } from "@mantine/core"
export default function ComponentLabelLoginPage() {
const { setUserInfo, setUserPassword } = usePermissionStore()
const user_id = usePermissionStore.getState().user_id
// 用户登录
const handleUserLoginBtnClick = async () => {
try {
const res = await userLogin({
name: "admin",
password: "123456",
})
const { uid, name, token, refresh_token } = res
setUserInfo({
user_id: uid,
user_name: name,
token,
refresh_token,
detailInfo: res,
})
setUserPassword("123456")
} catch (error) {
console.log(error)
}
}
return (
<>
<Button onClick={handleUserLoginBtnClick}>Login</Button>
user_id:{user_id}
</>
)
}

41
app/component/label/picture/page.tsx
View File

@@ -1,41 +0,0 @@
"use client"
import LabelContent from "@/components/label"
import { useAppLayoutStore } from "@/components/layout/store"
import { Breadcrumbs, Flex, Paper, Stack, UnstyledButton } from "@mantine/core"
import { useMemo } from "react"
export default function ComponentLabelPicturePage() {
const items = [{ title: "地图展示" }].map((item) => (
<UnstyledButton key={item.title}>{item.title}</UnstyledButton>
))
const { isOpen } = useAppLayoutStore()
let leftWidth = useMemo(() => {
let width = 69
return !isOpen ? width : width + 160
}, [isOpen])
return (
<>
<Stack w="100%" h="calc(100vh - 56px)" p={"md"}>
<Flex justify={"space-between"} align={"center"} h={"16px"}>
<Breadcrumbs>{items}</Breadcrumbs>
</Flex>
<Paper
shadow="xs"
p="0"
flex={1}
display="flex"
style={{
overflow: "hidden",
}}>
<LabelContent
headerHeight={128}
leftWidth={leftWidth}
project_id={1}
task_id={3}
/>
</Paper>
</Stack>
</>
)
}

11
app/component/label/picture/standalone/page.tsx
View File

@@ -1,11 +0,0 @@
"use client"
import LabelContent from "@/components/label"
export default function ComponentLabelPictureStandalonePage() {
return (
<>
<LabelContent headerHeight={0} leftWidth={0} project_id={1} task_id={3} />
</>
)
}

21
app/component/layout.tsx
View File

@@ -1,21 +0,0 @@
import AppLayout from "@/components/layout/AppLayout"
import { PathnameRecorder } from "@/components/layout/PathnameRecorder"
import { componentList, showList } from "@/components/layout/common"
async function getMenu() {
return [...componentList, ...showList]
}
export default async function Layout({
children,
}: {
children: React.ReactNode
}) {
const menu = await getMenu()
return (
<AppLayout menu={menu}>
{children}
<PathnameRecorder menu={menu} />
</AppLayout>
)
}

5
app/component/media/dynamic/page.tsx
View File

@@ -1,5 +0,0 @@
"use client"
export default function ComponentMediaDynamicPage() {
return <>ComponentMediaDynamicPage</>
}

5
app/component/media/static/page.tsx
View File

@@ -1,5 +0,0 @@
"use client"
export default function ComponentMediaStaticPage() {
return <>ComponentMediaStaticPage</>
}

12
app/component/page.tsx
View File

@@ -1,12 +0,0 @@
"use client"
import { useRouter } from "next/navigation"
import { useEffect } from "react"
export default function ComponentPage() {
const router = useRouter()
useEffect(() => {
router.push("/component/base/department")
}, [router])
return <></>
}

5
app/component/table/base/page.tsx
View File

@@ -1,5 +0,0 @@
"use client"
export default function ComponentTableBasePage() {
return <>ComponentTableBasePage</>
}

2
components/label/LabelNossr.tsx
View File

@@ -10,7 +10,6 @@ import {
} from "react"
import ScaleComponent from "./components/ScaleComponent"
import { processVideo } from "@/app/component/label/video2image/processVideo"
import { Box, Button, Flex, LoadingOverlay, Stack } from "@mantine/core"
import { notifications, showNotification } from "@mantine/notifications"
import { getLabelResult, getServerImage } from "./api/label"
@@ -35,6 +34,7 @@ import RightQATools from "./components/RightQATools"
import RightTaskTools from "./components/RightTaskTools"
import ScaleToolContainer from "./components/ScaleToolContainer"
import TopTools from "./components/TopTools"
import { processVideo } from "./ffmpeg/processVideo"
import {
useImagesStore,
useKeyEventStore,

0
app/component/label/ffmpeg/ffmpeg.worker.ts → components/label/ffmpeg/ffmpeg.worker.ts
View File

6
app/component/label/video2image/processVideo.ts → components/label/ffmpeg/processVideo.ts
View File

@@ -1,6 +1,6 @@
"use client"
import type { WorkerMessage, WorkerResponse } from "../ffmpeg/ffmpeg.worker"
import type { WorkerMessage, WorkerResponse } from "./ffmpeg.worker"
export interface VideoFrameFile {
name: string
@@ -161,9 +161,7 @@ export const processVideo = async (
runTimeoutMs: number,
runFirstFrameTimeoutMs: number
) => {
const worker = new Worker(
new URL("../ffmpeg/ffmpeg.worker.ts", import.meta.url)
)
const worker = new Worker(new URL("./ffmpeg.worker.ts", import.meta.url))
const outputExt = getOutputExtFromArgs(runArgs)
let frameIndex = 0
const frames: VideoFrameFile[] = []