From 0619bafbf9f75c4791a7304843212544c7ca657d Mon Sep 17 00:00:00 2001
From: feie9456 <feie9454@gmail.com>
Date: Sat, 20 Sep 2025 08:11:57 +0800
Subject: [PATCH] =?UTF-8?q?SVG=E4=B8=8E=E9=A2=84=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bun.lock                |  53 +++
 package.json            |   1 +
 src/App.vue             | 977 ++++++++++++++++++++++++++++++++++------
 src/lib/processImage.ts | 291 +++++++-----
 src/style.css           |   3 +
 tsconfig.app.json       |   2 -
 tsconfig.node.json      |   2 -
 vite.config.ts          |  13 +-
 8 files changed, 1087 insertions(+), 255 deletions(-)

diff --git a/bun.lock b/bun.lock
index ab87287..83db31d 100644
--- a/bun.lock
+++ b/bun.lock
@@ -12,6 +12,7 @@
         "@vue/tsconfig": "^0.8.1",
         "typescript": "~5.8.3",
         "vite": "^7.1.6",
+        "vite-plugin-mkcert": "^1.17.8",
         "vue-tsc": "^3.0.7",
       },
     },
@@ -161,24 +162,72 @@
 
     "alien-signals": ["alien-signals@2.0.7", "", {}, "sha512-wE7y3jmYeb0+h6mr5BOovuqhFv22O/MV9j5p0ndJsa7z1zJNPGQ4ph5pQk/kTTCWRC3xsA4SmtwmkzQO+7NCNg=="],
 
+    "asynckit": ["asynckit@0.4.0", "", {}, "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="],
+
+    "axios": ["axios@1.12.2", "", { "dependencies": { "follow-redirects": "^1.15.6", "form-data": "^4.0.4", "proxy-from-env": "^1.1.0" } }, "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw=="],
+
+    "call-bind-apply-helpers": ["call-bind-apply-helpers@1.0.2", "", { "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2" } }, "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ=="],
+
+    "combined-stream": ["combined-stream@1.0.8", "", { "dependencies": { "delayed-stream": "~1.0.0" } }, "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="],
+
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
 
     "de-indent": ["de-indent@1.0.2", "", {}, "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="],
 
+    "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
+
+    "delayed-stream": ["delayed-stream@1.0.0", "", {}, "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="],
+
+    "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
+
     "entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
 
+    "es-define-property": ["es-define-property@1.0.1", "", {}, "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g=="],
+
+    "es-errors": ["es-errors@1.3.0", "", {}, "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="],
+
+    "es-object-atoms": ["es-object-atoms@1.1.1", "", { "dependencies": { "es-errors": "^1.3.0" } }, "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA=="],
+
+    "es-set-tostringtag": ["es-set-tostringtag@2.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "get-intrinsic": "^1.2.6", "has-tostringtag": "^1.0.2", "hasown": "^2.0.2" } }, "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA=="],
+
     "esbuild": ["esbuild@0.25.10", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.10", "@esbuild/android-arm": "0.25.10", "@esbuild/android-arm64": "0.25.10", "@esbuild/android-x64": "0.25.10", "@esbuild/darwin-arm64": "0.25.10", "@esbuild/darwin-x64": "0.25.10", "@esbuild/freebsd-arm64": "0.25.10", "@esbuild/freebsd-x64": "0.25.10", "@esbuild/linux-arm": "0.25.10", "@esbuild/linux-arm64": "0.25.10", "@esbuild/linux-ia32": "0.25.10", "@esbuild/linux-loong64": "0.25.10", "@esbuild/linux-mips64el": "0.25.10", "@esbuild/linux-ppc64": "0.25.10", "@esbuild/linux-riscv64": "0.25.10", "@esbuild/linux-s390x": "0.25.10", "@esbuild/linux-x64": "0.25.10", "@esbuild/netbsd-arm64": "0.25.10", "@esbuild/netbsd-x64": "0.25.10", "@esbuild/openbsd-arm64": "0.25.10", "@esbuild/openbsd-x64": "0.25.10", "@esbuild/openharmony-arm64": "0.25.10", "@esbuild/sunos-x64": "0.25.10", "@esbuild/win32-arm64": "0.25.10", "@esbuild/win32-ia32": "0.25.10", "@esbuild/win32-x64": "0.25.10" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ=="],
 
     "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
     "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
 
+    "follow-redirects": ["follow-redirects@1.15.11", "", {}, "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ=="],
+
+    "form-data": ["form-data@4.0.4", "", { "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "es-set-tostringtag": "^2.1.0", "hasown": "^2.0.2", "mime-types": "^2.1.12" } }, "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow=="],
+
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
+    "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
+
+    "get-intrinsic": ["get-intrinsic@1.3.0", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.1.1", "function-bind": "^1.1.2", "get-proto": "^1.0.1", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", "math-intrinsics": "^1.1.0" } }, "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ=="],
+
+    "get-proto": ["get-proto@1.0.1", "", { "dependencies": { "dunder-proto": "^1.0.1", "es-object-atoms": "^1.0.0" } }, "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g=="],
+
+    "gopd": ["gopd@1.2.0", "", {}, "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="],
+
+    "has-symbols": ["has-symbols@1.1.0", "", {}, "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="],
+
+    "has-tostringtag": ["has-tostringtag@1.0.2", "", { "dependencies": { "has-symbols": "^1.0.3" } }, "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw=="],
+
+    "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
+
     "he": ["he@1.2.0", "", { "bin": { "he": "bin/he" } }, "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="],
 
     "magic-string": ["magic-string@0.30.19", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw=="],
 
+    "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
+
+    "mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="],
+
+    "mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
+
+    "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
+
     "muggle-string": ["muggle-string@0.4.1", "", {}, "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ=="],
 
     "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
@@ -191,6 +240,8 @@
 
     "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
 
+    "proxy-from-env": ["proxy-from-env@1.1.0", "", {}, "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="],
+
     "rollup": ["rollup@4.50.2", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.50.2", "@rollup/rollup-android-arm64": "4.50.2", "@rollup/rollup-darwin-arm64": "4.50.2", "@rollup/rollup-darwin-x64": "4.50.2", "@rollup/rollup-freebsd-arm64": "4.50.2", "@rollup/rollup-freebsd-x64": "4.50.2", "@rollup/rollup-linux-arm-gnueabihf": "4.50.2", "@rollup/rollup-linux-arm-musleabihf": "4.50.2", "@rollup/rollup-linux-arm64-gnu": "4.50.2", "@rollup/rollup-linux-arm64-musl": "4.50.2", "@rollup/rollup-linux-loong64-gnu": "4.50.2", "@rollup/rollup-linux-ppc64-gnu": "4.50.2", "@rollup/rollup-linux-riscv64-gnu": "4.50.2", "@rollup/rollup-linux-riscv64-musl": "4.50.2", "@rollup/rollup-linux-s390x-gnu": "4.50.2", "@rollup/rollup-linux-x64-gnu": "4.50.2", "@rollup/rollup-linux-x64-musl": "4.50.2", "@rollup/rollup-openharmony-arm64": "4.50.2", "@rollup/rollup-win32-arm64-msvc": "4.50.2", "@rollup/rollup-win32-ia32-msvc": "4.50.2", "@rollup/rollup-win32-x64-msvc": "4.50.2", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-BgLRGy7tNS9H66aIMASq1qSYbAAJV6Z6WR4QYTvj5FgF15rZ/ympT1uixHXwzbZUBDbkvqUI1KR0fH1FhMaQ9w=="],
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
@@ -201,6 +252,8 @@
 
     "vite": ["vite@7.1.6", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-SRYIB8t/isTwNn8vMB3MR6E+EQZM/WG1aKmmIUCfDXfVvKfc20ZpamngWHKzAmmu9ppsgxsg4b2I7c90JZudIQ=="],
 
+    "vite-plugin-mkcert": ["vite-plugin-mkcert@1.17.8", "", { "dependencies": { "axios": "^1.8.3", "debug": "^4.4.0", "picocolors": "^1.1.1" }, "peerDependencies": { "vite": ">=3" } }, "sha512-S+4tNEyGqdZQ3RLAG54ETeO2qyURHWrVjUWKYikLAbmhh/iJ+36gDEja4OWwFyXNuvyXcZwNt5TZZR9itPeG5Q=="],
+
     "vscode-uri": ["vscode-uri@3.1.0", "", {}, "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ=="],
 
     "vue": ["vue@3.5.21", "", { "dependencies": { "@vue/compiler-dom": "3.5.21", "@vue/compiler-sfc": "3.5.21", "@vue/runtime-dom": "3.5.21", "@vue/server-renderer": "3.5.21", "@vue/shared": "3.5.21" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-xxf9rum9KtOdwdRkiApWL+9hZEMWE90FHh8yS1+KJAiWYh+iGWV1FquPjoO9VUHQ+VIhsCXNNyZ5Sf4++RVZBA=="],
diff --git a/package.json b/package.json
index 90cfa06..2f73dde 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@vue/tsconfig": "^0.8.1",
     "typescript": "~5.8.3",
     "vite": "^7.1.6",
+    "vite-plugin-mkcert": "^1.17.8",
     "vue-tsc": "^3.0.7"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index ef15478..160985b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,56 +1,5 @@
-<template>
-  <div class="wrap">
-    <div class="stage">
-      <!-- 隐藏视频元素仅用于抓帧 -->
-      <video
-        ref="videoEl"
-        playsinline
-        muted
-        autoplay
-        class="hidden-video"
-      ></video>
-
-      <!-- 可见的绘制画布 -->
-      <canvas ref="canvasEl" class="canvas"></canvas>
-
-      <!-- HUD 面板 -->
-      <div class="hud">
-        <div class="row">
-          <button class="btn" @click="toggle()">
-            {{ running ? '停止' : '启动' }}
-          </button>
-          <button class="btn" @click="switchFacing()">
-            切换摄像头（{{ facingModeLabel }}）
-          </button>
-        </div>
-        <div class="row small">
-          <span>FPS: {{ fps.toFixed(1) }}</span>
-          <span v-if="err" class="err">错误：{{ err }}</span>
-        </div>
-        <div class="metrics">
-          <div class="group">
-            <h4>Green</h4>
-            <div>x: {{ fmt(metrics.greenRectCenterX) }}, y: {{ fmt(metrics.greenRectCenterY) }}</div>
-            <div>θ: {{ fmt(metrics.greenRectRotation) }}°</div>
-            <div>L×W: {{ fmt(metrics.greenRectLength) }} × {{ fmt(metrics.greenRectWidth) }}</div>
-          </div>
-          <div class="group">
-            <h4>Blue</h4>
-            <div>x: {{ fmt(metrics.blueRectCenterX) }}, y: {{ fmt(metrics.blueRectCenterY) }}</div>
-            <div>θ: {{ fmt(metrics.blueRectRotation) }}°</div>
-            <div>L×W: {{ fmt(metrics.blueRectLength) }} × {{ fmt(metrics.blueRectWidth) }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <p class="hint">
-      提示：蓝色矩形基于红色/绿色关系构造；若未检测到所需目标，相关字段会为空（null），画面也不会绘制对应图形。
-    </p>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { onMounted, onBeforeUnmount, ref, reactive, computed } from 'vue'
+import { onMounted, onBeforeUnmount, ref, reactive, computed, watch } from 'vue'
 import cv from '@techstark/opencv-js'
 import { processImage } from './lib/processImage' // ← 根据你的实际路径调整
 
@@ -60,26 +9,203 @@ type Metrics = ReturnType<typeof processImage>
 const videoEl = ref<HTMLVideoElement | null>(null)
 const canvasEl = ref<HTMLCanvasElement | null>(null)
 let ctx: CanvasRenderingContext2D | null = null
+// 离屏处理画布：用于抓帧与图像处理，fetch 期间继续更新它
+let procCanvasEl: HTMLCanvasElement | null = null
+let procCtx: CanvasRenderingContext2D | null = null
+// 视图尺寸（用于 SVG overlay 同步尺寸）
+const viewW = ref(0)
+const viewH = ref(0)
 
 // 状态
 const running = ref(false)
 const fps = ref(0)
 const err = ref<string | null>(null)
+const isFetching = ref(false)
+// 是否显示底层可见画布
+const showCanvas = ref(true)
 // OpenCV 就绪标记：仅在完成 WASM 初始化后才进行图像处理
 const cvReady = ref(false)
 const metrics = reactive<Metrics>({
+  redRectCenterX: null,
+  redRectCenterY: null,
   greenRectCenterX: null,
   greenRectCenterY: null,
   blueRectCenterX: null,
   blueRectCenterY: null,
+  redRectRotation: null,
   greenRectRotation: null,
   blueRectRotation: null,
+  redRectLength: null,
   greenRectLength: null,
   blueRectLength: null,
+  redRectWidth: null,
   greenRectWidth: null,
   blueRectWidth: null
 })
 
+// 圆心拟合（每180帧）
+type Pt = { x: number; y: number }
+const redCircleCenter = ref<Pt | null>(null)
+const blueCircleCenter = ref<Pt | null>(null)
+const greenCircleCenter = ref<Pt | null>(null)
+const redPts: Pt[] = []
+const bluePts: Pt[] = []
+const greenPts: Pt[] = []
+const fitWindow = 180
+let frameCounter = 0
+
+// 每帧相对圆心的极坐标（cos/sin/角度）
+const redPolar = ref<{ cos: number; sin: number; angleDeg: number } | null>(null)
+const bluePolar = ref<{ cos: number; sin: number; angleDeg: number } | null>(null)
+const greenPolar = ref<{ cos: number; sin: number; angleDeg: number } | null>(null)
+// 保存最近半径用于将预测的 pos_sin/cos 转回像素坐标
+let redRadius: number | null = null
+let greenRadius: number | null = null
+
+// 预测缓冲：仅当填满180帧才触发一次请求
+const framesBuffer: number[][] = []
+let lastAddedTs: number | null = null
+// 预测绘制数据（原始返回），在 fetch 成功后更新
+let predictionsRaw: number[][] | null = null
+let predictionHorizon = 0
+
+// SVG 渲染所需的细杆数据（仅在可见刷新时更新，fetch 期间冻结）
+type Rod = { cx: number; cy: number; longLen: number; shortLen: number; angleDeg: number; angleRad: number; color: string; opacity?: number }
+const displayDetectedRods = ref<Rod[]>([])
+const displayPredictedRods = ref<Rod[]>([])
+type CenterMarker = { x: number; y: number; color: string }
+const displayCenters = ref<CenterMarker[]>([])
+
+// 使用代数最小二乘（Kasa）解 x^2 + y^2 + A x + B y + C = 0
+function fitCircle(points: Pt[]): { cx: number; cy: number; r: number } | null {
+  const n = points.length
+  if (n < 3) return null
+  let Sx = 0, Sy = 0, Sxx = 0, Syy = 0, Sxy = 0
+  let Sxz = 0, Syz = 0, Sz = 0 // z = -(x^2 + y^2)
+  for (const { x, y } of points) {
+    const xx = x * x
+    const yy = y * y
+    const z = -(xx + yy)
+    Sx += x
+    Sy += y
+    Sxx += xx
+    Syy += yy
+    Sxy += x * y
+    Sxz += x * z
+    Syz += y * z
+    Sz += z
+  }
+  // 正规方程 M p = b, p = [A, B, C]
+  const M = [
+    [Sxx, Sxy, Sx],
+    [Sxy, Syy, Sy],
+    [Sx, Sy, n]
+  ] as [number, number, number][]
+  const b = [Sxz, Syz, Sz] as [number, number, number]
+
+  const p = solveSym3(M, b)
+  if (!p) return null
+  const [A, B, C] = p
+  const cx = -A / 2
+  const cy = -B / 2
+  const rad2 = cx * cx + cy * cy - C
+  if (!(rad2 > 0)) return { cx, cy, r: 0 }
+  return { cx, cy, r: Math.sqrt(rad2) }
+}
+
+function solveSym3(M: [number, number, number][], b: [number, number, number]): [number, number, number] | null {
+  if (M.length < 3 || b.length < 3) return null
+  const r0 = M[0]; const r1 = M[1]; const r2 = M[2]
+  if (!r0 || !r1 || !r2 || r0.length < 3 || r1.length < 3 || r2.length < 3) return null
+  const [m00, m01, m02] = r0
+  const [m10, m11, m12] = r1
+  const [m20, m21, m22] = r2
+  const [d0, d1, d2] = b
+
+  const det =
+    m00 * (m11 * m22 - m12 * m21) -
+    m01 * (m10 * m22 - m12 * m20) +
+    m02 * (m10 * m21 - m11 * m20)
+  if (Math.abs(det) < 1e-8) return null
+
+  // 替换第0列
+  const detA =
+    d0 * (m11 * m22 - m12 * m21) -
+    m01 * (d1 * m22 - m12 * d2) +
+    m02 * (d1 * m21 - m11 * d2)
+  // 替换第1列
+  const detB =
+    m00 * (d1 * m22 - m12 * d2) -
+    d0 * (m10 * m22 - m12 * m20) +
+    m02 * (m10 * d2 - d1 * m20)
+  // 替换第2列
+  const detC =
+    m00 * (m11 * d2 - d1 * m21) -
+    m01 * (m10 * d2 - d1 * m20) +
+    d0 * (m10 * m21 - m11 * m20)
+
+  const A = detA / det
+  const B = detB / det
+  const C = detC / det
+  return [A, B, C]
+}
+
+// 录制 CSV
+const isRecording = ref(false)
+let recordRows: string[] = []
+let recordStartT = 0
+let recordFrameIndex = 0
+// 固定表头顺序（“所有数据”= 所有 metrics 字段）
+const metricKeys: (keyof Metrics)[] = [
+  'redRectCenterX', 'redRectCenterY',
+  'greenRectCenterX', 'greenRectCenterY',
+  'blueRectCenterX', 'blueRectCenterY',
+  'redRectRotation', 'greenRectRotation', 'blueRectRotation',
+  'redRectLength', 'greenRectLength', 'blueRectLength',
+  'redRectWidth', 'greenRectWidth', 'blueRectWidth'
+]
+
+function startRecording() {
+  recordRows = []
+  recordStartT = performance.now()
+  recordFrameIndex = 0
+  isRecording.value = true
+}
+
+function stopRecordingAndDownload() {
+  isRecording.value = false
+  // 生成 CSV 内容
+  const header = ['frameIndex', 'time', ...metricKeys]
+  const csvLines = [header.join(','), ...recordRows]
+  const csvContent = '\ufeff' + csvLines.join('\r\n') // 加 BOM 便于 Excel 识别
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  const ts = new Date()
+  const pad = (n: number) => String(n).padStart(2, '0')
+  const fname = `metrics-${ts.getFullYear()}${pad(ts.getMonth() + 1)}${pad(ts.getDate())}-${pad(ts.getHours())}${pad(ts.getMinutes())}${pad(ts.getSeconds())}.csv`
+  a.href = url
+  a.download = fname
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  setTimeout(() => URL.revokeObjectURL(url), 0)
+}
+
+function toggleRecord() {
+  if (!isRecording.value) startRecording()
+  else stopRecordingAndDownload()
+}
+
+// 输入源：摄像头 | 本地文件
+const sourceType = ref<'camera' | 'file'>('camera')
+const fileInputEl = ref<HTMLInputElement | null>(null)
+const fileUrl = ref<string | null>(null)
+const fileName = ref<string | null>(null)
+const fileLoop = ref<boolean>(true)
+
+const imageMaxLength = 960
+
 // 摄像头方向
 const facingMode = ref<'environment' | 'user'>('environment')
 const facingModeLabel = computed(() =>
@@ -97,66 +223,29 @@ function fmt(n: number | null) {
   return n == null ? '—' : n.toFixed(1)
 }
 
-function drawRotRect(
-  g: CanvasRenderingContext2D,
-  cx: number,
-  cy: number,
-  longLen: number,
-  shortLen: number,
-  angleDeg: number,
-  color: string
-) {
-  const rad = (angleDeg * Math.PI) / 180
-  const dir = { x: Math.cos(rad), y: Math.sin(rad) }
-  const perp = { x: -dir.y, y: dir.x }
-  const hl = longLen / 2
-  const hw = shortLen / 2
-
-  const p0 = { x: cx - dir.x * hl - perp.x * hw, y: cy - dir.y * hl - perp.y * hw }
-  const p1 = { x: cx + dir.x * hl - perp.x * hw, y: cy + dir.y * hl - perp.y * hw }
-  const p2 = { x: cx + dir.x * hl + perp.x * hw, y: cy + dir.y * hl + perp.y * hw }
-  const p3 = { x: cx - dir.x * hl + perp.x * hw, y: cy - dir.y * hl + perp.y * hw }
-
-  g.save()
-  g.lineWidth = 2
-  g.strokeStyle = color
-  g.beginPath()
-  g.moveTo(p0.x, p0.y)
-  g.lineTo(p1.x, p1.y)
-  g.lineTo(p2.x, p2.y)
-  g.lineTo(p3.x, p3.y)
-  g.closePath()
-  g.stroke()
-
-  // 中心点 + 朝向线
-  g.fillStyle = color
-  g.beginPath()
-  g.arc(cx, cy, 4, 0, Math.PI * 2)
-  g.fill()
-  g.beginPath()
-  g.moveTo(cx, cy)
-  g.lineTo(cx + dir.x * (hl * 0.8), cy + dir.y * (hl * 0.8))
-  g.stroke()
-  g.restore()
-}
-
-function clearCanvas(g: CanvasRenderingContext2D, w: number, h: number) {
-  g.clearRect(0, 0, w, h)
-}
-
 function resizeCanvasToVideo(video: HTMLVideoElement, canvas: HTMLCanvasElement) {
-  const vw = video.videoWidth || 640
-  const vh = video.videoHeight || 480
+  const vw = video.videoWidth
+  const vh = video.videoHeight
+
+  const scaleRatio = Math.min(1, imageMaxLength / Math.max(vw, vh))
   // 实际像素尺寸
-  canvas.width = vw
-  canvas.height = vh
+  canvas.width = Math.round(vw * scaleRatio)
+  canvas.height = Math.round(vh * scaleRatio)
   // CSS 自适应
   canvas.style.width = '100%'
   canvas.style.height = 'auto'
+  // 同步离屏处理画布尺寸
+  if (!procCanvasEl) procCanvasEl = document.createElement('canvas')
+  procCanvasEl.width = canvas.width
+  procCanvasEl.height = canvas.height
+  if (!procCtx) procCtx = procCanvasEl.getContext('2d')
+  // 同步 SVG 尺寸
+  viewW.value = canvas.width
+  viewH.value = canvas.height
 }
 
 function copyMetrics(next: Metrics) {
-  ;(Object.keys(metrics) as (keyof Metrics)[]).forEach((k) => {
+  ; (Object.keys(metrics) as (keyof Metrics)[]).forEach((k) => {
     metrics[k] = next[k] as any
   })
 }
@@ -169,7 +258,7 @@ async function ensureCVReady(): Promise<void> {
       return
     }
     await new Promise<void>((resolve) => {
-      ;(cv as any).onRuntimeInitialized = () => {
+      ; (cv as any).onRuntimeInitialized = () => {
         cvReady.value = true
         resolve()
       }
@@ -186,10 +275,13 @@ async function startStream() {
     await stopStream()
 
     stream = await navigator.mediaDevices.getUserMedia({
-      video: { facingMode: { ideal: facingMode.value }, width: { ideal: 1280 }, height: { ideal: 720 } },
+      video: { facingMode: { ideal: facingMode.value }, width: { ideal: 960 }, height: { ideal: 540 } },
       audio: false
     })
     if (!videoEl.value) return
+    // 清空可能存在的文件来源
+    videoEl.value.src = ''
+    videoEl.value.removeAttribute('src')
     videoEl.value.srcObject = stream
 
     // 等待元数据并尝试播放（兼容 Safari/部分浏览器自动播放策略）
@@ -213,6 +305,31 @@ async function startStream() {
     ctx = canvasEl.value.getContext('2d')
     if (!ctx) throw new Error('CanvasRenderingContext2D 获取失败')
     resizeCanvasToVideo(videoEl.value, canvasEl.value)
+    // 初始化离屏处理上下文
+    if (!procCanvasEl) procCanvasEl = document.createElement('canvas')
+    procCanvasEl.width = canvasEl.value.width
+    procCanvasEl.height = canvasEl.value.height
+    procCtx = procCanvasEl.getContext('2d')
+    if (!procCtx) throw new Error('离屏 CanvasRenderingContext2D 获取失败')
+
+    // 重置计数与缓存
+    frameCounter = 0
+    redPts.length = 0
+    bluePts.length = 0
+    redCircleCenter.value = null
+    blueCircleCenter.value = null
+    greenPts.length = 0
+    greenCircleCenter.value = null
+    redPolar.value = null
+    bluePolar.value = null
+    greenPolar.value = null
+    framesBuffer.length = 0
+    lastAddedTs = null
+    predictionsRaw = null
+    predictionHorizon = 0
+    isFetching.value = false
+    redRadius = null
+    greenRadius = null
 
     running.value = true
     lastT = performance.now()
@@ -230,10 +347,86 @@ async function stopStream() {
     stream.getTracks().forEach((t) => t.stop())
     stream = null
   }
+  if (videoEl.value) {
+    try { videoEl.value.pause() } catch { }
+    // 清除摄像头或文件源
+    videoEl.value.srcObject = null
+    if (videoEl.value.src) {
+      videoEl.value.removeAttribute('src')
+    }
+  }
   running.value = false
 }
 
-function loop() {
+async function startFilePlayback() {
+  try {
+    err.value = null
+    await stopStream()
+
+    if (!videoEl.value) throw new Error('视频元素不存在')
+    if (!fileUrl.value) throw new Error('请先选择本地视频文件')
+
+    videoEl.value.srcObject = null
+    videoEl.value.src = fileUrl.value
+    videoEl.value.loop = !!fileLoop.value
+
+    await new Promise<void>((res) => {
+      if (!videoEl.value) return res()
+      const v = videoEl.value
+      if (v.readyState >= 1 && v.videoWidth && v.videoHeight) return res()
+      const onMeta = () => {
+        v.removeEventListener('loadedmetadata', onMeta)
+        res()
+      }
+      v.addEventListener('loadedmetadata', onMeta)
+    })
+
+    try {
+      await videoEl.value.play()
+    } catch {
+      // 可能需要用户手势
+    }
+
+    if (!canvasEl.value || !videoEl.value) return
+    ctx = canvasEl.value.getContext('2d')
+    if (!ctx) throw new Error('CanvasRenderingContext2D 获取失败')
+    resizeCanvasToVideo(videoEl.value, canvasEl.value)
+    // 初始化离屏处理上下文
+    if (!procCanvasEl) procCanvasEl = document.createElement('canvas')
+    procCanvasEl.width = canvasEl.value.width
+    procCanvasEl.height = canvasEl.value.height
+    procCtx = procCanvasEl.getContext('2d')
+    if (!procCtx) throw new Error('离屏 CanvasRenderingContext2D 获取失败')
+
+    // 重置计数与缓存
+    frameCounter = 0
+    redPts.length = 0
+    bluePts.length = 0
+    redCircleCenter.value = null
+    blueCircleCenter.value = null
+    greenPts.length = 0
+    greenCircleCenter.value = null
+    redPolar.value = null
+    bluePolar.value = null
+    greenPolar.value = null
+    framesBuffer.length = 0
+    lastAddedTs = null
+    predictionsRaw = null
+    predictionHorizon = 0
+    isFetching.value = false
+    redRadius = null
+    greenRadius = null
+
+    running.value = true
+    lastT = performance.now()
+    loop()
+  } catch (e: any) {
+    err.value = e?.message ?? String(e)
+    running.value = false
+  }
+}
+
+async function loop() {
   if (!running.value || !videoEl.value || !canvasEl.value || !ctx) return
 
   const now = performance.now()
@@ -241,41 +434,294 @@ function loop() {
   lastT = now
   fps.value = 1000 / (dt || 16.7)
 
-  // 将视频帧绘制到画布
+  // 将视频帧绘制到离屏画布（可在 fetch 期间继续处理）
   const vw = canvasEl.value.width
   const vh = canvasEl.value.height
-  ctx.drawImage(videoEl.value, 0, 0, vw, vh)
+  if (procCtx) {
+    procCtx.drawImage(videoEl.value, 0, 0, vw, vh)
+  }
 
   try {
+    // 本帧是否应在绘制后启动 fetch
+    let shouldStartFetch = false
     // 取像素、识别
-    const imgData = ctx.getImageData(0, 0, vw, vh)
+    const baseCtx = procCtx ?? ctx
+    if (!baseCtx) throw new Error('处理上下文获取失败')
+    const imgData = baseCtx.getImageData(0, 0, vw, vh)
     if (cvReady.value) {
       const res = processImage(imgData)
       copyMetrics(res)
     }
 
-    // 覆盖绘制识别结果
-    if (metrics.greenRectCenterX != null && metrics.greenRectCenterY != null && metrics.greenRectLength && metrics.greenRectWidth && metrics.greenRectRotation != null) {
-      drawRotRect(
-        ctx,
-        metrics.greenRectCenterX,
-        metrics.greenRectCenterY,
-        metrics.greenRectLength,
-        metrics.greenRectWidth,
-        metrics.greenRectRotation,
-        '#00ff6a'
-      )
+    // 收集点到滑动窗口
+    if (metrics.redRectCenterX != null && metrics.redRectCenterY != null) {
+      redPts.push({ x: metrics.redRectCenterX, y: metrics.redRectCenterY })
+      if (redPts.length > fitWindow) redPts.shift()
     }
-    if (metrics.blueRectCenterX != null && metrics.blueRectCenterY != null && metrics.blueRectLength && metrics.blueRectWidth && metrics.blueRectRotation != null) {
-      drawRotRect(
-        ctx,
-        metrics.blueRectCenterX,
-        metrics.blueRectCenterY,
-        metrics.blueRectLength,
-        metrics.blueRectWidth,
-        metrics.blueRectRotation,
-        '#2e6bff'
-      )
+    if (metrics.blueRectCenterX != null && metrics.blueRectCenterY != null) {
+      bluePts.push({ x: metrics.blueRectCenterX, y: metrics.blueRectCenterY })
+      if (bluePts.length > fitWindow) bluePts.shift()
+    }
+    if (metrics.greenRectCenterX != null && metrics.greenRectCenterY != null) {
+      greenPts.push({ x: metrics.greenRectCenterX, y: metrics.greenRectCenterY })
+      if (greenPts.length > fitWindow) greenPts.shift()
+    }
+
+    // 拟合一次圆心
+    frameCounter += 1
+    if (frameCounter % fitWindow === 0) {
+      const rf = fitCircle(redPts)
+      const bf = fitCircle(bluePts)
+      const gf = fitCircle(greenPts)
+      redCircleCenter.value = rf ? { x: rf.cx, y: rf.cy } : null
+      blueCircleCenter.value = bf ? { x: bf.cx, y: bf.cy } : null
+      greenCircleCenter.value = gf ? { x: gf.cx, y: gf.cy } : null
+    }
+
+    // 每帧计算相对圆心的 cos/sin/角度
+    if (
+      redCircleCenter.value &&
+      metrics.redRectCenterX != null && metrics.redRectCenterY != null
+    ) {
+      const dx = metrics.redRectCenterX - redCircleCenter.value.x
+      const dy = metrics.redRectCenterY - redCircleCenter.value.y
+      const r = Math.hypot(dx, dy)
+      if (r > 1e-6) {
+        const c = dx / r
+        const s = dy / r
+        const ang = (Math.atan2(dy, dx) * 180) / Math.PI
+        const angleDeg = ang >= 0 ? ang : ang + 360
+        redPolar.value = { cos: c, sin: s, angleDeg }
+        redRadius = r
+      } else {
+        redPolar.value = null
+        redRadius = null
+      }
+    } else {
+      redPolar.value = null
+    }
+    if (
+      blueCircleCenter.value &&
+      metrics.blueRectCenterX != null && metrics.blueRectCenterY != null
+    ) {
+      const dx = metrics.blueRectCenterX - blueCircleCenter.value.x
+      const dy = metrics.blueRectCenterY - blueCircleCenter.value.y
+      const r = Math.hypot(dx, dy)
+      if (r > 1e-6) {
+        const c = dx / r
+        const s = dy / r
+        const ang = (Math.atan2(dy, dx) * 180) / Math.PI
+        const angleDeg = ang >= 0 ? ang : ang + 360
+        bluePolar.value = { cos: c, sin: s, angleDeg }
+      } else {
+        bluePolar.value = null
+      }
+    } else {
+      bluePolar.value = null
+    }
+
+    // 计算绿色相对圆心的 cos/sin/角度
+    if (
+      greenCircleCenter.value &&
+      metrics.greenRectCenterX != null && metrics.greenRectCenterY != null
+    ) {
+      const dx = metrics.greenRectCenterX - greenCircleCenter.value.x
+      const dy = metrics.greenRectCenterY - greenCircleCenter.value.y
+      const r = Math.hypot(dx, dy)
+      if (r > 1e-6) {
+        const c = dx / r
+        const s = dy / r
+        const ang = (Math.atan2(dy, dx) * 180) / Math.PI
+        const angleDeg = ang >= 0 ? ang : ang + 360
+        greenPolar.value = { cos: c, sin: s, angleDeg }
+        greenRadius = r
+      } else {
+        greenPolar.value = null
+        greenRadius = null
+      }
+    } else {
+      greenPolar.value = null
+    }
+
+    // 维护180帧序列，仅在具备红绿圆心与必要数据时加入
+    const haveCenters = !!(redCircleCenter.value && greenCircleCenter.value)
+    const havePolars = !!(redPolar.value && greenPolar.value)
+    const redRotDeg = metrics.redRectRotation
+    const greenRotDeg = metrics.greenRectRotation
+    const haveAngles = redRotDeg != null && greenRotDeg != null
+    if (haveCenters && havePolars && haveAngles) {
+      if (lastAddedTs == null) {
+        // 初始化上一时间戳，不立即插入，确保 delta_time = t - t_-1
+        lastAddedTs = now
+      } else {
+        const dtSec = (now - lastAddedTs) / 1000
+        lastAddedTs = now
+        const redRotRad = (redRotDeg! * Math.PI) / 180
+        const greenRotRad = (greenRotDeg! * Math.PI) / 180
+        const rp = redPolar.value!
+        const gp = greenPolar.value!
+        const frameRow: number[] = [
+          Number(dtSec.toFixed(6)),
+          Math.sin(greenRotRad), Math.cos(greenRotRad),
+          Math.sin(redRotRad), Math.cos(redRotRad),
+          // green_pos_sin, green_pos_cos, red_pos_sin, red_pos_cos
+          gp.sin, gp.cos, rp.sin, rp.cos
+        ]
+        framesBuffer.push(frameRow)
+        if (framesBuffer.length > 180) framesBuffer.shift()
+        // 满 180 并且未在 fetch 中：在本帧绘制之后再启动 fetch，避免画面永远不刷新
+        if (framesBuffer.length === 180 && !isFetching.value) {
+          shouldStartFetch = true
+        }
+      }
+    }
+
+    // 若处于录制状态，写入一行
+    if (isRecording.value) {
+      const tSec = (now - recordStartT) / 1000
+      const values: (string | number)[] = [
+        recordFrameIndex,
+        tSec.toFixed(3)
+      ]
+      for (const k of metricKeys) {
+        const v = metrics[k]
+        values.push(v == null ? '' : (typeof v === 'number' ? v.toFixed(3) : String(v)))
+      }
+      recordRows.push(values.join(','))
+      recordFrameIndex += 1
+    }
+
+    // 可见画布在 fetch 期间冻结；非 fetch 时才刷新
+    if (!isFetching.value && ctx) {
+      // 先绘制当前视频帧背景（来自离屏）
+      if (procCanvasEl) ctx.drawImage(procCanvasEl, 0, 0, vw, vh)
+
+      // 组装 SVG 检测细杆（仅在可见刷新时更新）
+      const rods: Rod[] = []
+      if (metrics.blueRectCenterX != null && metrics.blueRectCenterY != null && metrics.blueRectLength && metrics.blueRectWidth && metrics.blueRectRotation != null) {
+        rods.push({
+          cx: metrics.blueRectCenterX,
+          cy: metrics.blueRectCenterY,
+          longLen: metrics.blueRectLength,
+          shortLen: metrics.blueRectWidth,
+          angleDeg: metrics.blueRectRotation,
+          angleRad: (metrics.blueRectRotation * Math.PI) / 180,
+          color: '#2e6bff',
+          opacity: 1
+        })
+      }
+      if (metrics.redRectCenterX != null && metrics.redRectCenterY != null && metrics.redRectLength && metrics.redRectWidth && metrics.redRectRotation != null) {
+        rods.push({
+          cx: metrics.redRectCenterX,
+          cy: metrics.redRectCenterY,
+          longLen: metrics.redRectLength,
+          shortLen: metrics.redRectWidth,
+          angleDeg: metrics.redRectRotation,
+          angleRad: (metrics.redRectRotation * Math.PI) / 180,
+          color: '#ff4d4d',
+          opacity: 1
+        })
+      }
+      if (metrics.greenRectCenterX != null && metrics.greenRectCenterY != null && metrics.greenRectLength && metrics.greenRectWidth && metrics.greenRectRotation != null) {
+        rods.push({
+          cx: metrics.greenRectCenterX,
+          cy: metrics.greenRectCenterY,
+          longLen: metrics.greenRectLength,
+          shortLen: metrics.greenRectWidth,
+          angleDeg: metrics.greenRectRotation,
+          angleRad: (metrics.greenRectRotation * Math.PI) / 180,
+          color: '#00ff6a',
+          opacity: 1
+        })
+      }
+      displayDetectedRods.value = rods
+
+      // 组装 SVG 圆心指示器（红/蓝/绿）
+      const centers: CenterMarker[] = []
+      if (redCircleCenter.value) centers.push({ x: redCircleCenter.value.x, y: redCircleCenter.value.y, color: '#ff4d4d' })
+      if (blueCircleCenter.value) centers.push({ x: blueCircleCenter.value.x, y: blueCircleCenter.value.y, color: '#2e6bff' })
+      if (greenCircleCenter.value) centers.push({ x: greenCircleCenter.value.x, y: greenCircleCenter.value.y, color: '#00ff6a' })
+      displayCenters.value = centers
+
+      // 组装 SVG 预测细杆（渐隐）
+      const prods: Rod[] = []
+      if (
+        predictionsRaw && predictionsRaw.length > 0 &&
+        redCircleCenter.value && greenCircleCenter.value &&
+        redRadius != null && greenRadius != null
+      ) {
+        const gh = predictionsRaw.length
+        const steps = Math.min(15, gh)
+
+        // 小工具：角度归一化到 [0, 360)
+        const normDeg = (deg: number) => ((deg % 360) + 360) % 360
+        // 小工具：若模型输出的 pos_sin/pos_cos 有数值漂移，先归一化
+        const normVec = (c: number, s: number) => {
+          const len = Math.hypot(c, s)
+          if (len > 1e-6) return [c / len, s / len] as const
+          return [c, s] as const
+        }
+
+        for (let i = 0; i < steps; i++) {
+          const row = predictionsRaw[i]
+          if (!row || row.length < 9) continue
+          // "delta_time", "green_angle_sin", "green_angle_cos", "red_angle_sin", "red_angle_cos", "green_pos_sin", "green_pos_cos", "red_pos_sin", "red_pos_cos"
+          const g_as = Number(row[1])
+          const g_ac = Number(row[2])
+          const r_as = Number(row[3])
+          const r_ac = Number(row[4])
+          const g_ps = Number(row[5])
+          const g_pc = Number(row[6])
+          const r_ps = Number(row[7])
+          const r_pc = Number(row[8])
+
+          // 渐隐：越远未来越淡
+          const a = Math.max(0, 1 - i / steps)
+
+          // 以拟合圆心 + 半径 + 预测的 位置角（sin/cos）反解中心坐标
+          const [g_pc_n, g_ps_n] = normVec(g_pc, g_ps)
+          const gx = greenCircleCenter.value.x + (greenRadius as number) * g_pc_n
+          const gy = greenCircleCenter.value.y + (greenRadius as number) * g_ps_n
+          // 预测杆朝向角：由 (sin, cos) 反解角度（直接用于 SVG，y 轴向下时无需额外翻转）
+          const gang = normDeg((Math.atan2(g_as, g_ac) * 180) / Math.PI)
+          const gL = (metrics.greenRectLength && metrics.greenRectLength > 0) ? metrics.greenRectLength : 40
+          const gW = (metrics.greenRectWidth && metrics.greenRectWidth > 0) ? metrics.greenRectWidth : 4
+          prods.push({ cx: gx, cy: gy, longLen: gL as number, shortLen: gW as number, angleDeg: gang, angleRad: (gang * Math.PI) / 180, color: '#00ff6a', opacity: a })
+
+          const [r_pc_n, r_ps_n] = normVec(r_pc, r_ps)
+          const rx = redCircleCenter.value.x + (redRadius as number) * r_pc_n
+          const ry = redCircleCenter.value.y + (redRadius as number) * r_ps_n
+          const rang = normDeg((Math.atan2(r_as, r_ac) * 180) / Math.PI)
+          const rL = (metrics.redRectLength && metrics.redRectLength > 0) ? metrics.redRectLength : 40
+          const rW = (metrics.redRectWidth && metrics.redRectWidth > 0) ? metrics.redRectWidth : 4
+          prods.push({ cx: rx, cy: ry, longLen: rL as number, shortLen: rW as number, angleDeg: rang, angleRad: (rang * Math.PI) / 180, color: '#ff4d4d', opacity: a })
+        }
+      }
+      displayPredictedRods.value = prods
+    }
+
+    // 本帧绘制完成后再启动 fetch（若需要）
+    if (shouldStartFetch) {
+      isFetching.value = true
+      const payload = framesBuffer.slice() // 不改动缓冲
+      fetch('/api/predict', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ frames: payload })
+      })
+        .then(async (res) => {
+          if (!res.ok) throw new Error('预测接口错误: ' + res.status)
+          const data = await res.json()
+          if (Array.isArray(data?.predictions)) {
+            predictionsRaw = data.predictions as number[][]
+            predictionHorizon = Number(data?.horizon ?? predictionsRaw.length)
+          } else {
+            predictionsRaw = null
+            predictionHorizon = 0
+          }
+        })
+        .catch(() => { /* 忽略错误，不影响主循环 */ })
+        .finally(() => { isFetching.value = false })
     }
   } catch (e: any) {
     // 单帧异常不中断，显示在 HUD
@@ -291,7 +737,11 @@ async function toggle() {
   } else {
     // 不阻塞摄像头启动，让 CV 就绪在后台进行
     ensureCVReady()
-    await startStream()
+    if (sourceType.value === 'camera') {
+      await startStream()
+    } else {
+      await startFilePlayback()
+    }
   }
 }
 
@@ -302,6 +752,40 @@ async function switchFacing() {
   }
 }
 
+function onPickFile(e: Event) {
+  const input = e.target as HTMLInputElement
+  const f = input.files && input.files[0]
+  if (!f) return
+  // 回收旧 URL
+  if (fileUrl.value) {
+    URL.revokeObjectURL(fileUrl.value)
+    fileUrl.value = null
+  }
+  fileUrl.value = URL.createObjectURL(f)
+  fileName.value = f.name
+  // 若当前处于文件模式且已点击启动，则自动重启播放
+  if (sourceType.value === 'file' && running.value) {
+    startFilePlayback()
+  }
+}
+
+// 当切换输入源时，根据状态进行处理
+watch(
+  () => sourceType.value,
+  async () => {
+    // 切换源：如果正在运行就切换到对应启动；否则仅停止，等待用户点击“启动”
+    if (running.value) {
+      if (sourceType.value === 'camera') {
+        await startStream()
+      } else {
+        await startFilePlayback()
+      }
+    } else {
+      await stopStream()
+    }
+  }
+)
+
 onMounted(async () => {
   // 后台等待 CV 就绪
   ensureCVReady()
@@ -311,71 +795,273 @@ onMounted(async () => {
 
 onBeforeUnmount(async () => {
   await stopStream()
+  // 统一释放文件 URL
+  if (fileUrl.value) {
+    URL.revokeObjectURL(fileUrl.value)
+    fileUrl.value = null
+  }
   ctx = null
 })
 </script>
 
+<template>
+  <div class="wrap">
+    <div class="stage">
+      <!-- 隐藏视频元素仅用于抓帧 -->
+      <video ref="videoEl" playsinline muted autoplay
+        class="hidden-video"></video>
+
+      <!-- 可见的绘制画布（可通过 HUD 开关隐藏） -->
+      <canvas ref="canvasEl" class="canvas" v-show="showCanvas"></canvas>
+
+      <!-- SVG 叠加层：用于渲染细杆（检测与预测） -->
+      <svg class="overlay" :width="viewW" :height="viewH"
+        :viewBox="`0 0 ${viewW} ${viewH}`">
+        <!-- 圆心指示器（SVG 实现） -->
+        <g>
+          <g v-for="(c, i) in displayCenters" :key="'c-' + i">
+            <circle :cx="c.x" :cy="c.y" r="4" :fill="c.color" />
+            <line :x1="c.x - 8" :y1="c.y" :x2="c.x + 8" :y2="c.y"
+              :stroke="c.color" stroke-width="2" />
+            <line :x1="c.x" :y1="c.y - 8" :x2="c.x" :y2="c.y + 8"
+              :stroke="c.color" stroke-width="2" />
+          </g>
+        </g>
+        <!-- 检测到的细杆（实色、全不透明） -->
+        <g>
+          <g v-for="(rod, i) in displayDetectedRods" :key="'d-' + i"
+            :opacity="rod.opacity ?? 1">
+            <rect :x="rod.cx - rod.longLen / 2" :y="rod.cy - rod.shortLen / 2"
+              :width="rod.longLen" :height="rod.shortLen"
+              :transform="`rotate(${rod.angleDeg} ${rod.cx} ${rod.cy})`"
+              fill="none" :stroke="rod.color" stroke-width="2" />
+            <circle :cx="rod.cx" :cy="rod.cy" r="3" :fill="rod.color" />
+            <line :x1="rod.cx" :y1="rod.cy"
+              :x2="rod.cx + Math.cos(rod.angleRad) * (rod.longLen * 0.4)"
+              :y2="rod.cy + Math.sin(rod.angleRad) * (rod.longLen * 0.4)"
+              :stroke="rod.color" stroke-width="2" />
+          </g>
+        </g>
+        <!-- 预测细杆（渐隐） -->
+        <g>
+          <g v-for="(rod, i) in displayPredictedRods" :key="'p-' + i"
+            :opacity="rod.opacity ?? 1">
+            <rect :x="rod.cx - rod.longLen / 2" :y="rod.cy - rod.shortLen / 2"
+              :width="rod.longLen" :height="rod.shortLen"
+              :transform="`rotate(${rod.angleDeg} ${rod.cx} ${rod.cy})`"
+              fill="none" :stroke="rod.color" stroke-width="2" />
+            <circle :cx="rod.cx" :cy="rod.cy" r="3" :fill="rod.color" />
+            <line :x1="rod.cx" :y1="rod.cy"
+              :x2="rod.cx + Math.cos(rod.angleRad) * (rod.longLen * 0.4)"
+              :y2="rod.cy + Math.sin(rod.angleRad) * (rod.longLen * 0.4)"
+              :stroke="rod.color" stroke-width="2" />
+            <!-- 预测帧序号（从 1 开始），标注在杆的前端稍远处 -->
+            <text
+              :x="rod.cx + Math.cos(rod.angleRad) * (rod.longLen * 0.5 + 8)"
+              :y="rod.cy + Math.sin(rod.angleRad) * (rod.longLen * 0.5 + 8)"
+              :fill="rod.color"
+              stroke="black"
+              stroke-width="0.8"
+              font-size="10"
+              dominant-baseline="middle"
+              text-anchor="middle"
+            >{{ i + 1 }}</text>
+          </g>
+        </g>
+      </svg>
+
+      <!-- HUD 面板 -->
+      <div class="hud">
+        <div class="row">
+          <label class="label">来源：</label>
+          <select class="select" v-model="sourceType">
+            <option value="camera">摄像头</option>
+            <option value="file">本地视频</option>
+          </select>
+        </div>
+        <div class="row" v-if="sourceType === 'file'">
+          <input ref="fileInputEl" class="file-input" type="file"
+            accept="video/*" @change="onPickFile" />
+        </div>
+        <div class="row small" v-if="sourceType === 'file'">
+          <label class="checkbox">
+            <input type="checkbox" v-model="fileLoop" /> 循环播放
+          </label>
+        </div>
+        <div class="row">
+          <button class="btn" @click="toggle()">
+            {{ running ? '停止' : '启动' }}
+          </button>
+          <button class="btn" v-if="sourceType === 'camera'"
+            @click="switchFacing()">
+            切换摄像头（{{ facingModeLabel }}）
+          </button>
+          <button class="btn" :disabled="!running" @click="toggleRecord()">
+            {{ isRecording ? '停止并下载' : '开始记录' }}
+          </button>
+        </div>
+        <div class="row small">
+          <span>FPS: {{ fps.toFixed(1) }}</span>
+          <span v-if="isRecording">记录中…</span>
+          <span v-if="err" class="err">错误：{{ err }}</span>
+        </div>
+        <div class="row small">
+          <label class="checkbox">
+            <input type="checkbox" v-model="showCanvas" /> 显示底层画面
+          </label>
+        </div>
+        <div class="metrics">
+          <div class="group">
+            <h4>Red</h4>
+            <div>x: {{ fmt(metrics.redRectCenterX) }}, y: {{
+              fmt(metrics.redRectCenterY) }}</div>
+            <div>θ: {{ fmt(metrics.redRectRotation) }}°</div>
+            <div>L×W: {{ fmt(metrics.redRectLength) }} × {{
+              fmt(metrics.redRectWidth) }}</div>
+            <div>{{ redPolar?.cos.toFixed(2) }} {{ redPolar?.sin.toFixed(2) }}
+            </div>
+          </div>
+          <div class="group">
+            <h4>Green</h4>
+            <div>x: {{ fmt(metrics.greenRectCenterX) }}, y: {{
+              fmt(metrics.greenRectCenterY) }}</div>
+            <div>θ: {{ fmt(metrics.greenRectRotation) }}°</div>
+            <div>L×W: {{ fmt(metrics.greenRectLength) }} × {{
+              fmt(metrics.greenRectWidth) }}</div>
+          </div>
+          <div class="group">
+            <h4>Blue</h4>
+            <div>x: {{ fmt(metrics.blueRectCenterX) }}, y: {{
+              fmt(metrics.blueRectCenterY) }}</div>
+            <div>θ: {{ fmt(metrics.blueRectRotation) }}°</div>
+            <div>L×W: {{ fmt(metrics.blueRectLength) }} × {{
+              fmt(metrics.blueRectWidth) }}</div>
+            <div>{{ bluePolar?.cos.toFixed(2) }} {{ bluePolar?.sin.toFixed(2) }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
 <style scoped>
 .wrap {
   display: grid;
   gap: 12px;
 }
+
 .stage {
   position: relative;
   border-radius: 12px;
-  overflow: hidden;
-  background: #0b0f19;
-  border: 1px solid rgba(255,255,255,0.08);
 }
+
 .hidden-video {
-  display: none; /* 仅用于抓帧即可 */
+  display: none;
+  /* 仅用于抓帧即可 */
 }
+
 .canvas {
   display: block;
   width: 100%;
   height: auto;
   image-rendering: crisp-edges;
 }
+
+/* SVG 覆盖层：绝对定位于画布之上 */
+.overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 2;
+
+  /* 低于 HUD，高于画布 */
+}
+
 .hud {
   position: absolute;
   top: 12px;
   right: 12px;
   display: grid;
   gap: 8px;
-  background: rgba(0,0,0,0.55);
-  backdrop-filter: blur(6px);
+  background: rgba(0, 0, 0, 0.25);
   color: #e9eef7;
   padding: 10px 12px;
   border-radius: 10px;
-  border: 1px solid rgba(255,255,255,0.15);
-  min-width: 220px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  z-index: 3;
+  /* 确保在 SVG 之上 */
 }
+
 .hud .row {
   display: flex;
   align-items: center;
   gap: 8px;
   justify-content: space-between;
 }
+
 .hud .row.small {
   font-size: 12px;
   opacity: 0.9;
   justify-content: flex-start;
   gap: 16px;
 }
+
+.label {
+  font-size: 12px;
+  opacity: 0.9;
+}
+
+.select {
+  flex: 1;
+  padding: 4px 6px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.06);
+  color: #e9eef7;
+}
+
+.file-input {
+  flex: 1;
+}
+
+.file-name {
+  flex: 1;
+  font-size: 12px;
+  color: #c9d4e5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
 .metrics {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px 12px;
-  font-size: 12px;
+  font-size: 10px;
   line-height: 1.35;
 }
+
 .metrics .group h4 {
   margin: 0 0 4px 0;
   font-size: 12px;
   font-weight: 700;
   opacity: 0.9;
 }
-.err { color: #ffb4b4; }
+
+.err {
+  color: #ffb4b4;
+}
+
 .btn {
   appearance: none;
   background: #1a5cff;
@@ -387,9 +1073,12 @@ onBeforeUnmount(async () => {
   font-size: 12px;
   font-weight: 600;
 }
-.btn:hover { filter: brightness(1.05); }
+
+.btn:hover {
+  filter: brightness(1.05);
+}
+
 .hint {
-  color: #5f6b7b;
   font-size: 12px;
   margin: 0;
 }
diff --git a/src/lib/processImage.ts b/src/lib/processImage.ts
index 6189bde..b02b9c3 100644
--- a/src/lib/processImage.ts
+++ b/src/lib/processImage.ts
@@ -2,14 +2,19 @@
 import cv from "@techstark/opencv-js";
 
 export type ProcessImageResult = {
+  redRectCenterX: number | null;
+  redRectCenterY: number | null;
   greenRectCenterX: number | null;
   greenRectCenterY: number | null;
   blueRectCenterX: number | null;
   blueRectCenterY: number | null;
+  redRectRotation: number | null;   // degrees in [0,180)
   greenRectRotation: number | null; // degrees in [0,180)
   blueRectRotation: number | null;  // degrees in [0,180)
+  redRectLength: number | null;     // long side
   greenRectLength: number | null;   // long side
   blueRectLength: number | null;    // long side (ray length)
+  redRectWidth: number | null;      // short side
   greenRectWidth: number | null;    // short side
   blueRectWidth: number | null;     // short side = red short side
 };
@@ -26,95 +31,78 @@ type RectProps = {
   dirLong: Vec2;        // unit vector along long edge
 };
 
+/* ----------------------- fast kernels/scalars (cached) ----------------------- */
+const getKernel3 = (() => {
+  let K: cv.Mat | null = null;
+  return () => (K ??= cv.getStructuringElement(cv.MORPH_RECT, new cv.Size(3, 3)));
+})();
+
+const S = (h: number, s: number, v: number) => new cv.Scalar(h, s, v, 0);
+// red has two ranges
+const RED_LOW1 = S(0, 70, 70);
+const RED_UP1 = S(5, 255, 255);
+const RED_LOW2 = S(175, 70, 70);
+const RED_UP2 = S(179, 255, 255);
+const GRN_LOW = S(35, 50, 50);
+const GRN_UP = S(85, 255, 255);
+
+// 小工具：接受 Scalar 下界/上界调用 inRange（类型层面不支持 Scalar 的兜底）
+function inRangeScalar(src: cv.Mat, low: cv.Scalar, up: cv.Scalar, dst: cv.Mat): void {
+  // 部分 @techstark/opencv-js 类型未声明 Scalar 重载，但运行时 OpenCV.js 支持
+
+  // 运行不支持 Scalar，退回到分配 full-size bound mats（注意释放）
+  const lowMat = new cv.Mat(src.rows, src.cols, src.type(), low);
+  const upMat = new cv.Mat(src.rows, src.cols, src.type(), up);
+  try {
+    cv.inRange(src, lowMat, upMat, dst);
+  } finally {
+    lowMat.delete();
+    upMat.delete();
+  }
+}
+
+/* ----------------------- main ----------------------- */
 export function processImage(imgData: ImageData): ProcessImageResult {
   const src = cv.matFromImageData(imgData); // CV_8UC4 RGBA
   const toFree: cv.Mat[] = [src];
 
+  // 颜色空间转换：由于类型定义里缺少 COLOR_RGBA2HSV，改为 RGBA -> RGB -> HSV 两步
   const rgb = new cv.Mat(); toFree.push(rgb);
-  cv.cvtColor(src, rgb, cv.COLOR_RGBA2RGB);
   const hsv = new cv.Mat(); toFree.push(hsv);
+  cv.cvtColor(src, rgb, cv.COLOR_RGBA2RGB);
   cv.cvtColor(rgb, hsv, cv.COLOR_RGB2HSV);
-  const gray = new cv.Mat(); toFree.push(gray);
-  cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);
 
   // ---- color masks (HSV) ----
-  const kernel3 = cv.getStructuringElement(cv.MORPH_RECT, new cv.Size(3, 3));
-  // red = two ranges
-  const redMask = (() => {
-    const low1 = new cv.Mat(hsv.rows, hsv.cols, hsv.type(), [0, 80, 80, 0]);
-    const up1  = new cv.Mat(hsv.rows, hsv.cols, hsv.type(), [5, 255, 255, 0]);
-    const low2 = new cv.Mat(hsv.rows, hsv.cols, hsv.type(), [175, 80, 80, 0]);
-    const up2  = new cv.Mat(hsv.rows, hsv.cols, hsv.type(), [179, 255, 255, 0]);
-    const m1 = new cv.Mat(); const m2 = new cv.Mat();
-    cv.inRange(hsv, low1, up1, m1);
-    cv.inRange(hsv, low2, up2, m2);
-    const rm = new cv.Mat();
-    cv.bitwise_or(m1, m2, rm);
-    // morphology open -> close
-    cv.morphologyEx(rm, rm, cv.MORPH_OPEN, kernel3);
-    cv.morphologyEx(rm, rm, cv.MORPH_CLOSE, kernel3);
-    low1.delete(); up1.delete(); low2.delete(); up2.delete(); m1.delete(); m2.delete();
-    toFree.push(rm);
-    return rm;
-  })();
+  const kernel3 = getKernel3();
 
-  const grnMask = (() => {
-    const low = new cv.Mat(hsv.rows, hsv.cols, hsv.type(), [35, 80, 80, 0]);
-    const up  = new cv.Mat(hsv.rows, hsv.cols, hsv.type(), [85, 255, 255, 0]);
-    const gm = new cv.Mat();
-    cv.inRange(hsv, low, up, gm);
-    cv.morphologyEx(gm, gm, cv.MORPH_OPEN, kernel3);
-    cv.morphologyEx(gm, gm, cv.MORPH_CLOSE, kernel3);
-    low.delete(); up.delete();
-    toFree.push(gm);
-    return gm;
-  })();
+  // 用 Scalar 直接 inRange，避免每帧构造整幅 low/high Mat
+  const redMask = new cv.Mat(); toFree.push(redMask);
+  const tmp1 = new cv.Mat(); const tmp2 = new cv.Mat(); toFree.push(tmp1, tmp2);
+  inRangeScalar(hsv, RED_LOW1, RED_UP1, tmp1);
+  inRangeScalar(hsv, RED_LOW2, RED_UP2, tmp2);
+  cv.bitwise_or(tmp1, tmp2, redMask);
+  cv.morphologyEx(redMask, redMask, cv.MORPH_OPEN, kernel3);
+  cv.morphologyEx(redMask, redMask, cv.MORPH_CLOSE, kernel3);
 
-  // ---- detect largest rect (by area) within mask ----
-  const detectLargestBox = (graySrc: cv.Mat, mask: cv.Mat): RectProps | null => {
-    const masked = new cv.Mat(); toFree.push(masked);
-    cv.bitwise_and(graySrc, graySrc, masked, mask);
+  const grnMask = new cv.Mat(); toFree.push(grnMask);
+  inRangeScalar(hsv, GRN_LOW, GRN_UP, grnMask);
+  cv.morphologyEx(grnMask, grnMask, cv.MORPH_OPEN, kernel3);
+  cv.morphologyEx(grnMask, grnMask, cv.MORPH_CLOSE, kernel3);
 
-    const blur = new cv.Mat(); toFree.push(blur);
-    cv.GaussianBlur(masked, blur, new cv.Size(0, 0), 3.0, 3.0, cv.BORDER_DEFAULT);
+  // ---- FAST PATH: 直接用掩码轮廓 -> minAreaRect （无需灰度+边缘）----
+  let redProps = rectFromMaskFast(redMask);
+  let grnProps = rectFromMaskFast(grnMask);
 
-    const high = new cv.Mat(); toFree.push(high);
-    // unsharp: (1+alpha)*I + (-alpha)*blur
-    cv.addWeighted(masked, 3.0 /*1+2*/, blur, -2.0, 0, high);
+  // 只有必要时才懒构灰度图 + ROI Fallback
+  let gray: cv.Mat | null = null;
+  if (!redProps || !grnProps) {
+    gray = new cv.Mat(); toFree.push(gray);
+    cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);
+    if (!redProps) redProps = rectFromMaskWithROI(gray, redMask, kernel3);
+    if (!grnProps) grnProps = rectFromMaskWithROI(gray, grnMask, kernel3);
+  }
 
-    const edges = new cv.Mat(); toFree.push(edges);
-    cv.Canny(high, edges, 40, 120, 3, true);
-
-    const edgesD = new cv.Mat(); toFree.push(edgesD);
-    cv.dilate(edges, edgesD, kernel3);
-
-    const contours = new cv.MatVector(); const hierarchy = new cv.Mat();
-    cv.findContours(edgesD, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);
-
-    let bestArea = 0;
-    let bestRect: any = null; // rotated rect (object)
-    for (let i = 0; i < contours.size(); i++) {
-      const cnt = contours.get(i);
-      const area = cv.contourArea(cnt);
-      if (area > 300 && area > bestArea) {
-        bestArea = area;
-        bestRect = cv.minAreaRect(cnt); // {center:{x,y}, size:{width,height}, angle:number}
-      }
-      cnt.delete();
-    }
-    contours.delete(); hierarchy.delete();
-
-    if (!bestRect) return null;
-
-    const box = rotatedRectToPoints(bestRect);          // Float32Array[2] * 4
-    const props = rectPropsFromBox(box);
-    return props;
-  };
-
-  const redProps = detectLargestBox(gray, redMask);
-  const grnProps = detectLargestBox(gray, grnMask);
-
-  // ---- build blue rectangle from rules ----
+  // ---- build blue rectangle from rules (保持原逻辑) ----
   let blueCenter: Vec2 | null = null;
   let blueDir: Vec2 | null = null;
   let blueLen: number | null = null;
@@ -124,7 +112,6 @@ export function processImage(imgData: ImageData): ProcessImageResult {
     const rBox = orderBoxClockwise(redProps.box);
     const gCenter = grnProps.center;
 
-    // midpoints of 4 edges (typed as Box4 to avoid undefined indexes)
     const [r0, r1, r2, r3] = rBox;
     const mids: Box4 = [
       midpoint(r0, r1),
@@ -133,7 +120,6 @@ export function processImage(imgData: ImageData): ProcessImageResult {
       midpoint(r3, r0)
     ];
 
-    // farthest midpoint from green center
     let farIdx = 0, maxD2 = -1;
     mids.forEach((m, i) => {
       const dx = m[0] - gCenter[0];
@@ -145,9 +131,9 @@ export function processImage(imgData: ImageData): ProcessImageResult {
     const startPt: Vec2 = farIdx === 0 ? m0 : farIdx === 1 ? m1 : farIdx === 2 ? m2 : m3;
 
     // long direction of red; point toward projection to green center
-  const baseDir = redProps.dirLong;
-  let dir: Vec2 = [baseDir[0], baseDir[1]];
-  const toG: Vec2 = v2(gCenter[0] - startPt[0], gCenter[1] - startPt[1]);
+    const baseDir = redProps.dirLong;
+    let dir: Vec2 = [baseDir[0], baseDir[1]];
+    const toG: Vec2 = v2(gCenter[0] - startPt[0], gCenter[1] - startPt[1]);
     if (dot(toG, dir) < 0) dir = scale(dir, -1);
 
     const proj = dot(toG, dir); // scalar projection
@@ -157,36 +143,131 @@ export function processImage(imgData: ImageData): ProcessImageResult {
       const bb = blueBoxFromRay(startPt, dir, blueLen, blueW);
       blueCenter = bb.center;
       blueDir = dir;
-      // const blueBox = bb.box; // (available if you later want corners)
     }
   }
 
-  // ---- assemble metrics ----
   const res: ProcessImageResult = {
+    redRectCenterX: redProps ? redProps.center[0] : null,
+    redRectCenterY: redProps ? redProps.center[1] : null,
     greenRectCenterX: grnProps ? grnProps.center[0] : null,
     greenRectCenterY: grnProps ? grnProps.center[1] : null,
-    blueRectCenterX:  blueCenter ? blueCenter[0] : null,
-    blueRectCenterY:  blueCenter ? blueCenter[1] : null,
+    blueRectCenterX: blueCenter ? blueCenter[0] : null,
+    blueRectCenterY: blueCenter ? blueCenter[1] : null,
+    redRectRotation: redProps ? angleDegFromDir(redProps.dirLong) : null,
     greenRectRotation: grnProps ? angleDegFromDir(grnProps.dirLong) : null,
-    blueRectRotation:  blueDir   ? angleDegFromDir(blueDir)         : null,
-    greenRectLength:   grnProps ? grnProps.longLen  : null,
-    blueRectLength:    blueLen,
-    greenRectWidth:    grnProps ? grnProps.shortLen : null,
-    blueRectWidth:     blueW
+    blueRectRotation: blueDir ? angleDegFromDir(blueDir) : null,
+    redRectLength: redProps ? redProps.longLen : null,
+    greenRectLength: grnProps ? grnProps.longLen : null,
+    blueRectLength: blueLen,
+    redRectWidth: redProps ? redProps.shortLen : null,
+    greenRectWidth: grnProps ? grnProps.shortLen : null,
+    blueRectWidth: blueW
   };
 
   // ---- cleanup ----
   try {
     // nothing else
   } finally {
-    kernel3.delete();
     toFree.forEach(m => { try { m.delete(); } catch { /* noop */ } });
+    // kernel3 是缓存的，不要 delete
   }
 
   return res;
 }
 
-/* ----------------------- helpers ----------------------- */
+/* ----------------------- FAST helpers ----------------------- */
+
+// 1) 超快路径：直接在二值掩码上找最大轮廓 -> minAreaRect
+function rectFromMaskFast(mask: cv.Mat): RectProps | null {
+  // 空掩码直接早停
+  if (cv.countNonZero(mask) === 0) return null;
+
+  const contours = new cv.MatVector(); const hierarchy = new cv.Mat();
+  cv.findContours(mask, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);
+
+  let bestIdx = -1, bestArea = 0;
+  for (let i = 0; i < contours.size(); i++) {
+    const cnt = contours.get(i);
+    const a = cv.contourArea(cnt);
+    if (a > 300 && a > bestArea) { bestArea = a; bestIdx = i; }
+  }
+
+  let props: RectProps | null = null;
+  if (bestIdx >= 0) {
+    const cnt = contours.get(bestIdx);
+    const rr = cv.minAreaRect(cnt); // {center:{x,y}, size:{width,height}, angle:number}
+    const box = rotatedRectToPoints(rr);
+    props = rectPropsFromBox(box as Box4);
+  }
+
+  contours.delete(); hierarchy.delete();
+  return props;
+}
+
+// 2) ROI 回退：仅在掩码最大连通区域的外接矩形（略扩展）内做一次精细找边
+function rectFromMaskWithROI(gray: cv.Mat, mask: cv.Mat, kernel3: cv.Mat): RectProps | null {
+  if (cv.countNonZero(mask) === 0) return null;
+
+  // 先取最大轮廓的 axis-aligned bbox 作为 ROI
+  const contours = new cv.MatVector(); const hierarchy = new cv.Mat();
+  cv.findContours(mask, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);
+
+  let bestIdx = -1, bestArea = 0;
+  let bestRect: cv.Rect | null = null;
+  for (let i = 0; i < contours.size(); i++) {
+    const cnt = contours.get(i);
+    const a = cv.contourArea(cnt);
+    if (a > 300 && a > bestArea) {
+      bestArea = a; bestIdx = i;
+      bestRect = cv.boundingRect(cnt);
+    }
+  }
+  if (bestIdx < 0 || !bestRect) { contours.delete(); hierarchy.delete(); return null; }
+
+  // 扩边一些 margin，限制 ROI，避免整幅操作
+  const margin = 8;
+  const rx = Math.max(0, bestRect.x - margin);
+  const ry = Math.max(0, bestRect.y - margin);
+  const rw = Math.min(gray.cols - rx, bestRect.width + margin * 2);
+  const rh = Math.min(gray.rows - ry, bestRect.height + margin * 2);
+  const roi = new cv.Rect(rx, ry, rw, rh);
+
+  const gRoi = gray.roi(roi);
+  const edges = new cv.Mat(); const blur = new cv.Mat(); const edgesD = new cv.Mat();
+  try {
+    // 更轻量：只做一次高斯 + Canny + dilation
+    cv.GaussianBlur(gRoi, blur, new cv.Size(3, 3), 0, 0, cv.BORDER_DEFAULT);
+    cv.Canny(blur, edges, 40, 120, 3, true);
+    cv.dilate(edges, edgesD, kernel3);
+
+    const cs = new cv.MatVector(); const h = new cv.Mat();
+    cv.findContours(edgesD, cs, h, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);
+
+    let bestA = 0, rrAny: any = null;
+    for (let i = 0; i < cs.size(); i++) {
+      const c = cs.get(i);
+      const a = cv.contourArea(c);
+      if (a > 300 && a > bestA) { bestA = a; rrAny = cv.minAreaRect(c); }
+    }
+    cs.delete(); h.delete();
+
+    if (!rrAny) return null;
+
+    // 注意 ROI 偏移，坐标回到全局
+    const rrGlobal = {
+      center: { x: rrAny.center.x + rx, y: rrAny.center.y + ry },
+      size: rrAny.size,
+      angle: rrAny.angle
+    };
+    const box = rotatedRectToPoints(rrGlobal);
+    return rectPropsFromBox(box as Box4);
+  } finally {
+    gRoi.delete(); edges.delete(); blur.delete(); edgesD.delete();
+    contours.delete(); hierarchy.delete();
+  }
+}
+
+/* ----------------------- geometry/helpers (原有+少量小函数) ----------------------- */
 
 function v2(x: number, y: number): Vec2 { return [x, y]; }
 function f32(arr: readonly number[]): Vec2 { return [arr[0] ?? 0, arr[1] ?? 0]; }
@@ -195,11 +276,10 @@ function dot(a: Vec2, b: Vec2): number { return a[0] * b[0] + a[1] * b[1]; }
 function norm(a: Vec2): number { return Math.hypot(a[0], a[1]); }
 function normalize(a: Vec2): Vec2 {
   const n = norm(a) + 1e-9;
-  return f32([a[0]/n, a[1]/n]);
+  return f32([a[0] / n, a[1] / n]);
 }
-function scale(a: Vec2, k: number): Vec2 { return f32([a[0]*k, a[1]*k]); }
-function add(a: Vec2, b: Vec2): Vec2 { return f32([a[0]+b[0], a[1]+b[1]]); }
-function sub(a: Vec2, b: Vec2): Vec2 { return f32([a[0]-b[0], a[1]-b[1]]); }
+function scale(a: Vec2, k: number): Vec2 { return f32([a[0] * k, a[1] * k]); }
+function add(a: Vec2, b: Vec2): Vec2 { return f32([a[0] + b[0], a[1] + b[1]]); }
 
 function midpoint(a: Vec2, b: Vec2): Vec2 {
   return f32([(a[0] + b[0]) * 0.5, (a[1] + b[1]) * 0.5]);
@@ -216,7 +296,6 @@ function orderBoxClockwise(box: Box4): Box4 {
   const withAng = box.map(p => ({ p, a: Math.atan2(p[1] - c[1], p[0] - c[0]) }));
   withAng.sort((u, v) => u.a - v.a); // -pi..pi
   const sorted = withAng.map(o => o.p) as Vec2[];
-  // ensure Box4 length 4 (non-null assertion since input is Box4)
   return [sorted[0]!, sorted[1]!, sorted[2]!, sorted[3]!];
 }
 
@@ -251,7 +330,7 @@ function rectPropsFromBox(boxIn: Box4): RectProps {
     case 2: a = p2; b = p3; break;
     case 3: a = p3; b = p0; break;
   }
-  const dirLong = normalize(sub(b, a));
+  const dirLong = normalize([(b[0] - a[0]), (b[1] - a[1])]);
   return { box, center, longLen, shortLen, dirLong };
 }
 
@@ -263,30 +342,30 @@ function rotatedRectToPoints(rr: { center: { x: number, y: number }, size: { wid
   const hw = w * 0.5, hh = h * 0.5;
 
   const local: [number, number][] = [
-    [-hw, -hh], [ hw, -hh],
-    [ hw,  hh], [-hw,  hh]
+    [-hw, -hh], [hw, -hh],
+    [hw, hh], [-hw, hh]
   ];
 
   const pts: Vec2[] = [];
   for (const [lx, ly] of local) {
     const x = cx + lx * cosA - ly * sinA;
     const y = cy + lx * sinA + ly * cosA;
-    pts.push(f32([x, y]));
+    pts.push([x, y]);
   }
   return [pts[0]!, pts[1]!, pts[2]!, pts[3]!];
 }
 
 function blueBoxFromRay(startPt: Vec2, dirUnitIn: Vec2, length: number, width: number): { box: Box4, center: Vec2 } {
   const dir = normalize(dirUnitIn);
-  const perp = f32([-dir[1], dir[0]]);
+  const perp: Vec2 = [-dir[1], dir[0]];
   const c = add(startPt, scale(dir, length * 0.5));
   const halfL = scale(dir, length * 0.5);
   const halfW = scale(perp, width * 0.5);
 
-  const p0 = sub(sub(c, halfL), halfW);
-  const p1 = add(sub(c, halfW), halfL);
-  const p2 = add(add(c, halfL), halfW);
-  const p3 = add(sub(c, halfW), scale(halfL, -1));
+  const p0 = [c[0] - halfL[0] - halfW[0], c[1] - halfL[1] - halfW[1]] as Vec2;
+  const p1 = [c[0] + halfL[0] - halfW[0], c[1] + halfL[1] - halfW[1]] as Vec2;
+  const p2 = [c[0] + halfL[0] + halfW[0], c[1] + halfL[1] + halfW[1]] as Vec2;
+  const p3 = [c[0] - halfL[0] + halfW[0], c[1] - halfL[1] + halfW[1]] as Vec2;
 
   return { box: [p0, p1, p2, p3], center: c };
-}
\ No newline at end of file
+}
diff --git a/src/style.css b/src/style.css
index e69de29..900fd58 100644
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,3 @@
+body {
+  background: #0b0f19;
+}
\ No newline at end of file
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 3dbbc45..bd7e2c0 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -5,8 +5,6 @@
 
     /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
diff --git a/tsconfig.node.json b/tsconfig.node.json
index f85a399..65bd879 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -15,8 +15,6 @@
 
     /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
diff --git a/vite.config.ts b/vite.config.ts
index bbcf80c..8ed3feb 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,18 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import mkcert from 'vite-plugin-mkcert'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), mkcert()],
+  server: {
+    host: '0.0.0.0',
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  }
 })