@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
package/README.md
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
# Jaak Stamps - Document Detector Web Component
|
|
2
2
|
|
|
3
|
+
[](https://stenciljs.com)
|
|
4
|
+
|
|
3
5
|
Un componente web para la detección y captura automática de documentos de identificación usando visión artificial y redes neuronales.
|
|
4
6
|
|
|
5
7
|
## Características
|
|
6
8
|
|
|
7
9
|
- 📷 **Detección automática** de documentos de identificación en tiempo real
|
|
8
10
|
- 🎯 **Guía visual** para posicionamiento óptimo del documento
|
|
9
|
-
-
|
|
10
|
-
- 📋 **Captura adaptativa** - automáticamente detecta si el documento tiene reverso
|
|
11
|
+
- 📋 **Captura doble cara** (frente y reverso) con opción de omitir reverso
|
|
11
12
|
- 🖼 **Doble salida** para cada lado: imagen completa y recorte del documento
|
|
12
|
-
- ✂️ **Recorte configurable** con margen personalizable alrededor del documento
|
|
13
13
|
- 🔧 **API programática** para control total del proceso
|
|
14
14
|
- 📱 **Responsive** y compatible con dispositivos móviles
|
|
15
|
-
- ⚡ **Optimización automática**
|
|
15
|
+
- ⚡ **Optimización automática** usando ONNX Runtime Web
|
|
16
16
|
|
|
17
17
|
## Instalación
|
|
18
18
|
|
|
@@ -43,7 +43,7 @@ yarn add @jaak.ai/stamps
|
|
|
43
43
|
<script type="module" src="https://unpkg.com/@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js"></script>
|
|
44
44
|
</head>
|
|
45
45
|
<body>
|
|
46
|
-
<jaak-stamps id="detector" debug="false"
|
|
46
|
+
<jaak-stamps id="detector" debug="false"></jaak-stamps>
|
|
47
47
|
|
|
48
48
|
<button onclick="startCapture()">Iniciar Captura</button>
|
|
49
49
|
<button onclick="stopCapture()">Detener</button>
|
|
@@ -58,12 +58,6 @@ yarn add @jaak.ai/stamps
|
|
|
58
58
|
// event.detail contiene las imágenes capturadas
|
|
59
59
|
});
|
|
60
60
|
|
|
61
|
-
// Escuchar evento de componente listo
|
|
62
|
-
detector.addEventListener('isReady', (event) => {
|
|
63
|
-
console.log('Componente listo:', event.detail);
|
|
64
|
-
// event.detail indica si el componente está listo (true/false)
|
|
65
|
-
});
|
|
66
|
-
|
|
67
61
|
function startCapture() {
|
|
68
62
|
detector.startCapture();
|
|
69
63
|
}
|
|
@@ -140,11 +134,7 @@ import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
|
|
|
140
134
|
<jaak-stamps
|
|
141
135
|
#detector
|
|
142
136
|
[debug]="false"
|
|
143
|
-
|
|
144
|
-
[cropMargin]="10"
|
|
145
|
-
[useDocumentClassification]="false"
|
|
146
|
-
(captureCompleted)="onCaptureCompleted($event)"
|
|
147
|
-
(isReady)="onComponentReady($event)">
|
|
137
|
+
(captureCompleted)="onCaptureCompleted($event)">
|
|
148
138
|
</jaak-stamps>
|
|
149
139
|
|
|
150
140
|
<div class="controls">
|
|
@@ -221,11 +211,6 @@ export class AppComponent implements OnInit {
|
|
|
221
211
|
this.capturedData = event.detail;
|
|
222
212
|
this.isCompleted = true;
|
|
223
213
|
}
|
|
224
|
-
|
|
225
|
-
onComponentReady(event: any) {
|
|
226
|
-
console.log('Componente listo en Angular:', event.detail);
|
|
227
|
-
// El componente está listo para iniciar detección
|
|
228
|
-
}
|
|
229
214
|
}
|
|
230
215
|
```
|
|
231
216
|
|
|
@@ -244,7 +229,7 @@ import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react
|
|
|
244
229
|
// Importar el web component
|
|
245
230
|
import '@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js';
|
|
246
231
|
|
|
247
|
-
const JaakStampsWrapper = forwardRef(({ debug = false,
|
|
232
|
+
const JaakStampsWrapper = forwardRef(({ debug = false, onCaptureCompleted }, ref) => {
|
|
248
233
|
const elementRef = useRef(null);
|
|
249
234
|
|
|
250
235
|
useImperativeHandle(ref, () => ({
|
|
@@ -267,30 +252,19 @@ const JaakStampsWrapper = forwardRef(({ debug = false, maskSize = 90, cropMargin
|
|
|
267
252
|
}
|
|
268
253
|
};
|
|
269
254
|
|
|
270
|
-
const handleIsReady = (event) => {
|
|
271
|
-
if (onIsReady) {
|
|
272
|
-
onIsReady(event.detail);
|
|
273
|
-
}
|
|
274
|
-
};
|
|
275
|
-
|
|
276
255
|
if (element) {
|
|
277
256
|
element.addEventListener('captureCompleted', handleCaptureCompleted);
|
|
278
|
-
element.addEventListener('isReady', handleIsReady);
|
|
279
257
|
|
|
280
258
|
return () => {
|
|
281
259
|
element.removeEventListener('captureCompleted', handleCaptureCompleted);
|
|
282
|
-
element.removeEventListener('isReady', handleIsReady);
|
|
283
260
|
};
|
|
284
261
|
}
|
|
285
|
-
}, [onCaptureCompleted
|
|
262
|
+
}, [onCaptureCompleted]);
|
|
286
263
|
|
|
287
264
|
return (
|
|
288
265
|
<jaak-stamps
|
|
289
266
|
ref={elementRef}
|
|
290
267
|
debug={debug}
|
|
291
|
-
mask-size={maskSize}
|
|
292
|
-
crop-margin={cropMargin}
|
|
293
|
-
use-document-classification={useDocumentClassification}
|
|
294
268
|
/>
|
|
295
269
|
);
|
|
296
270
|
});
|
|
@@ -316,11 +290,6 @@ function App() {
|
|
|
316
290
|
setIsCompleted(true);
|
|
317
291
|
};
|
|
318
292
|
|
|
319
|
-
const handleIsReady = (isReady) => {
|
|
320
|
-
console.log('Componente listo:', isReady);
|
|
321
|
-
// El componente está listo para iniciar detección
|
|
322
|
-
};
|
|
323
|
-
|
|
324
293
|
const preloadModel = async () => {
|
|
325
294
|
try {
|
|
326
295
|
const result = await detectorRef.current?.preloadModel();
|
|
@@ -370,11 +339,7 @@ function App() {
|
|
|
370
339
|
<JaakStampsWrapper
|
|
371
340
|
ref={detectorRef}
|
|
372
341
|
debug={false}
|
|
373
|
-
maskSize={90}
|
|
374
|
-
cropMargin={10}
|
|
375
|
-
useDocumentClassification={false}
|
|
376
342
|
onCaptureCompleted={handleCaptureCompleted}
|
|
377
|
-
onIsReady={handleIsReady}
|
|
378
343
|
/>
|
|
379
344
|
|
|
380
345
|
<div className="controls">
|
|
@@ -444,9 +409,6 @@ export default App;
|
|
|
444
409
|
|-----------|------|---------------|-------------|
|
|
445
410
|
| `debug` | `boolean` | `false` | Activa el modo debug para mostrar información de depuración |
|
|
446
411
|
| `alignmentTolerance` | `number` | `10` | Tolerancia en píxeles para considerar un lado alineado |
|
|
447
|
-
| `maskSize` | `number` | `90` | Porcentaje del video que ocupará la máscara de detección (50-100) |
|
|
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. |
|
|
450
412
|
|
|
451
413
|
### Métodos Públicos
|
|
452
414
|
|
|
@@ -466,7 +428,6 @@ export default App;
|
|
|
466
428
|
| Evento | Payload | Descripción |
|
|
467
429
|
|--------|---------|-------------|
|
|
468
430
|
| `captureCompleted` | `CapturedImages` | Se emite cuando se completa el proceso de captura |
|
|
469
|
-
| `isReady` | `boolean` | Se emite cuando el componente está listo para comenzar la detección (modelos cargados) |
|
|
470
431
|
|
|
471
432
|
### Tipos de Datos
|
|
472
433
|
|
|
@@ -500,76 +461,33 @@ interface Status {
|
|
|
500
461
|
|
|
501
462
|
## Flujo de Trabajo
|
|
502
463
|
|
|
503
|
-
### Flujo Estándar
|
|
464
|
+
### Flujo Estándar
|
|
504
465
|
1. **Inicialización**: El componente se prepara para la detección
|
|
505
|
-
2. **Inicio de captura**: Se carga
|
|
466
|
+
2. **Inicio de captura**: Se carga el modelo ONNX automáticamente al iniciar la detección
|
|
506
467
|
3. **Captura del frente**: El usuario posiciona el documento y se captura automáticamente
|
|
507
|
-
4. **
|
|
508
|
-
5. **
|
|
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
|
|
468
|
+
4. **Captura del reverso**: Se solicita voltear el documento para capturar el reverso
|
|
469
|
+
5. **Completado**: Se emite el evento `captureCompleted` con todas las imágenes
|
|
520
470
|
|
|
521
471
|
### Flujo con Precarga (Recomendado)
|
|
522
|
-
1. **Precarga
|
|
523
|
-
2. **Inicio optimizado**: Al iniciar la captura, se
|
|
524
|
-
3. **Captura del frente**: Detección
|
|
525
|
-
4. **
|
|
526
|
-
- **Documento sin reverso**: Proceso completado inmediatamente
|
|
527
|
-
- **Documento con reverso**: Se solicita captura del reverso
|
|
472
|
+
1. **Precarga del modelo**: Se llama a `preloadModel()` para cargar el modelo en memoria
|
|
473
|
+
2. **Inicio optimizado**: Al iniciar la captura, se usa el modelo ya cargado
|
|
474
|
+
3. **Captura del frente**: Detección más rápida con el modelo precargado
|
|
475
|
+
4. **Captura del reverso**: Se solicita voltear el documento
|
|
528
476
|
5. **Completado**: Se emite el evento `captureCompleted` con todas las imágenes
|
|
529
477
|
|
|
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
|
-
|
|
551
478
|
## Requisitos del Sistema
|
|
552
479
|
|
|
553
480
|
- **Navegadores**: Chrome/Edge 88+, Firefox 85+, Safari 14+
|
|
554
481
|
- **Cámara**: Acceso a cámara trasera (móvil) o webcam (escritorio)
|
|
555
|
-
- **Conexión**: Conexión a internet para cargar
|
|
482
|
+
- **Conexión**: Conexión a internet para cargar el modelo ONNX Runtime
|
|
556
483
|
|
|
557
|
-
## Consideraciones de Privacidad
|
|
484
|
+
## Consideraciones de Privacidad
|
|
558
485
|
|
|
559
|
-
### Privacidad
|
|
560
486
|
- Las imágenes se procesan localmente en el navegador
|
|
561
487
|
- No se envían datos a servidores externos
|
|
562
|
-
-
|
|
563
|
-
- La clasificación de documentos se realiza de forma privada y local
|
|
488
|
+
- El modelo de IA se ejecuta completamente en el cliente
|
|
564
489
|
- Las imágenes capturadas solo están disponibles en el contexto de tu aplicación
|
|
565
490
|
|
|
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
|
-
|
|
573
491
|
## Desarrollo
|
|
574
492
|
|
|
575
493
|
### 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"],"
|
|
21
|
+
return index.bootstrapLazy([["jaak-stamps.cjs",[[1,"jaak-stamps",{"debug":[4],"alignmentTolerance":[2,"alignment-tolerance"],"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],"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;
|