@jaak.ai/stamps 2.0.0-dev.27 → 2.0.0-dev.29

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

@@ -68,34 +68,65 @@ export class JaakStamps {
     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);
+    logger = {
+        info: (...args) => {
+            if (this.debug) {
+                console.log(`[JAAK-STAMPS] [INFO] [${new Date().toLocaleTimeString()}]`, ...args);
+            }
+        },
+        warn: (...args) => {
+            if (this.debug) {
+                console.warn(`[JAAK-STAMPS] [WARN] [${new Date().toLocaleTimeString()}]`, ...args);
+            }
+        },
+        error: (...args) => {
+            if (this.debug) {
+                console.error(`[JAAK-STAMPS] [ERROR] [${new Date().toLocaleTimeString()}]`, ...args);
+            }
+        },
+        debug: (...args) => {
+            if (this.debug) {
+                console.debug(`[JAAK-STAMPS] [DEBUG] [${new Date().toLocaleTimeString()}]`, ...args);
+            }
+        },
+        state: (state, data) => {
+            if (this.debug) {
+                console.log(`[JAAK-STAMPS] [STATE] [${new Date().toLocaleTimeString()}] ${state}`, data || '');
+            }
+        },
+        performance: (operation, duration) => {
+            if (this.debug) {
+                console.log(`[JAAK-STAMPS] [PERF] [${new Date().toLocaleTimeString()}] ${operation}: ${duration}ms`);
+            }
         }
-    }
+    };
     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.logger.warn(`Propiedad maskSize inválida. Valor: ${this.maskSize}, esperado: 50-100. 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.logger.warn(`Propiedad cropMargin inválida. Valor: ${this.cropMargin}, esperado: 0-100. Usando valor por defecto: 0`);
             this.cropMargin = 0;
         }
     }
     validatePreferredCamera() {
         const validOptions = ['auto', 'front', 'back'];
         if (!validOptions.includes(this.preferredCamera)) {
-            console.warn(`preferredCamera debe ser uno de: ${validOptions.join(', ')}. Valor actual: ${this.preferredCamera}. Usando valor por defecto: 'auto'`);
+            this.logger.warn(`Propiedad preferredCamera inválida. Valor: ${this.preferredCamera}, esperado: ${validOptions.join(', ')}. Usando valor por defecto: 'auto'`);
             this.preferredCamera = 'auto';
         }
     }
     emitReadyEvent() {
         const isDocumentReady = !!window.ort && this.isModelPreloaded;
         this.isReady.emit(isDocumentReady);
-        this.debugLog('🟢 isReady event emitted:', isDocumentReady);
+        this.logger.state('COMPONENTE_LISTO', {
+            ortLibraryLoaded: !!window.ort,
+            modelPreloaded: this.isModelPreloaded,
+            isReady: isDocumentReady
+        });
     }
     isRearCamera(stream) {
         const videoTrack = stream.getVideoTracks()[0];
@@ -118,7 +149,11 @@ export class JaakStamps {
         else {
             this.deviceType = 'desktop';
         }
-        this.debugLog('📱 Device type detected:', this.deviceType);
+        this.logger.state('DISPOSITIVO_DETECTADO', {
+            deviceType: this.deviceType,
+            userAgent: navigator.userAgent,
+            screenDimensions: { width: window.innerWidth, height: window.innerHeight }
+        });
         // Enumerate available cameras
         await this.enumerateAndDetectCameras();
         // Load user preference
@@ -129,7 +164,7 @@ export class JaakStamps {
             // First, check if we have permission to enumerate devices
             const permissionStatus = await this.checkCameraPermission();
             if (permissionStatus === 'denied') {
-                this.debugLog('❌ Camera permission denied');
+                this.logger.error('Permiso de cámara denegado por el usuario');
                 this.statusMessage = "Permiso de cámara denegado";
                 this.statusColor = "#ff6b6b";
                 return;
@@ -143,7 +178,7 @@ export class JaakStamps {
             const devices = await navigator.mediaDevices.enumerateDevices();
             this.availableCameras = devices.filter(device => device.kind === 'videoinput');
             this.isMultipleCamerasAvailable = this.availableCameras.length > 1;
-            this.debugLog('📹 Available cameras:', {
+            this.logger.state('CAMARAS_DETECTADAS', {
                 count: this.availableCameras.length,
                 isMultipleCamerasAvailable: this.isMultipleCamerasAvailable,
                 cameras: this.availableCameras.map(cam => ({
@@ -155,7 +190,7 @@ export class JaakStamps {
             this.setInitialCameraPreference();
         }
         catch (error) {
-            this.debugLog('❌ Error enumerating cameras:', error);
+            this.logger.error('Error al enumerar cámaras disponibles:', error);
             this.handleCameraPermissionError(error);
         }
     }
@@ -168,7 +203,7 @@ export class JaakStamps {
             return permission.state;
         }
         catch (error) {
-            this.debugLog('⚠️ Could not check camera permission:', error);
+            this.logger.warn('No se pudo verificar permisos de cámara:', error);
             return 'prompt';
         }
     }
@@ -211,11 +246,11 @@ export class JaakStamps {
                 !camera.label.toLowerCase().includes('back') && !camera.label.toLowerCase().includes('rear'));
             if (frontCamera) {
                 this.selectedCameraId = frontCamera.deviceId;
-                this.debugLog('👤 User selected front camera:', frontCamera.label);
+                this.logger.state('CAMARA_FRONTAL_SELECCIONADA', { label: frontCamera.label, deviceId: frontCamera.deviceId });
             }
             else {
                 this.selectedCameraId = this.availableCameras[0].deviceId;
-                this.debugLog('⚠️ Front camera not found, using first available:', this.availableCameras[0].label);
+                this.logger.warn('Cámara frontal no encontrada, usando primera disponible:', this.availableCameras[0].label);
             }
         }
         else if (this.preferredCamera === 'back') {
@@ -226,11 +261,11 @@ export class JaakStamps {
                 camera.label.toLowerCase().includes('environment'));
             if (backCamera) {
                 this.selectedCameraId = backCamera.deviceId;
-                this.debugLog('📷 User selected back camera:', backCamera.label);
+                this.logger.state('CAMARA_TRASERA_SELECCIONADA', { label: backCamera.label, deviceId: backCamera.deviceId });
             }
             else {
                 this.selectedCameraId = this.availableCameras[0].deviceId;
-                this.debugLog('⚠️ Back camera not found, using first available:', this.availableCameras[0].label);
+                this.logger.warn('Cámara trasera no encontrada, usando primera disponible:', this.availableCameras[0].label);
             }
         }
         else {
@@ -243,17 +278,17 @@ export class JaakStamps {
                     camera.label.toLowerCase().includes('environment'));
                 if (rearCamera) {
                     this.selectedCameraId = rearCamera.deviceId;
-                    this.debugLog('📱 Auto-selected rear camera for mobile:', rearCamera.label);
+                    this.logger.state('CAMARA_AUTO_SELECCIONADA_MOBILE', { type: 'rear', label: rearCamera.label, deviceId: rearCamera.deviceId });
                 }
                 else {
                     this.selectedCameraId = this.availableCameras[0].deviceId;
-                    this.debugLog('📱 Rear camera not found, using first available:', this.availableCameras[0].label);
+                    this.logger.warn('Cámara trasera no encontrada en mobile, usando primera disponible:', this.availableCameras[0].label);
                 }
             }
             else {
                 // For desktop, use first available camera (usually the only one)
                 this.selectedCameraId = this.availableCameras[0].deviceId;
-                this.debugLog('💻 Auto-selected desktop camera:', this.availableCameras[0].label);
+                this.logger.state('CAMARA_AUTO_SELECCIONADA_DESKTOP', { label: this.availableCameras[0].label, deviceId: this.availableCameras[0].deviceId });
             }
         }
     }
@@ -267,12 +302,12 @@ export class JaakStamps {
                 if (isStillAvailable) {
                     this.selectedCameraId = preference.cameraId;
                     this.preferredCameraFacing = preference.facing;
-                    this.debugLog('💾 Loaded camera preference:', preference);
+                    this.logger.state('PREFERENCIA_CAMARA_CARGADA', preference);
                 }
             }
         }
         catch (error) {
-            this.debugLog('⚠️ Error loading camera preference:', error);
+            this.logger.warn('Error al cargar preferencia de cámara:', error);
         }
     }
     saveCameraPreference() {
@@ -283,10 +318,10 @@ export class JaakStamps {
                 timestamp: Date.now()
             };
             localStorage.setItem('jaak-stamps-camera-preference', JSON.stringify(preference));
-            this.debugLog('💾 Saved camera preference:', preference);
+            this.logger.state('PREFERENCIA_CAMARA_GUARDADA', preference);
         }
         catch (error) {
-            this.debugLog('⚠️ Error saving camera preference:', error);
+            this.logger.warn('Error al guardar preferencia de cámara:', error);
         }
     }
     async switchCamera(cameraId) {
@@ -296,7 +331,7 @@ export class JaakStamps {
             // Check if the selected camera is still available
             const selectedCamera = this.availableCameras.find(cam => cam.deviceId === cameraId);
             if (!selectedCamera) {
-                this.debugLog('❌ Selected camera not found, re-enumerating...');
+                this.logger.warn('Cámara seleccionada no encontrada, re-enumerando dispositivos...');
                 await this.enumerateAndDetectCameras();
                 return;
             }
@@ -320,10 +355,10 @@ export class JaakStamps {
             this.saveCameraPreference();
             // Setup new camera with error handling
             await this.setupCameraWithRetry();
-            this.debugLog('🔄 Switched to camera:', selectedCamera.label);
+            this.logger.state('CAMARA_CAMBIADA', { label: selectedCamera.label, deviceId: selectedCamera.deviceId });
         }
         catch (error) {
-            this.debugLog('❌ Error switching camera:', error);
+            this.logger.error('Error al cambiar de cámara:', error);
             this.handleCameraPermissionError(error);
         }
     }
@@ -338,7 +373,7 @@ export class JaakStamps {
                 return; // Success
             }
             catch (error) {
-                this.debugLog(`❌ Camera setup attempt ${attempt} failed:`, error);
+                this.logger.error(`Intento ${attempt} de configuración de cámara fallido:`, error);
                 if (attempt === maxRetries) {
                     // Last attempt failed, handle the error
                     this.statusMessage = "Error al configurar la cámara";
@@ -358,7 +393,7 @@ export class JaakStamps {
     }
     toggleCameraSelector() {
         this.showCameraSelector = !this.showCameraSelector;
-        this.debugLog('📹 Camera selector toggled:', {
+        this.logger.state('SELECTOR_CAMARA_TOGGLE', {
             showCameraSelector: this.showCameraSelector,
             isMultipleCamerasAvailable: this.isMultipleCamerasAvailable,
             availableCameras: this.availableCameras.length,
@@ -374,6 +409,13 @@ export class JaakStamps {
         await this.switchCamera(nextCamera.deviceId);
     }
     async componentDidLoad() {
+        this.logger.state('COMPONENTE_INICIALIZANDO', {
+            debug: this.debug,
+            maskSize: this.maskSize,
+            cropMargin: this.cropMargin,
+            useDocumentClassification: this.useDocumentClassification,
+            preferredCamera: this.preferredCamera
+        });
         if (this.debug) {
             // Show detailed initialization loading state only in debug mode
             this.isLoading = true;
@@ -438,7 +480,7 @@ export class JaakStamps {
             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 });
+            this.logger.debug('Canvas redimensionado:', { width: rect.width, height: rect.height });
         }
     }
     updateMaskDimensions(containerRect) {
@@ -498,7 +540,7 @@ export class JaakStamps {
         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:', {
+        this.logger.state('DIMENSIONES_MASCARA_ACTUALIZADAS', {
             video: { width: videoWidth, height: videoHeight },
             displayed: { width: displayedVideoWidth, height: displayedVideoHeight },
             mask: { widthPercent: maskWidthPercent, heightPercent: maskHeightPercent },
@@ -520,7 +562,7 @@ export class JaakStamps {
         this.captureCtx = this.captureCanvas.getContext('2d', {
             alpha: false
         });
-        this.debugLog('🎨 Canvas pool initialized for performance');
+        this.logger.state('CANVAS_POOL_INICIALIZADO', { preprocessCanvasSize: this.INPUT_SIZE });
     }
     disconnectedCallback() {
         this.cleanup();
@@ -568,7 +610,7 @@ export class JaakStamps {
     }
     async preloadModel() {
         if (this.isModelPreloaded || this.session) {
-            this.debugLog('🚀 Model already preloaded or session exists');
+            this.logger.state('MODELO_YA_PRECARGADO', { sessionExists: !!this.session, modelPreloaded: this.isModelPreloaded });
             return { success: true, message: 'Model already loaded' };
         }
         try {
@@ -576,12 +618,39 @@ export class JaakStamps {
             this.statusMessage = "Precargando modelos...";
             this.statusColor = "#007bff";
             const modelPath = this.MODEL_PATH;
-            this.debugLog('🤖 Preloading detection model:', modelPath);
+            this.logger.state('PRECARGANDO_MODELO_DETECCION', { modelPath });
             // Configure ONNX Runtime with device-specific optimizations
             const sessionOptions = this.getSessionOptions();
-            this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
+            const deviceInfo = this.getDeviceMemoryInfo();
+            try {
+                this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
+            }
+            catch (error) {
+                if (error.message.includes('failed to allocate a buffer')) {
+                    this.logger.warn('Fallo en asignación de buffer durante precarga, intentando con configuración mínima');
+                    const fallbackOptions = {
+                        executionProviders: ['wasm'],
+                        graphOptimizationLevel: 'disabled',
+                        logSeverityLevel: 4,
+                        enableCpuMemArena: false,
+                        enableMemPattern: false,
+                        executionMode: 'sequential',
+                        interOpNumThreads: 1,
+                        intraOpNumThreads: 1,
+                    };
+                    this.session = await window.ort.InferenceSession.create(modelPath, fallbackOptions);
+                }
+                else {
+                    throw error;
+                }
+            }
             // Preload MobileNet model and classes only if classification is enabled
+            // For low memory devices, load sequentially to avoid memory pressure
             if (this.useDocumentClassification) {
+                if (deviceInfo.isLowMemory) {
+                    this.logger.state('CARGA_SECUENCIAL_MODELOS', { reason: 'low memory device' });
+                    await new Promise(resolve => setTimeout(resolve, 1000));
+                }
                 await this.loadMobileNetModel();
             }
             this.isModelPreloaded = true;
@@ -589,11 +658,15 @@ export class JaakStamps {
             this.statusMessage = "Modelos precargados. Listo para comenzar detección";
             this.statusColor = "#28a745";
             this.emitReadyEvent();
-            this.debugLog('✅ Models preloaded successfully');
+            this.logger.state('MODELOS_PRECARGADOS_EXITOSAMENTE', {
+                detectionModel: !!this.session,
+                classificationModel: !!this.mobileNetSession,
+                useClassification: this.useDocumentClassification
+            });
             return { success: true, message: 'Models preloaded successfully' };
         }
         catch (error) {
-            this.debugLog('❌ Error preloading models:', error);
+            this.logger.error('Error al precargar modelos:', error);
             this.isLoading = false;
             this.statusMessage = "Error al precargar los modelos";
             this.statusColor = "#ff6b6b";
@@ -621,7 +694,7 @@ export class JaakStamps {
     }
     async setPreferredCamera(camera) {
         this.preferredCamera = camera;
-        this.debugLog('🎯 Camera preference changed to:', camera);
+        this.logger.state('PREFERENCIA_CAMARA_CAMBIADA', { newPreference: camera });
         // Re-detect and apply new camera preference
         await this.enumerateAndDetectCameras();
         // If video is active, switch to the new preferred camera
@@ -636,21 +709,42 @@ export class JaakStamps {
     }
     async loadMobileNetModel() {
         try {
-            this.debugLog('🤖 Loading MobileNet model...');
+            this.logger.state('CARGANDO_MODELO_MOBILENET', { path: this.MOBILENET_MODEL_PATH });
             // 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);
+            this.logger.state('CLASES_MOBILENET_CARGADAS', { classCount: Object.keys(this.mobileNetClassMap).length });
             // Load model
             const sessionOptions = this.getSessionOptions();
-            this.mobileNetSession = await window.ort.InferenceSession.create(this.MOBILENET_MODEL_PATH, sessionOptions);
-            this.debugLog('✅ MobileNet model loaded successfully');
+            try {
+                this.mobileNetSession = await window.ort.InferenceSession.create(this.MOBILENET_MODEL_PATH, sessionOptions);
+            }
+            catch (error) {
+                if (error.message.includes('failed to allocate a buffer')) {
+                    this.logger.warn('Fallo en asignación de buffer de MobileNet, intentando con configuración mínima');
+                    const fallbackOptions = {
+                        executionProviders: ['wasm'],
+                        graphOptimizationLevel: 'disabled',
+                        logSeverityLevel: 4,
+                        enableCpuMemArena: false,
+                        enableMemPattern: false,
+                        executionMode: 'sequential',
+                        interOpNumThreads: 1,
+                        intraOpNumThreads: 1,
+                    };
+                    this.mobileNetSession = await window.ort.InferenceSession.create(this.MOBILENET_MODEL_PATH, fallbackOptions);
+                }
+                else {
+                    throw error;
+                }
+            }
+            this.logger.state('MODELO_MOBILENET_CARGADO_EXITOSAMENTE', { sessionCreated: !!this.mobileNetSession });
         }
         catch (error) {
-            this.debugLog('❌ Error loading MobileNet model:', error);
+            this.logger.error('Error al cargar modelo MobileNet:', error);
             throw error;
         }
     }
@@ -677,11 +771,11 @@ export class JaakStamps {
     }
     async classifyDocument(canvas) {
         if (!this.mobileNetSession || !this.mobileNetClassMap) {
-            this.debugLog('⚠️ MobileNet model not loaded');
+            this.logger.warn('Modelo MobileNet no está cargado, saltando clasificación');
             return null;
         }
         try {
-            this.debugLog('🔍 Classifying document...');
+            this.logger.state('CLASIFICANDO_DOCUMENTO', { timestamp: Date.now() });
             // Preprocess image for MobileNet
             const inputTensor = this.preprocessMobileNet(canvas);
             // Run inference
@@ -692,10 +786,11 @@ export class JaakStamps {
             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:', {
+            this.logger.state('DOCUMENTO_CLASIFICADO', {
                 class: className,
                 confidence: confidence.toFixed(3),
-                classIndex: maxIdx
+                classIndex: maxIdx,
+                timestamp: Date.now()
             });
             return {
                 class: className,
@@ -704,7 +799,7 @@ export class JaakStamps {
             };
         }
         catch (error) {
-            this.debugLog('❌ Error classifying document:', error);
+            this.logger.error('Error al clasificar documento:', error);
             return null;
         }
     }
@@ -746,7 +841,7 @@ export class JaakStamps {
         }
         this.mobileNetClassMap = undefined;
         this.isModelPreloaded = false;
-        this.debugLog('🧹 Canvas pool cleaned up');
+        this.logger.state('CANVAS_POOL_LIMPIADO', { timestamp: Date.now() });
     }
     async getMaxResolution() {
         try {
@@ -796,18 +891,19 @@ export class JaakStamps {
                     constraints.width = { ideal: maxWidth };
                     constraints.height = { ideal: maxHeight };
                 }
-                this.debugLog('📐 Resolution capabilities:', {
+                this.logger.state('CAPACIDADES_RESOLUCION_DETECTADAS', {
                     maxWidth: capabilities.width.max,
                     maxHeight: capabilities.height.max,
                     selectedWidth: constraints.width.ideal,
                     selectedHeight: constraints.height.ideal,
-                    isTablet
+                    isTablet,
+                    deviceType: this.deviceType
                 });
             }
             return constraints;
         }
         catch (err) {
-            this.debugLog('⚠️ Could not get capabilities, using fallback');
+            this.logger.warn('No se pudieron obtener capacidades de cámara, usando configuración de respaldo');
             // Optimized fallback for tablets
             const isTablet = /iPad|Android/i.test(navigator.userAgent) && window.innerWidth >= 768;
             const fallbackConstraints = {
@@ -840,8 +936,11 @@ export class JaakStamps {
                 // 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);
+                this.logger.state('CAMARA_CONFIGURADA', {
+                    isRearCamera: isRear,
+                    shouldMirrorVideo: this.shouldMirrorVideo,
+                    videoActive: this.isVideoActive
+                });
                 return new Promise((resolve) => {
                     this.videoRef.onloadedmetadata = async () => {
                         await this.videoRef.play();
@@ -858,7 +957,7 @@ export class JaakStamps {
             }
         }
         catch (err) {
-            this.debugLog("❌ No se pudo acceder a la cámara:", err);
+            this.logger.error('No se pudo acceder a la cámara:', err);
             this.handleCameraPermissionError(err);
         }
     }
@@ -882,15 +981,39 @@ export class JaakStamps {
         const transposedData = new Float32Array(R.concat(G, B));
         return new window.ort.Tensor("float32", transposedData, [1, 3, this.INPUT_SIZE, this.INPUT_SIZE]);
     }
+    getDeviceMemoryInfo() {
+        const nav = navigator;
+        const memory = nav.deviceMemory || nav.hardwareConcurrency || 4;
+        const connection = nav.connection || nav.mozConnection || nav.webkitConnection;
+        const isSlowConnection = connection && (connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g');
+        return {
+            estimatedRAM: memory,
+            isLowMemory: memory <= 4,
+            isSlowConnection: isSlowConnection
+        };
+    }
     getSessionOptions() {
+        const deviceInfo = this.getDeviceMemoryInfo();
+        if (deviceInfo.isLowMemory) {
+            return {
+                executionProviders: ['wasm'],
+                graphOptimizationLevel: 'basic',
+                logSeverityLevel: 4,
+                logVerbosityLevel: 0,
+                enableCpuMemArena: false,
+                enableMemPattern: false,
+                executionMode: 'sequential',
+                interOpNumThreads: 1,
+                intraOpNumThreads: 1,
+            };
+        }
         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
+            graphOptimizationLevel: 'all',
+            logSeverityLevel: this.debug ? 2 : 4,
             logVerbosityLevel: 0,
             enableCpuMemArena: true,
             enableMemPattern: true,
@@ -900,6 +1023,12 @@ export class JaakStamps {
         };
     }
     async startDetection() {
+        this.logger.state('INICIANDO_DETECCION', {
+            sessionExists: !!this.session,
+            modelPreloaded: this.isModelPreloaded,
+            videoActive: this.isVideoActive,
+            captureStep: this.captureStep
+        });
         try {
             // Check if model is already preloaded
             if (!this.session) {
@@ -913,9 +1042,30 @@ export class JaakStamps {
                     this.statusColor = "#007bff";
                 }
                 const modelPath = this.MODEL_PATH;
-                this.debugLog('🤖 Loading detection model:', modelPath);
+                this.logger.state('CARGANDO_MODELO_DETECCION', { modelPath });
                 const sessionOptions = this.getSessionOptions();
-                this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
+                try {
+                    this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
+                }
+                catch (error) {
+                    if (error.message.includes('failed to allocate a buffer')) {
+                        this.logger.warn('Fallo en asignación de buffer, intentando con configuración mínima');
+                        const fallbackOptions = {
+                            executionProviders: ['wasm'],
+                            graphOptimizationLevel: 'disabled',
+                            logSeverityLevel: 4,
+                            enableCpuMemArena: false,
+                            enableMemPattern: false,
+                            executionMode: 'sequential',
+                            interOpNumThreads: 1,
+                            intraOpNumThreads: 1,
+                        };
+                        this.session = await window.ort.InferenceSession.create(modelPath, fallbackOptions);
+                    }
+                    else {
+                        throw error;
+                    }
+                }
                 // Load MobileNet model if classification is enabled and not already loaded
                 if (this.useDocumentClassification && !this.mobileNetSession) {
                     if (this.debug) {
@@ -930,7 +1080,7 @@ export class JaakStamps {
                 this.emitReadyEvent();
             }
             else {
-                this.debugLog('🚀 Using preloaded models');
+                this.logger.state('USANDO_MODELOS_PRECARGADOS', { sessionExists: !!this.session, modelPreloaded: this.isModelPreloaded });
                 if (this.debug) {
                     this.statusMessage = "Usando modelos precargados...";
                     this.statusColor = "#007bff";
@@ -949,7 +1099,7 @@ export class JaakStamps {
             this.detectFrame();
         }
         catch (err) {
-            this.debugLog("Error al inicializar:", err);
+            this.logger.error('Error al inicializar detección:', err);
             this.statusMessage = "Error al inicializar el detector";
             this.statusColor = "#ff6b6b";
             this.isLoading = false;
@@ -1031,7 +1181,7 @@ export class JaakStamps {
             }
         }
         catch (e) {
-            this.debugLog("Error en inferencia:", e);
+            this.logger.error('Error en inferencia de modelo:', e);
             // Solo continuar si no hemos completado el proceso
             if (this.captureStep !== 'completed') {
                 // On error, wait longer before retrying
@@ -1159,7 +1309,7 @@ export class JaakStamps {
             if (!this.hasScreenshotTaken) {
                 this.lastDetectedBox = bestBox;
                 this.takeScreenshot().catch(error => {
-                    this.debugLog('❌ Error taking screenshot:', error);
+                    this.logger.error('Error al tomar captura de pantalla:', error);
                 });
                 this.hasScreenshotTaken = true;
                 // Reset para permitir segunda captura
@@ -1177,6 +1327,7 @@ export class JaakStamps {
         if (boxes.length === 0) {
             this.statusMessage = "Posicione la identificación dentro del marco";
             this.statusColor = "#ff6b6b";
+            this.logger.debug('Sin detección de documento en el frame');
         }
         else {
             const bestBox = boxes.reduce((best, current) => current.score > best.score ? current : best);
@@ -1186,6 +1337,11 @@ export class JaakStamps {
             if (allSidesAligned) {
                 this.statusMessage = "Identificación perfectamente alineada. Mantenga inmóvil";
                 this.statusColor = "#00ff00";
+                this.logger.state('DOCUMENTO_PERFECTAMENTE_ALINEADO', {
+                    score: bestBox.score,
+                    boxDimensions: { width: bestBox.w, height: bestBox.h },
+                    alignedSides: 4
+                });
             }
             else if (alignedSides > 0) {
                 this.statusMessage = `Alinee los lados restantes (${alignedSides}/4 lados correctos)`;
@@ -1246,6 +1402,14 @@ export class JaakStamps {
     async takeScreenshot() {
         if (!this.videoRef || !this.lastDetectedBox)
             return;
+        this.logger.state('INICIANDO_CAPTURA', {
+            captureStep: this.captureStep,
+            detectedBox: this.lastDetectedBox,
+            videoResolution: {
+                width: this.videoRef.videoWidth,
+                height: this.videoRef.videoHeight
+            }
+        });
         // Activar animación
         this.triggerCaptureAnimation();
         // OPTIMIZATION: Reuse capture canvas for full frame
@@ -1285,7 +1449,7 @@ export class JaakStamps {
                         await this.loadMobileNetModel();
                     }
                     catch (error) {
-                        this.debugLog('⚠️ Failed to load classification model, continuing without classification:', error);
+                        this.logger.warn('Fallo al cargar modelo de clasificación, continuando sin clasificación:', error);
                     }
                 }
                 // Classify the cropped document if model is available
@@ -1293,7 +1457,7 @@ export class JaakStamps {
                     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.logger.state('PASAPORTE_DETECTADO_SALTANDO_REVERSO', { classification: classification?.class });
                         this.completeProcess(true);
                         return;
                     }
@@ -1314,14 +1478,23 @@ export class JaakStamps {
                     this.isDetectionPaused = false;
                 }, 3000);
             }, 800);
-            this.debugLog('📸 FRENTE capturado. Esperando trasera...');
+            this.logger.state('CAPTURA_FRENTE_COMPLETADA', {
+                captureStep: this.captureStep,
+                hasFullFrame: !!this.capturedFullFrame,
+                hasCroppedId: !!this.capturedCroppedId
+            });
         }
         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.');
+            this.logger.state('CAPTURA_TRASERA_COMPLETADA', {
+                captureStep: this.captureStep,
+                hasBackFullFrame: !!this.capturedBackFullFrame,
+                hasBackCroppedId: !!this.capturedBackCroppedId,
+                processCompleted: true
+            });
         }
     }
     triggerCaptureAnimation() {
@@ -1345,7 +1518,7 @@ export class JaakStamps {
             const ctx = this.canvasRef.getContext("2d");
             ctx.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
         }
-        this.debugLog('🛑 Detector de identificación detenido');
+        this.logger.state('DETECTOR_DETENIDO', { timestamp: Date.now() });
     }
     resetDetection() {
         this.bestScore = 0;
@@ -1384,6 +1557,13 @@ export class JaakStamps {
             "Proceso completado (solo frente capturado)" :
             "Proceso de captura completado exitosamente";
         this.statusColor = "#28a745";
+        this.logger.state('PROCESO_COMPLETADO', {
+            skippedBack,
+            hasFrontImages: !!(this.capturedFullFrame && this.capturedCroppedId),
+            hasBackImages: !!(this.capturedBackFullFrame && this.capturedBackCroppedId),
+            totalImages: skippedBack ? 2 : 4,
+            timestamp: new Date().toISOString()
+        });
         // Detener el detector
         this.stopDetection();
         // Emitir evento con las imágenes capturadas
@@ -1435,7 +1615,7 @@ export class JaakStamps {
         this.cleanup();
     }
     render() {
-        return (h("div", { key: '86ff6966e69804bea4faef5a9201480bd7ef5b9a', class: "detector-container" }, h("div", { key: 'aaed4a078d4eff98674f2163a56a1596782612bd', class: "video-container" }, h("video", { key: '6ae6a7c626c9b2b6e6915c826517d1365205b3a0', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), h("canvas", { key: 'c8666e4b4814e633155be738e23ada098fb3be93', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (h("div", { key: '968bcd21315afcf054f881647723299e7e57c29b', class: "overlay-mask" }, h("div", { key: '77f8a331f3d9e19b35c11b6c23b06420cbab9fd5', class: "card-outline" }, h("div", { key: '9d0164e7b2dcf6392471151c236127cd57507512', class: "side side-top" }), h("div", { key: '05a003eb49d25c72644aea2511b6519c5241ffb4', class: "side side-right" }), h("div", { key: 'a561ae9a94eb78aacfc24bac717164b3e22f41e5', class: "side side-bottom" }), h("div", { key: '81d64e5b58032c14062fc8efdee417db7f8a9f12', class: "side side-left" }), h("div", { key: '03c02e2c4c73c525965e34c7c47bb74f769d577f', class: "corner corner-tl" }), h("div", { key: '84780aec021ec4e0c7d38f6a659be765c4604ed5', class: "corner corner-tr" }), h("div", { key: '1ea67789c5a38cbc790f911f8f06b55c866d3927', class: "corner corner-bl" }), h("div", { key: 'e0e1999b0c5c37451850203eed4dbc2ff5834261', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (h("div", { key: '4909eb28d62b1674436c148ef46cd05a35ff8ec8', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (h("button", { key: '5a971c2121cf9962719ad89fc45530b8acccb550', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")), this.isVideoActive && (h("div", { key: '109e5885c49212f89d5678d9c9716ebd48614126', class: "camera-controls" }, this.isMultipleCamerasAvailable && (h("button", { key: '7c8ce2cd775c0646c80378cd0ad1f70243443ddf', class: "flip-camera-button", onClick: () => this.flipCamera(), type: "button", title: "Cambiar c\u00E1mara" }, "Girar c\u00E1mara")), h("button", { key: '5d3d066ba7e317fdc33878eeb9f2f7d28c6f65dc', class: "camera-selector-button", onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara" }, "C\u00E1maras"), this.debug && (h("div", { key: '4cbc284f2efbcb90ef91ea2e064bf0aa1e7980af', style: {
+        return (h("div", { key: '87e2e2065012b5792b52b18349490492b5bdc80c', class: "detector-container" }, h("div", { key: '04b8bba38297d39c84ddc01f5a9bf72c65b9bef4', class: "video-container" }, h("video", { key: '905b99e1670fccb2ff5555818f91d0b0241fa29d', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), h("canvas", { key: '3f219b649b8d4f961b15256b8586451c2a737eb8', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (h("div", { key: 'f8d6742689d4446897ca48c2407cb3d3fab643e9', class: "overlay-mask" }, h("div", { key: '630a06c530f168cc0b71286adbf48fd922eb710d', class: "card-outline" }, h("div", { key: 'ce8c043ad41d5574cd0c4d737dec08b9f7fee927', class: "side side-top" }), h("div", { key: 'e90ead592f84e5df98143bc88714e70f32684204', class: "side side-right" }), h("div", { key: '31d6778c5036e42a3addb26c732149abc5a18ef7', class: "side side-bottom" }), h("div", { key: 'f85c31e77f024f9070c706b06b91d62a7fdbc357', class: "side side-left" }), h("div", { key: '27b362711bc53019483c0d36742d97e10ae9b9ce', class: "corner corner-tl" }), h("div", { key: '03b55893610684d690987c2eacf3c4e5d0c3bbe5', class: "corner corner-tr" }), h("div", { key: 'b6bf31327925c45a7fa8e1fd5ab2f25b824a03a2', class: "corner corner-bl" }), h("div", { key: '0737e0c82f8ad9703ce2546f3e594db6d50cafde', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (h("div", { key: '145f8383c496e151bd6ef4f5841292adeba083c4', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (h("button", { key: 'fcdedebc31eddd21b978dd63e93c348d324b47da', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")), this.isVideoActive && (h("div", { key: 'dc9157bf7bed3b6439db742055201e2c4eddec84', class: "camera-controls" }, this.isMultipleCamerasAvailable && (h("button", { key: '6b052562ccb203dbf3cc8b627f31ed2435559f80', class: "flip-camera-button", onClick: () => this.flipCamera(), type: "button", title: "Cambiar c\u00E1mara" }, "Girar c\u00E1mara")), h("button", { key: 'f9fad1757d01f0cb45f65bb2088bd1f0bc0e4e8d', class: "camera-selector-button", onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara" }, "C\u00E1maras"), this.debug && (h("div", { key: '5362fb33508c7f903b09f65fdb449b608804260d', style: {
                 position: 'absolute',
                 top: '50px',
                 right: '0',
@@ -1445,10 +1625,10 @@ export class JaakStamps {
                 fontSize: '10px',
                 borderRadius: '4px',
                 whiteSpace: 'nowrap'
-            } }, "C\u00E1maras: ", this.availableCameras.length, h("br", { key: 'df214515289add2cc73f989bfacb59069334a0e6' }), "M\u00FAltiples: ", this.isMultipleCamerasAvailable ? 'Sí' : 'No', h("br", { key: 'aa2b1784781b5b45d24139e2b6cc4865d9f3a00c' }), "Selector: ", this.showCameraSelector ? 'Visible' : 'Oculto', h("br", { key: 'fb95b2b58c9fb89f632d85a9271b7788d45a66c0' }), "Video: ", this.isVideoActive ? 'Activo' : 'Inactivo')))), this.showCameraSelector && this.availableCameras.length > 0 && (h("div", { key: 'ec1c90c5a6c84e3ef75724e7e600a60714545608', class: "camera-selector-dropdown" }, h("div", { key: 'ea118817b6563c78b7fbf5ee66af2e38a441a8b7', class: "camera-selector-header" }, h("span", { key: '52603259d50ffb7aa6ea5753762f0f0d018b39ff' }, "Seleccionar C\u00E1mara"), h("button", { key: '422ae0643f5d1451cf539b3a77becbf44904a484', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: 'd5acef7ba0b1645c52fb3ea7b3c64e70fa187a5f', class: "camera-list" }, this.availableCameras.map((camera) => (h("button", { key: camera.deviceId, class: `camera-option ${this.selectedCameraId === camera.deviceId ? 'selected' : ''}`, onClick: () => {
+            } }, "C\u00E1maras: ", this.availableCameras.length, h("br", { key: '5ead451a54a59c885f62740d0a0ce43ba8b674e4' }), "M\u00FAltiples: ", this.isMultipleCamerasAvailable ? 'Sí' : 'No', h("br", { key: '9a92514d07576ed7052eaa3a418c00013ef7c479' }), "Selector: ", this.showCameraSelector ? 'Visible' : 'Oculto', h("br", { key: 'd06abebad3b2e3c19aa22e511e0c4cfd4425b8b2' }), "Video: ", this.isVideoActive ? 'Activo' : 'Inactivo')))), this.showCameraSelector && this.availableCameras.length > 0 && (h("div", { key: '93a09ce3bb108175b55944a71c21e86e58de55be', class: "camera-selector-dropdown" }, h("div", { key: '7ceb4c8826945ab2a9da106a88a44cbb5490e92a', class: "camera-selector-header" }, h("span", { key: 'fa98621700584d8021ff57eca6f804b6eb792c5b' }, "Seleccionar C\u00E1mara"), h("button", { key: 'ce6477a1494f58fb5974dd7c9e62bd7d041572c5', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: 'eff226b006c95fafce2566947155e13ee68f9a02', class: "camera-list" }, this.availableCameras.map((camera) => (h("button", { key: camera.deviceId, class: `camera-option ${this.selectedCameraId === camera.deviceId ? 'selected' : ''}`, onClick: () => {
                 this.switchCamera(camera.deviceId);
                 this.toggleCameraSelector();
-            }, type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${this.availableCameras.indexOf(camera) + 1}`), this.selectedCameraId === camera.deviceId && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: 'b670e7bf441559bf156874dbe3bbf83dbff2fa0d', class: "device-info" }, h("small", { key: '4d333925c1ff4197b6009414ed694b0a0eb06159' }, "Dispositivo: ", this.deviceType)))))), this.isCapturing && (h("div", { key: '21f7ea0e50575226daba8607ab4bccc5029aa179', class: "capture-animation" })), this.showFlipAnimation && (h("div", { key: 'c2350cc43d3a119391f62f2cf771ed5afcdb3558', class: "flip-animation" }, h("div", { key: 'a91de9e8662a4750555bce2a879b89f9216b8156', class: "id-card-icon" }), h("div", { key: 'def1c2534e1aae27e262deb6fd26a73ff0c8cb9b', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (h("div", { key: 'acbbfb6d07e4f6bf343ff18af2d55979e76db3d4', class: "success-animation" }, h("div", { key: 'f5acd84325226e6b1ede1180335d7495a6b2d95e', class: "check-icon" }), h("div", { key: '393fd8300ce48e59bd3ef94f0e895abc3a938c1f', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (h("div", { key: 'ce0d1baebab8bf0e18531a26b549f38e349a0d72', class: "loading-overlay" }, h("div", { key: '14c76fa00ddd814f37bd9c6dc57f761119886566', class: "loading-spinner" }), h("div", { key: '87ccb288f927e61ec126d83f44061699810c9e06', class: "loading-text" }, this.statusMessage))), this.debug && (h("div", { key: '943dff6e2772f2595a95116e8943866f97cada6e', class: "status-bar" }, h("div", { key: '00fe53b71ef94d51636259f106e4518df910848d', class: "status-message", style: { 'color': this.statusColor } }, this.statusMessage))), h("div", { key: '4c3bd150006473d9540fb1418f11f45fb96d1e56', class: "watermark" }, h("img", { key: 'c634701f52a4422c7be5b4007bf34ba4aeb4ebcc', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+            }, type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${this.availableCameras.indexOf(camera) + 1}`), this.selectedCameraId === camera.deviceId && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: '617d33caa5d3b3e6dca56d479b27c0ac7ed19c2c', class: "device-info" }, h("small", { key: 'fba56ac1238c33864f8dba1d8bd9a5661e11d770' }, "Dispositivo: ", this.deviceType)))))), this.isCapturing && (h("div", { key: 'b46982a0b949ee9d50d0a819c59b24dceec9d7b2', class: "capture-animation" })), this.showFlipAnimation && (h("div", { key: 'c82773fffca8ec53949197a105e1e11bf0f9b294', class: "flip-animation" }, h("div", { key: 'ad52c9ec91132bf5ed94e36f621489a66b0bf680', class: "id-card-icon" }), h("div", { key: '2be407ee84beddc5ce968a9a94d9014f416cde54', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (h("div", { key: 'f20b6be925178a123de99e535e893b7c09391dee', class: "success-animation" }, h("div", { key: 'd3ae65d40943f73bc92e9529764ded454adc5dbf', class: "check-icon" }), h("div", { key: 'f2b03082a106c69f09d384ba3b1cb4a636d3a189', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (h("div", { key: '65736e303d9eb1c3f6f2dccb5cc0d27c571ac9c8', class: "loading-overlay" }, h("div", { key: '5863d855d1caea9202a9f3d0a29919985ddbb926', class: "loading-spinner" }), h("div", { key: 'aa5a16c96ac6bfa43846ba06346fad6dce39dfbb', class: "loading-text" }, this.statusMessage))), this.debug && (h("div", { key: '308c664b07d2c2427c38f766fc9eb78d27843f67', class: "status-bar" }, h("div", { key: '3884b311710d7f373a508eb492771e503e68f648', class: "status-message", style: { 'color': this.statusColor } }, this.statusMessage))), h("div", { key: '3125cfecda03d3ab9e80e0d9d5674f1cc167e2f8', class: "watermark" }, h("img", { key: '5ef43a18aea74f570db0d61f4fd86c3becf1d23e', 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"; }