@jaak.ai/stamps 2.0.0-dev.22 → 2.0.0-dev.24

package/dist/collection/components/my-component/my-component.js

@@ -4,6 +4,7 @@ export class JaakStamps {
     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)
     captureCompleted;
     isReady;
     isVideoActive = false;
@@ -37,6 +38,8 @@ export class JaakStamps {
     animationId;
     hasScreenshotTaken = false;
     lastDetectedBox;
+    mobileNetSession;
+    mobileNetClassMap;
     // Performance optimization properties
     frameSkipCounter = 0;
     FRAME_SKIP = 2; // Process every 3rd frame (reduces CPU by ~66%)
@@ -49,7 +52,9 @@ export class JaakStamps {
     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)
@@ -65,6 +70,12 @@ export class JaakStamps {
             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 +90,7 @@ export class JaakStamps {
     }
     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';
@@ -248,25 +260,27 @@ export class JaakStamps {
         }
         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
+            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 };
         }
@@ -276,6 +290,80 @@ export class JaakStamps {
             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);
@@ -303,11 +391,16 @@ export class JaakStamps {
             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');
     }
@@ -438,18 +531,22 @@ export class JaakStamps {
             // 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 not already loaded
+                if (!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...";
@@ -668,7 +765,9 @@ export class JaakStamps {
             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(() => {
@@ -751,7 +850,7 @@ export class JaakStamps {
             ctx.strokeRect(x, y, w, h);
         });
     }
-    takeScreenshot() {
+    async takeScreenshot() {
         if (!this.videoRef || !this.lastDetectedBox)
             return;
         // Activar animación
@@ -767,10 +866,10 @@ export class JaakStamps {
         // 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');
@@ -785,6 +884,15 @@ export class JaakStamps {
             // Captura del frente usando canvas reutilizado
             this.capturedFullFrame = this.captureCanvas.toDataURL('image/png');
             this.capturedCroppedId = croppedCanvas.toDataURL('image/png');
+            // Classify the cropped document
+            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";
@@ -914,7 +1022,7 @@ export class JaakStamps {
         this.cleanup();
     }
     render() {
-        return (h("div", { key: 'd812c8d6a607b4f2889be8f84384156f67ca51e3', class: "detector-container" }, h("div", { key: '215b581f8ebafa9295133fe397f4dcaea952e2bc', class: "video-container" }, h("video", { key: '2ac492b3c535857d8ee681dc0bfb91e6de25a4d0', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), h("canvas", { key: 'e51c2e4a4751d89cc662a26eff3d8360fa199f4b', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (h("div", { key: '2e0bb7df390e6286a758098abf929ce23e0820f2', class: "overlay-mask" }, h("div", { key: '3a8c73cef589adcf98991719e0adc0791cf51e13', class: "card-outline" }, h("div", { key: '908bdd704ff89f8ba9f2f30da068d2d2074f43ed', class: "side side-top" }), h("div", { key: 'd27227f2e03905d288cb5509cb4f8b98a5ade59e', class: "side side-right" }), h("div", { key: '7bdce198e7ff2dc459768b001edd3c52b0cc28a2', class: "side side-bottom" }), h("div", { key: '9f3c97b8d154a7e48b36accac1eb7e33ee2b3184', class: "side side-left" }), h("div", { key: '2ec0bfd6308505d8780453a22aeb9b25108b8a14', class: "corner corner-tl" }), h("div", { key: 'd6d1589901a1a2cba38451b31126524ccc009a9b', class: "corner corner-tr" }), h("div", { key: 'db4ddc071c5b29d2d5912f7a880cdf8654c0db70', class: "corner corner-bl" }), h("div", { key: 'cf9cf5d60189e512a5f4bfc08e24d2bf9ed3a499', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (h("div", { key: '0412e6f6ecca1af59710256a27d9ceb7b11c5998', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (h("button", { key: '26bc516d80fda38ea94926e574812362cd77a816', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")))), this.isCapturing && (h("div", { key: '49c64155438f74dc3e0c5e981dac62844315180d', class: "capture-animation" })), this.showFlipAnimation && (h("div", { key: '738adb391c667de96a0c30750e75de43803ae613', class: "flip-animation" }, h("div", { key: '9df006a94a68b9d6e4dd351fb0b88cf78e62b2ec', class: "id-card-icon" }), h("div", { key: '3e1736f4aeb5b14a3edc4f52991fc34ff85169ad', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (h("div", { key: 'dc46b715ef3e4fb98e5ee3f8449520db6bb68e53', class: "success-animation" }, h("div", { key: '641dda07b6545e9ca391e8c6149c7e29251d68ae', class: "check-icon" }), h("div", { key: 'ea53a4d547be89cc0e79d5b616a289405fea1e75', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (h("div", { key: 'bf30969faeb9b6bee4099d2462b6abeee7eca1ff', class: "loading-overlay" }, h("div", { key: 'c32d185c1376975ac20640c532b0f4e593caf0c0', class: "loading-spinner" }), h("div", { key: '2c5a64af6abd379f247640498dafa01efe661c5c', class: "loading-text" }, this.statusMessage))), h("div", { key: 'd16122cf20d25e51dc7a3c91753f541f41c2747e', class: "watermark" }, h("img", { key: 'ce18db8a5997dfa6e2ebae47b9a61b665f8106bd', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+        return (h("div", { key: 'd6cd4225500c44e5c7fb4f2b3dc453a055467066', class: "detector-container" }, h("div", { key: '6bd49b0bcd686648aeffb8fb95203dc0779f1d8a', class: "video-container" }, h("video", { key: 'd2666ce9d1f5b84703ac86fd4eb901f4298ed7d5', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), h("canvas", { key: 'e997f063450d81d2a15398f0761c9d06c28a85c9', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (h("div", { key: '4ccb8bf05091a7173255181eae1a8699fe512b56', class: "overlay-mask" }, h("div", { key: 'b35defa8c207b05e41d64c8e1eefc905d31fad55', class: "card-outline" }, h("div", { key: '6ed8dad63d6d79c1bb4a64f0b28467f5b29d778a', class: "side side-top" }), h("div", { key: '403d4a5ba681a58ad1870a4339e19b4f037a8795', class: "side side-right" }), h("div", { key: '3cb3276bb184a4b76419b4cb0b4fcb151a4df631', class: "side side-bottom" }), h("div", { key: 'ed7c9bec0e708ab282ba8b24a08d21b8126af27e', class: "side side-left" }), h("div", { key: '157be211355bf9260dc7a73d03831dbb1a2945e3', class: "corner corner-tl" }), h("div", { key: 'b19af5f319333ff05f981063af939d2c4cfc9b5f', class: "corner corner-tr" }), h("div", { key: '6fcd3e2c8842261dcd32c36e6df5b2f3dd0c8fc8', class: "corner corner-bl" }), h("div", { key: '7caab5eaee62f3f9039075b3748083c89c8127e0', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (h("div", { key: 'e3dd42ddb75b22aeef438d8651955f3dc039f00c', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (h("button", { key: '54b8651817cd52bad2f34ac1413a4b1e21166cee', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")))), this.isCapturing && (h("div", { key: '853707a4fa71eeacbee7985e619fca80d6522cbd', class: "capture-animation" })), this.showFlipAnimation && (h("div", { key: '246ed3f5dc57ee57345105cdebe5f950d5ff4c90', class: "flip-animation" }, h("div", { key: 'f03c6c87c8f5e98a32176cca061d369a521da2e8', class: "id-card-icon" }), h("div", { key: 'e357785b076a9e41ea4f9b3d9c14e847bacc9604', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (h("div", { key: 'df3adaaecd3d547938638c58ccc0e89f8325fc23', class: "success-animation" }, h("div", { key: 'a023985b8afd6ed72f9e1c2ee63e2c7ba9fb960b', class: "check-icon" }), h("div", { key: '739ff7f329f2131061a6860529c07c8819800aab', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (h("div", { key: '9b02df640528a19cb15e5dbabf9ecb43afbceffa', class: "loading-overlay" }, h("div", { key: '3652c8e355ea7fe623c478229bf548bdf30e399a', class: "loading-spinner" }), h("div", { key: '334f4469b5672f6af78b8679c15ed8c59ecefa85', class: "loading-text" }, this.statusMessage))), h("div", { key: 'a0b7c9b92771cff96e97bd67da2fd3090b080f8a', class: "watermark" }, h("img", { key: 'b5c8f0de1d8138d4a0c80526fd33b2daefa86b16', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
     }
     static get is() { return "jaak-stamps"; }
     static get encapsulation() { return "shadow"; }
@@ -989,6 +1097,26 @@ export class JaakStamps {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "90"
+            },
+            "cropMargin": {
+                "type": "number",
+                "attribute": "crop-margin",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
             }
         };
     }