pose-ai-core 0.1.0

package/dist/components/ROMVisualizer/index.js

@@ -0,0 +1,208 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useRef as y, useState as m } from "react";
+import { usePoseEngine as w } from "../../hooks/usePoseEngine.js";
+import { SkeletonOverlay as C } from "../SkeletonOverlay/index.js";
+import { AnglePanel as R } from "../AnglePanel/index.js";
+/* empty css          */
+const V = ({
+  engineOptions: i = {},
+  width: o = 640,
+  height: s = 480,
+  showAnglePanel: v = !0,
+  showROM: p = !0,
+  drawingOptions: k = {},
+  className: N = "",
+  onStart: f,
+  onStop: L
+}) => {
+  const n = y(null), [g, l] = m(null), [c, d] = m(!1), { start: z, stop: b, isRunning: a, angles: u, romData: M, error: h } = w({
+    ...i,
+    onResults: (r) => {
+      l(r), i.onResults?.(r);
+    }
+  }), j = async () => {
+    if (n.current)
+      try {
+        await z(n.current), d(!0), f?.();
+      } catch (r) {
+        console.error("Failed to start pose detection:", r);
+      }
+  }, x = () => {
+    b(), d(!1), l(null), L?.();
+  };
+  return /* @__PURE__ */ t("div", { className: `rom-visualizer ${N}`, children: [
+    /* @__PURE__ */ t("div", { className: "visualizer-container", children: [
+      /* @__PURE__ */ t("div", { className: "video-container", style: { width: o, height: s }, children: [
+        /* @__PURE__ */ e(
+          "video",
+          {
+            ref: n,
+            className: "video-element",
+            width: o,
+            height: s,
+            autoPlay: !0,
+            playsInline: !0,
+            muted: !0
+          }
+        ),
+        a && /* @__PURE__ */ e(
+          C,
+          {
+            results: g,
+            angles: u,
+            width: o,
+            height: s,
+            drawingOptions: k
+          }
+        ),
+        !c && /* @__PURE__ */ e("div", { className: "video-overlay", children: /* @__PURE__ */ t("div", { className: "overlay-content", children: [
+          /* @__PURE__ */ e(
+            "svg",
+            {
+              className: "camera-icon",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              width: "64",
+              height: "64",
+              children: /* @__PURE__ */ e(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e("p", { children: "点击开始按钮启动摄像头" })
+        ] }) })
+      ] }),
+      v && /* @__PURE__ */ e(
+        R,
+        {
+          angles: u,
+          romData: M,
+          showROM: p,
+          className: "visualizer-angle-panel"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { className: "controls", children: [
+      c ? /* @__PURE__ */ t(
+        "button",
+        {
+          className: "control-button stop-button",
+          onClick: x,
+          children: [
+            /* @__PURE__ */ t(
+              "svg",
+              {
+                className: "button-icon",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                width: "20",
+                height: "20",
+                children: [
+                  /* @__PURE__ */ e(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"
+                    }
+                  )
+                ]
+              }
+            ),
+            "停止检测"
+          ]
+        }
+      ) : /* @__PURE__ */ t(
+        "button",
+        {
+          className: "control-button start-button",
+          onClick: j,
+          disabled: a,
+          children: [
+            /* @__PURE__ */ t(
+              "svg",
+              {
+                className: "button-icon",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                width: "20",
+                height: "20",
+                children: [
+                  /* @__PURE__ */ e(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    }
+                  )
+                ]
+              }
+            ),
+            "开始检测"
+          ]
+        }
+      ),
+      a && /* @__PURE__ */ t("div", { className: "status-indicator", children: [
+        /* @__PURE__ */ e("span", { className: "status-dot" }),
+        /* @__PURE__ */ e("span", { className: "status-text", children: "检测中" })
+      ] })
+    ] }),
+    h && /* @__PURE__ */ t("div", { className: "error-message", children: [
+      /* @__PURE__ */ e(
+        "svg",
+        {
+          className: "error-icon",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          width: "20",
+          height: "20",
+          children: /* @__PURE__ */ e(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e("span", { children: h.message })
+    ] })
+  ] });
+};
+export {
+  V as ROMVisualizer
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/ROMVisualizer/index.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react'\nimport type { Results } from '@mediapipe/pose'\nimport { usePoseEngine, UsePoseEngineOptions } from '../../hooks/usePoseEngine'\nimport { SkeletonOverlay } from '../SkeletonOverlay'\nimport { AnglePanel } from '../AnglePanel'\nimport type { DrawingOptions } from '../utils/drawingUtils'\nimport './index.css'\n\nexport interface ROMVisualizerProps {\n  engineOptions?: UsePoseEngineOptions\n  width?: number\n  height?: number\n  showAnglePanel?: boolean\n  showROM?: boolean\n  drawingOptions?: DrawingOptions\n  className?: string\n  onStart?: () => void\n  onStop?: () => void\n}\n\nexport const ROMVisualizer: React.FC<ROMVisualizerProps> = ({\n  engineOptions = {},\n  width = 640,\n  height = 480,\n  showAnglePanel = true,\n  showROM = true,\n  drawingOptions = {},\n  className = '',\n  onStart,\n  onStop,\n}) => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const [results, setResults] = useState<Results | null>(null)\n  const [isStarted, setIsStarted] = useState(false)\n\n  const { start, stop, isRunning, angles, romData, error } = usePoseEngine({\n    ...engineOptions,\n    onResults: (newResults) => {\n      setResults(newResults)\n      engineOptions.onResults?.(newResults)\n    },\n  })\n\n  const handleStart = async () => {\n    if (!videoRef.current) return\n\n    try {\n      await start(videoRef.current)\n      setIsStarted(true)\n      onStart?.()\n    } catch (err) {\n      console.error('Failed to start pose detection:', err)\n    }\n  }\n\n  const handleStop = () => {\n    stop()\n    setIsStarted(false)\n    setResults(null)\n    onStop?.()\n  }\n\n  return (\n    <div className={`rom-visualizer ${className}`}>\n      <div className=\"visualizer-container\">\n        <div className=\"video-container\" style={{ width, height }}>\n          <video\n            ref={videoRef}\n            className=\"video-element\"\n            width={width}\n            height={height}\n            autoPlay\n            playsInline\n            muted\n          />\n          {isRunning && (\n            <SkeletonOverlay\n              results={results}\n              angles={angles}\n              width={width}\n              height={height}\n              drawingOptions={drawingOptions}\n            />\n          )}\n          {!isStarted && (\n            <div className=\"video-overlay\">\n              <div className=\"overlay-content\">\n                <svg\n                  className=\"camera-icon\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  viewBox=\"0 0 24 24\"\n                  width=\"64\"\n                  height=\"64\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z\"\n                  />\n                </svg>\n                <p>点击开始按钮启动摄像头</p>\n              </div>\n            </div>\n          )}\n        </div>\n\n        {showAnglePanel && (\n          <AnglePanel\n            angles={angles}\n            romData={romData}\n            showROM={showROM}\n            className=\"visualizer-angle-panel\"\n          />\n        )}\n      </div>\n\n      <div className=\"controls\">\n        {!isStarted ? (\n          <button\n            className=\"control-button start-button\"\n            onClick={handleStart}\n            disabled={isRunning}\n          >\n            <svg\n              className=\"button-icon\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n              width=\"20\"\n              height=\"20\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\"\n              />\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n              />\n            </svg>\n            开始检测\n          </button>\n        ) : (\n          <button\n            className=\"control-button stop-button\"\n            onClick={handleStop}\n          >\n            <svg\n              className=\"button-icon\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n              width=\"20\"\n              height=\"20\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n              />\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z\"\n              />\n            </svg>\n            停止检测\n          </button>\n        )}\n\n        {isRunning && (\n          <div className=\"status-indicator\">\n            <span className=\"status-dot\"></span>\n            <span className=\"status-text\">检测中</span>\n          </div>\n        )}\n      </div>\n\n      {error && (\n        <div className=\"error-message\">\n          <svg\n            className=\"error-icon\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n            width=\"20\"\n            height=\"20\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n            />\n          </svg>\n          <span>{error.message}</span>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["ROMVisualizer","engineOptions","width","height","showAnglePanel","showROM","drawingOptions","className","onStart","onStop","videoRef","useRef","results","setResults","useState","isStarted","setIsStarted","start","stop","isRunning","angles","romData","error","usePoseEngine","newResults","handleStart","err","handleStop","jsxs","jsx","SkeletonOverlay","AnglePanel"],"mappings":"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"}

package/dist/components/SkeletonOverlay/index.css

@@ -0,0 +1 @@
+.skeleton-overlay{position:absolute;top:0;left:0;pointer-events:none;z-index:10;transform:scaleX(-1)}

package/dist/components/SkeletonOverlay/index.js

@@ -0,0 +1,45 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useRef as z, useEffect as x } from "react";
+import { resizeCanvas as C, clearCanvas as L, drawPoseLandmarks as b, drawAngle as A } from "../utils/drawingUtils.js";
+/* empty css          */
+const P = ({
+  results: e,
+  angles: f = [],
+  width: n = 640,
+  height: o = 480,
+  drawingOptions: a = {},
+  className: u = ""
+}) => {
+  const m = z(null);
+  return x(() => {
+    const s = m.current;
+    s && C(s, n, o);
+  }, [n, o]), x(() => {
+    const s = m.current;
+    if (!s) return;
+    const c = s.getContext("2d");
+    if (!c || (L(c), !e || !e.poseLandmarks)) return;
+    const t = e.poseLandmarks.map((r) => ({
+      x: r.x,
+      y: r.y,
+      z: r.z,
+      visibility: r.visibility
+    }));
+    b(c, t, a), a.showAngles && f.length > 0 && f.forEach((r) => {
+      const [k, l, y] = r.points, v = t[k], i = t[l], p = t[y];
+      v && i && p && A(c, v, i, p, r.angle, n, o, a);
+    });
+  }, [e, f, n, o, a]), /* @__PURE__ */ d(
+    "canvas",
+    {
+      ref: m,
+      className: `skeleton-overlay ${u}`,
+      width: n,
+      height: o
+    }
+  );
+};
+export {
+  P as SkeletonOverlay
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/SkeletonOverlay/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport type { Results } from '@mediapipe/pose'\nimport type { JointAngle, PosePoint } from '../../types'\nimport { drawPoseLandmarks, drawAngle, clearCanvas, resizeCanvas, DrawingOptions } from '../utils/drawingUtils'\nimport './index.css'\n\nexport interface SkeletonOverlayProps {\n  results: Results | null\n  angles?: JointAngle[]\n  width?: number\n  height?: number\n  drawingOptions?: DrawingOptions\n  className?: string\n}\n\nexport const SkeletonOverlay: React.FC<SkeletonOverlayProps> = ({\n  results,\n  angles = [],\n  width = 640,\n  height = 480,\n  drawingOptions = {},\n  className = '',\n}) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n\n    resizeCanvas(canvas, width, height)\n  }, [width, height])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n\n    const ctx = canvas.getContext('2d')\n    if (!ctx) return\n\n    clearCanvas(ctx)\n\n    if (!results || !results.poseLandmarks) return\n\n    const landmarks: PosePoint[] = results.poseLandmarks.map((lm) => ({\n      x: lm.x,\n      y: lm.y,\n      z: lm.z,\n      visibility: lm.visibility,\n    }))\n\n    drawPoseLandmarks(ctx, landmarks, drawingOptions)\n\n    if (drawingOptions.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, drawingOptions)\n        }\n      })\n    }\n  }, [results, angles, width, height, drawingOptions])\n\n  return (\n    <canvas\n      ref={canvasRef}\n      className={`skeleton-overlay ${className}`}\n      width={width}\n      height={height}\n    />\n  )\n}\n"],"names":["SkeletonOverlay","results","angles","width","height","drawingOptions","className","canvasRef","useRef","useEffect","canvas","resizeCanvas","ctx","clearCanvas","landmarks","lm","drawPoseLandmarks","angleData","idx1","idx2","idx3","p1","p2","p3","drawAngle","jsx"],"mappings":";;;;AAeO,MAAMA,IAAkD,CAAC;AAAA,EAC9D,SAAAC;AAAA,EACA,QAAAC,IAAS,CAAA;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,gBAAAC,IAAiB,CAAA;AAAA,EACjB,WAAAC,IAAY;AACd,MAAM;AACJ,QAAMC,IAAYC,EAA0B,IAAI;AAEhD,SAAAC,EAAU,MAAM;AACd,UAAMC,IAASH,EAAU;AACzB,IAAKG,KAELC,EAAaD,GAAQP,GAAOC,CAAM;AAAA,EACpC,GAAG,CAACD,GAAOC,CAAM,CAAC,GAElBK,EAAU,MAAM;AACd,UAAMC,IAASH,EAAU;AACzB,QAAI,CAACG,EAAQ;AAEb,UAAME,IAAMF,EAAO,WAAW,IAAI;AAKlC,QAJI,CAACE,MAELC,EAAYD,CAAG,GAEX,CAACX,KAAW,CAACA,EAAQ,eAAe;AAExC,UAAMa,IAAyBb,EAAQ,cAAc,IAAI,CAACc,OAAQ;AAAA,MAChE,GAAGA,EAAG;AAAA,MACN,GAAGA,EAAG;AAAA,MACN,GAAGA,EAAG;AAAA,MACN,YAAYA,EAAG;AAAA,IAAA,EACf;AAEF,IAAAC,EAAkBJ,GAAKE,GAAWT,CAAc,GAE5CA,EAAe,cAAcH,EAAO,SAAS,KAC/CA,EAAO,QAAQ,CAACe,MAAc;AAC5B,YAAM,CAACC,GAAMC,GAAMC,CAAI,IAAIH,EAAU,QAC/BI,IAAKP,EAAUI,CAAI,GACnBI,IAAKR,EAAUK,CAAI,GACnBI,IAAKT,EAAUM,CAAI;AAEzB,MAAIC,KAAMC,KAAMC,KACdC,EAAUZ,GAAKS,GAAIC,GAAIC,GAAIN,EAAU,OAAOd,GAAOC,GAAQC,CAAc;AAAA,IAE7E,CAAC;AAAA,EAEL,GAAG,CAACJ,GAASC,GAAQC,GAAOC,GAAQC,CAAc,CAAC,GAGjD,gBAAAoB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKlB;AAAA,MACL,WAAW,oBAAoBD,CAAS;AAAA,MACxC,OAAAH;AAAA,MACA,QAAAC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/styles.js

@@ -0,0 +1,270 @@
+function t() {
+  if (typeof document > "u") return;
+  const r = "pose-ai-core-styles";
+  if (document.getElementById(r)) return;
+  const e = document.createElement("style");
+  e.id = r, e.textContent = `
+/* SkeletonOverlay */
+.skeleton-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 10;
+  transform: scaleX(-1);
+}
+
+/* ROMVisualizer */
+.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 rgba(0, 0, 0, 0.1);
+}
+
+.video-element {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transform: scaleX(-1);
+}
+
+.video-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 5;
+}
+
+.overlay-content {
+  text-align: center;
+  color: white;
+}
+
+.camera-icon {
+  margin: 0 auto 1rem;
+  opacity: 0.8;
+}
+
+.controls {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.control-button {
+  padding: 0.75rem 2rem;
+  font-size: 1rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.control-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.control-button:active {
+  transform: translateY(0);
+}
+
+.start-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.stop-button {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  color: white;
+}
+
+.status-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+  color: white;
+  font-size: 0.9rem;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #4ade80;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.error-message {
+  padding: 1rem;
+  background: #fee;
+  border: 1px solid #fcc;
+  border-radius: 8px;
+  color: #c00;
+  margin-top: 1rem;
+}
+
+/* AnglePanel */
+.angle-panel {
+  flex: 1;
+  min-width: 300px;
+  background: white;
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.angle-panel h3 {
+  margin: 0 0 1rem 0;
+  color: #333;
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.angle-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.angle-item {
+  padding: 1rem;
+  background: #f8f9fa;
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.angle-item:hover {
+  background: #e9ecef;
+  transform: translateX(4px);
+}
+
+.angle-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.angle-name {
+  font-weight: 600;
+  color: #495057;
+  text-transform: capitalize;
+}
+
+.angle-value {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #667eea;
+}
+
+.rom-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.85rem;
+  color: #6c757d;
+  margin-top: 0.5rem;
+}
+
+.rom-range {
+  display: flex;
+  justify-content: space-between;
+}
+
+.rom-progress {
+  width: 100%;
+  height: 6px;
+  background: #e9ecef;
+  border-radius: 3px;
+  overflow: hidden;
+  margin-top: 0.5rem;
+}
+
+.rom-progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+  transition: width 0.3s ease;
+}
+
+.angle-panel::-webkit-scrollbar {
+  width: 8px;
+}
+
+.angle-panel::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.angle-panel::-webkit-scrollbar-thumb {
+  background: #667eea;
+  border-radius: 4px;
+}
+
+.angle-panel::-webkit-scrollbar-thumb:hover {
+  background: #5568d3;
+}
+
+@media (max-width: 768px) {
+  .rom-visualizer {
+    gap: 1rem;
+  }
+
+  .visualizer-container {
+    flex-direction: column;
+  }
+
+  .angle-panel {
+    min-width: auto;
+    max-height: 400px;
+  }
+}
+`, document.head.appendChild(e);
+}
+typeof window < "u" && t();
+export {
+  t as injectStyles
+};
+//# sourceMappingURL=styles.js.map

package/dist/components/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../src/components/styles.ts"],"sourcesContent":["// 将所有组件样式集中管理，确保样式被正确加载\n\nexport function injectStyles() {\n  if (typeof document === 'undefined') return\n  \n  const styleId = 'pose-ai-core-styles'\n  if (document.getElementById(styleId)) return\n\n  const style = document.createElement('style')\n  style.id = styleId\n  style.textContent = `\n/* SkeletonOverlay */\n.skeleton-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: 10;\n  transform: scaleX(-1);\n}\n\n/* ROMVisualizer */\n.rom-visualizer {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  width: 100%;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.visualizer-container {\n  display: flex;\n  gap: 1.5rem;\n  flex-wrap: wrap;\n}\n\n.video-container {\n  position: relative;\n  background: #000;\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.video-element {\n  display: block;\n  width: 100%;\n  height: 100%;\n  transform: scaleX(-1);\n}\n\n.video-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.7);\n  z-index: 5;\n}\n\n.overlay-content {\n  text-align: center;\n  color: white;\n}\n\n.camera-icon {\n  margin: 0 auto 1rem;\n  opacity: 0.8;\n}\n\n.controls {\n  display: flex;\n  gap: 1rem;\n  justify-content: center;\n  flex-wrap: wrap;\n}\n\n.control-button {\n  padding: 0.75rem 2rem;\n  font-size: 1rem;\n  font-weight: 600;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.control-button:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.control-button:active {\n  transform: translateY(0);\n}\n\n.start-button {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n}\n\n.stop-button {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n  color: white;\n}\n\n.status-indicator {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  background: rgba(255, 255, 255, 0.1);\n  border-radius: 20px;\n  color: white;\n  font-size: 0.9rem;\n}\n\n.status-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #4ade80;\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n.error-message {\n  padding: 1rem;\n  background: #fee;\n  border: 1px solid #fcc;\n  border-radius: 8px;\n  color: #c00;\n  margin-top: 1rem;\n}\n\n/* AnglePanel */\n.angle-panel {\n  flex: 1;\n  min-width: 300px;\n  background: white;\n  border-radius: 12px;\n  padding: 1.5rem;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  max-height: 600px;\n  overflow-y: auto;\n}\n\n.angle-panel h3 {\n  margin: 0 0 1rem 0;\n  color: #333;\n  font-size: 1.2rem;\n  font-weight: 600;\n}\n\n.angle-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.angle-item {\n  padding: 1rem;\n  background: #f8f9fa;\n  border-radius: 8px;\n  transition: all 0.2s;\n}\n\n.angle-item:hover {\n  background: #e9ecef;\n  transform: translateX(4px);\n}\n\n.angle-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 0.5rem;\n}\n\n.angle-name {\n  font-weight: 600;\n  color: #495057;\n  text-transform: capitalize;\n}\n\n.angle-value {\n  font-size: 1.25rem;\n  font-weight: 700;\n  color: #667eea;\n}\n\n.rom-info {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  font-size: 0.85rem;\n  color: #6c757d;\n  margin-top: 0.5rem;\n}\n\n.rom-range {\n  display: flex;\n  justify-content: space-between;\n}\n\n.rom-progress {\n  width: 100%;\n  height: 6px;\n  background: #e9ecef;\n  border-radius: 3px;\n  overflow: hidden;\n  margin-top: 0.5rem;\n}\n\n.rom-progress-bar {\n  height: 100%;\n  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);\n  transition: width 0.3s ease;\n}\n\n.angle-panel::-webkit-scrollbar {\n  width: 8px;\n}\n\n.angle-panel::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 4px;\n}\n\n.angle-panel::-webkit-scrollbar-thumb {\n  background: #667eea;\n  border-radius: 4px;\n}\n\n.angle-panel::-webkit-scrollbar-thumb:hover {\n  background: #5568d3;\n}\n\n@media (max-width: 768px) {\n  .rom-visualizer {\n    gap: 1rem;\n  }\n\n  .visualizer-container {\n    flex-direction: column;\n  }\n\n  .angle-panel {\n    min-width: auto;\n    max-height: 400px;\n  }\n}\n`\n\n  document.head.appendChild(style)\n}\n\n// 自动注入样式\nif (typeof window !== 'undefined') {\n  injectStyles()\n}\n"],"names":["injectStyles","styleId","style"],"mappings":"AAEO,SAASA,IAAe;AAC7B,MAAI,OAAO,WAAa,IAAa;AAErC,QAAMC,IAAU;AAChB,MAAI,SAAS,eAAeA,CAAO,EAAG;AAEtC,QAAMC,IAAQ,SAAS,cAAc,OAAO;AAC5C,EAAAA,EAAM,KAAKD,GACXC,EAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAoQpB,SAAS,KAAK,YAAYA,CAAK;AACjC;AAGI,OAAO,SAAW,OACpBF,EAAA;"}

package/dist/components/utils/drawingUtils.js

@@ -0,0 +1,45 @@
+import { d as m } from "../../_virtual/drawing_utils.js";
+import { p as T } from "../../_virtual/pose.js";
+const g = {
+  showLandmarks: !0,
+  showConnections: !0,
+  showAngles: !0,
+  landmarkColor: "#00FF00",
+  connectionColor: "#00FF00",
+  angleColor: "#FF0000",
+  landmarkRadius: 4,
+  lineWidth: 2
+};
+function L(o, e, s = {}) {
+  const n = { ...g, ...s };
+  n.showConnections && m.drawConnectors(o, e, T.POSE_CONNECTIONS, {
+    color: n.connectionColor,
+    lineWidth: n.lineWidth
+  }), n.showLandmarks && m.drawLandmarks(o, e, {
+    color: n.landmarkColor,
+    radius: n.landmarkRadius,
+    lineWidth: n.lineWidth
+  });
+}
+function M(o, e, s, n, k, r, i, p = {}) {
+  const l = { ...g, ...p }, c = e.x * r, f = e.y * i, t = s.x * r, a = s.y * i, u = n.x * r, w = n.y * i;
+  o.save(), o.strokeStyle = l.angleColor, o.lineWidth = l.lineWidth, o.fillStyle = l.angleColor, o.font = "16px Arial", o.beginPath(), o.moveTo(c, f), o.lineTo(t, a), o.lineTo(u, w), o.stroke();
+  const d = 30, h = Math.atan2(f - a, c - t), C = Math.atan2(w - a, u - t);
+  o.beginPath(), o.arc(t, a, d, h, C, !1), o.stroke();
+  const y = t + Math.cos((h + C) / 2) * (d + 20), F = a + Math.sin((h + C) / 2) * (d + 20);
+  o.fillText(`${k.toFixed(1)}°`, y, F), o.restore();
+}
+function O(o) {
+  o.clearRect(0, 0, o.canvas.width, o.canvas.height);
+}
+function P(o, e, s) {
+  o.width = e, o.height = s;
+}
+export {
+  O as clearCanvas,
+  g as defaultDrawingOptions,
+  M as drawAngle,
+  L as drawPoseLandmarks,
+  P as resizeCanvas
+};
+//# sourceMappingURL=drawingUtils.js.map

package/dist/components/utils/drawingUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawingUtils.js","sources":["../../../src/components/utils/drawingUtils.ts"],"sourcesContent":["import { drawConnectors, drawLandmarks } from '@mediapipe/drawing_utils'\nimport { POSE_CONNECTIONS } from '@mediapipe/pose'\nimport type { PosePoint } from '../../types'\n\nexport interface DrawingOptions {\n  showLandmarks?: boolean\n  showConnections?: boolean\n  showAngles?: boolean\n  landmarkColor?: string\n  connectionColor?: string\n  angleColor?: string\n  landmarkRadius?: number\n  lineWidth?: number\n}\n\nexport const defaultDrawingOptions: Required<DrawingOptions> = {\n  showLandmarks: true,\n  showConnections: true,\n  showAngles: true,\n  landmarkColor: '#00FF00',\n  connectionColor: '#00FF00',\n  angleColor: '#FF0000',\n  landmarkRadius: 4,\n  lineWidth: 2,\n}\n\nexport function drawPoseLandmarks(\n  ctx: CanvasRenderingContext2D,\n  landmarks: PosePoint[],\n  options: DrawingOptions = {}\n): void {\n  const opts = { ...defaultDrawingOptions, ...options }\n\n  if (opts.showConnections) {\n    drawConnectors(ctx, landmarks, POSE_CONNECTIONS, {\n      color: opts.connectionColor,\n      lineWidth: opts.lineWidth,\n    })\n  }\n\n  if (opts.showLandmarks) {\n    drawLandmarks(ctx, landmarks, {\n      color: opts.landmarkColor,\n      radius: opts.landmarkRadius,\n      lineWidth: opts.lineWidth,\n    })\n  }\n}\n\nexport function drawAngle(\n  ctx: CanvasRenderingContext2D,\n  p1: PosePoint,\n  p2: PosePoint,\n  p3: PosePoint,\n  angle: number,\n  canvasWidth: number,\n  canvasHeight: number,\n  options: DrawingOptions = {}\n): void {\n  const opts = { ...defaultDrawingOptions, ...options }\n\n  const x1 = p1.x * canvasWidth\n  const y1 = p1.y * canvasHeight\n  const x2 = p2.x * canvasWidth\n  const y2 = p2.y * canvasHeight\n  const x3 = p3.x * canvasWidth\n  const y3 = p3.y * canvasHeight\n\n  ctx.save()\n  ctx.strokeStyle = opts.angleColor\n  ctx.lineWidth = opts.lineWidth\n  ctx.fillStyle = opts.angleColor\n  ctx.font = '16px Arial'\n\n  ctx.beginPath()\n  ctx.moveTo(x1, y1)\n  ctx.lineTo(x2, y2)\n  ctx.lineTo(x3, y3)\n  ctx.stroke()\n\n  const arcRadius = 30\n  const angle1 = Math.atan2(y1 - y2, x1 - x2)\n  const angle2 = Math.atan2(y3 - y2, x3 - x2)\n\n  ctx.beginPath()\n  ctx.arc(x2, y2, arcRadius, angle1, angle2, false)\n  ctx.stroke()\n\n  const textX = x2 + Math.cos((angle1 + angle2) / 2) * (arcRadius + 20)\n  const textY = y2 + Math.sin((angle1 + angle2) / 2) * (arcRadius + 20)\n  ctx.fillText(`${angle.toFixed(1)}°`, textX, textY)\n\n  ctx.restore()\n}\n\nexport function clearCanvas(ctx: CanvasRenderingContext2D): void {\n  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)\n}\n\nexport function resizeCanvas(\n  canvas: HTMLCanvasElement,\n  width: number,\n  height: number\n): void {\n  canvas.width = width\n  canvas.height = height\n}\n"],"names":["defaultDrawingOptions","drawPoseLandmarks","ctx","landmarks","options","opts","drawConnectors","POSE_CONNECTIONS","drawLandmarks","drawAngle","p1","p2","p3","angle","canvasWidth","canvasHeight","x1","y1","x2","y2","x3","y3","arcRadius","angle1","angle2","textX","textY","clearCanvas","resizeCanvas","canvas","width","height"],"mappings":";;AAeO,MAAMA,IAAkD;AAAA,EAC7D,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,WAAW;AACb;AAEO,SAASC,EACdC,GACAC,GACAC,IAA0B,CAAA,GACpB;AACN,QAAMC,IAAO,EAAE,GAAGL,GAAuB,GAAGI,EAAA;AAE5C,EAAIC,EAAK,mBACPC,iBAAeJ,GAAKC,GAAWI,oBAAkB;AAAA,IAC/C,OAAOF,EAAK;AAAA,IACZ,WAAWA,EAAK;AAAA,EAAA,CACjB,GAGCA,EAAK,iBACPG,EAAAA,cAAcN,GAAKC,GAAW;AAAA,IAC5B,OAAOE,EAAK;AAAA,IACZ,QAAQA,EAAK;AAAA,IACb,WAAWA,EAAK;AAAA,EAAA,CACjB;AAEL;AAEO,SAASI,EACdP,GACAQ,GACAC,GACAC,GACAC,GACAC,GACAC,GACAX,IAA0B,IACpB;AACN,QAAMC,IAAO,EAAE,GAAGL,GAAuB,GAAGI,EAAA,GAEtCY,IAAKN,EAAG,IAAII,GACZG,IAAKP,EAAG,IAAIK,GACZG,IAAKP,EAAG,IAAIG,GACZK,IAAKR,EAAG,IAAII,GACZK,IAAKR,EAAG,IAAIE,GACZO,IAAKT,EAAG,IAAIG;AAElB,EAAAb,EAAI,KAAA,GACJA,EAAI,cAAcG,EAAK,YACvBH,EAAI,YAAYG,EAAK,WACrBH,EAAI,YAAYG,EAAK,YACrBH,EAAI,OAAO,cAEXA,EAAI,UAAA,GACJA,EAAI,OAAOc,GAAIC,CAAE,GACjBf,EAAI,OAAOgB,GAAIC,CAAE,GACjBjB,EAAI,OAAOkB,GAAIC,CAAE,GACjBnB,EAAI,OAAA;AAEJ,QAAMoB,IAAY,IACZC,IAAS,KAAK,MAAMN,IAAKE,GAAIH,IAAKE,CAAE,GACpCM,IAAS,KAAK,MAAMH,IAAKF,GAAIC,IAAKF,CAAE;AAE1C,EAAAhB,EAAI,UAAA,GACJA,EAAI,IAAIgB,GAAIC,GAAIG,GAAWC,GAAQC,GAAQ,EAAK,GAChDtB,EAAI,OAAA;AAEJ,QAAMuB,IAAQP,IAAK,KAAK,KAAKK,IAASC,KAAU,CAAC,KAAKF,IAAY,KAC5DI,IAAQP,IAAK,KAAK,KAAKI,IAASC,KAAU,CAAC,KAAKF,IAAY;AAClE,EAAApB,EAAI,SAAS,GAAGW,EAAM,QAAQ,CAAC,CAAC,KAAKY,GAAOC,CAAK,GAEjDxB,EAAI,QAAA;AACN;AAEO,SAASyB,EAAYzB,GAAqC;AAC/D,EAAAA,EAAI,UAAU,GAAG,GAAGA,EAAI,OAAO,OAAOA,EAAI,OAAO,MAAM;AACzD;AAEO,SAAS0B,EACdC,GACAC,GACAC,GACM;AACN,EAAAF,EAAO,QAAQC,GACfD,EAAO,SAASE;AAClB;"}