facecog-liveness-showcase 0.0.1

package/.browserslistrc

@@ -0,0 +1,15 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.dev/reference/versions#browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+Chrome >=107
+Firefox >=106
+Edge >=107
+Safari >=16.1
+iOS >=16.1

package/.dockerignore

@@ -0,0 +1,48 @@
+# Dependencies
+node_modules
+npm-debug.log
+yarn-error.log
+
+# Build outputs
+dist
+www
+.angular
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Git
+.git
+.gitignore
+
+# Documentation
+README.md
+*.md
+
+# Docker
+Dockerfile
+docker-compose*.yml
+.dockerignore
+
+# Tests
+coverage
+*.spec.ts
+karma.conf.js
+e2e
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Logs
+logs
+*.log

package/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.eslintrc.json

@@ -0,0 +1,47 @@
+{
+  "root": true,
+  "ignorePatterns": ["projects/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": ["tsconfig.json"],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/prefer-standalone": "off",
+        "@angular-eslint/component-class-suffix": [
+          "error",
+          {
+            "suffixes": ["Page", "Component"]
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "rules": {}
+    }
+  ]
+}

package/.vercelignore

@@ -0,0 +1,7 @@
+node_modules
+.angular
+*.spec.ts
+*.md
+.git
+.gitignore
+karma.conf.js

package/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+       "Webnative.webnative"
+    ]
+}

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular/standalone"]
+}

package/DOCKER.md

@@ -0,0 +1,221 @@
+# Docker Setup for Selfie Liveness Verification
+
+This document provides instructions for running the Selfie Liveness Verification application using Docker.
+
+## Prerequisites
+
+- Docker Desktop installed (version 20.10+)
+- Docker Compose installed (version 2.0+)
+
+## Quick Start
+
+### Production Mode (Optimized Build)
+
+Build and run the production-optimized version with Nginx:
+
+```bash
+# Build and start the container
+docker-compose up --build
+
+# Or run in detached mode
+docker-compose up -d --build
+
+# Stop the container
+docker-compose down
+```
+
+**Access the application:** http://localhost:8080
+
+### Development Mode (Hot Reload)
+
+Build and run the development version with hot-reload:
+
+```bash
+# Build and start the development container
+docker-compose -f docker-compose.dev.yml up
+
+# Or run in detached mode
+docker-compose -f docker-compose.dev.yml up -d
+
+# Stop the container
+docker-compose -f docker-compose.dev.yml down
+```
+
+**Access the application:** http://localhost:8100
+
+## Docker Commands Reference
+
+### Build Commands
+
+```bash
+# Build production image
+docker-compose build
+
+# Build development image
+docker-compose -f docker-compose.dev.yml build
+
+# Rebuild without cache
+docker-compose build --no-cache
+```
+
+### Container Management
+
+```bash
+# View running containers
+docker ps
+
+# View container logs
+docker-compose logs -f
+
+# Stop all containers
+docker-compose down
+
+# Remove containers and volumes
+docker-compose down -v
+
+# Restart containers
+docker-compose restart
+```
+
+### Debugging
+
+```bash
+# Access container shell (production)
+docker exec -it selfie-liveness-production sh
+
+# Access container shell (development)
+docker exec -it selfie-liveness-development sh
+
+# View real-time logs
+docker-compose logs -f selfie-liveness-app
+```
+
+## Configuration
+
+### Port Configuration
+
+- **Production:** Port 8080 (mapped to container port 80)
+- **Development:** Port 8100 (mapped to container port 8100)
+
+To change ports, edit the `docker-compose.yml` or `docker-compose.dev.yml` files:
+
+```yaml
+ports:
+  - "YOUR_PORT:80"  # Change YOUR_PORT to desired port
+```
+
+### Camera Permissions
+
+The Nginx configuration includes proper headers for camera/microphone access:
+
+```
+Permissions-Policy: camera=*, microphone=*
+```
+
+Ensure you access the app via HTTPS in production or use localhost for camera permissions to work.
+
+## Architecture
+
+### Production Build (Multi-stage)
+
+1. **Stage 1 (Build):**
+   - Uses Node 18 Alpine
+   - Installs dependencies
+   - Builds production-optimized Angular bundle
+
+2. **Stage 2 (Serve):**
+   - Uses Nginx Alpine
+   - Serves static files
+   - Includes gzip compression
+   - Implements proper security headers
+
+### Development Build
+
+- Uses Node 18 Alpine
+- Mounts source code as volume for hot-reload
+- Runs Ionic serve with live-reload enabled
+
+## File Structure
+
+```
+.
+├── Dockerfile              # Production multi-stage build
+├── docker-compose.yml      # Production configuration
+├── docker-compose.dev.yml  # Development configuration
+├── nginx.conf              # Nginx web server configuration
+└── .dockerignore          # Files excluded from Docker build
+```
+
+## Troubleshooting
+
+### Issue: Camera not working in Docker
+
+**Solution:** Camera access requires:
+- HTTPS connection OR localhost
+- Proper browser permissions
+- Container must be accessed via http://localhost (not 0.0.0.0 or container IP)
+
+### Issue: Build fails with "npm ERR!"
+
+**Solution:**
+```bash
+# Clear Docker cache and rebuild
+docker-compose down -v
+docker system prune -a
+docker-compose build --no-cache
+```
+
+### Issue: Port already in use
+
+**Solution:**
+```bash
+# Find process using the port
+lsof -i :8080
+
+# Kill the process or change port in docker-compose.yml
+```
+
+### Issue: Hot-reload not working in development
+
+**Solution:**
+- Ensure volumes are properly mounted
+- Check file permissions
+- Restart the container
+
+## Production Deployment
+
+For production deployment:
+
+1. **Build the image:**
+   ```bash
+   docker build -t selfie-liveness:latest .
+   ```
+
+2. **Push to registry:**
+   ```bash
+   docker tag selfie-liveness:latest your-registry/selfie-liveness:latest
+   docker push your-registry/selfie-liveness:latest
+   ```
+
+3. **Deploy using Docker Compose or Kubernetes**
+
+## Security Considerations
+
+- Container runs as non-root user (Nginx default)
+- Security headers configured in nginx.conf
+- No sensitive data in environment variables
+- Dependencies installed from package-lock.json for reproducibility
+
+## Performance Optimization
+
+- Gzip compression enabled
+- Static asset caching (1 year)
+- Multi-stage build reduces final image size
+- Alpine base images for minimal footprint
+
+## Support
+
+For issues or questions:
+1. Check container logs: `docker-compose logs -f`
+2. Verify Docker installation: `docker --version`
+3. Ensure ports are not in use: `lsof -i :8080`

package/Dockerfile

@@ -0,0 +1,33 @@
+# Multi-stage build for Ionic Angular app
+# Stage 1: Build the application
+FROM node:20-alpine AS build
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy application files
+COPY . .
+
+# Build the application for production
+RUN npm run build --prod
+
+# Stage 2: Serve the application with Nginx
+FROM nginx:alpine
+
+# Copy custom nginx configuration
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Copy built application from build stage
+COPY --from=build /app/www /usr/share/nginx/html
+
+# Expose port 80
+EXPOSE 80
+
+# Start Nginx
+CMD ["nginx", "-g", "daemon off;"]

package/README.md

@@ -0,0 +1,268 @@
+# FaceCog Liveness Verification
+
+An Angular workspace containing a liveness verification library and a showcase demo application.
+
+## Project Structure
+
+```
+facecog-ionic-front/
+├── projects/
+│   ├── facecog-liveness-verification/        # @naniteninja/liveness-verification
+│   │   ├── src/lib/
+│   │   │   ├── models/
+│   │   │   │   ├── types/                    # Type definitions (one per file)
+│   │   │   │   │   ├── liveness-backend.type.ts
+│   │   │   │   │   ├── verification-flow-step.type.ts
+│   │   │   │   │   ├── liveness-action.type.ts
+│   │   │   │   │   ├── pose-category.type.ts
+│   │   │   │   │   ├── pose-difficulty.type.ts
+│   │   │   │   │   ├── detection-strategy.type.ts
+│   │   │   │   │   └── index.ts
+│   │   │   │   │
+│   │   │   │   ├── interfaces/               # Interface definitions (one per file)
+│   │   │   │   │   ├── liveness-verification-config.interface.ts
+│   │   │   │   │   ├── liveness-result.interface.ts
+│   │   │   │   │   ├── pose-definition.interface.ts
+│   │   │   │   │   ├── ... (13 more interfaces)
+│   │   │   │   │   └── index.ts
+│   │   │   │   │
+│   │   │   │   ├── constants/                # Constant values
+│   │   │   │   │   ├── default-liveness-config.constant.ts
+│   │   │   │   │   ├── pose-definitions.constant.ts
+│   │   │   │   │   └── index.ts
+│   │   │   │   │
+│   │   │   │   ├── utils/                    # Utility functions
+│   │   │   │   │   ├── pose.utils.ts
+│   │   │   │   │   └── index.ts
+│   │   │   │   │
+│   │   │   │   └── index.ts
+│   │   │   │
+│   │   │   ├── services/                     # Core services
+│   │   │   │   ├── backends/
+│   │   │   │   │   ├── backend-adapter.interface.ts
+│   │   │   │   │   └── mock-backend.service.ts
+│   │   │   │   ├── camera.service.ts
+│   │   │   │   ├── liveness-config.service.ts
+│   │   │   │   ├── pose-selection.service.ts
+│   │   │   │   └── video-recorder.service.ts
+│   │   │   │
+│   │   │   ├── liveness-verification.component.ts
+│   │   │   └── liveness-verification.module.ts
+│   │   │
+│   │   ├── src/public-api.ts
+│   │   ├── package.json
+│   │   ├── ng-package.json
+│   │   └── README.md
+│   │
+│   └── facecog-liveness-verification-test/   # Showcase Demo App
+│       └── src/
+│           ├── app/
+│           │   ├── liveness-verification/    # Full implementation
+│           │   ├── verification-demo/        # FaceTec demo
+│           │   └── home/                     # Home page
+│           ├── assets/
+│           ├── environments/
+│           └── theme/
+│
+├── dist/
+│   └── naniteninjas-liveness-verification/   # Built library
+│
+├── angular.json
+├── tsconfig.json
+└── package.json
+```
+
+## Quick Start
+
+### Install Dependencies
+
+```bash
+npm install
+```
+
+### Development Server
+
+```bash
+npm start
+```
+
+Starts `facecog-liveness-verification-test` on `http://localhost:4200`.
+
+### Build Library
+
+```bash
+npm run build:lib
+```
+
+Outputs to `dist/naniteninjas-liveness-verification/`.
+
+### Build Demo App
+
+```bash
+npm run build:prod
+```
+
+Outputs to `www/`.
+
+## Library Usage
+
+### Local Development (No Build Required)
+
+The workspace is configured with TypeScript path mapping:
+
+```json
+// tsconfig.json
+{
+  "paths": {
+    "@naniteninja/liveness-verification": [
+      "projects/facecog-liveness-verification/src/public-api.ts"
+    ]
+  }
+}
+```
+
+### Import Examples
+
+```typescript
+// Types (single export per file)
+import { LivenessBackend } from '@naniteninja/liveness-verification';
+import { VerificationFlowStep } from '@naniteninja/liveness-verification';
+import { PoseCategory } from '@naniteninja/liveness-verification';
+
+// Interfaces (single export per file)
+import { LivenessVerificationConfig } from '@naniteninja/liveness-verification';
+import { LivenessResult } from '@naniteninja/liveness-verification';
+import { PoseDefinition } from '@naniteninja/liveness-verification';
+
+// Constants
+import { DEFAULT_LIVENESS_CONFIG } from '@naniteninja/liveness-verification';
+import { POSE_DEFINITIONS } from '@naniteninja/liveness-verification';
+
+// Utils
+import { getPoseById, getPosesByCategory } from '@naniteninja/liveness-verification';
+
+// Services
+import { LivenessConfigService, PoseSelectionService } from '@naniteninja/liveness-verification';
+
+// Module/Component
+import { LivenessVerificationModule, provideLivenessVerification } from '@naniteninja/liveness-verification';
+```
+
+### Module-based Usage
+
+```typescript
+import { LivenessVerificationModule } from '@naniteninja/liveness-verification';
+
+@NgModule({
+  imports: [
+    LivenessVerificationModule.forRoot({
+      apiUrl: 'https://api.example.com',
+      backends: ['amazon', 'facetec']
+    })
+  ]
+})
+export class AppModule {}
+```
+
+### Standalone Usage
+
+```typescript
+import { provideLivenessVerification } from '@naniteninja/liveness-verification';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideLivenessVerification({ backends: ['mock'] })
+  ]
+});
+```
+
+### Template
+
+```html
+<facecog-liveness-verification
+  [pose]="5"
+  (verificationComplete)="onComplete($event)"
+  (verificationError)="onError($event)">
+</facecog-liveness-verification>
+```
+
+## Available Scripts
+
+| Script | Description |
+|--------|-------------|
+| `npm start` | Start the showcase demo app |
+| `npm run build` | Build the demo app |
+| `npm run build:prod` | Build demo app for production |
+| `npm run build:lib` | Build the library |
+| `npm run package` | Build and pack the library |
+| `npm run npm:pub` | Publish library to npm |
+| `npm run bump:lib` | Bump library version |
+| `npm run lint` | Lint the demo app |
+
+## Publishing
+
+```bash
+# Update version
+npm run bump:lib
+
+# Build and pack
+npm run package
+
+# Publish
+npm run npm:pub
+```
+
+## Code Organization Principles
+
+### Single Export Per File
+
+All types, interfaces, and enums follow the single-export-per-file pattern:
+
+```typescript
+// ✅ Good: types/liveness-backend.type.ts
+export type LivenessBackend = 'amazon' | 'openpose' | 'facetec' | 'azure' | 'mock';
+
+// ✅ Good: interfaces/liveness-result.interface.ts
+export interface LivenessResult {
+  success: boolean;
+  confidence: number;
+  // ...
+}
+```
+
+### Barrel Exports (index.ts)
+
+Each folder has an `index.ts` that re-exports its contents:
+
+```typescript
+// types/index.ts
+export { LivenessBackend } from './liveness-backend.type';
+export { VerificationFlowStep } from './verification-flow-step.type';
+// ...
+
+// models/index.ts
+export * from './types';
+export * from './interfaces';
+export * from './constants';
+export * from './utils';
+```
+
+## Features
+
+- **40+ Poses**: Face, head, hand, gesture, and combined poses
+- **Multi-Backend**: Amazon, FaceTec, OpenPose, Azure, Mock
+- **TensorFlow.js**: MoveNet for pose detection
+- **MediaPipe**: Face & Hand Landmarker
+- **Configurable**: Thresholds, retries, video recording
+
+## Tech Stack
+
+- Angular 20
+- Ionic 8
+- TensorFlow.js
+- MediaPipe
+- RxJS
+
+## License
+
+MIT