@jaak.ai/stamps 2.0.0-beta.3 → 2.0.0-dev.18
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 -104
- package/dist/cjs/{index-BfhtOB0D.js → index-DGM9-FNg.js} +2 -5
- package/dist/cjs/index-DGM9-FNg.js.map +1 -0
- package/dist/cjs/jaak-stamps-webcomponent.cjs.js +2 -2
- package/dist/cjs/jaak-stamps.cjs.entry.js +39 -732
- 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 +2 -2
- package/dist/collection/components/my-component/my-component.css +7 -237
- package/dist/collection/components/my-component/my-component.js +38 -855
- package/dist/collection/components/my-component/my-component.js.map +1 -1
- package/dist/components/index.js +0 -3
- package/dist/components/index.js.map +1 -1
- package/dist/components/jaak-stamps.js +39 -743
- package/dist/components/jaak-stamps.js.map +1 -1
- package/dist/esm/{index-BP1Q4KOg.js → index-DqoVMnc7.js} +2 -5
- package/dist/esm/index-DqoVMnc7.js.map +1 -0
- package/dist/esm/jaak-stamps-webcomponent.js +3 -3
- package/dist/esm/jaak-stamps.entry.js +39 -732
- package/dist/esm/jaak-stamps.entry.js.map +1 -1
- package/dist/esm/loader.js +3 -3
- 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-4688150a.entry.js +2 -0
- package/dist/jaak-stamps-webcomponent/p-4688150a.entry.js.map +1 -0
- package/dist/jaak-stamps-webcomponent/p-DqoVMnc7.js +3 -0
- package/dist/jaak-stamps-webcomponent/p-DqoVMnc7.js.map +1 -0
- package/dist/types/components/my-component/my-component.d.ts +2 -54
- package/dist/types/components.d.ts +0 -34
- package/package.json +1 -1
- package/dist/cjs/index-BfhtOB0D.js.map +0 -1
- package/dist/esm/index-BP1Q4KOg.js.map +0 -1
- package/dist/jaak-stamps-webcomponent/p-14eb13d8.entry.js +0 -2
- package/dist/jaak-stamps-webcomponent/p-14eb13d8.entry.js.map +0 -1
- package/dist/jaak-stamps-webcomponent/p-BP1Q4KOg.js +0 -3
- package/dist/jaak-stamps-webcomponent/p-BP1Q4KOg.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,10 +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
|
-
| `preferredCamera` | `'auto' \| 'front' \| 'back'` | `'auto'` | Define qué cámara usar: `'auto'` (automático según dispositivo), `'front'` (cámara frontal), `'back'` (cámara trasera) |
|
|
451
412
|
|
|
452
413
|
### Métodos Públicos
|
|
453
414
|
|
|
@@ -461,15 +422,12 @@ export default App;
|
|
|
461
422
|
| `isProcessCompleted()` | `Promise<boolean>` | Verifica si el proceso ha sido completado |
|
|
462
423
|
| `getStatus()` | `Promise<Status>` | Obtiene el estado actual del detector |
|
|
463
424
|
| `skipBackCapture()` | `Promise<void>` | Omite la captura del reverso (solo disponible en paso 'back') |
|
|
464
|
-
| `getCameraInfo()` | `Promise<CameraInfo>` | Obtiene información detallada sobre las cámaras disponibles |
|
|
465
|
-
| `setPreferredCamera(camera)` | `Promise<{success: boolean, selectedCamera: string, availableCameras: number}>` | Configura la cámara preferida ('auto', 'front', 'back') |
|
|
466
425
|
|
|
467
426
|
### Eventos
|
|
468
427
|
|
|
469
428
|
| Evento | Payload | Descripción |
|
|
470
429
|
|--------|---------|-------------|
|
|
471
430
|
| `captureCompleted` | `CapturedImages` | Se emite cuando se completa el proceso de captura |
|
|
472
|
-
| `isReady` | `boolean` | Se emite cuando el componente está listo para comenzar la detección (modelos cargados) |
|
|
473
431
|
|
|
474
432
|
### Tipos de Datos
|
|
475
433
|
|
|
@@ -503,76 +461,33 @@ interface Status {
|
|
|
503
461
|
|
|
504
462
|
## Flujo de Trabajo
|
|
505
463
|
|
|
506
|
-
### Flujo Estándar
|
|
464
|
+
### Flujo Estándar
|
|
507
465
|
1. **Inicialización**: El componente se prepara para la detección
|
|
508
|
-
2. **Inicio de captura**: Se carga
|
|
466
|
+
2. **Inicio de captura**: Se carga el modelo ONNX automáticamente al iniciar la detección
|
|
509
467
|
3. **Captura del frente**: El usuario posiciona el documento y se captura automáticamente
|
|
510
|
-
4. **
|
|
511
|
-
5. **
|
|
512
|
-
6. **Completado**: Se emite el evento `captureCompleted` con las imágenes correspondientes
|
|
513
|
-
|
|
514
|
-
### Flujo con Clasificación Inteligente (useDocumentClassification = true)
|
|
515
|
-
1. **Inicialización**: El componente se prepara para la detección
|
|
516
|
-
2. **Inicio de captura**: Se cargan automáticamente los modelos de detección y clasificación
|
|
517
|
-
3. **Captura del frente**: El usuario posiciona el documento y se captura automáticamente
|
|
518
|
-
4. **Clasificación automática**: El sistema determina si el documento requiere captura de reverso
|
|
519
|
-
5. **Flujo adaptativo**:
|
|
520
|
-
- **Si es pasaporte**: Se completa automáticamente el proceso (sin reverso)
|
|
521
|
-
- **Si es otro documento**: Se solicita voltear el documento para capturar el reverso
|
|
522
|
-
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
|
|
523
470
|
|
|
524
471
|
### Flujo con Precarga (Recomendado)
|
|
525
|
-
1. **Precarga
|
|
526
|
-
2. **Inicio optimizado**: Al iniciar la captura, se
|
|
527
|
-
3. **Captura del frente**: Detección
|
|
528
|
-
4. **
|
|
529
|
-
- **Documento sin reverso**: Proceso completado inmediatamente
|
|
530
|
-
- **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
|
|
531
476
|
5. **Completado**: Se emite el evento `captureCompleted` con todas las imágenes
|
|
532
477
|
|
|
533
|
-
### Clasificación de Documentos
|
|
534
|
-
|
|
535
|
-
#### Modo con Clasificación Habilitada (`useDocumentClassification = true`)
|
|
536
|
-
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:
|
|
537
|
-
- **Pasaportes**: Se omite automáticamente la captura del reverso
|
|
538
|
-
- **Otros documentos**: Requieren captura de ambos lados (frente y reverso)
|
|
539
|
-
- **Botón "Saltar reverso"**: Siempre disponible para permitir flexibilidad manual
|
|
540
|
-
- **Carga optimizada**: El modelo de clasificación se descarga solo cuando es necesario
|
|
541
|
-
|
|
542
|
-
#### Modo Estándar (`useDocumentClassification = false`, por defecto)
|
|
543
|
-
Cuando está deshabilitada, el comportamiento es más liviano y directo:
|
|
544
|
-
- **Todos los documentos**: Siempre se solicita captura del reverso
|
|
545
|
-
- **Botón "Saltar reverso"**: Disponible para omitir manualmente la captura
|
|
546
|
-
- **Sin clasificación**: NO se carga el modelo de clasificación, solo el de detección
|
|
547
|
-
- **Menor uso de ancho de banda**: Solo descarga el modelo de detección (~5MB menos)
|
|
548
|
-
|
|
549
|
-
#### Consideraciones de Rendimiento
|
|
550
|
-
- **Con clasificación deshabilitada**: Carga más rápida y menor uso de datos
|
|
551
|
-
- **Con clasificación habilitada**: Experiencia más inteligente pero requiere descargar modelo adicional
|
|
552
|
-
- **Carga bajo demanda**: El modelo de clasificación se carga solo cuando se captura el primer documento
|
|
553
|
-
|
|
554
478
|
## Requisitos del Sistema
|
|
555
479
|
|
|
556
480
|
- **Navegadores**: Chrome/Edge 88+, Firefox 85+, Safari 14+
|
|
557
481
|
- **Cámara**: Acceso a cámara trasera (móvil) o webcam (escritorio)
|
|
558
|
-
- **Conexión**: Conexión a internet para cargar
|
|
482
|
+
- **Conexión**: Conexión a internet para cargar el modelo ONNX Runtime
|
|
559
483
|
|
|
560
|
-
## Consideraciones de Privacidad
|
|
484
|
+
## Consideraciones de Privacidad
|
|
561
485
|
|
|
562
|
-
### Privacidad
|
|
563
486
|
- Las imágenes se procesan localmente en el navegador
|
|
564
487
|
- No se envían datos a servidores externos
|
|
565
|
-
-
|
|
566
|
-
- La clasificación de documentos se realiza de forma privada y local
|
|
488
|
+
- El modelo de IA se ejecuta completamente en el cliente
|
|
567
489
|
- Las imágenes capturadas solo están disponibles en el contexto de tu aplicación
|
|
568
490
|
|
|
569
|
-
### Optimización de Recursos
|
|
570
|
-
- **Carga condicional**: Solo descarga modelos necesarios según configuración
|
|
571
|
-
- **Modelo de detección**: ~15MB (siempre requerido)
|
|
572
|
-
- **Modelo de clasificación**: ~5MB (solo si `useDocumentClassification = true`)
|
|
573
|
-
- **Lazy loading**: Los modelos se cargan cuando realmente se necesitan
|
|
574
|
-
- **Cache del navegador**: Los modelos se almacenan localmente después de la primera descarga
|
|
575
|
-
|
|
576
491
|
## Desarrollo
|
|
577
492
|
|
|
578
493
|
### Clonar el repositorio
|
|
@@ -336,9 +336,6 @@ var parsePropertyValue = (propValue, propType) => {
|
|
|
336
336
|
if (propType & 2 /* Number */) {
|
|
337
337
|
return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
|
|
338
338
|
}
|
|
339
|
-
if (propType & 1 /* String */) {
|
|
340
|
-
return String(propValue);
|
|
341
|
-
}
|
|
342
339
|
return propValue;
|
|
343
340
|
}
|
|
344
341
|
return propValue;
|
|
@@ -1400,6 +1397,6 @@ exports.h = h;
|
|
|
1400
1397
|
exports.promiseResolve = promiseResolve;
|
|
1401
1398
|
exports.registerInstance = registerInstance;
|
|
1402
1399
|
exports.setNonce = setNonce;
|
|
1403
|
-
//# sourceMappingURL=index-
|
|
1400
|
+
//# sourceMappingURL=index-DGM9-FNg.js.map
|
|
1404
1401
|
|
|
1405
|
-
//# sourceMappingURL=index-
|
|
1402
|
+
//# sourceMappingURL=index-DGM9-FNg.js.map
|