@nice2dev/ui-3d 1.3.15 → 1.3.16

package/dist/esm/dance/PoseDetector.js

@@ -1,291 +1,321 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { resolveCssColor } from '@nice2dev/ui';
-import { forwardRef, useRef, useImperativeHandle, useCallback, useEffect, useState } from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-
-// ── Standard keypoint definitions (COCO 17-keypoint model) ──────
+import { jsxs, jsx } from "react/jsx-runtime";
+import { resolveCssColor } from "@nice2dev/ui";
+import { forwardRef, useRef, useImperativeHandle, useCallback, useEffect, useState } from "react";
+import { useNiceTranslation } from "../core/i18n.js";
 const COCO_KEYPOINTS = [
-    'nose',
-    'left_eye',
-    'right_eye',
-    'left_ear',
-    'right_ear',
-    'left_shoulder',
-    'right_shoulder',
-    'left_elbow',
-    'right_elbow',
-    'left_wrist',
-    'right_wrist',
-    'left_hip',
-    'right_hip',
-    'left_knee',
-    'right_knee',
-    'left_ankle',
-    'right_ankle',
+  "nose",
+  "left_eye",
+  "right_eye",
+  "left_ear",
+  "right_ear",
+  "left_shoulder",
+  "right_shoulder",
+  "left_elbow",
+  "right_elbow",
+  "left_wrist",
+  "right_wrist",
+  "left_hip",
+  "right_hip",
+  "left_knee",
+  "right_knee",
+  "left_ankle",
+  "right_ankle"
 ];
 const SKELETON_CONNECTIONS = [
-    [0, 1],
-    [0, 2],
-    [1, 3],
-    [2, 4], // head
-    [5, 6], // shoulders
-    [5, 7],
-    [7, 9], // left arm
-    [6, 8],
-    [8, 10], // right arm
-    [5, 11],
-    [6, 12], // torso
-    [11, 12], // hips
-    [11, 13],
-    [13, 15], // left leg
-    [12, 14],
-    [14, 16], // right leg
+  [0, 1],
+  [0, 2],
+  [1, 3],
+  [2, 4],
+  // head
+  [5, 6],
+  // shoulders
+  [5, 7],
+  [7, 9],
+  // left arm
+  [6, 8],
+  [8, 10],
+  // right arm
+  [5, 11],
+  [6, 12],
+  // torso
+  [11, 12],
+  // hips
+  [11, 13],
+  [13, 15],
+  // left leg
+  [12, 14],
+  [14, 16]
+  // right leg
 ];
-/** A keypoint the detector reported without a score counts as found. */
-const confidenceOf = (kp) => { var _a; return (_a = kp.confidence) !== null && _a !== void 0 ? _a : 1; };
-// ── Hook: usePoseDetection ──────────────────────────────────────
+const confidenceOf = (kp) => kp.confidence ?? 1;
 function usePoseDetection(config = {}) {
-    // The detection loop outlives renders: it reads the latest settings from here.
-    const configRef = useRef(config);
-    useEffect(() => {
-        configRef.current = config;
+  const configRef = useRef(config);
+  useEffect(() => {
+    configRef.current = config;
+  });
+  const [isDetecting, setIsDetecting] = useState(false);
+  const latestFrameRef = useRef(null);
+  const frameIndexRef = useRef(0);
+  const rafRef = useRef(0);
+  const streamRef = useRef(null);
+  const videoRef = useRef(null);
+  const callbackRef = useRef(null);
+  const errorRef = useRef(null);
+  const startedAtRef = useRef(0);
+  const lastRunRef = useRef(-Infinity);
+  const busyRef = useRef(false);
+  const runRef = useRef(0);
+  const stop = useCallback(() => {
+    runRef.current += 1;
+    cancelAnimationFrame(rafRef.current);
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+    if (videoRef.current) {
+      videoRef.current.srcObject = null;
+    }
+    setIsDetecting(false);
+  }, []);
+  const processFrame = useCallback(() => {
+    rafRef.current = requestAnimationFrame(processFrame);
+    const video = videoRef.current;
+    const { detector, maxPersons = 1, minConfidence = 0.5, targetFps = 30 } = configRef.current;
+    if (!detector || !video || video.readyState < 2 || busyRef.current) {
+      return;
+    }
+    const now = performance.now();
+    if (now - lastRunRef.current < 1e3 / targetFps) {
+      return;
+    }
+    lastRunRef.current = now;
+    busyRef.current = true;
+    const run = runRef.current;
+    Promise.resolve().then(() => detector(video, now)).then((found) => {
+      if (run !== runRef.current) {
+        return;
+      }
+      const frame = {
+        frame_index: frameIndexRef.current++,
+        timestamp_sec: (now - startedAtRef.current) / 1e3,
+        persons: found.filter((person) => person.keypoints.some((kp) => confidenceOf(kp) >= minConfidence)).slice(0, maxPersons)
+      };
+      latestFrameRef.current = frame;
+      callbackRef.current?.(frame);
+    }).catch((err) => {
+      if (run !== runRef.current) {
+        return;
+      }
+      stop();
+      errorRef.current?.(err instanceof Error ? err : new Error(String(err)));
+    }).finally(() => {
+      busyRef.current = false;
     });
-    const [isDetecting, setIsDetecting] = useState(false);
-    const latestFrameRef = useRef(null);
-    const frameIndexRef = useRef(0);
-    const rafRef = useRef(0);
-    const streamRef = useRef(null);
-    const videoRef = useRef(null);
-    const callbackRef = useRef(null);
-    const errorRef = useRef(null);
-    const startedAtRef = useRef(0);
-    const lastRunRef = useRef(-Infinity);
-    const busyRef = useRef(false);
-    // Bumped by start() and stop(): a detection that resolves after them is dropped.
-    const runRef = useRef(0);
-    const stop = useCallback(() => {
-        var _a;
+  }, [stop]);
+  const start = useCallback(
+    async (video, onFrame, onError) => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: { facingMode: "user", width: { ideal: 640 }, height: { ideal: 480 } }
+        });
+        streamRef.current = stream;
+        videoRef.current = video;
+        video.srcObject = stream;
+        await video.play();
+        callbackRef.current = onFrame ?? null;
+        errorRef.current = onError ?? null;
+        frameIndexRef.current = 0;
+        startedAtRef.current = performance.now();
+        lastRunRef.current = -Infinity;
         runRef.current += 1;
-        cancelAnimationFrame(rafRef.current);
-        (_a = streamRef.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((t) => t.stop());
-        streamRef.current = null;
-        if (videoRef.current) {
-            videoRef.current.srcObject = null;
+        if (!configRef.current.detector) {
+          console.warn(
+            "[NicePoseDetector] started without a `detector`: the camera runs, but no poses are detected."
+          );
         }
-        setIsDetecting(false);
-    }, []);
-    const processFrame = useCallback(() => {
+        setIsDetecting(true);
         rafRef.current = requestAnimationFrame(processFrame);
-        const video = videoRef.current;
-        const { detector, maxPersons = 1, minConfidence = 0.5, targetFps = 30 } = configRef.current;
-        if (!detector || !video || video.readyState < 2 || busyRef.current) {
-            return;
-        }
-        const now = performance.now();
-        if (now - lastRunRef.current < 1000 / targetFps) {
-            return;
-        }
-        lastRunRef.current = now;
-        busyRef.current = true;
-        const run = runRef.current;
-        Promise.resolve()
-            .then(() => detector(video, now))
-            .then((found) => {
-            var _a;
-            if (run !== runRef.current) {
-                return;
-            }
-            const frame = {
-                frame_index: frameIndexRef.current++,
-                timestamp_sec: (now - startedAtRef.current) / 1000,
-                persons: found
-                    .filter((person) => person.keypoints.some((kp) => confidenceOf(kp) >= minConfidence))
-                    .slice(0, maxPersons),
-            };
-            latestFrameRef.current = frame;
-            (_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef, frame);
-        })
-            .catch((err) => {
-            var _a;
-            if (run !== runRef.current) {
-                return;
-            }
-            stop();
-            (_a = errorRef.current) === null || _a === void 0 ? void 0 : _a.call(errorRef, err instanceof Error ? err : new Error(String(err)));
-        })
-            .finally(() => {
-            busyRef.current = false;
-        });
-    }, [stop]);
-    const start = useCallback(async (video, onFrame, onError) => {
-        try {
-            const stream = await navigator.mediaDevices.getUserMedia({
-                video: { facingMode: 'user', width: { ideal: 640 }, height: { ideal: 480 } },
-            });
-            streamRef.current = stream;
-            videoRef.current = video;
-            video.srcObject = stream;
-            await video.play();
-            callbackRef.current = onFrame !== null && onFrame !== void 0 ? onFrame : null;
-            errorRef.current = onError !== null && onError !== void 0 ? onError : null;
-            frameIndexRef.current = 0;
-            startedAtRef.current = performance.now();
-            lastRunRef.current = -Infinity;
-            runRef.current += 1;
-            if (!configRef.current.detector) {
-                console.warn('[NicePoseDetector] started without a `detector`: the camera runs, but no poses are detected.');
-            }
-            setIsDetecting(true);
-            rafRef.current = requestAnimationFrame(processFrame);
-        }
-        catch (err) {
-            throw new Error(`Camera access failed: ${err instanceof Error ? err.message : String(err)}`);
-        }
-    }, [processFrame]);
-    useEffect(() => () => {
-        stop();
-    }, [stop]);
-    return { start, stop, isDetecting, getLatestFrame: () => latestFrameRef.current };
+      } catch (err) {
+        throw new Error(
+          `Camera access failed: ${err instanceof Error ? err.message : String(err)}`
+        );
+      }
+    },
+    [processFrame]
+  );
+  useEffect(
+    () => () => {
+      stop();
+    },
+    [stop]
+  );
+  return { start, stop, isDetecting, getLatestFrame: () => latestFrameRef.current };
 }
-// ── Component: PoseDetector ─────────────────────────────────────
-const NicePoseDetector = /* @__PURE__ */ forwardRef(function NicePoseDetector(props, ref) {
-    const { t } = useNiceTranslation();
-    const { onFrame, onStart, onStop, onError, className, style, width = 640, height = 480, mirror = true, showSkeleton = true, showConfidence = false, ...config } = props;
-    const videoRef = useRef(null);
-    const canvasRef = useRef(null);
-    const detection = usePoseDetection(config);
-    useImperativeHandle(ref, () => ({
-        start: handleStart,
-        stop: handleStop,
-        getLatestFrame: detection.getLatestFrame,
-        get isDetecting() {
-            return detection.isDetecting;
-        },
-    }));
-    const drawSkeleton = useCallback((frame) => {
-        var _a;
-        const ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-        if (!ctx || !canvasRef.current) {
-            return;
-        }
-        ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-        // Keypoints are in video pixels; the video fills the box with object-fit: cover.
-        const video = videoRef.current;
-        const videoW = (video === null || video === void 0 ? void 0 : video.videoWidth) || width;
-        const videoH = (video === null || video === void 0 ? void 0 : video.videoHeight) || height;
-        const scale = Math.max(width / videoW, height / videoH);
-        const offsetX = (width - videoW * scale) / 2;
-        const offsetY = (height - videoH * scale) / 2;
-        const at = (kp) => [
-            kp.x * scale + offsetX,
-            kp.y * scale + offsetY,
-        ];
-        for (const person of frame.persons) {
-            const kps = person.keypoints;
-            const byName = new Map(kps.map((kp) => [kp.name, kp]));
-            // Draw connections
-            if (showSkeleton) {
-                ctx.strokeStyle = resolveCssColor('var(--nice-success, #00ff88)', ctx.canvas);
-                ctx.lineWidth = 2;
-                for (const [a, b] of SKELETON_CONNECTIONS) {
-                    const ka = byName.get(COCO_KEYPOINTS[a]);
-                    const kb = byName.get(COCO_KEYPOINTS[b]);
-                    if (!ka || !kb) {
-                        continue;
-                    }
-                    if (confidenceOf(ka) < 0.3 || confidenceOf(kb) < 0.3) {
-                        continue;
-                    }
-                    ctx.beginPath();
-                    ctx.moveTo(...at(ka));
-                    ctx.lineTo(...at(kb));
-                    ctx.stroke();
-                }
-            }
-            // Draw keypoints
-            for (const kp of kps) {
-                if (confidenceOf(kp) < 0.3) {
-                    continue;
-                }
-                const radius = showConfidence ? 3 + confidenceOf(kp) * 5 : 4;
-                ctx.fillStyle = resolveCssColor(showConfidence
-                    ? `rgba(0, 255, 136, ${confidenceOf(kp)})`
-                    : 'var(--nice-success, #00ff88)', ctx.canvas);
-                ctx.beginPath();
-                ctx.arc(...at(kp), radius, 0, 2 * Math.PI);
-                ctx.fill();
+const NicePoseDetector = /* @__PURE__ */ forwardRef(function NicePoseDetector2(props, ref) {
+  const { t } = useNiceTranslation();
+  const {
+    onFrame,
+    onStart,
+    onStop,
+    onError,
+    className,
+    style,
+    width = 640,
+    height = 480,
+    mirror = true,
+    showSkeleton = true,
+    showConfidence = false,
+    ...config
+  } = props;
+  const videoRef = useRef(null);
+  const canvasRef = useRef(null);
+  const detection = usePoseDetection(config);
+  useImperativeHandle(ref, () => ({
+    start: handleStart,
+    stop: handleStop,
+    getLatestFrame: detection.getLatestFrame,
+    get isDetecting() {
+      return detection.isDetecting;
+    }
+  }));
+  const drawSkeleton = useCallback(
+    (frame) => {
+      const ctx = canvasRef.current?.getContext("2d");
+      if (!ctx || !canvasRef.current) {
+        return;
+      }
+      ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+      const video = videoRef.current;
+      const videoW = video?.videoWidth || width;
+      const videoH = video?.videoHeight || height;
+      const scale = Math.max(width / videoW, height / videoH);
+      const offsetX = (width - videoW * scale) / 2;
+      const offsetY = (height - videoH * scale) / 2;
+      const at = (kp) => [
+        kp.x * scale + offsetX,
+        kp.y * scale + offsetY
+      ];
+      for (const person of frame.persons) {
+        const kps = person.keypoints;
+        const byName = new Map(kps.map((kp) => [kp.name, kp]));
+        if (showSkeleton) {
+          ctx.strokeStyle = resolveCssColor("var(--nice-success, #00ff88)", ctx.canvas);
+          ctx.lineWidth = 2;
+          for (const [a, b] of SKELETON_CONNECTIONS) {
+            const ka = byName.get(COCO_KEYPOINTS[a]);
+            const kb = byName.get(COCO_KEYPOINTS[b]);
+            if (!ka || !kb) {
+              continue;
             }
-        }
-    }, [showSkeleton, showConfidence, width, height]);
-    // The detection loop is started once; it reaches this render's drawing and callbacks here.
-    const latestRef = useRef({ drawSkeleton, onFrame, onError });
-    useEffect(() => {
-        latestRef.current = { drawSkeleton, onFrame, onError };
-    });
-    const handleFrame = useCallback((frame) => {
-        var _a, _b;
-        latestRef.current.drawSkeleton(frame);
-        (_b = (_a = latestRef.current).onFrame) === null || _b === void 0 ? void 0 : _b.call(_a, frame);
-    }, []);
-    const handleDetectorError = useCallback((error) => {
-        var _a, _b;
-        (_b = (_a = latestRef.current).onError) === null || _b === void 0 ? void 0 : _b.call(_a, error);
-    }, []);
-    const handleStart = useCallback(async () => {
-        try {
-            if (videoRef.current) {
-                await detection.start(videoRef.current, handleFrame, handleDetectorError);
-                onStart === null || onStart === void 0 ? void 0 : onStart();
+            if (confidenceOf(ka) < 0.3 || confidenceOf(kb) < 0.3) {
+              continue;
             }
+            ctx.beginPath();
+            ctx.moveTo(...at(ka));
+            ctx.lineTo(...at(kb));
+            ctx.stroke();
+          }
         }
-        catch (err) {
-            onError === null || onError === void 0 ? void 0 : onError(err instanceof Error ? err : new Error(String(err)));
+        for (const kp of kps) {
+          if (confidenceOf(kp) < 0.3) {
+            continue;
+          }
+          const radius = showConfidence ? 3 + confidenceOf(kp) * 5 : 4;
+          ctx.fillStyle = resolveCssColor(
+            showConfidence ? `rgba(0, 255, 136, ${confidenceOf(kp)})` : "var(--nice-success, #00ff88)",
+            ctx.canvas
+          );
+          ctx.beginPath();
+          ctx.arc(...at(kp), radius, 0, 2 * Math.PI);
+          ctx.fill();
         }
-    }, [detection, handleFrame, handleDetectorError, onStart, onError]);
-    const handleStop = useCallback(() => {
-        var _a;
-        detection.stop();
-        const canvas = canvasRef.current;
-        (_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, canvas.width, canvas.height);
-        onStop === null || onStop === void 0 ? void 0 : onStop();
-    }, [detection, onStop]);
-    const containerStyle = {
-        position: 'relative',
+      }
+    },
+    [showSkeleton, showConfidence, width, height]
+  );
+  const latestRef = useRef({ drawSkeleton, onFrame, onError });
+  useEffect(() => {
+    latestRef.current = { drawSkeleton, onFrame, onError };
+  });
+  const handleFrame = useCallback((frame) => {
+    latestRef.current.drawSkeleton(frame);
+    latestRef.current.onFrame?.(frame);
+  }, []);
+  const handleDetectorError = useCallback((error) => {
+    latestRef.current.onError?.(error);
+  }, []);
+  const handleStart = useCallback(async () => {
+    try {
+      if (videoRef.current) {
+        await detection.start(videoRef.current, handleFrame, handleDetectorError);
+        onStart?.();
+      }
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  }, [detection, handleFrame, handleDetectorError, onStart, onError]);
+  const handleStop = useCallback(() => {
+    detection.stop();
+    const canvas = canvasRef.current;
+    canvas?.getContext("2d")?.clearRect(0, 0, canvas.width, canvas.height);
+    onStop?.();
+  }, [detection, onStop]);
+  const containerStyle = {
+    position: "relative",
+    width,
+    height,
+    overflow: "hidden",
+    borderRadius: 8,
+    background: "var(--nice-bg-primary, #111)",
+    ...style
+  };
+  const videoStyle = {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    transform: mirror ? "scaleX(-1)" : void 0
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: containerStyle, children: [
+    /* @__PURE__ */ jsx("video", { ref: videoRef, style: videoStyle, playsInline: true, muted: true }),
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
         width,
         height,
-        overflow: 'hidden',
-        borderRadius: 8,
-        background: 'var(--nice-bg-primary, #111)',
-        ...style,
-    };
-    const videoStyle = {
-        width: '100%',
-        height: '100%',
-        objectFit: 'cover',
-        transform: mirror ? 'scaleX(-1)' : undefined,
-    };
-    return (jsxs("div", { className: className, style: containerStyle, children: [jsx("video", { ref: videoRef, style: videoStyle, playsInline: true, muted: true }), jsx("canvas", { ref: canvasRef, width: width, height: height, style: {
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                    height: '100%',
-                    pointerEvents: 'none',
-                    transform: mirror ? 'scaleX(-1)' : undefined,
-                } }), !detection.isDetecting && (jsx("button", { onClick: handleStart, style: {
-                    position: 'absolute',
-                    top: '50%',
-                    left: '50%',
-                    transform: 'translate(-50%, -50%)',
-                    padding: '12px 24px',
-                    borderRadius: 8,
-                    background: 'var(--nice-danger, #e94560)',
-                    color: 'var(--nice-text-on-primary, #fff)',
-                    border: 'none',
-                    cursor: 'pointer',
-                    fontSize: 14,
-                    fontWeight: 600,
-                }, children: t('poseDetector.startCamera', 'Start Camera') }))] }));
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          pointerEvents: "none",
+          transform: mirror ? "scaleX(-1)" : void 0
+        }
+      }
+    ),
+    !detection.isDetecting && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleStart,
+        style: {
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          padding: "12px 24px",
+          borderRadius: 8,
+          background: "var(--nice-danger, #e94560)",
+          color: "var(--nice-text-on-primary, #fff)",
+          border: "none",
+          cursor: "pointer",
+          fontSize: 14,
+          fontWeight: 600
+        },
+        children: t("poseDetector.startCamera", "Start Camera")
+      }
+    )
+  ] });
 });
-
-export { NicePoseDetector, usePoseDetection };
+export {
+  NicePoseDetector,
+  usePoseDetection
+};