@jaak.ai/stamps 2.0.0-dev.31 → 2.0.0-dev.33

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

@@ -18,12 +18,24 @@ export class JaakStamps {
     isMaskReady = false;
     shouldMirrorVideo = true;
     showCameraSelector = false;
+    isSwitchingCamera = false;
     currentStatus = {
         message: 'Inicializando componente...',
         description: 'Configurando servicios y cargando recursos',
         type: 'initializing',
         isInitialized: false
     };
+    performanceData = {
+        fps: 0,
+        inferenceTime: 0,
+        memoryUsage: 0,
+        onnxLoadTime: 0,
+        frameProcessingTime: 0,
+        totalDetections: 0,
+        successfulDetections: 0,
+        detectionRate: 0
+    };
+    isPerformanceMonitorMinimized = false;
     // Services
     serviceContainer;
     logger;
@@ -40,6 +52,22 @@ export class JaakStamps {
     lastDetectedBox;
     startTime;
     hasScreenshotTaken = false;
+    alignmentStartTime;
+    alignmentTimer;
+    // Performance monitoring
+    performanceMetrics = {
+        fps: 0,
+        inferenceTime: 0,
+        memoryUsage: 0,
+        cpuUsage: 0,
+        onnxLoadTime: 0,
+        frameProcessingTime: 0,
+        totalDetections: 0,
+        successfulDetections: 0,
+        detectionRate: 0,
+        lastUpdateTime: 0
+    };
+    performanceUpdateInterval;
     // Performance optimization
     frameSkipCounter = 0;
     FRAME_SKIP = 2;
@@ -54,6 +82,9 @@ export class JaakStamps {
         await this.setupEventListeners();
         this.updateStatus('Inicializando cámara...', 'Detectando dispositivos disponibles', 'initializing');
         await this.initializeComponent();
+        if (this.debug) {
+            this.initializePerformanceMonitor();
+        }
     }
     async initializeServices() {
         const config = {
@@ -294,17 +325,24 @@ export class JaakStamps {
             return { success: true, message: 'Model already loaded' };
         }
         try {
+            const loadStartTime = performance.now();
             this.updateStatus('Descargando modelo de detección...', 'Obteniendo red neuronal para reconocimiento de documentos', 'loading');
             this.stateManager.updateCaptureState({ isLoading: true });
             await this.detectionService.loadModel();
             this.updateStatus('Cargando clasificador...', 'Preparando modelo de clasificación de tipos de documento', 'loading');
             await this.detectionService.loadClassificationModel();
+            const loadEndTime = performance.now();
+            const loadTime = loadEndTime - loadStartTime;
+            // Record ONNX load time
+            if (this.debug) {
+                this.recordOnnxPerformance(loadTime, 0);
+            }
             this.updateStatus('Optimizando modelos...', 'Configurando parámetros de rendimiento', 'loading');
             await new Promise(resolve => setTimeout(resolve, 300));
             this.updateStatus('Modelos precargados', '', 'ready');
             this.stateManager.updateCaptureState({ isLoading: false });
             this.emitReadyEvent();
-            this.logger.state('MODELOS_PRECARGADOS_EXITOSAMENTE');
+            this.logger.state('MODELOS_PRECARGADOS_EXITOSAMENTE', { loadTime: Math.round(loadTime) });
             return { success: true, message: 'Models preloaded successfully' };
         }
         catch (error) {
@@ -340,11 +378,19 @@ export class JaakStamps {
         try {
             // Paso 1: Verificar y cargar modelos si es necesario
             if (!this.detectionService.isModelLoaded()) {
+                const loadStartTime = performance.now();
                 this.updateStatus('Cargando modelo de detección...', 'Descargando red neuronal para reconocimiento', 'loading');
                 this.stateManager.updateCaptureState({ isLoading: true });
                 await this.detectionService.loadModel();
                 this.updateStatus('Cargando clasificador...', 'Preparando modelo de clasificación de documentos', 'loading');
                 await this.detectionService.loadClassificationModel();
+                const loadEndTime = performance.now();
+                const loadTime = loadEndTime - loadStartTime;
+                // Record ONNX load time
+                if (this.debug) {
+                    this.recordOnnxPerformance(loadTime, 0);
+                }
+                this.logger.state('MODELOS_CARGADOS_EN_DETECCION', { loadTime: Math.round(loadTime) });
             }
             // Paso 2: Detectar y configurar dispositivos
             this.updateStatus('Detectando cámaras...', 'Buscando dispositivos de captura disponibles', 'loading');
@@ -396,6 +442,7 @@ export class JaakStamps {
     }
     async detectFrame() {
         try {
+            const frameStartTime = performance.now();
             const captureState = this.stateManager.getCaptureState();
             if (!this.videoRef || !this.detectionContainer || !this.detectionService.isModelLoaded())
                 return;
@@ -423,8 +470,15 @@ export class JaakStamps {
                 return;
             }
             this.lastInferenceTime = currentTime;
+            // Measure preprocessing and inference time
+            const inferenceStartTime = performance.now();
             const inputTensor = this.detectionService.preprocess(this.videoRef);
             const detections = await this.detectionService.runInference(inputTensor);
+            const inferenceTime = performance.now() - inferenceStartTime;
+            // Record ONNX performance metrics
+            if (this.debug) {
+                this.recordOnnxPerformance(0, inferenceTime);
+            }
             // Update best score logic
             if (this.startTime && Date.now() - this.startTime < 5000) {
                 detections.forEach(detection => {
@@ -450,6 +504,12 @@ export class JaakStamps {
                 this.detectionBoxes = [];
             }
             this.updateMaskColor(detections);
+            // Record frame processing metrics
+            if (this.debug) {
+                const frameEndTime = performance.now();
+                const totalFrameTime = frameEndTime - frameStartTime;
+                this.recordFrameProcessing(totalFrameTime, detections.length);
+            }
             // Continue detection loop
             if (captureState.step !== 'completed') {
                 if (this.consecutiveFailures > this.MAX_FAILURES) {
@@ -480,7 +540,16 @@ export class JaakStamps {
         if (this.videoStream) {
             this.videoStream.getTracks().forEach(track => track.stop());
         }
+        if (this.alignmentTimer) {
+            clearTimeout(this.alignmentTimer);
+            this.alignmentTimer = undefined;
+        }
+        if (this.performanceUpdateInterval) {
+            clearInterval(this.performanceUpdateInterval);
+            this.performanceUpdateInterval = undefined;
+        }
         this.detectionBoxes = [];
+        this.alignmentStartTime = undefined;
         this.serviceContainer?.cleanup();
     }
     render() {
@@ -499,7 +568,7 @@ export class JaakStamps {
             deviceType: 'desktop',
             preferredFacing: null
         };
-        return (h("div", { key: '3e5555392fdc2abb3f5063110ac8896501385934', class: "detector-container" }, h("div", { key: '7b4f44477ec8eb1b89088182b32ae5bdccec3077', class: "video-container" }, h("video", { key: '2dedc3a7489bd6016d9b04df970de191e543aed8', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: 'ac6eb89a2bea40ecd043f4709e92acbe7c3ddaba', ref: el => this.detectionContainer = el, class: `detection-overlay ${this.shouldMirrorVideo ? 'mirror' : ''}` }, this.debug && this.detectionBoxes.map((box, index) => (h("div", { key: index, class: "detection-box", style: {
+        return (h("div", { key: '6d83055c7dcfc6c6f77e99d8439866aaca31f323', class: "detector-container" }, h("div", { key: '89d95da0fbee2bf03a455da911103d13f2d55a64', class: "video-container" }, h("video", { key: 'a06b3df2a0c2de21c4c3113ca5357a0518168214', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: 'a11ae04dd825208d069a02368708811a718a5b68', ref: el => this.detectionContainer = el, class: `detection-overlay ${this.shouldMirrorVideo ? 'mirror' : ''}` }, this.debug && this.detectionBoxes.map((box, index) => (h("div", { key: index, class: "detection-box", style: {
                 position: 'absolute',
                 left: `${box.x}px`,
                 top: `${box.y}px`,
@@ -508,10 +577,7 @@ export class JaakStamps {
                 border: '2px solid #32406C',
                 pointerEvents: 'none',
                 boxSizing: 'border-box'
-            } })))), this.isMaskReady && (h("div", { key: '6b7c6b605eb0d856b7ca8596ec1a50dc900efbdb', class: "overlay-mask" }, h("div", { key: '31575da3b5c97bb7ed58a181ba6b4b0bb52c7554', class: "card-outline" }, h("div", { key: '624f1ca7887a8ed23b511cdaef41879dc11479b8', class: "side side-top" }), h("div", { key: '277299b2b7b9e20f3323752655e2eb28f1a5963c', class: "side side-right" }), h("div", { key: 'a911171b451dc48796b97d0a6fa2590cb8705364', class: "side side-bottom" }), h("div", { key: 'a24c041a52ad23368dd7f44378c14a556e10b120', class: "side side-left" }), h("div", { key: '5bd74218e3f93b55e7fd94b573e0f5666c587fcd', class: "corner corner-tl" }), h("div", { key: 'ea5f10f14adc38fb642749d0505ae11a23b9ad93', class: "corner corner-tr" }), h("div", { key: 'ce51a50c570fffe352cea0266a967c18a0c56deb', class: "corner corner-bl" }), h("div", { key: '36c2dc3833f5e776803466de9feb123716d31728', class: "corner corner-br" }), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '8b9227c89cc922dda92b6e176413d78c43188ebe', class: "guide-text" }, "Alinee su identificaci\u00F3n con el marco"))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("button", { key: 'f612542ab94482a4f499d1cea303f033d58b20db', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")), captureState.isVideoActive && (h("div", { key: '82c988e8238a20e5a6290c0f747d392a2bd50068', class: "camera-controls" }, h("button", { key: '5e761bec2fe0f8c466be65ade262d24ec43e564a', class: "camera-selector-button", onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara" }, "C\u00E1maras"))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (h("div", { key: '450476b15866b2facb24d36da2dbc775aee2ad4c', class: "camera-selector-dropdown" }, h("div", { key: '5c1642572b67215e322d0826ee7e28f2f12b21fe', class: "camera-selector-header" }, h("span", { key: 'e98b5cb4375a09776c544b803d59ff3109569d3e' }, "Seleccionar C\u00E1mara"), h("button", { key: '317190dc57cbaa60c4d299cc940bb8a6379f514d', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: '94ecfe4c4e6b11dae84e9e71282dffee14e1f85b', class: "camera-list" }, cameraInfo.availableCameras.map((camera) => (h("button", { key: camera.id, class: `camera-option ${cameraInfo.selectedCameraId === camera.id ? 'selected' : ''}`, onClick: () => {
-                this.cameraService.switchCamera(camera.id);
-                this.toggleCameraSelector();
-            }, type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${cameraInfo.availableCameras.indexOf(camera) + 1}`), cameraInfo.selectedCameraId === camera.id && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: 'afd0e161367e9dcf9105bef6fa3510a8fa25d221', class: "device-info" }, h("small", { key: 'fd57d4bfaba32b77d441d163491655468b0263d2' }, "Dispositivo: ", cameraInfo.deviceType)))))), captureState.isCapturing && (h("div", { key: 'dcb69cad03369a87e2834e1cd04cbab5dc052866', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: '899ef764d10497b023140b296c3fc72a7e762607', class: "flip-animation" }, h("div", { key: 'ec7449b92e28dcbd40d956e435c3a0ebc65d16ff', class: "id-card-icon" }), h("div", { key: 'f086a238ecc3b3fa91fc1010380676e9b3bc7429', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: '4d6f0030db7a14c403b4b6fd00714aa04fd5abed', class: "success-animation" }, h("div", { key: 'c08babe375bbc94c9403ef264739016bbfac13ae', class: "check-icon" }), h("div", { key: '24393d75b67dd27da6520dd2b7a223dc9dfa73e4', class: "success-text" }, "\u00A1Proceso completado!"))), this.currentStatus.type !== 'active' && (h("div", { key: '20820f96090471728b9ed654e0b92f0a503e2052', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: '0709abb333b47085e4c48ff162e58226e2204978', class: "status-spinner" })), h("div", { key: '5eb17314e376a5e0db32a6f00023d2f502c55fe4', class: "status-content" }, h("div", { key: 'fd98ef9b6889de7ca5cce0befd05285d7247795c', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: '3aa93673546a06137f407aafd2933bf09d6814b0', class: "status-description" }, this.currentStatus.description))))), h("div", { key: '2247b9245bc8ecf265cb03c6c518583ae49a3e6d', class: "watermark" }, h("img", { key: '7a50ec51fe6c08a6d7907f5d4bda85b3d9a5b48b', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+            } })))), this.isMaskReady && (h("div", { key: '58c0a0bdd8088835c677c9b455e01ffd8a28bcc0', class: "overlay-mask" }, h("div", { key: '52f87e8837f82a4ab6fd75bd22f8c178ff5670c4', class: "card-outline" }, h("div", { key: '0f503ec7ab610342e01d2b976fff0a5ff1b01845', class: "side side-top" }), h("div", { key: '305c980c5d638270c348ce2fc7bf762515557ea1', class: "side side-right" }), h("div", { key: '201531d41aa8fab1782bc3045bda313bfac14929', class: "side side-bottom" }), h("div", { key: 'acaa082133217e2b4aa807571d6f7f8e5f225530', class: "side side-left" }), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '17246f4264074dfae7fdef963120a2d3756b0f64', class: "guide-text" }, "Alinee su identificaci\u00F3n con el marco"))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("button", { key: '9f21b022b3601f2b8f9898f72683e33b86f433a6', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")), captureState.isVideoActive && (h("div", { key: '3c9d8e3b2135dd14414463a6ada636b425385583', class: "camera-controls" }, h("button", { key: 'b287e1dab5a98f2eb6e05e924b1af9bb6616f947', class: `camera-selector-button ${this.isSwitchingCamera ? 'loading' : ''}`, onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara", disabled: this.isSwitchingCamera }, this.isSwitchingCamera ? (h("div", { class: "button-spinner" })) : ('Cámaras')))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (h("div", { key: 'd8dca3049cbdf827d03cd432ac183a1651f77ab6', class: "camera-selector-dropdown" }, h("div", { key: '3a4200b5624f5d96de4ae8acb821a47d31a34c93', class: "camera-selector-header" }, h("span", { key: '14f8e8618d9404cdfd3f9cc150e54b510507c977' }, "Seleccionar C\u00E1mara"), h("button", { key: '98367e182d227093742e0fc9118f81db32352bdd', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: '172471ef3c0d55cb619a061eafe37205c3a0bee4', class: "camera-list" }, cameraInfo.availableCameras.map((camera) => (h("button", { key: camera.id, class: `camera-option ${cameraInfo.selectedCameraId === camera.id ? 'selected' : ''}`, onClick: () => this.handleCameraSwitch(camera.id), type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${cameraInfo.availableCameras.indexOf(camera) + 1}`), cameraInfo.selectedCameraId === camera.id && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: 'e08ced0c02b5662be31c60b2ba35c83fac46bb80', class: "device-info" }, h("small", { key: '8489f10c13a0a528abc878cc66d71dc769890b90' }, "Dispositivo: ", cameraInfo.deviceType)))))), captureState.isCapturing && (h("div", { key: '89f6c5a9bc1efb9bd8af190ae0821dabe992a2be', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: 'ead4d0cf0751097220572a4946bf4dcb3d7f4f33', class: "flip-animation" }, h("div", { key: '357e981fd9b2f616e9b1b90c8454555dceac6fbd', class: "id-card-icon" }), h("div", { key: '4abfecbb5ee0165b720d6ad8398984b25ecec7a1', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: 'cdeedd36903c8467e7ebb406e3414ecd92abf47c', class: "success-animation" }, h("div", { key: '8731f318d490ff67fa7f68edf264acb762632604', class: "check-icon" }), h("div", { key: '2e21ce0921fedfaa0b90c56ec44d289426ea7708', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: '6cf678c79f8e57fde12202a932fe855905ae770f', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: 'f9e888616736c26624bd3de7c2f1eee297d0a2f5', class: "status-spinner" })), h("div", { key: 'b849c5187ed8e66b4cf62113d2f93c006cf9f836', class: "status-content" }, h("div", { key: '64a2dac4cb5e4c17fc2aa161c8faa389c64a0458', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: '64e85a98129f791d6784a98129f2411607360fff', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: '1d41d3139d7d486bdf9225f584d6de250faeddf7', class: "performance-monitor" }, h("div", { key: '75bf3d45d869c4b0365f994444292de2245d391c', class: "performance-expanded" }, h("div", { key: '762c977e7125202103aba84c568c0fefee43d6b2', class: "metrics-row" }, h("div", { key: '51b03d882f84e835664af11d409fc01a5363c0ce', class: "metric-compact" }, h("span", { key: '21767c803c2fda9fe8653881cb8dfdcaa992fe3b', class: "metric-label" }, "FPS"), h("span", { key: '5467ba22adb75668a0acadd4ffcbaa25117fd8ae', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: 'a6c020d500a72f330a7cbb01cfdddc1fff63f1bb', class: "metric-compact" }, h("span", { key: '5034e33c12ad454368e4fa32567c307bce6ffe0e', class: "metric-label" }, "MEM"), h("span", { key: '19f691984f9e6aac29067fc983561b701b9080de', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: 'c2a11b8dc156b90a4ba18020e5a62ff87c29f624', class: "metrics-row" }, h("div", { key: '7af9c2c1286bb32d6c166d3487c8ea4a02f14490', class: "metric-compact" }, h("span", { key: 'b34e54ac6b4e387ee8155176f999dd2b721a8617', class: "metric-label" }, "INF"), h("span", { key: 'ada2f913ac6c97661a054f9bf596f4ac52eb918e', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: 'cc2d819a7e75af4e03d2521756c23110785076ad', class: "metric-compact" }, h("span", { key: 'b2f7e528be88eafcc66d801e8f547b4d274e0cf8', class: "metric-label" }, "FRAME"), h("span", { key: '1bcddf221b960018fb5505553e9f8cfd3717c349', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: 'cb80b6198f621fab68b13c4992578ef2e548ae99', class: "metrics-row" }, h("div", { key: 'b752b65906c92eff86cad2d0ffdc1420f03a8932', class: "metric-compact" }, h("span", { key: '96af746b42a101c6bfe4c197b652837ecc66fc06', class: "metric-label" }, "DET"), h("span", { key: 'f2038ae4943ebd9ae2ec1d8b907ae23f04c8fd90', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: 'c2e6b9380928b30b1a879a6abc43eb7053da9ac1', class: "metric-compact" }, h("span", { key: '096268d19a7ac7471c5dafd5adc3103d30433a55', class: "metric-label" }, "RATE"), h("span", { key: '7f9e9e49c68da719fe43391518514af3cdab004d', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: 'c6546f8ec722c56fa369da6d5d732f29d3afc65f', class: "watermark" }, h("img", { key: 'd195a395051a4c436dec33d7835c565e748cf60a', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
     }
     // Utility methods
     updateDetectionBoxes(boxes) {
@@ -584,19 +650,37 @@ export class JaakStamps {
             cardOutline?.classList.add('perfect-match');
             corners?.forEach(corner => corner.classList.add('perfect-match'));
             if (!this.hasScreenshotTaken) {
-                this.lastDetectedBox = bestBox;
-                this.takeScreenshot().catch(error => {
-                    this.logger.error('Error al tomar captura de pantalla:', error);
-                });
-                this.hasScreenshotTaken = true;
-                setTimeout(() => {
-                    this.hasScreenshotTaken = false;
-                }, 2000);
+                const currentTime = Date.now();
+                // Initialize alignment start time if not set
+                if (!this.alignmentStartTime) {
+                    this.alignmentStartTime = currentTime;
+                }
+                // Check if document has been aligned for 1 second
+                const alignmentDuration = currentTime - this.alignmentStartTime;
+                if (alignmentDuration >= 1000) {
+                    this.lastDetectedBox = bestBox;
+                    this.takeScreenshot().catch(error => {
+                        this.logger.error('Error al tomar captura de pantalla:', error);
+                    });
+                    this.hasScreenshotTaken = true;
+                    this.alignmentStartTime = undefined;
+                    setTimeout(() => {
+                        this.hasScreenshotTaken = false;
+                    }, 2000);
+                }
             }
         }
         else {
             cardOutline?.classList.remove('perfect-match');
             corners?.forEach(corner => corner.classList.remove('perfect-match'));
+            // Reset alignment timer when document moves out of position
+            if (this.alignmentStartTime) {
+                this.alignmentStartTime = undefined;
+            }
+            if (this.alignmentTimer) {
+                clearTimeout(this.alignmentTimer);
+                this.alignmentTimer = undefined;
+            }
         }
     }
     async takeScreenshot() {
@@ -713,8 +797,52 @@ export class JaakStamps {
         this.logger.state('DETECTOR_DETENIDO', { timestamp: Date.now() });
     }
     toggleCameraSelector() {
+        if (this.isSwitchingCamera)
+            return; // Don't toggle if switching camera
         this.showCameraSelector = !this.showCameraSelector;
     }
+    async handleCameraSwitch(cameraId) {
+        if (this.isSwitchingCamera)
+            return; // Prevent multiple simultaneous switches
+        try {
+            // Close the selector immediately when user selects a camera
+            this.showCameraSelector = false;
+            this.isSwitchingCamera = true;
+            this.logger.state('INICIANDO_CAMBIO_CAMARA', {
+                from: this.cameraService.getSelectedCameraId(),
+                to: cameraId
+            });
+            // Stop current video stream
+            if (this.videoStream) {
+                this.videoStream.getTracks().forEach(track => track.stop());
+            }
+            // Switch camera in service
+            await this.cameraService.switchCamera(cameraId);
+            // Setup new camera stream
+            const newStream = await this.cameraService.setupCamera();
+            // Update video element
+            await this.initializeVideoStream(newStream);
+            this.logger.state('CAMBIO_CAMARA_EXITOSO', {
+                newCameraId: cameraId,
+                isRearCamera: this.cameraService.isRearCamera(newStream)
+            });
+        }
+        catch (error) {
+            this.logger.error('Error al cambiar cámara:', error);
+            // Try to restore previous camera if switch failed
+            try {
+                const fallbackStream = await this.cameraService.setupCamera();
+                await this.initializeVideoStream(fallbackStream);
+            }
+            catch (fallbackError) {
+                this.logger.error('Error al restaurar cámara anterior:', fallbackError);
+                this.updateStatus('Error al cambiar cámara', 'No se pudo completar el cambio de dispositivo', 'error');
+            }
+        }
+        finally {
+            this.isSwitchingCamera = false;
+        }
+    }
     resetDetection() {
         this.stateManager.reset();
         this.hasScreenshotTaken = false;
@@ -723,6 +851,11 @@ export class JaakStamps {
         this.consecutiveFailures = 0;
         this.lastInferenceTime = 0;
         this.detectionBoxes = [];
+        this.alignmentStartTime = undefined;
+        if (this.alignmentTimer) {
+            clearTimeout(this.alignmentTimer);
+            this.alignmentTimer = undefined;
+        }
         const captureState = this.stateManager.getCaptureState();
         if (captureState.isVideoActive && this.detectionService.isModelLoaded()) {
             this.updateStatus('Captura reiniciada', 'Buscando documento en el marco de captura', 'active');
@@ -742,6 +875,60 @@ export class JaakStamps {
         this.detectionBoxes = [];
         this.cleanup();
     }
+    // PERFORMANCE MONITORING METHODS
+    initializePerformanceMonitor() {
+        this.performanceMetrics.lastUpdateTime = performance.now();
+        // Update performance metrics every 500ms
+        this.performanceUpdateInterval = window.setInterval(() => {
+            this.updatePerformanceMetrics();
+        }, 500);
+        this.logger.debug('Monitor de performance inicializado');
+    }
+    updatePerformanceMetrics() {
+        const currentTime = performance.now();
+        const deltaTime = currentTime - this.performanceMetrics.lastUpdateTime;
+        // Calculate FPS
+        if (deltaTime > 0) {
+            this.performanceMetrics.fps = Math.round(1000 / (deltaTime / this.frameSkipCounter || 1));
+        }
+        // Get memory usage if available
+        if ('memory' in performance) {
+            const memInfo = performance.memory;
+            this.performanceMetrics.memoryUsage = Math.round(memInfo.usedJSHeapSize / 1048576); // MB
+        }
+        // Calculate detection success rate
+        if (this.performanceMetrics.totalDetections > 0) {
+            this.performanceMetrics.successfulDetections = this.performanceMetrics.successfulDetections;
+            const detectionRate = (this.performanceMetrics.successfulDetections / this.performanceMetrics.totalDetections) * 100;
+            this.performanceMetrics.detectionRate = Math.round(detectionRate);
+        }
+        // Update state for rendering
+        this.performanceData = {
+            fps: this.performanceMetrics.fps,
+            inferenceTime: this.performanceMetrics.inferenceTime,
+            memoryUsage: this.performanceMetrics.memoryUsage,
+            onnxLoadTime: this.performanceMetrics.onnxLoadTime,
+            frameProcessingTime: this.performanceMetrics.frameProcessingTime,
+            totalDetections: this.performanceMetrics.totalDetections,
+            successfulDetections: this.performanceMetrics.successfulDetections,
+            detectionRate: this.performanceMetrics.detectionRate
+        };
+        this.performanceMetrics.lastUpdateTime = currentTime;
+    }
+    recordOnnxPerformance(loadTime, inferenceTime) {
+        this.performanceMetrics.onnxLoadTime = Math.round(loadTime);
+        this.performanceMetrics.inferenceTime = Math.round(inferenceTime);
+    }
+    recordFrameProcessing(processingTime, detectionsFound) {
+        this.performanceMetrics.frameProcessingTime = Math.round(processingTime);
+        this.performanceMetrics.totalDetections++;
+        if (detectionsFound > 0) {
+            this.performanceMetrics.successfulDetections++;
+        }
+    }
+    togglePerformanceMonitor() {
+        this.isPerformanceMonitorMinimized = !this.isPerformanceMonitorMinimized;
+    }
     static get is() { return "jaak-stamps"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
@@ -885,7 +1072,10 @@ export class JaakStamps {
             "isMaskReady": {},
             "shouldMirrorVideo": {},
             "showCameraSelector": {},
-            "currentStatus": {}
+            "isSwitchingCamera": {},
+            "currentStatus": {},
+            "performanceData": {},
+            "isPerformanceMonitorMinimized": {}
         };
     }
     static get events() {