@richard.fadiora/liveness-detection 1.0.4 → 2.0.0

package/dist/index.es.js

@@ -1,6 +1,6 @@
-import oe, { useRef as se, useState as w, useEffect as Q } from "react";
+import se, { useRef as q, useState as _, useEffect as H } from "react";
 import ae from "react-webcam";
-var G = { exports: {} }, O = {};
+var X = { exports: {} }, N = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -10,29 +10,29 @@ var G = { exports: {} }, O = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var K;
+var re;
 function ie() {
-  if (K) return O;
-  K = 1;
-  var d = Symbol.for("react.transitional.element"), m = Symbol.for("react.fragment");
-  function b(f, i, a) {
-    var y = null;
-    if (a !== void 0 && (y = "" + a), i.key !== void 0 && (y = "" + i.key), "key" in i) {
-      a = {};
-      for (var l in i)
-        l !== "key" && (a[l] = i[l]);
-    } else a = i;
-    return i = a.ref, {
+  if (re) return N;
+  re = 1;
+  var d = Symbol.for("react.transitional.element"), p = Symbol.for("react.fragment");
+  function f(s, n, c) {
+    var v = null;
+    if (c !== void 0 && (v = "" + c), n.key !== void 0 && (v = "" + n.key), "key" in n) {
+      c = {};
+      for (var g in n)
+        g !== "key" && (c[g] = n[g]);
+    } else c = n;
+    return n = c.ref, {
       $$typeof: d,
-      type: f,
-      key: y,
-      ref: i !== void 0 ? i : null,
-      props: a
+      type: s,
+      key: v,
+      ref: n !== void 0 ? n : null,
+      props: c
     };
   }
-  return O.Fragment = m, O.jsx = b, O.jsxs = b, O;
+  return N.Fragment = p, N.jsx = f, N.jsxs = f, N;
 }
-var P = {};
+var I = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -42,44 +42,44 @@ var P = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var ee;
+var te;
 function le() {
-  return ee || (ee = 1, process.env.NODE_ENV !== "production" && function() {
+  return te || (te = 1, process.env.NODE_ENV !== "production" && function() {
     function d(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === T ? null : e.displayName || e.name || null;
+        return e.$$typeof === u ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case _:
+        case x:
           return "Fragment";
-        case Y:
+        case S:
           return "Profiler";
-        case A:
+        case w:
           return "StrictMode";
-        case D:
+        case W:
           return "Suspense";
-        case c:
+        case $:
           return "SuspenseList";
-        case j:
+        case V:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case R:
+          case k:
             return "Portal";
-          case $:
+          case M:
             return e.displayName || "Context";
-          case C:
+          case Y:
             return (e._context.displayName || "Context") + ".Consumer";
-          case F:
+          case P:
             var r = e.render;
             return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case h:
+          case z:
             return r = e.displayName || null, r !== null ? r : d(e.type) || "Memo";
-          case u:
+          case C:
             r = e._payload, e = e._init;
             try {
               return d(e(r));
@@ -88,29 +88,29 @@ function le() {
         }
       return null;
     }
-    function m(e) {
+    function p(e) {
       return "" + e;
     }
-    function b(e) {
+    function f(e) {
       try {
-        m(e);
+        p(e);
         var r = !1;
       } catch {
         r = !0;
       }
       if (r) {
         r = console;
-        var n = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return n.call(
+        var o = r.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return o.call(
           r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          o
-        ), m(e);
+          i
+        ), p(e);
       }
     }
-    function f(e) {
-      if (e === _) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === u)
+    function s(e) {
+      if (e === x) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === C)
         return "<...>";
       try {
         var r = d(e);
@@ -119,49 +119,49 @@ function le() {
         return "<...>";
       }
     }
-    function i() {
-      var e = M.A;
+    function n() {
+      var e = R.A;
       return e === null ? null : e.getOwner();
     }
-    function a() {
+    function c() {
       return Error("react-stack-top-frame");
     }
-    function y(e) {
-      if (q.call(e, "key")) {
+    function v(e) {
+      if (E.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function l(e, r) {
-      function n() {
-        B || (B = !0, console.error(
+    function g(e, r) {
+      function o() {
+        y || (y = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           r
         ));
       }
-      n.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: n,
+      o.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: o,
         configurable: !0
       });
     }
-    function p() {
+    function L() {
       var e = d(this.type);
-      return H[e] || (H[e] = !0, console.error(
+      return Z[e] || (Z[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function L(e, r, n, o, N, W) {
-      var s = n.ref;
+    function a(e, r, o, i, D, B) {
+      var l = o.ref;
       return e = {
-        $$typeof: E,
+        $$typeof: O,
         type: e,
         key: r,
-        props: n,
-        _owner: o
-      }, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
+        props: o,
+        _owner: i
+      }, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: p
+        get: L
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -176,213 +176,265 @@ function le() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: N
+        value: D
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: W
+        value: B
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function x(e, r, n, o, N, W) {
-      var s = r.children;
-      if (s !== void 0)
-        if (o)
-          if (te(s)) {
-            for (o = 0; o < s.length; o++)
-              v(s[o]);
-            Object.freeze && Object.freeze(s);
+    function m(e, r, o, i, D, B) {
+      var l = r.children;
+      if (l !== void 0)
+        if (i)
+          if (h(l)) {
+            for (i = 0; i < l.length; i++)
+              F(l[i]);
+            Object.freeze && Object.freeze(l);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else v(s);
-      if (q.call(r, "key")) {
-        s = d(e);
-        var S = Object.keys(r).filter(function(ne) {
-          return ne !== "key";
+        else F(l);
+      if (E.call(r, "key")) {
+        l = d(e);
+        var A = Object.keys(r).filter(function(oe) {
+          return oe !== "key";
         });
-        o = 0 < S.length ? "{key: someKey, " + S.join(": ..., ") + ": ...}" : "{key: someKey}", Z[s + o] || (S = 0 < S.length ? "{" + S.join(": ..., ") + ": ...}" : "{}", console.error(
+        i = 0 < A.length ? "{key: someKey, " + A.join(": ..., ") + ": ...}" : "{key: someKey}", ee[l + i] || (A = 0 < A.length ? "{" + A.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          o,
-          s,
-          S,
-          s
-        ), Z[s + o] = !0);
+          i,
+          l,
+          A,
+          l
+        ), ee[l + i] = !0);
       }
-      if (s = null, n !== void 0 && (b(n), s = "" + n), y(r) && (b(r.key), s = "" + r.key), "key" in r) {
-        n = {};
-        for (var z in r)
-          z !== "key" && (n[z] = r[z]);
-      } else n = r;
-      return s && l(
-        n,
+      if (l = null, o !== void 0 && (f(o), l = "" + o), v(r) && (f(r.key), l = "" + r.key), "key" in r) {
+        o = {};
+        for (var G in r)
+          G !== "key" && (o[G] = r[G]);
+      } else o = r;
+      return l && g(
+        o,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), L(
+      ), a(
         e,
-        s,
-        n,
-        i(),
-        N,
-        W
+        l,
+        o,
+        n(),
+        D,
+        B
       );
     }
-    function v(e) {
-      k(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === u && (e._payload.status === "fulfilled" ? k(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function F(e) {
+      T(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === C && (e._payload.status === "fulfilled" ? T(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    function k(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === E;
+    function T(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === O;
     }
-    var g = oe, E = Symbol.for("react.transitional.element"), R = Symbol.for("react.portal"), _ = Symbol.for("react.fragment"), A = Symbol.for("react.strict_mode"), Y = Symbol.for("react.profiler"), C = Symbol.for("react.consumer"), $ = Symbol.for("react.context"), F = Symbol.for("react.forward_ref"), D = Symbol.for("react.suspense"), c = Symbol.for("react.suspense_list"), h = Symbol.for("react.memo"), u = Symbol.for("react.lazy"), j = Symbol.for("react.activity"), T = Symbol.for("react.client.reference"), M = g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, q = Object.prototype.hasOwnProperty, te = Array.isArray, U = console.createTask ? console.createTask : function() {
+    var b = se, O = Symbol.for("react.transitional.element"), k = Symbol.for("react.portal"), x = Symbol.for("react.fragment"), w = Symbol.for("react.strict_mode"), S = Symbol.for("react.profiler"), Y = Symbol.for("react.consumer"), M = Symbol.for("react.context"), P = Symbol.for("react.forward_ref"), W = Symbol.for("react.suspense"), $ = Symbol.for("react.suspense_list"), z = Symbol.for("react.memo"), C = Symbol.for("react.lazy"), V = Symbol.for("react.activity"), u = Symbol.for("react.client.reference"), R = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, E = Object.prototype.hasOwnProperty, h = Array.isArray, j = console.createTask ? console.createTask : function() {
       return null;
     };
-    g = {
+    b = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var B, H = {}, J = g.react_stack_bottom_frame.bind(
-      g,
-      a
-    )(), X = U(f(a)), Z = {};
-    P.Fragment = _, P.jsx = function(e, r, n) {
-      var o = 1e4 > M.recentlyCreatedOwnerStacks++;
-      return x(
+    var y, Z = {}, Q = b.react_stack_bottom_frame.bind(
+      b,
+      c
+    )(), K = j(s(c)), ee = {};
+    I.Fragment = x, I.jsx = function(e, r, o) {
+      var i = 1e4 > R.recentlyCreatedOwnerStacks++;
+      return m(
         e,
         r,
-        n,
+        o,
         !1,
-        o ? Error("react-stack-top-frame") : J,
-        o ? U(f(e)) : X
+        i ? Error("react-stack-top-frame") : Q,
+        i ? j(s(e)) : K
       );
-    }, P.jsxs = function(e, r, n) {
-      var o = 1e4 > M.recentlyCreatedOwnerStacks++;
-      return x(
+    }, I.jsxs = function(e, r, o) {
+      var i = 1e4 > R.recentlyCreatedOwnerStacks++;
+      return m(
         e,
         r,
-        n,
+        o,
         !0,
-        o ? Error("react-stack-top-frame") : J,
-        o ? U(f(e)) : X
+        i ? Error("react-stack-top-frame") : Q,
+        i ? j(s(e)) : K
       );
     };
-  }()), P;
+  }()), I;
 }
-process.env.NODE_ENV === "production" ? G.exports = ie() : G.exports = le();
-var t = G.exports;
-const ce = ["Smile", "Blink", "Turn_Head", "Thumbs_Up"], re = 60, pe = ({ apiUrl: d, onComplete: m }) => {
-  const b = se(null), [f, i] = w([]), [a, y] = w(0), [l, p] = w("idle"), [L, x] = w(3), [v, k] = w(re), [g, E] = w(!1), [R, _] = w(!1), A = () => {
-    const c = [...ce].sort(() => 0.5 - Math.random()).slice(0, 3);
-    i(c), y(0), p("idle"), x(3), k(re), E(!1), _(!1);
+process.env.NODE_ENV === "production" ? X.exports = ie() : X.exports = le();
+var t = X.exports;
+const ce = ["Smile", "Blink", "Turn_Head", "Thumbs_Up"], ne = 60, ue = (d) => {
+  if (!d) return null;
+  const p = d.split(","), f = p[0].match(/:(.*?);/)[1], s = atob(p[1]);
+  let n = s.length;
+  const c = new Uint8Array(n);
+  for (; n--; ) c[n] = s.charCodeAt(n);
+  return new Blob([c], { type: f });
+}, ye = ({ apiUrl: d, onComplete: p }) => {
+  const f = q(null), s = q(null), n = q(null), [c, v] = _([]), [g, L] = _(0), [a, m] = _("idle"), [F, T] = _(3), [b, O] = _(ne), [k, x] = _(!1), [w, S] = _(!1), [Y, M] = _(null), P = () => {
+    const u = [...ce].sort(() => 0.5 - Math.random()).slice(0, 3);
+    v(u), L(0), m("idle"), T(3), O(ne), x(!1), S(!1);
   };
-  Q(() => {
-    A();
+  H(() => {
+    P();
   }, []);
-  const Y = () => {
-    A();
+  const W = () => {
+    P();
   };
-  Q(() => {
-    let c;
-    return g && v > 0 ? c = setInterval(() => {
-      k((h) => h - 1);
-    }, 1e3) : v === 0 && l !== "success" && (p("timeout"), E(!1), _(!1), m && m(!1)), () => clearInterval(c);
-  }, [g, v, l]);
-  const C = async () => {
-    g || E(!0), p("counting");
-    let c = 3;
-    const h = setInterval(() => {
-      c -= 1, x(c), c === 0 && (clearInterval(h), $());
+  H(() => () => {
+    n.current && clearInterval(n.current), s.current && s.current.abort();
+  }, []), H(() => {
+    let u;
+    return k && b > 0 ? u = setInterval(() => {
+      O((R) => R - 1);
+    }, 1e3) : b === 0 && a !== "success" && (n.current && (clearInterval(n.current), n.current = null), s.current && s.current.abort(), m("timeout"), x(!1), S(!1), p && p(!1)), () => clearInterval(u);
+  }, [k, b, a]);
+  const $ = async () => {
+    if (a === "capturing" || a === "verifying") return;
+    n.current && clearInterval(n.current), k || x(!0), m("counting");
+    let u = 3;
+    n.current = setInterval(() => {
+      u -= 1, T(u), u === 0 && (clearInterval(n.current), n.current = null, z());
     }, 1e3);
-  }, $ = async () => {
-    p("capturing");
-    const c = [], h = 20;
-    for (let u = 0; u < h; u++) {
-      if (v <= 0) return;
-      const j = b.current.getScreenshot();
-      c.push(j), await new Promise((T) => setTimeout(T, 100));
-    }
-    F(c);
-  }, F = async (c) => {
-    p("verifying");
-    const h = new FormData();
-    for (let u = 0; u < c.length; u++) {
-      const j = await fetch(c[u]).then((T) => T.blob());
-      h.append("files", j, `frame_${u}.jpg`);
+  }, z = async () => {
+    if (!f.current)
+      return;
+    m("capturing");
+    const u = [], R = 20;
+    for (let E = 0; E < R; E++) {
+      if (!f.current || b <= 0) return;
+      try {
+        const h = f.current.getScreenshot();
+        h && u.push(h);
+      } catch {
+        break;
+      }
+      await new Promise((h) => setTimeout(h, 100));
     }
-    h.append("challenge", f[a]);
+    u.length > 0 && a !== "timeout" && C(u);
+  }, C = async (u) => {
+    if (a === "verifying" || a === "timeout") return;
+    m("verifying"), s.current = new AbortController();
+    const { signal: R } = s.current, E = new FormData();
+    u.forEach((h, j) => {
+      const y = ue(h);
+      y && E.append("files", y, `frame_${j}.jpg`);
+    }), E.append("challenge", c[g]);
     try {
-      (await (await fetch(`${d}/v1/verify`, {
+      const h = await fetch(`${d}/v1/verify`, {
         method: "POST",
-        body: h
-      })).json()).is_live ? a < 2 ? (y((T) => T + 1), x(3), p("idle")) : (p("success"), E(!1), m && m(!0)) : (E(!1), _(!0), p("idle"), x(3));
-    } catch (u) {
-      console.error("API Error:", u), _(!0), p("idle");
+        body: E,
+        signal: R
+      });
+      u = [];
+      const j = await h.json();
+      if (a === "timeout") return;
+      if (j.is_live)
+        if (g < 2)
+          L((y) => y + 1), T(3), m("idle");
+        else {
+          const y = f.current.getScreenshot();
+          y && M(y), m("success"), x(!1), p && p({
+            success: !0,
+            image: y
+            // This is the base64 string
+          });
+        }
+      else
+        x(!1), S(!0), m("idle"), T(3);
+    } catch {
+      S(!0), m("idle");
+    } finally {
+      s.current = null;
     }
-  }, D = {
+  }, V = {
     Smile: "Show us a big SMILE! 😁",
     Blink: "BLINK your eyes rapidly! 👁️",
-    Turn_Head: "Slowly TURN your head left and right! ↔️",
+    Turn_Head: "Slowly TURN your head left or right! ↔️",
     Thumbs_Up: "Give a THUMBS UP! 👍"
   };
   return /* @__PURE__ */ t.jsxs("div", { style: { textAlign: "center", padding: "20px", fontFamily: "sans-serif" }, children: [
-    g && l !== "success" && /* @__PURE__ */ t.jsxs("div", { style: { fontSize: "20px", fontWeight: "bold", color: v < 10 ? "red" : "black" }, children: [
+    k && a !== "success" && /* @__PURE__ */ t.jsxs("div", { style: { fontSize: "20px", fontWeight: "bold", color: b < 10 ? "red" : "black" }, children: [
       "Time Remaining: ",
-      v,
+      b,
       "s"
     ] }),
-    R && /* @__PURE__ */ t.jsx("div", { style: ue, children: /* @__PURE__ */ t.jsxs("div", { style: fe, children: [
+    w && /* @__PURE__ */ t.jsx("div", { style: fe, children: /* @__PURE__ */ t.jsxs("div", { style: de, children: [
       /* @__PURE__ */ t.jsx("h3", { style: { color: "#dc3545" }, children: "Action Not Detected" }),
       /* @__PURE__ */ t.jsx("p", { children: "We couldn't verify that move. Please try again before time runs out!" }),
       /* @__PURE__ */ t.jsx("button", { onClick: () => {
-        _(!1), C();
-      }, style: I, children: "Try Again" })
+        S(!1), $();
+      }, style: U, children: "Try Again" })
     ] }) }),
-    l === "success" && /* @__PURE__ */ t.jsxs("div", { children: [
+    a === "success" && /* @__PURE__ */ t.jsxs("div", { children: [
       /* @__PURE__ */ t.jsx("h2", { children: "✅ Verification Passed!" }),
-      /* @__PURE__ */ t.jsx("button", { onClick: Y, style: { ...I, backgroundColor: "#6c757d" }, children: "Verify Again" })
+      Y && /* @__PURE__ */ t.jsxs("div", { style: { margin: "20px auto", width: "200px" }, children: [
+        /* @__PURE__ */ t.jsx("p", { children: "Verified Photo:" }),
+        /* @__PURE__ */ t.jsx(
+          "img",
+          {
+            src: Y,
+            alt: "Verified",
+            style: { width: "100%", borderRadius: "10px", border: "3px solid #28a745" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t.jsx("button", { onClick: W, style: { ...U, backgroundColor: "#6c757d" }, children: "Verify Again" })
     ] }),
-    l === "timeout" && /* @__PURE__ */ t.jsxs("div", { children: [
+    a === "timeout" && /* @__PURE__ */ t.jsxs("div", { children: [
       /* @__PURE__ */ t.jsx("h2", { style: { color: "#dc3545" }, children: "⏰ Session Expired" }),
       /* @__PURE__ */ t.jsx("p", { children: "You didn't complete the challenges in time." }),
-      /* @__PURE__ */ t.jsx("p", { children: "Please ensure you follow the instructions and perform the tasks within the time limit. (60 secsonds)" }),
-      /* @__PURE__ */ t.jsx("button", { onClick: A, style: I, children: "🔄 Try Again" })
+      /* @__PURE__ */ t.jsx("p", { children: "Please ensure you follow the instructions and perform the tasks within the time limit. (60 seconds)" }),
+      /* @__PURE__ */ t.jsx("button", { onClick: P, style: U, children: "🔄 Try Again" })
     ] }),
-    ["idle", "counting", "capturing", "verifying"].includes(l) && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    ["idle", "counting", "capturing", "verifying"].includes(a) && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       /* @__PURE__ */ t.jsx("h2", { children: "Please be in a well-lit room where your face can be well seen." }),
       /* @__PURE__ */ t.jsxs("h3", { children: [
         "Challenge ",
-        a + 1,
+        g + 1,
         " of 3"
       ] }),
-      /* @__PURE__ */ t.jsx("h2", { style: { color: "#007bff" }, children: D[f[a]] }),
-      /* @__PURE__ */ t.jsxs("div", { style: { position: "relative", width: "fit-content", margin: "auto" }, children: [
+      /* @__PURE__ */ t.jsx("h2", { style: { color: "#007bff" }, children: V[c[g]] }),
+      /* @__PURE__ */ t.jsxs("div", { style: { position: "relative", width: "fit-content", margin: "auto", overflow: "hidden", borderRadius: "10px" }, children: [
         /* @__PURE__ */ t.jsx(
           ae,
           {
             audio: !1,
-            ref: b,
+            ref: f,
             screenshotFormat: "image/jpeg",
             style: { borderRadius: "10px", width: "100%", maxWidth: "400px", transform: "scaleX(-1)" }
           }
         ),
-        l === "counting" && /* @__PURE__ */ t.jsx("div", { style: V, children: L }),
-        l === "verifying" && /* @__PURE__ */ t.jsx("div", { style: V, children: "Analyzing..." }),
-        l === "capturing" && /* @__PURE__ */ t.jsx("div", { style: { ...V, background: "rgba(40, 167, 69, 0.3)" }, children: "Recording..." })
+        /* @__PURE__ */ t.jsx("div", { style: {
+          ...pe,
+          borderColor: a === "capturing" ? "#28a745" : "rgba(255, 255, 255, 0.6)",
+          borderStyle: a === "capturing" ? "solid" : "dashed"
+        }, children: /* @__PURE__ */ t.jsx("div", { style: me }) }),
+        a === "counting" && /* @__PURE__ */ t.jsx("div", { style: J, children: F }),
+        a === "verifying" && /* @__PURE__ */ t.jsx("div", { style: J, children: "Analyzing..." }),
+        a === "capturing" && /* @__PURE__ */ t.jsx("div", { style: { ...J, background: "rgba(40, 167, 69, 0.3)" }, children: "Recording..." })
       ] }),
-      /* @__PURE__ */ t.jsx("div", { style: { marginTop: "20px" }, children: l === "idle" && /* @__PURE__ */ t.jsx("button", { onClick: C, disabled: R, style: {
-        ...I,
-        filter: R ? "grayscale(1)" : "none",
-        cursor: R ? "not-allowed" : "pointer",
-        opacity: R ? 0.6 : 1
+      /* @__PURE__ */ t.jsx("div", { style: { marginTop: "20px" }, children: a === "idle" && /* @__PURE__ */ t.jsx("button", { onClick: $, disabled: w, style: {
+        ...U,
+        filter: w ? "grayscale(1)" : "none",
+        cursor: w ? "not-allowed" : "pointer",
+        opacity: w ? 0.6 : 1
       }, children: "I'm Ready" }) })
     ] })
   ] });
-}, V = {
+}, J = {
   position: "absolute",
   top: 0,
   left: 0,
@@ -395,7 +447,7 @@ const ce = ["Smile", "Blink", "Turn_Head", "Thumbs_Up"], re = 60, pe = ({ apiUrl
   justifyContent: "center",
   fontSize: "48px",
   borderRadius: "10px"
-}, I = {
+}, U = {
   padding: "10px 30px",
   fontSize: "18px",
   cursor: "pointer",
@@ -403,7 +455,7 @@ const ce = ["Smile", "Blink", "Turn_Head", "Thumbs_Up"], re = 60, pe = ({ apiUrl
   color: "white",
   border: "none",
   borderRadius: "5px"
-}, ue = {
+}, fe = {
   position: "absolute",
   top: 0,
   left: 0,
@@ -415,26 +467,50 @@ const ce = ["Smile", "Blink", "Turn_Head", "Thumbs_Up"], re = 60, pe = ({ apiUrl
   justifyContent: "center",
   zIndex: 100,
   borderRadius: "10px"
-}, fe = {
+}, de = {
   backgroundColor: "white",
   padding: "30px",
   borderRadius: "15px",
   maxWidth: "300px",
   boxShadow: "0 4px 15px rgba(0,0,0,0.3)",
   color: "#000"
-}, he = async (d, m, b) => {
-  const f = new FormData();
-  m.forEach((a, y) => {
-    f.append("files", a, `frame_${y}.jpg`);
-  }), f.append("challenge", b);
-  const i = await fetch(`${d}/v1/verify`, {
+}, pe = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "260px",
+  // Adjust width based on your model's preference
+  height: "240px",
+  // Adjust height
+  borderRadius: "50%",
+  border: "2px dashed rgba(255, 255, 255, 0.6)",
+  boxShadow: "0 0 0 9999px rgba(0, 0, 0, 0.5)",
+  // This creates the dark "vignette"
+  pointerEvents: "none",
+  // Critical: clicks pass through to the webcam/buttons
+  zIndex: 10
+}, me = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  borderRadius: "50%",
+  boxShadow: "inset 0 0 30px rgba(255, 255, 255, 0.2)"
+}, ge = async (d, p, f) => {
+  const s = new FormData();
+  p.forEach((c, v) => {
+    s.append("files", c, `frame_${v}.jpg`);
+  }), s.append("challenge", f);
+  const n = await fetch(`${d}/v1/verify`, {
     method: "POST",
-    body: f
+    body: s
   });
-  if (!i.ok) throw new Error("Network response was not ok");
-  return await i.json();
+  if (!n.ok) throw new Error("Network response was not ok");
+  return await n.json();
 };
 export {
-  pe as LivenessSDK,
-  he as verifyLiveness
+  ye as LivenessSDK,
+  ge as verifyLiveness
 };

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(function(g,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react"),require("react-webcam")):typeof define=="function"&&define.amd?define(["exports","react","react-webcam"],u):(g=typeof globalThis<"u"?globalThis:g||self,u(g.LivenessSDK={},g.React,g.Webcam))})(this,function(g,u,re){"use strict";var D={exports:{}},O={};/**
+(function(x,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react"),require("react-webcam")):typeof define=="function"&&define.amd?define(["exports","react","react-webcam"],i):(x=typeof globalThis<"u"?globalThis:x||self,i(x.LivenessSDK={},x.React,x.Webcam))})(this,function(x,i,ne){"use strict";var z={exports:{}},P={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var J;function ne(){if(J)return O;J=1;var m=Symbol.for("react.transitional.element"),p=Symbol.for("react.fragment");function y(d,i,a){var v=null;if(a!==void 0&&(v=""+a),i.key!==void 0&&(v=""+i.key),"key"in i){a={};for(var l in i)l!=="key"&&(a[l]=i[l])}else a=i;return i=a.ref,{$$typeof:m,type:d,key:v,ref:i!==void 0?i:null,props:a}}return O.Fragment=p,O.jsx=y,O.jsxs=y,O}var P={};/**
+ */var Z;function oe(){if(Z)return P;Z=1;var p=Symbol.for("react.transitional.element"),m=Symbol.for("react.fragment");function d(s,n,u){var R=null;if(u!==void 0&&(R=""+u),n.key!==void 0&&(R=""+n.key),"key"in n){u={};for(var g in n)g!=="key"&&(u[g]=n[g])}else u=n;return n=u.ref,{$$typeof:p,type:s,key:R,ref:n!==void 0?n:null,props:u}}return P.Fragment=m,P.jsx=d,P.jsxs=d,P}var C={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,9 +14,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var X;function oe(){return X||(X=1,process.env.NODE_ENV!=="production"&&function(){function m(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===w?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case x:return"Fragment";case M:return"Profiler";case C:return"StrictMode";case z:return"Suspense";case c:return"SuspenseList";case j:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case S:return"Portal";case U:return e.displayName||"Context";case I:return(e._context.displayName||"Context")+".Consumer";case W:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case b:return t=e.displayName||null,t!==null?t:m(e.type)||"Memo";case f:t=e._payload,e=e._init;try{return m(e(t))}catch{}}return null}function p(e){return""+e}function y(e){try{p(e);var t=!1}catch{t=!0}if(t){t=console;var n=t.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),p(e)}}function d(e){if(e===x)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===f)return"<...>";try{var t=m(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function i(){var e=V.A;return e===null?null:e.getOwner()}function a(){return Error("react-stack-top-frame")}function v(e){if(Z.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function l(e,t){function n(){Q||(Q=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function h(){var e=m(this.type);return q[e]||(q[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function F(e,t,n,o,L,B){var s=n.ref;return e={$$typeof:T,type:e,key:t,props:n,_owner:o},(s!==void 0?s:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:h}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:B}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function R(e,t,n,o,L,B){var s=t.children;if(s!==void 0)if(o)if(ue(s)){for(o=0;o<s.length;o++)E(s[o]);Object.freeze&&Object.freeze(s)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else E(s);if(Z.call(t,"key")){s=m(e);var k=Object.keys(t).filter(function(fe){return fe!=="key"});o=0<k.length?"{key: someKey, "+k.join(": ..., ")+": ...}":"{key: someKey}",te[s+o]||(k=0<k.length?"{"+k.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var Q;function se(){return Q||(Q=1,process.env.NODE_ENV!=="production"&&function(){function p(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===f?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case E:return"Fragment";case j:return"Profiler";case w:return"StrictMode";case G:return"Suspense";case U:return"SuspenseList";case J:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case A:return"Portal";case B:return e.displayName||"Context";case M:return(e._context.displayName||"Context")+".Consumer";case I:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case H:return t=e.displayName||null,t!==null?t:p(e.type)||"Memo";case L:t=e._payload,e=e._init;try{return p(e(t))}catch{}}return null}function m(e){return""+e}function d(e){try{m(e);var t=!1}catch{t=!0}if(t){t=console;var o=t.error,l=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",l),m(e)}}function s(e){if(e===E)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===L)return"<...>";try{var t=p(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function n(){var e=S.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function R(e){if(_.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function g(e,t){function o(){v||(v=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}function F(){var e=p(this.type);return $[e]||($[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function a(e,t,o,l,W,X){var c=o.ref;return e={$$typeof:N,type:e,key:t,props:o,_owner:l},(c!==void 0?c:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:F}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:W}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function h(e,t,o,l,W,X){var c=t.children;if(c!==void 0)if(l)if(b(c)){for(l=0;l<c.length;l++)Y(c[l]);Object.freeze&&Object.freeze(c)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Y(c);if(_.call(t,"key")){c=p(e);var O=Object.keys(t).filter(function(me){return me!=="key"});l=0<O.length?"{key: someKey, "+O.join(": ..., ")+": ...}":"{key: someKey}",re[c+l]||(O=0<O.length?"{"+O.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,o,s,k,s),te[s+o]=!0)}if(s=null,n!==void 0&&(y(n),s=""+n),v(t)&&(y(t.key),s=""+t.key),"key"in t){n={};for(var H in t)H!=="key"&&(n[H]=t[H])}else n=t;return s&&l(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),F(e,s,n,i(),L,B)}function E(e){A(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===f&&(e._payload.status==="fulfilled"?A(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function A(e){return typeof e=="object"&&e!==null&&e.$$typeof===T}var _=u,T=Symbol.for("react.transitional.element"),S=Symbol.for("react.portal"),x=Symbol.for("react.fragment"),C=Symbol.for("react.strict_mode"),M=Symbol.for("react.profiler"),I=Symbol.for("react.consumer"),U=Symbol.for("react.context"),W=Symbol.for("react.forward_ref"),z=Symbol.for("react.suspense"),c=Symbol.for("react.suspense_list"),b=Symbol.for("react.memo"),f=Symbol.for("react.lazy"),j=Symbol.for("react.activity"),w=Symbol.for("react.client.reference"),V=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Z=Object.prototype.hasOwnProperty,ue=Array.isArray,G=console.createTask?console.createTask:function(){return null};_={react_stack_bottom_frame:function(e){return e()}};var Q,q={},$=_.react_stack_bottom_frame.bind(_,a)(),ee=G(d(a)),te={};P.Fragment=x,P.jsx=function(e,t,n){var o=1e4>V.recentlyCreatedOwnerStacks++;return R(e,t,n,!1,o?Error("react-stack-top-frame"):$,o?G(d(e)):ee)},P.jsxs=function(e,t,n){var o=1e4>V.recentlyCreatedOwnerStacks++;return R(e,t,n,!0,o?Error("react-stack-top-frame"):$,o?G(d(e)):ee)}}()),P}process.env.NODE_ENV==="production"?D.exports=ne():D.exports=oe();var r=D.exports;const se=["Smile","Blink","Turn_Head","Thumbs_Up"],K=60,ae=({apiUrl:m,onComplete:p})=>{const y=u.useRef(null),[d,i]=u.useState([]),[a,v]=u.useState(0),[l,h]=u.useState("idle"),[F,R]=u.useState(3),[E,A]=u.useState(K),[_,T]=u.useState(!1),[S,x]=u.useState(!1),C=()=>{const c=[...se].sort(()=>.5-Math.random()).slice(0,3);i(c),v(0),h("idle"),R(3),A(K),T(!1),x(!1)};u.useEffect(()=>{C()},[]);const M=()=>{C()};u.useEffect(()=>{let c;return _&&E>0?c=setInterval(()=>{A(b=>b-1)},1e3):E===0&&l!=="success"&&(h("timeout"),T(!1),x(!1),p&&p(!1)),()=>clearInterval(c)},[_,E,l]);const I=async()=>{_||T(!0),h("counting");let c=3;const b=setInterval(()=>{c-=1,R(c),c===0&&(clearInterval(b),U())},1e3)},U=async()=>{h("capturing");const c=[],b=20;for(let f=0;f<b;f++){if(E<=0)return;const j=y.current.getScreenshot();c.push(j),await new Promise(w=>setTimeout(w,100))}W(c)},W=async c=>{h("verifying");const b=new FormData;for(let f=0;f<c.length;f++){const j=await fetch(c[f]).then(w=>w.blob());b.append("files",j,`frame_${f}.jpg`)}b.append("challenge",d[a]);try{(await(await fetch(`${m}/v1/verify`,{method:"POST",body:b})).json()).is_live?a<2?(v(w=>w+1),R(3),h("idle")):(h("success"),T(!1),p&&p(!0)):(T(!1),x(!0),h("idle"),R(3))}catch(f){console.error("API Error:",f),x(!0),h("idle")}},z={Smile:"Show us a big SMILE! 😁",Blink:"BLINK your eyes rapidly! 👁️",Turn_Head:"Slowly TURN your head left and right! ↔️",Thumbs_Up:"Give a THUMBS UP! 👍"};return r.jsxs("div",{style:{textAlign:"center",padding:"20px",fontFamily:"sans-serif"},children:[_&&l!=="success"&&r.jsxs("div",{style:{fontSize:"20px",fontWeight:"bold",color:E<10?"red":"black"},children:["Time Remaining: ",E,"s"]}),S&&r.jsx("div",{style:ie,children:r.jsxs("div",{style:le,children:[r.jsx("h3",{style:{color:"#dc3545"},children:"Action Not Detected"}),r.jsx("p",{children:"We couldn't verify that move. Please try again before time runs out!"}),r.jsx("button",{onClick:()=>{x(!1),I()},style:N,children:"Try Again"})]})}),l==="success"&&r.jsxs("div",{children:[r.jsx("h2",{children:"✅ Verification Passed!"}),r.jsx("button",{onClick:M,style:{...N,backgroundColor:"#6c757d"},children:"Verify Again"})]}),l==="timeout"&&r.jsxs("div",{children:[r.jsx("h2",{style:{color:"#dc3545"},children:"⏰ Session Expired"}),r.jsx("p",{children:"You didn't complete the challenges in time."}),r.jsx("p",{children:"Please ensure you follow the instructions and perform the tasks within the time limit. (60 secsonds)"}),r.jsx("button",{onClick:C,style:N,children:"🔄 Try Again"})]}),["idle","counting","capturing","verifying"].includes(l)&&r.jsxs(r.Fragment,{children:[r.jsx("h2",{children:"Please be in a well-lit room where your face can be well seen."}),r.jsxs("h3",{children:["Challenge ",a+1," of 3"]}),r.jsx("h2",{style:{color:"#007bff"},children:z[d[a]]}),r.jsxs("div",{style:{position:"relative",width:"fit-content",margin:"auto"},children:[r.jsx(re,{audio:!1,ref:y,screenshotFormat:"image/jpeg",style:{borderRadius:"10px",width:"100%",maxWidth:"400px",transform:"scaleX(-1)"}}),l==="counting"&&r.jsx("div",{style:Y,children:F}),l==="verifying"&&r.jsx("div",{style:Y,children:"Analyzing..."}),l==="capturing"&&r.jsx("div",{style:{...Y,background:"rgba(40, 167, 69, 0.3)"},children:"Recording..."})]}),r.jsx("div",{style:{marginTop:"20px"},children:l==="idle"&&r.jsx("button",{onClick:I,disabled:S,style:{...N,filter:S?"grayscale(1)":"none",cursor:S?"not-allowed":"pointer",opacity:S?.6:1},children:"I'm Ready"})})]})]})},Y={position:"absolute",top:0,left:0,right:0,bottom:0,background:"rgba(0,0,0,0.5)",color:"white",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"48px",borderRadius:"10px"},N={padding:"10px 30px",fontSize:"18px",cursor:"pointer",backgroundColor:"#28a745",color:"white",border:"none",borderRadius:"5px"},ie={position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0,0,0,0.7)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:100,borderRadius:"10px"},le={backgroundColor:"white",padding:"30px",borderRadius:"15px",maxWidth:"300px",boxShadow:"0 4px 15px rgba(0,0,0,0.3)",color:"#000"},ce=async(m,p,y)=>{const d=new FormData;p.forEach((a,v)=>{d.append("files",a,`frame_${v}.jpg`)}),d.append("challenge",y);const i=await fetch(`${m}/v1/verify`,{method:"POST",body:d});if(!i.ok)throw new Error("Network response was not ok");return await i.json()};g.LivenessSDK=ae,g.verifyLiveness=ce,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})});
+  <%s key={someKey} {...props} />`,l,c,O,c),re[c+l]=!0)}if(c=null,o!==void 0&&(d(o),c=""+o),R(t)&&(d(t.key),c=""+t.key),"key"in t){o={};for(var K in t)K!=="key"&&(o[K]=t[K])}else o=t;return c&&g(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),a(e,c,o,n(),W,X)}function Y(e){T(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===L&&(e._payload.status==="fulfilled"?T(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function T(e){return typeof e=="object"&&e!==null&&e.$$typeof===N}var y=i,N=Symbol.for("react.transitional.element"),A=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),w=Symbol.for("react.strict_mode"),j=Symbol.for("react.profiler"),M=Symbol.for("react.consumer"),B=Symbol.for("react.context"),I=Symbol.for("react.forward_ref"),G=Symbol.for("react.suspense"),U=Symbol.for("react.suspense_list"),H=Symbol.for("react.memo"),L=Symbol.for("react.lazy"),J=Symbol.for("react.activity"),f=Symbol.for("react.client.reference"),S=y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,_=Object.prototype.hasOwnProperty,b=Array.isArray,k=console.createTask?console.createTask:function(){return null};y={react_stack_bottom_frame:function(e){return e()}};var v,$={},ee=y.react_stack_bottom_frame.bind(y,u)(),te=k(s(u)),re={};C.Fragment=E,C.jsx=function(e,t,o){var l=1e4>S.recentlyCreatedOwnerStacks++;return h(e,t,o,!1,l?Error("react-stack-top-frame"):ee,l?k(s(e)):te)},C.jsxs=function(e,t,o){var l=1e4>S.recentlyCreatedOwnerStacks++;return h(e,t,o,!0,l?Error("react-stack-top-frame"):ee,l?k(s(e)):te)}}()),C}process.env.NODE_ENV==="production"?z.exports=oe():z.exports=se();var r=z.exports;const ae=["Smile","Blink","Turn_Head","Thumbs_Up"],q=60,ie=p=>{if(!p)return null;const m=p.split(","),d=m[0].match(/:(.*?);/)[1],s=atob(m[1]);let n=s.length;const u=new Uint8Array(n);for(;n--;)u[n]=s.charCodeAt(n);return new Blob([u],{type:d})},le=({apiUrl:p,onComplete:m})=>{const d=i.useRef(null),s=i.useRef(null),n=i.useRef(null),[u,R]=i.useState([]),[g,F]=i.useState(0),[a,h]=i.useState("idle"),[Y,T]=i.useState(3),[y,N]=i.useState(q),[A,E]=i.useState(!1),[w,j]=i.useState(!1),[M,B]=i.useState(null),I=()=>{const f=[...ae].sort(()=>.5-Math.random()).slice(0,3);R(f),F(0),h("idle"),T(3),N(q),E(!1),j(!1)};i.useEffect(()=>{I()},[]);const G=()=>{I()};i.useEffect(()=>()=>{n.current&&clearInterval(n.current),s.current&&s.current.abort()},[]),i.useEffect(()=>{let f;return A&&y>0?f=setInterval(()=>{N(S=>S-1)},1e3):y===0&&a!=="success"&&(n.current&&(clearInterval(n.current),n.current=null),s.current&&s.current.abort(),h("timeout"),E(!1),j(!1),m&&m(!1)),()=>clearInterval(f)},[A,y,a]);const U=async()=>{if(a==="capturing"||a==="verifying")return;n.current&&clearInterval(n.current),A||E(!0),h("counting");let f=3;n.current=setInterval(()=>{f-=1,T(f),f===0&&(clearInterval(n.current),n.current=null,H())},1e3)},H=async()=>{if(!d.current)return;h("capturing");const f=[],S=20;for(let _=0;_<S;_++){if(!d.current||y<=0)return;try{const b=d.current.getScreenshot();b&&f.push(b)}catch{break}await new Promise(b=>setTimeout(b,100))}f.length>0&&a!=="timeout"&&L(f)},L=async f=>{if(a==="verifying"||a==="timeout")return;h("verifying"),s.current=new AbortController;const{signal:S}=s.current,_=new FormData;f.forEach((b,k)=>{const v=ie(b);v&&_.append("files",v,`frame_${k}.jpg`)}),_.append("challenge",u[g]);try{const b=await fetch(`${p}/v1/verify`,{method:"POST",body:_,signal:S});f=[];const k=await b.json();if(a==="timeout")return;if(k.is_live)if(g<2)F(v=>v+1),T(3),h("idle");else{const v=d.current.getScreenshot();v&&B(v),h("success"),E(!1),m&&m({success:!0,image:v})}else E(!1),j(!0),h("idle"),T(3)}catch{j(!0),h("idle")}finally{s.current=null}},J={Smile:"Show us a big SMILE! 😁",Blink:"BLINK your eyes rapidly! 👁️",Turn_Head:"Slowly TURN your head left or right! ↔️",Thumbs_Up:"Give a THUMBS UP! 👍"};return r.jsxs("div",{style:{textAlign:"center",padding:"20px",fontFamily:"sans-serif"},children:[A&&a!=="success"&&r.jsxs("div",{style:{fontSize:"20px",fontWeight:"bold",color:y<10?"red":"black"},children:["Time Remaining: ",y,"s"]}),w&&r.jsx("div",{style:ce,children:r.jsxs("div",{style:ue,children:[r.jsx("h3",{style:{color:"#dc3545"},children:"Action Not Detected"}),r.jsx("p",{children:"We couldn't verify that move. Please try again before time runs out!"}),r.jsx("button",{onClick:()=>{j(!1),U()},style:D,children:"Try Again"})]})}),a==="success"&&r.jsxs("div",{children:[r.jsx("h2",{children:"✅ Verification Passed!"}),M&&r.jsxs("div",{style:{margin:"20px auto",width:"200px"},children:[r.jsx("p",{children:"Verified Photo:"}),r.jsx("img",{src:M,alt:"Verified",style:{width:"100%",borderRadius:"10px",border:"3px solid #28a745"}})]}),r.jsx("button",{onClick:G,style:{...D,backgroundColor:"#6c757d"},children:"Verify Again"})]}),a==="timeout"&&r.jsxs("div",{children:[r.jsx("h2",{style:{color:"#dc3545"},children:"⏰ Session Expired"}),r.jsx("p",{children:"You didn't complete the challenges in time."}),r.jsx("p",{children:"Please ensure you follow the instructions and perform the tasks within the time limit. (60 seconds)"}),r.jsx("button",{onClick:I,style:D,children:"🔄 Try Again"})]}),["idle","counting","capturing","verifying"].includes(a)&&r.jsxs(r.Fragment,{children:[r.jsx("h2",{children:"Please be in a well-lit room where your face can be well seen."}),r.jsxs("h3",{children:["Challenge ",g+1," of 3"]}),r.jsx("h2",{style:{color:"#007bff"},children:J[u[g]]}),r.jsxs("div",{style:{position:"relative",width:"fit-content",margin:"auto",overflow:"hidden",borderRadius:"10px"},children:[r.jsx(ne,{audio:!1,ref:d,screenshotFormat:"image/jpeg",style:{borderRadius:"10px",width:"100%",maxWidth:"400px",transform:"scaleX(-1)"}}),r.jsx("div",{style:{...fe,borderColor:a==="capturing"?"#28a745":"rgba(255, 255, 255, 0.6)",borderStyle:a==="capturing"?"solid":"dashed"},children:r.jsx("div",{style:de})}),a==="counting"&&r.jsx("div",{style:V,children:Y}),a==="verifying"&&r.jsx("div",{style:V,children:"Analyzing..."}),a==="capturing"&&r.jsx("div",{style:{...V,background:"rgba(40, 167, 69, 0.3)"},children:"Recording..."})]}),r.jsx("div",{style:{marginTop:"20px"},children:a==="idle"&&r.jsx("button",{onClick:U,disabled:w,style:{...D,filter:w?"grayscale(1)":"none",cursor:w?"not-allowed":"pointer",opacity:w?.6:1},children:"I'm Ready"})})]})]})},V={position:"absolute",top:0,left:0,right:0,bottom:0,background:"rgba(0,0,0,0.5)",color:"white",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"48px",borderRadius:"10px"},D={padding:"10px 30px",fontSize:"18px",cursor:"pointer",backgroundColor:"#28a745",color:"white",border:"none",borderRadius:"5px"},ce={position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0,0,0,0.7)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:100,borderRadius:"10px"},ue={backgroundColor:"white",padding:"30px",borderRadius:"15px",maxWidth:"300px",boxShadow:"0 4px 15px rgba(0,0,0,0.3)",color:"#000"},fe={position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"260px",height:"240px",borderRadius:"50%",border:"2px dashed rgba(255, 255, 255, 0.6)",boxShadow:"0 0 0 9999px rgba(0, 0, 0, 0.5)",pointerEvents:"none",zIndex:10},de={position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:"50%",boxShadow:"inset 0 0 30px rgba(255, 255, 255, 0.2)"},pe=async(p,m,d)=>{const s=new FormData;m.forEach((u,R)=>{s.append("files",u,`frame_${R}.jpg`)}),s.append("challenge",d);const n=await fetch(`${p}/v1/verify`,{method:"POST",body:s});if(!n.ok)throw new Error("Network response was not ok");return await n.json()};x.LivenessSDK=le,x.verifyLiveness=pe,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@richard.fadiora/liveness-detection",
   "private": false,
-  "version": "1.0.4",
+  "version": "2.0.0",
   "type": "module",
   "files": [
     "dist"
@@ -25,6 +25,7 @@
     "react-webcam": "^7.2.0"
   },
   "dependencies": {
+    "@mediapipe/tasks-vision": "^0.10.32",
     "react-webcam": "^7.2.0"
   },
   "devDependencies": {