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

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

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

package/README.md CHANGED Viewed

@@ -1,20 +1,20 @@
 # Jaak Stamps - Document Detector Web Component
-Un componente web para la detección y captura automática de documentos de identificación usando visión artificial y redes neuronales.
+A web component for automatic detection and capture of identification documents using computer vision.
-## Características
+## Features
-- 📷 **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
+- Real-time automatic document detection
+- Visual guide for optimal document positioning
+- Intelligent document classification to determine if back capture is required
+- Adaptive capture - automatically detects if document requires back side
+- Dual output for each side: full frame and cropped document
+- Configurable cropping with customizable margin around document
+- Programmatic API for complete process control
+- Responsive and mobile device compatible
+- Automatic optimization for better performance
-## Instalación
+## Installation
 ### NPM
 ```bash
@@ -31,7 +31,7 @@ yarn add @jaak.ai/stamps
 <script type="module" src="https://unpkg.com/@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js"></script>
 ```
-## Uso Básico
+## Basic Usage
 ### HTML Vanilla
@@ -43,25 +43,25 @@ yarn add @jaak.ai/stamps
     <script type="module" src="https://unpkg.com/@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js"></script>
 </head>
 <body>
-    <jaak-stamps id="detector" debug="false" mask-size="90" crop-margin="10" use-document-classification="false"></jaak-stamps>
+    <jaak-stamps id="detector" debug="false" mask-size="80" crop-margin="20" capture-delay="1000" use-document-classification="false"></jaak-stamps>
-    <button onclick="startCapture()">Iniciar Captura</button>
-    <button onclick="stopCapture()">Detener</button>
-    <button onclick="resetCapture()">Reiniciar</button>
+    <button onclick="startCapture()">Start Capture</button>
+    <button onclick="stopCapture()">Stop</button>
+    <button onclick="resetCapture()">Reset</button>
     <script>
         const detector = document.getElementById('detector');
-        // Escuchar evento de captura completada
+        // Listen for capture completed event
         detector.addEventListener('captureCompleted', (event) => {
-            console.log('Captura completada:', event.detail);
-            // event.detail contiene las imágenes capturadas
+            console.log('Capture completed:', event.detail);
+            // event.detail contains the captured images
         });
-        // Escuchar evento de componente listo
+        // Listen for component ready event
         detector.addEventListener('isReady', (event) => {
-            console.log('Componente listo:', event.detail);
-            // event.detail indica si el componente está listo (true/false)
+            console.log('Component ready:', event.detail);
+            // event.detail indicates if the component is ready (true/false)
         });
         function startCapture() {
@@ -76,21 +76,21 @@ yarn add @jaak.ai/stamps
             detector.resetCapture();
         }
-        // Precargar el modelo (opcional - mejora el rendimiento)
+        // Preload model (optional - improves performance)
         async function preloadModel() {
             try {
                 const result = await detector.preloadModel();
-                console.log('Modelo precargado:', result);
+                console.log('Model preloaded:', result);
             } catch (error) {
-                console.error('Error al precargar:', error);
+                console.error('Error preloading:', error);
             }
         }
-        // Obtener imágenes después de la captura
+        // Get images after capture
         async function getImages() {
             try {
                 const images = await detector.getCapturedImages();
-                console.log('Imágenes capturadas:', images);
+                console.log('Captured images:', images);
             } catch (error) {
                 console.error('Error:', error.message);
             }
@@ -102,18 +102,18 @@ yarn add @jaak.ai/stamps
 ### Angular
-#### 1. Instalar el componente
+#### 1. Install the component
 ```bash
 npm install @jaak.ai/stamps
 ```
-#### 2. Configurar el módulo (app.module.ts)
+#### 2. Configure the module (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 the web component
 import '@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js';
 @NgModule({
@@ -121,12 +121,12 @@ import '@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.e
   imports: [BrowserModule],
   providers: [],
   bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA] // Permitir elementos personalizados
+  schemas: [CUSTOM_ELEMENTS_SCHEMA] // Allow custom elements
 })
 export class AppModule { }
 ```
-#### 3. Usar en el componente
+#### 3. Use in the component
 ```typescript
 // app.component.ts
 import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
@@ -135,31 +135,31 @@ import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
   selector: 'app-root',
   template: `
     <div class="container">
-      <h1>Detector de Documentos</h1>
+      <h1>Document Detector</h1>
       <jaak-stamps
         #detector
         [debug]="false"
-        [maskSize]="90"
-        [cropMargin]="10"
+        [maskSize]="80"
+        [cropMargin]="20"
         [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>
+        <button (click)="preloadModel()">Preload Model</button>
+        <button (click)="startCapture()">Start Capture</button>
+        <button (click)="stopCapture()">Stop</button>
+        <button (click)="resetCapture()">Reset</button>
+        <button (click)="getImages()" [disabled]="!isCompleted">Get Images</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">
+        <h3>Captured Images:</h3>
+        <p>Total images: {{ capturedData.metadata.totalImages }}</p>
+        <img *ngIf="capturedData.front.cropped" [src]="capturedData.front.cropped" alt="Front">
+        <img *ngIf="capturedData.back.cropped" [src]="capturedData.back.cropped" alt="Back">
       </div>
     </div>
   `,
@@ -177,15 +177,15 @@ export class AppComponent implements OnInit {
   isCompleted = false;
   ngOnInit() {
-    // El elemento ya está disponible después de la vista
+    // The element is already available after the view
   }
   async preloadModel() {
     try {
       const result = await this.detectorRef.nativeElement.preloadModel();
-      console.log('Modelo precargado:', result);
+      console.log('Model preloaded:', result);
     } catch (error) {
-      console.error('Error al precargar modelo:', error);
+      console.error('Error preloading model:', error);
     }
   }
@@ -193,7 +193,7 @@ export class AppComponent implements OnInit {
     try {
       await this.detectorRef.nativeElement.startCapture();
     } catch (error) {
-      console.error('Error al iniciar captura:', error);
+      console.error('Error starting capture:', error);
     }
   }
@@ -210,41 +210,41 @@ export class AppComponent implements OnInit {
   async getImages() {
     try {
       const images = await this.detectorRef.nativeElement.getCapturedImages();
-      console.log('Imágenes obtenidas:', images);
+      console.log('Images obtained:', images);
     } catch (error) {
-      console.error('Error al obtener imágenes:', error);
+      console.error('Error getting images:', error);
     }
   }
   onCaptureCompleted(event: any) {
-    console.log('Captura completada en Angular:', event.detail);
+    console.log('Capture completed in Angular:', event.detail);
     this.capturedData = event.detail;
     this.isCompleted = true;
   }
   onComponentReady(event: any) {
-    console.log('Componente listo en Angular:', event.detail);
-    // El componente está listo para iniciar detección
+    console.log('Component ready in Angular:', event.detail);
+    // The component is ready to start detection
   }
 }
 ```
 ### React
-#### 1. Instalar el componente
+#### 1. Install the component
 ```bash
 npm install @jaak.ai/stamps
 ```
-#### 2. Crear componente wrapper (opcional pero recomendado)
+#### 2. Create wrapper component (optional but recommended)
 ```jsx
 // JaakStampsWrapper.jsx
 import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
-// Importar el web component
+// Import the 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 JaakStampsWrapper = forwardRef(({ debug = false, maskSize = 80, cropMargin = 20, useDocumentClassification = false, onCaptureCompleted, onIsReady }, ref) => {
   const elementRef = useRef(null);
   useImperativeHandle(ref, () => ({
@@ -298,7 +298,7 @@ const JaakStampsWrapper = forwardRef(({ debug = false, maskSize = 90, cropMargin
 export default JaakStampsWrapper;
 ```
-#### 3. Usar en tu aplicación React
+#### 3. Use in your React application
 ```jsx
 // App.jsx
 import React, { useRef, useState } from 'react';
@@ -311,22 +311,22 @@ function App() {
   const [status, setStatus] = useState(null);
   const handleCaptureCompleted = (data) => {
-    console.log('Captura completada:', data);
+    console.log('Capture completed:', data);
     setCapturedData(data);
     setIsCompleted(true);
   };
   const handleIsReady = (isReady) => {
-    console.log('Componente listo:', isReady);
-    // El componente está listo para iniciar detección
+    console.log('Component ready:', isReady);
+    // The component is ready to start detection
   };
   const preloadModel = async () => {
     try {
       const result = await detectorRef.current?.preloadModel();
-      console.log('Modelo precargado:', result);
+      console.log('Model preloaded:', result);
     } catch (error) {
-      console.error('Error al precargar modelo:', error);
+      console.error('Error preloading model:', error);
     }
   };
@@ -334,7 +334,7 @@ function App() {
     try {
       await detectorRef.current?.startCapture();
     } catch (error) {
-      console.error('Error al iniciar captura:', error);
+      console.error('Error starting capture:', error);
     }
   };
@@ -351,9 +351,9 @@ function App() {
   const getImages = async () => {
     try {
       const images = await detectorRef.current?.getCapturedImages();
-      console.log('Imágenes obtenidas:', images);
+      console.log('Images obtained:', images);
     } catch (error) {
-      console.error('Error al obtener imágenes:', error);
+      console.error('Error getting images:', error);
     }
   };
@@ -365,52 +365,51 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <h1>Detector de Documentos - React</h1>
+        <h1>Document Detector - React</h1>
         <JaakStampsWrapper
           ref={detectorRef}
           debug={false}
-          maskSize={90}
-          cropMargin={10}
+          maskSize={80}
+          cropMargin={20}
           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={preloadModel}>Preload Model</button>
+          <button onClick={startCapture}>Start Capture</button>
+          <button onClick={stopCapture}>Stop</button>
+          <button onClick={resetCapture}>Reset</button>
           <button onClick={getImages} disabled={!isCompleted}>
-            Obtener Imágenes
+            Get Images
           </button>
-          <button onClick={checkStatus}>Verificar Estado</button>
+          <button onClick={checkStatus}>Check Status</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>
+            <h3>Current Status:</h3>
+            <p>Video active: {status.isVideoActive ? 'Yes' : 'No'}</p>
+            <p>Step: {status.captureStep}</p>
+            <p>Process completed: {status.isProcessCompleted ? 'Yes' : 'No'}</p>
+            <p>Model preloaded: {status.isModelPreloaded ? 'Yes' : 'No'}</p>
           </div>
         )}
         {capturedData && (
           <div className="results">
-            <h3>Resultados de la Captura:</h3>
-            <p>Total de imágenes: {capturedData.metadata.totalImages}</p>
+            <h3>Capture Results:</h3>
+            <p>Total images: {capturedData.metadata.totalImages}</p>
             <p>Timestamp: {capturedData.timestamp}</p>
             {capturedData.front.cropped && (
               <div>
-                <h4>Frente del Documento:</h4>
+                <h4>Document Front:</h4>
                 <img
                   src={capturedData.front.cropped}
-                  alt="Frente del documento"
+                  alt="Document front"
                   style={{ maxWidth: '300px', border: '1px solid #ccc', margin: '10px' }}
                 />
               </div>
@@ -418,10 +417,10 @@ function App() {
             {capturedData.back.cropped && (
               <div>
-                <h4>Reverso del Documento:</h4>
+                <h4>Document Back:</h4>
                 <img
                   src={capturedData.back.cropped}
-                  alt="Reverso del documento"
+                  alt="Document back"
                   style={{ maxWidth: '300px', border: '1px solid #ccc', margin: '10px' }}
                 />
               </div>
@@ -438,170 +437,175 @@ export default App;
 ## API Reference
-### Props/Atributos
+### Properties/Attributes
-| 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. |
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `debug` | `boolean` | `false` | Enables debug mode to show debugging information |
+| `alignmentTolerance` | `number` | `15` | Tolerance in pixels to consider a side aligned |
+| `maskSize` | `number` | `80` | Percentage of video that the detection mask will occupy (50-100) |
+| `cropMargin` | `number` | `20` | Margin in pixels added to the document crop (0-100) |
+| `captureDelay` | `number` | `1500` | Time in milliseconds the document must remain in position before automatically capturing (0-10000) |
+| `useDocumentClassification` | `boolean` | `false` | Enables automatic document classification to determine if back capture is required. Only loads the classification model when enabled. |
+| `preferredCamera` | `'auto' \| 'front' \| 'back'` | `'auto'` | Defines which camera to use: `'auto'` (automatic based on device), `'front'` (front camera), `'back'` (back camera) |
-### Métodos Públicos
+### Public Methods
-| Método | Retorna | Descripción |
+| Method | Returns | Description |
 |--------|---------|-------------|
-| `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
-| 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) |
-### Tipos de Datos
+| `startCapture()` | `Promise<void>` | Starts the detection and capture process |
+| `stopCapture()` | `Promise<void>` | Stops the process and releases the camera |
+| `resetCapture()` | `Promise<void>` | Resets the capture process |
+| `preloadModel()` | `Promise<{success: boolean, message?: string, error?: string}>` | Preloads the detection model |
+| `getCapturedImages()` | `Promise<CapturedImages>` | Gets the captured images (only after completion) |
+| `isProcessCompleted()` | `Promise<boolean>` | Checks if the process has been completed |
+| `getStatus()` | `Promise<Status>` | Gets the current detector status |
+| `skipBackCapture()` | `Promise<void>` | Skips back capture (only available in 'back' step) |
+| `getCameraInfo()` | `Promise<CameraInfo>` | Gets detailed information about available cameras |
+| `setPreferredCamera(camera)` | `Promise<{success: boolean, selectedCamera: string, availableCameras: number}>` | Sets the preferred camera ('auto', 'front', 'back') |
+| `setCaptureDelay(delay)` | `Promise<{success: boolean, captureDelay: number}>` | Sets the wait time before automatically capturing (0-10000ms) |
+| `getCaptureDelay()` | `Promise<number>` | Gets the current wait time configured for automatic capture |
+| `setTorchEnabled(enabled)` | `Promise<{success: boolean, enabled: boolean}>` | Enables or disables the camera torch/flash |
+| `focusAtPoint(x, y)` | `Promise<{success: boolean, coordinates: {x: number, y: number}}>` | Focuses the camera at specific coordinates |
+### Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `captureCompleted` | `CapturedImages` | Emitted when the capture process is completed |
+| `isReady` | `boolean` | Emitted when the component is ready to start detection (models loaded) |
+### Data Types
 ```typescript
 interface CapturedImages {
   front: {
-    fullFrame: string | null;    // Base64 de la imagen completa del frente
-    cropped: string | null;      // Base64 del documento recortado del frente
+    fullFrame: string | null;    // Base64 of the complete front image
+    cropped: string | null;      // Base64 of the cropped front document
   };
   back: {
-    fullFrame: string | null;    // Base64 de la imagen completa del reverso
-    cropped: string | null;      // Base64 del documento recortado del reverso
+    fullFrame: string | null;    // Base64 of the complete back image
+    cropped: string | null;      // Base64 of the cropped back document
   };
-  timestamp: string;             // ISO timestamp de la captura
+  timestamp: string;             // ISO timestamp of capture
   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
+    totalImages: number;         // Total number of captured images
+    processCompleted: boolean;   // If the process was completed
+    backCaptureSkipped?: boolean; // If back capture was skipped
   };
 }
 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
+  isVideoActive: boolean;        // If the camera is active
+  captureStep: 'front' | 'back' | 'completed'; // Current process step
+  hasImages: boolean;           // If there are captured images
+  isProcessCompleted: boolean;  // If the process is completed
+  isModelPreloaded: boolean;    // If the model is preloaded
 }
 ```
-## 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
+## Workflow
+### Standard Flow (useDocumentClassification = false)
+1. **Initialization**: Component prepares for detection
+2. **Start capture**: Detection model loads automatically
+3. **Front capture**: User positions document and it captures automatically
+4. **Back request**: Always requests to flip document for back capture
+5. **Skip back button**: Available to manually skip back capture
+6. **Completed**: Emits `captureCompleted` event with corresponding images
+### Smart Classification Flow (useDocumentClassification = true)
+1. **Initialization**: Component prepares for detection
+2. **Start capture**: Detection and classification models load automatically
+3. **Front capture**: User positions document and it captures automatically
+4. **Automatic classification**: System determines if document requires back capture
+5. **Adaptive flow**:
+   - **If passport**: Process completes automatically (no back side)
+   - **If other document**: Requests to flip document for back capture
+6. **Completed**: Emits `captureCompleted` event with corresponding images
+### Preload Flow (Recommended)
+1. **Model preload**: Call `preloadModel()` to load models in memory
+2. **Optimized start**: When starting capture, uses already loaded models
+3. **Front capture**: Faster detection and classification with preloaded models
+4. **Smart flow**:
+   - **Document without back**: Process completed immediately
+   - **Document with back**: Requests back capture
+5. **Completed**: Emits `captureCompleted` event with all images
+### Document Classification
+#### Classification Enabled Mode (`useDocumentClassification = true`)
+When enabled, the system automatically determines if the document requires back capture:
+- **Passports**: Automatically skips back capture
+- **Other documents**: Require capture of both sides (front and back)
+- **Skip back button**: Always available for manual flexibility
+- **Optimized loading**: Classification model downloads only when needed
+#### Standard Mode (`useDocumentClassification = false`, default)
+When disabled, behavior is lighter and more direct:
+- **All documents**: Always requests back capture
+- **Skip back button**: Available to manually skip capture
+- **No classification**: Only loads detection model
+- **Lower bandwidth usage**: Downloads only detection model
+#### Performance Considerations
+- **Classification disabled**: Faster loading and lower data usage
+- **Classification enabled**: Smarter experience but requires additional model download
+- **On-demand loading**: Classification model loads only when first document is captured
+## System Requirements
+- **Browsers**: Chrome/Edge 88+, Firefox 85+, Safari 14+
+- **Camera**: Access to rear camera (mobile) or webcam (desktop)
+- **Connection**: Internet connection to load detection models
+## Privacy and Performance Considerations
+### Privacy
+- Images are processed locally in the browser
+- No data is sent to external servers
+- All processing runs completely on the client side
+- Document classification is performed privately and locally
+- Captured images are only available within your application context
+### Resource Optimization
+- **Conditional loading**: Only downloads necessary models based on configuration
+- **Lazy loading**: Models load when actually needed
+- **Browser cache**: Models are stored locally after first download
+## Development
+### Clone the repository
 ```bash
 git clone [repository-url]
 cd jaak-stamps-webcomponent
 ```
-### Instalar dependencias
+### Install dependencies
 ```bash
 npm install
 ```
-### Desarrollo local
+### Local development
 ```bash
 npm start
 ```
-### Construir para producción
+### Build for production
 ```bash
 npm run build
 ```
-### Ejecutar tests
+### Run tests
 ```bash
 npm test
 ```
-## Soporte
+## Support
-Para reportar bugs o solicitar características, por favor crea un issue en el repositorio del proyecto.
+To report bugs or request features, please create an issue in the project repository.
-## Licencia
+## License
-MIT License - ver archivo LICENSE para detalles.
+MIT License - see LICENSE file for details.