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

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

@@ -0,0 +1,1060 @@
+'use strict';
+
+var index = require('./index-DGM9-FNg.js');
+
+const myComponentCss = ":host{display:block;width:100%;height:100%;font-family:system-ui, -apple-system, sans-serif;color:#1a1a1a}.detector-container{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}h1{font-size:24px;font-weight:500;color:#333;margin:0 0 24px 0}.video-container{position:relative;width:100%;height:100%;background:#333;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}video,canvas{position:absolute;width:100%;height:100%;border-radius:8px}video.mirror,canvas.mirror{transform:rotateY(180deg)}canvas{z-index:1}video{z-index:0}.status{margin-top:16px;font-size:12px;color:#666}.overlay-mask{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:block;pointer-events:none}.card-outline{position:absolute;top:var(--mask-center-y, 50%);left:var(--mask-center-x, 50%);transform:translate(-50%, -50%);width:var(--mask-width, 88%);height:var(--mask-height, 55%);border:none;border-radius:4px;background:transparent;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7);opacity:0.8}.card-outline.perfect-match{box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7)}.side{position:absolute;background:#999;transition:background-color 0.3s ease}.side.aligned{background:#28a745}.side-top{top:0;left:0;width:100%;height:3px}.side-right{top:0;right:0;width:3px;height:100%}.side-bottom{bottom:0;left:0;width:100%;height:3px}.side-left{top:0;left:0;width:3px;height:100%}.corner{position:absolute;width:20px;height:20px;border:2px solid #999;z-index:12}.corner-tl{top:-10px;left:-10px;border-right:none;border-bottom:none}.corner-tr{top:-10px;right:-10px;border-left:none;border-bottom:none}.corner-bl{bottom:-10px;left:-10px;border-right:none;border-top:none}.corner-br{bottom:-10px;right:-10px;border-left:none;border-top:none}.corner.perfect-match{border-color:#28a745}.guide-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#fff;font-size:14px;font-weight:600;text-align:center;white-space:normal;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;z-index:20}.capture-animation{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;z-index:30;pointer-events:none;animation:captureFlash 0.6s ease-out}@keyframes captureFlash{0%{opacity:0}15%{opacity:0.8}30%{opacity:0}45%{opacity:0.4}60%{opacity:0}100%{opacity:0}}.card-outline.capturing{animation:pulseGreen 0.6s ease-out}@keyframes pulseGreen{0%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(40, 167, 69, 0)}50%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 8px rgba(40, 167, 69, 0.6)}100%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(40, 167, 69, 0)}}.flip-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showFlipInstruction 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.id-card-icon{width:80px;height:50px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:8px;position:relative;animation:flipCard 2s ease-in-out infinite;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3)}.id-card-icon::before{content:'';position:absolute;top:8px;left:8px;width:16px;height:12px;background:rgba(255, 255, 255, 0.9);border-radius:2px}.id-card-icon::after{content:'';position:absolute;top:25px;left:8px;width:64px;height:3px;background:rgba(255, 255, 255, 0.7);border-radius:1px;box-shadow:0 6px 0 rgba(255, 255, 255, 0.7), 0 12px 0 rgba(255, 255, 255, 0.7)}.flip-text{margin-top:12px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px}@keyframes showFlipInstruction{0%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}}@keyframes flipCard{0%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}.success-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showSuccessMessage 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.check-icon{width:80px;height:80px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:50%;position:relative;animation:bounceSuccess 0.6s ease-out;box-shadow:0 4px 16px rgba(108, 117, 125, 0.4);display:flex;align-items:center;justify-content:center}.check-icon::before{content:'';position:absolute;width:20px;height:35px;border:4px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);animation:drawCheck 0.4s ease-out 0.2s both}.success-text{margin-top:16px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;animation:fadeInUp 0.5s ease-out 0.4s both}@keyframes showSuccessMessage{0%{opacity:0;transform:translate(-50%, -50%) scale(0.5)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.9)}}@keyframes bounceSuccess{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes drawCheck{0%{width:0;height:0}50%{width:20px;height:0}100%{width:20px;height:35px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.skip-button{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.skip-button:hover{background:#f8f9fa}.skip-button:active{background:#e9ecef;transform:translateX(-50%) translateY(0)}.watermark{position:absolute;bottom:12px;right:12px;z-index:15;pointer-events:none;opacity:0.7}.watermark img{height:24px;width:auto;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.8);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;border-radius:20px}.loading-spinner{width:60px;height:60px;border:4px solid rgba(255, 255, 255, 0.2);border-top:4px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.loading-text{color:white;font-size:16px;font-weight:500;text-align:center;opacity:0.9}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
+
+const JaakStamps = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.captureCompleted = index.createEvent(this, "captureCompleted");
+        this.isReady = index.createEvent(this, "isReady");
+    }
+    get el() { return index.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;
+    statusMessage = 'Presione el botón para activar la cámara';
+    statusColor = '#aaa';
+    bestScore = 0;
+    capturedFullFrame = null;
+    capturedCroppedId = null;
+    capturedBackFullFrame = null;
+    capturedBackCroppedId = null;
+    captureStep = 'front';
+    isCapturing = false;
+    showFlipAnimation = false;
+    showSuccessAnimation = false;
+    shouldMirrorVideo = true;
+    sideAlignment = {
+        top: false,
+        right: false,
+        bottom: false,
+        left: false
+    };
+    isDetectionPaused = false;
+    isLoading = false;
+    isModelPreloaded = false;
+    isMaskReady = false;
+    videoRef;
+    canvasRef;
+    session;
+    startTime;
+    videoStream;
+    animationId;
+    hasScreenshotTaken = false;
+    lastDetectedBox;
+    mobileNetSession;
+    mobileNetClassMap;
+    // Performance optimization properties
+    frameSkipCounter = 0;
+    FRAME_SKIP = 2; // Process every 3rd frame (reduces CPU by ~66%)
+    consecutiveFailures = 0;
+    MAX_FAILURES = 30; // 0.5 seconds without detection
+    lastInferenceTime = 0;
+    MIN_INFERENCE_INTERVAL = 50; // Minimum 50ms between inferences
+    // Canvas pooling for memory optimization
+    preprocessCanvas;
+    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";
+    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...
+    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)
+            return false;
+        const settings = videoTrack.getSettings();
+        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
+        this.preprocessCanvas = document.createElement('canvas');
+        this.preprocessCanvas.width = this.INPUT_SIZE;
+        this.preprocessCanvas.height = this.INPUT_SIZE;
+        this.preprocessCtx = this.preprocessCanvas.getContext('2d', {
+            alpha: false, // No transparency needed
+            willReadFrequently: true // Optimize for frequent getImageData calls
+        });
+        // Capture canvas - reused for screenshots
+        this.captureCanvas = document.createElement('canvas');
+        this.captureCtx = this.captureCanvas.getContext('2d', {
+            alpha: false
+        });
+        this.debugLog('🎨 Canvas pool initialized for performance');
+    }
+    disconnectedCallback() {
+        this.cleanup();
+    }
+    async getCapturedImages() {
+        if (this.captureStep !== 'completed') {
+            throw new Error('El proceso de captura no ha sido completado');
+        }
+        return {
+            front: {
+                fullFrame: this.capturedFullFrame,
+                cropped: this.capturedCroppedId
+            },
+            back: {
+                fullFrame: this.capturedBackFullFrame,
+                cropped: this.capturedBackCroppedId
+            },
+            metadata: {
+                hasBackCapture: !!(this.capturedBackFullFrame && this.capturedBackCroppedId),
+                totalImages: (this.capturedBackFullFrame && this.capturedBackCroppedId) ? 4 : 2
+            }
+        };
+    }
+    async isProcessCompleted() {
+        return this.captureStep === 'completed';
+    }
+    async startCapture() {
+        await this.startDetection();
+    }
+    async stopCapture() {
+        this.exitSession();
+    }
+    async resetCapture() {
+        this.resetDetection();
+    }
+    async getStatus() {
+        return {
+            isVideoActive: this.isVideoActive,
+            captureStep: this.captureStep,
+            statusMessage: this.statusMessage,
+            hasImages: !!(this.capturedFullFrame || this.capturedBackFullFrame),
+            isProcessCompleted: this.captureStep === 'completed',
+            isModelPreloaded: this.isModelPreloaded
+        };
+    }
+    async preloadModel() {
+        if (this.isModelPreloaded || this.session) {
+            this.debugLog('🚀 Model already preloaded or session exists');
+            return { success: true, message: 'Model already loaded' };
+        }
+        try {
+            this.isLoading = true;
+            this.statusMessage = "Precargando modelos...";
+            this.statusColor = "#007bff";
+            const modelPath = this.MODEL_PATH;
+            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 = "Modelos precargados. Listo para comenzar detección";
+            this.statusColor = "#28a745";
+            this.emitReadyEvent();
+            this.debugLog('✅ Models preloaded successfully');
+            return { success: true, message: 'Models preloaded successfully' };
+        }
+        catch (error) {
+            this.debugLog('❌ Error preloading models:', error);
+            this.isLoading = false;
+            this.statusMessage = "Error al precargar los modelos";
+            this.statusColor = "#ff6b6b";
+            return { success: false, error: error.message };
+        }
+    }
+    async skipBackCapture() {
+        if (this.captureStep === 'back' && this.capturedFullFrame) {
+            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);
+        }
+        if (this.videoStream) {
+            this.videoStream.getTracks().forEach(track => track.stop());
+        }
+        // Limpiar canvas en cleanup general
+        if (this.canvasRef) {
+            const ctx = this.canvasRef.getContext("2d");
+            if (ctx) {
+                ctx.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
+            }
+        }
+        // OPTIMIZATION: Clean up canvas pool
+        this.cleanupCanvasPool();
+    }
+    cleanupCanvasPool() {
+        // Release canvas references for garbage collection
+        if (this.preprocessCanvas) {
+            this.preprocessCtx = undefined;
+            this.preprocessCanvas = undefined;
+        }
+        if (this.captureCanvas) {
+            this.captureCtx = undefined;
+            this.captureCanvas = undefined;
+        }
+        // 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');
+    }
+    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,
+                audio: false
+            });
+            if (this.videoRef) {
+                this.videoRef.srcObject = stream;
+                this.videoStream = stream;
+                // Determine if video should be mirrored
+                const isRear = this.isRearCamera(stream);
+                this.shouldMirrorVideo = !isRear;
+                this.debugLog('📹 Rear camera:', isRear);
+                this.debugLog('🪞 Should mirror video:', this.shouldMirrorVideo);
+                return new Promise((resolve) => {
+                    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();
+                    };
+                });
+            }
+        }
+        catch (err) {
+            this.debugLog("❌ No se pudo acceder a la cámara:", err);
+            this.statusMessage = "Error: No se pudo acceder a la cámara.";
+            this.statusColor = "#ff6b6b";
+        }
+    }
+    preprocess(video) {
+        // OPTIMIZATION: Reuse canvas instead of creating new ones
+        if (!this.preprocessCanvas || !this.preprocessCtx) {
+            this.initializeCanvasPool();
+        }
+        // Clear and redraw on reused canvas
+        this.preprocessCtx.clearRect(0, 0, this.INPUT_SIZE, this.INPUT_SIZE);
+        this.preprocessCtx.drawImage(video, 0, 0, this.INPUT_SIZE, this.INPUT_SIZE);
+        const imageData = this.preprocessCtx.getImageData(0, 0, this.INPUT_SIZE, this.INPUT_SIZE);
+        const [R, G, B] = [[], [], []];
+        const { data } = imageData;
+        // Optimized pixel processing
+        for (let i = 0; i < data.length; i += 4) {
+            R.push(data[i] / 255);
+            G.push(data[i + 1] / 255);
+            B.push(data[i + 2] / 255);
+        }
+        const transposedData = new Float32Array(R.concat(G, B));
+        return new window.ort.Tensor("float32", transposedData, [1, 3, this.INPUT_SIZE, this.INPUT_SIZE]);
+    }
+    getSessionOptions() {
+        return {
+            executionProviders: [
+                // Try WebGL first for GPU acceleration, fallback to WASM
+                'webgl',
+                'wasm'
+            ],
+            graphOptimizationLevel: 'all', // Maximum optimization
+            logSeverityLevel: this.debug ? 2 : 4, // Reduce logging overhead in production
+            logVerbosityLevel: 0,
+            enableCpuMemArena: true,
+            enableMemPattern: true,
+            executionMode: 'parallel',
+            interOpNumThreads: 2,
+            intraOpNumThreads: 2,
+        };
+    }
+    async startDetection() {
+        try {
+            // Check if model is already preloaded
+            if (!this.session) {
+                this.isLoading = true;
+                this.statusMessage = "Cargando modelos...";
+                this.statusColor = "#007bff";
+                const modelPath = this.MODEL_PATH;
+                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 models');
+                this.statusMessage = "Usando modelos precargados...";
+                this.statusColor = "#007bff";
+            }
+            this.statusMessage = "Configurando cámara...";
+            await this.setupCamera();
+            this.startTime = Date.now();
+            this.isLoading = false;
+            this.detectFrame();
+        }
+        catch (err) {
+            this.debugLog("Error al inicializar:", err);
+            this.statusMessage = "Error al inicializar el detector";
+            this.statusColor = "#ff6b6b";
+            this.isLoading = false;
+        }
+    }
+    async detectFrame() {
+        try {
+            if (!this.videoRef || !this.canvasRef || !this.session)
+                return;
+            // Pausar detección si está marcado como pausado
+            if (this.isDetectionPaused) {
+                // Solo continuar el bucle sin procesar detección
+                if (this.captureStep !== 'completed') {
+                    this.animationId = requestAnimationFrame(() => this.detectFrame());
+                }
+                return;
+            }
+            // OPTIMIZATION 1: Frame skipping for performance
+            this.frameSkipCounter++;
+            if (this.frameSkipCounter <= this.FRAME_SKIP) {
+                if (this.captureStep !== 'completed') {
+                    this.animationId = requestAnimationFrame(() => this.detectFrame());
+                }
+                return;
+            }
+            this.frameSkipCounter = 0;
+            // OPTIMIZATION 2: Throttle inference based on time
+            const currentTime = Date.now();
+            if (currentTime - this.lastInferenceTime < this.MIN_INFERENCE_INTERVAL) {
+                if (this.captureStep !== 'completed') {
+                    this.animationId = requestAnimationFrame(() => this.detectFrame());
+                }
+                return;
+            }
+            this.lastInferenceTime = currentTime;
+            const ctx = this.canvasRef.getContext("2d");
+            const inputTensor = this.preprocess(this.videoRef);
+            const feeds = { [this.session.inputNames[0]]: inputTensor };
+            const results = await this.session.run(feeds);
+            const output = results[this.session.outputNames[0]].data;
+            const finalBoxes = [];
+            for (let i = 0; i < output.length; i += 6) {
+                const [x1, y1, x2, y2, score, classId] = output.slice(i, i + 6);
+                if (score > this.CONFIDENCE_THRESHOLD) {
+                    finalBoxes.push({ x: x1, y: y1, w: x2 - x1, h: y2 - y1, score, classId });
+                    if (this.startTime && Date.now() - this.startTime < 5000) {
+                        const currentBox = { x: x1, y: y1, w: x2 - x1, h: y2 - y1, score };
+                        const isWellPositioned = this.isCardInFrame(currentBox);
+                        const effectiveScore = isWellPositioned ? score * 1.2 : score;
+                        if (effectiveScore > this.bestScore) {
+                            this.bestScore = effectiveScore;
+                        }
+                    }
+                }
+            }
+            // OPTIMIZATION 3: Adaptive frame rate based on detection success
+            if (finalBoxes.length === 0) {
+                this.consecutiveFailures++;
+            }
+            else {
+                this.consecutiveFailures = 0;
+            }
+            ctx.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
+            if (this.debug) {
+                this.drawDetections(ctx, finalBoxes);
+            }
+            this.updateGuidanceStatus(finalBoxes);
+            this.updateMaskColor(finalBoxes);
+            // Solo continuar si no hemos completado el proceso
+            if (this.captureStep !== 'completed') {
+                // OPTIMIZATION 4: Reduce frame rate when no detection for better battery life
+                if (this.consecutiveFailures > this.MAX_FAILURES) {
+                    // Reduce to ~5fps when no detection for 0.5 seconds
+                    setTimeout(() => this.detectFrame(), 200);
+                }
+                else {
+                    this.animationId = requestAnimationFrame(() => this.detectFrame());
+                }
+            }
+        }
+        catch (e) {
+            this.debugLog("Error en inferencia:", e);
+            // Solo continuar si no hemos completado el proceso
+            if (this.captureStep !== 'completed') {
+                // On error, wait longer before retrying
+                setTimeout(() => this.detectFrame(), 100);
+            }
+        }
+    }
+    isCardInFrame(box) {
+        const cardCenterX = box.x + box.w / 2;
+        const cardCenterY = box.y + box.h / 2;
+        const frameCenterX = this.INPUT_SIZE / 2;
+        const frameCenterY = this.INPUT_SIZE / 2;
+        const toleranceX = 40;
+        const toleranceY = 30;
+        const isCentered = Math.abs(cardCenterX - frameCenterX) < toleranceX &&
+            Math.abs(cardCenterY - frameCenterY) < toleranceY;
+        const isGoodSize = box.w > 150 && box.w < 300 && box.h > 90 && box.h < 200;
+        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)
+        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);
+        // Obtener las coordenadas del documento detectado
+        let docLeft = box.x;
+        let docRight = box.x + box.w;
+        const docTop = box.y;
+        const docBottom = box.y + box.h;
+        // Si el video está en modo mirror, invertir las coordenadas horizontales
+        if (this.shouldMirrorVideo) {
+            const originalDocLeft = docLeft;
+            const originalDocRight = docRight;
+            docLeft = this.INPUT_SIZE - originalDocRight;
+            docRight = this.INPUT_SIZE - originalDocLeft;
+        }
+        // Tolerancia para considerar que un lado está alineado (en píxeles)
+        const tolerance = this.alignmentTolerance;
+        return {
+            top: Math.abs(docTop - maskTop) <= tolerance,
+            right: Math.abs(docRight - maskRight) <= tolerance,
+            bottom: Math.abs(docBottom - maskBottom) <= tolerance,
+            left: Math.abs(docLeft - maskLeft) <= tolerance
+        };
+    }
+    areAllSidesAligned(alignment) {
+        return alignment.top && alignment.right && alignment.bottom && alignment.left;
+    }
+    updateMaskColor(boxes) {
+        const cardOutline = this.el.shadowRoot?.querySelector('.card-outline');
+        const corners = this.el.shadowRoot?.querySelectorAll('.corner');
+        const topSide = this.el.shadowRoot?.querySelector('.side-top');
+        const rightSide = this.el.shadowRoot?.querySelector('.side-right');
+        const bottomSide = this.el.shadowRoot?.querySelector('.side-bottom');
+        const leftSide = this.el.shadowRoot?.querySelector('.side-left');
+        let bestBox = null;
+        let currentAlignment = { top: false, right: false, bottom: false, left: false };
+        if (boxes.length > 0) {
+            bestBox = boxes.reduce((best, current) => current.score > best.score ? current : best);
+            currentAlignment = this.checkSideAlignment(bestBox);
+            this.sideAlignment = currentAlignment;
+        }
+        else {
+            // Reset alignment when no detection
+            this.sideAlignment = { top: false, right: false, bottom: false, left: false };
+        }
+        // Actualizar colores de cada lado individualmente
+        topSide?.classList.toggle('aligned', currentAlignment.top);
+        rightSide?.classList.toggle('aligned', currentAlignment.right);
+        bottomSide?.classList.toggle('aligned', currentAlignment.bottom);
+        leftSide?.classList.toggle('aligned', currentAlignment.left);
+        // Verificar si todos los lados están alineados
+        const allSidesAligned = this.areAllSidesAligned(currentAlignment);
+        if (allSidesAligned && bestBox) {
+            cardOutline?.classList.add('perfect-match');
+            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.hasScreenshotTaken = true;
+                // Reset para permitir segunda captura
+                setTimeout(() => {
+                    this.hasScreenshotTaken = false;
+                }, 2000);
+            }
+        }
+        else {
+            cardOutline?.classList.remove('perfect-match');
+            corners?.forEach(corner => corner.classList.remove('perfect-match'));
+        }
+    }
+    updateGuidanceStatus(boxes) {
+        if (boxes.length === 0) {
+            this.statusMessage = "Posicione la identificación dentro del marco";
+            this.statusColor = "#ff6b6b";
+        }
+        else {
+            const bestBox = boxes.reduce((best, current) => current.score > best.score ? current : best);
+            const alignment = this.checkSideAlignment(bestBox);
+            const alignedSides = [alignment.top, alignment.right, alignment.bottom, alignment.left].filter(Boolean).length;
+            const allSidesAligned = this.areAllSidesAligned(alignment);
+            if (allSidesAligned) {
+                this.statusMessage = "Identificación perfectamente alineada. Mantenga inmóvil";
+                this.statusColor = "#00ff00";
+            }
+            else if (alignedSides > 0) {
+                this.statusMessage = `Alinee los lados restantes (${alignedSides}/4 lados correctos)`;
+                this.statusColor = "#ffb366";
+            }
+            else if (bestBox.w < 150) {
+                this.statusMessage = "Identificación detectada. Acerque al marco";
+                this.statusColor = "#ffb366";
+            }
+            else {
+                this.statusMessage = "Identificación detectada. Alinee con el marco";
+                this.statusColor = "#ffb366";
+            }
+        }
+    }
+    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;
+        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);
+        });
+    }
+    async takeScreenshot() {
+        if (!this.videoRef || !this.lastDetectedBox)
+            return;
+        // Activar animación
+        this.triggerCaptureAnimation();
+        // OPTIMIZATION: Reuse capture canvas for full frame
+        if (!this.captureCanvas || !this.captureCtx) {
+            this.initializeCanvasPool();
+        }
+        // Resize reused canvas for full frame
+        this.captureCanvas.width = this.videoRef.videoWidth;
+        this.captureCanvas.height = this.videoRef.videoHeight;
+        this.captureCtx.drawImage(this.videoRef, 0, 0, this.captureCanvas.width, this.captureCanvas.height);
+        // 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);
+        // OPTIMIZATION: Create temporary canvas only for cropped version
+        // (We reuse main capture canvas for full frame)
+        const croppedCanvas = document.createElement('canvas');
+        croppedCanvas.width = cropWidth;
+        croppedCanvas.height = cropHeight;
+        const croppedCtx = croppedCanvas.getContext('2d', { alpha: false });
+        // Recortar la identificación del frame completo
+        croppedCtx.drawImage(this.videoRef, cropX, cropY, cropWidth, cropHeight, // Área de origen
+        0, 0, cropWidth, cropHeight // Área de destino
+        );
+        if (this.captureStep === 'front') {
+            // 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";
+            // Pausar detección durante la animación de giro
+            this.isDetectionPaused = true;
+            // Mostrar animación de giro después de la captura
+            setTimeout(() => {
+                this.showFlipAnimation = true;
+                setTimeout(() => {
+                    this.showFlipAnimation = false;
+                    // Reanudar detección después de que termine la animación
+                    this.isDetectionPaused = false;
+                }, 3000);
+            }, 800);
+            this.debugLog('📸 FRENTE capturado. Esperando trasera...');
+        }
+        else if (this.captureStep === 'back') {
+            // Captura de la trasera usando canvas reutilizado
+            this.capturedBackFullFrame = this.captureCanvas.toDataURL('image/png');
+            this.capturedBackCroppedId = croppedCanvas.toDataURL('image/png');
+            this.completeProcess(false);
+            this.debugLog('📸 TRASERA capturada. Proceso completado. Detector detenido. Imágenes emitidas.');
+        }
+    }
+    triggerCaptureAnimation() {
+        this.isCapturing = true;
+        // Agregar clase de animación al marco
+        const cardOutline = this.el.shadowRoot?.querySelector('.card-outline');
+        cardOutline?.classList.add('capturing');
+        // Limpiar animación después de que termine
+        setTimeout(() => {
+            this.isCapturing = false;
+            cardOutline?.classList.remove('capturing');
+        }, 600);
+    }
+    stopDetection() {
+        if (this.animationId) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = undefined;
+        }
+        // Limpiar canvas para eliminar cualquier detección visual residual
+        if (this.canvasRef) {
+            const ctx = this.canvasRef.getContext("2d");
+            ctx.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
+        }
+        this.debugLog('🛑 Detector de identificación detenido');
+    }
+    resetDetection() {
+        this.bestScore = 0;
+        this.startTime = Date.now();
+        this.statusMessage = "Sistema reiniciado. Posicione la identificación";
+        this.statusColor = "#aaa";
+        this.hasScreenshotTaken = false;
+        this.capturedFullFrame = null;
+        this.capturedCroppedId = null;
+        this.capturedBackFullFrame = null;
+        this.capturedBackCroppedId = null;
+        this.captureStep = 'front';
+        this.isCapturing = false;
+        this.showFlipAnimation = false;
+        this.showSuccessAnimation = false;
+        this.isDetectionPaused = false;
+        this.isLoading = false;
+        this.lastDetectedBox = undefined;
+        this.isModelPreloaded = false;
+        // Reset performance counters
+        this.frameSkipCounter = 0;
+        this.consecutiveFailures = 0;
+        this.lastInferenceTime = 0;
+        if (this.canvasRef) {
+            const ctx = this.canvasRef.getContext("2d");
+            ctx.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
+        }
+        // Reiniciar el detector si estaba funcionando
+        if (this.isVideoActive && this.session) {
+            this.detectFrame();
+        }
+    }
+    completeProcess(skippedBack = false) {
+        this.captureStep = 'completed';
+        this.statusMessage = skippedBack ?
+            "Proceso completado (solo frente capturado)" :
+            "Proceso de captura completado exitosamente";
+        this.statusColor = "#28a745";
+        // Detener el detector
+        this.stopDetection();
+        // Emitir evento con las imágenes capturadas
+        const capturedImages = {
+            front: {
+                fullFrame: this.capturedFullFrame,
+                cropped: this.capturedCroppedId
+            },
+            back: {
+                fullFrame: this.capturedBackFullFrame,
+                cropped: this.capturedBackCroppedId
+            },
+            timestamp: new Date().toISOString(),
+            metadata: {
+                totalImages: skippedBack ? 2 : 4,
+                processCompleted: true,
+                backCaptureSkipped: skippedBack
+            }
+        };
+        this.captureCompleted.emit(capturedImages);
+        // Mostrar animación de éxito después de la captura
+        setTimeout(() => {
+            this.showSuccessAnimation = true;
+            setTimeout(() => {
+                this.showSuccessAnimation = false;
+            }, 3000);
+        }, 800);
+    }
+    exitSession() {
+        if (this.videoStream) {
+            this.videoStream.getTracks().forEach(track => track.stop());
+            this.videoStream = undefined;
+            this.isVideoActive = false;
+            this.statusMessage = "Sesión finalizada.";
+            this.statusColor = "#aaa";
+        }
+        this.isLoading = false;
+        // Limpiar canvas al finalizar sesión
+        if (this.canvasRef) {
+            const ctx = this.canvasRef.getContext("2d");
+            ctx.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
+        }
+        this.cleanup();
+    }
+    render() {
+        return (index.h("div", { key: '42591479495df221b101555198a23288d7d765b0', class: "detector-container" }, index.h("div", { key: '2b9ab48572aa2fb5542b8a8dc1b70a0f2a6eca89', class: "video-container" }, index.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' } }), index.h("canvas", { key: 'a82fc4826e220e696799b07b3510456f174a6628', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (index.h("div", { key: '9b3b838f99030e3dfa760fa0dd7c89ff24f26ed9', class: "overlay-mask" }, index.h("div", { key: 'f6a3b1ac2f12c1fb081f6b5eb853e627040396f4', class: "card-outline" }, index.h("div", { key: '6626259249ac5e0fd6ba665ab802af1ac2f9fc17', class: "side side-top" }), index.h("div", { key: '7a3195c96b2406b40b122f4267c2a251614cdede', class: "side side-right" }), index.h("div", { key: 'ece78305cfb083ada1d44de1d7d5226730879cc3', class: "side side-bottom" }), index.h("div", { key: '107468c583bbb01dd46c36c096e49be8e0b574ba', class: "side side-left" }), index.h("div", { key: 'c590f13b80c5e37c0ac0c68cfc2e2904b4345ebc', class: "corner corner-tl" }), index.h("div", { key: 'ab1e5aab179068ad1bc7b58ef3628d9618a877a8', class: "corner corner-tr" }), index.h("div", { key: '3a1db6cf1105bd3a2dfe7d4b998e79f6e40625ec', class: "corner corner-bl" }), index.h("div", { key: '5f9bc4e4557e5539335894160dccbaa2a6d6ac2d', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (index.h("div", { key: '8226d6721b0ae800f935e978a93113bd3b99656a', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (index.h("button", { key: '16cec7ca4a80ba0db1ace768826da17063eddb3e', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")))), this.isCapturing && (index.h("div", { key: 'bfdca0059eb50d37a77e8e43ef963ba7ed953edf', class: "capture-animation" })), this.showFlipAnimation && (index.h("div", { key: 'a1ad4b4f884d7d9f6090f148ddd6df19250073dd', class: "flip-animation" }, index.h("div", { key: 'e159ce385824dc049a6e9409d3747105c6f0a08e', class: "id-card-icon" }), index.h("div", { key: '6fcff650a3c7fdb16f8d327750e06055b9a93d0d', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (index.h("div", { key: 'c4b76ecb19c65969676e5156689c2c0b1c9a584e', class: "success-animation" }, index.h("div", { key: '12203a8fe7ee878089b3dda1d1142cde5489eed0', class: "check-icon" }), index.h("div", { key: 'a2d41c8944873d33106994b8d56c3ee1ee1ae9fc', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (index.h("div", { key: 'a155cd999fa40c35fa7b391cde7c1026edb250a7', class: "loading-overlay" }, index.h("div", { key: 'ccba76c5d4a472158c28bc564ba95bd65829b58d', class: "loading-spinner" }), index.h("div", { key: '23168f9bdcf4e993539288ff5703acaed13bb16a', class: "loading-text" }, this.statusMessage))), index.h("div", { key: '0107b82ad19726c1bab131e17892a46b04e08cfd', class: "watermark" }, index.h("img", { key: 'ad8831a6f77fa61805f22e3a27f5c5619ac1cc0e', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+    }
+};
+JaakStamps.style = myComponentCss;
+
+exports.jaak_stamps = JaakStamps;
+//# sourceMappingURL=jaak-stamps.entry.cjs.js.map
+
+//# sourceMappingURL=jaak-stamps.cjs.entry.js.map