pose-ai-core 0.1.0

package/README.md

@@ -0,0 +1,348 @@
+# @pose-ai/core
+
+Pose AI 核心引擎包 - 基于 MediaPipe Pose 的姿态检测和 ROM 评估系统。
+
+## 📦 安装
+
+```bash
+pnpm add @pose-ai/core
+```
+
+## 🚀 快速开始
+
+### 使用 ROMVisualizer 组件（推荐）
+
+最简单的方式是使用 `ROMVisualizer` 组件，它包含了所有功能：
+
+```tsx
+import { ROMVisualizer } from '@pose-ai/core'
+
+function App() {
+  return (
+    <ROMVisualizer
+      width={640}
+      height={480}
+      showAnglePanel={true}
+      showROM={true}
+    />
+  )
+}
+```
+
+### 使用 Hook 自定义 UI
+
+如果需要自定义 UI，可以使用 `usePoseEngine` Hook：
+
+```tsx
+import { usePoseEngine } from '@pose-ai/core'
+import { useRef } from 'react'
+
+function CustomPoseDetector() {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const { start, stop, isRunning, angles, romData, error } = usePoseEngine({
+    config: {
+      modelComplexity: 1,
+      minDetectionConfidence: 0.5,
+    },
+    onAngleUpdate: (angles) => {
+      console.log('角度更新:', angles)
+    },
+  })
+
+  const handleStart = async () => {
+    if (videoRef.current) {
+      await start(videoRef.current)
+    }
+  }
+
+  return (
+    <div>
+      <video ref={videoRef} autoPlay playsInline muted />
+      <button onClick={handleStart}>开始</button>
+      <button onClick={stop}>停止</button>
+      
+      {angles.map((angle) => (
+        <div key={angle.name}>
+          {angle.name}: {angle.angle.toFixed(1)}°
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
+### 使用底层引擎 API
+
+对于更高级的用例，可以直接使用 `PoseEngine`：
+
+```tsx
+import { PoseEngine } from '@pose-ai/core'
+
+const engine = new PoseEngine(
+  {
+    modelComplexity: 1,
+    minDetectionConfidence: 0.5,
+  },
+  {
+    onAngleUpdate: (angles) => {
+      console.log('角度:', angles)
+    },
+    onROMUpdate: (romData) => {
+      console.log('ROM 数据:', romData)
+    },
+  }
+)
+
+await engine.initialize()
+await engine.start(videoElement)
+
+// 停止检测
+engine.stop()
+
+// 清理资源
+engine.dispose()
+```
+
+## 📖 API 文档
+
+### ROMVisualizer 组件
+
+主可视化组件，包含视频预览、骨骼覆盖层和角度面板。
+
+**Props:**
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `engineOptions` | `UsePoseEngineOptions` | `{}` | 引擎配置选项 |
+| `width` | `number` | `640` | 视频宽度 |
+| `height` | `number` | `480` | 视频高度 |
+| `showAnglePanel` | `boolean` | `true` | 是否显示角度面板 |
+| `showROM` | `boolean` | `true` | 是否显示 ROM 数据 |
+| `drawingOptions` | `DrawingOptions` | `{}` | 绘制选项 |
+| `className` | `string` | `''` | 自定义类名 |
+| `onStart` | `() => void` | - | 开始检测回调 |
+| `onStop` | `() => void` | - | 停止检测回调 |
+
+### AnglePanel 组件
+
+角度数据展示面板。
+
+**Props:**
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `angles` | `JointAngle[]` | `[]` | 角度数据数组 |
+| `romData` | `ROMData[]` | `[]` | ROM 数据数组 |
+| `showROM` | `boolean` | `false` | 是否显示 ROM 信息 |
+| `className` | `string` | `''` | 自定义类名 |
+
+### SkeletonOverlay 组件
+
+骨骼覆盖层，在视频上绘制姿态。
+
+**Props:**
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `results` | `Results \| null` | `null` | MediaPipe 检测结果 |
+| `angles` | `JointAngle[]` | `[]` | 角度数据 |
+| `width` | `number` | `640` | Canvas 宽度 |
+| `height` | `number` | `480` | Canvas 高度 |
+| `drawingOptions` | `DrawingOptions` | `{}` | 绘制选项 |
+| `className` | `string` | `''` | 自定义类名 |
+
+### usePoseEngine Hook
+
+React Hook，用于管理姿态检测引擎。
+
+**参数:**
+
+```typescript
+interface UsePoseEngineOptions {
+  config?: PoseEngineConfig
+  autoStart?: boolean
+  modelPath?: string
+  onResults?: (results: Results) => void
+  onAngleUpdate?: (angles: JointAngle[]) => void
+  onROMUpdate?: (romData: ROMData[]) => void
+  onError?: (error: Error) => void
+}
+```
+
+**返回值:**
+
+```typescript
+interface UsePoseEngineReturn {
+  start: (videoElement: HTMLVideoElement) => Promise<void>
+  stop: () => void
+  processImage: (image: HTMLImageElement | HTMLCanvasElement) => Promise<void>
+  resetROM: (jointName?: string) => void
+  isRunning: boolean
+  angles: JointAngle[]
+  romData: ROMData[]
+  error: Error | null
+  engine: PoseEngine | null
+}
+```
+
+### PoseEngine 类
+
+底层姿态检测引擎。
+
+**方法:**
+
+- `initialize(modelPath?: string): Promise<void>` - 初始化引擎
+- `start(videoElement: HTMLVideoElement): Promise<void>` - 启动摄像头检测
+- `stop(): void` - 停止检测
+- `processImage(image: HTMLImageElement | HTMLCanvasElement): Promise<void>` - 处理单张图片
+- `setJointDefinitions(definitions: JointDefinition[]): void` - 设置关节定义
+- `resetROM(jointName?: string): void` - 重置 ROM 数据
+- `updateConfig(config: Partial<PoseEngineConfig>): void` - 更新配置
+- `dispose(): void` - 清理资源
+
+### 配置选项
+
+```typescript
+interface PoseEngineConfig {
+  modelComplexity?: 0 | 1 | 2          // 模型复杂度
+  smoothLandmarks?: boolean             // 平滑关键点
+  enableSegmentation?: boolean          // 启用分割
+  smoothSegmentation?: boolean          // 平滑分割
+  minDetectionConfidence?: number       // 最小检测置信度
+  minTrackingConfidence?: number        // 最小追踪置信度
+}
+```
+
+### 绘制选项
+
+```typescript
+interface DrawingOptions {
+  showLandmarks?: boolean      // 显示关键点
+  showConnections?: boolean    // 显示连接线
+  showAngles?: boolean         // 显示角度
+  landmarkColor?: string       // 关键点颜色
+  connectionColor?: string     // 连接线颜色
+  angleColor?: string          // 角度颜色
+  landmarkRadius?: number      // 关键点半径
+  lineWidth?: number           // 线宽
+}
+```
+
+## 🎯 预定义关节
+
+系统预定义了 8 个常用关节：
+
+- `left_elbow` - 左肘关节
+- `right_elbow` - 右肘关节
+- `left_shoulder` - 左肩关节
+- `right_shoulder` - 右肩关节
+- `left_hip` - 左髋关节
+- `right_hip` - 右髋关节
+- `left_knee` - 左膝关节
+- `right_knee` - 右膝关节
+
+### 自定义关节
+
+```typescript
+import { PoseLandmarkIndex } from '@pose-ai/core'
+
+const customJoints = [
+  {
+    name: 'custom_joint',
+    points: [
+      PoseLandmarkIndex.LEFT_SHOULDER,
+      PoseLandmarkIndex.LEFT_ELBOW,
+      PoseLandmarkIndex.LEFT_WRIST,
+    ],
+    description: '自定义关节',
+  },
+]
+
+engine.setJointDefinitions(customJoints)
+```
+
+## 🎨 样式自定义
+
+所有组件都支持通过 `className` 属性添加自定义样式：
+
+```tsx
+<ROMVisualizer
+  className="my-custom-visualizer"
+  drawingOptions={{
+    landmarkColor: '#FF0000',
+    connectionColor: '#00FF00',
+    angleColor: '#0000FF',
+    lineWidth: 3,
+  }}
+/>
+```
+
+## 📊 数据类型
+
+### JointAngle
+
+```typescript
+interface JointAngle {
+  name: string              // 关节名称
+  angle: number             // 角度值（度）
+  points: [number, number, number]  // 三个关键点索引
+  timestamp: number         // 时间戳
+}
+```
+
+### ROMData
+
+```typescript
+interface ROMData {
+  jointName: string         // 关节名称
+  currentAngle: number      // 当前角度
+  minAngle: number          // 最小角度
+  maxAngle: number          // 最大角度
+  range: number             // 运动范围
+  timestamp: number         // 时间戳
+}
+```
+
+## 🔧 高级用法
+
+### 事件监听
+
+```typescript
+const eventBus = engine.getEventBus()
+
+// 监听角度更新
+const unsubscribe = eventBus.on('angle-updated', (event) => {
+  console.log('角度更新:', event.data)
+})
+
+// 取消监听
+unsubscribe()
+```
+
+### 图片处理
+
+```typescript
+const image = document.getElementById('myImage') as HTMLImageElement
+await engine.processImage(image)
+```
+
+### 重置 ROM 数据
+
+```typescript
+// 重置所有关节的 ROM 数据
+engine.resetROM()
+
+// 重置特定关节
+engine.resetROM('left_elbow')
+```
+
+## 📝 注意事项
+
+1. **摄像头权限**: 使用前需要用户授权摄像头权限
+2. **HTTPS**: 在生产环境中必须使用 HTTPS
+3. **性能**: `modelComplexity` 越高，精度越高但性能越低
+4. **资源清理**: 组件卸载时会自动清理资源
+
+## 📄 License
+
+MIT

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,5 @@
+var e = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+export {
+  e as commonjsGlobal
+};
+//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/_virtual/_commonjsHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/camera_utils.js

@@ -0,0 +1,6 @@
+import { __require as r } from "../node_modules/.pnpm/@mediapipe_camera_utils@0.3.1675466862/node_modules/@mediapipe/camera_utils/camera_utils.js";
+var e = /* @__PURE__ */ r();
+export {
+  e as c
+};
+//# sourceMappingURL=camera_utils.js.map

package/dist/_virtual/camera_utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"camera_utils.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/camera_utils2.js

@@ -0,0 +1,5 @@
+var a = {};
+export {
+  a as __exports
+};
+//# sourceMappingURL=camera_utils2.js.map

package/dist/_virtual/camera_utils2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"camera_utils2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/drawing_utils.js

@@ -0,0 +1,6 @@
+import { __require as r } from "../node_modules/.pnpm/@mediapipe_drawing_utils@0.3.1675466124/node_modules/@mediapipe/drawing_utils/drawing_utils.js";
+var a = /* @__PURE__ */ r();
+export {
+  a as d
+};
+//# sourceMappingURL=drawing_utils.js.map

package/dist/_virtual/drawing_utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawing_utils.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/drawing_utils2.js

@@ -0,0 +1,5 @@
+var r = {};
+export {
+  r as __exports
+};
+//# sourceMappingURL=drawing_utils2.js.map

package/dist/_virtual/drawing_utils2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawing_utils2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/pose.js

@@ -0,0 +1,6 @@
+import { __require as r } from "../node_modules/.pnpm/@mediapipe_pose@0.5.1675469404/node_modules/@mediapipe/pose/pose.js";
+var o = /* @__PURE__ */ r();
+export {
+  o as p
+};
+//# sourceMappingURL=pose.js.map

package/dist/_virtual/pose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pose.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/pose2.js

@@ -0,0 +1,5 @@
+var e = {};
+export {
+  e as __exports
+};
+//# sourceMappingURL=pose2.js.map

package/dist/_virtual/pose2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pose2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/AnglePanel/index.css

@@ -0,0 +1 @@
+.angle-panel{background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000001a;padding:1.5rem;min-width:300px;max-height:600px;overflow-y:auto}.angle-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid #e5e7eb}.angle-panel-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#111827}.rom-badge{background:#3b82f6;color:#fff;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600}.angle-list{display:flex;flex-direction:column;gap:1rem}.no-data{text-align:center;color:#6b7280;padding:2rem;font-size:.875rem}.angle-item{background:#f9fafb;border-radius:8px;padding:1rem;transition:all .2s}.angle-item:hover{background:#f3f4f6;transform:translateY(-2px);box-shadow:0 2px 4px #0000000d}.angle-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.joint-name{font-weight:500;color:#374151;text-transform:capitalize}.angle-value{font-size:1.25rem;font-weight:700;font-family:Courier New,monospace}.rom-info{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #e5e7eb}.rom-bar{position:relative;height:8px;background:#e5e7eb;border-radius:4px;margin-bottom:.5rem;overflow:hidden}.rom-range{position:absolute;height:100%;background:linear-gradient(90deg,#3b82f6,#10b981);opacity:.3;border-radius:4px}.rom-current{position:absolute;width:4px;height:100%;background:#ef4444;transform:translate(-50%)}.rom-values{display:flex;justify-content:space-between;font-size:.75rem;color:#6b7280}.rom-min,.rom-max,.rom-range-value{font-weight:500}@media(max-width:768px){.angle-panel{min-width:100%;max-height:400px}}

package/dist/components/AnglePanel/index.js

@@ -0,0 +1,79 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+/* empty css          */
+const h = ({
+  angles: l,
+  romData: i = [],
+  showROM: s = !1,
+  className: m = ""
+}) => {
+  const c = (e) => i.find((a) => a.jointName === e), d = (e) => e < 30 ? "#ef4444" : e < 90 ? "#f59e0b" : e < 150 ? "#10b981" : "#3b82f6";
+  return /* @__PURE__ */ n("div", { className: `angle-panel ${m}`, children: [
+    /* @__PURE__ */ n("div", { className: "angle-panel-header", children: [
+      /* @__PURE__ */ r("h3", { children: "关节角度" }),
+      s && /* @__PURE__ */ r("span", { className: "rom-badge", children: "ROM" })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "angle-list", children: l.length === 0 ? /* @__PURE__ */ r("div", { className: "no-data", children: "未检测到姿态" }) : l.map((e) => {
+      const a = c(e.name);
+      return /* @__PURE__ */ n("div", { className: "angle-item", children: [
+        /* @__PURE__ */ n("div", { className: "angle-item-header", children: [
+          /* @__PURE__ */ r("span", { className: "joint-name", children: e.name }),
+          /* @__PURE__ */ n(
+            "span",
+            {
+              className: "angle-value",
+              style: { color: d(e.angle) },
+              children: [
+                e.angle.toFixed(1),
+                "°"
+              ]
+            }
+          )
+        ] }),
+        s && a && /* @__PURE__ */ n("div", { className: "rom-info", children: [
+          /* @__PURE__ */ n("div", { className: "rom-bar", children: [
+            /* @__PURE__ */ r(
+              "div",
+              {
+                className: "rom-range",
+                style: {
+                  left: `${a.minAngle / 180 * 100}%`,
+                  width: `${a.range / 180 * 100}%`
+                }
+              }
+            ),
+            /* @__PURE__ */ r(
+              "div",
+              {
+                className: "rom-current",
+                style: {
+                  left: `${a.currentAngle / 180 * 100}%`
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n("div", { className: "rom-values", children: [
+            /* @__PURE__ */ n("span", { className: "rom-min", children: [
+              "最小: ",
+              a.minAngle.toFixed(1),
+              "°"
+            ] }),
+            /* @__PURE__ */ n("span", { className: "rom-range-value", children: [
+              "范围: ",
+              a.range.toFixed(1),
+              "°"
+            ] }),
+            /* @__PURE__ */ n("span", { className: "rom-max", children: [
+              "最大: ",
+              a.maxAngle.toFixed(1),
+              "°"
+            ] })
+          ] })
+        ] })
+      ] }, e.name);
+    }) })
+  ] });
+};
+export {
+  h as AnglePanel
+};
+//# sourceMappingURL=index.js.map

package/dist/components/AnglePanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/AnglePanel/index.tsx"],"sourcesContent":["import React from 'react'\nimport type { JointAngle, ROMData } from '../../types'\nimport './index.css'\n\nexport interface AnglePanelProps {\n  angles: JointAngle[]\n  romData?: ROMData[]\n  showROM?: boolean\n  className?: string\n}\n\nexport const AnglePanel: React.FC<AnglePanelProps> = ({\n  angles,\n  romData = [],\n  showROM = false,\n  className = '',\n}) => {\n  const getROMForJoint = (jointName: string): ROMData | undefined => {\n    return romData.find((rom) => rom.jointName === jointName)\n  }\n\n  const getAngleColor = (angle: number): string => {\n    if (angle < 30) return '#ef4444'\n    if (angle < 90) return '#f59e0b'\n    if (angle < 150) return '#10b981'\n    return '#3b82f6'\n  }\n\n  return (\n    <div className={`angle-panel ${className}`}>\n      <div className=\"angle-panel-header\">\n        <h3>关节角度</h3>\n        {showROM && <span className=\"rom-badge\">ROM</span>}\n      </div>\n      \n      <div className=\"angle-list\">\n        {angles.length === 0 ? (\n          <div className=\"no-data\">未检测到姿态</div>\n        ) : (\n          angles.map((angleData) => {\n            const rom = getROMForJoint(angleData.name)\n            \n            return (\n              <div key={angleData.name} className=\"angle-item\">\n                <div className=\"angle-item-header\">\n                  <span className=\"joint-name\">{angleData.name}</span>\n                  <span \n                    className=\"angle-value\"\n                    style={{ color: getAngleColor(angleData.angle) }}\n                  >\n                    {angleData.angle.toFixed(1)}°\n                  </span>\n                </div>\n                \n                {showROM && rom && (\n                  <div className=\"rom-info\">\n                    <div className=\"rom-bar\">\n                      <div \n                        className=\"rom-range\"\n                        style={{\n                          left: `${(rom.minAngle / 180) * 100}%`,\n                          width: `${(rom.range / 180) * 100}%`,\n                        }}\n                      />\n                      <div \n                        className=\"rom-current\"\n                        style={{\n                          left: `${(rom.currentAngle / 180) * 100}%`,\n                        }}\n                      />\n                    </div>\n                    <div className=\"rom-values\">\n                      <span className=\"rom-min\">最小: {rom.minAngle.toFixed(1)}°</span>\n                      <span className=\"rom-range-value\">范围: {rom.range.toFixed(1)}°</span>\n                      <span className=\"rom-max\">最大: {rom.maxAngle.toFixed(1)}°</span>\n                    </div>\n                  </div>\n                )}\n              </div>\n            )\n          })\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["AnglePanel","angles","romData","showROM","className","getROMForJoint","jointName","rom","getAngleColor","angle","jsxs","jsx","angleData"],"mappings":";;AAWO,MAAMA,IAAwC,CAAC;AAAA,EACpD,QAAAC;AAAA,EACA,SAAAC,IAAU,CAAA;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AACd,MAAM;AACJ,QAAMC,IAAiB,CAACC,MACfJ,EAAQ,KAAK,CAACK,MAAQA,EAAI,cAAcD,CAAS,GAGpDE,IAAgB,CAACC,MACjBA,IAAQ,KAAW,YACnBA,IAAQ,KAAW,YACnBA,IAAQ,MAAY,YACjB;AAGT,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAW,eAAeN,CAAS,IACtC,UAAA;AAAA,IAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAG,UAAA,OAAA,CAAI;AAAA,MACPR,KAAW,gBAAAQ,EAAC,QAAA,EAAK,WAAU,aAAY,UAAA,MAAA,CAAG;AAAA,IAAA,GAC7C;AAAA,sBAEC,OAAA,EAAI,WAAU,cACZ,UAAAV,EAAO,WAAW,IACjB,gBAAAU,EAAC,OAAA,EAAI,WAAU,WAAU,UAAA,SAAA,CAAM,IAE/BV,EAAO,IAAI,CAACW,MAAc;AACxB,YAAML,IAAMF,EAAeO,EAAU,IAAI;AAEzC,aACE,gBAAAF,EAAC,OAAA,EAAyB,WAAU,cAClC,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,cAAc,UAAAC,EAAU,MAAK;AAAA,UAC7C,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAOF,EAAcI,EAAU,KAAK,EAAA;AAAA,cAE5C,UAAA;AAAA,gBAAAA,EAAU,MAAM,QAAQ,CAAC;AAAA,gBAAE;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAC9B,GACF;AAAA,QAECT,KAAWI,KACV,gBAAAG,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,WACb,UAAA;AAAA,YAAA,gBAAAC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,MAAM,GAAIJ,EAAI,WAAW,MAAO,GAAG;AAAA,kBACnC,OAAO,GAAIA,EAAI,QAAQ,MAAO,GAAG;AAAA,gBAAA;AAAA,cACnC;AAAA,YAAA;AAAA,YAEF,gBAAAI;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,MAAM,GAAIJ,EAAI,eAAe,MAAO,GAAG;AAAA,gBAAA;AAAA,cACzC;AAAA,YAAA;AAAA,UACF,GACF;AAAA,UACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,YAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA;AAAA,cAAA;AAAA,cAAKH,EAAI,SAAS,QAAQ,CAAC;AAAA,cAAE;AAAA,YAAA,GAAC;AAAA,YACxD,gBAAAG,EAAC,QAAA,EAAK,WAAU,mBAAkB,UAAA;AAAA,cAAA;AAAA,cAAKH,EAAI,MAAM,QAAQ,CAAC;AAAA,cAAE;AAAA,YAAA,GAAC;AAAA,YAC7D,gBAAAG,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA;AAAA,cAAA;AAAA,cAAKH,EAAI,SAAS,QAAQ,CAAC;AAAA,cAAE;AAAA,YAAA,EAAA,CAAC;AAAA,UAAA,EAAA,CAC1D;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,GAjCMK,EAAU,IAmCpB;AAAA,IAEJ,CAAC,EAAA,CAEL;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/PoseCanvas/index.js

@@ -0,0 +1,86 @@
+import { jsx as b } from "react/jsx-runtime";
+import { forwardRef as j, useRef as z, useImperativeHandle as F, useEffect as p } from "react";
+import { clearCanvas as g, resizeCanvas as H, drawPoseLandmarks as I, drawAngle as L } from "../utils/drawingUtils.js";
+const N = j(
+  ({
+    landmarks: n = [],
+    angles: r = [],
+    width: o,
+    height: t,
+    drawOptions: c = {},
+    customRenderer: l,
+    className: P = "",
+    style: i = {},
+    mirror: m = !0
+  }, E) => {
+    const s = z(null);
+    F(E, () => ({
+      getCanvas: () => s.current,
+      getContext: () => s.current?.getContext("2d") || null,
+      clear: () => {
+        const e = s.current?.getContext("2d");
+        e && g(e);
+      },
+      redraw: () => {
+        f();
+      }
+    })), p(() => {
+      const e = s.current;
+      e && H(e, o, t);
+    }, [o, t]);
+    const f = () => {
+      const e = s.current;
+      if (!e) {
+        console.log("PoseCanvas: no canvas element");
+        return;
+      }
+      const a = e.getContext("2d");
+      if (!a) {
+        console.log("PoseCanvas: no 2d context");
+        return;
+      }
+      if (g(a), l) {
+        l(a, { landmarks: n, angles: r, width: o, height: t });
+        return;
+      }
+      if (n.length === 0) {
+        console.log("PoseCanvas: no landmarks to draw");
+        return;
+      }
+      console.log("PoseCanvas: drawing", n.length, "landmarks"), I(a, n, c), c.showAngles && r.length > 0 && r.forEach((u) => {
+        const [d, y, A] = u.points, v = n[d], C = n[y], x = n[A];
+        v && C && x && L(a, v, C, x, u.angle, o, t, c);
+      });
+    };
+    return p(() => {
+      console.log("PoseCanvas render:", {
+        landmarksCount: n.length,
+        anglesCount: r.length,
+        width: o,
+        height: t,
+        canvas: s.current
+      }), f();
+    }, [n, r, o, t, c, l]), /* @__PURE__ */ b(
+      "canvas",
+      {
+        ref: s,
+        className: P,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          pointerEvents: "none",
+          transform: m ? "scaleX(-1)" : "none",
+          ...i
+        },
+        width: o,
+        height: t
+      }
+    );
+  }
+);
+N.displayName = "PoseCanvas";
+export {
+  N as PoseCanvas
+};
+//# sourceMappingURL=index.js.map

package/dist/components/PoseCanvas/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/PoseCanvas/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react'\nimport type { JointAngle, PosePoint } from '../../types'\nimport { drawPoseLandmarks, drawAngle, clearCanvas, resizeCanvas, DrawingOptions } from '../utils/drawingUtils'\n\nexport interface RenderData {\n  landmarks: PosePoint[]\n  angles: JointAngle[]\n  width: number\n  height: number\n}\n\nexport interface PoseCanvasProps {\n  // 数据输入\n  landmarks?: PosePoint[]\n  angles?: JointAngle[]\n  \n  // 尺寸\n  width: number\n  height: number\n  \n  // 绘制配置\n  drawOptions?: DrawingOptions\n  \n  // 自定义渲染器（可选）\n  customRenderer?: (ctx: CanvasRenderingContext2D, data: RenderData) => void\n  \n  // 样式\n  className?: string\n  style?: React.CSSProperties\n  \n  // 是否镜像翻转\n  mirror?: boolean\n}\n\nexport interface PoseCanvasHandle {\n  getCanvas: () => HTMLCanvasElement | null\n  getContext: () => CanvasRenderingContext2D | null\n  clear: () => void\n  redraw: () => void\n}\n\nexport const PoseCanvas = forwardRef<PoseCanvasHandle, PoseCanvasProps>(\n  (\n    {\n      landmarks = [],\n      angles = [],\n      width,\n      height,\n      drawOptions = {},\n      customRenderer,\n      className = '',\n      style = {},\n      mirror = true\n    },\n    ref\n  ) => {\n    const canvasRef = useRef<HTMLCanvasElement>(null)\n\n    // 暴露方法给父组件\n    useImperativeHandle(ref, () => ({\n      getCanvas: () => canvasRef.current,\n      getContext: () => canvasRef.current?.getContext('2d') || null,\n      clear: () => {\n        const ctx = canvasRef.current?.getContext('2d')\n        if (ctx) clearCanvas(ctx)\n      },\n      redraw: () => {\n        drawFrame()\n      }\n    }))\n\n    // 调整画布尺寸\n    useEffect(() => {\n      const canvas = canvasRef.current\n      if (!canvas) return\n\n      resizeCanvas(canvas, width, height)\n    }, [width, height])\n\n    // 绘制帧\n    const drawFrame = () => {\n      const canvas = canvasRef.current\n      if (!canvas) {\n        console.log('PoseCanvas: no canvas element')\n        return\n      }\n\n      const ctx = canvas.getContext('2d')\n      if (!ctx) {\n        console.log('PoseCanvas: no 2d context')\n        return\n      }\n\n      // 清空画布\n      clearCanvas(ctx)\n\n      // 如果有自定义渲染器，使用自定义渲染\n      if (customRenderer) {\n        customRenderer(ctx, { landmarks, angles, width, height })\n        return\n      }\n\n      // 默认渲染\n      if (landmarks.length === 0) {\n        console.log('PoseCanvas: no landmarks to draw')\n        return\n      }\n\n      console.log('PoseCanvas: drawing', landmarks.length, 'landmarks')\n\n      // 绘制骨骼和关键点\n      drawPoseLandmarks(ctx, landmarks, drawOptions)\n\n      // 绘制角度标注\n      if (drawOptions.showAngles && angles.length > 0) {\n        angles.forEach((angleData) => {\n          const [idx1, idx2, idx3] = angleData.points\n          const p1 = landmarks[idx1]\n          const p2 = landmarks[idx2]\n          const p3 = landmarks[idx3]\n\n          if (p1 && p2 && p3) {\n            drawAngle(ctx, p1, p2, p3, angleData.angle, width, height, drawOptions)\n          }\n        })\n      }\n    }\n\n    // 当数据更新时重新绘制\n    useEffect(() => {\n      console.log('PoseCanvas render:', {\n        landmarksCount: landmarks.length,\n        anglesCount: angles.length,\n        width,\n        height,\n        canvas: canvasRef.current\n      })\n      drawFrame()\n    }, [landmarks, angles, width, height, drawOptions, customRenderer])\n\n    return (\n      <canvas\n        ref={canvasRef}\n        className={className}\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          pointerEvents: 'none',\n          transform: mirror ? 'scaleX(-1)' : 'none',\n          ...style\n        }}\n        width={width}\n        height={height}\n      />\n    )\n  }\n)\n\nPoseCanvas.displayName = 'PoseCanvas'\n"],"names":["PoseCanvas","forwardRef","landmarks","angles","width","height","drawOptions","customRenderer","className","style","mirror","ref","canvasRef","useRef","useImperativeHandle","ctx","drawFrame","useEffect","canvas","resizeCanvas","clearCanvas","drawPoseLandmarks","angleData","idx1","idx2","idx3","p1","p2","p3","drawAngle","jsx"],"mappings":";;;AAyCO,MAAMA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,WAAAC,IAAY,CAAA;AAAA,IACZ,QAAAC,IAAS,CAAA;AAAA,IACT,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC,IAAc,CAAA;AAAA,IACd,gBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ,CAAA;AAAA,IACR,QAAAC,IAAS;AAAA,EAAA,GAEXC,MACG;AACH,UAAMC,IAAYC,EAA0B,IAAI;AAGhD,IAAAC,EAAoBH,GAAK,OAAO;AAAA,MAC9B,WAAW,MAAMC,EAAU;AAAA,MAC3B,YAAY,MAAMA,EAAU,SAAS,WAAW,IAAI,KAAK;AAAA,MACzD,OAAO,MAAM;AACX,cAAMG,IAAMH,EAAU,SAAS,WAAW,IAAI;AAC9C,QAAIG,OAAiBA,CAAG;AAAA,MAC1B;AAAA,MACA,QAAQ,MAAM;AACZ,QAAAC,EAAA;AAAA,MACF;AAAA,IAAA,EACA,GAGFC,EAAU,MAAM;AACd,YAAMC,IAASN,EAAU;AACzB,MAAKM,KAELC,EAAaD,GAAQd,GAAOC,CAAM;AAAA,IACpC,GAAG,CAACD,GAAOC,CAAM,CAAC;AAGlB,UAAMW,IAAY,MAAM;AACtB,YAAME,IAASN,EAAU;AACzB,UAAI,CAACM,GAAQ;AACX,gBAAQ,IAAI,+BAA+B;AAC3C;AAAA,MACF;AAEA,YAAMH,IAAMG,EAAO,WAAW,IAAI;AAClC,UAAI,CAACH,GAAK;AACR,gBAAQ,IAAI,2BAA2B;AACvC;AAAA,MACF;AAMA,UAHAK,EAAYL,CAAG,GAGXR,GAAgB;AAClB,QAAAA,EAAeQ,GAAK,EAAE,WAAAb,GAAW,QAAAC,GAAQ,OAAAC,GAAO,QAAAC,GAAQ;AACxD;AAAA,MACF;AAGA,UAAIH,EAAU,WAAW,GAAG;AAC1B,gBAAQ,IAAI,kCAAkC;AAC9C;AAAA,MACF;AAEA,cAAQ,IAAI,uBAAuBA,EAAU,QAAQ,WAAW,GAGhEmB,EAAkBN,GAAKb,GAAWI,CAAW,GAGzCA,EAAY,cAAcH,EAAO,SAAS,KAC5CA,EAAO,QAAQ,CAACmB,MAAc;AAC5B,cAAM,CAACC,GAAMC,GAAMC,CAAI,IAAIH,EAAU,QAC/BI,IAAKxB,EAAUqB,CAAI,GACnBI,IAAKzB,EAAUsB,CAAI,GACnBI,IAAK1B,EAAUuB,CAAI;AAEzB,QAAIC,KAAMC,KAAMC,KACdC,EAAUd,GAAKW,GAAIC,GAAIC,GAAIN,EAAU,OAAOlB,GAAOC,GAAQC,CAAW;AAAA,MAE1E,CAAC;AAAA,IAEL;AAGA,WAAAW,EAAU,MAAM;AACd,cAAQ,IAAI,sBAAsB;AAAA,QAChC,gBAAgBf,EAAU;AAAA,QAC1B,aAAaC,EAAO;AAAA,QACpB,OAAAC;AAAA,QACA,QAAAC;AAAA,QACA,QAAQO,EAAU;AAAA,MAAA,CACnB,GACDI,EAAA;AAAA,IACF,GAAG,CAACd,GAAWC,GAAQC,GAAOC,GAAQC,GAAaC,CAAc,CAAC,GAGhE,gBAAAuB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKlB;AAAA,QACL,WAAAJ;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,eAAe;AAAA,UACf,WAAWE,IAAS,eAAe;AAAA,UACnC,GAAGD;AAAA,QAAA;AAAA,QAEL,OAAAL;AAAA,QACA,QAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAL,EAAW,cAAc;"}

package/dist/components/ROMVisualizer/index.css

@@ -0,0 +1 @@
+.rom-visualizer{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:1200px;margin:0 auto}.visualizer-container{display:flex;gap:1.5rem;flex-wrap:wrap}.video-container{position:relative;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 10px 15px -3px #0000001a}.video-element{display:block;width:100%;height:100%;transform:scaleX(-1)}.video-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000000b3;z-index:5}.overlay-content{text-align:center;color:#fff}.camera-icon{margin-bottom:1rem;opacity:.8}.overlay-content p{font-size:1rem;margin:0;opacity:.9}.visualizer-angle-panel{flex:1;min-width:300px}.controls{display:flex;align-items:center;gap:1rem;padding:1rem;background:#f9fafb;border-radius:12px;box-shadow:0 1px 3px #0000001a}.control-button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 4px #0000001a}.control-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 6px #00000026}.control-button:active:not(:disabled){transform:translateY(0)}.control-button:disabled{opacity:.5;cursor:not-allowed}.start-button{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.start-button:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8)}.stop-button{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.stop-button:hover:not(:disabled){background:linear-gradient(135deg,#dc2626,#b91c1c)}.button-icon{flex-shrink:0}.status-indicator{display:flex;align-items:center;gap:.5rem;margin-left:auto;padding:.5rem 1rem;background:#dcfce7;border-radius:9999px}.status-dot{width:8px;height:8px;background:#10b981;border-radius:50%;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.status-text{font-size:.875rem;font-weight:600;color:#065f46}.error-message{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#fee2e2;border-left:4px solid #ef4444;border-radius:8px;color:#991b1b;font-size:.875rem}.error-icon{flex-shrink:0;color:#ef4444}@media(max-width:768px){.visualizer-container{flex-direction:column}.video-container{width:100%!important;height:auto!important}.video-element{width:100%;height:auto}.visualizer-angle-panel{width:100%}.controls{flex-direction:column;align-items:stretch}.control-button{justify-content:center}.status-indicator{margin-left:0;justify-content:center}}