npm - @jaak.ai/stamps - Versions diffs - 1.0.0-dev.9 → 2.0.0-beta.1 - Mend

@jaak.ai/stamps 1.0.0-dev.9 → 2.0.0-beta.1

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,472 +1,552 @@
-# @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)
+[![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)
+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
+- 📋 **Captura doble cara** (frente y reverso) con opción de omitir reverso
+- 🖼 **Doble salida** para cada lado: imagen completa y recorte del documento
+- 🔧 **API programática** para control total del proceso
+- 📱 **Responsive** y compatible con dispositivos móviles
+- ⚡ **Optimización automática** usando ONNX Runtime Web
 ## 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"></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"
+        (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.
+### React
-### Ciclo de Vida del Componente
+#### 1. Instalar el componente
+```bash
+npm install @jaak.ai/stamps
+```
-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.
+#### 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, 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}
+    />
+  );
+});
-### Casos de Uso Comunes
+export default JaakStampsWrapper;
+```
-- **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.
+#### 3. Usar en tu aplicación React
+```jsx
+// App.jsx
+import React, { useRef, useState } from 'react';
+import JaakStampsWrapper from './components/JaakStampsWrapper';
-### Ejemplo de Implementación Básica
+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}
+          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>
+  );
+}
-```html
-<document-detector
-  license-key="TU_CLAVE_DE_LICENCIA">
-</document-detector>
-<!-- O usando la propiedad config -->
-<document-detector
-  config='{"key": "TU_CLAVE_DE_LICENCIA"}'>
-</document-detector>
+export default App;
 ```
-### 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 'READY':
-      console.log('El detector está listo para escanear');
-      break;
-    case 'RECORDING':
-      console.log('La cámara está activa y grabando');
-      break;
-    case 'RESULTS_SUCCESS':
-      console.log('Se han obtenido resultados exitosamente');
-      break;
-    case 'ERROR':
-      console.log('Ha ocurrido un error en el detector');
-      break;
-  }
-});
+## API Reference
-// Escuchar el evento de resultados
-detector.addEventListener('results', (event) => {
-  const resultados = event.detail;
-  console.log('Datos del documento:', resultados);
+### Props/Atributos
-  // 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;
+| 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 |
-    // Hacer algo con las imágenes...
-  }
-});
-```
+### Métodos Públicos
-### Control Programático
+| 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') |
-```javascript
-const detector = document.querySelector('document-detector');
+### Eventos
-// Iniciar escaneo por cámara
-function iniciarEscaneoCamara() {
-  detector.startCameraScan();
-}
+| 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 (modelo ONNX cargado) |
-// Iniciar escaneo desde archivo de imagen
-function escanearDesdeImagen(archivo) {
-  detector.startImageScan(archivo);
-}
+### Tipos de Datos
-// Reiniciar el componente (útil cuando se necesita resetear el estado)
-function reiniciarEscaneo() {
-  detector.restartComponent();
+```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
+  };
 }
-// 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;
+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
 }
 ```
-### Consideraciones Importantes
+## Flujo de Trabajo
-- **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.
+### Flujo Estándar
+1. **Inicialización**: El componente se prepara para la detección
+2. **Inicio de captura**: Se carga el modelo ONNX automáticamente al iniciar la detección
+3. **Captura del frente**: El usuario posiciona el documento y se captura automáticamente
+4. **Captura del reverso**: Se solicita voltear el documento para capturar el reverso
+5. **Completado**: Se emite el evento `captureCompleted` con todas las imágenes
-## Referencia de API
+### Flujo con Precarga (Recomendado)
+1. **Precarga del modelo**: Se llama a `preloadModel()` para cargar el modelo en memoria
+2. **Inicio optimizado**: Al iniciar la captura, se usa el modelo ya cargado
+3. **Captura del frente**: Detección más rápida con el modelo precargado
+4. **Captura del reverso**: Se solicita voltear el documento
+5. **Completado**: Se emite el evento `captureCompleted` con todas las imágenes
-### Propiedades
-> **Nota**: Solo las siguientes propiedades pueden ser configuradas directamente en el componente.
-| Propiedad                | Tipo                                      | Descripción                                |
-|--------------------------|-------------------------------------------|--------------------------------------------|
-| `license-key`            | string                                    | Clave de licencia para el SDK              |
-| `config`                 | { key: string }                           | Configuración del componente (incluye la clave de licencia) |
-### Eventos
+## Requisitos del Sistema
-> **Nota**: Solo los siguientes eventos son emitidos directamente por el componente.
+- **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 el modelo ONNX Runtime
-| Evento               | Detalle                                   | Descripción                                |
-|----------------------|-------------------------------------------|--------------------------------------------|
-| `status`             | StatusDocumentDetector                    | Cambio de estado del detector              |
-| `results`            | any                                       | Resultados del escaneo                     |
+## Consideraciones de Privacidad
-### Métodos
+- Las imágenes se procesan localmente en el navegador
+- No se envían datos a servidores externos
+- El modelo de IA se ejecuta completamente en el cliente
+- Las imágenes capturadas solo están disponibles en el contexto de tu aplicación
-> **Nota**: Solo los siguientes métodos pueden ser llamados directamente en el componente.
+## Desarrollo
-| 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 |
-## Tipos de Objetos de Eventos
+### 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 {
-  INITIALIZING = "INITIALIZING",
-  READY = "READY",
-  RECORDING = "RECORDING",
-  RUNNING = "RUNNING",
-  RESULTS_SUCCESS = "RESULTS_SUCCESS",
-  DETECTION_FAILED = "DETECTION_FAILED",
-  ERROR = "ERROR"
-}
+### 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.