Setup del proyecto de Face Detection

¿Cómo entender el proyecto PlatziLab FaceDetection?

El proyecto PlatziLab FaceDetection es el desafío que enfrentarás como co-fundador responsable de la implementación técnica. Este proyecto, alojado en el repositorio de GitHub, no solo busca detectar rostros, sino también implementar mejoras creativas. Partirás de un prototipo proporcionado, teniendo la libertad y el reto de expandir sus funcionalidades técnicas.

¿Qué encontrarás al descargar el proyecto?

Una vez descargado, instalado y ejecutado, el proyecto presenta la imagen de dos modelos con un panel a la derecha que ofrece diversas opciones. Analicemos algunos elementos clave:

1. Opciones desplegables:

   • Filtro: Aunque no realiza ninguna acción, es un campo perfecto para agregar funcionalidades futuras.
   • Options: Muestra ejemplos de lo que puedes crear, como los keypoints que ayudan a identificar características faciales claves como ojos y boca.

2. Componentes Importantes:

   • FaceDetector: Clase encargada de detectar caras en las imágenes. Ya está lista para el uso.
   • UserMedia: Controla si se utiliza una imagen o video, ofreciendo pistas sobre dónde modificar y mejorar.

¿Cómo iniciar con el código JavaScript?

El proyecto está construido sobre Vite, una herramienta óptima para desarrollar aplicaciones frontend trabajando con HTML, CSS y JavaScript. El código se ubica dentro de la carpeta src, que contiene:

• Componentes: Aquí destacan elementos como bounding box, keypoint y mesh, esenciales para entender la representación gráfica.
• Controladores y Utilidades: Enfocados en la programación orientada a objetos (POO) en JavaScript puro.

No tendrás que preocuparte por la configuración del backend, ya que todo funciona en el navegador del cliente, maximizando la facilidad de uso.

¿Por dónde empezar a explorar el código?

El archivo main.js es tu punto de partida esencial. Es el núcleo donde se integran los diferentes componentes y se inicializan las propiedades necesarias, como UserMedia, y asegura la cohesión de toda la aplicación.

1. Revisa los elementos iniciales: Considera UserMedia y cómo se activa con una imagen específica.
2. Explora el enlace de componentes: Observa cómo se implementan elementos gráficos como bounding box.
3. Desarrolla tu creatividad en MyFilter: Este es el espacio ideal para poner en práctica tus ideas de nuevos filtros.

¿Qué pasos seguir para instalar y ejecutar el proyecto?

Asegúrate de seguir estos pasos esenciales para comenzar con el proyecto:

1. Clonar el repositorio desde GitHub.
2. Instalar las dependencias necesarias mediante NPM.
3. Ejecutar el proyecto en modo desarrollo.

Estas acciones iniciales te configuran completamente para interactuar con el proyecto y comenzar a implementar mejoras significativas.

¿Cómo agregar valor al proyecto y participar activamente?

Tus contribuciones son vitales para el desarrollo del proyecto:

• Desarrolla y comparte tus filtros: Experimenta con diferentes implementaciones creativas.
• Envía imágenes de tus resultados: Comparte tus logros a través de los comentarios o mediante redes sociales mencionando los canales oficiales.
• Participa en pull requests: Aporta tus mejoras para ser revisadas por la comunidad y el equipo.

Adéntrate en la práctica del desarrollo web, tomando el control de cada faceta del proyecto. Tu creatividad es la clave para el progreso y éxito en este desafío. ¡Sigue adelante con confianza!