npm - @jaak.ai/stamps - Versions diffs - 1.0.0 → 2.0.0-beta.2 - Mend

@jaak.ai/stamps 1.0.0 → 2.0.0-beta.2

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 (162) hide show

package/README.md CHANGED Viewed

@@ -1,533 +1,607 @@
-# @jaak.ai/stamps
+# Jaak Stamps - Document Detector Web Component
-![Versión NPM](https://img.shields.io/npm/v/@jaak.ai/stamps)
-![Licencia](https://img.shields.io/npm/l/@jaak.ai/stamps)
+Un componente web para la detección y captura automática de documentos de identificación usando visión artificial y redes neuronales.
+## Características
+- 📷 **Detección automática** de documentos de identificación en tiempo real
+- 🎯 **Guía visual** para posicionamiento óptimo del documento
+- 🤖 **Clasificación inteligente** de documentos para determinar si requieren reverso
+- 📋 **Captura adaptativa** - automáticamente detecta si el documento tiene reverso
+- 🖼 **Doble salida** para cada lado: imagen completa y recorte del documento
+- ✂️ **Recorte configurable** con margen personalizable alrededor del documento
+- 🔧 **API programática** para control total del proceso
+- 📱 **Responsive** y compatible con dispositivos móviles
+- ⚡ **Optimización automática** para mejor rendimiento
 ## Instalación
+### NPM
 ```bash
 npm install @jaak.ai/stamps
 ```
+### Yarn
+```bash
+yarn add @jaak.ai/stamps
+```
+### CDN
+```html
+<script type="module" src="https://unpkg.com/@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js"></script>
+```
 ## Uso Básico
-### HTML
+### HTML Vanilla
 ```html
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="utf-8">
-  <title>Ejemplo de Detector de Documentos</title>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@jaak.ai/stamps/dist/stamps/stamps.esm.js"></script>
-  <script nomodule src="https://cdn.jsdelivr.net/npm/@jaak.ai/stamps/dist/stamps/stamps.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script type="module" src="https://unpkg.com/@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js"></script>
 </head>
 <body>
-  <document-detector
-    license-key="TU_CLAVE_DE_LICENCIA">
-  </document-detector>
-  <script>
-    const detector = document.querySelector('document-detector');
-    // Escuchar los eventos emitidos directamente por el componente
-    detector.addEventListener('status', (ev) => {
-      console.log('Estado del detector:', ev.detail);
-    });
-    detector.addEventListener('results', (ev) => {
-      console.log('Resultados del escaneo:', ev.detail);
-    });
-    // Iniciar el escaneo por cámara cuando el componente esté listo
-    setTimeout(() => {
-      detector.startCameraScan();
-    }, 1000);
-  </script>
+    <jaak-stamps id="detector" debug="false" mask-size="90" crop-margin="10" use-document-classification="false"></jaak-stamps>
+    <button onclick="startCapture()">Iniciar Captura</button>
+    <button onclick="stopCapture()">Detener</button>
+    <button onclick="resetCapture()">Reiniciar</button>
+    <script>
+        const detector = document.getElementById('detector');
+        // Escuchar evento de captura completada
+        detector.addEventListener('captureCompleted', (event) => {
+            console.log('Captura completada:', event.detail);
+            // event.detail contiene las imágenes capturadas
+        });
+        // Escuchar evento de componente listo
+        detector.addEventListener('isReady', (event) => {
+            console.log('Componente listo:', event.detail);
+            // event.detail indica si el componente está listo (true/false)
+        });
+        function startCapture() {
+            detector.startCapture();
+        }
+        function stopCapture() {
+            detector.stopCapture();
+        }
+        function resetCapture() {
+            detector.resetCapture();
+        }
+        // Precargar el modelo (opcional - mejora el rendimiento)
+        async function preloadModel() {
+            try {
+                const result = await detector.preloadModel();
+                console.log('Modelo precargado:', result);
+            } catch (error) {
+                console.error('Error al precargar:', error);
+            }
+        }
+        // Obtener imágenes después de la captura
+        async function getImages() {
+            try {
+                const images = await detector.getCapturedImages();
+                console.log('Imágenes capturadas:', images);
+            } catch (error) {
+                console.error('Error:', error.message);
+            }
+        }
+    </script>
 </body>
 </html>
 ```
-### React
-```jsx
-import React, { useEffect, useRef } from 'react';
-import '@jaak.ai/stamps';
-function DocumentDetectorComponent() {
-  const detectorRef = useRef(null);
-  useEffect(() => {
-    const detector = detectorRef.current;
-    // Escuchar los eventos emitidos directamente por el componente
-    const handleStatus = (ev) => {
-      console.log('Estado del detector:', ev.detail);
-    };
-    const handleResults = (ev) => {
-      console.log('Resultados del escaneo:', ev.detail);
-    };
-    detector.addEventListener('status', handleStatus);
-    detector.addEventListener('results', handleResults);
-    // Iniciar el escaneo por cámara cuando el componente esté listo
-    setTimeout(() => {
-      detector.startCameraScan();
-    }, 1000);
-    return () => {
-      detector.removeEventListener('status', handleStatus);
-      detector.removeEventListener('results', handleResults);
-    };
-  }, []);
-  return (
-    <document-detector
-      ref={detectorRef}
-      license-key="TU_CLAVE_DE_LICENCIA"
-    />
-  );
-}
+### Angular
-export default DocumentDetectorComponent;
+#### 1. Instalar el componente
+```bash
+npm install @jaak.ai/stamps
 ```
-### Vue.js
-```vue
-<template>
-  <document-detector
-    ref="detector"
-    :license-key="licenseKey"
-  />
-</template>
-<script>
-import '@jaak.ai/stamps';
-export default {
-  name: 'DocumentDetectorComponent',
-  data() {
-    return {
-      licenseKey: 'TU_CLAVE_DE_LICENCIA'
-    };
-  },
-  methods: {
-    // Métodos para manejar los eventos emitidos directamente por el componente
-    handleStatus(ev) {
-      console.log('Estado del detector:', ev.detail);
-    },
-    handleResults(ev) {
-      console.log('Resultados del escaneo:', ev.detail);
-    }
-  },
-  mounted() {
-    const detector = this.$refs.detector;
-    // Escuchar los eventos emitidos directamente por el componente
-    detector.addEventListener('status', this.handleStatus);
-    detector.addEventListener('results', this.handleResults);
-    // Iniciar el escaneo por cámara cuando el componente esté listo
-    setTimeout(() => {
-      detector.startCameraScan();
-    }, 1000);
-  },
-  beforeUnmount() {
-    const detector = this.$refs.detector;
-    // Eliminar los event listeners
-    detector.removeEventListener('status', this.handleStatus);
-    detector.removeEventListener('results', this.handleResults);
-  }
-};
-</script>
+#### 2. Configurar el módulo (app.module.ts)
+```typescript
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+// Importar el componente web
+import '@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js';
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA] // Permitir elementos personalizados
+})
+export class AppModule { }
 ```
-### Angular
+#### 3. Usar en el componente
 ```typescript
-// Asegúrate de configurar el esquema CUSTOM_ELEMENTS_SCHEMA en tu módulo
-import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
-import '@jaak.ai/stamps';
+// app.component.ts
+import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
 @Component({
-  selector: 'app-document-detector',
+  selector: 'app-root',
   template: `
-    <document-detector
-      #detector
-      [attr.license-key]="licenseKey"
-    ></document-detector>
-  `
+    <div class="container">
+      <h1>Detector de Documentos</h1>
+      <jaak-stamps
+        #detector
+        [debug]="false"
+        [maskSize]="90"
+        [cropMargin]="10"
+        [useDocumentClassification]="false"
+        (captureCompleted)="onCaptureCompleted($event)"
+        (isReady)="onComponentReady($event)">
+      </jaak-stamps>
+      <div class="controls">
+        <button (click)="preloadModel()">Precargar Modelo</button>
+        <button (click)="startCapture()">Iniciar Captura</button>
+        <button (click)="stopCapture()">Detener</button>
+        <button (click)="resetCapture()">Reiniciar</button>
+        <button (click)="getImages()" [disabled]="!isCompleted">Obtener Imágenes</button>
+      </div>
+      <div *ngIf="capturedData" class="results">
+        <h3>Imágenes Capturadas:</h3>
+        <p>Total de imágenes: {{ capturedData.metadata.totalImages }}</p>
+        <img *ngIf="capturedData.front.cropped" [src]="capturedData.front.cropped" alt="Frente">
+        <img *ngIf="capturedData.back.cropped" [src]="capturedData.back.cropped" alt="Reverso">
+      </div>
+    </div>
+  `,
+  styles: [`
+    .container { max-width: 800px; margin: 0 auto; padding: 20px; }
+    .controls { margin: 20px 0; }
+    .controls button { margin: 0 10px; padding: 10px 20px; }
+    .results img { max-width: 300px; margin: 10px; border: 1px solid #ccc; }
+  `]
 })
-export class DocumentDetectorComponent implements AfterViewInit, OnDestroy {
-  @ViewChild('detector') detectorRef: ElementRef;
-  licenseKey = 'TU_CLAVE_DE_LICENCIA';
-  // Métodos para manejar los eventos emitidos directamente por el componente
-  handleStatus(ev) {
-    console.log('Estado del detector:', ev.detail);
+export class AppComponent implements OnInit {
+  @ViewChild('detector', { static: true }) detectorRef!: ElementRef;
+  capturedData: any = null;
+  isCompleted = false;
+  ngOnInit() {
+    // El elemento ya está disponible después de la vista
   }
-  handleResults(ev) {
-    console.log('Resultados del escaneo:', ev.detail);
+  async preloadModel() {
+    try {
+      const result = await this.detectorRef.nativeElement.preloadModel();
+      console.log('Modelo precargado:', result);
+    } catch (error) {
+      console.error('Error al precargar modelo:', error);
+    }
   }
-  ngAfterViewInit() {
-    const detector = this.detectorRef.nativeElement;
-    // Escuchar los eventos emitidos directamente por el componente
-    detector.addEventListener('status', this.handleStatus.bind(this));
-    detector.addEventListener('results', this.handleResults.bind(this));
-    // Iniciar el escaneo por cámara cuando el componente esté listo
-    setTimeout(() => {
-      detector.startCameraScan();
-    }, 1000);
+  async startCapture() {
+    try {
+      await this.detectorRef.nativeElement.startCapture();
+    } catch (error) {
+      console.error('Error al iniciar captura:', error);
+    }
   }
-  ngOnDestroy() {
-    const detector = this.detectorRef.nativeElement;
-    // Eliminar los event listeners
-    detector.removeEventListener('status', this.handleStatus.bind(this));
-    detector.removeEventListener('results', this.handleResults.bind(this));
+  async stopCapture() {
+    await this.detectorRef.nativeElement.stopCapture();
   }
-}
-```
-### Stencil.js
-```tsx
-import { Component, h, State, Listen, Element } from '@stencil/core';
-import '@jaak.ai/stamps';
-@Component({
-  tag: 'app-document-detector',
-  styleUrl: 'app-document-detector.css',
-  shadow: true
-})
-export class AppDocumentDetector {
-  @Element() el: HTMLElement;
-  @State() results: any = null;
-  @State() status: string = '';
-  // Escuchar los eventos emitidos directamente por el componente
-  @Listen('status')
-  handleStatus(ev: CustomEvent) {
-    this.status = ev.detail;
-    console.log('Estado del detector:', this.status);
+  async resetCapture() {
+    await this.detectorRef.nativeElement.resetCapture();
+    this.capturedData = null;
+    this.isCompleted = false;
   }
-  @Listen('results')
-  handleResults(ev: CustomEvent) {
-    this.results = ev.detail;
-    console.log('Resultados del escaneo:', this.results);
+  async getImages() {
+    try {
+      const images = await this.detectorRef.nativeElement.getCapturedImages();
+      console.log('Imágenes obtenidas:', images);
+    } catch (error) {
+      console.error('Error al obtener imágenes:', error);
+    }
   }
-  componentDidLoad() {
-    // Iniciar el escaneo por cámara cuando el componente esté listo
-    const detector = this.el.shadowRoot.querySelector('document-detector');
-    setTimeout(() => {
-      detector.startCameraScan();
-    }, 1000);
+  onCaptureCompleted(event: any) {
+    console.log('Captura completada en Angular:', event.detail);
+    this.capturedData = event.detail;
+    this.isCompleted = true;
   }
-  render() {
-    return (
-      <div>
-        <document-detector
-          license-key="TU_CLAVE_DE_LICENCIA"
-        />
-      </div>
-    );
+  onComponentReady(event: any) {
+    console.log('Componente listo en Angular:', event.detail);
+    // El componente está listo para iniciar detección
   }
 }
 ```
-## Componente Document-Detector
-El componente `document-detector` es el elemento principal de esta librería, diseñado para proporcionar una experiencia completa de escaneo e identificación de documentos en aplicaciones web.
-### Descripción General
-El `document-detector` es un componente web que utiliza tecnología de reconocimiento óptico avanzada para escanear y extraer información de documentos de identidad. Está construido sobre el SDK BlinkID y ofrece una interfaz fácil de usar para integrar capacidades de escaneo de documentos en cualquier aplicación web.
-### Características Principales
-- **Escaneo en tiempo real**: Captura documentos de identidad a través de la cámara del dispositivo.
-- **Procesamiento de imágenes**: Permite cargar imágenes de documentos para su análisis.
-- **Soporte para documentos de doble cara**: Puede procesar ambos lados de documentos como identificaciones o licencias de conducir.
-- **Extracción de datos**: Obtiene automáticamente información como nombre, fecha de nacimiento, número de documento, etc.
-- **Captura de imágenes**: Guarda imágenes del documento, rostro y firma cuando están disponibles.
-- **Interfaz personalizable**: Permite adaptar la apariencia y comportamiento a las necesidades de tu aplicación.
-- **Eventos detallados**: Proporciona eventos para cada etapa del proceso de escaneo.
-- **Modo dinámico**: Optimiza automáticamente el rendimiento según el dispositivo (escritorio o móvil).
-- **Filtros de calidad ajustables**: Controla la rigurosidad de los filtros de desenfoque y brillo.
-- **Traducciones personalizables**: Permite personalizar todos los mensajes mostrados al usuario.
-- **Capacidad de reinicio**: Facilita reiniciar el componente sin necesidad de recargarlo.
-### Ciclo de Vida del Componente
-1. **Inicialización**: El componente carga el SDK y prepara los reconocedores.
-2. **Detección**: Busca un documento en el campo visual de la cámara o en la imagen proporcionada.
-3. **Análisis**: Procesa el documento detectado para extraer la información.
-4. **Resultados**: Emite los datos extraídos y las imágenes capturadas.
-### Casos de Uso Comunes
-- **Verificación de identidad**: Para procesos de onboarding digital o KYC (Know Your Customer).
-- **Registro de usuarios**: Automatización de la captura de datos personales.
-- **Check-in digital**: En hoteles, eventos o instalaciones que requieren identificación.
-- **Servicios financieros**: Para apertura de cuentas o solicitudes de crédito.
-- **Servicios de salud**: Registro de pacientes y verificación de seguros.
-### Ejemplo de Implementación Básica
+### React
-```html
-<document-detector
-  license-key="TU_CLAVE_DE_LICENCIA">
-</document-detector>
-<!-- O usando la propiedad config con opciones avanzadas -->
-<document-detector
-  config='{
-    "key": "TU_CLAVE_DE_LICENCIA",
-    "dynamicMode": true,
-    "strictMode": true,
-    "translation": {
-      "front": "Escanea el frente de tu documento",
-      "back": "Ahora escanea el reverso",
-      "changeSide": "Voltea el documento",
-      "cameraFeedbackBlur": "El documento está borroso",
-      "cameraFeedbackGlare": "Evita el reflejo en el documento"
-    }
-  }'>
-</document-detector>
+#### 1. Instalar el componente
+```bash
+npm install @jaak.ai/stamps
 ```
-### Manejo de Eventos
-```javascript
-const detector = document.querySelector('document-detector');
-// Escuchar el evento de cambio de estado
-detector.addEventListener('status', (event) => {
-  console.log('Estado del detector:', event.detail);
-  // Puedes reaccionar a diferentes estados
-  switch(event.detail) {
-    case 'INITIALIZING':
-      console.log('El detector se está inicializando');
-      break;
-    case 'RECORDING':
-      console.log('La cámara está activa y grabando');
-      break;
-    case 'FRONT_SIDE_DETECTION':
-      console.log('Detectando el frente del documento');
-      break;
-    case 'BACK_SIDE_DETECTION':
-      console.log('Detectando el reverso del documento');
-      break;
-    case 'DOCUMENT_DETECTED':
-      console.log('Documento detectado correctamente');
-      break;
-    case 'CHANGE_SIDE':
-      console.log('Es necesario voltear el documento');
-      break;
-    case 'RESULTS_SUCCESS':
-      console.log('Se han obtenido resultados exitosamente');
-      break;
-    case 'RESULTS_EMPTY':
-      console.log('No se encontraron datos en el documento');
-      break;
-    case 'DETECTION_FAILED':
-      console.log('Falló la detección del documento');
-      break;
-    case 'ERROR':
-      console.log('Ha ocurrido un error en el detector');
-      break;
-  }
+#### 2. Crear componente wrapper (opcional pero recomendado)
+```jsx
+// JaakStampsWrapper.jsx
+import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
+// Importar el web component
+import '@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js';
+const JaakStampsWrapper = forwardRef(({ debug = false, maskSize = 90, cropMargin = 0, useDocumentClassification = false, onCaptureCompleted, onIsReady }, ref) => {
+  const elementRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    preloadModel: () => elementRef.current?.preloadModel(),
+    startCapture: () => elementRef.current?.startCapture(),
+    stopCapture: () => elementRef.current?.stopCapture(),
+    resetCapture: () => elementRef.current?.resetCapture(),
+    getCapturedImages: () => elementRef.current?.getCapturedImages(),
+    getStatus: () => elementRef.current?.getStatus(),
+    skipBackCapture: () => elementRef.current?.skipBackCapture(),
+    isProcessCompleted: () => elementRef.current?.isProcessCompleted()
+  }));
+  useEffect(() => {
+    const element = elementRef.current;
+    const handleCaptureCompleted = (event) => {
+      if (onCaptureCompleted) {
+        onCaptureCompleted(event.detail);
+      }
+    };
+    const handleIsReady = (event) => {
+      if (onIsReady) {
+        onIsReady(event.detail);
+      }
+    };
+    if (element) {
+      element.addEventListener('captureCompleted', handleCaptureCompleted);
+      element.addEventListener('isReady', handleIsReady);
+      return () => {
+        element.removeEventListener('captureCompleted', handleCaptureCompleted);
+        element.removeEventListener('isReady', handleIsReady);
+      };
+    }
+  }, [onCaptureCompleted, onIsReady]);
+  return (
+    <jaak-stamps
+      ref={elementRef}
+      debug={debug}
+      mask-size={maskSize}
+      crop-margin={cropMargin}
+      use-document-classification={useDocumentClassification}
+    />
+  );
 });
-// Escuchar el evento de resultados
-detector.addEventListener('results', (event) => {
-  const resultados = event.detail;
-  console.log('Datos del documento:', resultados);
-  // Acceder a imágenes del documento (si están disponibles)
-  if (resultados.generalData && resultados.generalData.documentImage) {
-    const imagenFrente = resultados.generalData.documentImage.front;
-    const imagenReverso = resultados.generalData.documentImage.back;
-    const imagenRostro = resultados.generalData.documentImage.face;
-    // Hacer algo con las imágenes...
-  }
-});
+export default JaakStampsWrapper;
 ```
-### Control Programático
-```javascript
-const detector = document.querySelector('document-detector');
-// Iniciar escaneo por cámara
-function iniciarEscaneoCamara() {
-  detector.startCameraScan();
-}
-// Iniciar escaneo desde archivo de imagen
-function escanearDesdeImagen(archivo) {
-  detector.startImageScan(archivo);
-}
+#### 3. Usar en tu aplicación React
+```jsx
+// App.jsx
+import React, { useRef, useState } from 'react';
+import JaakStampsWrapper from './components/JaakStampsWrapper';
-// Reiniciar el componente (útil cuando se necesita resetear el estado)
-function reiniciarEscaneo() {
-  detector.restartComponent();
-  // El método restartComponent reinicia internamente el componente y vuelve a iniciar
-  // el escaneo por cámara automáticamente, sin necesidad de llamar a startCameraScan()
+function App() {
+  const detectorRef = useRef(null);
+  const [capturedData, setCapturedData] = useState(null);
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [status, setStatus] = useState(null);
+  const handleCaptureCompleted = (data) => {
+    console.log('Captura completada:', data);
+    setCapturedData(data);
+    setIsCompleted(true);
+  };
+  const handleIsReady = (isReady) => {
+    console.log('Componente listo:', isReady);
+    // El componente está listo para iniciar detección
+  };
+  const preloadModel = async () => {
+    try {
+      const result = await detectorRef.current?.preloadModel();
+      console.log('Modelo precargado:', result);
+    } catch (error) {
+      console.error('Error al precargar modelo:', error);
+    }
+  };
+  const startCapture = async () => {
+    try {
+      await detectorRef.current?.startCapture();
+    } catch (error) {
+      console.error('Error al iniciar captura:', error);
+    }
+  };
+  const stopCapture = async () => {
+    await detectorRef.current?.stopCapture();
+  };
+  const resetCapture = async () => {
+    await detectorRef.current?.resetCapture();
+    setCapturedData(null);
+    setIsCompleted(false);
+  };
+  const getImages = async () => {
+    try {
+      const images = await detectorRef.current?.getCapturedImages();
+      console.log('Imágenes obtenidas:', images);
+    } catch (error) {
+      console.error('Error al obtener imágenes:', error);
+    }
+  };
+  const checkStatus = async () => {
+    const currentStatus = await detectorRef.current?.getStatus();
+    setStatus(currentStatus);
+  };
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>Detector de Documentos - React</h1>
+        <JaakStampsWrapper
+          ref={detectorRef}
+          debug={false}
+          maskSize={90}
+          cropMargin={10}
+          useDocumentClassification={false}
+          onCaptureCompleted={handleCaptureCompleted}
+          onIsReady={handleIsReady}
+        />
+        <div className="controls">
+          <button onClick={preloadModel}>Precargar Modelo</button>
+          <button onClick={startCapture}>Iniciar Captura</button>
+          <button onClick={stopCapture}>Detener</button>
+          <button onClick={resetCapture}>Reiniciar</button>
+          <button onClick={getImages} disabled={!isCompleted}>
+            Obtener Imágenes
+          </button>
+          <button onClick={checkStatus}>Verificar Estado</button>
+        </div>
+        {status && (
+          <div className="status">
+            <h3>Estado Actual:</h3>
+            <p>Video activo: {status.isVideoActive ? 'Sí' : 'No'}</p>
+            <p>Paso: {status.captureStep}</p>
+            <p>Mensaje: {status.statusMessage}</p>
+            <p>Proceso completado: {status.isProcessCompleted ? 'Sí' : 'No'}</p>
+            <p>Modelo precargado: {status.isModelPreloaded ? 'Sí' : 'No'}</p>
+          </div>
+        )}
+        {capturedData && (
+          <div className="results">
+            <h3>Resultados de la Captura:</h3>
+            <p>Total de imágenes: {capturedData.metadata.totalImages}</p>
+            <p>Timestamp: {capturedData.timestamp}</p>
+            {capturedData.front.cropped && (
+              <div>
+                <h4>Frente del Documento:</h4>
+                <img
+                  src={capturedData.front.cropped}
+                  alt="Frente del documento"
+                  style={{ maxWidth: '300px', border: '1px solid #ccc', margin: '10px' }}
+                />
+              </div>
+            )}
+            {capturedData.back.cropped && (
+              <div>
+                <h4>Reverso del Documento:</h4>
+                <img
+                  src={capturedData.back.cropped}
+                  alt="Reverso del documento"
+                  style={{ maxWidth: '300px', border: '1px solid #ccc', margin: '10px' }}
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </header>
+    </div>
+  );
 }
-// Ejemplo de uso con un input de archivo
-document.getElementById('inputImagen').addEventListener('change', (event) => {
-  if (event.target.files && event.target.files[0]) {
-    escanearDesdeImagen(event.target.files[0]);
-  }
-});
-```
-### Personalización de la Apariencia
-El componente puede personalizarse mediante CSS utilizando las partes expuestas a través de Shadow DOM:
-```css
-document-detector::part(mb-camera-video) {
-  border-radius: 16px;
-  border: 2px solid #3498db;
-}
+export default App;
 ```
-### Consideraciones Importantes
-- **Permisos de cámara**: El navegador solicitará permiso para acceder a la cámara del dispositivo.
-- **HTTPS**: Para usar la funcionalidad de cámara, tu aplicación debe servirse a través de HTTPS.
-- **Compatibilidad**: Verifica la compatibilidad con navegadores móviles si tu aplicación está orientada a dispositivos móviles.
-- **Licencia**: Se requiere una clave de licencia válida para el funcionamiento del componente.
-## Referencia de API
+## API Reference
-### Propiedades
+### Props/Atributos
-> **Nota**: Solo las siguientes propiedades pueden ser configuradas directamente en el componente.
+| Propiedad | Tipo | Predeterminado | Descripción |
+|-----------|------|---------------|-------------|
+| `debug` | `boolean` | `false` | Activa el modo debug para mostrar información de depuración |
+| `alignmentTolerance` | `number` | `10` | Tolerancia en píxeles para considerar un lado alineado |
+| `maskSize` | `number` | `90` | Porcentaje del video que ocupará la máscara de detección (50-100) |
+| `cropMargin` | `number` | `0` | Margen en píxeles agregado al recorte del documento (0-100) |
+| `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. |
-| Propiedad                | Tipo                                      | Descripción                                |
-|--------------------------|-------------------------------------------|--------------------------------------------|
-| `license-key`            | string                                    | Clave de licencia para el SDK              |
-| `config`                 | object                                    | Configuración del componente (ver detalle abajo) |
+### Métodos Públicos
-#### Objeto de configuración (`config`)
-| Propiedad                | Tipo                                      | Descripción                                |
-|--------------------------|-------------------------------------------|--------------------------------------------|
-| `key`                    | string                                    | Clave de licencia para el SDK              |
-| `dynamicMode`            | boolean                                   | Cuando está activado, utiliza la variante completa del SDK en escritorio y la ligera en móviles |
-| `strictMode`             | boolean                                   | Controla los filtros de desenfoque y brillo. Cuando está activado, se aplican filtros más estrictos |
-| `translation`            | object                                    | Configuración de traducciones personalizadas (ver detalle abajo) |
-#### Objeto de traducción (`config.translation`)
-| Propiedad                      | Tipo                                      | Descripción                                |
-|--------------------------------|-------------------------------------------|--------------------------------------------|
-| `front`                        | string                                    | Mensaje para escanear el frente del documento |
-| `back`                         | string                                    | Mensaje para escanear el reverso del documento |
-| `changeSide`                   | string                                    | Mensaje para voltear el documento |
-| `adjustAngle`                  | string                                    | Mensaje para ajustar el ángulo del documento |
-| `cameraFeedbackBlur`           | string                                    | Mensaje cuando el documento está borroso |
-| `cameraFeedbackFacePhotoCovered`| string                                   | Mensaje cuando la foto de la cara está cubierta |
-| `cameraFeedbackGlare`          | string                                    | Mensaje cuando hay deslumbramiento en el documento |
-| `cameraFeedbackWrongSide`      | string                                    | Mensaje cuando se muestra el lado incorrecto del documento |
-| `moveCloser`                   | string                                    | Mensaje para acercar el documento |
-| `moveFarther`                  | string                                    | Mensaje para alejar el documento |
+| Método | Retorna | Descripción |
+|--------|---------|-------------|
+| `startCapture()` | `Promise<void>` | Inicia el proceso de detección y captura |
+| `stopCapture()` | `Promise<void>` | Detiene el proceso y libera la cámara |
+| `resetCapture()` | `Promise<void>` | Reinicia el proceso de captura |
+| `preloadModel()` | `Promise<{success: boolean, message?: string, error?: string}>` | Precarga el modelo de detección |
+| `getCapturedImages()` | `Promise<CapturedImages>` | Obtiene las imágenes capturadas (solo después de completar) |
+| `isProcessCompleted()` | `Promise<boolean>` | Verifica si el proceso ha sido completado |
+| `getStatus()` | `Promise<Status>` | Obtiene el estado actual del detector |
+| `skipBackCapture()` | `Promise<void>` | Omite la captura del reverso (solo disponible en paso 'back') |
 ### Eventos
-> **Nota**: Solo los siguientes eventos son emitidos directamente por el componente.
+| Evento | Payload | Descripción |
+|--------|---------|-------------|
+| `captureCompleted` | `CapturedImages` | Se emite cuando se completa el proceso de captura |
+| `isReady` | `boolean` | Se emite cuando el componente está listo para comenzar la detección (modelos cargados) |
-| Evento               | Detalle                                   | Descripción                                |
-|----------------------|-------------------------------------------|--------------------------------------------|
-| `status`             | StatusDocumentDetector                    | Cambio de estado del detector              |
-| `results`            | any                                       | Resultados del escaneo                     |
+### Tipos de Datos
-### Métodos
-> **Nota**: Solo los siguientes métodos pueden ser llamados directamente en el componente.
+```typescript
+interface CapturedImages {
+  front: {
+    fullFrame: string | null;    // Base64 de la imagen completa del frente
+    cropped: string | null;      // Base64 del documento recortado del frente
+  };
+  back: {
+    fullFrame: string | null;    // Base64 de la imagen completa del reverso
+    cropped: string | null;      // Base64 del documento recortado del reverso
+  };
+  timestamp: string;             // ISO timestamp de la captura
+  metadata: {
+    totalImages: number;         // Número total de imágenes capturadas
+    processCompleted: boolean;   // Si el proceso fue completado
+    backCaptureSkipped?: boolean; // Si se omitió la captura del reverso
+  };
+}
-| Método                  | Parámetros                                 | Retorno              | Descripción                               |
-|-------------------------|--------------------------------------------|--------------------- |-------------------------------------------|
-| `setUiState`            | state: "ERROR" \| "LOADING" \| "NONE" \| "SUCCESS" | Promise<void>         | Establecer el estado UI del componente      |
-| `startCameraScan`       | Ninguno                                       | Promise<void>        | Inicia el escaneo utilizando la cámara     |
-| `startImageScan`        | file: File                                    | Promise<void>        | Inicia el escaneo utilizando una imagen    |
-| `startMultiSideImageScan` | firstFile: File, secondFile: File           | Promise<void>        | Inicia el escaneo utilizando dos imágenes para documentos de doble cara |
-| `setUiMessage`          | state: "FEEDBACK_ERROR" \| "FEEDBACK_INFO" \| "FEEDBACK_OK", message: string | Promise<void> | Establecer un mensaje UI |
-| `getProductIntegrationInfo` | Ninguno                                   | Promise<ProductIntegrationInfo> | Obtener información de integración del producto |
-| `restartComponent`      | Ninguno                                       | Promise<void>        | Reinicia el componente y vuelve a iniciar el escaneo por cámara |
+interface Status {
+  isVideoActive: boolean;        // Si la cámara está activa
+  captureStep: 'front' | 'back' | 'completed'; // Paso actual del proceso
+  statusMessage: string;         // Mensaje de estado actual
+  hasImages: boolean;           // Si hay imágenes capturadas
+  isProcessCompleted: boolean;  // Si el proceso está completado
+  isModelPreloaded: boolean;    // Si el modelo está precargado
+}
+```
-## Tipos de Objetos de Eventos
+## Flujo de Trabajo
+### Flujo Estándar (useDocumentClassification = false)
+1. **Inicialización**: El componente se prepara para la detección
+2. **Inicio de captura**: Se carga automáticamente el modelo de detección
+3. **Captura del frente**: El usuario posiciona el documento y se captura automáticamente
+4. **Solicitud de reverso**: Siempre se solicita voltear el documento para capturar el reverso
+5. **Botón "Saltar reverso"**: Disponible para omitir manualmente la captura del reverso
+6. **Completado**: Se emite el evento `captureCompleted` con las imágenes correspondientes
+### Flujo con Clasificación Inteligente (useDocumentClassification = true)
+1. **Inicialización**: El componente se prepara para la detección
+2. **Inicio de captura**: Se cargan automáticamente los modelos de detección y clasificación
+3. **Captura del frente**: El usuario posiciona el documento y se captura automáticamente
+4. **Clasificación automática**: El sistema determina si el documento requiere captura de reverso
+5. **Flujo adaptativo**:
+   - **Si es pasaporte**: Se completa automáticamente el proceso (sin reverso)
+   - **Si es otro documento**: Se solicita voltear el documento para capturar el reverso
+6. **Completado**: Se emite el evento `captureCompleted` con las imágenes correspondientes
+### Flujo con Precarga (Recomendado)
+1. **Precarga de modelos**: Se llama a `preloadModel()` para cargar ambos modelos en memoria
+2. **Inicio optimizado**: Al iniciar la captura, se usan los modelos ya cargados
+3. **Captura del frente**: Detección y clasificación más rápidas con modelos precargados
+4. **Flujo inteligente**:
+   - **Documento sin reverso**: Proceso completado inmediatamente
+   - **Documento con reverso**: Se solicita captura del reverso
+5. **Completado**: Se emite el evento `captureCompleted` con todas las imágenes
+### Clasificación de Documentos
+#### Modo con Clasificación Habilitada (`useDocumentClassification = true`)
+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:
+- **Pasaportes**: Se omite automáticamente la captura del reverso
+- **Otros documentos**: Requieren captura de ambos lados (frente y reverso)
+- **Botón "Saltar reverso"**: Siempre disponible para permitir flexibilidad manual
+- **Carga optimizada**: El modelo de clasificación se descarga solo cuando es necesario
+#### Modo Estándar (`useDocumentClassification = false`, por defecto)
+Cuando está deshabilitada, el comportamiento es más liviano y directo:
+- **Todos los documentos**: Siempre se solicita captura del reverso
+- **Botón "Saltar reverso"**: Disponible para omitir manualmente la captura
+- **Sin clasificación**: NO se carga el modelo de clasificación, solo el de detección
+- **Menor uso de ancho de banda**: Solo descarga el modelo de detección (~5MB menos)
+#### Consideraciones de Rendimiento
+- **Con clasificación deshabilitada**: Carga más rápida y menor uso de datos
+- **Con clasificación habilitada**: Experiencia más inteligente pero requiere descargar modelo adicional
+- **Carga bajo demanda**: El modelo de clasificación se carga solo cuando se captura el primer documento
+## Requisitos del Sistema
+- **Navegadores**: Chrome/Edge 88+, Firefox 85+, Safari 14+
+- **Cámara**: Acceso a cámara trasera (móvil) o webcam (escritorio)
+- **Conexión**: Conexión a internet para cargar los modelos de IA
+## Consideraciones de Privacidad y Rendimiento
+### Privacidad
+- Las imágenes se procesan localmente en el navegador
+- No se envían datos a servidores externos
+- Los modelos de IA (detección y clasificación) se ejecutan completamente en el cliente
+- La clasificación de documentos se realiza de forma privada y local
+- Las imágenes capturadas solo están disponibles en el contexto de tu aplicación
+### Optimización de Recursos
+- **Carga condicional**: Solo descarga modelos necesarios según configuración
+- **Modelo de detección**: ~15MB (siempre requerido)
+- **Modelo de clasificación**: ~5MB (solo si `useDocumentClassification = true`)
+- **Lazy loading**: Los modelos se cargan cuando realmente se necesitan
+- **Cache del navegador**: Los modelos se almacenan localmente después de la primera descarga
+## Desarrollo
+### Clonar el repositorio
+```bash
+git clone [repository-url]
+cd jaak-stamps-webcomponent
+```
-> **Nota**: A continuación se describen los tipos de datos para los eventos emitidos por el componente.
+### Instalar dependencias
+```bash
+npm install
+```
-### StatusDocumentDetector
+### Desarrollo local
+```bash
+npm start
+```
-```typescript
-enum StatusDocumentDetector {
-  RECORDING = "RECORDING",
-  ERROR = "ERROR",
-  RUNNING = "RUNNING",
-  INITIALIZING = "INITIALIZING",
-  FRONT_SIDE_DETECTION = "FRONT_SIDE_DETECTION",
-  BACK_SIDE_DETECTION = "BACK_SIDE_DETECTION",
-  DOCUMENT_NOT_FOUND = "DOCUMENT_NOT_FOUND",
-  DOCUMENT_DETECTED = "DOCUMENT_DETECTED",
-  CHANGE_SIDE = "CHANGE_SIDE",
-  RESULTS_SUCCESS = "RESULTS_SUCCESS",
-  RESULTS_EMPTY = "RESULTS_EMPTY",
-  DETECTION_FAILED = "DETECTION_FAILED"
-}
+### Construir para producción
+```bash
+npm run build
 ```
-### Resultados (results)
+### Ejecutar tests
+```bash
+npm test
+```
-El evento `results` emite un objeto con los datos extraídos del documento escaneado, que incluye:
+## Soporte
-```typescript
-interface DocumentData {
-  generalData: {
-    type: string;
-    nationality: string;
-    name: string;
-    surname: string;
-    address: string;
-    birthDate: string;
-    gender: string;
-    documentImage: {
-      frontFull: string; // Imagen base64
-      backFull: string; // Imagen base64
-      front: string; // Imagen base64
-      back: string; // Imagen base64
-      signature: string; // Imagen base64
-      face: string; // Imagen base64
-    }
-  };
-  mechanicalReadingZone: string;
-  specificData: Array<{
-    label: string;
-    value: string;
-  }>;
-}
-```
+Para reportar bugs o solicitar características, por favor crea un issue en el repositorio del proyecto.
 ## Licencia
-MIT
+MIT License - ver archivo LICENSE para detalles.