tktechnico-react-face-detection 1.0.0

package/dist/index.mjs

@@ -0,0 +1,751 @@
+// src/components/FaceDetector.tsx
+import { useState as useState4, useCallback as useCallback4 } from "react";
+
+// src/useFaceDetectionCore.ts
+import { useState, useEffect, useCallback, useRef } from "react";
+import * as tf from "@tensorflow/tfjs";
+import * as blazeface from "@tensorflow-models/blazeface";
+var DEFAULT_CONFIDENCE_THRESHOLD = 0.7;
+var DEFAULT_MAX_IMAGE_SIZE = 640;
+function useFaceDetectionCore(options = {}) {
+  const {
+    confidenceThreshold = DEFAULT_CONFIDENCE_THRESHOLD,
+    maxImageSize = DEFAULT_MAX_IMAGE_SIZE
+  } = options;
+  const [isModelLoading, setIsModelLoading] = useState(true);
+  const [modelError, setModelError] = useState(null);
+  const modelRef = useRef(null);
+  const loadModel = useCallback(async () => {
+    try {
+      setIsModelLoading(true);
+      setModelError(null);
+      await tf.ready();
+      const model = await blazeface.load();
+      modelRef.current = model;
+      console.log("BlazeFace model loaded successfully");
+      setIsModelLoading(false);
+    } catch (error) {
+      console.error("Failed to load face detection model:", error);
+      setModelError("Failed to load face detection model. Please check your connection and try again.");
+      setIsModelLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    loadModel();
+  }, [loadModel]);
+  const detectFace = useCallback(async (imageElement) => {
+    if (!modelRef.current) {
+      return {
+        success: false,
+        face: null,
+        confidence: 0,
+        isLowConfidence: false,
+        errorMessage: "Face detection model not loaded"
+      };
+    }
+    try {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        throw new Error("Could not get canvas context");
+      }
+      let width = imageElement.naturalWidth;
+      let height = imageElement.naturalHeight;
+      if (width > height && width > maxImageSize) {
+        height = height / width * maxImageSize;
+        width = maxImageSize;
+      } else if (height > maxImageSize) {
+        width = width / height * maxImageSize;
+        height = maxImageSize;
+      }
+      canvas.width = width;
+      canvas.height = height;
+      ctx.drawImage(imageElement, 0, 0, width, height);
+      const predictions = await modelRef.current.estimateFaces(canvas, false);
+      if (predictions.length === 0) {
+        return {
+          success: false,
+          face: null,
+          confidence: 0,
+          isLowConfidence: false,
+          errorMessage: "No face detected. Please take a clear photo of your face."
+        };
+      }
+      const prediction = predictions[0];
+      const probability = Array.isArray(prediction.probability) ? prediction.probability[0] : prediction.probability;
+      const scaleX = imageElement.naturalWidth / width;
+      const scaleY = imageElement.naturalHeight / height;
+      const topLeft = prediction.topLeft;
+      const bottomRight = prediction.bottomRight;
+      const face = {
+        topLeft: [topLeft[0] * scaleX, topLeft[1] * scaleY],
+        bottomRight: [bottomRight[0] * scaleX, bottomRight[1] * scaleY],
+        probability,
+        landmarks: prediction.landmarks
+      };
+      const isLowConfidence = probability < confidenceThreshold;
+      return {
+        success: true,
+        face,
+        confidence: probability,
+        isLowConfidence,
+        errorMessage: isLowConfidence ? "Face detected but image quality is low. Please retake." : null
+      };
+    } catch (error) {
+      console.error("Face detection error:", error);
+      return {
+        success: false,
+        face: null,
+        confidence: 0,
+        isLowConfidence: false,
+        errorMessage: "An error occurred during face detection. Please try again."
+      };
+    }
+  }, [confidenceThreshold, maxImageSize]);
+  const retryModelLoad = useCallback(() => {
+    loadModel();
+  }, [loadModel]);
+  return {
+    isModelLoading,
+    modelError,
+    detectFace,
+    retryModelLoad
+  };
+}
+
+// src/components/ImagePreviewWithOverlay.tsx
+import { useState as useState2, useRef as useRef3, useEffect as useEffect3, useCallback as useCallback2 } from "react";
+
+// src/components/FaceOverlay.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { jsx } from "react/jsx-runtime";
+function FaceOverlay({
+  imageElement,
+  face,
+  containerWidth,
+  containerHeight,
+  color = "#22c55e"
+}) {
+  const canvasRef = useRef2(null);
+  useEffect2(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !imageElement || !face) {
+      if (canvas) {
+        const ctx2 = canvas.getContext("2d");
+        if (ctx2) {
+          ctx2.clearRect(0, 0, canvas.width, canvas.height);
+        }
+      }
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const imageAspect = imageElement.naturalWidth / imageElement.naturalHeight;
+    const containerAspect = containerWidth / containerHeight;
+    let displayWidth;
+    let displayHeight;
+    let offsetX = 0;
+    let offsetY = 0;
+    if (imageAspect > containerAspect) {
+      displayWidth = containerWidth;
+      displayHeight = containerWidth / imageAspect;
+      offsetY = (containerHeight - displayHeight) / 2;
+    } else {
+      displayHeight = containerHeight;
+      displayWidth = containerHeight * imageAspect;
+      offsetX = (containerWidth - displayWidth) / 2;
+    }
+    canvas.width = containerWidth;
+    canvas.height = containerHeight;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    const scaleX = displayWidth / imageElement.naturalWidth;
+    const scaleY = displayHeight / imageElement.naturalHeight;
+    const x1 = face.topLeft[0] * scaleX + offsetX;
+    const y1 = face.topLeft[1] * scaleY + offsetY;
+    const x2 = face.bottomRight[0] * scaleX + offsetX;
+    const y2 = face.bottomRight[1] * scaleY + offsetY;
+    const boxWidth = x2 - x1;
+    const boxHeight = y2 - y1;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 3;
+    ctx.strokeRect(x1, y1, boxWidth, boxHeight);
+    const confidenceText = `Confidence: ${Math.round(face.probability * 100)}%`;
+    ctx.font = "bold 14px system-ui, sans-serif";
+    const textMetrics = ctx.measureText(confidenceText);
+    const textPadding = 6;
+    const labelHeight = 24;
+    const labelWidth = textMetrics.width + textPadding * 2;
+    const labelX = x1;
+    const labelY = Math.max(y1 - labelHeight - 4, 4);
+    ctx.fillStyle = color;
+    ctx.fillRect(labelX, labelY, labelWidth, labelHeight);
+    ctx.fillStyle = "#ffffff";
+    ctx.textBaseline = "middle";
+    ctx.fillText(confidenceText, labelX + textPadding, labelY + labelHeight / 2);
+    const cornerLength = Math.min(20, boxWidth * 0.2, boxHeight * 0.2);
+    ctx.lineWidth = 4;
+    ctx.strokeStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(x1, y1 + cornerLength);
+    ctx.lineTo(x1, y1);
+    ctx.lineTo(x1 + cornerLength, y1);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(x2 - cornerLength, y1);
+    ctx.lineTo(x2, y1);
+    ctx.lineTo(x2, y1 + cornerLength);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(x1, y2 - cornerLength);
+    ctx.lineTo(x1, y2);
+    ctx.lineTo(x1 + cornerLength, y2);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(x2 - cornerLength, y2);
+    ctx.lineTo(x2, y2);
+    ctx.lineTo(x2, y2 - cornerLength);
+    ctx.stroke();
+  }, [imageElement, face, containerWidth, containerHeight, color]);
+  if (!face) return null;
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        zIndex: 10,
+        width: containerWidth,
+        height: containerHeight
+      }
+    }
+  );
+}
+
+// src/components/ImagePreviewWithOverlay.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ImagePreviewWithOverlay({
+  imageSrc,
+  face,
+  onImageLoad,
+  showOverlay = true,
+  overlayColor = "#22c55e",
+  placeholderText = "Capture a photo to detect your face",
+  className = ""
+}) {
+  const containerRef = useRef3(null);
+  const imageRef = useRef3(null);
+  const [dimensions, setDimensions] = useState2({ width: 0, height: 0 });
+  const updateDimensions = useCallback2(() => {
+    if (containerRef.current) {
+      setDimensions({
+        width: containerRef.current.offsetWidth,
+        height: containerRef.current.offsetHeight
+      });
+    }
+  }, []);
+  useEffect3(() => {
+    updateDimensions();
+    window.addEventListener("resize", updateDimensions);
+    return () => window.removeEventListener("resize", updateDimensions);
+  }, [updateDimensions]);
+  const handleImageLoad = useCallback2(() => {
+    if (imageRef.current) {
+      onImageLoad(imageRef.current);
+      updateDimensions();
+    }
+  }, [onImageLoad, updateDimensions]);
+  const containerStyles = {
+    width: "100%",
+    aspectRatio: "3/4",
+    maxWidth: "24rem",
+    margin: "0 auto",
+    borderRadius: "0.75rem",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#f3f4f6",
+    border: imageSrc ? "none" : "2px dashed #d1d5db",
+    position: "relative",
+    overflow: "hidden"
+  };
+  if (!imageSrc) {
+    return /* @__PURE__ */ jsx2("div", { ref: containerRef, style: containerStyles, className, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "2rem" }, children: [
+      /* @__PURE__ */ jsx2("div", { style: {
+        width: "4rem",
+        height: "4rem",
+        margin: "0 auto 1rem",
+        borderRadius: "50%",
+        backgroundColor: "#e5e7eb",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }, children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          style: { width: "2rem", height: "2rem", color: "#9ca3af" },
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: [
+            /* @__PURE__ */ jsx2(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 1.5,
+                d: "M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 1.5,
+                d: "M15 13a3 3 0 11-6 0 3 3 0 016 0z"
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx2("p", { style: { color: "#6b7280", fontSize: "0.875rem" }, children: placeholderText })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, style: { ...containerStyles, border: "none" }, className, children: [
+    /* @__PURE__ */ jsx2(
+      "img",
+      {
+        ref: imageRef,
+        src: imageSrc,
+        alt: "Captured",
+        onLoad: handleImageLoad,
+        style: { width: "100%", height: "100%", objectFit: "contain" }
+      }
+    ),
+    showOverlay && /* @__PURE__ */ jsx2(
+      FaceOverlay,
+      {
+        imageElement: imageRef.current,
+        face,
+        containerWidth: dimensions.width,
+        containerHeight: dimensions.height,
+        color: overlayColor
+      }
+    )
+  ] });
+}
+
+// src/components/DetectionResultDisplay.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function DetectionResultDisplay({
+  result,
+  className = "",
+  successColor = "#22c55e",
+  warningColor = "#eab308",
+  errorColor = "#ef4444"
+}) {
+  if (!result) return null;
+  const baseStyles = {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.75rem",
+    borderRadius: "0.5rem",
+    padding: "1rem",
+    border: "1px solid"
+  };
+  if (result.success && !result.isLowConfidence) {
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className,
+        style: {
+          ...baseStyles,
+          backgroundColor: `${successColor}10`,
+          borderColor: `${successColor}33`
+        },
+        children: [
+          /* @__PURE__ */ jsx3("svg", { style: { width: "1.5rem", height: "1.5rem", flexShrink: 0 }, fill: successColor, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }),
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ jsx3("span", { style: { fontWeight: 600, color: "#111827" }, children: "Face detected successfully \u2705" }),
+            /* @__PURE__ */ jsxs2("span", { style: { fontSize: "0.875rem", color: "#6b7280" }, children: [
+              "Confidence: ",
+              Math.round(result.confidence * 100),
+              "%"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  if (result.success && result.isLowConfidence) {
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className,
+        style: {
+          ...baseStyles,
+          backgroundColor: `${warningColor}10`,
+          borderColor: `${warningColor}33`
+        },
+        children: [
+          /* @__PURE__ */ jsx3("svg", { style: { width: "1.5rem", height: "1.5rem", flexShrink: 0 }, fill: warningColor, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }),
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ jsx3("span", { style: { fontWeight: 600, color: "#111827" }, children: "Face detected but image quality is low" }),
+            /* @__PURE__ */ jsxs2("span", { style: { fontSize: "0.875rem", color: "#6b7280" }, children: [
+              "Confidence: ",
+              Math.round(result.confidence * 100),
+              "% \u2014 Please retake for better results."
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className,
+      style: {
+        ...baseStyles,
+        backgroundColor: `${errorColor}10`,
+        borderColor: `${errorColor}33`
+      },
+      children: [
+        /* @__PURE__ */ jsx3("svg", { style: { width: "1.5rem", height: "1.5rem", flexShrink: 0 }, fill: errorColor, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) }),
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ jsx3("span", { style: { fontWeight: 600, color: "#111827" }, children: "No face detected" }),
+          /* @__PURE__ */ jsx3("span", { style: { fontSize: "0.875rem", color: "#6b7280" }, children: result.errorMessage || "Please take a clear photo of your face." })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/LoadingState.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function LoadingState({
+  isLoading,
+  error,
+  onRetry,
+  loadingText = "Loading Face Detection",
+  errorText = "Failed to Load Model",
+  className = ""
+}) {
+  const containerStyles = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "1rem",
+    padding: "2rem"
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs3("div", { style: containerStyles, className, children: [
+      /* @__PURE__ */ jsx4("div", { style: {
+        width: "3rem",
+        height: "3rem",
+        border: "4px solid #3b82f6",
+        borderTopColor: "transparent",
+        borderRadius: "50%",
+        animation: "spin 1s linear infinite"
+      } }),
+      /* @__PURE__ */ jsx4("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }),
+      /* @__PURE__ */ jsxs3("div", { style: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx4("p", { style: { fontWeight: 600, color: "#111827" }, children: loadingText }),
+        /* @__PURE__ */ jsx4("p", { style: { fontSize: "0.875rem", color: "#6b7280" }, children: "Preparing AI model for offline use..." })
+      ] })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs3("div", { style: containerStyles, className, children: [
+      /* @__PURE__ */ jsx4("svg", { style: { width: "3rem", height: "3rem", color: "#ef4444" }, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) }),
+      /* @__PURE__ */ jsxs3("div", { style: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx4("p", { style: { fontWeight: 600, color: "#111827" }, children: errorText }),
+        /* @__PURE__ */ jsx4("p", { style: { fontSize: "0.875rem", color: "#6b7280", marginBottom: "1rem" }, children: error }),
+        /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            onClick: onRetry,
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              padding: "0.5rem 1rem",
+              backgroundColor: "#3b82f6",
+              color: "white",
+              borderRadius: "0.5rem",
+              border: "none",
+              cursor: "pointer",
+              fontSize: "0.875rem",
+              fontWeight: 500
+            },
+            children: [
+              /* @__PURE__ */ jsx4("svg", { style: { width: "1rem", height: "1rem" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }),
+              "Retry"
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+  return null;
+}
+
+// src/components/CaptureButton.tsx
+import { useState as useState3, useCallback as useCallback3 } from "react";
+import { Camera, CameraResultType, CameraSource, CameraDirection } from "@capacitor/camera";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function CaptureButton({
+  onImageCaptured,
+  isProcessing = false,
+  showRetake = false,
+  onRetake,
+  defaultFacing = "front",
+  allowCameraSwitch = true,
+  quality = 90,
+  onError,
+  className = ""
+}) {
+  const [isCapturing, setIsCapturing] = useState3(false);
+  const [cameraFacing, setCameraFacing] = useState3(defaultFacing);
+  const capturePhoto = useCallback3(async () => {
+    try {
+      setIsCapturing(true);
+      const photo = await Camera.getPhoto({
+        quality,
+        allowEditing: false,
+        resultType: CameraResultType.DataUrl,
+        source: CameraSource.Camera,
+        correctOrientation: true,
+        direction: cameraFacing === "front" ? CameraDirection.Front : CameraDirection.Rear
+      });
+      if (photo.dataUrl) {
+        onImageCaptured(photo.dataUrl);
+      }
+    } catch (error) {
+      console.error("Camera error:", error);
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      if (errorMessage.includes("denied") || errorMessage.includes("permission")) {
+        onError?.("Camera permission denied. Please enable camera access in your device settings.");
+      } else if (!errorMessage.includes("cancelled") && !errorMessage.includes("canceled")) {
+        onError?.("Unable to access camera. Please try again.");
+      }
+    } finally {
+      setIsCapturing(false);
+    }
+  }, [onImageCaptured, cameraFacing, quality, onError]);
+  const handleRetake = useCallback3(() => {
+    onRetake?.();
+    capturePhoto();
+  }, [onRetake, capturePhoto]);
+  const isDisabled = isCapturing || isProcessing;
+  const buttonBaseStyles = {
+    width: "100%",
+    maxWidth: "20rem",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "0.5rem",
+    padding: "0.75rem 1.5rem",
+    color: "white",
+    borderRadius: "0.5rem",
+    border: "none",
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    opacity: isDisabled ? 0.5 : 1,
+    fontSize: "1rem",
+    fontWeight: 500,
+    transition: "background-color 0.2s"
+  };
+  const toggleButtonStyles = (isActive) => ({
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "0.5rem",
+    padding: "0.5rem 1rem",
+    borderRadius: "0.5rem",
+    border: "1px solid",
+    backgroundColor: isActive ? "#3b82f6" : "white",
+    color: isActive ? "white" : "#374151",
+    borderColor: isActive ? "#3b82f6" : "#d1d5db",
+    cursor: "pointer",
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    transition: "all 0.2s"
+  });
+  return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem", width: "100%" }, className, children: [
+    allowCameraSwitch && /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "0.5rem", width: "100%", maxWidth: "20rem" }, children: [
+      /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          onClick: () => setCameraFacing("front"),
+          style: toggleButtonStyles(cameraFacing === "front"),
+          children: [
+            /* @__PURE__ */ jsx5("svg", { style: { width: "1rem", height: "1rem" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }),
+            "Selfie"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          onClick: () => setCameraFacing("rear"),
+          style: toggleButtonStyles(cameraFacing === "rear"),
+          children: [
+            /* @__PURE__ */ jsxs4("svg", { style: { width: "1rem", height: "1rem" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+              /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" }),
+              /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 13a3 3 0 11-6 0 3 3 0 016 0z" })
+            ] }),
+            "Rear"
+          ]
+        }
+      )
+    ] }),
+    showRetake ? /* @__PURE__ */ jsx5(
+      "button",
+      {
+        onClick: handleRetake,
+        disabled: isDisabled,
+        style: { ...buttonBaseStyles, backgroundColor: "#eab308" },
+        children: isCapturing ? /* @__PURE__ */ jsx5("div", { style: { width: "1.25rem", height: "1.25rem", border: "2px solid white", borderTopColor: "transparent", borderRadius: "50%", animation: "spin 1s linear infinite" } }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx5("svg", { style: { width: "1.25rem", height: "1.25rem" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }),
+          "Retake Photo"
+        ] })
+      }
+    ) : /* @__PURE__ */ jsx5(
+      "button",
+      {
+        onClick: capturePhoto,
+        disabled: isDisabled,
+        style: { ...buttonBaseStyles, backgroundColor: "#3b82f6" },
+        children: isCapturing ? /* @__PURE__ */ jsx5("div", { style: { width: "1.25rem", height: "1.25rem", border: "2px solid white", borderTopColor: "transparent", borderRadius: "50%", animation: "spin 1s linear infinite" } }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsxs4("svg", { style: { width: "1.25rem", height: "1.25rem" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" }),
+            /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 13a3 3 0 11-6 0 3 3 0 016 0z" })
+          ] }),
+          "Capture Photo"
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx5("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }),
+    isProcessing && /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", color: "#6b7280" }, children: [
+      /* @__PURE__ */ jsx5("div", { style: { width: "1rem", height: "1rem", border: "2px solid #3b82f6", borderTopColor: "transparent", borderRadius: "50%", animation: "spin 1s linear infinite" } }),
+      /* @__PURE__ */ jsx5("span", { children: "Analyzing face..." })
+    ] })
+  ] });
+}
+
+// src/components/FaceDetector.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function FaceDetector({
+  // Detection config
+  confidenceThreshold = 0.7,
+  maxImageSize = 640,
+  showOverlay = true,
+  showResult = true,
+  onDetectionComplete,
+  onError,
+  // Camera config
+  defaultFacing = "front",
+  allowCameraSwitch = true,
+  quality = 90,
+  // Styling
+  className = ""
+}) {
+  const [capturedImage, setCapturedImage] = useState4(null);
+  const [detectionResult, setDetectionResult] = useState4(null);
+  const [detectedFace, setDetectedFace] = useState4(null);
+  const [isProcessing, setIsProcessing] = useState4(false);
+  const { isModelLoading, modelError, detectFace, retryModelLoad } = useFaceDetectionCore({
+    confidenceThreshold,
+    maxImageSize
+  });
+  const handleImageCaptured = useCallback4((imageDataUrl) => {
+    setCapturedImage(imageDataUrl);
+    setDetectionResult(null);
+    setDetectedFace(null);
+  }, []);
+  const handleImageLoad = useCallback4(async (img) => {
+    setIsProcessing(true);
+    try {
+      const result = await detectFace(img);
+      setDetectionResult(result);
+      if (result.success && result.face) {
+        setDetectedFace(result.face);
+      } else {
+        setDetectedFace(null);
+      }
+      onDetectionComplete?.(result);
+    } catch (error) {
+      console.error("Detection error:", error);
+      onError?.("An error occurred during detection");
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [detectFace, onDetectionComplete, onError]);
+  const handleRetake = useCallback4(() => {
+    setCapturedImage(null);
+    setDetectionResult(null);
+    setDetectedFace(null);
+  }, []);
+  const handleCameraError = useCallback4((error) => {
+    onError?.(error);
+  }, [onError]);
+  const showRetakeButton = detectionResult !== null && (!detectionResult.success || detectionResult.isLowConfidence);
+  const containerStyles = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "1.5rem",
+    maxWidth: "32rem",
+    margin: "0 auto",
+    padding: "1rem 0"
+  };
+  return /* @__PURE__ */ jsxs5("div", { style: containerStyles, className, children: [
+    (isModelLoading || modelError) && /* @__PURE__ */ jsx6(
+      LoadingState,
+      {
+        isLoading: isModelLoading,
+        error: modelError,
+        onRetry: retryModelLoad
+      }
+    ),
+    !isModelLoading && !modelError && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx6(
+        ImagePreviewWithOverlay,
+        {
+          imageSrc: capturedImage,
+          face: detectedFace,
+          onImageLoad: handleImageLoad,
+          showOverlay
+        }
+      ),
+      showResult && detectionResult && /* @__PURE__ */ jsx6("div", { style: { width: "100%", maxWidth: "24rem" }, children: /* @__PURE__ */ jsx6(DetectionResultDisplay, { result: detectionResult }) }),
+      /* @__PURE__ */ jsx6("div", { style: { width: "100%", maxWidth: "24rem" }, children: /* @__PURE__ */ jsx6(
+        CaptureButton,
+        {
+          onImageCaptured: handleImageCaptured,
+          isProcessing,
+          showRetake: showRetakeButton,
+          onRetake: handleRetake,
+          defaultFacing,
+          allowCameraSwitch,
+          quality,
+          onError: handleCameraError
+        }
+      ) }),
+      !capturedImage && /* @__PURE__ */ jsx6("div", { style: { textAlign: "center", fontSize: "0.875rem", color: "#6b7280", padding: "0 1rem" }, children: /* @__PURE__ */ jsx6("p", { children: "Take a clear photo of your face. The app will detect your face and show a confidence score." }) })
+    ] })
+  ] });
+}
+export {
+  CaptureButton,
+  DetectionResultDisplay,
+  FaceDetector,
+  FaceOverlay,
+  ImagePreviewWithOverlay,
+  LoadingState,
+  useFaceDetectionCore
+};