@jaak.ai/stamps 2.0.0-beta.1 → 2.0.0-beta.2

package/dist/esm/jaak-stamps.entry.js

@@ -11,6 +11,9 @@ const JaakStamps = class {
     get el() { return getElement(this); }
     debug = false;
     alignmentTolerance = 10; // Tolerancia en píxeles para considerar un lado alineado (escalado para 320x320)
+    maskSize = 90; // Porcentaje del video que ocupará la máscara (default 90%)
+    cropMargin = 0; // Margen en píxeles para el recorte del documento (default 0)
+    useDocumentClassification = false; // Habilita la clasificación automática de documentos para determinar si solicitar reverso
     captureCompleted;
     isReady;
     isVideoActive = false;
@@ -44,6 +47,8 @@ const JaakStamps = class {
     animationId;
     hasScreenshotTaken = false;
     lastDetectedBox;
+    mobileNetSession;
+    mobileNetClassMap;
     // Performance optimization properties
     frameSkipCounter = 0;
     FRAME_SKIP = 2; // Process every 3rd frame (reduces CPU by ~66%)
@@ -56,7 +61,9 @@ const JaakStamps = class {
     preprocessCtx;
     captureCanvas;
     captureCtx;
-    MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/detector-nano.onnx";
+    MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/ddmyp-v1.onnx";
+    MOBILENET_MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/cdmmp-v1.onnx";
+    MOBILENET_CLASSES_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/cdmmp-v1.json";
     INPUT_SIZE = 320;
     CONFIDENCE_THRESHOLD = 0.6;
     // ISO/IEC 7810 ID-1 standard dimensions (85.60mm x 53.98mm)
@@ -66,6 +73,18 @@ const JaakStamps = class {
             console.log(...args);
         }
     }
+    validateMaskSize() {
+        if (this.maskSize < 50 || this.maskSize > 100) {
+            console.warn(`maskSize debe estar entre 50 y 100. Valor actual: ${this.maskSize}. Usando valor por defecto: 90`);
+            this.maskSize = 90;
+        }
+    }
+    validateCropMargin() {
+        if (this.cropMargin < 0 || this.cropMargin > 100) {
+            console.warn(`cropMargin debe estar entre 0 y 100. Valor actual: ${this.cropMargin}. Usando valor por defecto: 0`);
+            this.cropMargin = 0;
+        }
+    }
     emitReadyEvent() {
         const isDocumentReady = !!window.ort && this.isModelPreloaded;
         this.isReady.emit(isDocumentReady);
@@ -79,6 +98,8 @@ const JaakStamps = class {
         return settings.facingMode === 'environment';
     }
     async componentDidLoad() {
+        this.validateMaskSize();
+        this.validateCropMargin();
         if (!window.ort) {
             const script = document.createElement('script');
             script.src = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js';
@@ -146,14 +167,15 @@ const JaakStamps = class {
         // Calculate what would be the max width if limited by video height
         const maxWidthByHeight = displayedVideoHeight * this.ID1_ASPECT_RATIO;
         let maskWidthInVideo, maskHeightInVideo;
+        const sizeRatio = this.maskSize / 100;
         if (maxWidthByHeight <= displayedVideoWidth) {
             // Video height is the limiting factor
-            maskHeightInVideo = displayedVideoHeight * 0.9; // Use 90% of available height
+            maskHeightInVideo = displayedVideoHeight * sizeRatio;
             maskWidthInVideo = maskHeightInVideo * this.ID1_ASPECT_RATIO;
         }
         else {
             // Video width is the limiting factor
-            maskWidthInVideo = displayedVideoWidth * 0.9; // Use 90% of available width
+            maskWidthInVideo = displayedVideoWidth * sizeRatio;
             maskHeightInVideo = maskWidthInVideo / this.ID1_ASPECT_RATIO;
         }
         // Convert to percentages of the container
@@ -247,25 +269,29 @@ const JaakStamps = class {
         }
         try {
             this.isLoading = true;
-            this.statusMessage = "Precargando modelo de detección...";
+            this.statusMessage = "Precargando modelos...";
             this.statusColor = "#007bff";
             const modelPath = this.MODEL_PATH;
-            this.debugLog('🤖 Preloading model:', modelPath);
+            this.debugLog('🤖 Preloading detection model:', modelPath);
             // Configure ONNX Runtime with device-specific optimizations
             const sessionOptions = this.getSessionOptions();
             this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
+            // Preload MobileNet model and classes only if classification is enabled
+            if (this.useDocumentClassification) {
+                await this.loadMobileNetModel();
+            }
             this.isModelPreloaded = true;
             this.isLoading = false;
-            this.statusMessage = "Modelo precargado. Listo para comenzar detección";
+            this.statusMessage = "Modelos precargados. Listo para comenzar detección";
             this.statusColor = "#28a745";
             this.emitReadyEvent();
-            this.debugLog('✅ Model preloaded successfully');
-            return { success: true, message: 'Model preloaded successfully' };
+            this.debugLog('✅ Models preloaded successfully');
+            return { success: true, message: 'Models preloaded successfully' };
         }
         catch (error) {
-            this.debugLog('❌ Error preloading model:', error);
+            this.debugLog('❌ Error preloading models:', error);
             this.isLoading = false;
-            this.statusMessage = "Error al precargar el modelo";
+            this.statusMessage = "Error al precargar los modelos";
             this.statusColor = "#ff6b6b";
             return { success: false, error: error.message };
         }
@@ -275,6 +301,80 @@ const JaakStamps = class {
             this.completeProcess(true);
         }
     }
+    async loadMobileNetModel() {
+        try {
+            this.debugLog('🤖 Loading MobileNet model...');
+            // Load class map
+            const classResponse = await fetch(this.MOBILENET_CLASSES_PATH);
+            if (!classResponse.ok) {
+                throw new Error(`Failed to load class map: ${this.MOBILENET_CLASSES_PATH}`);
+            }
+            this.mobileNetClassMap = await classResponse.json();
+            this.debugLog('📋 MobileNet classes loaded:', this.mobileNetClassMap);
+            // Load model
+            const sessionOptions = this.getSessionOptions();
+            this.mobileNetSession = await window.ort.InferenceSession.create(this.MOBILENET_MODEL_PATH, sessionOptions);
+            this.debugLog('✅ MobileNet model loaded successfully');
+        }
+        catch (error) {
+            this.debugLog('❌ Error loading MobileNet model:', error);
+            throw error;
+        }
+    }
+    preprocessMobileNet(canvas) {
+        // Create a temporary canvas for MobileNet preprocessing (224x224)
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = 224;
+        tempCanvas.height = 224;
+        const tempCtx = tempCanvas.getContext('2d');
+        // Draw the cropped image onto the 224x224 canvas
+        tempCtx.drawImage(canvas, 0, 0, 224, 224);
+        // Get image data and preprocess for MobileNet
+        const imageData = tempCtx.getImageData(0, 0, 224, 224);
+        const data = imageData.data;
+        const hw = 224 * 224;
+        const arr = new Float32Array(3 * hw);
+        // Normalize pixels: (pixel/255 - 0.5) / 0.5 = (pixel - 127.5) / 127.5
+        for (let i = 0; i < hw; i++) {
+            arr[i] = (data[i * 4 + 0] / 255 - 0.5) / 0.5; // R
+            arr[hw + i] = (data[i * 4 + 1] / 255 - 0.5) / 0.5; // G  
+            arr[2 * hw + i] = (data[i * 4 + 2] / 255 - 0.5) / 0.5; // B
+        }
+        return new window.ort.Tensor('float32', arr, [1, 3, 224, 224]);
+    }
+    async classifyDocument(canvas) {
+        if (!this.mobileNetSession || !this.mobileNetClassMap) {
+            this.debugLog('⚠️ MobileNet model not loaded');
+            return null;
+        }
+        try {
+            this.debugLog('🔍 Classifying document...');
+            // Preprocess image for MobileNet
+            const inputTensor = this.preprocessMobileNet(canvas);
+            // Run inference
+            const feeds = { input: inputTensor };
+            const results = await this.mobileNetSession.run(feeds);
+            const output = results[Object.keys(results)[0]].data;
+            // Find the class with highest confidence
+            const maxIdx = output.reduce((bestIdx, val, idx, arr) => val > arr[bestIdx] ? idx : bestIdx, 0);
+            const confidence = output[maxIdx];
+            const className = this.mobileNetClassMap[maxIdx.toString()] || "unknown";
+            this.debugLog('📄 Document classification result:', {
+                class: className,
+                confidence: confidence.toFixed(3),
+                classIndex: maxIdx
+            });
+            return {
+                class: className,
+                confidence: confidence,
+                classIndex: maxIdx
+            };
+        }
+        catch (error) {
+            this.debugLog('❌ Error classifying document:', error);
+            return null;
+        }
+    }
     cleanup() {
         if (this.animationId) {
             cancelAnimationFrame(this.animationId);
@@ -302,11 +402,16 @@ const JaakStamps = class {
             this.captureCtx = undefined;
             this.captureCanvas = undefined;
         }
-        // Disposed ONNX session
+        // Disposed ONNX sessions
         if (this.session) {
             this.session.release?.();
             this.session = undefined;
         }
+        if (this.mobileNetSession) {
+            this.mobileNetSession.release?.();
+            this.mobileNetSession = undefined;
+        }
+        this.mobileNetClassMap = undefined;
         this.isModelPreloaded = false;
         this.debugLog('🧹 Canvas pool cleaned up');
     }
@@ -437,18 +542,22 @@ const JaakStamps = class {
             // Check if model is already preloaded
             if (!this.session) {
                 this.isLoading = true;
-                this.statusMessage = "Cargando modelo de detección...";
+                this.statusMessage = "Cargando modelos...";
                 this.statusColor = "#007bff";
                 const modelPath = this.MODEL_PATH;
-                this.debugLog('🤖 Loading model:', modelPath);
+                this.debugLog('🤖 Loading detection model:', modelPath);
                 const sessionOptions = this.getSessionOptions();
                 this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
+                // Load MobileNet model if classification is enabled and not already loaded
+                if (this.useDocumentClassification && !this.mobileNetSession) {
+                    await this.loadMobileNetModel();
+                }
                 this.isModelPreloaded = true;
                 this.emitReadyEvent();
             }
             else {
-                this.debugLog('🚀 Using preloaded model');
-                this.statusMessage = "Usando modelo precargado...";
+                this.debugLog('🚀 Using preloaded models');
+                this.statusMessage = "Usando modelos precargados...";
                 this.statusColor = "#007bff";
             }
             this.statusMessage = "Configurando cámara...";
@@ -591,14 +700,15 @@ const JaakStamps = class {
         // Calculate mask dimensions using the same logic as updateMaskDimensions
         const maxWidthByHeight = displayedVideoHeight * this.ID1_ASPECT_RATIO;
         let visualMaskWidth, visualMaskHeight;
+        const sizeRatio = this.maskSize / 100;
         if (maxWidthByHeight <= displayedVideoWidth) {
             // Video height is the limiting factor
-            visualMaskHeight = displayedVideoHeight * 0.9;
+            visualMaskHeight = displayedVideoHeight * sizeRatio;
             visualMaskWidth = visualMaskHeight * this.ID1_ASPECT_RATIO;
         }
         else {
             // Video width is the limiting factor
-            visualMaskWidth = displayedVideoWidth * 0.9;
+            visualMaskWidth = displayedVideoWidth * sizeRatio;
             visualMaskHeight = visualMaskWidth / this.ID1_ASPECT_RATIO;
         }
         // Now map these visual mask dimensions to the distorted model space
@@ -666,7 +776,9 @@ const JaakStamps = class {
             corners?.forEach(corner => corner.classList.add('perfect-match'));
             if (!this.hasScreenshotTaken) {
                 this.lastDetectedBox = bestBox;
-                this.takeScreenshot();
+                this.takeScreenshot().catch(error => {
+                    this.debugLog('❌ Error taking screenshot:', error);
+                });
                 this.hasScreenshotTaken = true;
                 // Reset para permitir segunda captura
                 setTimeout(() => {
@@ -749,7 +861,7 @@ const JaakStamps = class {
             ctx.strokeRect(x, y, w, h);
         });
     }
-    takeScreenshot() {
+    async takeScreenshot() {
         if (!this.videoRef || !this.lastDetectedBox)
             return;
         // Activar animación
@@ -765,10 +877,10 @@ const JaakStamps = class {
         // Calcular las coordenadas de recorte basadas en la detección
         const scaleX = this.videoRef.videoWidth / this.INPUT_SIZE;
         const scaleY = this.videoRef.videoHeight / this.INPUT_SIZE;
-        const cropX = Math.max(0, this.lastDetectedBox.x * scaleX);
-        const cropY = Math.max(0, this.lastDetectedBox.y * scaleY);
-        const cropWidth = Math.min(this.lastDetectedBox.w * scaleX, this.videoRef.videoWidth - cropX);
-        const cropHeight = Math.min(this.lastDetectedBox.h * scaleY, this.videoRef.videoHeight - cropY);
+        const cropX = Math.max(0, (this.lastDetectedBox.x * scaleX) - this.cropMargin);
+        const cropY = Math.max(0, (this.lastDetectedBox.y * scaleY) - this.cropMargin);
+        const cropWidth = Math.min((this.lastDetectedBox.w * scaleX) + (2 * this.cropMargin), this.videoRef.videoWidth - cropX);
+        const cropHeight = Math.min((this.lastDetectedBox.h * scaleY) + (2 * this.cropMargin), this.videoRef.videoHeight - cropY);
         // OPTIMIZATION: Create temporary canvas only for cropped version
         // (We reuse main capture canvas for full frame)
         const croppedCanvas = document.createElement('canvas');
@@ -783,6 +895,29 @@ const JaakStamps = class {
             // Captura del frente usando canvas reutilizado
             this.capturedFullFrame = this.captureCanvas.toDataURL('image/png');
             this.capturedCroppedId = croppedCanvas.toDataURL('image/png');
+            // Check if document classification is enabled
+            if (this.useDocumentClassification) {
+                // Load MobileNet model if not loaded yet (lazy loading)
+                if (!this.mobileNetSession) {
+                    try {
+                        await this.loadMobileNetModel();
+                    }
+                    catch (error) {
+                        this.debugLog('⚠️ Failed to load classification model, continuing without classification:', error);
+                    }
+                }
+                // Classify the cropped document if model is available
+                if (this.mobileNetSession) {
+                    const classification = await this.classifyDocument(croppedCanvas);
+                    if (classification && classification.class === 'passport') {
+                        // If it's a passport, skip back capture since passports don't have a back side
+                        this.debugLog('📄 Passport detected - skipping back capture');
+                        this.completeProcess(true);
+                        return;
+                    }
+                }
+            }
+            // For other IDs, continue with normal flow (back capture)
             this.captureStep = 'back';
             this.statusMessage = "Voltee la identificación y muestre la parte trasera";
             this.statusColor = "#007bff";
@@ -912,7 +1047,7 @@ const JaakStamps = class {
         this.cleanup();
     }
     render() {
-        return (h("div", { key: 'b63a5966ee08d4de7b5d8a10dbf248150e8620ec', class: "detector-container" }, h("div", { key: '1c62d540a1802a758b90a543edfdc364123ae950', class: "video-container" }, h("video", { key: '18e066e0005c3b287983ebb29c9e4aa147eaaf8d', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), h("canvas", { key: '43cd238e38a5a2ff9c140800ac686580a7ca33b9', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (h("div", { key: 'f43db67b9d1ef47264092694c3ab8afa9925e258', class: "overlay-mask" }, h("div", { key: 'ac60d94edc4cfa6ccf91ba6e04d2be6e4368be97', class: "card-outline" }, h("div", { key: 'de6aca9bbfe778890adf4c69e8525a114c37f6d4', class: "side side-top" }), h("div", { key: '7ce7b1e2215b01ea5d714b8ecc988361e384b6f7', class: "side side-right" }), h("div", { key: 'b79a68f68facb42ca139d6a2bc8e1e6d7133872d', class: "side side-bottom" }), h("div", { key: '81d90c4a08cfc2267cec195a3b342c87bb1d07d0', class: "side side-left" }), h("div", { key: 'c93c83abb8e17a5cb9c1bd53b2e1239ef50c7bf4', class: "corner corner-tl" }), h("div", { key: '81ca7cf2aab7026e851bd226843a6db5807315d5', class: "corner corner-tr" }), h("div", { key: 'c451fe226ac15023ee9799443060f1da620cb3b3', class: "corner corner-bl" }), h("div", { key: '7c3e2b2a21bd37144fe6b4d5df67df625dc12103', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (h("div", { key: '74ab171b64bdf0e1269845b4fcd9bf8e2caf891d', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (h("button", { key: '2b2b9387ce8b023acf0d65c7f7b3480211f7cb2d', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")))), this.isCapturing && (h("div", { key: 'eabd88499f52098f79e434afcce73acb2727c411', class: "capture-animation" })), this.showFlipAnimation && (h("div", { key: '9affe6040a39260747db98db2b68a103fb719fbb', class: "flip-animation" }, h("div", { key: '8b25f3688a16f4b070664237a093122a6720edfb', class: "id-card-icon" }), h("div", { key: '805b11cfb4d06a25e02370b06f6cf15f0f0cf6b5', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (h("div", { key: 'cba337b6fef8b919425566c0c9c5de797d42c4c8', class: "success-animation" }, h("div", { key: '4a88df3f9285757b489b030ba985d720a8a3badf', class: "check-icon" }), h("div", { key: 'a0bdd89c2c6274330ba66a6b6bba86ab6c725979', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (h("div", { key: '564fc1333b0fb69102e26ac1da4e77786a9bc7a3', class: "loading-overlay" }, h("div", { key: '283e4a6315a39b26203e19a13f35389bc1870a0f', class: "loading-spinner" }), h("div", { key: '7e4f00a1fcee1bbf29d74c8be35a72aba2c1041a', class: "loading-text" }, this.statusMessage))), h("div", { key: '6cbe1fea1c4a7d3cb25cd34ee04becb5fa538dfd', class: "watermark" }, h("img", { key: '1bd4157b7f74753570ddf48682acf419a6de03ea', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+        return (h("div", { key: '42591479495df221b101555198a23288d7d765b0', class: "detector-container" }, h("div", { key: '2b9ab48572aa2fb5542b8a8dc1b70a0f2a6eca89', class: "video-container" }, h("video", { key: 'b9e84f2eb67fa6f7f158e19b90871a1eebee624b', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), h("canvas", { key: 'a82fc4826e220e696799b07b3510456f174a6628', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (h("div", { key: '9b3b838f99030e3dfa760fa0dd7c89ff24f26ed9', class: "overlay-mask" }, h("div", { key: 'f6a3b1ac2f12c1fb081f6b5eb853e627040396f4', class: "card-outline" }, h("div", { key: '6626259249ac5e0fd6ba665ab802af1ac2f9fc17', class: "side side-top" }), h("div", { key: '7a3195c96b2406b40b122f4267c2a251614cdede', class: "side side-right" }), h("div", { key: 'ece78305cfb083ada1d44de1d7d5226730879cc3', class: "side side-bottom" }), h("div", { key: '107468c583bbb01dd46c36c096e49be8e0b574ba', class: "side side-left" }), h("div", { key: 'c590f13b80c5e37c0ac0c68cfc2e2904b4345ebc', class: "corner corner-tl" }), h("div", { key: 'ab1e5aab179068ad1bc7b58ef3628d9618a877a8', class: "corner corner-tr" }), h("div", { key: '3a1db6cf1105bd3a2dfe7d4b998e79f6e40625ec', class: "corner corner-bl" }), h("div", { key: '5f9bc4e4557e5539335894160dccbaa2a6d6ac2d', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (h("div", { key: '8226d6721b0ae800f935e978a93113bd3b99656a', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (h("button", { key: '16cec7ca4a80ba0db1ace768826da17063eddb3e', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")))), this.isCapturing && (h("div", { key: 'bfdca0059eb50d37a77e8e43ef963ba7ed953edf', class: "capture-animation" })), this.showFlipAnimation && (h("div", { key: 'a1ad4b4f884d7d9f6090f148ddd6df19250073dd', class: "flip-animation" }, h("div", { key: 'e159ce385824dc049a6e9409d3747105c6f0a08e', class: "id-card-icon" }), h("div", { key: '6fcff650a3c7fdb16f8d327750e06055b9a93d0d', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (h("div", { key: 'c4b76ecb19c65969676e5156689c2c0b1c9a584e', class: "success-animation" }, h("div", { key: '12203a8fe7ee878089b3dda1d1142cde5489eed0', class: "check-icon" }), h("div", { key: 'a2d41c8944873d33106994b8d56c3ee1ee1ae9fc', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (h("div", { key: 'a155cd999fa40c35fa7b391cde7c1026edb250a7', class: "loading-overlay" }, h("div", { key: 'ccba76c5d4a472158c28bc564ba95bd65829b58d', class: "loading-spinner" }), h("div", { key: '23168f9bdcf4e993539288ff5703acaed13bb16a', class: "loading-text" }, this.statusMessage))), h("div", { key: '0107b82ad19726c1bab131e17892a46b04e08cfd', class: "watermark" }, h("img", { key: 'ad8831a6f77fa61805f22e3a27f5c5619ac1cc0e', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
     }
 };
 JaakStamps.style = myComponentCss;