FaceApp · Reconocimiento facial asistido por CompreFace

---

Tabla de contenidos

1. Resumen del stack
2. Arquitectura y flujo de datos
3. Requisitos previos
4. Configuración rápida
5. Variables de entorno
6. Scripts habituales
7. API interna
8. Frontend
9. Workflows recomendados
10. Roadmap

---

Pruébalo Aquí ✈️

Sistema de Reconocimiento Facial

Primero ingrese una foto en modo New y luego reconozca su cara en modo Recognize

---

Resumen del stack

Componente	Descripción
⚙️ Backend	expone /capture y /recognize contra CompreFace
🧠 CompreFace	orquestado vía 🐳 Docker desde CompreFaceDok
⚛️ Frontend	interfaz WebCam en FrontEnd/faceApp
💾 Almacenamiento temporal	imágenes intermedias en TempImage/ e image/

---

Arquitectura y flujo de datos

flowchart LR
    A[WebCam en navegador] -->|Foto base64| B[/Backend Node.js/]
    B -->|Forwarding| C[CompreFace API]
    C -->|Resultado JSON| B -->|payload normalizado| A

Loading

1. WebCapture obtiene frames con react-webcam.
2. Se dispara /capture para inscribir un rostro nuevo o /recognize para compararlo.
3. El backend formatea la imagen y la envía al stack CompreFace levantado desde Docker.
4. El frontend muestra similitud, probabilidad y metadatos.

---

Requisitos previos

• ⚙️ Node.js ≥ 18 y 📦 npm/pnpm
• 🐳 Docker + Docker Compose (para 🧠 CompreFace)
• 📷 Cámara local o virtual habilitada en el navegador
• 🔐 Variables .env configuradas tanto en la raíz como en FrontEnd/faceApp/ y CompreFaceDok/

---

Configuración rápida

1. **⚙️ Backend **

   npm install
   npm run dev

2. 🧠 CompreFace sobre Docker

   cd CompreFaceDok
   docker compose up -d

3. ⚛️ Frontend Vite + React + TS

   cd FrontEnd/faceApp
   npm install
   npm run dev

4. Abrir http://localhost:5173 (o el puerto configurado) y probar la cámara.

---

Variables de entorno

Archivo	Clave	Significado
.env	PORT, COMPREFACE_URL, COMPREFACE_KEY	⚙️ Backend / proxy hacia 🧠 CompreFace
FrontEnd/faceApp/.env	VITE_API_URL	URL pública del ⚛️ frontend
CompreFaceDok/.env	Credenciales y llaves internas	Servicio 🧠 CompreFace

---

Scripts habituales

⚙️ Raíz (backend Node.js)

• npm run dev · modo desarrollo con recarga.
• npm run start · ejecución productiva.

⚛️ Frontend Vite + React

• npm run dev · servidor local de ⚡ Vite.
• npm run build · bundle listo para deploy.
• npm run preview · verificación del build.

🧠 CompreFace sobre 🐳 Docker

• docker compose up -d · levanta los contenedores.
• docker compose logs -f · seguimiento de inferencias.

---

API interna

Método	Endpoint	Cuerpo	Respuesta
POST	/capture	{ image: string, name: string }	Detalles del rostro agregado
POST	/recognize	{ image: string }	Lista de sujetos, similitud y caja

Las imágenes se envían en base64 (data:image/jpeg;base64,...).

En el frontend puedes alternar entre modos New y Recognize mediante el selector integrado en WebCapture.

---

Frontend

• Basado en Vite + React + TS; estilos locales por componente src/components/TodosLosComponentes.css.
• react-webcam captura imágenes a 1280×720, espejo activado.
• Manejo de estados para resultados positivos, vacíos y errores.
• UI responsiva con botón único que cambia de comportamiento según el modo seleccionado.

---

Workflows recomendados

1. Entrenamiento rápido
   • Selecciona New, captura varias fotos por sujeto con diferentes ángulos.
   • Verifica en la respuesta que recibes image_id.
2. Reconocimiento
   • Cambia a Recognize y compara contra la galería creada.
   • Ajusta umbrales en CompreFace si necesitas mayor precisión.
3. Depuración
   • Usa el panel docker compose logs para revisar el pipeline ML.
   • Activa el inspector de red del navegador y valida payloads.

---

Roadmap

• Persistencia avanzada de perfiles con metadatos externos.
• Notificaciones push cuando se detecte un rostro conocido.
• Optimización WebGL para filtros previos a la captura.
• Tests e2e para la UI de cámara.