Setup del proyecto de Face Detection

Tomar el control de un proyecto existente y construir sobre él es una de las habilidades más valiosas en desarrollo web. En este laboratorio práctico, se presenta un prototipo funcional de detección de rostros listo para ser extendido con filtros personalizados, usando únicamente HTML, CSS y JavaScript puro en el navegador.

¿Cómo está organizado el repositorio de face detection?

El proyecto se encuentra en GitHub bajo el nombre Platzi Lab Face Detection [0:30]. En su README están descritos tanto los objetivos como los retos que se deben resolver. La instalación sigue el flujo estándar de cualquier proyecto basado en NPM: clonar el repositorio, instalar dependencias y correr el modo de desarrollo [3:50].

El proyecto fue creado con Vite, una herramienta especializada en aplicaciones front end [4:10]. Esto significa que no hay backend: todo corre directamente en el browser del usuario. Dentro de la carpeta src se encuentran cuatro directorios principales:

• Componentes: incluye bounding box, key point y mesh.
• Controladores: manejan la lógica de la aplicación.
• Plugins: extensiones del proyecto.
• Utilidades: funciones auxiliares.

El código está escrito en Vanilla JavaScript, sin TypeScript ni tipos definidos, pero aplica conceptos de programación orientada a objetos (POO) [4:30]. Esto lo convierte en un excelente ejercicio para practicar clases, herencia y encapsulamiento con JavaScript puro.

¿Qué funcionalidades ya están implementadas en el prototipo?

Al correr el proyecto se muestra una imagen con dos rostros y un panel lateral con opciones [1:20]. La sección de Filtros aparece vacía a propósito, mientras que en Options se encuentran funcionalidades ya operativas que sirven como ejemplo y guía [1:50].

¿Qué son los key points y el bounding box?

Al activar los key points [2:05], el sistema dibuja puntos sobre los ojos, la punta de la nariz, la boca y las orejas de cada rostro detectado. Si se unen todos esos puntos, se obtiene lo que se conoce como mesh, una malla facial. Además, el bounding box delimita el área del rostro con un rectángulo, información que proviene directamente del face detector [2:30].

La clase FaceDetector ya resuelve por completo la detección de rostros [4:55]. No es necesario preocuparse por implementar esa lógica; sin embargo, el código está disponible para revisarlo y entender su funcionamiento interno.

¿Cómo funciona la clase UserMedia?

Otra clase fundamental es UserMedia [5:15], que controla si la fuente es un video o una imagen. Esta distinción es una pista importante: el proyecto puede extenderse para trabajar con cámara en tiempo real, no solo con imágenes estáticas.

En el archivo main.js [5:40], punto de entrada de la aplicación, se inicializa user_media con una imagen llamada platzi.jpg. Luego se llama a la función app, que reúne todos los módulos, espera su inicialización y finalmente aplica los filtros sobre el contenido.

¿Por dónde empezar a crear filtros personalizados?

Dentro del código, las marcas TO DO señalan exactamente dónde intervenir y qué modificar para cumplir los retos [5:25]. El componente my-filter existe pero no hace nada todavía [3:10]; es el espacio reservado para desarrollar funcionalidades nuevas.

Una estrategia efectiva para comenzar es estudiar los componentes que ya funcionan:

• Revisar cómo se dibuja el bounding box alrededor del rostro.
• Entender cómo se renderizan los key points sobre los rasgos faciales.
• Analizar cómo el mesh conecta los puntos entre sí.

Con esa base, se pueden agregar imágenes, efectos visuales o cualquier elemento creativo usando conocimientos de desarrollo web [3:20]. El objetivo es explotar la información que el detector de rostros ya proporciona —coordenadas, cantidad de rostros, puntos faciales— y transformarla en filtros originales.

Los dos retos principales están definidos en el README del repositorio y deben completarse antes de ver la solución propuesta por el instructor en la siguiente sesión [7:00]. Como siempre en programación, existen múltiples caminos para llegar al mismo resultado.

Si has construido un filtro que te enorgullece, comparte capturas de pantalla o abre un pull request en el repositorio. La comunidad y el equipo estarán encantados de ver tu creatividad en acción.