tktechnico-react-face-detection 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,156 @@
+# @tktechnico/react-face-detection
+
+A self-contained face detection component for React and Ionic applications. Uses TensorFlow.js with BlazeFace model for real-time face detection with native camera support via Capacitor.
+
+## Features
+
+- 🎯 **Real-time Face Detection** - Uses BlazeFace model for fast, accurate face detection
+- 📱 **Native Camera Support** - Works with Capacitor for iOS and Android
+- 🎨 **Visual Feedback** - Bounding box overlay with confidence scores
+- ⚡ **Offline Ready** - Model runs locally after initial download
+- 🔧 **Highly Configurable** - Customize thresholds, colors, and behavior
+- 📦 **Zero Config** - Works out of the box with sensible defaults
+
+## Installation
+
+```bash
+npm install @tktechnico/react-face-detection
+```
+
+### Peer Dependencies
+
+```bash
+npm install react react-dom
+```
+
+### Required Dependencies (installed automatically)
+
+- `@tensorflow/tfjs` - TensorFlow.js runtime
+- `@tensorflow-models/blazeface` - Face detection model
+- `@capacitor/camera` - Native camera access
+
+## Quick Start
+
+```tsx
+import { FaceDetector } from '@tktechnico/react-face-detection';
+
+function App() {
+  return (
+    <FaceDetector 
+      onDetectionComplete={(result) => {
+        if (result.success) {
+          console.log('Face detected with confidence:', result.confidence);
+        }
+      }}
+    />
+  );
+}
+```
+
+## API Reference
+
+### FaceDetector Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `confidenceThreshold` | `number` | `0.7` | Minimum confidence for detection (0-1) |
+| `maxImageSize` | `number` | `640` | Max image dimension for processing |
+| `showOverlay` | `boolean` | `true` | Show face bounding box overlay |
+| `showResult` | `boolean` | `true` | Show detection result message |
+| `defaultFacing` | `'front' \| 'rear'` | `'front'` | Default camera direction |
+| `allowCameraSwitch` | `boolean` | `true` | Allow switching cameras |
+| `quality` | `number` | `90` | Image quality (1-100) |
+| `onDetectionComplete` | `(result: DetectionResult) => void` | - | Called when detection completes |
+| `onError` | `(error: string) => void` | - | Called on error |
+| `className` | `string` | `''` | Additional CSS classes |
+
+### DetectionResult Type
+
+```typescript
+interface DetectionResult {
+  success: boolean;
+  face: FaceDetection | null;
+  confidence: number;
+  isLowConfidence: boolean;
+  errorMessage: string | null;
+}
+
+interface FaceDetection {
+  topLeft: [number, number];
+  bottomRight: [number, number];
+  probability: number;
+  landmarks?: number[][];
+}
+```
+
+## Individual Components
+
+You can also use individual components for more control:
+
+```tsx
+import { 
+  useFaceDetectionCore,
+  ImagePreviewWithOverlay,
+  DetectionResultDisplay,
+  CaptureButton,
+  LoadingState
+} from '@tktechnico/react-face-detection';
+
+function CustomFaceDetector() {
+  const { isModelLoading, modelError, detectFace, retryModelLoad } = useFaceDetectionCore({
+    confidenceThreshold: 0.8,
+  });
+
+  // Build your own UI with these components
+  return (
+    <div>
+      {isModelLoading && <LoadingState isLoading={true} error={null} onRetry={retryModelLoad} />}
+      {/* ... */}
+    </div>
+  );
+}
+```
+
+## Platform Setup
+
+### iOS
+
+Add to `Info.plist`:
+
+```xml
+<key>NSCameraUsageDescription</key>
+<string>This app needs camera access for face detection.</string>
+<key>NSPhotoLibraryUsageDescription</key>
+<string>This app needs photo library access.</string>
+```
+
+### Android
+
+Add to `AndroidManifest.xml`:
+
+```xml
+<uses-permission android:name="android.permission.CAMERA" />
+```
+
+## Usage with Ionic
+
+```tsx
+import { IonPage, IonContent } from '@ionic/react';
+import { FaceDetector } from '@tktechnico/react-face-detection';
+
+function FaceDetectionPage() {
+  return (
+    <IonPage>
+      <IonContent>
+        <FaceDetector 
+          onDetectionComplete={(result) => console.log(result)}
+        />
+      </IonContent>
+    </IonPage>
+  );
+}
+```
+
+## License
+
+MIT

package/dist/components/CaptureButton.d.ts

@@ -0,0 +1,15 @@
+type CameraFacing = 'front' | 'rear';
+interface CaptureButtonProps {
+    onImageCaptured: (imageDataUrl: string) => void;
+    isProcessing?: boolean;
+    showRetake?: boolean;
+    onRetake?: () => void;
+    defaultFacing?: CameraFacing;
+    allowCameraSwitch?: boolean;
+    quality?: number;
+    onError?: (error: string) => void;
+    className?: string;
+}
+export declare function CaptureButton({ onImageCaptured, isProcessing, showRetake, onRetake, defaultFacing, allowCameraSwitch, quality, onError, className, }: CaptureButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CaptureButton.d.ts.map

package/dist/components/CaptureButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaptureButton.d.ts","sourceRoot":"","sources":["../../src/components/CaptureButton.tsx"],"names":[],"mappings":"AAGA,KAAK,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC,UAAU,kBAAkB;IAC1B,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,eAAe,EACf,YAAoB,EACpB,UAAkB,EAClB,QAAQ,EACR,aAAuB,EACvB,iBAAwB,EACxB,OAAY,EACZ,OAAO,EACP,SAAc,GACf,EAAE,kBAAkB,2CAyJpB"}

package/dist/components/DetectionResultDisplay.d.ts

@@ -0,0 +1,11 @@
+import type { DetectionResult } from '../types';
+interface DetectionResultDisplayProps {
+    result: DetectionResult | null;
+    className?: string;
+    successColor?: string;
+    warningColor?: string;
+    errorColor?: string;
+}
+export declare function DetectionResultDisplay({ result, className, successColor, warningColor, errorColor, }: DetectionResultDisplayProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=DetectionResultDisplay.d.ts.map

package/dist/components/DetectionResultDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetectionResultDisplay.d.ts","sourceRoot":"","sources":["../../src/components/DetectionResultDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,UAAU,2BAA2B;IACnC,MAAM,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,SAAc,EACd,YAAwB,EACxB,YAAwB,EACxB,UAAsB,GACvB,EAAE,2BAA2B,kDAuF7B"}

package/dist/components/FaceDetector.d.ts

@@ -0,0 +1,24 @@
+import type { FaceDetectorProps } from '../types';
+/**
+ * FaceDetector - A self-contained face detection component
+ *
+ * This component can be used in any React or Ionic application.
+ * It includes camera capture, face detection using TensorFlow.js BlazeFace,
+ * and visual feedback with bounding boxes.
+ *
+ * @example
+ * ```tsx
+ * import { FaceDetector } from '@tktechnico/react-face-detection';
+ *
+ * function App() {
+ *   return (
+ *     <FaceDetector
+ *       onDetectionComplete={(result) => console.log(result)}
+ *       confidenceThreshold={0.8}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function FaceDetector({ confidenceThreshold, maxImageSize, showOverlay, showResult, onDetectionComplete, onError, defaultFacing, allowCameraSwitch, quality, className, }: FaceDetectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FaceDetector.d.ts.map

package/dist/components/FaceDetector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FaceDetector.d.ts","sourceRoot":"","sources":["../../src/components/FaceDetector.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAkC,MAAM,UAAU,CAAC;AAElF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,YAAY,CAAC,EAE3B,mBAAyB,EACzB,YAAkB,EAClB,WAAkB,EAClB,UAAiB,EACjB,mBAAmB,EACnB,OAAO,EAEP,aAAuB,EACvB,iBAAwB,EACxB,OAAY,EAEZ,SAAc,GACf,EAAE,iBAAiB,2CAqHnB"}

package/dist/components/FaceOverlay.d.ts

@@ -0,0 +1,11 @@
+import type { FaceDetection } from '../types';
+interface FaceOverlayProps {
+    imageElement: HTMLImageElement | null;
+    face: FaceDetection | null;
+    containerWidth: number;
+    containerHeight: number;
+    color?: string;
+}
+export declare function FaceOverlay({ imageElement, face, containerWidth, containerHeight, color, }: FaceOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=FaceOverlay.d.ts.map

package/dist/components/FaceOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FaceOverlay.d.ts","sourceRoot":"","sources":["../../src/components/FaceOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,UAAU,gBAAgB;IACxB,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACtC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,WAAW,CAAC,EAC1B,YAAY,EACZ,IAAI,EACJ,cAAc,EACd,eAAe,EACf,KAAiB,GAClB,EAAE,gBAAgB,kDA6HlB"}

package/dist/components/ImagePreviewWithOverlay.d.ts

@@ -0,0 +1,13 @@
+import type { FaceDetection } from '../types';
+interface ImagePreviewWithOverlayProps {
+    imageSrc: string | null;
+    face: FaceDetection | null;
+    onImageLoad: (img: HTMLImageElement) => void;
+    showOverlay?: boolean;
+    overlayColor?: string;
+    placeholderText?: string;
+    className?: string;
+}
+export declare function ImagePreviewWithOverlay({ imageSrc, face, onImageLoad, showOverlay, overlayColor, placeholderText, className, }: ImagePreviewWithOverlayProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ImagePreviewWithOverlay.d.ts.map

package/dist/components/ImagePreviewWithOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePreviewWithOverlay.d.ts","sourceRoot":"","sources":["../../src/components/ImagePreviewWithOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,UAAU,4BAA4B;IACpC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,WAAkB,EAClB,YAAwB,EACxB,eAAuD,EACvD,SAAc,GACf,EAAE,4BAA4B,2CAwG9B"}

package/dist/components/LoadingState.d.ts

@@ -0,0 +1,11 @@
+interface LoadingStateProps {
+    isLoading: boolean;
+    error: string | null;
+    onRetry: () => void;
+    loadingText?: string;
+    errorText?: string;
+    className?: string;
+}
+export declare function LoadingState({ isLoading, error, onRetry, loadingText, errorText, className, }: LoadingStateProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=LoadingState.d.ts.map

package/dist/components/LoadingState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.d.ts","sourceRoot":"","sources":["../../src/components/LoadingState.tsx"],"names":[],"mappings":"AAEA,UAAU,iBAAiB;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,KAAK,EACL,OAAO,EACP,WAAsC,EACtC,SAAkC,EAClC,SAAc,GACf,EAAE,iBAAiB,kDAsEnB"}

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @tktechnico/react-face-detection
+ *
+ * A self-contained face detection solution for React and Ionic applications.
+ * Uses TensorFlow.js with BlazeFace model for real-time face detection.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { FaceDetector } from '@tktechnico/react-face-detection';
+ *
+ * function App() {
+ *   return <FaceDetector onDetectionComplete={(result) => console.log(result)} />;
+ * }
+ * ```
+ *
+ * @example Using individual components
+ * ```tsx
+ * import {
+ *   useFaceDetectionCore,
+ *   ImagePreviewWithOverlay,
+ *   DetectionResultDisplay,
+ *   CaptureButton
+ * } from '@lovable/react-face-detection';
+ * ```
+ */
+export { FaceDetector } from './components/FaceDetector';
+export { ImagePreviewWithOverlay } from './components/ImagePreviewWithOverlay';
+export { DetectionResultDisplay } from './components/DetectionResultDisplay';
+export { LoadingState } from './components/LoadingState';
+export { CaptureButton } from './components/CaptureButton';
+export { FaceOverlay } from './components/FaceOverlay';
+export { useFaceDetectionCore } from './useFaceDetectionCore';
+export type { FaceDetection, DetectionResult, FaceDetectorConfig, CameraConfig, FaceDetectorProps, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAGH,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,YAAY,EACV,aAAa,EACb,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,GAClB,MAAM,SAAS,CAAC"}