@jaak.ai/stamps 2.0.0-beta.2 → 2.0.0-dev.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -101
- package/dist/cjs/jaak-stamps-webcomponent.cjs.js +1 -1
- package/dist/cjs/jaak-stamps.cjs.entry.js +36 -403
- package/dist/cjs/jaak-stamps.cjs.entry.js.map +1 -1
- package/dist/cjs/jaak-stamps.entry.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/my-component/my-component.css +7 -10
- package/dist/collection/components/my-component/my-component.js +36 -478
- package/dist/collection/components/my-component/my-component.js.map +1 -1
- package/dist/components/jaak-stamps.js +36 -407
- package/dist/components/jaak-stamps.js.map +1 -1
- package/dist/esm/jaak-stamps-webcomponent.js +1 -1
- package/dist/esm/jaak-stamps.entry.js +36 -403
- package/dist/esm/jaak-stamps.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js +1 -1
- package/dist/jaak-stamps-webcomponent/jaak-stamps.entry.esm.js.map +1 -1
- package/dist/jaak-stamps-webcomponent/p-45dcdc80.entry.js +2 -0
- package/dist/jaak-stamps-webcomponent/p-45dcdc80.entry.js.map +1 -0
- package/dist/types/components/my-component/my-component.d.ts +2 -20
- package/dist/types/components.d.ts +0 -26
- package/package.json +1 -1
- package/dist/jaak-stamps-webcomponent/p-f1172b06.entry.js +0 -2
- package/dist/jaak-stamps-webcomponent/p-f1172b06.entry.js.map +0 -1
|
@@ -2,22 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DGM9-FNg.js');
|
|
4
4
|
|
|
5
|
-
const myComponentCss = ":host{display:block;
|
|
5
|
+
const myComponentCss = ":host{display:block;font-family:system-ui, -apple-system, sans-serif;color:#1a1a1a}.detector-container{display:flex;flex-direction:column;align-items:center}h1{font-size:24px;font-weight:500;color:#333;margin:0 0 24px 0}.video-container{position:relative;width:100%;max-width:640px;aspect-ratio:1;background:#fff;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:50%;left:50%;transform:translate(-50%, -50%);width:88%;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)}}";
|
|
6
6
|
|
|
7
7
|
const JaakStamps = class {
|
|
8
8
|
constructor(hostRef) {
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
10
|
this.captureCompleted = index.createEvent(this, "captureCompleted");
|
|
11
|
-
this.isReady = index.createEvent(this, "isReady");
|
|
12
11
|
}
|
|
13
12
|
get el() { return index.getElement(this); }
|
|
14
13
|
debug = false;
|
|
15
14
|
alignmentTolerance = 10; // Tolerancia en píxeles para considerar un lado alineado (escalado para 320x320)
|
|
16
|
-
maskSize = 90; // Porcentaje del video que ocupará la máscara (default 90%)
|
|
17
|
-
cropMargin = 0; // Margen en píxeles para el recorte del documento (default 0)
|
|
18
|
-
useDocumentClassification = false; // Habilita la clasificación automática de documentos para determinar si solicitar reverso
|
|
19
15
|
captureCompleted;
|
|
20
|
-
isReady;
|
|
21
16
|
isVideoActive = false;
|
|
22
17
|
statusMessage = 'Presione el botón para activar la cámara';
|
|
23
18
|
statusColor = '#aaa';
|
|
@@ -40,7 +35,6 @@ const JaakStamps = class {
|
|
|
40
35
|
isDetectionPaused = false;
|
|
41
36
|
isLoading = false;
|
|
42
37
|
isModelPreloaded = false;
|
|
43
|
-
isMaskReady = false;
|
|
44
38
|
videoRef;
|
|
45
39
|
canvasRef;
|
|
46
40
|
session;
|
|
@@ -49,8 +43,6 @@ const JaakStamps = class {
|
|
|
49
43
|
animationId;
|
|
50
44
|
hasScreenshotTaken = false;
|
|
51
45
|
lastDetectedBox;
|
|
52
|
-
mobileNetSession;
|
|
53
|
-
mobileNetClassMap;
|
|
54
46
|
// Performance optimization properties
|
|
55
47
|
frameSkipCounter = 0;
|
|
56
48
|
FRAME_SKIP = 2; // Process every 3rd frame (reduces CPU by ~66%)
|
|
@@ -63,35 +55,16 @@ const JaakStamps = class {
|
|
|
63
55
|
preprocessCtx;
|
|
64
56
|
captureCanvas;
|
|
65
57
|
captureCtx;
|
|
66
|
-
MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/
|
|
67
|
-
MOBILENET_MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/cdmmp-v1.onnx";
|
|
68
|
-
MOBILENET_CLASSES_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/cdmmp-v1.json";
|
|
58
|
+
MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/detector-nano.onnx";
|
|
69
59
|
INPUT_SIZE = 320;
|
|
70
60
|
CONFIDENCE_THRESHOLD = 0.6;
|
|
71
|
-
|
|
72
|
-
|
|
61
|
+
MASK_WIDTH = 280;
|
|
62
|
+
MASK_HEIGHT = 176;
|
|
73
63
|
debugLog(...args) {
|
|
74
64
|
if (this.debug) {
|
|
75
65
|
console.log(...args);
|
|
76
66
|
}
|
|
77
67
|
}
|
|
78
|
-
validateMaskSize() {
|
|
79
|
-
if (this.maskSize < 50 || this.maskSize > 100) {
|
|
80
|
-
console.warn(`maskSize debe estar entre 50 y 100. Valor actual: ${this.maskSize}. Usando valor por defecto: 90`);
|
|
81
|
-
this.maskSize = 90;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
validateCropMargin() {
|
|
85
|
-
if (this.cropMargin < 0 || this.cropMargin > 100) {
|
|
86
|
-
console.warn(`cropMargin debe estar entre 0 y 100. Valor actual: ${this.cropMargin}. Usando valor por defecto: 0`);
|
|
87
|
-
this.cropMargin = 0;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
emitReadyEvent() {
|
|
91
|
-
const isDocumentReady = !!window.ort && this.isModelPreloaded;
|
|
92
|
-
this.isReady.emit(isDocumentReady);
|
|
93
|
-
this.debugLog('🟢 isReady event emitted:', isDocumentReady);
|
|
94
|
-
}
|
|
95
68
|
isRearCamera(stream) {
|
|
96
69
|
const videoTrack = stream.getVideoTracks()[0];
|
|
97
70
|
if (!videoTrack)
|
|
@@ -100,109 +73,13 @@ const JaakStamps = class {
|
|
|
100
73
|
return settings.facingMode === 'environment';
|
|
101
74
|
}
|
|
102
75
|
async componentDidLoad() {
|
|
103
|
-
this.validateMaskSize();
|
|
104
|
-
this.validateCropMargin();
|
|
105
76
|
if (!window.ort) {
|
|
106
77
|
const script = document.createElement('script');
|
|
107
78
|
script.src = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js';
|
|
108
79
|
document.head.appendChild(script);
|
|
109
|
-
// Wait for ONNX runtime to load before emitting ready event
|
|
110
|
-
script.onload = () => {
|
|
111
|
-
this.emitReadyEvent();
|
|
112
|
-
};
|
|
113
|
-
}
|
|
114
|
-
else {
|
|
115
|
-
// ONNX runtime already loaded
|
|
116
|
-
this.emitReadyEvent();
|
|
117
80
|
}
|
|
118
81
|
// Initialize canvas pool for better performance
|
|
119
82
|
this.initializeCanvasPool();
|
|
120
|
-
this.setupResizeObserver();
|
|
121
|
-
}
|
|
122
|
-
setupResizeObserver() {
|
|
123
|
-
if ('ResizeObserver' in window && this.canvasRef) {
|
|
124
|
-
const resizeObserver = new ResizeObserver(() => {
|
|
125
|
-
this.handleResize();
|
|
126
|
-
});
|
|
127
|
-
resizeObserver.observe(this.canvasRef.parentElement);
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
handleResize() {
|
|
131
|
-
if (this.canvasRef) {
|
|
132
|
-
const container = this.canvasRef.parentElement;
|
|
133
|
-
const rect = container.getBoundingClientRect();
|
|
134
|
-
// Set canvas size to match container
|
|
135
|
-
this.canvasRef.width = rect.width;
|
|
136
|
-
this.canvasRef.height = rect.height;
|
|
137
|
-
// Update mask positioning based on container and video dimensions
|
|
138
|
-
this.updateMaskDimensions(rect);
|
|
139
|
-
this.debugLog('📐 Canvas resized:', { width: rect.width, height: rect.height });
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
updateMaskDimensions(containerRect) {
|
|
143
|
-
if (!this.videoRef)
|
|
144
|
-
return;
|
|
145
|
-
const videoWidth = this.videoRef.videoWidth;
|
|
146
|
-
const videoHeight = this.videoRef.videoHeight;
|
|
147
|
-
if (videoWidth === 0 || videoHeight === 0)
|
|
148
|
-
return;
|
|
149
|
-
// Calculate video aspect ratio and container aspect ratio
|
|
150
|
-
const videoAspectRatio = videoWidth / videoHeight;
|
|
151
|
-
const containerAspectRatio = containerRect.width / containerRect.height;
|
|
152
|
-
// Determine how video fits in container (letterboxed or pillarboxed)
|
|
153
|
-
let displayedVideoWidth, displayedVideoHeight;
|
|
154
|
-
let videoOffsetX = 0, videoOffsetY = 0;
|
|
155
|
-
if (videoAspectRatio > containerAspectRatio) {
|
|
156
|
-
// Video is wider - letterboxed (black bars top/bottom)
|
|
157
|
-
displayedVideoWidth = containerRect.width;
|
|
158
|
-
displayedVideoHeight = containerRect.width / videoAspectRatio;
|
|
159
|
-
videoOffsetY = (containerRect.height - displayedVideoHeight) / 2;
|
|
160
|
-
}
|
|
161
|
-
else {
|
|
162
|
-
// Video is taller - pillarboxed (black bars left/right)
|
|
163
|
-
displayedVideoHeight = containerRect.height;
|
|
164
|
-
displayedVideoWidth = containerRect.height * videoAspectRatio;
|
|
165
|
-
videoOffsetX = (containerRect.width - displayedVideoWidth) / 2;
|
|
166
|
-
}
|
|
167
|
-
// Calculate maximum possible mask size while preserving exact ID-1 aspect ratio
|
|
168
|
-
// Determine the limiting dimension based on video orientation and ID-1 proportions
|
|
169
|
-
// Calculate what would be the max width if limited by video height
|
|
170
|
-
const maxWidthByHeight = displayedVideoHeight * this.ID1_ASPECT_RATIO;
|
|
171
|
-
let maskWidthInVideo, maskHeightInVideo;
|
|
172
|
-
const sizeRatio = this.maskSize / 100;
|
|
173
|
-
if (maxWidthByHeight <= displayedVideoWidth) {
|
|
174
|
-
// Video height is the limiting factor
|
|
175
|
-
maskHeightInVideo = displayedVideoHeight * sizeRatio;
|
|
176
|
-
maskWidthInVideo = maskHeightInVideo * this.ID1_ASPECT_RATIO;
|
|
177
|
-
}
|
|
178
|
-
else {
|
|
179
|
-
// Video width is the limiting factor
|
|
180
|
-
maskWidthInVideo = displayedVideoWidth * sizeRatio;
|
|
181
|
-
maskHeightInVideo = maskWidthInVideo / this.ID1_ASPECT_RATIO;
|
|
182
|
-
}
|
|
183
|
-
// Convert to percentages of the container
|
|
184
|
-
const maskWidthPercent = (maskWidthInVideo / containerRect.width) * 100;
|
|
185
|
-
const maskHeightPercent = (maskHeightInVideo / containerRect.height) * 100;
|
|
186
|
-
// Calculate the center position of the displayed video area
|
|
187
|
-
const videoCenterX = videoOffsetX + (displayedVideoWidth / 2);
|
|
188
|
-
const videoCenterY = videoOffsetY + (displayedVideoHeight / 2);
|
|
189
|
-
// Convert to percentages of the container
|
|
190
|
-
const videoCenterXPercent = (videoCenterX / containerRect.width) * 100;
|
|
191
|
-
const videoCenterYPercent = (videoCenterY / containerRect.height) * 100;
|
|
192
|
-
// Update CSS custom properties for mask sizing and positioning
|
|
193
|
-
this.el.style.setProperty('--mask-width', `${maskWidthPercent}%`);
|
|
194
|
-
this.el.style.setProperty('--mask-height', `${maskHeightPercent}%`);
|
|
195
|
-
this.el.style.setProperty('--mask-center-x', `${videoCenterXPercent}%`);
|
|
196
|
-
this.el.style.setProperty('--mask-center-y', `${videoCenterYPercent}%`);
|
|
197
|
-
// Mark mask as ready now that dimensions are calculated
|
|
198
|
-
this.isMaskReady = true;
|
|
199
|
-
this.debugLog('🎯 Mask dimensions updated:', {
|
|
200
|
-
video: { width: videoWidth, height: videoHeight },
|
|
201
|
-
displayed: { width: displayedVideoWidth, height: displayedVideoHeight },
|
|
202
|
-
mask: { widthPercent: maskWidthPercent, heightPercent: maskHeightPercent },
|
|
203
|
-
center: { x: videoCenterXPercent, y: videoCenterYPercent },
|
|
204
|
-
offset: { x: videoOffsetX, y: videoOffsetY }
|
|
205
|
-
});
|
|
206
83
|
}
|
|
207
84
|
initializeCanvasPool() {
|
|
208
85
|
// Preprocess canvas - reused for every inference
|
|
@@ -271,29 +148,24 @@ const JaakStamps = class {
|
|
|
271
148
|
}
|
|
272
149
|
try {
|
|
273
150
|
this.isLoading = true;
|
|
274
|
-
this.statusMessage = "Precargando
|
|
151
|
+
this.statusMessage = "Precargando modelo de detección...";
|
|
275
152
|
this.statusColor = "#007bff";
|
|
276
153
|
const modelPath = this.MODEL_PATH;
|
|
277
|
-
this.debugLog('🤖 Preloading
|
|
154
|
+
this.debugLog('🤖 Preloading model:', modelPath);
|
|
278
155
|
// Configure ONNX Runtime with device-specific optimizations
|
|
279
156
|
const sessionOptions = this.getSessionOptions();
|
|
280
157
|
this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
|
|
281
|
-
// Preload MobileNet model and classes only if classification is enabled
|
|
282
|
-
if (this.useDocumentClassification) {
|
|
283
|
-
await this.loadMobileNetModel();
|
|
284
|
-
}
|
|
285
158
|
this.isModelPreloaded = true;
|
|
286
159
|
this.isLoading = false;
|
|
287
|
-
this.statusMessage = "
|
|
160
|
+
this.statusMessage = "Modelo precargado. Listo para comenzar detección";
|
|
288
161
|
this.statusColor = "#28a745";
|
|
289
|
-
this.
|
|
290
|
-
|
|
291
|
-
return { success: true, message: 'Models preloaded successfully' };
|
|
162
|
+
this.debugLog('✅ Model preloaded successfully');
|
|
163
|
+
return { success: true, message: 'Model preloaded successfully' };
|
|
292
164
|
}
|
|
293
165
|
catch (error) {
|
|
294
|
-
this.debugLog('❌ Error preloading
|
|
166
|
+
this.debugLog('❌ Error preloading model:', error);
|
|
295
167
|
this.isLoading = false;
|
|
296
|
-
this.statusMessage = "Error al precargar
|
|
168
|
+
this.statusMessage = "Error al precargar el modelo";
|
|
297
169
|
this.statusColor = "#ff6b6b";
|
|
298
170
|
return { success: false, error: error.message };
|
|
299
171
|
}
|
|
@@ -303,80 +175,6 @@ const JaakStamps = class {
|
|
|
303
175
|
this.completeProcess(true);
|
|
304
176
|
}
|
|
305
177
|
}
|
|
306
|
-
async loadMobileNetModel() {
|
|
307
|
-
try {
|
|
308
|
-
this.debugLog('🤖 Loading MobileNet model...');
|
|
309
|
-
// Load class map
|
|
310
|
-
const classResponse = await fetch(this.MOBILENET_CLASSES_PATH);
|
|
311
|
-
if (!classResponse.ok) {
|
|
312
|
-
throw new Error(`Failed to load class map: ${this.MOBILENET_CLASSES_PATH}`);
|
|
313
|
-
}
|
|
314
|
-
this.mobileNetClassMap = await classResponse.json();
|
|
315
|
-
this.debugLog('📋 MobileNet classes loaded:', this.mobileNetClassMap);
|
|
316
|
-
// Load model
|
|
317
|
-
const sessionOptions = this.getSessionOptions();
|
|
318
|
-
this.mobileNetSession = await window.ort.InferenceSession.create(this.MOBILENET_MODEL_PATH, sessionOptions);
|
|
319
|
-
this.debugLog('✅ MobileNet model loaded successfully');
|
|
320
|
-
}
|
|
321
|
-
catch (error) {
|
|
322
|
-
this.debugLog('❌ Error loading MobileNet model:', error);
|
|
323
|
-
throw error;
|
|
324
|
-
}
|
|
325
|
-
}
|
|
326
|
-
preprocessMobileNet(canvas) {
|
|
327
|
-
// Create a temporary canvas for MobileNet preprocessing (224x224)
|
|
328
|
-
const tempCanvas = document.createElement('canvas');
|
|
329
|
-
tempCanvas.width = 224;
|
|
330
|
-
tempCanvas.height = 224;
|
|
331
|
-
const tempCtx = tempCanvas.getContext('2d');
|
|
332
|
-
// Draw the cropped image onto the 224x224 canvas
|
|
333
|
-
tempCtx.drawImage(canvas, 0, 0, 224, 224);
|
|
334
|
-
// Get image data and preprocess for MobileNet
|
|
335
|
-
const imageData = tempCtx.getImageData(0, 0, 224, 224);
|
|
336
|
-
const data = imageData.data;
|
|
337
|
-
const hw = 224 * 224;
|
|
338
|
-
const arr = new Float32Array(3 * hw);
|
|
339
|
-
// Normalize pixels: (pixel/255 - 0.5) / 0.5 = (pixel - 127.5) / 127.5
|
|
340
|
-
for (let i = 0; i < hw; i++) {
|
|
341
|
-
arr[i] = (data[i * 4 + 0] / 255 - 0.5) / 0.5; // R
|
|
342
|
-
arr[hw + i] = (data[i * 4 + 1] / 255 - 0.5) / 0.5; // G
|
|
343
|
-
arr[2 * hw + i] = (data[i * 4 + 2] / 255 - 0.5) / 0.5; // B
|
|
344
|
-
}
|
|
345
|
-
return new window.ort.Tensor('float32', arr, [1, 3, 224, 224]);
|
|
346
|
-
}
|
|
347
|
-
async classifyDocument(canvas) {
|
|
348
|
-
if (!this.mobileNetSession || !this.mobileNetClassMap) {
|
|
349
|
-
this.debugLog('⚠️ MobileNet model not loaded');
|
|
350
|
-
return null;
|
|
351
|
-
}
|
|
352
|
-
try {
|
|
353
|
-
this.debugLog('🔍 Classifying document...');
|
|
354
|
-
// Preprocess image for MobileNet
|
|
355
|
-
const inputTensor = this.preprocessMobileNet(canvas);
|
|
356
|
-
// Run inference
|
|
357
|
-
const feeds = { input: inputTensor };
|
|
358
|
-
const results = await this.mobileNetSession.run(feeds);
|
|
359
|
-
const output = results[Object.keys(results)[0]].data;
|
|
360
|
-
// Find the class with highest confidence
|
|
361
|
-
const maxIdx = output.reduce((bestIdx, val, idx, arr) => val > arr[bestIdx] ? idx : bestIdx, 0);
|
|
362
|
-
const confidence = output[maxIdx];
|
|
363
|
-
const className = this.mobileNetClassMap[maxIdx.toString()] || "unknown";
|
|
364
|
-
this.debugLog('📄 Document classification result:', {
|
|
365
|
-
class: className,
|
|
366
|
-
confidence: confidence.toFixed(3),
|
|
367
|
-
classIndex: maxIdx
|
|
368
|
-
});
|
|
369
|
-
return {
|
|
370
|
-
class: className,
|
|
371
|
-
confidence: confidence,
|
|
372
|
-
classIndex: maxIdx
|
|
373
|
-
};
|
|
374
|
-
}
|
|
375
|
-
catch (error) {
|
|
376
|
-
this.debugLog('❌ Error classifying document:', error);
|
|
377
|
-
return null;
|
|
378
|
-
}
|
|
379
|
-
}
|
|
380
178
|
cleanup() {
|
|
381
179
|
if (this.animationId) {
|
|
382
180
|
cancelAnimationFrame(this.animationId);
|
|
@@ -404,73 +202,22 @@ const JaakStamps = class {
|
|
|
404
202
|
this.captureCtx = undefined;
|
|
405
203
|
this.captureCanvas = undefined;
|
|
406
204
|
}
|
|
407
|
-
// Disposed ONNX
|
|
205
|
+
// Disposed ONNX session
|
|
408
206
|
if (this.session) {
|
|
409
207
|
this.session.release?.();
|
|
410
208
|
this.session = undefined;
|
|
411
209
|
}
|
|
412
|
-
if (this.mobileNetSession) {
|
|
413
|
-
this.mobileNetSession.release?.();
|
|
414
|
-
this.mobileNetSession = undefined;
|
|
415
|
-
}
|
|
416
|
-
this.mobileNetClassMap = undefined;
|
|
417
210
|
this.isModelPreloaded = false;
|
|
418
211
|
this.debugLog('🧹 Canvas pool cleaned up');
|
|
419
212
|
}
|
|
420
|
-
async getMaxResolution() {
|
|
421
|
-
try {
|
|
422
|
-
// Primero obtén un stream básico para acceder a las capacidades
|
|
423
|
-
const tempStream = await navigator.mediaDevices.getUserMedia({
|
|
424
|
-
video: { facingMode: "environment" }
|
|
425
|
-
});
|
|
426
|
-
const videoTrack = tempStream.getVideoTracks()[0];
|
|
427
|
-
const capabilities = videoTrack.getCapabilities();
|
|
428
|
-
// Detener el stream temporal
|
|
429
|
-
tempStream.getTracks().forEach(track => track.stop());
|
|
430
|
-
// Construir restricciones con resolución optimizada para tablets
|
|
431
|
-
const constraints = {
|
|
432
|
-
facingMode: "environment"
|
|
433
|
-
};
|
|
434
|
-
if (capabilities.width && capabilities.height) {
|
|
435
|
-
// Limitar resolución máxima para tablets para evitar problemas de rendimiento
|
|
436
|
-
const maxWidth = Math.min(capabilities.width.max, 1920);
|
|
437
|
-
const maxHeight = Math.min(capabilities.height.max, 1080);
|
|
438
|
-
// Para tablets, usar resolución moderada en lugar de máxima
|
|
439
|
-
const isTablet = /iPad|Android/i.test(navigator.userAgent) && window.innerWidth >= 768;
|
|
440
|
-
if (isTablet) {
|
|
441
|
-
constraints.width = { ideal: Math.min(maxWidth, 1280) };
|
|
442
|
-
constraints.height = { ideal: Math.min(maxHeight, 720) };
|
|
443
|
-
}
|
|
444
|
-
else {
|
|
445
|
-
constraints.width = { ideal: maxWidth };
|
|
446
|
-
constraints.height = { ideal: maxHeight };
|
|
447
|
-
}
|
|
448
|
-
this.debugLog('📐 Resolution capabilities:', {
|
|
449
|
-
maxWidth: capabilities.width.max,
|
|
450
|
-
maxHeight: capabilities.height.max,
|
|
451
|
-
selectedWidth: constraints.width.ideal,
|
|
452
|
-
selectedHeight: constraints.height.ideal,
|
|
453
|
-
isTablet
|
|
454
|
-
});
|
|
455
|
-
}
|
|
456
|
-
return constraints;
|
|
457
|
-
}
|
|
458
|
-
catch (err) {
|
|
459
|
-
this.debugLog('⚠️ Could not get capabilities, using fallback');
|
|
460
|
-
// Fallback optimizado para tablets
|
|
461
|
-
const isTablet = /iPad|Android/i.test(navigator.userAgent) && window.innerWidth >= 768;
|
|
462
|
-
return {
|
|
463
|
-
facingMode: "environment",
|
|
464
|
-
width: { ideal: isTablet ? 1280 : 1920 },
|
|
465
|
-
height: { ideal: isTablet ? 720 : 1080 }
|
|
466
|
-
};
|
|
467
|
-
}
|
|
468
|
-
}
|
|
469
213
|
async setupCamera() {
|
|
470
214
|
try {
|
|
471
|
-
const constraints = await this.getMaxResolution();
|
|
472
215
|
const stream = await navigator.mediaDevices.getUserMedia({
|
|
473
|
-
video:
|
|
216
|
+
video: {
|
|
217
|
+
width: { exact: 640 },
|
|
218
|
+
height: { exact: 640 },
|
|
219
|
+
facingMode: "environment"
|
|
220
|
+
},
|
|
474
221
|
audio: false
|
|
475
222
|
});
|
|
476
223
|
if (this.videoRef) {
|
|
@@ -485,12 +232,6 @@ const JaakStamps = class {
|
|
|
485
232
|
this.videoRef.onloadedmetadata = async () => {
|
|
486
233
|
await this.videoRef.play();
|
|
487
234
|
this.isVideoActive = true;
|
|
488
|
-
// Update mask dimensions once video is loaded
|
|
489
|
-
if (this.canvasRef) {
|
|
490
|
-
const container = this.canvasRef.parentElement;
|
|
491
|
-
const rect = container.getBoundingClientRect();
|
|
492
|
-
this.updateMaskDimensions(rect);
|
|
493
|
-
}
|
|
494
235
|
resolve();
|
|
495
236
|
};
|
|
496
237
|
});
|
|
@@ -544,22 +285,17 @@ const JaakStamps = class {
|
|
|
544
285
|
// Check if model is already preloaded
|
|
545
286
|
if (!this.session) {
|
|
546
287
|
this.isLoading = true;
|
|
547
|
-
this.statusMessage = "Cargando
|
|
288
|
+
this.statusMessage = "Cargando modelo de detección...";
|
|
548
289
|
this.statusColor = "#007bff";
|
|
549
290
|
const modelPath = this.MODEL_PATH;
|
|
550
|
-
this.debugLog('🤖 Loading
|
|
291
|
+
this.debugLog('🤖 Loading model:', modelPath);
|
|
551
292
|
const sessionOptions = this.getSessionOptions();
|
|
552
293
|
this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
|
|
553
|
-
// Load MobileNet model if classification is enabled and not already loaded
|
|
554
|
-
if (this.useDocumentClassification && !this.mobileNetSession) {
|
|
555
|
-
await this.loadMobileNetModel();
|
|
556
|
-
}
|
|
557
294
|
this.isModelPreloaded = true;
|
|
558
|
-
this.emitReadyEvent();
|
|
559
295
|
}
|
|
560
296
|
else {
|
|
561
|
-
this.debugLog('🚀 Using preloaded
|
|
562
|
-
this.statusMessage = "Usando
|
|
297
|
+
this.debugLog('🚀 Using preloaded model');
|
|
298
|
+
this.statusMessage = "Usando modelo precargado...";
|
|
563
299
|
this.statusColor = "#007bff";
|
|
564
300
|
}
|
|
565
301
|
this.statusMessage = "Configurando cámara...";
|
|
@@ -672,58 +408,13 @@ const JaakStamps = class {
|
|
|
672
408
|
return isCentered && isGoodSize;
|
|
673
409
|
}
|
|
674
410
|
checkSideAlignment(box) {
|
|
675
|
-
|
|
676
|
-
return { top: false, right: false, bottom: false, left: false };
|
|
677
|
-
// Get video dimensions to calculate actual mask boundaries in model space
|
|
678
|
-
const videoWidth = this.videoRef.videoWidth;
|
|
679
|
-
const videoHeight = this.videoRef.videoHeight;
|
|
680
|
-
if (videoWidth === 0 || videoHeight === 0) {
|
|
681
|
-
return { top: false, right: false, bottom: false, left: false };
|
|
682
|
-
}
|
|
683
|
-
// Calculate video aspect ratio
|
|
684
|
-
const videoAspectRatio = videoWidth / videoHeight;
|
|
685
|
-
// The model sees video stretched to 320x320, but we need to calculate where
|
|
686
|
-
// the mask should be in this distorted space to match the visual mask
|
|
687
|
-
// In the visual display, we calculate mask size based on the limiting dimension
|
|
688
|
-
// We need to replicate this logic but account for the distortion in model space
|
|
689
|
-
// Calculate the "display" dimensions (what the visual mask calculations use)
|
|
690
|
-
const containerAspectRatio = 1; // Assume square container for simplicity
|
|
691
|
-
let displayedVideoWidth, displayedVideoHeight;
|
|
692
|
-
if (videoAspectRatio > containerAspectRatio) {
|
|
693
|
-
// Video is wider - letterboxed in display
|
|
694
|
-
displayedVideoWidth = this.INPUT_SIZE;
|
|
695
|
-
displayedVideoHeight = this.INPUT_SIZE / videoAspectRatio;
|
|
696
|
-
}
|
|
697
|
-
else {
|
|
698
|
-
// Video is taller - pillarboxed in display
|
|
699
|
-
displayedVideoHeight = this.INPUT_SIZE;
|
|
700
|
-
displayedVideoWidth = this.INPUT_SIZE * videoAspectRatio;
|
|
701
|
-
}
|
|
702
|
-
// Calculate mask dimensions using the same logic as updateMaskDimensions
|
|
703
|
-
const maxWidthByHeight = displayedVideoHeight * this.ID1_ASPECT_RATIO;
|
|
704
|
-
let visualMaskWidth, visualMaskHeight;
|
|
705
|
-
const sizeRatio = this.maskSize / 100;
|
|
706
|
-
if (maxWidthByHeight <= displayedVideoWidth) {
|
|
707
|
-
// Video height is the limiting factor
|
|
708
|
-
visualMaskHeight = displayedVideoHeight * sizeRatio;
|
|
709
|
-
visualMaskWidth = visualMaskHeight * this.ID1_ASPECT_RATIO;
|
|
710
|
-
}
|
|
711
|
-
else {
|
|
712
|
-
// Video width is the limiting factor
|
|
713
|
-
visualMaskWidth = displayedVideoWidth * sizeRatio;
|
|
714
|
-
visualMaskHeight = visualMaskWidth / this.ID1_ASPECT_RATIO;
|
|
715
|
-
}
|
|
716
|
-
// Now map these visual mask dimensions to the distorted model space
|
|
717
|
-
// The model stretches video to 320x320, so we need to apply the inverse transformation
|
|
718
|
-
const modelMaskWidth = visualMaskWidth * (this.INPUT_SIZE / displayedVideoWidth);
|
|
719
|
-
const modelMaskHeight = visualMaskHeight * (this.INPUT_SIZE / displayedVideoHeight);
|
|
720
|
-
// Calculate mask boundaries in model coordinate system (always centered in 320x320)
|
|
411
|
+
// Obtener las coordenadas del marco de referencia (máscara)
|
|
721
412
|
const maskCenterX = this.INPUT_SIZE / 2;
|
|
722
413
|
const maskCenterY = this.INPUT_SIZE / 2;
|
|
723
|
-
const maskLeft = maskCenterX - (
|
|
724
|
-
const maskRight = maskCenterX + (
|
|
725
|
-
const maskTop = maskCenterY - (
|
|
726
|
-
const maskBottom = maskCenterY + (
|
|
414
|
+
const maskLeft = maskCenterX - (this.MASK_WIDTH / 2);
|
|
415
|
+
const maskRight = maskCenterX + (this.MASK_WIDTH / 2);
|
|
416
|
+
const maskTop = maskCenterY - (this.MASK_HEIGHT / 2);
|
|
417
|
+
const maskBottom = maskCenterY + (this.MASK_HEIGHT / 2);
|
|
727
418
|
// Obtener las coordenadas del documento detectado
|
|
728
419
|
let docLeft = box.x;
|
|
729
420
|
let docRight = box.x + box.w;
|
|
@@ -778,9 +469,7 @@ const JaakStamps = class {
|
|
|
778
469
|
corners?.forEach(corner => corner.classList.add('perfect-match'));
|
|
779
470
|
if (!this.hasScreenshotTaken) {
|
|
780
471
|
this.lastDetectedBox = bestBox;
|
|
781
|
-
this.takeScreenshot()
|
|
782
|
-
this.debugLog('❌ Error taking screenshot:', error);
|
|
783
|
-
});
|
|
472
|
+
this.takeScreenshot();
|
|
784
473
|
this.hasScreenshotTaken = true;
|
|
785
474
|
// Reset para permitir segunda captura
|
|
786
475
|
setTimeout(() => {
|
|
@@ -822,48 +511,15 @@ const JaakStamps = class {
|
|
|
822
511
|
}
|
|
823
512
|
}
|
|
824
513
|
drawDetections(ctx, boxes) {
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
// Get video and container dimensions
|
|
828
|
-
const videoWidth = this.videoRef.videoWidth;
|
|
829
|
-
const videoHeight = this.videoRef.videoHeight;
|
|
830
|
-
const containerWidth = this.canvasRef.width;
|
|
831
|
-
const containerHeight = this.canvasRef.height;
|
|
832
|
-
if (videoWidth === 0 || videoHeight === 0)
|
|
833
|
-
return;
|
|
834
|
-
// Calculate video aspect ratio and container aspect ratio
|
|
835
|
-
const videoAspectRatio = videoWidth / videoHeight;
|
|
836
|
-
const containerAspectRatio = containerWidth / containerHeight;
|
|
837
|
-
// Determine how video fits in container (same logic as updateMaskDimensions)
|
|
838
|
-
let displayedVideoWidth, displayedVideoHeight;
|
|
839
|
-
let videoOffsetX = 0, videoOffsetY = 0;
|
|
840
|
-
if (videoAspectRatio > containerAspectRatio) {
|
|
841
|
-
// Video is wider - letterboxed (black bars top/bottom)
|
|
842
|
-
displayedVideoWidth = containerWidth;
|
|
843
|
-
displayedVideoHeight = containerWidth / videoAspectRatio;
|
|
844
|
-
videoOffsetY = (containerHeight - displayedVideoHeight) / 2;
|
|
845
|
-
}
|
|
846
|
-
else {
|
|
847
|
-
// Video is taller - pillarboxed (black bars left/right)
|
|
848
|
-
displayedVideoHeight = containerHeight;
|
|
849
|
-
displayedVideoWidth = containerHeight * videoAspectRatio;
|
|
850
|
-
videoOffsetX = (containerWidth - displayedVideoWidth) / 2;
|
|
851
|
-
}
|
|
852
|
-
// Scale factor from model coordinates (320x320) to displayed video area
|
|
853
|
-
const scaleX = displayedVideoWidth / this.INPUT_SIZE;
|
|
854
|
-
const scaleY = displayedVideoHeight / this.INPUT_SIZE;
|
|
514
|
+
// Scale factor to convert from model coordinates (320x320) to canvas coordinates (640x640)
|
|
515
|
+
const scale = this.canvasRef.width / this.INPUT_SIZE;
|
|
855
516
|
boxes.forEach(det => {
|
|
856
|
-
// Convert model coordinates to displayed video coordinates
|
|
857
|
-
const x = det.x * scaleX + videoOffsetX;
|
|
858
|
-
const y = det.y * scaleY + videoOffsetY;
|
|
859
|
-
const w = det.w * scaleX;
|
|
860
|
-
const h = det.h * scaleY;
|
|
861
517
|
ctx.strokeStyle = "#32406C";
|
|
862
518
|
ctx.lineWidth = 2;
|
|
863
|
-
ctx.strokeRect(x, y, w, h);
|
|
519
|
+
ctx.strokeRect(det.x * scale, det.y * scale, det.w * scale, det.h * scale);
|
|
864
520
|
});
|
|
865
521
|
}
|
|
866
|
-
|
|
522
|
+
takeScreenshot() {
|
|
867
523
|
if (!this.videoRef || !this.lastDetectedBox)
|
|
868
524
|
return;
|
|
869
525
|
// Activar animación
|
|
@@ -879,10 +535,10 @@ const JaakStamps = class {
|
|
|
879
535
|
// Calcular las coordenadas de recorte basadas en la detección
|
|
880
536
|
const scaleX = this.videoRef.videoWidth / this.INPUT_SIZE;
|
|
881
537
|
const scaleY = this.videoRef.videoHeight / this.INPUT_SIZE;
|
|
882
|
-
const cropX = Math.max(0,
|
|
883
|
-
const cropY = Math.max(0,
|
|
884
|
-
const cropWidth = Math.min(
|
|
885
|
-
const cropHeight = Math.min(
|
|
538
|
+
const cropX = Math.max(0, this.lastDetectedBox.x * scaleX);
|
|
539
|
+
const cropY = Math.max(0, this.lastDetectedBox.y * scaleY);
|
|
540
|
+
const cropWidth = Math.min(this.lastDetectedBox.w * scaleX, this.videoRef.videoWidth - cropX);
|
|
541
|
+
const cropHeight = Math.min(this.lastDetectedBox.h * scaleY, this.videoRef.videoHeight - cropY);
|
|
886
542
|
// OPTIMIZATION: Create temporary canvas only for cropped version
|
|
887
543
|
// (We reuse main capture canvas for full frame)
|
|
888
544
|
const croppedCanvas = document.createElement('canvas');
|
|
@@ -897,29 +553,6 @@ const JaakStamps = class {
|
|
|
897
553
|
// Captura del frente usando canvas reutilizado
|
|
898
554
|
this.capturedFullFrame = this.captureCanvas.toDataURL('image/png');
|
|
899
555
|
this.capturedCroppedId = croppedCanvas.toDataURL('image/png');
|
|
900
|
-
// Check if document classification is enabled
|
|
901
|
-
if (this.useDocumentClassification) {
|
|
902
|
-
// Load MobileNet model if not loaded yet (lazy loading)
|
|
903
|
-
if (!this.mobileNetSession) {
|
|
904
|
-
try {
|
|
905
|
-
await this.loadMobileNetModel();
|
|
906
|
-
}
|
|
907
|
-
catch (error) {
|
|
908
|
-
this.debugLog('⚠️ Failed to load classification model, continuing without classification:', error);
|
|
909
|
-
}
|
|
910
|
-
}
|
|
911
|
-
// Classify the cropped document if model is available
|
|
912
|
-
if (this.mobileNetSession) {
|
|
913
|
-
const classification = await this.classifyDocument(croppedCanvas);
|
|
914
|
-
if (classification && classification.class === 'passport') {
|
|
915
|
-
// If it's a passport, skip back capture since passports don't have a back side
|
|
916
|
-
this.debugLog('📄 Passport detected - skipping back capture');
|
|
917
|
-
this.completeProcess(true);
|
|
918
|
-
return;
|
|
919
|
-
}
|
|
920
|
-
}
|
|
921
|
-
}
|
|
922
|
-
// For other IDs, continue with normal flow (back capture)
|
|
923
556
|
this.captureStep = 'back';
|
|
924
557
|
this.statusMessage = "Voltee la identificación y muestre la parte trasera";
|
|
925
558
|
this.statusColor = "#007bff";
|
|
@@ -1049,7 +682,7 @@ const JaakStamps = class {
|
|
|
1049
682
|
this.cleanup();
|
|
1050
683
|
}
|
|
1051
684
|
render() {
|
|
1052
|
-
return (index.h("div", { key: '
|
|
685
|
+
return (index.h("div", { key: 'a1036d3867a4f5c40a942e47a30992a6c56e5240', class: "detector-container" }, index.h("div", { key: 'dada4edb4cc690e4e73d616e8eb22fa8fb6b2817', class: "video-container" }, index.h("video", { key: '16b43f5efdd0c32dbfab49a86e6904baabfdc220', ref: el => this.videoRef = el, width: "640", height: "640", autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), index.h("canvas", { key: 'e89cf0292df3bef51d9e9ed650b4f68493506314', ref: el => this.canvasRef = el, width: "640", height: "640", class: this.shouldMirrorVideo ? 'mirror' : '' }), index.h("div", { key: '3740295495466519be1b4b95891dd06d8272a7d6', class: "overlay-mask" }, index.h("div", { key: 'ac61b03420ae83d06ec8e5095a11665a8b5a4cd1', class: "card-outline" }, index.h("div", { key: '7190506e4803ccde1f6c95e6238b05271e7e01a5', class: "side side-top" }), index.h("div", { key: 'e383f023305021cdd5a02ccaf6a2bb2c775b28be', class: "side side-right" }), index.h("div", { key: '733f572b80c5f0050c21aa4cf5efd5b499859c23', class: "side side-bottom" }), index.h("div", { key: 'dbf175597a0d0790b9cc54f737693e418f1500f2', class: "side side-left" }), index.h("div", { key: '657375f468fc83444e6157c5308fca7237e85f22', class: "corner corner-tl" }), index.h("div", { key: '0491bf2ed49322cba5220a82016bb9a77c102386', class: "corner corner-tr" }), index.h("div", { key: 'eb7d153a47dfb1f0c98229752aabfe71181d6c3b', class: "corner corner-bl" }), index.h("div", { key: '7d57726a70864f9c2590395f6dc89918558fbc87', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (index.h("div", { key: '8deff6975766142bae69fb7596f0097b1319bc5f', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (index.h("button", { key: '471fae3b2c48302d474a7e7186cbe21e1260288f', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso"))), this.isCapturing && (index.h("div", { key: '83fa0133b072f982c9d861632525a64068271833', class: "capture-animation" })), this.showFlipAnimation && (index.h("div", { key: '0cdcabf20a263067a3fb120ec112a7c688eaece1', class: "flip-animation" }, index.h("div", { key: 'c7fd5c4211aa67cdc37be882617120cfb3afcfad', class: "id-card-icon" }), index.h("div", { key: '1c8e889d1de4867887fc25ac221b780154da59dd', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (index.h("div", { key: '7fcf315cb26c2c860d06dcdb7da6f58524ef4474', class: "success-animation" }, index.h("div", { key: '5ea1a6aa4368cd154189db166af531abe2e0029e', class: "check-icon" }), index.h("div", { key: 'deb064b437a664ea5dfdb9b3883ee83bc85b939e', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (index.h("div", { key: '7a28906555b0e5b891e1f8516a318ec540a83320', class: "loading-overlay" }, index.h("div", { key: '6f0778d156648405dd385f95c5e9bad0c4112eda', class: "loading-spinner" }), index.h("div", { key: 'b1cd4ddee0e282e8353bf8ed298fbd1c8498fb5e', class: "loading-text" }, this.statusMessage))), index.h("div", { key: '1e74b90a10ef2e2e71505160accb0ea83672c5de', class: "watermark" }, index.h("img", { key: '352fee0189ac25f59724e69e317b28859c86476e', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
|
|
1053
686
|
}
|
|
1054
687
|
};
|
|
1055
688
|
JaakStamps.style = myComponentCss;
|