@tn3w/openage 1.0.0

package/src/face-tracker.js

@@ -0,0 +1,132 @@
+import { MEDIAPIPE_CDN, MEDIAPIPE_WASM, MEDIAPIPE_VISION, MEDIAPIPE_MODEL } from './constants.js';
+
+let FaceLandmarker = null;
+let landmarker = null;
+let lastTimestampMs = -1;
+let visionModule = null;
+
+export async function loadVision() {
+    if (visionModule) return visionModule;
+    visionModule = await import(MEDIAPIPE_VISION);
+    FaceLandmarker = visionModule.FaceLandmarker;
+    return visionModule;
+}
+
+export async function loadModel() {
+    const response = await fetch(MEDIAPIPE_MODEL);
+    if (!response.ok) {
+        throw new Error('Failed to load face landmarker model');
+    }
+    return new Uint8Array(await response.arrayBuffer());
+}
+
+export async function initTracker(modelBuffer) {
+    const vision = await loadVision();
+    const resolver = await vision.FilesetResolver.forVisionTasks(MEDIAPIPE_WASM);
+
+    if (landmarker) {
+        landmarker.close();
+    }
+    lastTimestampMs = -1;
+
+    landmarker = await FaceLandmarker.createFromOptions(resolver, {
+        baseOptions: {
+            modelAssetBuffer: new Uint8Array(modelBuffer),
+            delegate: 'GPU',
+        },
+        runningMode: 'VIDEO',
+        numFaces: 2,
+        outputFaceBlendshapes: true,
+        outputFacialTransformationMatrixes: true,
+    });
+}
+
+export function track(video, timestampMs) {
+    if (!landmarker) return null;
+
+    const normalized = normalizeTimestamp(timestampMs);
+    const result = landmarker.detectForVideo(video, normalized);
+    const faceCount = result.faceLandmarks?.length ?? 0;
+
+    if (faceCount === 0) {
+        return { faceCount: 0, timestampMs: normalized };
+    }
+
+    const landmarks = result.faceLandmarks[0];
+
+    return {
+        faceCount,
+        timestampMs: normalized,
+        landmarks,
+        blendshapes: parseBlendshapes(result.faceBlendshapes?.[0]),
+        headPose: extractHeadPose(result.facialTransformationMatrixes?.[0]),
+        boundingBox: computeBoundingBox(landmarks),
+    };
+}
+
+export function destroyTracker() {
+    if (landmarker) {
+        landmarker.close();
+        landmarker = null;
+    }
+    lastTimestampMs = -1;
+}
+
+export function isTrackerReady() {
+    return landmarker !== null;
+}
+
+function normalizeTimestamp(timestampMs) {
+    const safe = Number.isFinite(timestampMs) ? timestampMs : performance.now();
+    const whole = Math.floor(safe);
+    const normalized = Math.max(whole, lastTimestampMs + 1);
+    lastTimestampMs = normalized;
+    return normalized;
+}
+
+function parseBlendshapes(blendshapeResult) {
+    if (!blendshapeResult?.categories) return {};
+    const map = {};
+    for (const category of blendshapeResult.categories) {
+        map[category.categoryName] = category.score;
+    }
+    return map;
+}
+
+function extractHeadPose(matrix) {
+    if (!matrix?.data || matrix.data.length < 16) {
+        return { yaw: 0, pitch: 0, roll: 0 };
+    }
+    const m = matrix.data;
+    const deg = 180 / Math.PI;
+    return {
+        yaw: Math.atan2(m[8], m[10]) * deg,
+        pitch: Math.asin(-Math.max(-1, Math.min(1, m[9]))) * deg,
+        roll: Math.atan2(m[1], m[5]) * deg,
+    };
+}
+
+function computeBoundingBox(landmarks) {
+    let minX = 1,
+        minY = 1,
+        maxX = 0,
+        maxY = 0;
+
+    for (const point of landmarks) {
+        if (point.x < minX) minX = point.x;
+        if (point.y < minY) minY = point.y;
+        if (point.x > maxX) maxX = point.x;
+        if (point.y > maxY) maxY = point.y;
+    }
+
+    const width = maxX - minX;
+    const height = maxY - minY;
+
+    return {
+        x: minX,
+        y: minY,
+        width,
+        height,
+        area: width * height,
+    };
+}

package/src/index.d.ts

@@ -0,0 +1,91 @@
+import { WidgetParams } from "./widget";
+import { TokenPayload } from "./transport";
+
+export type OpenAgeEvent =
+  | "verified"
+  | "expired"
+  | "error"
+  | "opened"
+  | "closed";
+
+export interface OpenAge {
+  render(
+    container: string | HTMLElement,
+    params?: WidgetParams
+  ): string;
+
+  open(params?: WidgetParams): string;
+
+  bind(
+    element: string | HTMLElement,
+    params?: WidgetParams
+  ): () => void;
+
+  reset(widgetId: string): void;
+  remove(widgetId: string): void;
+  getToken(widgetId: string): string | null;
+  execute(widgetId: string): void;
+
+  challenge(params?: WidgetParams): Promise<string>;
+
+  on(
+    event: OpenAgeEvent,
+    handler: (...args: any[]) => void
+  ): void;
+
+  off(
+    event: OpenAgeEvent,
+    handler: (...args: any[]) => void
+  ): void;
+
+  once(
+    event: OpenAgeEvent,
+    handler: (...args: any[]) => void
+  ): void;
+
+  verify(token: string): Promise<TokenPayload | null>;
+  decode(token: string): TokenPayload | null;
+
+  version: string;
+}
+
+declare const OpenAge: OpenAge;
+export default OpenAge;
+
+export {
+  render,
+  open,
+  bind,
+  reset,
+  remove,
+  getToken,
+  execute,
+  challenge,
+  on,
+  off,
+  once,
+} from "./index";
+
+export { verify, decode } from "./transport";
+export { version } from "./constants";
+
+export type { WidgetParams } from "./widget";
+export type { TokenPayload } from "./transport";
+export type { TrackingResult, HeadPose, BoundingBox } from "./face-tracker";
+export type { LivenessSession, LivenessTask } from "./liveness";
+export type { AgeResult } from "./age-estimator";
+export type { Transport, TransportResult } from "./transport";
+
+declare global {
+  interface Window {
+    openage?: {
+      sitekey?: string;
+      server?: string;
+      mode?: "serverless" | "sitekey" | "custom";
+      locale?: string;
+      theme?: "light" | "dark" | "auto";
+      render?: "explicit";
+    };
+    OpenAge: OpenAge;
+  }
+}

package/src/index.js

@@ -0,0 +1,303 @@
+import { Widget, createModalWidget } from './widget.js';
+import { runChallenge } from './challenge.js';
+import { verifyToken, decodeToken } from './transport.js';
+import { VERSION } from './constants.js';
+
+export class EventEmitter {
+    constructor() {
+        this.listeners = new Map();
+    }
+
+    on(event, handler) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, new Set());
+        }
+        this.listeners.get(event).add(handler);
+        return this;
+    }
+
+    off(event, handler) {
+        const handlers = this.listeners.get(event);
+        if (handlers) handlers.delete(handler);
+        return this;
+    }
+
+    once(event, handler) {
+        const wrapper = (...args) => {
+            this.off(event, wrapper);
+            handler(...args);
+        };
+        wrapper._original = handler;
+        return this.on(event, wrapper);
+    }
+
+    emit(event, ...args) {
+        const handlers = this.listeners.get(event);
+        if (!handlers) return;
+        for (const handler of [...handlers]) {
+            handler(...args);
+        }
+    }
+
+    removeAllListeners(event) {
+        if (event) {
+            this.listeners.delete(event);
+        } else {
+            this.listeners.clear();
+        }
+        return this;
+    }
+}
+
+const emitter = new EventEmitter();
+const widgets = new Map();
+
+function normalizeParams(params) {
+    const globalConfig = typeof window !== 'undefined' ? window.openage || {} : {};
+
+    return {
+        mode: 'serverless',
+        theme: 'auto',
+        size: 'normal',
+        minAge: 18,
+        ...globalConfig,
+        ...params,
+    };
+}
+
+function startWidget(widget) {
+    widget.onChallenge = () => {
+        emitter.emit('opened', widget.id);
+        runChallenge(widget, emitter);
+    };
+}
+
+function render(container, params = {}) {
+    const normalized = normalizeParams(params);
+    const widget = new Widget(container, normalized);
+    widgets.set(widget.id, widget);
+    startWidget(widget);
+    return widget.id;
+}
+
+function open(params = {}) {
+    const normalized = normalizeParams(params);
+    const widget = createModalWidget(normalized);
+    widget.anchorElement = normalized.anchorElement || null;
+    widgets.set(widget.id, widget);
+
+    widget.onChallenge = () => {
+        emitter.emit('opened', widget.id);
+        runChallenge(widget, emitter);
+    };
+
+    widget.startChallenge();
+    return widget.id;
+}
+
+function bind(element, params = {}) {
+    const normalized = normalizeParams(params);
+    const target = typeof element === 'string' ? document.querySelector(element) : element;
+
+    if (!target) {
+        throw new Error('OpenAge: element not found');
+    }
+
+    let isReplayingClick = false;
+    let activeWidgetId = null;
+
+    const replayTargetClick = () => {
+        isReplayingClick = true;
+        try {
+            target.click();
+        } finally {
+            isReplayingClick = false;
+        }
+    };
+
+    const clearActiveWidget = () => {
+        activeWidgetId = null;
+    };
+
+    const handler = (event) => {
+        if (isReplayingClick || activeWidgetId) {
+            return;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation?.();
+
+        const widgetId = open({
+            ...normalized,
+            anchorElement: target,
+            callback: (token) => {
+                normalized.callback?.(token);
+                clearActiveWidget();
+                replayTargetClick();
+            },
+            errorCallback: (error) => {
+                clearActiveWidget();
+                normalized.errorCallback?.(error);
+            },
+            closeCallback: () => {
+                clearActiveWidget();
+                normalized.closeCallback?.();
+            },
+        });
+
+        activeWidgetId = widgetId;
+
+        return widgetId;
+    };
+
+    target.addEventListener('click', handler, true);
+
+    return () => {
+        target.removeEventListener('click', handler, true);
+    };
+}
+
+function reset(widgetId) {
+    widgets.get(widgetId)?.reset();
+}
+
+function remove(widgetId) {
+    const widget = widgets.get(widgetId);
+    if (!widget) return;
+    widget.destroy();
+    widgets.delete(widgetId);
+}
+
+function getToken(widgetId) {
+    return widgets.get(widgetId)?.getToken() || null;
+}
+
+function execute(widgetId) {
+    const widget = widgets.get(widgetId);
+    if (!widget) return;
+    widget.startChallenge();
+}
+
+function challenge(params = {}) {
+    return new Promise((resolve, reject) => {
+        open({
+            ...params,
+            callback: (token) => resolve(token),
+            errorCallback: (error) => reject(typeof error === 'string' ? new Error(error) : error),
+            closeCallback: () => reject(new Error('User dismissed')),
+        });
+    });
+}
+
+function on(event, handler) {
+    emitter.on(event, handler);
+}
+
+function off(event, handler) {
+    emitter.off(event, handler);
+}
+
+function once(event, handler) {
+    emitter.once(event, handler);
+}
+
+function autoRender() {
+    if (typeof document === 'undefined') return;
+
+    const globalConfig = typeof window !== 'undefined' ? window.openage || {} : {};
+
+    if (globalConfig.render === 'explicit') return;
+
+    const elements = document.querySelectorAll('.openage');
+
+    for (const element of elements) {
+        const params = {
+            sitekey: element.dataset.sitekey,
+            theme: element.dataset.theme,
+            size: element.dataset.size,
+            action: element.dataset.action,
+            mode: element.dataset.mode,
+            server: element.dataset.server,
+        };
+
+        if (element.dataset.callback) {
+            params.callback = (token) => {
+                const fn = window[element.dataset.callback];
+                if (typeof fn === 'function') fn(token);
+            };
+        }
+
+        if (element.dataset.errorCallback) {
+            params.errorCallback = (error) => {
+                const fn = window[element.dataset.errorCallback];
+                if (typeof fn === 'function') fn(error);
+            };
+        }
+
+        if (element.dataset.expiredCallback) {
+            params.expiredCallback = () => {
+                const fn = window[element.dataset.expiredCallback];
+                if (typeof fn === 'function') fn();
+            };
+        }
+
+        if (element.dataset.bind) {
+            const target = document.getElementById(element.dataset.bind);
+            if (target) {
+                bind(target, params);
+                continue;
+            }
+        }
+
+        render(element, params);
+    }
+
+    const onloadName = document.currentScript?.dataset?.onload;
+    if (onloadName && typeof window[onloadName] === 'function') {
+        window[onloadName]();
+    }
+}
+
+if (typeof document !== 'undefined') {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', autoRender);
+    } else {
+        autoRender();
+    }
+}
+
+const OpenAge = {
+    render,
+    open,
+    bind,
+    reset,
+    remove,
+    getToken,
+    execute,
+    challenge,
+    on,
+    off,
+    once,
+    verify: verifyToken,
+    decode: decodeToken,
+    version: VERSION,
+};
+
+export default OpenAge;
+export {
+    render,
+    open,
+    bind,
+    reset,
+    remove,
+    getToken,
+    execute,
+    challenge,
+    on,
+    off,
+    once,
+    verifyToken as verify,
+    decodeToken as decode,
+    VERSION as version,
+};

package/src/liveness.d.ts

@@ -0,0 +1,62 @@
+import { TrackingResult } from "./face-tracker";
+
+export interface LivenessTask {
+  id: string;
+  instruction: string;
+  check: (history: MotionEntry[]) => boolean;
+}
+
+export interface MotionEntry {
+  timestamp: number;
+  headPose: { yaw: number; pitch: number; roll: number };
+  blendshapes: Record<string, number>;
+  boundingBox: { area: number; [key: string]: number };
+}
+
+export interface LivenessSession {
+  tasks: LivenessTask[];
+  currentIndex: number;
+  history: MotionEntry[];
+  taskStartTime: number;
+  completedTasks: number;
+  requiredPasses: number;
+  failed: boolean;
+  failReason: string | null;
+}
+
+export declare function pickTasks(
+  count?: number
+): LivenessTask[];
+
+export declare function createSession(
+  tasks?: LivenessTask[]
+): LivenessSession;
+
+export declare function processFrame(
+  session: LivenessSession,
+  trackingResult: TrackingResult
+): void;
+
+export declare function isComplete(
+  session: LivenessSession
+): boolean;
+
+export declare function isPassed(
+  session: LivenessSession
+): boolean;
+
+export declare function currentInstruction(
+  session: LivenessSession
+): string | null;
+
+export declare function currentTaskId(
+  session: LivenessSession
+): string | null;
+
+export declare function progress(
+  session: LivenessSession
+): number;
+
+export declare function isSuspicious(
+  history: MotionEntry[]
+): boolean;