@jaak.ai/stamps 2.0.0-beta.1 → 2.0.0-beta.3

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DGM9-FNg.js');
+var index = require('./index-BfhtOB0D.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 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)}.camera-controls{position:absolute;top:16px;right:16px;z-index:25;display:flex;gap:8px;pointer-events:auto}.flip-camera-button{height:40px;padding:0 16px;border:none;border-radius:8px;background:rgba(0, 0, 0, 0.6);backdrop-filter:blur(12px);color:#ffffff;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255, 255, 255, 0.1);white-space:nowrap;min-width:fit-content}.camera-selector-button{height:40px;padding:0 16px;border:none;border-radius:8px;background:rgba(0, 0, 0, 0.6);backdrop-filter:blur(12px);color:#ffffff;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255, 255, 255, 0.1);white-space:nowrap;min-width:fit-content}.flip-camera-button:hover,.camera-selector-button:hover{background:rgba(0, 0, 0, 0.8);border-color:rgba(255, 255, 255, 0.2);transform:translateY(-1px)}.flip-camera-button:active,.camera-selector-button:active{transform:translateY(0);background:rgba(0, 0, 0, 0.9)}.camera-selector-dropdown{position:absolute;top:56px;right:16px;z-index:30;background:rgba(0, 0, 0, 0.85);backdrop-filter:blur(20px);border-radius:12px;min-width:260px;max-width:300px;border:1px solid rgba(255, 255, 255, 0.1);overflow:hidden;pointer-events:auto;animation:slideInFromTop 0.3s ease-out}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-8px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}.camera-selector-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}.camera-selector-header span{font-weight:500;color:#ffffff;font-size:13px;opacity:0.9}.close-selector{width:20px;height:20px;border:none;background:none;color:rgba(255, 255, 255, 0.7);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all 0.2s ease}.close-selector:hover{background:rgba(255, 255, 255, 0.1);color:#ffffff}.camera-list{padding:4px 0;max-height:240px;overflow-y:auto}.camera-option{width:100%;padding:10px 16px;border:none;background:none;text-align:left;cursor:pointer;transition:all 0.2s ease;display:flex;justify-content:space-between;align-items:center;color:rgba(255, 255, 255, 0.9)}.camera-option:hover{background:rgba(255, 255, 255, 0.08)}.camera-option.selected{background:rgba(255, 255, 255, 0.12);color:#ffffff}.camera-label{font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px;font-weight:400}.selected-indicator{font-size:14px;color:#ffffff;opacity:0.9}.device-info{padding:8px 16px;border-top:1px solid rgba(255, 255, 255, 0.1);background:rgba(255, 255, 255, 0.05)}.device-info small{color:rgba(255, 255, 255, 0.6);font-size:11px;text-transform:capitalize;font-weight:400}@media (max-width: 480px){.camera-controls{top:12px;right:12px;gap:6px}.flip-camera-button{height:36px;padding:0 12px;font-size:11px;border-radius:6px}.camera-selector-button{height:36px;padding:0 12px;font-size:11px;border-radius:6px}.camera-selector-dropdown{right:12px;top:48px;min-width:240px;max-width:calc(100vw - 24px)}.camera-selector-header{padding:10px 14px}.camera-option{padding:8px 14px}.device-info{padding:6px 14px}}.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) {
@@ -13,6 +13,10 @@ const JaakStamps = class {
     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
+    preferredCamera = 'auto'; // Define qué cámara usar: 'auto' (automático según dispositivo), 'front' (frontal), 'back' (trasera)
     captureCompleted;
     isReady;
     isVideoActive = false;
@@ -38,6 +42,10 @@ const JaakStamps = class {
     isLoading = false;
     isModelPreloaded = false;
     isMaskReady = false;
+    availableCameras = [];
+    selectedCameraId = null;
+    showCameraSelector = false;
+    isMultipleCamerasAvailable = false;
     videoRef;
     canvasRef;
     session;
@@ -46,6 +54,11 @@ const JaakStamps = class {
     animationId;
     hasScreenshotTaken = false;
     lastDetectedBox;
+    mobileNetSession;
+    mobileNetClassMap;
+    // Camera management properties
+    deviceType = 'desktop';
+    preferredCameraFacing = null;
     // Performance optimization properties
     frameSkipCounter = 0;
     FRAME_SKIP = 2; // Process every 3rd frame (reduces CPU by ~66%)
@@ -58,7 +71,9 @@ const JaakStamps = class {
     preprocessCtx;
     captureCanvas;
     captureCtx;
-    MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/detector-nano.onnx";
+    MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/ddmyp-v1.onnx";
+    MOBILENET_MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/cdmmp-v1.onnx";
+    MOBILENET_CLASSES_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/cdmmp-v1.json";
     INPUT_SIZE = 320;
     CONFIDENCE_THRESHOLD = 0.6;
     // ISO/IEC 7810 ID-1 standard dimensions (85.60mm x 53.98mm)
@@ -68,6 +83,25 @@ const JaakStamps = class {
             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;
+        }
+    }
+    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.preferredCamera = 'auto';
+        }
+    }
     emitReadyEvent() {
         const isDocumentReady = !!window.ort && this.isModelPreloaded;
         this.isReady.emit(isDocumentReady);
@@ -80,7 +114,267 @@ const JaakStamps = class {
         const settings = videoTrack.getSettings();
         return settings.facingMode === 'environment';
     }
+    async detectDeviceTypeAndCameras() {
+        // Detect device type
+        const userAgent = navigator.userAgent;
+        const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+        const isTablet = /iPad|Android/i.test(userAgent) && window.innerWidth >= 768;
+        if (isTablet) {
+            this.deviceType = 'tablet';
+        }
+        else if (isMobile) {
+            this.deviceType = 'mobile';
+        }
+        else {
+            this.deviceType = 'desktop';
+        }
+        this.debugLog('📱 Device type detected:', this.deviceType);
+        // Enumerate available cameras
+        await this.enumerateAndDetectCameras();
+        // Load user preference
+        this.loadCameraPreference();
+    }
+    async enumerateAndDetectCameras() {
+        try {
+            // First, check if we have permission to enumerate devices
+            const permissionStatus = await this.checkCameraPermission();
+            if (permissionStatus === 'denied') {
+                this.debugLog('❌ Camera permission denied');
+                this.statusMessage = "Permiso de cámara denegado";
+                this.statusColor = "#ff6b6b";
+                return;
+            }
+            // Request minimal permission to get device labels
+            if (permissionStatus === 'prompt') {
+                const tempStream = await navigator.mediaDevices.getUserMedia({ video: true });
+                tempStream.getTracks().forEach(track => track.stop());
+            }
+            // Now enumerate devices with labels
+            const devices = await navigator.mediaDevices.enumerateDevices();
+            this.availableCameras = devices.filter(device => device.kind === 'videoinput');
+            this.isMultipleCamerasAvailable = this.availableCameras.length > 1;
+            this.debugLog('📹 Available cameras:', {
+                count: this.availableCameras.length,
+                isMultipleCamerasAvailable: this.isMultipleCamerasAvailable,
+                cameras: this.availableCameras.map(cam => ({
+                    id: cam.deviceId,
+                    label: cam.label || 'Unknown Camera'
+                }))
+            });
+            // Set initial camera preference based on device type
+            this.setInitialCameraPreference();
+        }
+        catch (error) {
+            this.debugLog('❌ Error enumerating cameras:', error);
+            this.handleCameraPermissionError(error);
+        }
+    }
+    async checkCameraPermission() {
+        try {
+            if (!navigator.permissions) {
+                return 'prompt'; // Assume we need to prompt on older browsers
+            }
+            const permission = await navigator.permissions.query({ name: 'camera' });
+            return permission.state;
+        }
+        catch (error) {
+            this.debugLog('⚠️ Could not check camera permission:', error);
+            return 'prompt';
+        }
+    }
+    handleCameraPermissionError(error) {
+        if (error.name === 'NotAllowedError') {
+            this.statusMessage = "Permiso de cámara denegado. Active el permiso en configuración.";
+            this.statusColor = "#ff6b6b";
+            this.availableCameras = [];
+            this.isMultipleCamerasAvailable = false;
+        }
+        else if (error.name === 'NotFoundError') {
+            this.statusMessage = "No se encontraron cámaras disponibles.";
+            this.statusColor = "#ff6b6b";
+            this.availableCameras = [];
+            this.isMultipleCamerasAvailable = false;
+        }
+        else if (error.name === 'NotReadableError') {
+            this.statusMessage = "Cámara en uso por otra aplicación.";
+            this.statusColor = "#ff6b6b";
+            this.availableCameras = [];
+            this.isMultipleCamerasAvailable = false;
+        }
+        else {
+            this.statusMessage = "Error al acceder a las cámaras.";
+            this.statusColor = "#ff6b6b";
+            this.availableCameras = [];
+            this.isMultipleCamerasAvailable = false;
+        }
+    }
+    setInitialCameraPreference() {
+        if (this.availableCameras.length === 0)
+            return;
+        // Apply user preference for camera selection
+        if (this.preferredCamera === 'front') {
+            // User explicitly wants front camera
+            this.preferredCameraFacing = 'user';
+            const frontCamera = this.availableCameras.find(camera => camera.label.toLowerCase().includes('front') ||
+                camera.label.toLowerCase().includes('user') ||
+                camera.label.toLowerCase().includes('selfie') ||
+                !camera.label.toLowerCase().includes('back') && !camera.label.toLowerCase().includes('rear'));
+            if (frontCamera) {
+                this.selectedCameraId = frontCamera.deviceId;
+                this.debugLog('👤 User selected front camera:', frontCamera.label);
+            }
+            else {
+                this.selectedCameraId = this.availableCameras[0].deviceId;
+                this.debugLog('⚠️ Front camera not found, using first available:', this.availableCameras[0].label);
+            }
+        }
+        else if (this.preferredCamera === 'back') {
+            // User explicitly wants back camera
+            this.preferredCameraFacing = 'environment';
+            const backCamera = this.availableCameras.find(camera => camera.label.toLowerCase().includes('back') ||
+                camera.label.toLowerCase().includes('rear') ||
+                camera.label.toLowerCase().includes('environment'));
+            if (backCamera) {
+                this.selectedCameraId = backCamera.deviceId;
+                this.debugLog('📷 User selected back camera:', backCamera.label);
+            }
+            else {
+                this.selectedCameraId = this.availableCameras[0].deviceId;
+                this.debugLog('⚠️ Back camera not found, using first available:', this.availableCameras[0].label);
+            }
+        }
+        else {
+            // Auto mode - use device type to determine best camera
+            if (this.deviceType === 'mobile' || this.deviceType === 'tablet') {
+                // For mobile/tablet, prefer rear camera for document scanning
+                this.preferredCameraFacing = 'environment';
+                const rearCamera = this.availableCameras.find(camera => camera.label.toLowerCase().includes('back') ||
+                    camera.label.toLowerCase().includes('rear') ||
+                    camera.label.toLowerCase().includes('environment'));
+                if (rearCamera) {
+                    this.selectedCameraId = rearCamera.deviceId;
+                    this.debugLog('📱 Auto-selected rear camera for mobile:', rearCamera.label);
+                }
+                else {
+                    this.selectedCameraId = this.availableCameras[0].deviceId;
+                    this.debugLog('📱 Rear camera not found, using first available:', 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);
+            }
+        }
+    }
+    loadCameraPreference() {
+        try {
+            const saved = localStorage.getItem('jaak-stamps-camera-preference');
+            if (saved) {
+                const preference = JSON.parse(saved);
+                // Validate that the saved camera is still available
+                const isStillAvailable = this.availableCameras.some(camera => camera.deviceId === preference.cameraId);
+                if (isStillAvailable) {
+                    this.selectedCameraId = preference.cameraId;
+                    this.preferredCameraFacing = preference.facing;
+                    this.debugLog('💾 Loaded camera preference:', preference);
+                }
+            }
+        }
+        catch (error) {
+            this.debugLog('⚠️ Error loading camera preference:', error);
+        }
+    }
+    saveCameraPreference() {
+        try {
+            const preference = {
+                cameraId: this.selectedCameraId,
+                facing: this.preferredCameraFacing,
+                timestamp: Date.now()
+            };
+            localStorage.setItem('jaak-stamps-camera-preference', JSON.stringify(preference));
+            this.debugLog('💾 Saved camera preference:', preference);
+        }
+        catch (error) {
+            this.debugLog('⚠️ Error saving camera preference:', error);
+        }
+    }
+    async switchCamera(cameraId) {
+        if (!this.isVideoActive || this.selectedCameraId === cameraId)
+            return;
+        try {
+            // 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...');
+                await this.enumerateAndDetectCameras();
+                return;
+            }
+            // Show loading state
+            this.statusMessage = "Cambiando cámara...";
+            this.statusColor = "#007bff";
+            // Stop current stream
+            if (this.videoStream) {
+                this.videoStream.getTracks().forEach(track => track.stop());
+            }
+            // Update selected camera
+            this.selectedCameraId = cameraId;
+            // Update facing mode preference
+            const isRearCamera = selectedCamera.label.toLowerCase().includes('back') ||
+                selectedCamera.label.toLowerCase().includes('rear') ||
+                selectedCamera.label.toLowerCase().includes('environment');
+            this.preferredCameraFacing = isRearCamera ? 'environment' : 'user';
+            // Save preference
+            this.saveCameraPreference();
+            // Setup new camera with error handling
+            await this.setupCameraWithRetry();
+            this.debugLog('🔄 Switched to camera:', selectedCamera.label);
+        }
+        catch (error) {
+            this.debugLog('❌ Error switching camera:', error);
+            this.handleCameraPermissionError(error);
+        }
+    }
+    async setupCameraWithRetry(maxRetries = 3) {
+        for (let attempt = 1; attempt <= maxRetries; attempt++) {
+            try {
+                await this.setupCamera();
+                return; // Success
+            }
+            catch (error) {
+                this.debugLog(`❌ Camera setup attempt ${attempt} failed:`, error);
+                if (attempt === maxRetries) {
+                    // Last attempt failed, handle the error
+                    this.handleCameraPermissionError(error);
+                    throw error;
+                }
+                // Wait before retrying
+                await new Promise(resolve => setTimeout(resolve, 500 * attempt));
+            }
+        }
+    }
+    toggleCameraSelector() {
+        this.showCameraSelector = !this.showCameraSelector;
+        this.debugLog('📹 Camera selector toggled:', {
+            showCameraSelector: this.showCameraSelector,
+            isMultipleCamerasAvailable: this.isMultipleCamerasAvailable,
+            availableCameras: this.availableCameras.length,
+            isVideoActive: this.isVideoActive
+        });
+    }
+    async flipCamera() {
+        if (!this.isMultipleCamerasAvailable)
+            return;
+        const currentIndex = this.availableCameras.findIndex(camera => camera.deviceId === this.selectedCameraId);
+        const nextIndex = (currentIndex + 1) % this.availableCameras.length;
+        const nextCamera = this.availableCameras[nextIndex];
+        await this.switchCamera(nextCamera.deviceId);
+    }
     async componentDidLoad() {
+        this.validateMaskSize();
+        this.validateCropMargin();
+        this.validatePreferredCamera();
+        await this.detectDeviceTypeAndCameras();
         if (!window.ort) {
             const script = document.createElement('script');
             script.src = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js';
@@ -148,14 +442,15 @@ const JaakStamps = class {
         // 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 * 0.9; // Use 90% of available height
+            maskHeightInVideo = displayedVideoHeight * sizeRatio;
             maskWidthInVideo = maskHeightInVideo * this.ID1_ASPECT_RATIO;
         }
         else {
             // Video width is the limiting factor
-            maskWidthInVideo = displayedVideoWidth * 0.9; // Use 90% of available width
+            maskWidthInVideo = displayedVideoWidth * sizeRatio;
             maskHeightInVideo = maskWidthInVideo / this.ID1_ASPECT_RATIO;
         }
         // Convert to percentages of the container
@@ -249,25 +544,29 @@ const JaakStamps = class {
         }
         try {
             this.isLoading = true;
-            this.statusMessage = "Precargando modelo de detección...";
+            this.statusMessage = "Precargando modelos...";
             this.statusColor = "#007bff";
             const modelPath = this.MODEL_PATH;
-            this.debugLog('🤖 Preloading model:', modelPath);
+            this.debugLog('🤖 Preloading detection model:', modelPath);
             // Configure ONNX Runtime with device-specific optimizations
             const sessionOptions = this.getSessionOptions();
             this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
+            // Preload MobileNet model and classes only if classification is enabled
+            if (this.useDocumentClassification) {
+                await this.loadMobileNetModel();
+            }
             this.isModelPreloaded = true;
             this.isLoading = false;
-            this.statusMessage = "Modelo precargado. Listo para comenzar detección";
+            this.statusMessage = "Modelos precargados. Listo para comenzar detección";
             this.statusColor = "#28a745";
             this.emitReadyEvent();
-            this.debugLog('✅ Model preloaded successfully');
-            return { success: true, message: 'Model preloaded successfully' };
+            this.debugLog('✅ Models preloaded successfully');
+            return { success: true, message: 'Models preloaded successfully' };
         }
         catch (error) {
-            this.debugLog('❌ Error preloading model:', error);
+            this.debugLog('❌ Error preloading models:', error);
             this.isLoading = false;
-            this.statusMessage = "Error al precargar el modelo";
+            this.statusMessage = "Error al precargar los modelos";
             this.statusColor = "#ff6b6b";
             return { success: false, error: error.message };
         }
@@ -277,6 +576,109 @@ const JaakStamps = class {
             this.completeProcess(true);
         }
     }
+    async getCameraInfo() {
+        return {
+            availableCameras: this.availableCameras.map(camera => ({
+                id: camera.deviceId,
+                label: camera.label || 'Unknown Camera',
+                selected: camera.deviceId === this.selectedCameraId
+            })),
+            selectedCameraId: this.selectedCameraId,
+            deviceType: this.deviceType,
+            isMultipleCamerasAvailable: this.isMultipleCamerasAvailable,
+            preferredFacing: this.preferredCameraFacing,
+            userPreferredCamera: this.preferredCamera
+        };
+    }
+    async setPreferredCamera(camera) {
+        this.preferredCamera = camera;
+        this.debugLog('🎯 Camera preference changed to:', camera);
+        // Re-detect and apply new camera preference
+        await this.enumerateAndDetectCameras();
+        // If video is active, switch to the new preferred camera
+        if (this.isVideoActive && this.selectedCameraId) {
+            await this.switchCamera(this.selectedCameraId);
+        }
+        return {
+            success: true,
+            selectedCamera: this.selectedCameraId,
+            availableCameras: this.availableCameras.length
+        };
+    }
+    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);
@@ -304,28 +706,52 @@ const JaakStamps = class {
             this.captureCtx = undefined;
             this.captureCanvas = undefined;
         }
-        // Disposed ONNX session
+        // Disposed ONNX sessions
         if (this.session) {
             this.session.release?.();
             this.session = undefined;
         }
+        if (this.mobileNetSession) {
+            this.mobileNetSession.release?.();
+            this.mobileNetSession = undefined;
+        }
+        this.mobileNetClassMap = undefined;
         this.isModelPreloaded = false;
         this.debugLog('🧹 Canvas pool cleaned up');
     }
     async getMaxResolution() {
         try {
-            // Primero obtén un stream básico para acceder a las capacidades
+            // Build constraints with selected camera if available
+            const videoConstraints = {};
+            if (this.selectedCameraId) {
+                videoConstraints.deviceId = { exact: this.selectedCameraId };
+            }
+            else if (this.preferredCameraFacing) {
+                videoConstraints.facingMode = this.preferredCameraFacing;
+            }
+            else {
+                videoConstraints.facingMode = "environment";
+            }
+            // Get temporary stream to access capabilities
             const tempStream = await navigator.mediaDevices.getUserMedia({
-                video: { facingMode: "environment" }
+                video: videoConstraints
             });
             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"
-            };
+            // Build constraints with resolution optimized for tablets
+            const constraints = {};
+            // Set camera selection constraints
+            if (this.selectedCameraId) {
+                constraints.deviceId = { exact: this.selectedCameraId };
+            }
+            else if (this.preferredCameraFacing) {
+                constraints.facingMode = this.preferredCameraFacing;
+            }
+            else {
+                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);
@@ -352,13 +778,23 @@ const JaakStamps = class {
         }
         catch (err) {
             this.debugLog('⚠️ Could not get capabilities, using fallback');
-            // Fallback optimizado para tablets
+            // Optimized fallback for tablets
             const isTablet = /iPad|Android/i.test(navigator.userAgent) && window.innerWidth >= 768;
-            return {
-                facingMode: "environment",
+            const fallbackConstraints = {
                 width: { ideal: isTablet ? 1280 : 1920 },
                 height: { ideal: isTablet ? 720 : 1080 }
             };
+            // Add camera selection to fallback
+            if (this.selectedCameraId) {
+                fallbackConstraints.deviceId = { exact: this.selectedCameraId };
+            }
+            else if (this.preferredCameraFacing) {
+                fallbackConstraints.facingMode = this.preferredCameraFacing;
+            }
+            else {
+                fallbackConstraints.facingMode = "environment";
+            }
+            return fallbackConstraints;
         }
     }
     async setupCamera() {
@@ -393,8 +829,7 @@ const JaakStamps = class {
         }
         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";
+            this.handleCameraPermissionError(err);
         }
     }
     preprocess(video) {
@@ -439,18 +874,22 @@ const JaakStamps = class {
             // Check if model is already preloaded
             if (!this.session) {
                 this.isLoading = true;
-                this.statusMessage = "Cargando modelo de detección...";
+                this.statusMessage = "Cargando modelos...";
                 this.statusColor = "#007bff";
                 const modelPath = this.MODEL_PATH;
-                this.debugLog('🤖 Loading model:', modelPath);
+                this.debugLog('🤖 Loading detection model:', modelPath);
                 const sessionOptions = this.getSessionOptions();
                 this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
+                // Load MobileNet model if 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 model');
-                this.statusMessage = "Usando modelo precargado...";
+                this.debugLog('🚀 Using preloaded models');
+                this.statusMessage = "Usando modelos precargados...";
                 this.statusColor = "#007bff";
             }
             this.statusMessage = "Configurando cámara...";
@@ -593,14 +1032,15 @@ const JaakStamps = class {
         // 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 * 0.9;
+            visualMaskHeight = displayedVideoHeight * sizeRatio;
             visualMaskWidth = visualMaskHeight * this.ID1_ASPECT_RATIO;
         }
         else {
             // Video width is the limiting factor
-            visualMaskWidth = displayedVideoWidth * 0.9;
+            visualMaskWidth = displayedVideoWidth * sizeRatio;
             visualMaskHeight = visualMaskWidth / this.ID1_ASPECT_RATIO;
         }
         // Now map these visual mask dimensions to the distorted model space
@@ -668,7 +1108,9 @@ const JaakStamps = class {
             corners?.forEach(corner => corner.classList.add('perfect-match'));
             if (!this.hasScreenshotTaken) {
                 this.lastDetectedBox = bestBox;
-                this.takeScreenshot();
+                this.takeScreenshot().catch(error => {
+                    this.debugLog('❌ Error taking screenshot:', error);
+                });
                 this.hasScreenshotTaken = true;
                 // Reset para permitir segunda captura
                 setTimeout(() => {
@@ -751,7 +1193,7 @@ const JaakStamps = class {
             ctx.strokeRect(x, y, w, h);
         });
     }
-    takeScreenshot() {
+    async takeScreenshot() {
         if (!this.videoRef || !this.lastDetectedBox)
             return;
         // Activar animación
@@ -767,10 +1209,10 @@ const JaakStamps = class {
         // Calcular las coordenadas de recorte basadas en la detección
         const scaleX = this.videoRef.videoWidth / this.INPUT_SIZE;
         const scaleY = this.videoRef.videoHeight / this.INPUT_SIZE;
-        const cropX = Math.max(0, this.lastDetectedBox.x * scaleX);
-        const cropY = Math.max(0, this.lastDetectedBox.y * scaleY);
-        const cropWidth = Math.min(this.lastDetectedBox.w * scaleX, this.videoRef.videoWidth - cropX);
-        const cropHeight = Math.min(this.lastDetectedBox.h * scaleY, this.videoRef.videoHeight - cropY);
+        const cropX = Math.max(0, (this.lastDetectedBox.x * scaleX) - this.cropMargin);
+        const cropY = Math.max(0, (this.lastDetectedBox.y * scaleY) - this.cropMargin);
+        const cropWidth = Math.min((this.lastDetectedBox.w * scaleX) + (2 * this.cropMargin), this.videoRef.videoWidth - cropX);
+        const cropHeight = Math.min((this.lastDetectedBox.h * scaleY) + (2 * this.cropMargin), this.videoRef.videoHeight - cropY);
         // OPTIMIZATION: Create temporary canvas only for cropped version
         // (We reuse main capture canvas for full frame)
         const croppedCanvas = document.createElement('canvas');
@@ -785,6 +1227,29 @@ const JaakStamps = class {
             // 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";
@@ -914,7 +1379,20 @@ const JaakStamps = class {
         this.cleanup();
     }
     render() {
-        return (index.h("div", { key: 'b63a5966ee08d4de7b5d8a10dbf248150e8620ec', class: "detector-container" }, index.h("div", { key: '1c62d540a1802a758b90a543edfdc364123ae950', class: "video-container" }, index.h("video", { key: '18e066e0005c3b287983ebb29c9e4aa147eaaf8d', 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: '43cd238e38a5a2ff9c140800ac686580a7ca33b9', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (index.h("div", { key: 'f43db67b9d1ef47264092694c3ab8afa9925e258', class: "overlay-mask" }, index.h("div", { key: 'ac60d94edc4cfa6ccf91ba6e04d2be6e4368be97', class: "card-outline" }, index.h("div", { key: 'de6aca9bbfe778890adf4c69e8525a114c37f6d4', class: "side side-top" }), index.h("div", { key: '7ce7b1e2215b01ea5d714b8ecc988361e384b6f7', class: "side side-right" }), index.h("div", { key: 'b79a68f68facb42ca139d6a2bc8e1e6d7133872d', class: "side side-bottom" }), index.h("div", { key: '81d90c4a08cfc2267cec195a3b342c87bb1d07d0', class: "side side-left" }), index.h("div", { key: 'c93c83abb8e17a5cb9c1bd53b2e1239ef50c7bf4', class: "corner corner-tl" }), index.h("div", { key: '81ca7cf2aab7026e851bd226843a6db5807315d5', class: "corner corner-tr" }), index.h("div", { key: 'c451fe226ac15023ee9799443060f1da620cb3b3', class: "corner corner-bl" }), index.h("div", { key: '7c3e2b2a21bd37144fe6b4d5df67df625dc12103', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (index.h("div", { key: '74ab171b64bdf0e1269845b4fcd9bf8e2caf891d', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (index.h("button", { key: '2b2b9387ce8b023acf0d65c7f7b3480211f7cb2d', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")))), this.isCapturing && (index.h("div", { key: 'eabd88499f52098f79e434afcce73acb2727c411', class: "capture-animation" })), this.showFlipAnimation && (index.h("div", { key: '9affe6040a39260747db98db2b68a103fb719fbb', class: "flip-animation" }, index.h("div", { key: '8b25f3688a16f4b070664237a093122a6720edfb', class: "id-card-icon" }), index.h("div", { key: '805b11cfb4d06a25e02370b06f6cf15f0f0cf6b5', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (index.h("div", { key: 'cba337b6fef8b919425566c0c9c5de797d42c4c8', class: "success-animation" }, index.h("div", { key: '4a88df3f9285757b489b030ba985d720a8a3badf', class: "check-icon" }), index.h("div", { key: 'a0bdd89c2c6274330ba66a6b6bba86ab6c725979', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (index.h("div", { key: '564fc1333b0fb69102e26ac1da4e77786a9bc7a3', class: "loading-overlay" }, index.h("div", { key: '283e4a6315a39b26203e19a13f35389bc1870a0f', class: "loading-spinner" }), index.h("div", { key: '7e4f00a1fcee1bbf29d74c8be35a72aba2c1041a', class: "loading-text" }, this.statusMessage))), index.h("div", { key: '6cbe1fea1c4a7d3cb25cd34ee04becb5fa538dfd', class: "watermark" }, index.h("img", { key: '1bd4157b7f74753570ddf48682acf419a6de03ea', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+        return (index.h("div", { key: 'b90673f523dbf112786eb7184f56415055765c0c', class: "detector-container" }, index.h("div", { key: '925c5c886e9af53b460281244958e722de670a70', class: "video-container" }, index.h("video", { key: '4a0074e33a81b4694c6c99e3ece256c1ac8fe1d5', 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: 'a7b7f3b35c0535c11f6a4a155502dbe016f590b7', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (index.h("div", { key: '695b6a2f97e29b0b9c5b9d43682a951caff376a1', class: "overlay-mask" }, index.h("div", { key: '768875c39d5917c6a04306037d03d9e1aed114bd', class: "card-outline" }, index.h("div", { key: 'a56536deb7b8c99145d1bef6fee84e5801798644', class: "side side-top" }), index.h("div", { key: 'df413058c7e787f9c8a95a429a4f7186de07f5f6', class: "side side-right" }), index.h("div", { key: '37e074e3d4c914457f97720f9ab1f1ac2c70c4f1', class: "side side-bottom" }), index.h("div", { key: '772d3d40925c75ba5d39e2e7dd6405f7cc88d292', class: "side side-left" }), index.h("div", { key: 'd4e624782b3f4b4b8dbb8286b3acf003e433928c', class: "corner corner-tl" }), index.h("div", { key: '63f0ccfbbe3c1d413ca6912f36cab4afa6334bb2', class: "corner corner-tr" }), index.h("div", { key: '20012a50fe3d98ddfa669f5283a871c757522797', class: "corner corner-bl" }), index.h("div", { key: '9d82646bd08a6ca2b8c5782629fc68fd93cf1287', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (index.h("div", { key: '79fcbdb52e434a45aa6f2748d6d84500beb2e844', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (index.h("button", { key: '16e587d645e2489a3410fe80bfc014738f08f02f', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")), this.isVideoActive && (index.h("div", { key: 'd46d6881a9e1b63bdd849f5a8c6e96a2caefdefb', class: "camera-controls" }, this.isMultipleCamerasAvailable && (index.h("button", { key: 'afb4b44d691471f8af6e894e061aecb6c82259da', class: "flip-camera-button", onClick: () => this.flipCamera(), type: "button", title: "Cambiar c\u00E1mara" }, "Girar c\u00E1mara")), index.h("button", { key: '4e0680c2da9e6cc70b5880e8f5db9830c080acf9', class: "camera-selector-button", onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara" }, "C\u00E1maras"), this.debug && (index.h("div", { key: 'fc59922452a216273f742d3158559f6b2a1da43e', style: {
+                position: 'absolute',
+                top: '50px',
+                right: '0',
+                background: 'rgba(0,0,0,0.8)',
+                color: 'white',
+                padding: '8px',
+                fontSize: '10px',
+                borderRadius: '4px',
+                whiteSpace: 'nowrap'
+            } }, "C\u00E1maras: ", this.availableCameras.length, index.h("br", { key: '8f112283d1e0518a395dc6d94e1caa46fee0a86b' }), "M\u00FAltiples: ", this.isMultipleCamerasAvailable ? 'Sí' : 'No', index.h("br", { key: 'aacfd3ee868ee5d0819ce5ef693e3ef384867332' }), "Selector: ", this.showCameraSelector ? 'Visible' : 'Oculto', index.h("br", { key: '9927df7f56583c7388cee25e13526efc7e032eb1' }), "Video: ", this.isVideoActive ? 'Activo' : 'Inactivo')))), this.showCameraSelector && this.availableCameras.length > 0 && (index.h("div", { key: 'c2914bf7f3175b8f0ddab977abbdefe3022d7d29', class: "camera-selector-dropdown" }, index.h("div", { key: '0b5397e77ff33944f3620d78b1ab41275dffd7ac', class: "camera-selector-header" }, index.h("span", { key: '78f0fb8e34a0cf2d16138522a98cbdb9eefd671f' }, "Seleccionar C\u00E1mara"), index.h("button", { key: '0d4ea7b191d61d1d9b9c35462ce336148be73fcb', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), index.h("div", { key: 'c16c7a106493ef7633a4cd35b06a4f45327a2e23', class: "camera-list" }, this.availableCameras.map((camera) => (index.h("button", { key: camera.deviceId, class: `camera-option ${this.selectedCameraId === camera.deviceId ? 'selected' : ''}`, onClick: () => {
+                this.switchCamera(camera.deviceId);
+                this.toggleCameraSelector();
+            }, type: "button" }, index.h("span", { class: "camera-label" }, camera.label || `Cámara ${this.availableCameras.indexOf(camera) + 1}`), this.selectedCameraId === camera.deviceId && (index.h("span", { class: "selected-indicator" }, "\u2713")))))), index.h("div", { key: '11d6f980c3995a8414da5f7e6921f963ca72aed4', class: "device-info" }, index.h("small", { key: '78f5ff030f9e6e5021234a246599eb459b05d9f7' }, "Dispositivo: ", this.deviceType)))))), this.isCapturing && (index.h("div", { key: 'ef7d32491d8bdb94b2d6456420c2ddbc80f03d81', class: "capture-animation" })), this.showFlipAnimation && (index.h("div", { key: 'cfb5868ee75a9d1d1604c52f6fce1241090e4ac2', class: "flip-animation" }, index.h("div", { key: '1b41035e63f88434aba6699d4e68e06bea2c1529', class: "id-card-icon" }), index.h("div", { key: '4e83af9d0d39ce37b7448c4a0783b60b42b858e2', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (index.h("div", { key: 'c7911e8be74b0fc7d7d18d7dcb52374645ca5f12', class: "success-animation" }, index.h("div", { key: '18e5ea5cfa3eb35fe3b99c12e6fab8e27e09e85e', class: "check-icon" }), index.h("div", { key: '490d8fcd6540c3b4fdc95f7fb5e6f6697722c9ac', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (index.h("div", { key: 'f7fbfec6be2d8e0dc4e522b85b7d67897575cf0e', class: "loading-overlay" }, index.h("div", { key: '8282b92f19da6a9c7d22a64a0929b2b4d67c46be', class: "loading-spinner" }), index.h("div", { key: '7880b689297eb9d80a9b0023ba7933148fd8710a', class: "loading-text" }, this.statusMessage))), index.h("div", { key: '887c951fb03097171d9bd466fe24e36d11a49954', class: "watermark" }, index.h("img", { key: '314c9c172a4c6795c825741ea6f02b0e1186e93d', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
     }
 };
 JaakStamps.style = myComponentCss;