@jaak.ai/stamps 2.0.0-dev.23 → 2.0.0-dev.25
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 +64 -16
- package/dist/cjs/jaak-stamps-webcomponent.cjs.js +1 -1
- package/dist/cjs/jaak-stamps.cjs.entry.js +133 -16
- 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.js +153 -16
- package/dist/collection/components/my-component/my-component.js.map +1 -1
- package/dist/components/jaak-stamps.js +134 -16
- 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 +133 -16
- 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-f1172b06.entry.js +2 -0
- package/dist/jaak-stamps-webcomponent/p-f1172b06.entry.js.map +1 -0
- package/dist/types/components/my-component/my-component.d.ts +8 -0
- package/dist/types/components.d.ts +8 -0
- package/package.json +1 -1
- package/dist/jaak-stamps-webcomponent/p-380b1ebe.entry.js +0 -2
- package/dist/jaak-stamps-webcomponent/p-380b1ebe.entry.js.map +0 -1
package/README.md
CHANGED
|
@@ -6,12 +6,13 @@ Un componente web para la detección y captura automática de documentos de iden
|
|
|
6
6
|
|
|
7
7
|
- 📷 **Detección automática** de documentos de identificación en tiempo real
|
|
8
8
|
- 🎯 **Guía visual** para posicionamiento óptimo del documento
|
|
9
|
-
-
|
|
9
|
+
- 🤖 **Clasificación inteligente** de documentos para determinar si requieren reverso
|
|
10
|
+
- 📋 **Captura adaptativa** - automáticamente detecta si el documento tiene reverso
|
|
10
11
|
- 🖼 **Doble salida** para cada lado: imagen completa y recorte del documento
|
|
11
12
|
- ✂️ **Recorte configurable** con margen personalizable alrededor del documento
|
|
12
13
|
- 🔧 **API programática** para control total del proceso
|
|
13
14
|
- 📱 **Responsive** y compatible con dispositivos móviles
|
|
14
|
-
- ⚡ **Optimización automática**
|
|
15
|
+
- ⚡ **Optimización automática** para mejor rendimiento
|
|
15
16
|
|
|
16
17
|
## Instalación
|
|
17
18
|
|
|
@@ -42,7 +43,7 @@ yarn add @jaak.ai/stamps
|
|
|
42
43
|
<script type="module" src="https://unpkg.com/@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js"></script>
|
|
43
44
|
</head>
|
|
44
45
|
<body>
|
|
45
|
-
<jaak-stamps id="detector" debug="false" mask-size="90" crop-margin="10"></jaak-stamps>
|
|
46
|
+
<jaak-stamps id="detector" debug="false" mask-size="90" crop-margin="10" use-document-classification="false"></jaak-stamps>
|
|
46
47
|
|
|
47
48
|
<button onclick="startCapture()">Iniciar Captura</button>
|
|
48
49
|
<button onclick="stopCapture()">Detener</button>
|
|
@@ -141,6 +142,7 @@ import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
|
|
|
141
142
|
[debug]="false"
|
|
142
143
|
[maskSize]="90"
|
|
143
144
|
[cropMargin]="10"
|
|
145
|
+
[useDocumentClassification]="false"
|
|
144
146
|
(captureCompleted)="onCaptureCompleted($event)"
|
|
145
147
|
(isReady)="onComponentReady($event)">
|
|
146
148
|
</jaak-stamps>
|
|
@@ -242,7 +244,7 @@ import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react
|
|
|
242
244
|
// Importar el web component
|
|
243
245
|
import '@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js';
|
|
244
246
|
|
|
245
|
-
const JaakStampsWrapper = forwardRef(({ debug = false, maskSize = 90, cropMargin = 0, onCaptureCompleted, onIsReady }, ref) => {
|
|
247
|
+
const JaakStampsWrapper = forwardRef(({ debug = false, maskSize = 90, cropMargin = 0, useDocumentClassification = false, onCaptureCompleted, onIsReady }, ref) => {
|
|
246
248
|
const elementRef = useRef(null);
|
|
247
249
|
|
|
248
250
|
useImperativeHandle(ref, () => ({
|
|
@@ -288,6 +290,7 @@ const JaakStampsWrapper = forwardRef(({ debug = false, maskSize = 90, cropMargin
|
|
|
288
290
|
debug={debug}
|
|
289
291
|
mask-size={maskSize}
|
|
290
292
|
crop-margin={cropMargin}
|
|
293
|
+
use-document-classification={useDocumentClassification}
|
|
291
294
|
/>
|
|
292
295
|
);
|
|
293
296
|
});
|
|
@@ -369,6 +372,7 @@ function App() {
|
|
|
369
372
|
debug={false}
|
|
370
373
|
maskSize={90}
|
|
371
374
|
cropMargin={10}
|
|
375
|
+
useDocumentClassification={false}
|
|
372
376
|
onCaptureCompleted={handleCaptureCompleted}
|
|
373
377
|
onIsReady={handleIsReady}
|
|
374
378
|
/>
|
|
@@ -442,6 +446,7 @@ export default App;
|
|
|
442
446
|
| `alignmentTolerance` | `number` | `10` | Tolerancia en píxeles para considerar un lado alineado |
|
|
443
447
|
| `maskSize` | `number` | `90` | Porcentaje del video que ocupará la máscara de detección (50-100) |
|
|
444
448
|
| `cropMargin` | `number` | `0` | Margen en píxeles agregado al recorte del documento (0-100) |
|
|
449
|
+
| `useDocumentClassification` | `boolean` | `false` | Habilita la clasificación automática de documentos para determinar si solicitar reverso. Solo carga el modelo de clasificación cuando está habilitada. |
|
|
445
450
|
|
|
446
451
|
### Métodos Públicos
|
|
447
452
|
|
|
@@ -461,7 +466,7 @@ export default App;
|
|
|
461
466
|
| Evento | Payload | Descripción |
|
|
462
467
|
|--------|---------|-------------|
|
|
463
468
|
| `captureCompleted` | `CapturedImages` | Se emite cuando se completa el proceso de captura |
|
|
464
|
-
| `isReady` | `boolean` | Se emite cuando el componente está listo para comenzar la detección (
|
|
469
|
+
| `isReady` | `boolean` | Se emite cuando el componente está listo para comenzar la detección (modelos cargados) |
|
|
465
470
|
|
|
466
471
|
### Tipos de Datos
|
|
467
472
|
|
|
@@ -495,33 +500,76 @@ interface Status {
|
|
|
495
500
|
|
|
496
501
|
## Flujo de Trabajo
|
|
497
502
|
|
|
498
|
-
### Flujo Estándar
|
|
503
|
+
### Flujo Estándar (useDocumentClassification = false)
|
|
499
504
|
1. **Inicialización**: El componente se prepara para la detección
|
|
500
|
-
2. **Inicio de captura**: Se carga el modelo
|
|
505
|
+
2. **Inicio de captura**: Se carga automáticamente el modelo de detección
|
|
501
506
|
3. **Captura del frente**: El usuario posiciona el documento y se captura automáticamente
|
|
502
|
-
4. **
|
|
503
|
-
5. **
|
|
507
|
+
4. **Solicitud de reverso**: Siempre se solicita voltear el documento para capturar el reverso
|
|
508
|
+
5. **Botón "Saltar reverso"**: Disponible para omitir manualmente la captura del reverso
|
|
509
|
+
6. **Completado**: Se emite el evento `captureCompleted` con las imágenes correspondientes
|
|
510
|
+
|
|
511
|
+
### Flujo con Clasificación Inteligente (useDocumentClassification = true)
|
|
512
|
+
1. **Inicialización**: El componente se prepara para la detección
|
|
513
|
+
2. **Inicio de captura**: Se cargan automáticamente los modelos de detección y clasificación
|
|
514
|
+
3. **Captura del frente**: El usuario posiciona el documento y se captura automáticamente
|
|
515
|
+
4. **Clasificación automática**: El sistema determina si el documento requiere captura de reverso
|
|
516
|
+
5. **Flujo adaptativo**:
|
|
517
|
+
- **Si es pasaporte**: Se completa automáticamente el proceso (sin reverso)
|
|
518
|
+
- **Si es otro documento**: Se solicita voltear el documento para capturar el reverso
|
|
519
|
+
6. **Completado**: Se emite el evento `captureCompleted` con las imágenes correspondientes
|
|
504
520
|
|
|
505
521
|
### Flujo con Precarga (Recomendado)
|
|
506
|
-
1. **Precarga
|
|
507
|
-
2. **Inicio optimizado**: Al iniciar la captura, se
|
|
508
|
-
3. **Captura del frente**: Detección más
|
|
509
|
-
4. **
|
|
522
|
+
1. **Precarga de modelos**: Se llama a `preloadModel()` para cargar ambos modelos en memoria
|
|
523
|
+
2. **Inicio optimizado**: Al iniciar la captura, se usan los modelos ya cargados
|
|
524
|
+
3. **Captura del frente**: Detección y clasificación más rápidas con modelos precargados
|
|
525
|
+
4. **Flujo inteligente**:
|
|
526
|
+
- **Documento sin reverso**: Proceso completado inmediatamente
|
|
527
|
+
- **Documento con reverso**: Se solicita captura del reverso
|
|
510
528
|
5. **Completado**: Se emite el evento `captureCompleted` con todas las imágenes
|
|
511
529
|
|
|
530
|
+
### Clasificación de Documentos
|
|
531
|
+
|
|
532
|
+
#### Modo con Clasificación Habilitada (`useDocumentClassification = true`)
|
|
533
|
+
Cuando la propiedad está habilitada, el sistema utiliza un modelo de inteligencia artificial especializado para determinar automáticamente si el documento requiere captura de reverso:
|
|
534
|
+
- **Pasaportes**: Se omite automáticamente la captura del reverso
|
|
535
|
+
- **Otros documentos**: Requieren captura de ambos lados (frente y reverso)
|
|
536
|
+
- **Botón "Saltar reverso"**: Siempre disponible para permitir flexibilidad manual
|
|
537
|
+
- **Carga optimizada**: El modelo de clasificación se descarga solo cuando es necesario
|
|
538
|
+
|
|
539
|
+
#### Modo Estándar (`useDocumentClassification = false`, por defecto)
|
|
540
|
+
Cuando está deshabilitada, el comportamiento es más liviano y directo:
|
|
541
|
+
- **Todos los documentos**: Siempre se solicita captura del reverso
|
|
542
|
+
- **Botón "Saltar reverso"**: Disponible para omitir manualmente la captura
|
|
543
|
+
- **Sin clasificación**: NO se carga el modelo de clasificación, solo el de detección
|
|
544
|
+
- **Menor uso de ancho de banda**: Solo descarga el modelo de detección (~5MB menos)
|
|
545
|
+
|
|
546
|
+
#### Consideraciones de Rendimiento
|
|
547
|
+
- **Con clasificación deshabilitada**: Carga más rápida y menor uso de datos
|
|
548
|
+
- **Con clasificación habilitada**: Experiencia más inteligente pero requiere descargar modelo adicional
|
|
549
|
+
- **Carga bajo demanda**: El modelo de clasificación se carga solo cuando se captura el primer documento
|
|
550
|
+
|
|
512
551
|
## Requisitos del Sistema
|
|
513
552
|
|
|
514
553
|
- **Navegadores**: Chrome/Edge 88+, Firefox 85+, Safari 14+
|
|
515
554
|
- **Cámara**: Acceso a cámara trasera (móvil) o webcam (escritorio)
|
|
516
|
-
- **Conexión**: Conexión a internet para cargar
|
|
555
|
+
- **Conexión**: Conexión a internet para cargar los modelos de IA
|
|
517
556
|
|
|
518
|
-
## Consideraciones de Privacidad
|
|
557
|
+
## Consideraciones de Privacidad y Rendimiento
|
|
519
558
|
|
|
559
|
+
### Privacidad
|
|
520
560
|
- Las imágenes se procesan localmente en el navegador
|
|
521
561
|
- No se envían datos a servidores externos
|
|
522
|
-
-
|
|
562
|
+
- Los modelos de IA (detección y clasificación) se ejecutan completamente en el cliente
|
|
563
|
+
- La clasificación de documentos se realiza de forma privada y local
|
|
523
564
|
- Las imágenes capturadas solo están disponibles en el contexto de tu aplicación
|
|
524
565
|
|
|
566
|
+
### Optimización de Recursos
|
|
567
|
+
- **Carga condicional**: Solo descarga modelos necesarios según configuración
|
|
568
|
+
- **Modelo de detección**: ~15MB (siempre requerido)
|
|
569
|
+
- **Modelo de clasificación**: ~5MB (solo si `useDocumentClassification = true`)
|
|
570
|
+
- **Lazy loading**: Los modelos se cargan cuando realmente se necesitan
|
|
571
|
+
- **Cache del navegador**: Los modelos se almacenan localmente después de la primera descarga
|
|
572
|
+
|
|
525
573
|
## Desarrollo
|
|
526
574
|
|
|
527
575
|
### Clonar el repositorio
|
|
@@ -18,7 +18,7 @@ var patchBrowser = () => {
|
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(async (options) => {
|
|
20
20
|
await index.globalScripts();
|
|
21
|
-
return index.bootstrapLazy([["jaak-stamps.cjs",[[1,"jaak-stamps",{"debug":[4],"alignmentTolerance":[2,"alignment-tolerance"],"maskSize":[2,"mask-size"],"cropMargin":[2,"crop-margin"],"isVideoActive":[32],"statusMessage":[32],"statusColor":[32],"bestScore":[32],"capturedFullFrame":[32],"capturedCroppedId":[32],"capturedBackFullFrame":[32],"capturedBackCroppedId":[32],"captureStep":[32],"isCapturing":[32],"showFlipAnimation":[32],"showSuccessAnimation":[32],"shouldMirrorVideo":[32],"sideAlignment":[32],"isDetectionPaused":[32],"isLoading":[32],"isModelPreloaded":[32],"isMaskReady":[32],"getCapturedImages":[64],"isProcessCompleted":[64],"startCapture":[64],"stopCapture":[64],"resetCapture":[64],"getStatus":[64],"preloadModel":[64],"skipBackCapture":[64]}]]]], options);
|
|
21
|
+
return index.bootstrapLazy([["jaak-stamps.cjs",[[1,"jaak-stamps",{"debug":[4],"alignmentTolerance":[2,"alignment-tolerance"],"maskSize":[2,"mask-size"],"cropMargin":[2,"crop-margin"],"useDocumentClassification":[4,"use-document-classification"],"isVideoActive":[32],"statusMessage":[32],"statusColor":[32],"bestScore":[32],"capturedFullFrame":[32],"capturedCroppedId":[32],"capturedBackFullFrame":[32],"capturedBackCroppedId":[32],"captureStep":[32],"isCapturing":[32],"showFlipAnimation":[32],"showSuccessAnimation":[32],"shouldMirrorVideo":[32],"sideAlignment":[32],"isDetectionPaused":[32],"isLoading":[32],"isModelPreloaded":[32],"isMaskReady":[32],"getCapturedImages":[64],"isProcessCompleted":[64],"startCapture":[64],"stopCapture":[64],"resetCapture":[64],"getStatus":[64],"preloadModel":[64],"skipBackCapture":[64]}]]]], options);
|
|
22
22
|
});
|
|
23
23
|
|
|
24
24
|
exports.setNonce = index.setNonce;
|
|
@@ -15,6 +15,7 @@ const JaakStamps = class {
|
|
|
15
15
|
alignmentTolerance = 10; // Tolerancia en píxeles para considerar un lado alineado (escalado para 320x320)
|
|
16
16
|
maskSize = 90; // Porcentaje del video que ocupará la máscara (default 90%)
|
|
17
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
|
|
18
19
|
captureCompleted;
|
|
19
20
|
isReady;
|
|
20
21
|
isVideoActive = false;
|
|
@@ -48,6 +49,8 @@ const JaakStamps = class {
|
|
|
48
49
|
animationId;
|
|
49
50
|
hasScreenshotTaken = false;
|
|
50
51
|
lastDetectedBox;
|
|
52
|
+
mobileNetSession;
|
|
53
|
+
mobileNetClassMap;
|
|
51
54
|
// Performance optimization properties
|
|
52
55
|
frameSkipCounter = 0;
|
|
53
56
|
FRAME_SKIP = 2; // Process every 3rd frame (reduces CPU by ~66%)
|
|
@@ -60,7 +63,9 @@ const JaakStamps = class {
|
|
|
60
63
|
preprocessCtx;
|
|
61
64
|
captureCanvas;
|
|
62
65
|
captureCtx;
|
|
63
|
-
MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/
|
|
66
|
+
MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/ddmyp-v1.onnx";
|
|
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";
|
|
64
69
|
INPUT_SIZE = 320;
|
|
65
70
|
CONFIDENCE_THRESHOLD = 0.6;
|
|
66
71
|
// ISO/IEC 7810 ID-1 standard dimensions (85.60mm x 53.98mm)
|
|
@@ -266,25 +271,29 @@ const JaakStamps = class {
|
|
|
266
271
|
}
|
|
267
272
|
try {
|
|
268
273
|
this.isLoading = true;
|
|
269
|
-
this.statusMessage = "Precargando
|
|
274
|
+
this.statusMessage = "Precargando modelos...";
|
|
270
275
|
this.statusColor = "#007bff";
|
|
271
276
|
const modelPath = this.MODEL_PATH;
|
|
272
|
-
this.debugLog('🤖 Preloading model:', modelPath);
|
|
277
|
+
this.debugLog('🤖 Preloading detection model:', modelPath);
|
|
273
278
|
// Configure ONNX Runtime with device-specific optimizations
|
|
274
279
|
const sessionOptions = this.getSessionOptions();
|
|
275
280
|
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
|
+
}
|
|
276
285
|
this.isModelPreloaded = true;
|
|
277
286
|
this.isLoading = false;
|
|
278
|
-
this.statusMessage = "
|
|
287
|
+
this.statusMessage = "Modelos precargados. Listo para comenzar detección";
|
|
279
288
|
this.statusColor = "#28a745";
|
|
280
289
|
this.emitReadyEvent();
|
|
281
|
-
this.debugLog('✅
|
|
282
|
-
return { success: true, message: '
|
|
290
|
+
this.debugLog('✅ Models preloaded successfully');
|
|
291
|
+
return { success: true, message: 'Models preloaded successfully' };
|
|
283
292
|
}
|
|
284
293
|
catch (error) {
|
|
285
|
-
this.debugLog('❌ Error preloading
|
|
294
|
+
this.debugLog('❌ Error preloading models:', error);
|
|
286
295
|
this.isLoading = false;
|
|
287
|
-
this.statusMessage = "Error al precargar
|
|
296
|
+
this.statusMessage = "Error al precargar los modelos";
|
|
288
297
|
this.statusColor = "#ff6b6b";
|
|
289
298
|
return { success: false, error: error.message };
|
|
290
299
|
}
|
|
@@ -294,6 +303,80 @@ const JaakStamps = class {
|
|
|
294
303
|
this.completeProcess(true);
|
|
295
304
|
}
|
|
296
305
|
}
|
|
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
|
+
}
|
|
297
380
|
cleanup() {
|
|
298
381
|
if (this.animationId) {
|
|
299
382
|
cancelAnimationFrame(this.animationId);
|
|
@@ -321,11 +404,16 @@ const JaakStamps = class {
|
|
|
321
404
|
this.captureCtx = undefined;
|
|
322
405
|
this.captureCanvas = undefined;
|
|
323
406
|
}
|
|
324
|
-
// Disposed ONNX
|
|
407
|
+
// Disposed ONNX sessions
|
|
325
408
|
if (this.session) {
|
|
326
409
|
this.session.release?.();
|
|
327
410
|
this.session = undefined;
|
|
328
411
|
}
|
|
412
|
+
if (this.mobileNetSession) {
|
|
413
|
+
this.mobileNetSession.release?.();
|
|
414
|
+
this.mobileNetSession = undefined;
|
|
415
|
+
}
|
|
416
|
+
this.mobileNetClassMap = undefined;
|
|
329
417
|
this.isModelPreloaded = false;
|
|
330
418
|
this.debugLog('🧹 Canvas pool cleaned up');
|
|
331
419
|
}
|
|
@@ -456,18 +544,22 @@ const JaakStamps = class {
|
|
|
456
544
|
// Check if model is already preloaded
|
|
457
545
|
if (!this.session) {
|
|
458
546
|
this.isLoading = true;
|
|
459
|
-
this.statusMessage = "Cargando
|
|
547
|
+
this.statusMessage = "Cargando modelos...";
|
|
460
548
|
this.statusColor = "#007bff";
|
|
461
549
|
const modelPath = this.MODEL_PATH;
|
|
462
|
-
this.debugLog('🤖 Loading model:', modelPath);
|
|
550
|
+
this.debugLog('🤖 Loading detection model:', modelPath);
|
|
463
551
|
const sessionOptions = this.getSessionOptions();
|
|
464
552
|
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
|
+
}
|
|
465
557
|
this.isModelPreloaded = true;
|
|
466
558
|
this.emitReadyEvent();
|
|
467
559
|
}
|
|
468
560
|
else {
|
|
469
|
-
this.debugLog('🚀 Using preloaded
|
|
470
|
-
this.statusMessage = "Usando
|
|
561
|
+
this.debugLog('🚀 Using preloaded models');
|
|
562
|
+
this.statusMessage = "Usando modelos precargados...";
|
|
471
563
|
this.statusColor = "#007bff";
|
|
472
564
|
}
|
|
473
565
|
this.statusMessage = "Configurando cámara...";
|
|
@@ -686,7 +778,9 @@ const JaakStamps = class {
|
|
|
686
778
|
corners?.forEach(corner => corner.classList.add('perfect-match'));
|
|
687
779
|
if (!this.hasScreenshotTaken) {
|
|
688
780
|
this.lastDetectedBox = bestBox;
|
|
689
|
-
this.takeScreenshot()
|
|
781
|
+
this.takeScreenshot().catch(error => {
|
|
782
|
+
this.debugLog('❌ Error taking screenshot:', error);
|
|
783
|
+
});
|
|
690
784
|
this.hasScreenshotTaken = true;
|
|
691
785
|
// Reset para permitir segunda captura
|
|
692
786
|
setTimeout(() => {
|
|
@@ -769,7 +863,7 @@ const JaakStamps = class {
|
|
|
769
863
|
ctx.strokeRect(x, y, w, h);
|
|
770
864
|
});
|
|
771
865
|
}
|
|
772
|
-
takeScreenshot() {
|
|
866
|
+
async takeScreenshot() {
|
|
773
867
|
if (!this.videoRef || !this.lastDetectedBox)
|
|
774
868
|
return;
|
|
775
869
|
// Activar animación
|
|
@@ -803,6 +897,29 @@ const JaakStamps = class {
|
|
|
803
897
|
// Captura del frente usando canvas reutilizado
|
|
804
898
|
this.capturedFullFrame = this.captureCanvas.toDataURL('image/png');
|
|
805
899
|
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)
|
|
806
923
|
this.captureStep = 'back';
|
|
807
924
|
this.statusMessage = "Voltee la identificación y muestre la parte trasera";
|
|
808
925
|
this.statusColor = "#007bff";
|
|
@@ -932,7 +1049,7 @@ const JaakStamps = class {
|
|
|
932
1049
|
this.cleanup();
|
|
933
1050
|
}
|
|
934
1051
|
render() {
|
|
935
|
-
return (index.h("div", { key: '
|
|
1052
|
+
return (index.h("div", { key: '42591479495df221b101555198a23288d7d765b0', class: "detector-container" }, index.h("div", { key: '2b9ab48572aa2fb5542b8a8dc1b70a0f2a6eca89', class: "video-container" }, index.h("video", { key: 'b9e84f2eb67fa6f7f158e19b90871a1eebee624b', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), index.h("canvas", { key: 'a82fc4826e220e696799b07b3510456f174a6628', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (index.h("div", { key: '9b3b838f99030e3dfa760fa0dd7c89ff24f26ed9', class: "overlay-mask" }, index.h("div", { key: 'f6a3b1ac2f12c1fb081f6b5eb853e627040396f4', class: "card-outline" }, index.h("div", { key: '6626259249ac5e0fd6ba665ab802af1ac2f9fc17', class: "side side-top" }), index.h("div", { key: '7a3195c96b2406b40b122f4267c2a251614cdede', class: "side side-right" }), index.h("div", { key: 'ece78305cfb083ada1d44de1d7d5226730879cc3', class: "side side-bottom" }), index.h("div", { key: '107468c583bbb01dd46c36c096e49be8e0b574ba', class: "side side-left" }), index.h("div", { key: 'c590f13b80c5e37c0ac0c68cfc2e2904b4345ebc', class: "corner corner-tl" }), index.h("div", { key: 'ab1e5aab179068ad1bc7b58ef3628d9618a877a8', class: "corner corner-tr" }), index.h("div", { key: '3a1db6cf1105bd3a2dfe7d4b998e79f6e40625ec', class: "corner corner-bl" }), index.h("div", { key: '5f9bc4e4557e5539335894160dccbaa2a6d6ac2d', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (index.h("div", { key: '8226d6721b0ae800f935e978a93113bd3b99656a', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (index.h("button", { key: '16cec7ca4a80ba0db1ace768826da17063eddb3e', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")))), this.isCapturing && (index.h("div", { key: 'bfdca0059eb50d37a77e8e43ef963ba7ed953edf', class: "capture-animation" })), this.showFlipAnimation && (index.h("div", { key: 'a1ad4b4f884d7d9f6090f148ddd6df19250073dd', class: "flip-animation" }, index.h("div", { key: 'e159ce385824dc049a6e9409d3747105c6f0a08e', class: "id-card-icon" }), index.h("div", { key: '6fcff650a3c7fdb16f8d327750e06055b9a93d0d', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (index.h("div", { key: 'c4b76ecb19c65969676e5156689c2c0b1c9a584e', class: "success-animation" }, index.h("div", { key: '12203a8fe7ee878089b3dda1d1142cde5489eed0', class: "check-icon" }), index.h("div", { key: 'a2d41c8944873d33106994b8d56c3ee1ee1ae9fc', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (index.h("div", { key: 'a155cd999fa40c35fa7b391cde7c1026edb250a7', class: "loading-overlay" }, index.h("div", { key: 'ccba76c5d4a472158c28bc564ba95bd65829b58d', class: "loading-spinner" }), index.h("div", { key: '23168f9bdcf4e993539288ff5703acaed13bb16a', class: "loading-text" }, this.statusMessage))), index.h("div", { key: '0107b82ad19726c1bab131e17892a46b04e08cfd', class: "watermark" }, index.h("img", { key: 'ad8831a6f77fa61805f22e3a27f5c5619ac1cc0e', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
|
|
936
1053
|
}
|
|
937
1054
|
};
|
|
938
1055
|
JaakStamps.style = myComponentCss;
|