@jupitermetalabs/face-zk-sdk 0.3.1 → 0.3.3

package/assets/face-guidance/pose-guidance.js.txt

@@ -9,7 +9,7 @@ const arrowRight = document.getElementById('arrow_right');
 
 // Configuration
 let TARGET_POSE = { yaw: 0, pitch: 0, roll: 0 };
-let REQUIRED_STABLE_DURATION = 2000; // 2 seconds
+let REQUIRED_STABLE_DURATION = 1000; // 1 second
 let YAW_THRESHOLD = 6; // degrees
 let PITCH_THRESHOLD = 10; // degrees
 let GAZE_THRESHOLD = 0.3; // Deviation from center (0.5)

package/cli/copy-dist-assets.js

@@ -17,18 +17,17 @@
 "use strict";
 
 /**
- * Copies bundled WASM and worker assets into dist/assets/ after tsc compilation.
+ * Copies all bundled runtime assets into dist/assets/ after tsc compilation.
  *
- * The compiled JS in dist/react-native/hooks/ references these assets with
- * relative paths like ../../assets/wasm/... which resolve to dist/assets/wasm/
- * at runtime (Metro bundler resolves relative to the compiled file location).
+ * Why this is needed:
+ *   bundledRuntimeAssets.ts lives at react-native/bundledRuntimeAssets.ts and
+ *   uses require('../assets/...') paths. After tsc, the compiled file lands at
+ *   dist/react-native/bundledRuntimeAssets.js — so '../assets/...' resolves to
+ *   dist/assets/... at Metro bundle time. This script ensures all those files
+ *   exist under dist/assets/.
  *
  * Runs automatically as part of the "build" npm script.
  * Safe to run multiple times (idempotent).
- *
- * Files copied:
- *   assets/wasm/zk_face_wasm_bg.wasm → dist/assets/wasm/zk_face_wasm_bg.wasm
- *   assets/zk-worker.html            → dist/assets/zk-worker.html
  */
 
 const fs = require("fs");
@@ -37,23 +36,69 @@ const path = require("path");
 const ROOT = path.resolve(__dirname, "..");
 const DIST_ASSETS = path.resolve(ROOT, "dist/assets");
 
-const COPIES = [
-  { src: "assets/wasm/zk_face_wasm_bg.wasm", dst: "wasm/zk_face_wasm_bg.wasm" },
-  { src: "assets/zk-worker.html",            dst: "zk-worker.html" },
+// Individual file copies: [src relative to ROOT, dst relative to DIST_ASSETS]
+const FILE_COPIES = [
+  // ZK WASM
+  { src: "assets/wasm/zk_face_wasm_bg.wasm",  dst: "wasm/zk_face_wasm_bg.wasm" },
+  { src: "assets/zk-worker.html",              dst: "zk-worker.html" },
+  // ORT Runtime
+  { src: "assets/onnx/ort.min.js.txt",         dst: "onnx/ort.min.js.txt" },
+  { src: "assets/onnx/ort-wasm-simd.wasm",     dst: "onnx/ort-wasm-simd.wasm" },
+  { src: "assets/onnx/ort-wasm.wasm",          dst: "onnx/ort-wasm.wasm" },
+  // Liveness
+  { src: "assets/liveness/index.html",         dst: "liveness/index.html" },
+  { src: "assets/liveness/antispoof.js.txt",   dst: "liveness/antispoof.js.txt" },
+  { src: "assets/liveness/liveness.js.txt",    dst: "liveness/liveness.js.txt" },
+];
+
+// Directory copies: entire source directory mirrored under DIST_ASSETS
+const DIR_COPIES = [
+  { src: "assets/mediapipe",    dst: "mediapipe" },
+  { src: "assets/face-guidance", dst: "face-guidance" },
 ];
 
-fs.mkdirSync(path.join(DIST_ASSETS, "wasm"), { recursive: true });
+// ── Helpers ──────────────────────────────────────────────────────────────────
 
-for (const { src, dst } of COPIES) {
+function copyFile(src, dst) {
   const srcPath = path.join(ROOT, src);
   const dstPath = path.join(DIST_ASSETS, dst);
 
   if (!fs.existsSync(srcPath)) {
     process.stderr.write(`[copy-dist-assets] WARNING: ${src} not found — skipping\n`);
-    continue;
+    return;
   }
 
+  fs.mkdirSync(path.dirname(dstPath), { recursive: true });
   fs.copyFileSync(srcPath, dstPath);
   const size = Math.round(fs.statSync(dstPath).size / 1024);
   process.stdout.write(`[copy-dist-assets] copied ${src} → dist/assets/${dst} (${size} KB)\n`);
 }
+
+function copyDir(srcRel, dstRel) {
+  const srcPath = path.join(ROOT, srcRel);
+  const dstPath = path.join(DIST_ASSETS, dstRel);
+
+  if (!fs.existsSync(srcPath)) {
+    process.stderr.write(`[copy-dist-assets] WARNING: ${srcRel}/ not found — skipping\n`);
+    return;
+  }
+
+  fs.mkdirSync(dstPath, { recursive: true });
+
+  for (const entry of fs.readdirSync(srcPath, { withFileTypes: true })) {
+    if (entry.isFile()) {
+      copyFile(path.join(srcRel, entry.name), path.join(dstRel, entry.name));
+    }
+    // Not recursing into subdirectories — all current asset dirs are flat
+  }
+}
+
+// ── Run ───────────────────────────────────────────────────────────────────────
+
+for (const { src, dst } of FILE_COPIES) {
+  copyFile(src, dst);
+}
+
+for (const { src, dst } of DIR_COPIES) {
+  copyDir(src, dst);
+}

package/dist/assets/face-guidance/face-logic.js.txt

@@ -0,0 +1,77 @@
+/* Face Pose Calculation Logic */
+
+// --- POSE CALCULATION ---
+// Distance-invariant yaw/pitch calculation with face dimension normalization
+// This matches the calculation in liveness.js for consistent TARGET and CURRENT pose comparison
+function calculatePose(landmarks) {
+    const nose = landmarks[1];
+    const leftCheek = landmarks[234];
+    const rightCheek = landmarks[454];
+    
+    // Face Width for normalization (makes calculation distance-invariant)
+    const faceWidth = Math.hypot(
+        rightCheek.x - leftCheek.x, 
+        rightCheek.y - leftCheek.y
+    );
+    
+    // Yaw: Rotation around Y axis (Turning Left/Right)
+    const midPointX = (leftCheek.x + rightCheek.x) / 2;
+    // Normalize by face width to get comparable angle regardless of distance
+    // Multiplier 180 is heuristic to match standard degrees
+    const yaw = ((nose.x - midPointX) / faceWidth) * 180;
+
+    // Pitch: Rotation around X axis (Looking Up/Down)
+    const midEyeY = (landmarks[33].y + landmarks[263].y) / 2;
+    const mouthY = (landmarks[13].y + landmarks[14].y) / 2;
+    const midFaceY = (midEyeY + mouthY) / 2;
+    
+    // Face Height for normalization (chin to forehead)
+    const chin = landmarks[152];
+    const forehead = landmarks[10];
+    const faceHeight = Math.hypot(
+        chin.x - forehead.x, 
+        chin.y - forehead.y
+    );
+    
+    const pitch = ((nose.y - midFaceY) / faceHeight) * 180;
+
+    return { yaw, pitch, roll: 0 };
+}
+
+function calculateGaze(landmarks) {
+    if (!landmarks[468] || !landmarks[473]) return { x: 0.5, y: 0.5 }; // Default centered if no iris
+    
+    // Left Eye (User's Left = Right on screen if mirrored, but landmarks are consistent)
+    // Left Eye Inner: 362, Outer: 263, Iris: 473
+    const rightEyeInner = landmarks[362];
+    const rightEyeOuter = landmarks[263];
+    const rightIris = landmarks[473];
+    
+    // Right Eye (User's Right)
+    // Right Eye Inner: 33, Outer: 133, Iris: 468
+    const leftEyeInner = landmarks[33];
+    const leftEyeOuter = landmarks[133];
+    const leftIris = landmarks[468]; // 468 is Left Iris Center
+    
+    // Calculate Horizontal Ratio (0 = Looking Left, 1 = Looking Right, 0.5 = Center)
+    
+    // Left Eye horizontal distance
+    const leftEyeWidth = Math.hypot(leftEyeOuter.x - leftEyeInner.x, leftEyeOuter.y - leftEyeInner.y);
+    const leftIrisDist = Math.hypot(leftIris.x - leftEyeInner.x, leftIris.y - leftEyeInner.y);
+    const leftRatio = leftIrisDist / leftEyeWidth;
+    
+    // Right Eye horizontal distance
+    const rightEyeWidth = Math.hypot(rightEyeOuter.x - rightEyeInner.x, rightEyeOuter.y - rightEyeInner.y);
+    const rightIrisDist = Math.hypot(rightIris.x - rightEyeInner.x, rightIris.y - rightEyeInner.y);
+    const rightRatio = rightIrisDist / rightEyeWidth;
+    
+    // Average ratio
+    const avgRatio = (leftRatio + rightRatio) / 2;
+    return { x: avgRatio, y: 0.5 };
+}
+
+// Export functions if using modules, but here we likely just inject into global scope
+if (typeof window !== 'undefined') {
+    window.calculatePose = calculatePose;
+    window.calculateGaze = calculateGaze;
+}

package/dist/assets/face-guidance/index.html

@@ -0,0 +1,173 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Face Pose Guidance</title>
+
+    <!-- Tailwind -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <!-- MediaPipe -->
+    <script
+      src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/face_mesh.js"
+      crossorigin="anonymous"
+    ></script>
+    <!-- ONNX Runtime Web -->
+    <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.14.0/dist/ort.min.js"></script>
+
+    <style>
+      .camera-wrapper {
+        position: relative;
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+        background: #000;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      #input_video {
+        display: none;
+      }
+
+      #output_canvas {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+      }
+
+      .mirror {
+        transform: scaleX(-1);
+      }
+
+      .overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        pointer-events: none;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 40px 20px;
+        z-index: 10;
+      }
+
+      .message-box {
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(4px);
+        padding: 16px 24px;
+        border-radius: 12px;
+        text-align: center;
+        margin: 0 auto;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+      }
+
+      .guidance-arrow {
+        position: absolute;
+        top: 50%;
+        font-size: 4rem;
+        color: white;
+        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+        opacity: 0;
+        transition: opacity 0.3s;
+        transform: translateY(-50%);
+      }
+
+      .arrow-left {
+        left: 20px;
+        animation: bounce-left 1s infinite;
+      }
+
+      .arrow-right {
+        right: 20px;
+        animation: bounce-right 1s infinite;
+      }
+
+      @keyframes bounce-left {
+        0%,
+        100% {
+          transform: translate(0, -50%);
+        }
+        50% {
+          transform: translate(-10px, -50%);
+        }
+      }
+
+      @keyframes bounce-right {
+        0%,
+        100% {
+          transform: translate(0, -50%);
+        }
+        50% {
+          transform: translate(10px, -50%);
+        }
+      }
+    </style>
+  </head>
+  <body class="bg-black m-0 overflow-hidden">
+    <div class="camera-wrapper">
+      <video id="input_video" playsinline></video>
+      <canvas id="output_canvas"></canvas>
+
+      <div class="overlay">
+        <!-- Top Status -->
+        <div id="status_box" class="message-box">
+          <p id="status_text" class="text-white text-lg font-medium">
+            Initializing...
+          </p>
+        </div>
+
+        <!-- Guidance Elements -->
+        <div id="arrow_left" class="guidance-arrow arrow-left">⬅️</div>
+        <div id="arrow_right" class="guidance-arrow arrow-right">➡️</div>
+
+        <!-- Bottom Status -->
+        <div id="instruction_box" class="message-box hidden">
+          <p id="instruction_text" class="text-slate-300 text-sm">
+            Align your face
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div
+      id="debug_info"
+      style="
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        background: rgba(0, 0, 0, 0.7);
+        color: lime;
+        font-family: monospace;
+        font-size: 12px;
+        padding: 8px;
+        border-radius: 4px;
+        pointer-events: none;
+        z-index: 100;
+        white-space: pre;
+      "
+    ></div>
+
+    <!-- Main Logic Script -->
+    <script src="pose-guidance.js"></script>
+  </body>
+</html>