Explora el código del laboratorio Face Detection

Laboratorio de JavaScript: Crea tu App de Filtros y Detección de Rostros

Contenido del curso

Prueba

Soluciones

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:19

Explora el código del laboratorio Face Detection

Laboratorio de JavaScript: Crea tu App de Filtros y Detección de Rostros

Clase 2 de 5

Clase 2 / 5

Recursos

El laboratorio Platzi Lab Face Detection te entrega un prototipo funcional en JavaScript para que practiques face detection en el navegador y construyas tus propios filtros sobre una base ya armada. La idea es que tomes el control del proyecto, entiendas su estructura y resuelvas dos retos como co-founder técnico de la startup ficticia.

¿Qué encontrarás en el repositorio Platzi Lab Face Detection?

El punto de partida es el repositorio en GitHub, donde el readme describe los retos y la guía de instalación [01:00]. Al clonar, instalar dependencias y correr en modo desarrollo, verás una interfaz con una imagen de referencia y un sidebar a la derecha con dos secciones desplegables.

Filtros: una sección que aún no hace nada y queda lista para que la conectes.
Options: aquí puedes activar key points, dibujar ojos, nariz, boca y orejas, además del bounding box.
My Filter: el espacio vacío donde vas a desarrollar tu propia creatividad.

¿Qué es el bounding box en face detection? Es el rectángulo que envuelve cada rostro detectado en la imagen. Forma parte de la información que devuelve el face detector junto con los puntos clave de la cara.

¿Cómo está construido el prototipo por dentro?

El proyecto usa Vite, una herramienta pensada para aplicaciones front-end, lo que significa que aquí no hay back-end: todo es HTML, CSS y JavaScript corriendo en el navegador del usuario [02:50]. Está escrito en Vanilla JavaScript, sin TypeScript ni tipos, y aplica conceptos de programación orientada a objetos.

Dentro de la carpeta src vas a encontrar cuatro grupos de archivos:

components: contiene bounding box, key point y mesh, que corresponden a lo que ves en la UI.
controllers: incluye la clase FaceDetector, que ya resuelve la detección de rostros, y UserMedia, que controla si la entrada es imagen o video.
plugins y utils: utilidades de soporte para la aplicación.

¿Por dónde empezar a modificar el código del laboratorio?

La mejor estrategia es entrar por lo que ya funciona. Revisa cómo se dibuja el bounding box, cómo se generan los key points y cómo el mesh une esos puntos para formar una malla sobre el rostro. Ese recorrido te da el patrón que necesitas para construir tu propio filtro.

Dentro del código vas a ver comentarios marcados con la palabra TODO. Esos son los puntos exactos donde debes empezar a escribir tu solución.

¿Para qué sirve la clase UserMedia? Es la encargada de definir la fuente de entrada del face detector: una imagen estática o un video en vivo. Es una pista clave para uno de los retos.

¿Qué hace el archivo main.js?

El archivo main.js es el punto de entrada de la aplicación [04:30]. Ahí se reúnen e inicializan todos los módulos con sus propiedades necesarias. Por ejemplo, userMedia se inicializa con la imagen Platzi.jpg, y luego se llama a app, que junta todo, espera la inicialización y aplica los filtros sobre el resultado.

Entender ese flujo te permite ver cómo se conectan los componentes entre sí y dónde inyectar tu lógica nueva sin romper lo existente.

¿Cómo instalar y correr el proyecto en local?

El proceso sigue el patrón típico de cualquier aplicación basada en npm:

Clonar el repositorio desde GitHub.
Instalar las dependencias con el gestor de paquetes.
Correr el proyecto en modo desarrollo para levantar el servidor local de Vite.

Una vez que el servidor esté arriba, podrás interactuar con la imagen de prueba, activar los key points y validar que el FaceDetector devuelve la información esperada antes de tocar myFilter.

¿Qué retos debes resolver como co-founder técnico?

Los retos están listados en el readme del repositorio y giran en torno a dos ejes principales: ampliar las capacidades del filtro y aprovechar la información que ya entrega el detector. La consigna es trabajar sobre myFilter, que hoy no hace nada, y convertirlo en algo visual y funcional.

Puedes sumar imágenes superpuestas, máscaras, efectos sobre los puntos clave o cualquier idea que se te ocurra usando lo que ya sabes de desarrollo web.

Cuando termines, abre un pull request con tu solución y comparte capturas en los comentarios o en Twitter mencionando a @JohnAlvarezz o @Platzi. ¿Qué filtro vas a construir primero?

Prueba

Qué es el laboratorio Face Detection de Platzi

Explora el código del laboratorio Face Detection

Soluciones

Filtro de Pokémon con Canvas y face detection

Reto: iteremos a video

Secretos ocultos del Laboratorio

Explora el código del laboratorio Face Detection

Progreso del curso

Prueba

Soluciones

Recursos

Recursos