@jaak.ai/stamps 2.0.0-beta.2 → 2.0.0-dev.17

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

@@ -3,11 +3,7 @@ export class JaakStamps {
     el;
     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;
     statusMessage = 'Presione el botón para activar la cámara';
     statusColor = '#aaa';
@@ -30,7 +26,6 @@ export class JaakStamps {
     isDetectionPaused = false;
     isLoading = false;
     isModelPreloaded = false;
-    isMaskReady = false;
     videoRef;
     canvasRef;
     session;
@@ -39,8 +34,6 @@ 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%)
@@ -53,35 +46,16 @@ export class JaakStamps {
     preprocessCtx;
     captureCanvas;
     captureCtx;
-    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";
+    MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/detector-nano.onnx";
     INPUT_SIZE = 320;
     CONFIDENCE_THRESHOLD = 0.6;
-    // ISO/IEC 7810 ID-1 standard dimensions (85.60mm x 53.98mm)
-    ID1_ASPECT_RATIO = 85.60 / 53.98; // 1.5863320574...
+    MASK_WIDTH = 280;
+    MASK_HEIGHT = 176;
     debugLog(...args) {
         if (this.debug) {
             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);
-        this.debugLog('🟢 isReady event emitted:', isDocumentReady);
-    }
     isRearCamera(stream) {
         const videoTrack = stream.getVideoTracks()[0];
         if (!videoTrack)
@@ -90,109 +64,13 @@ export class JaakStamps {
         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';
             document.head.appendChild(script);
-            // Wait for ONNX runtime to load before emitting ready event
-            script.onload = () => {
-                this.emitReadyEvent();
-            };
-        }
-        else {
-            // ONNX runtime already loaded
-            this.emitReadyEvent();
         }
         // Initialize canvas pool for better performance
         this.initializeCanvasPool();
-        this.setupResizeObserver();
-    }
-    setupResizeObserver() {
-        if ('ResizeObserver' in window && this.canvasRef) {
-            const resizeObserver = new ResizeObserver(() => {
-                this.handleResize();
-            });
-            resizeObserver.observe(this.canvasRef.parentElement);
-        }
-    }
-    handleResize() {
-        if (this.canvasRef) {
-            const container = this.canvasRef.parentElement;
-            const rect = container.getBoundingClientRect();
-            // Set canvas size to match container
-            this.canvasRef.width = rect.width;
-            this.canvasRef.height = rect.height;
-            // Update mask positioning based on container and video dimensions
-            this.updateMaskDimensions(rect);
-            this.debugLog('📐 Canvas resized:', { width: rect.width, height: rect.height });
-        }
-    }
-    updateMaskDimensions(containerRect) {
-        if (!this.videoRef)
-            return;
-        const videoWidth = this.videoRef.videoWidth;
-        const videoHeight = this.videoRef.videoHeight;
-        if (videoWidth === 0 || videoHeight === 0)
-            return;
-        // Calculate video aspect ratio and container aspect ratio
-        const videoAspectRatio = videoWidth / videoHeight;
-        const containerAspectRatio = containerRect.width / containerRect.height;
-        // Determine how video fits in container (letterboxed or pillarboxed)
-        let displayedVideoWidth, displayedVideoHeight;
-        let videoOffsetX = 0, videoOffsetY = 0;
-        if (videoAspectRatio > containerAspectRatio) {
-            // Video is wider - letterboxed (black bars top/bottom)
-            displayedVideoWidth = containerRect.width;
-            displayedVideoHeight = containerRect.width / videoAspectRatio;
-            videoOffsetY = (containerRect.height - displayedVideoHeight) / 2;
-        }
-        else {
-            // Video is taller - pillarboxed (black bars left/right)
-            displayedVideoHeight = containerRect.height;
-            displayedVideoWidth = containerRect.height * videoAspectRatio;
-            videoOffsetX = (containerRect.width - displayedVideoWidth) / 2;
-        }
-        // Calculate maximum possible mask size while preserving exact ID-1 aspect ratio
-        // Determine the limiting dimension based on video orientation and ID-1 proportions
-        // 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 * sizeRatio;
-            maskWidthInVideo = maskHeightInVideo * this.ID1_ASPECT_RATIO;
-        }
-        else {
-            // Video width is the limiting factor
-            maskWidthInVideo = displayedVideoWidth * sizeRatio;
-            maskHeightInVideo = maskWidthInVideo / this.ID1_ASPECT_RATIO;
-        }
-        // Convert to percentages of the container
-        const maskWidthPercent = (maskWidthInVideo / containerRect.width) * 100;
-        const maskHeightPercent = (maskHeightInVideo / containerRect.height) * 100;
-        // Calculate the center position of the displayed video area
-        const videoCenterX = videoOffsetX + (displayedVideoWidth / 2);
-        const videoCenterY = videoOffsetY + (displayedVideoHeight / 2);
-        // Convert to percentages of the container
-        const videoCenterXPercent = (videoCenterX / containerRect.width) * 100;
-        const videoCenterYPercent = (videoCenterY / containerRect.height) * 100;
-        // Update CSS custom properties for mask sizing and positioning
-        this.el.style.setProperty('--mask-width', `${maskWidthPercent}%`);
-        this.el.style.setProperty('--mask-height', `${maskHeightPercent}%`);
-        this.el.style.setProperty('--mask-center-x', `${videoCenterXPercent}%`);
-        this.el.style.setProperty('--mask-center-y', `${videoCenterYPercent}%`);
-        // Mark mask as ready now that dimensions are calculated
-        this.isMaskReady = true;
-        this.debugLog('🎯 Mask dimensions updated:', {
-            video: { width: videoWidth, height: videoHeight },
-            displayed: { width: displayedVideoWidth, height: displayedVideoHeight },
-            mask: { widthPercent: maskWidthPercent, heightPercent: maskHeightPercent },
-            center: { x: videoCenterXPercent, y: videoCenterYPercent },
-            offset: { x: videoOffsetX, y: videoOffsetY }
-        });
     }
     initializeCanvasPool() {
         // Preprocess canvas - reused for every inference
@@ -261,29 +139,24 @@ export class JaakStamps {
         }
         try {
             this.isLoading = true;
-            this.statusMessage = "Precargando modelos...";
+            this.statusMessage = "Precargando modelo de detección...";
             this.statusColor = "#007bff";
             const modelPath = this.MODEL_PATH;
-            this.debugLog('🤖 Preloading detection model:', modelPath);
+            this.debugLog('🤖 Preloading 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 = "Modelos precargados. Listo para comenzar detección";
+            this.statusMessage = "Modelo precargado. Listo para comenzar detección";
             this.statusColor = "#28a745";
-            this.emitReadyEvent();
-            this.debugLog('✅ Models preloaded successfully');
-            return { success: true, message: 'Models preloaded successfully' };
+            this.debugLog('✅ Model preloaded successfully');
+            return { success: true, message: 'Model preloaded successfully' };
         }
         catch (error) {
-            this.debugLog('❌ Error preloading models:', error);
+            this.debugLog('❌ Error preloading model:', error);
             this.isLoading = false;
-            this.statusMessage = "Error al precargar los modelos";
+            this.statusMessage = "Error al precargar el modelo";
             this.statusColor = "#ff6b6b";
             return { success: false, error: error.message };
         }
@@ -293,80 +166,6 @@ 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);
@@ -394,73 +193,22 @@ export class JaakStamps {
             this.captureCtx = undefined;
             this.captureCanvas = undefined;
         }
-        // Disposed ONNX sessions
+        // Disposed ONNX session
         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');
     }
-    async getMaxResolution() {
-        try {
-            // Primero obtén un stream básico para acceder a las capacidades
-            const tempStream = await navigator.mediaDevices.getUserMedia({
-                video: { facingMode: "environment" }
-            });
-            const videoTrack = tempStream.getVideoTracks()[0];
-            const capabilities = videoTrack.getCapabilities();
-            // Detener el stream temporal
-            tempStream.getTracks().forEach(track => track.stop());
-            // Construir restricciones con resolución optimizada para tablets
-            const constraints = {
-                facingMode: "environment"
-            };
-            if (capabilities.width && capabilities.height) {
-                // Limitar resolución máxima para tablets para evitar problemas de rendimiento
-                const maxWidth = Math.min(capabilities.width.max, 1920);
-                const maxHeight = Math.min(capabilities.height.max, 1080);
-                // Para tablets, usar resolución moderada en lugar de máxima
-                const isTablet = /iPad|Android/i.test(navigator.userAgent) && window.innerWidth >= 768;
-                if (isTablet) {
-                    constraints.width = { ideal: Math.min(maxWidth, 1280) };
-                    constraints.height = { ideal: Math.min(maxHeight, 720) };
-                }
-                else {
-                    constraints.width = { ideal: maxWidth };
-                    constraints.height = { ideal: maxHeight };
-                }
-                this.debugLog('📐 Resolution capabilities:', {
-                    maxWidth: capabilities.width.max,
-                    maxHeight: capabilities.height.max,
-                    selectedWidth: constraints.width.ideal,
-                    selectedHeight: constraints.height.ideal,
-                    isTablet
-                });
-            }
-            return constraints;
-        }
-        catch (err) {
-            this.debugLog('⚠️ Could not get capabilities, using fallback');
-            // Fallback optimizado para tablets
-            const isTablet = /iPad|Android/i.test(navigator.userAgent) && window.innerWidth >= 768;
-            return {
-                facingMode: "environment",
-                width: { ideal: isTablet ? 1280 : 1920 },
-                height: { ideal: isTablet ? 720 : 1080 }
-            };
-        }
-    }
     async setupCamera() {
         try {
-            const constraints = await this.getMaxResolution();
             const stream = await navigator.mediaDevices.getUserMedia({
-                video: constraints,
+                video: {
+                    width: { exact: 640 },
+                    height: { exact: 640 },
+                    facingMode: "environment"
+                },
                 audio: false
             });
             if (this.videoRef) {
@@ -475,12 +223,6 @@ export class JaakStamps {
                     this.videoRef.onloadedmetadata = async () => {
                         await this.videoRef.play();
                         this.isVideoActive = true;
-                        // Update mask dimensions once video is loaded
-                        if (this.canvasRef) {
-                            const container = this.canvasRef.parentElement;
-                            const rect = container.getBoundingClientRect();
-                            this.updateMaskDimensions(rect);
-                        }
                         resolve();
                     };
                 });
@@ -534,22 +276,17 @@ export class JaakStamps {
             // Check if model is already preloaded
             if (!this.session) {
                 this.isLoading = true;
-                this.statusMessage = "Cargando modelos...";
+                this.statusMessage = "Cargando modelo de detección...";
                 this.statusColor = "#007bff";
                 const modelPath = this.MODEL_PATH;
-                this.debugLog('🤖 Loading detection model:', modelPath);
+                this.debugLog('🤖 Loading 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 models');
-                this.statusMessage = "Usando modelos precargados...";
+                this.debugLog('🚀 Using preloaded model');
+                this.statusMessage = "Usando modelo precargado...";
                 this.statusColor = "#007bff";
             }
             this.statusMessage = "Configurando cámara...";
@@ -662,58 +399,13 @@ export class JaakStamps {
         return isCentered && isGoodSize;
     }
     checkSideAlignment(box) {
-        if (!this.videoRef)
-            return { top: false, right: false, bottom: false, left: false };
-        // Get video dimensions to calculate actual mask boundaries in model space
-        const videoWidth = this.videoRef.videoWidth;
-        const videoHeight = this.videoRef.videoHeight;
-        if (videoWidth === 0 || videoHeight === 0) {
-            return { top: false, right: false, bottom: false, left: false };
-        }
-        // Calculate video aspect ratio
-        const videoAspectRatio = videoWidth / videoHeight;
-        // The model sees video stretched to 320x320, but we need to calculate where
-        // the mask should be in this distorted space to match the visual mask
-        // In the visual display, we calculate mask size based on the limiting dimension
-        // We need to replicate this logic but account for the distortion in model space
-        // Calculate the "display" dimensions (what the visual mask calculations use)
-        const containerAspectRatio = 1; // Assume square container for simplicity
-        let displayedVideoWidth, displayedVideoHeight;
-        if (videoAspectRatio > containerAspectRatio) {
-            // Video is wider - letterboxed in display
-            displayedVideoWidth = this.INPUT_SIZE;
-            displayedVideoHeight = this.INPUT_SIZE / videoAspectRatio;
-        }
-        else {
-            // Video is taller - pillarboxed in display  
-            displayedVideoHeight = this.INPUT_SIZE;
-            displayedVideoWidth = this.INPUT_SIZE * videoAspectRatio;
-        }
-        // 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 * sizeRatio;
-            visualMaskWidth = visualMaskHeight * this.ID1_ASPECT_RATIO;
-        }
-        else {
-            // Video width is the limiting factor
-            visualMaskWidth = displayedVideoWidth * sizeRatio;
-            visualMaskHeight = visualMaskWidth / this.ID1_ASPECT_RATIO;
-        }
-        // Now map these visual mask dimensions to the distorted model space
-        // The model stretches video to 320x320, so we need to apply the inverse transformation
-        const modelMaskWidth = visualMaskWidth * (this.INPUT_SIZE / displayedVideoWidth);
-        const modelMaskHeight = visualMaskHeight * (this.INPUT_SIZE / displayedVideoHeight);
-        // Calculate mask boundaries in model coordinate system (always centered in 320x320)
+        // Obtener las coordenadas del marco de referencia (máscara)
         const maskCenterX = this.INPUT_SIZE / 2;
         const maskCenterY = this.INPUT_SIZE / 2;
-        const maskLeft = maskCenterX - (modelMaskWidth / 2);
-        const maskRight = maskCenterX + (modelMaskWidth / 2);
-        const maskTop = maskCenterY - (modelMaskHeight / 2);
-        const maskBottom = maskCenterY + (modelMaskHeight / 2);
+        const maskLeft = maskCenterX - (this.MASK_WIDTH / 2);
+        const maskRight = maskCenterX + (this.MASK_WIDTH / 2);
+        const maskTop = maskCenterY - (this.MASK_HEIGHT / 2);
+        const maskBottom = maskCenterY + (this.MASK_HEIGHT / 2);
         // Obtener las coordenadas del documento detectado
         let docLeft = box.x;
         let docRight = box.x + box.w;
@@ -768,9 +460,7 @@ export class JaakStamps {
             corners?.forEach(corner => corner.classList.add('perfect-match'));
             if (!this.hasScreenshotTaken) {
                 this.lastDetectedBox = bestBox;
-                this.takeScreenshot().catch(error => {
-                    this.debugLog('❌ Error taking screenshot:', error);
-                });
+                this.takeScreenshot();
                 this.hasScreenshotTaken = true;
                 // Reset para permitir segunda captura
                 setTimeout(() => {
@@ -812,48 +502,15 @@ export class JaakStamps {
         }
     }
     drawDetections(ctx, boxes) {
-        if (!this.videoRef)
-            return;
-        // Get video and container dimensions
-        const videoWidth = this.videoRef.videoWidth;
-        const videoHeight = this.videoRef.videoHeight;
-        const containerWidth = this.canvasRef.width;
-        const containerHeight = this.canvasRef.height;
-        if (videoWidth === 0 || videoHeight === 0)
-            return;
-        // Calculate video aspect ratio and container aspect ratio
-        const videoAspectRatio = videoWidth / videoHeight;
-        const containerAspectRatio = containerWidth / containerHeight;
-        // Determine how video fits in container (same logic as updateMaskDimensions)
-        let displayedVideoWidth, displayedVideoHeight;
-        let videoOffsetX = 0, videoOffsetY = 0;
-        if (videoAspectRatio > containerAspectRatio) {
-            // Video is wider - letterboxed (black bars top/bottom)
-            displayedVideoWidth = containerWidth;
-            displayedVideoHeight = containerWidth / videoAspectRatio;
-            videoOffsetY = (containerHeight - displayedVideoHeight) / 2;
-        }
-        else {
-            // Video is taller - pillarboxed (black bars left/right)
-            displayedVideoHeight = containerHeight;
-            displayedVideoWidth = containerHeight * videoAspectRatio;
-            videoOffsetX = (containerWidth - displayedVideoWidth) / 2;
-        }
-        // Scale factor from model coordinates (320x320) to displayed video area
-        const scaleX = displayedVideoWidth / this.INPUT_SIZE;
-        const scaleY = displayedVideoHeight / this.INPUT_SIZE;
+        // Scale factor to convert from model coordinates (320x320) to canvas coordinates (640x640)
+        const scale = this.canvasRef.width / this.INPUT_SIZE;
         boxes.forEach(det => {
-            // Convert model coordinates to displayed video coordinates
-            const x = det.x * scaleX + videoOffsetX;
-            const y = det.y * scaleY + videoOffsetY;
-            const w = det.w * scaleX;
-            const h = det.h * scaleY;
             ctx.strokeStyle = "#32406C";
             ctx.lineWidth = 2;
-            ctx.strokeRect(x, y, w, h);
+            ctx.strokeRect(det.x * scale, det.y * scale, det.w * scale, det.h * scale);
         });
     }
-    async takeScreenshot() {
+    takeScreenshot() {
         if (!this.videoRef || !this.lastDetectedBox)
             return;
         // Activar animación
@@ -869,10 +526,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) - 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);
+        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);
         // OPTIMIZATION: Create temporary canvas only for cropped version
         // (We reuse main capture canvas for full frame)
         const croppedCanvas = document.createElement('canvas');
@@ -887,29 +544,6 @@ export class JaakStamps {
             // 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";
@@ -1039,7 +673,7 @@ export class JaakStamps {
         this.cleanup();
     }
     render() {
-        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" })))));
+        return (h("div", { key: 'a1036d3867a4f5c40a942e47a30992a6c56e5240', class: "detector-container" }, h("div", { key: 'dada4edb4cc690e4e73d616e8eb22fa8fb6b2817', class: "video-container" }, h("video", { key: '16b43f5efdd0c32dbfab49a86e6904baabfdc220', ref: el => this.videoRef = el, width: "640", height: "640", autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), h("canvas", { key: 'e89cf0292df3bef51d9e9ed650b4f68493506314', ref: el => this.canvasRef = el, width: "640", height: "640", class: this.shouldMirrorVideo ? 'mirror' : '' }), h("div", { key: '3740295495466519be1b4b95891dd06d8272a7d6', class: "overlay-mask" }, h("div", { key: 'ac61b03420ae83d06ec8e5095a11665a8b5a4cd1', class: "card-outline" }, h("div", { key: '7190506e4803ccde1f6c95e6238b05271e7e01a5', class: "side side-top" }), h("div", { key: 'e383f023305021cdd5a02ccaf6a2bb2c775b28be', class: "side side-right" }), h("div", { key: '733f572b80c5f0050c21aa4cf5efd5b499859c23', class: "side side-bottom" }), h("div", { key: 'dbf175597a0d0790b9cc54f737693e418f1500f2', class: "side side-left" }), h("div", { key: '657375f468fc83444e6157c5308fca7237e85f22', class: "corner corner-tl" }), h("div", { key: '0491bf2ed49322cba5220a82016bb9a77c102386', class: "corner corner-tr" }), h("div", { key: 'eb7d153a47dfb1f0c98229752aabfe71181d6c3b', class: "corner corner-bl" }), h("div", { key: '7d57726a70864f9c2590395f6dc89918558fbc87', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (h("div", { key: '8deff6975766142bae69fb7596f0097b1319bc5f', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (h("button", { key: '471fae3b2c48302d474a7e7186cbe21e1260288f', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso"))), this.isCapturing && (h("div", { key: '83fa0133b072f982c9d861632525a64068271833', class: "capture-animation" })), this.showFlipAnimation && (h("div", { key: '0cdcabf20a263067a3fb120ec112a7c688eaece1', class: "flip-animation" }, h("div", { key: 'c7fd5c4211aa67cdc37be882617120cfb3afcfad', class: "id-card-icon" }), h("div", { key: '1c8e889d1de4867887fc25ac221b780154da59dd', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (h("div", { key: '7fcf315cb26c2c860d06dcdb7da6f58524ef4474', class: "success-animation" }, h("div", { key: '5ea1a6aa4368cd154189db166af531abe2e0029e', class: "check-icon" }), h("div", { key: 'deb064b437a664ea5dfdb9b3883ee83bc85b939e', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (h("div", { key: '7a28906555b0e5b891e1f8516a318ec540a83320', class: "loading-overlay" }, h("div", { key: '6f0778d156648405dd385f95c5e9bad0c4112eda', class: "loading-spinner" }), h("div", { key: 'b1cd4ddee0e282e8353bf8ed298fbd1c8498fb5e', class: "loading-text" }, this.statusMessage))), h("div", { key: '1e74b90a10ef2e2e71505160accb0ea83672c5de', class: "watermark" }, h("img", { key: '352fee0189ac25f59724e69e317b28859c86476e', 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"; }
@@ -1094,66 +728,6 @@ export class JaakStamps {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "10"
-            },
-            "maskSize": {
-                "type": "number",
-                "attribute": "mask-size",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "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"
-            },
-            "useDocumentClassification": {
-                "type": "boolean",
-                "attribute": "use-document-classification",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
             }
         };
     }
@@ -1175,8 +749,7 @@ export class JaakStamps {
             "sideAlignment": {},
             "isDetectionPaused": {},
             "isLoading": {},
-            "isModelPreloaded": {},
-            "isMaskReady": {}
+            "isModelPreloaded": {}
         };
     }
     static get events() {
@@ -1195,21 +768,6 @@ export class JaakStamps {
                     "resolved": "any",
                     "references": {}
                 }
-            }, {
-                "method": "isReady",
-                "name": "isReady",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
             }];
     }
     static get methods() {