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

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.
Files changed (36) hide show
  1. package/README.md +76 -18
  2. package/dist/cjs/{index-DGM9-FNg.js → index-BfhtOB0D.js} +5 -2
  3. package/dist/cjs/index-BfhtOB0D.js.map +1 -0
  4. package/dist/cjs/jaak-stamps-webcomponent.cjs.js +2 -2
  5. package/dist/cjs/jaak-stamps.cjs.entry.js +515 -37
  6. package/dist/cjs/jaak-stamps.cjs.entry.js.map +1 -1
  7. package/dist/cjs/jaak-stamps.entry.cjs.js.map +1 -1
  8. package/dist/cjs/loader.cjs.js +2 -2
  9. package/dist/collection/components/my-component/my-component.css +227 -0
  10. package/dist/collection/components/my-component/my-component.js +637 -36
  11. package/dist/collection/components/my-component/my-component.js.map +1 -1
  12. package/dist/components/index.js +3 -0
  13. package/dist/components/index.js.map +1 -1
  14. package/dist/components/jaak-stamps.js +525 -37
  15. package/dist/components/jaak-stamps.js.map +1 -1
  16. package/dist/esm/{index-DqoVMnc7.js → index-BP1Q4KOg.js} +5 -2
  17. package/dist/esm/index-BP1Q4KOg.js.map +1 -0
  18. package/dist/esm/jaak-stamps-webcomponent.js +3 -3
  19. package/dist/esm/jaak-stamps.entry.js +515 -37
  20. package/dist/esm/jaak-stamps.entry.js.map +1 -1
  21. package/dist/esm/loader.js +3 -3
  22. package/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js +1 -1
  23. package/dist/jaak-stamps-webcomponent/jaak-stamps.entry.esm.js.map +1 -1
  24. package/dist/jaak-stamps-webcomponent/p-14eb13d8.entry.js +2 -0
  25. package/dist/jaak-stamps-webcomponent/p-14eb13d8.entry.js.map +1 -0
  26. package/dist/jaak-stamps-webcomponent/p-BP1Q4KOg.js +3 -0
  27. package/dist/jaak-stamps-webcomponent/p-BP1Q4KOg.js.map +1 -0
  28. package/dist/types/components/my-component/my-component.d.ts +48 -0
  29. package/dist/types/components.d.ts +34 -0
  30. package/package.json +1 -1
  31. package/dist/cjs/index-DGM9-FNg.js.map +0 -1
  32. package/dist/esm/index-DqoVMnc7.js.map +0 -1
  33. package/dist/jaak-stamps-webcomponent/p-DqoVMnc7.js +0 -3
  34. package/dist/jaak-stamps-webcomponent/p-DqoVMnc7.js.map +0 -1
  35. package/dist/jaak-stamps-webcomponent/p-dd6cc14e.entry.js +0 -2
  36. package/dist/jaak-stamps-webcomponent/p-dd6cc14e.entry.js.map +0 -1
package/README.md CHANGED
@@ -1,18 +1,18 @@
1
1
  # Jaak Stamps - Document Detector Web Component
2
2
 
3
- [![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
4
-
5
3
  Un componente web para la detección y captura automática de documentos de identificación usando visión artificial y redes neuronales.
6
4
 
7
5
  ## Características
8
6
 
9
7
  - 📷 **Detección automática** de documentos de identificación en tiempo real
10
8
  - 🎯 **Guía visual** para posicionamiento óptimo del documento
11
- - 📋 **Captura doble cara** (frente y reverso) con opción de omitir reverso
9
+ - 🤖 **Clasificación inteligente** de documentos para determinar si requieren reverso
10
+ - 📋 **Captura adaptativa** - automáticamente detecta si el documento tiene reverso
12
11
  - 🖼 **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** usando ONNX Runtime Web
15
+ - ⚡ **Optimización automática** para mejor rendimiento
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"></jaak-stamps>
46
+ <jaak-stamps id="detector" debug="false" mask-size="90" crop-margin="10" use-document-classification="false"></jaak-stamps>
47
47
 
48
48
  <button onclick="startCapture()">Iniciar Captura</button>
49
49
  <button onclick="stopCapture()">Detener</button>
@@ -140,6 +140,9 @@ import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
140
140
  <jaak-stamps
141
141
  #detector
142
142
  [debug]="false"
143
+ [maskSize]="90"
144
+ [cropMargin]="10"
145
+ [useDocumentClassification]="false"
143
146
  (captureCompleted)="onCaptureCompleted($event)"
144
147
  (isReady)="onComponentReady($event)">
145
148
  </jaak-stamps>
@@ -241,7 +244,7 @@ import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react
241
244
  // Importar el web component
242
245
  import '@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js';
243
246
 
244
- const JaakStampsWrapper = forwardRef(({ debug = false, onCaptureCompleted, onIsReady }, ref) => {
247
+ const JaakStampsWrapper = forwardRef(({ debug = false, maskSize = 90, cropMargin = 0, useDocumentClassification = false, onCaptureCompleted, onIsReady }, ref) => {
245
248
  const elementRef = useRef(null);
246
249
 
247
250
  useImperativeHandle(ref, () => ({
@@ -285,6 +288,9 @@ const JaakStampsWrapper = forwardRef(({ debug = false, onCaptureCompleted, onIsR
285
288
  <jaak-stamps
286
289
  ref={elementRef}
287
290
  debug={debug}
291
+ mask-size={maskSize}
292
+ crop-margin={cropMargin}
293
+ use-document-classification={useDocumentClassification}
288
294
  />
289
295
  );
290
296
  });
@@ -364,6 +370,9 @@ function App() {
364
370
  <JaakStampsWrapper
365
371
  ref={detectorRef}
366
372
  debug={false}
373
+ maskSize={90}
374
+ cropMargin={10}
375
+ useDocumentClassification={false}
367
376
  onCaptureCompleted={handleCaptureCompleted}
368
377
  onIsReady={handleIsReady}
369
378
  />
@@ -435,6 +444,10 @@ export default App;
435
444
  |-----------|------|---------------|-------------|
436
445
  | `debug` | `boolean` | `false` | Activa el modo debug para mostrar información de depuración |
437
446
  | `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) |
438
451
 
439
452
  ### Métodos Públicos
440
453
 
@@ -448,13 +461,15 @@ export default App;
448
461
  | `isProcessCompleted()` | `Promise<boolean>` | Verifica si el proceso ha sido completado |
449
462
  | `getStatus()` | `Promise<Status>` | Obtiene el estado actual del detector |
450
463
  | `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') |
451
466
 
452
467
  ### Eventos
453
468
 
454
469
  | Evento | Payload | Descripción |
455
470
  |--------|---------|-------------|
456
471
  | `captureCompleted` | `CapturedImages` | Se emite cuando se completa el proceso de captura |
457
- | `isReady` | `boolean` | Se emite cuando el componente está listo para comenzar la detección (modelo ONNX cargado) |
472
+ | `isReady` | `boolean` | Se emite cuando el componente está listo para comenzar la detección (modelos cargados) |
458
473
 
459
474
  ### Tipos de Datos
460
475
 
@@ -488,33 +503,76 @@ interface Status {
488
503
 
489
504
  ## Flujo de Trabajo
490
505
 
491
- ### Flujo Estándar
506
+ ### Flujo Estándar (useDocumentClassification = false)
492
507
  1. **Inicialización**: El componente se prepara para la detección
493
- 2. **Inicio de captura**: Se carga el modelo ONNX automáticamente al iniciar la detección
508
+ 2. **Inicio de captura**: Se carga automáticamente el modelo de detección
494
509
  3. **Captura del frente**: El usuario posiciona el documento y se captura automáticamente
495
- 4. **Captura del reverso**: Se solicita voltear el documento para capturar el reverso
496
- 5. **Completado**: Se emite el evento `captureCompleted` con todas las imágenes
510
+ 4. **Solicitud de reverso**: Siempre se solicita voltear el documento para capturar el reverso
511
+ 5. **Botón "Saltar reverso"**: Disponible para omitir manualmente la captura del reverso
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
497
523
 
498
524
  ### Flujo con Precarga (Recomendado)
499
- 1. **Precarga del modelo**: Se llama a `preloadModel()` para cargar el modelo en memoria
500
- 2. **Inicio optimizado**: Al iniciar la captura, se usa el modelo ya cargado
501
- 3. **Captura del frente**: Detección más rápida con el modelo precargado
502
- 4. **Captura del reverso**: Se solicita voltear el documento
525
+ 1. **Precarga de modelos**: Se llama a `preloadModel()` para cargar ambos modelos en memoria
526
+ 2. **Inicio optimizado**: Al iniciar la captura, se usan los modelos ya cargados
527
+ 3. **Captura del frente**: Detección y clasificación más rápidas con modelos precargados
528
+ 4. **Flujo inteligente**:
529
+ - **Documento sin reverso**: Proceso completado inmediatamente
530
+ - **Documento con reverso**: Se solicita captura del reverso
503
531
  5. **Completado**: Se emite el evento `captureCompleted` con todas las imágenes
504
532
 
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
+
505
554
  ## Requisitos del Sistema
506
555
 
507
556
  - **Navegadores**: Chrome/Edge 88+, Firefox 85+, Safari 14+
508
557
  - **Cámara**: Acceso a cámara trasera (móvil) o webcam (escritorio)
509
- - **Conexión**: Conexión a internet para cargar el modelo ONNX Runtime
558
+ - **Conexión**: Conexión a internet para cargar los modelos de IA
510
559
 
511
- ## Consideraciones de Privacidad
560
+ ## Consideraciones de Privacidad y Rendimiento
512
561
 
562
+ ### Privacidad
513
563
  - Las imágenes se procesan localmente en el navegador
514
564
  - No se envían datos a servidores externos
515
- - El modelo de IA se ejecuta completamente en el cliente
565
+ - Los modelos de IA (detección y clasificación) se ejecutan completamente en el cliente
566
+ - La clasificación de documentos se realiza de forma privada y local
516
567
  - Las imágenes capturadas solo están disponibles en el contexto de tu aplicación
517
568
 
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
+
518
576
  ## Desarrollo
519
577
 
520
578
  ### Clonar el repositorio
package/dist/cjs/{index-DGM9-FNg.js → index-BfhtOB0D.js} RENAMED
@@ -336,6 +336,9 @@ 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
+ }
339
342
  return propValue;
340
343
  }
341
344
  return propValue;
@@ -1397,6 +1400,6 @@ exports.h = h;
1397
1400
  exports.promiseResolve = promiseResolve;
1398
1401
  exports.registerInstance = registerInstance;
1399
1402
  exports.setNonce = setNonce;
1400
- //# sourceMappingURL=index-DGM9-FNg.js.map
1403
+ //# sourceMappingURL=index-BfhtOB0D.js.map
1401
1404
 
1402
- //# sourceMappingURL=index-DGM9-FNg.js.map
1405
+ //# sourceMappingURL=index-BfhtOB0D.js.map